@extends("layouts.master")
@section("title", "Gallery")

@section("content")
    <style>
        .gallery-thumb {
            aspect-ratio: 4 / 3;
            background: #f5f6fa;
            cursor: pointer;
            display: block;
            overflow: hidden;
            padding: 0;
            width: 100%;
        }

        .gallery-thumb img {
            height: 100%;
            object-fit: cover;
            transition: transform .3s ease;
            width: 100%;
        }

        .gallery-thumb:hover img {
            transform: scale(1.05);
        }

        .modal-backdrop {
            z-index: 100000 !important;
        }

        .gallery-lightbox {
            z-index: 100001 !important;
        }

        .gallery-lightbox .modal-dialog {
            max-width: min(92vw, 1000px);
        }

        .gallery-lightbox .modal-content {
            background: transparent;
            border: 0;
        }

        .gallery-lightbox__frame {
            align-items: center;
            display: flex;
            justify-content: center;
            min-height: 75vh;
            position: relative;
        }

        .gallery-lightbox__image {
            box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
            max-height: 82vh;
            max-width: 100%;
            object-fit: contain;
        }

        .gallery-lightbox__counter,
        .gallery-lightbox__close,
        .gallery-lightbox__nav {
            color: #fff;
            position: absolute;
            z-index: 2;
        }

        .gallery-lightbox__counter {
            font-size: 15px;
            left: 0;
            top: -38px;
        }

        .gallery-lightbox__close {
            background: transparent;
            border: 0;
            font-size: 30px;
            line-height: 1;
            right: 0;
            top: -42px;
        }

        .gallery-lightbox__nav {
            align-items: center;
            background: rgba(0, 0, 0, .25);
            border: 0;
            border-radius: 50%;
            display: flex;
            font-size: 28px;
            height: 46px;
            justify-content: center;
            top: 50%;
            transform: translateY(-50%);
            width: 46px;
        }

        .gallery-lightbox__nav:hover,
        .gallery-lightbox__close:hover {
            color: #f7c94e;
        }

        .gallery-lightbox__prev {
            left: -58px;
        }

        .gallery-lightbox__next {
            right: -58px;
        }

        @media (max-width: 767px) {
            .gallery-lightbox__prev {
                left: 10px;
            }

            .gallery-lightbox__next {
                right: 10px;
            }
        }
    </style>

    <div class="breadcrumb-wrapper bg-cover" style="background-image: url('{{ asset('assets/img/inner/breadcrumb.jpg') }}');">
        <div class="container">
            <div class="page-heading">
                <div class="breadcrumb-sub-title">
                    <h1 class="wow fadeInUp" data-wow-delay=".3s">Gallery</h1>
                </div>
                <ul class="breadcrumb-items wow fadeInUp" data-wow-delay=".5s">
                    <li>
                        <a href="{{ route('home') }}">
                            Home
                        </a>
                    </li>
                    <li>
                        <i class="fa-solid fa-chevron-right"></i>
                    </li>
                    <li>
                        Gallery
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <section class="section-padding">
        <div class="container">
            @forelse ($galleries as $gallery)
                <div class="mb-5 pb-5 {{ !$loop->last ? 'border-bottom' : '' }}">
                    <h2 class="mb-3 wow fadeInUp" style="font-size: 28px;">{{ $gallery->title }}</h2>
                    @if ($gallery->description)
                        <div class="mb-4 text-muted wow fadeInUp" data-wow-delay=".1s">
                            {!! nl2br(e($gallery->description)) !!}
                        </div>
                    @endif
                    <div class="row g-4">
                        @foreach ($gallery->images as $image)
                            @php
                                $imageUrl = asset('storage/' . ltrim($image->image_path, '/'));
                                $imageAlt = $image->alt_text ?: $gallery->title;
                            @endphp
                            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".{{ min($loop->iteration, 5) }}s">
                                <div class="gallery-item h-100 overflow-hidden rounded-2 border">
                                    <button type="button" class="gallery-thumb border-0 gallery-lightbox-trigger"
                                        data-image-src="{{ $imageUrl }}" data-image-alt="{{ $imageAlt }}"
                                        data-image-title="{{ $gallery->title }}" aria-label="View {{ $imageAlt }}">
                                        <img src="{{ $imageUrl }}" alt="{{ $imageAlt }}">
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @empty
                <p class="text-center text-muted">No gallery albums have been published yet.</p>
            @endforelse
        </div>
    </section>

    <div class="modal fade gallery-lightbox" id="galleryLightbox" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="gallery-lightbox__frame">
                    <span class="gallery-lightbox__counter" data-gallery-counter></span>
                    <button type="button" class="gallery-lightbox__close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                    <button type="button" class="gallery-lightbox__nav gallery-lightbox__prev" data-gallery-prev
                        aria-label="Previous image">
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                    <img src="" alt="" class="gallery-lightbox__image" data-gallery-image>
                    <button type="button" class="gallery-lightbox__nav gallery-lightbox__next" data-gallery-next
                        aria-label="Next image">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const triggers = Array.from(document.querySelectorAll(".gallery-lightbox-trigger"));
            const modalElement = document.getElementById("galleryLightbox");

            if (!triggers.length || !modalElement || typeof bootstrap === "undefined") {
                return;
            }

            const modal = new bootstrap.Modal(modalElement);
            const imageElement = modalElement.querySelector("[data-gallery-image]");
            const counterElement = modalElement.querySelector("[data-gallery-counter]");
            const prevButton = modalElement.querySelector("[data-gallery-prev]");
            const nextButton = modalElement.querySelector("[data-gallery-next]");
            let activeIndex = 0;

            const showImage = function(index) {
                activeIndex = (index + triggers.length) % triggers.length;
                const trigger = triggers[activeIndex];

                imageElement.src = trigger.dataset.imageSrc;
                imageElement.alt = trigger.dataset.imageAlt || trigger.dataset.imageTitle || "Gallery image";
                counterElement.textContent = `${activeIndex + 1} / ${triggers.length}`;
            };

            triggers.forEach(function(trigger, index) {
                trigger.addEventListener("click", function() {
                    showImage(index);
                    modal.show();
                });
            });

            prevButton.addEventListener("click", function() {
                showImage(activeIndex - 1);
            });

            nextButton.addEventListener("click", function() {
                showImage(activeIndex + 1);
            });

            document.addEventListener("keydown", function(event) {
                if (!modalElement.classList.contains("show")) {
                    return;
                }

                if (event.key === "ArrowLeft") {
                    showImage(activeIndex - 1);
                }

                if (event.key === "ArrowRight") {
                    showImage(activeIndex + 1);
                }
            });
        });
    </script>

@endsection