@push('style')
<style>
    .swiper {
        padding: 20px 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: #000;
        background: rgba(255, 255, 255, 0.8);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 20px;
    }

    .swiper-pagination-bullet-active {
        background: #000;
    }
</style>
@endpush
<div class="!bg-luxury-cream pt-7">
    <div class="h-8 w-full !bg-luxury-cream"></div>
    <div class="swiper mySwiper2 h-[80vh] p-2">
        <div class="swiper-wrapper h-full">
            @foreach ($mediaVideos as $index => $media)
            <div class="swiper-slide h-auto">
                <div class="h-full flex flex-col justify-center border-2 border-gray-200 rounded-lg">
                    <video
                        autoplay
                        muted
                        loop
                        playsinline
                        class="w-full h-full object-cover rounded-md"
                        src="{{ asset(Storage::url($media->path)) }}"
                        alt="{{ __('slide '. $index) }}"></video>
                </div>
            </div>
            @endforeach
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination !relative !top-3/10"></div>
        <!-- Navigation buttons -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="h-12 w-full !bg-luxury-cream"></div>

    <section class="py-6 bg-white">
        <div class="container mx-auto px-1">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

                {{-- Videos Content --}}
                <div class="lg:col-span-2">
                    <div class="mb-8">
                        @if ($vipGuest->translations->first()->videosDescription)
                        <p class="font-inter text-lg text-luxury-charcoal leading-relaxed mb-6">
                            {{ $vipGuest->translations->first()->videosDescription }}
                        </p>
                        @endif
                    </div>
                </div>
    </section>

    <div class="bg-white swiper mySwiper h-[80vh] p-2">
        <div class="swiper-wrapper h-full">
            @foreach ($mediaPhotos as $index => $media)
            <div class="swiper-slide h-auto">
                <div class="h-full flex flex-col justify-center border-2 border-gray-200 rounded-lg">
                    <img src="{{ asset(Storage::url($media->path)) }}" alt={{ __("slide ". $index) }} class="w-full h-full object-cover rounded-md">
                </div>
            </div>
            @endforeach
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination !relative !top-3/10"></div>
        <!-- Navigation buttons -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

    <section class="py-6 bg-white">
        <div class="container mx-auto px-1">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

                {{-- images Content --}}
                <div class="lg:col-span-2">
                    <div class="mb-8">
                        @if ($vipGuest->translations->first()->imagesDescription)
                        <p class="font-inter text-lg text-luxury-charcoal leading-relaxed mb-6">
                            {{ $vipGuest->translations->first()->imagesDescription }}
                        </p>
                        @endif
                    </div>
                </div>
                @if ($previousId)
                <div class="flex items-center justify-end mt-4">
                    <a class="text-luxury-action-secondary hover:text-luxury-action" href="{{ route('vip-guests-details', ['id' => $previousId]) }}">
                        visit the next blog: {{ $prevVipGuest->translations->first()->name }} ->
                    </a>
                </div>
                @endif
    </section>


</div>





@push('js')
<!-- Swiper JS -->
<script src=" https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    document.addEventListener('livewire:initialized', function() {
        // Wait for Livewire to finish rendering
        setTimeout(() => {
            const swiper = new Swiper('.mySwiper', {
                loop: true,
                slidesPerView: 1,
                spaceBetween: 30,
                centeredSlides: true,
                on: {
                    slideChange: function() {
                        const activeSlide = this.slides[this.activeIndex];
                        const video = activeSlide.querySelector('video');
                        if (video) {
                            video.currentTime = 0; // Restart video when it becomes active
                            video.play().catch(e => console.log('Autoplay prevented:', e));
                        }
                    }
                },
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                breakpoints: {
                    640: {
                        slidesPerView: 1,
                        spaceBetween: 20
                    },
                    1024: {
                        slidesPerView: 1,
                        spaceBetween: 30
                    }
                }
            });

            const swiper2 = new Swiper('.mySwiper2', {
                loop: false,
                slidesPerView: 1,
                spaceBetween: 30,
                centeredSlides: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                breakpoints: {
                    640: {
                        slidesPerView: 1,
                        spaceBetween: 20
                    },
                    1024: {
                        slidesPerView: 1,
                        spaceBetween: 30
                    }
                }
            });

        }, 100);
    });
</script>
@endpush