@php
    $single = $single ?? false;


    $galleryImagesJson = json_encode(
        $gallery && $gallery->images->count()
            ? $gallery->images->map(fn($img) => [
                'src' => asset('storage/' . $img->original_path),
                'title' => $img->caption ?? $img->title ?? '',
                'subtitle' => $img->subtitle ?? '',
            ])
            : []
    );

    $responsiveJson = json_encode(
        $single ? [
            '0' => ['items' => 1],
            '568' => ['items' => 1],
            '1024' => ['items' => 1],
            '1200' => ['items' => 1],
            '1400' => ['items' => 1],
            '1600' => ['items' => 1],
        ] : [
            '0' => ['items' => 1],
            '568' => ['items' => 2],
            '1024' => ['items' => 3],
            '1200' => ['items' => 3],
            '1400' => ['items' => 4],
            '1600' => ['items' => 4],
        ]
    );

@endphp
@if($gallery)
<div class="home-gallery">
    <div class="carousel-wrapper">
        <div class="owl-carousel">
            @if($gallery && $gallery->images->count())
                @foreach($gallery->images as $i => $image)
                    <div class="item">
                        <div class="note-cart" data-index="{{ $i }}">
                            <img
                                src="{{ asset('storage/' . ($image->original_path ?? 'fallback.jpg')) }}"
                                srcset="
                                    {{ $image->small_path ? asset('storage/' . $image->small_path) . ' 400w, ' : '' }}
                                    {{ $image->medium_path ? asset('storage/' . $image->medium_path) . ' 800w, ' : '' }}
                                    {{ asset('storage/' . $image->original_path) . ' 1200w' }}"
                                sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
                                alt="{{ $image->alt_text ?? $image->caption ?? $image->title ?? 'Image' }}"
                                loading="lazy"
                            />

                            <div class="content">
                                <span class="title">{{ $image->caption ?? $image->title ?? 'Untitled' }}</span>
                                @if($image->subtitle ?? false)
                                    <span class="subtitle">{{ $image->subtitle }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <div class="item">
                    <div class="note-cart">
                        <div class="content">
                            <span class="title">No images found in this gallery.</span>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- Modal --}}
        <dialog class="gallery-modal" id="galleryModal_{{ $gallery->id }}">
            <div class="modal-content">
                <div class="modal-image">
                    <img src="" alt="" id="modalImage_{{ $gallery->id }}">
                    <div class="modal-labels">
                        <span class="title" id="modalTitle_{{ $gallery->id }}">Title</span>
                        <span class="subtitle" id="modalSubtitle_{{ $gallery->id }}">Subtitle</span>
                    </div>
                </div>
                <i class="fa fa-chevron-right" id="next_{{ $gallery->id }}"></i>
                <i class="fa fa-chevron-left" id="prev_{{ $gallery->id }}"></i>
                <i class="fa fa-times" id="close_{{ $gallery->id }}"></i>
            </div>
        </dialog>
    </div>

    {{-- Pass images as JSON to JS --}}
    <script>
        window.galleryImages = {!! $galleryImagesJson !!};
    </script>

    <script>
        $(document).ready(function () {
            const responsive = {!! $responsiveJson !!};

            $('.owl-carousel').owlCarousel({
                loop: true,
                margin: 20,
                nav: true,
                dots: false,
                responsive: responsive
            });
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const galleryId = @json($gallery->id);
            const modal = document.getElementById('galleryModal_' + galleryId);
            const modalImg = document.getElementById('modalImage_' + galleryId);
            const modalTitle = document.getElementById('modalTitle_' + galleryId);
            const modalSubtitle = document.getElementById('modalSubtitle_' + galleryId);
            const nextBtn = document.getElementById('next_' + galleryId);
            const prevBtn = document.getElementById('prev_' + galleryId);
            const closeBtn = document.getElementById('close_' + galleryId);

            const images = window.galleryImages || [];
            let currentIndex = 0;

            // Track the scroll position to restore after modal close
            let lastScrollY = 0;


            function openModal(index) {
                currentIndex = index;
                updateModal();
                lastScrollY = window.scrollY;
                document.body.style.position = 'fixed';
                document.body.style.top = `-${lastScrollY}px`;
                document.body.style.left = '0';
                document.body.style.right = '0';
                modal.showModal();
            }

            function closeModal() {
                modal.close();
                document.body.style.position = '';
                document.body.style.top = '';
                document.body.style.left = '';
                document.body.style.right = '';
                window.scrollTo(0, lastScrollY);
            }

            function updateModal() {
                const image = images[currentIndex];
                modalImg.src = image.src;
                modalTitle.textContent = image.title;
                modalSubtitle.textContent = image.subtitle;
            }

            function showNext() {
                currentIndex = (currentIndex + 1) % images.length;
                updateModal();
            }

            function showPrev() {
                currentIndex = (currentIndex - 1 + images.length) % images.length;
                updateModal();
            }


            // Delegated click, always works (even for cloned slides)
            document.querySelector('.owl-carousel').addEventListener('click', function(e) {
                const noteCart = e.target.closest('.note-cart');
                if (!noteCart) return;
                const index = parseInt(noteCart.getAttribute('data-index'), 10);
                if (!isNaN(index)) {
                    openModal(index);
                }
            });

            nextBtn.addEventListener('click', showNext);
            prevBtn.addEventListener('click', showPrev);
            closeBtn.addEventListener('click', closeModal);

            modal.addEventListener('click', (e) => {
                if (e.target === modal) closeModal();
            });
        });
    </script>
</div>
@else
    <p>No gallery found.</p>
@endif