@props(['sliders'])

<!-- Incluir CSS de Swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<div class="max-w-[1280px] mx-auto mt-[-100px] md:mt-[-150px]">
    <div class="relative mt-5 h-[50%] md:h-[30%] z-10 lg:px-[48px] w-full md:px-8 p-1">
        <div class="swiper mainSlider relative overflow-hidden rounded-[20px] md:rounded-[40px]">
            <div class="swiper-wrapper">
                @foreach ($sliders as $slider)
                <div class="swiper-slide">
                    <a href="{{$slider['link']}}">
                        <picture>
                            @php
                                $base_url = env('CDN_URL') . '/' . $slider['folder'];
                                $poster_url = $base_url . '/' . $slider['poster'];
                                $poster_mobile_url = $base_url . '/' . $slider['poster_mobile'];
                            @endphp
                        
                            <source media="(min-width: 668px)"
                                    srcset="{{ $poster_url ?: asset('storage/default/imageDefault2.jpg') }}">
                        
                            <source media="(max-width: 667px)"
                                    srcset="{{ $poster_mobile_url ?: asset('storage/default/imageDefault2.jpg') }}">
                        
                            <img src="{{ $poster_url ?: asset('storage/default/imageDefault2.jpg') }}"
                                 alt="{{ $slider['title'] }}" 
                                 class="w-full rounded-[20px] md:rounded-[40px]"
                                 loading="lazy"
                                 decoding="async"
                                 fetchpriority="high">
                        </picture>
                    </a>
                </div>
                @endforeach
            </div>

            <!-- Botones de navegación -->
            <button
                class="swiper-button-prev !absolute md:!top-52 !top-36 !left-1 transform -translate-y-1/2 !w-7 !h-7 md:!w-12 md:!h-12 bg-gray-50 hover:bg-white rounded-full flex items-center justify-center shadow-lg after:!content-['']">
                <img src="{{ asset('storage/icons/arrow_back_ios.svg') }}" class="w-4 h-4 md:w-5 md:h-5"
                    alt="Previous" />
            </button>
            <button
                class="swiper-button-next !absolute  md:!top-52 !top-36 !right-1 transform -translate-y-1/2 z-10 !w-7 !h-7 md:!w-12 md:!h-12 bg-gray-50 hover:bg-white rounded-full flex items-center justify-center shadow-lg after:!content-['']">
                <img src="{{ asset('storage/icons/arrow_forward_ios.svg') }}" class="w-4 h-4 md:w-5 md:h-5"
                    alt="Next" />
            </button>

            <!-- Paginación -->
            <div class="swiper-pagination absolute bottom-4 left-1/2 transform -translate-x-1/2 z-10"></div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const swiper = new Swiper('.mainSlider', {
            loop: true,
            effect: 'slide',
            speed: 500,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    });
</script>