@php
    use App\Helpers\Helper;
@endphp

@php
    use App\Enum\GalleryTypeEnum;
@endphp

@push('styles')
    <style>
        /* Swiper fade-in effect */
        #section-gallary .swiper {
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        #section-gallary .swiper.ready {
            opacity: 1;
        }

        /* Coverflow look: centre slide sharp and full size, neighbours behind it and dimmed,
           outer slides fade into the section background */
        #section-gallary .swiper {
            padding-block: 1.5rem 0.5rem;
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
        }

        /* Sizes live here (not in utility classes) so Swiper measures the real width at init,
           even when the Tailwind CDN script has not generated its classes yet. */
        #section-gallary .swiper-slide {
            flex-shrink: 0;
            width: 220px;
            height: 300px;
            border-radius: 0.75rem;
        }

        @media (min-width: 640px) {
            #section-gallary .swiper-slide {
                width: 260px;
                height: 350px;
            }
        }

        @media (min-width: 1024px) {
            #section-gallary .swiper-slide {
                width: 315px;
                height: 422px;
            }
        }

        #section-gallary .swiper-slide-active {
            box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.55);
        }

        #section-gallary .swiper-slide {
            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, filter 0.6s ease;
            opacity: 0.55;
            filter: brightness(0.75);
        }

        #section-gallary .swiper-slide-prev,
        #section-gallary .swiper-slide-next {
            opacity: 0.9;
            filter: brightness(0.9);
        }

        #section-gallary .swiper-slide-active {
            opacity: 1;
            filter: none;
        }

        #section-gallary .swiper-pagination {
            position: static;
            margin-top: 1.5rem;
        }

        #section-gallary .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            background: #fff;
            opacity: 0.35;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        #section-gallary .swiper-pagination-bullet-active {
            opacity: 1;
            transform: scale(1.25);
        }

        /* Video wrapper for responsive iframe */
        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            /* 16:9 */
            height: 0;
            overflow: hidden;
            border-radius: 10px;
        }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* Modal responsiveness */
        @media (max-width: 640px) {
            #videoGalleryModal>div {
                max-height: 90vh;
            }
        }
    </style>
@endpush

<div id="gallary-section" class="bg-brand-gradient w-full font-poppins overflow-hidden">
    <div class="flex flex-col section-y">
        <!-- Gallery Title -->
        <x-section-heading id="galary-title" tone="dark" align="center"
            :eyebrow="Helper::contentText('homepage.image_video_gallery')" class="mb-8!" />

        <!-- Swiper Gallery -->
        <div id="section-gallary"
            class="flex flex-col relative w-full justify-center items-center px-4 sm:px-6 lg:px-8 overflow-hidden">
            <div class="swiper w-full max-w-6xl mx-auto">
                <div class="swiper-wrapper">
                    @foreach ($galleries as $gallery)
                        <div class="swiper-slide relative">

                            @if ($gallery->type == GalleryTypeEnum::IMAGE->value)
                                <!-- IMAGE → Redirect to detail page -->
                                <a href="{{ route('gallery-detail', $gallery->slug) }}" class="block w-full h-full">
                                    <img alt="" loading="lazy" decoding="async" src="{{ asset($gallery->cover_image) }}"
                                        class="w-full h-full object-cover rounded-xl shadow-lg">
                                </a>
                            @else
                                <!-- VIDEO Thumbnail -->
                                <img alt="" loading="lazy" decoding="async" src="{{ asset($gallery->cover_image) }}"
                                    class="w-full h-full object-cover rounded-xl shadow-lg">

                                <!-- Play Button (Open Video Modal) -->
                                <button type="button" aria-label="Play video"
                                    class="absolute inset-0 flex items-center justify-center bg-black/15 hover:bg-black/30 rounded-xl transition"
                                    data-video-url="{{ $gallery->value }}" onclick="openVideoModal(this)">
                                    <span
                                        class="flex items-center justify-center w-12 h-12 rounded-full bg-white/85 text-gray-800 shadow-md transition-transform duration-300 hover:scale-110">
                                        <i class="fa-solid fa-play ml-0.5"></i>
                                    </span>
                                </button>
                            @endif

                        </div>
                    @endforeach
                </div>
                <div class="swiper-pagination"></div>
            </div>

            <x-see-all :href="route('gallery')" tone="dark" class="mt-8" />
        </div>
    </div>
</div>

<!-- Video Modal -->
<div id="videoGalleryModal" class="hidden fixed inset-0 bg-black/70 z-overlay flex items-center justify-center p-4">
    <div
        class="relative w-full max-w-4xl sm:max-w-3xl md:max-w-4xl lg:max-w-5xl bg-black rounded-xl overflow-hidden shadow-lg
                flex items-center justify-center max-h-[90vh]">
        <!-- Close Button -->
        <button id="closeVideoGalleryModal"
            class="absolute top-3 right-3 text-white text-2xl font-bold hover:text-gray-300 transition z-10">
            &times;
        </button>

        <!-- Video Frame Wrapper -->
        <div class="w-full h-full relative aspect-video">
            <iframe id="videoGalleryFrame" src="" title="Video Player" allowfullscreen
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                class="absolute top-0 left-0 w-full h-full rounded-xl">
            </iframe>
        </div>
    </div>
</div>


@push('scripts')
    <script>
        (function() {
            const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

            if (!reduceMotion && window.gsap) {
                gsap.registerPlugin(ScrollTrigger);
                gsap.from("#gallary-section #galary-title", {
                    y: 24,
                    opacity: 0,
                    duration: 0.7,
                    ease: "power2.out",
                    scrollTrigger: {
                        trigger: "#gallary-section",
                        start: "top 80%",
                        once: true
                    }
                });
                gsap.from("#gallary-section .swiper", {
                    y: 40,
                    duration: 0.9,
                    ease: "power2.out",
                    scrollTrigger: {
                        trigger: "#gallary-section",
                        start: "top 75%",
                        once: true
                    }
                });
            }

            window.gallerySwiper = new Swiper("#gallary-section .swiper", {
                effect: "coverflow",
                grabCursor: true,
                centeredSlides: true,
                slidesPerView: "auto",
                initialSlide: 1,
                spaceBetween: -40,
                speed: 700,
                keyboard: {
                    enabled: true
                },
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 160,
                    modifier: 1,
                    slideShadows: false
                },
                loop: true,
                autoplay: reduceMotion ? false : {
                    delay: 5000,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true
                },
                pagination: {
                    el: "#gallary-section .swiper-pagination",
                    clickable: true
                },
                on: {
                    init: function() {
                        this.update();
                        this.slideTo(this.activeIndex, 0, false);
                        this.setTranslate();
                        this.setTransition(0);
                        document.querySelector("#section-gallary .swiper").classList.add("ready");
                    }
                }
            });

            // Re-measure once images and fonts are in, and on resize, so the active slide stays centred
            const refresh = () => {
                window.gallerySwiper.update();
                window.gallerySwiper.slideToLoop(window.gallerySwiper.realIndex, 0, false);
            };
            window.addEventListener("load", refresh);
            window.addEventListener("resize", refresh);
        })();

        const videoModal = document.getElementById('videoGalleryModal');
        const videoFrame = document.getElementById('videoGalleryFrame');
        const closeModal = document.getElementById('closeVideoGalleryModal');

        function openVideoModal(button) {
            const url = button.dataset.videoUrl;
            if (!url) return;
            videoFrame.src = url + '?autoplay=1';
            videoModal.classList.remove('hidden');
        }

        closeModal.addEventListener('click', () => {
            videoModal.classList.add('hidden');
            videoFrame.src = '';
        });

        videoModal.addEventListener('click', (e) => {
            if (e.target === videoModal) {
                videoModal.classList.add('hidden');
                videoFrame.src = '';
            }
        });
    </script>
@endpush