@props([
    'images' => [],
    'current' => '',
    'alt' => '',
])

<div x-data="gallery(@js($images))" wire:ignore class="w-full">

    <!-- Main Carousel -->
    <section class="splide main-gallery" aria-label="Product Gallery">
        <div class="splide__track">
            <ul class="splide__list">
                @foreach ($images as $image)
                    <li class="splide__slide flex justify-center items-center px-6">
                        <div class="relative w-full aspect-[4/3] max-w-4xl mx-auto cursor-zoom-in group"
                            @click="openZoom('{{ $image }}')">
                            <img src="{{ $image }}" alt="{{ $alt }}"
                                class="w-full h-full object-contain transition-transform duration-500 group-hover:scale-105">
                            <!-- Overlay Hint -->
                            <div
                                class="absolute inset-0 bg-black/5 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                <span
                                    class="bg-white/80 backdrop-blur px-3 py-1 rounded-full text-xs font-bold shadow-lg">Clic
                                    para ampliar</span>
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    </section>


    <!-- Zoom Modal -->
    <div x-show="zoomOpen" x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-90" x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"
        class="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4" x-cloak
        @keydown.escape.window="closeZoom">

        <!-- Close Button -->
        <button @click="closeZoom" class="absolute top-4 right-4 text-white hover:text-gray-300 z-50">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" class="w-10 h-10">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
        </button>

        <!-- Zoomed Image Container -->
        <div class="relative w-full h-full flex items-center justify-center" @click.outside="closeZoom">
            <img :src="zoomImage" class="max-w-full max-h-full object-contain rounded-lg shadow-2xl">
        </div>
    </div>

</div>

@pushOnce('after-css')
    <link rel="stylesheet" href="{{ asset('plugins/splide/css/splide-core.min.css') }}">
    <style>
        .splide__pagination {
            bottom: -1.5rem;
        }

        .splide__pagination__page {
            background: #d1d5db;
            /* gray-300 */
            width: 8px;
            border-radius: 50%;
            height: 8px;
            margin: 0 4px;
            transition: all 0.3s ease;
        }

        .splide__pagination__page.is-active {
            background: #c01720;
            /* Red */
            transform: scale(1.2);
            opacity: 1;
        }
    </style>
@endpushOnce

@pushOnce('scripts')
    <script src="{{ asset('plugins/splide/js/splide.min.js') }}" defer></script>
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('gallery', (images) => ({
                zoomOpen: false,
                zoomImage: '',

                init() {
                    // Initialize Splide when Alpine initializes layout
                    // Using $nextTick to ensure DOM is ready
                    this.$nextTick(() => {
                        const splideEl = this.$el.querySelector('.splide');
                        if (splideEl) {
                            new Splide(splideEl, {
                                type: 'loop',
                                perPage: 2,
                                autoplay: true,
                                focus: 'center',
                                pagination: true, // Dots enabled
                                arrows: false, // Show arrows if needed, or false
                                breakpoints: {
                                    640: {
                                        perPage: 1,
                                    },
                                }
                            }).mount();
                        }
                    });
                },

                openZoom(src) {
                    this.zoomImage = src;
                    this.zoomOpen = true;
                    document.body.style.overflow = 'hidden'; // Prevent scrolling
                },

                closeZoom() {
                    this.zoomOpen = false;
                    document.body.style.overflow = '';
                }
            }))
        });
    </script>
@endpushOnce