@extends('layouts.frontend')

@section('content')
    @include('frontend.partials.inner-hero', [
        'title' => 'Gallery',
        'eyebrow' => 'Kalakshetra in Frames',
        'summary' => 'A curated visual journey through campus spaces, events, artefacts and cultural performances.',
        'image' => $heroImage,
        'breadcrumbs' => ['Gallery' => null],
    ])

    <section class="content-container my-space-xl py-space-md">
        @include('frontend.partials.section-heading', [
            'eyebrow' => 'Photo Gallery',
            'title' => 'Moments from Kalakshetra',
            'summary' => 'Browse selected campus photographs, performances, exhibitions and cultural moments.',
        ])
        <div class="gallery-grid">
            @foreach ($images as $image)
                <figure class="gallery-item bg-surface-container-lowest rounded-xl overflow-hidden shadow-sm border border-surface-container"
                    data-bs-toggle="modal" data-bs-target="#galleryModal" data-index="{{ $loop->index }}" data-image="{{ $image['image'] }}" data-caption="{{ $image['caption'] }}">
                    <img src="{{ $image['image'] }}" alt="{{ $image['caption'] }}">
                    <figcaption class="p-space-sm font-body-sm text-body-sm text-on-surface-variant">{{ $image['caption'] }}</figcaption>
                </figure>
            @endforeach
        </div>
    </section>

    <div class="modal fade" id="galleryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content bg-inverse-surface text-surface-bright">
                <div class="modal-header border-0">
                    <h5 class="modal-title font-title-lg text-title-lg">Kalakshetra Gallery</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img id="galleryModalImage" class="w-full rounded-lg" src="" alt="">
                    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mt-space-md">
                        <p id="galleryModalCaption" class="mb-0 font-body-md text-body-md"></p>
                        <div class="d-flex gap-2">
                            <button id="galleryPrev" class="px-3 py-2 rounded bg-surface-container-lowest/15 hover:bg-surface-container-lowest/25 text-surface-bright"
                                type="button">Previous</button>
                            <button id="galleryNext" class="px-3 py-2 rounded bg-primary-container text-on-primary"
                                type="button">Next</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (() => {
            const items = @json($images);
            let activeIndex = 0;
            const image = document.getElementById('galleryModalImage');
            const caption = document.getElementById('galleryModalCaption');

            const showImage = (index) => {
                activeIndex = (index + items.length) % items.length;
                image.src = items[activeIndex]?.image || '';
                image.alt = items[activeIndex]?.caption || '';
                caption.textContent = items[activeIndex]?.caption || '';
            };

            document.getElementById('galleryModal')?.addEventListener('show.bs.modal', (event) => {
                showImage(Number(event.relatedTarget?.dataset.index || 0));
            });

            document.getElementById('galleryPrev')?.addEventListener('click', () => {
                showImage(activeIndex - 1);
            });

            document.getElementById('galleryNext')?.addEventListener('click', () => {
                showImage(activeIndex + 1);
            });
        })();
    </script>
@endpush