@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)
                    <!-- Swipper Slide -->
                    <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-30"></div>
                        <!-- Content -->
                        <div
                            class="container absolute left-1/2 top-0 flex h-full w-full -translate-x-1/2 flex-col justify-center px-2 md:px-[20px] lg:px-[100px] xl:px-[169px]">
                            <div class="w-full space-y-4 text-white sm:w-[300px] md:w-[350px] lg:w-[467px]">
                                {!! $value->content !!}
                                <a href="{{ $value->btn_url }}"
                                    class="mt-4 inline-block w-fit rounded-[7px] bg-[#FF4800] px-3 py-2 text-[10px] font-semibold transition-colors hover:bg-[#f04400] md:px-4 md:py-3 xl:text-[13px]">
                                    {{ $value->btn_name }}
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- Swipper Slide -->
                @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-white sm:flex">
            <!-- navigation left button -->
            <span id="nav-left"
                class="transition-color cursor-pointer rounded-full bg-[#FF4800] px-3 py-1 hover:bg-[#f04400]"><i
                    class="fa-solid fa-chevron-left"></i></span>
            <!-- navigation right button -->
            <span id="nav-right"
                class="transition-color cursor-pointer rounded-full bg-[#FF4800] px-3 py-1 hover:bg-[#f04400]">
                <i class="fa-solid fa-chevron-right"></i>
            </span>
        </div>
    </div>
</section>