@props(['data'])
@php
    $parent = reset($data);
    $child = array_values(array_slice($data, 1));

@endphp

<!-- Carousel banner -->
<section>
    <div class="swiper" id="swiper-1" class="relative">
        <!-- Swiper Wrapper -->
        <div class="swiper-wrapper">
            <!-- Swipper Slide -->
            @if (!empty($child[0]))

                @foreach ($child[0] as $value)
                    <div class="swiper-slide relative">
                        <!-- Image -->
                        <img src="{{ asset('images/' . $value->image) }}" alt="banner"
                            class="h-[514px] w-full object-cover object-center" />
                        <!-- Overlay -->
                        <div class="absolute left-0 top-0 h-full w-full bg-black opacity-80"></div>
                        <!-- Content -->
                        <div
                            class="absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-2 text-center text-white sm:w-[500px] md:w-[550px] lg:w-[700px] xl:w-[800px]">
                            {!! $value->content !!}
                            <a href="{{ $value->btn_url }}"
                                class="mt-4 inline-block w-fit rounded-[11px] bg-[#F06728] px-3 py-2 text-[10px] font-bold transition-colors hover:bg-[#d15513] md:px-4 md:py-3 xl:text-[14px]">
                                {{ $value->btn_name }}
                            </a>
                        </div>
                    </div>
                @endforeach
            @endif

        </div>

        <!-- Swiper Navigation -->
        <div
            class="swiper-custon-nav absolute left-0 top-1/2 z-10 hidden w-full -translate-y-1/2 justify-between px-4 py-2 text-xl text-orange-500 sm:flex">
            <!-- navigation left button -->
            <span id="nav-left"
                class="transition-color cursor-pointer rounded-md bg-[#2F2B2B] px-3 py-1 hover:bg-[#292525]"><i
                    class="fa-solid fa-chevron-left"></i></span>
            <!-- navigation right button -->
            <span id="nav-right"
                class="transition-color cursor-pointer rounded-md bg-[#2F2B2B] px-3 py-1 hover:bg-[#292525] md:bg-[#]">
                <i class="fa-solid fa-chevron-right"></i>
            </span>
        </div>
    </div>
</section>
