@extends('layouts.frontend')

@section('title', $gallery->title . ' - Gallery')

@section('content')
<div class="gallery-detail-page">
    <div class="container-fluid">
        <!-- Gallery Header -->
        <div class="gallery-header mb-5">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-8">
                        <div class="gallery-info">
                            <div class="gallery-date-badge mb-3">
                                <span class="badge bg-primary fs-6 px-3 py-2">{{ $gallery->formatted_date }}</span>
                            </div>
                            <h1 class="gallery-title display-4 fw-bold">{{ $gallery->title }}</h1>
                            @if($gallery->description)
                                <p class="gallery-description lead text-muted mt-3">{{ $gallery->description }}</p>
                            @endif
                            <div class="gallery-meta mt-4">
                                <span class="image-count me-3">
                                    <i class="bi bi-images me-2"></i>
                                    {{ $gallery->images ? count($gallery->images) : 0 }} Photos
                                </span>
                                <a href="{{ route('frontend.galleries.index') }}" class="btn btn-outline-primary">
                                    <i class="bi bi-arrow-left me-2"></i>Back to Galleries
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        @if($gallery->primary_image)
                            <div class="gallery-hero-image">
                                <img src="{{ $gallery->primary_image }}"
                                     alt="{{ $gallery->title }}"
                                     class="img-fluid rounded shadow">
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Gallery Images Grid -->
        @if($gallery->images && count($gallery->images) > 0)
            <div class="gallery-grid">
                <div class="container">
                    <div class="row g-3">
                        @foreach($gallery->images as $index => $image)
                            <div class="col-lg-4 col-md-6">
                                <div class="gallery-item" data-bs-toggle="modal" data-bs-target="#imageModal" data-image="{{ $image }}" data-index="{{ $index }}">
                                    <div class="gallery-item-inner">
                                        <img src="{{ $image }}"
                                             alt="{{ $gallery->title }} - Image {{ $index + 1 }}"
                                             class="gallery-img">
                                        <div class="gallery-item-overlay">
                                            <div class="gallery-item-actions">
                                                <i class="bi bi-zoom-in fs-4"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @else
            <div class="container">
                <div class="text-center py-5">
                    <i class="bi bi-images text-muted mb-3" style="font-size: 4rem;"></i>
                    <h3 class="text-muted">No Images in This Gallery</h3>
                    <p class="text-muted">This gallery doesn't contain any images yet.</p>
                    <a href="{{ route('frontend.galleries.index') }}" class="btn btn-primary">
                        <i class="bi bi-arrow-left me-2"></i>Back to Galleries
                    </a>
                </div>
            </div>
        @endif
    </div>
</div>

<!-- Image Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header border-0">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-0 text-center">
                <img id="modalImage" src="" alt="" class="img-fluid">
            </div>
            <div class="modal-footer border-0 justify-content-center">
                <button type="button" class="btn btn-outline-secondary me-2" id="prevBtn">
                    <i class="bi bi-chevron-left"></i> Previous
                </button>
                <span id="imageCounter" class="mx-3"></span>
                <button type="button" class="btn btn-outline-secondary ms-2" id="nextBtn">
                    Next <i class="bi bi-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.gallery-detail-page {
    min-height: 100vh;
}

.gallery-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4rem 0;
    margin-top: -1rem;
}

.gallery-info {
    color: #212529;
}

.gallery-date-badge {
    display: inline-block;
}

.gallery-title {
    color: #212529;
    margin-bottom: 0;
}

.gallery-description {
    font-size: 1.1rem;
    max-width: 600px;
}

.gallery-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.image-count {
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-weight: 500;
    border: 1px solid rgba(13, 110, 253, 0.2);
}

.gallery-hero-image img {
    max-height: 300px;
    width: auto;
    border-radius: 10px;
}

.gallery-grid {
    padding: 4rem 0;
}

.gallery-item {
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 300px;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.gallery-item-inner {
    position: relative;
    height: 100%;
    overflow: hidden;
}

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

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

.gallery-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
}

.gallery-item-actions {
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

#imageModal .modal-dialog {
    max-width: 90vw;
    max-height: 90vh;
}

#imageModal .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

#imageModal .modal-body {
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modalImage {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
}

@media (max-width: 768px) {
    .gallery-header {
        padding: 2rem 0;
    }

    .gallery-title {
        font-size: 2rem;
    }

    .gallery-grid {
        padding: 2rem 0;
    }

    .gallery-item {
        height: 250px;
    }

    #imageModal .modal-dialog {
        max-width: 95vw;
    }

    .gallery-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById('imageModal');
    const modalImage = document.getElementById('modalImage');
    const imageCounter = document.getElementById('imageCounter');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    let currentIndex = 0;
    let galleryImages = @json($gallery->images ?? []);

    // Handle gallery item clicks
    document.querySelectorAll('.gallery-item').forEach((item, index) => {
        item.addEventListener('click', function() {
            currentIndex = parseInt(this.dataset.index);
            showImage(currentIndex);
        });
    });

    // Previous button
    prevBtn.addEventListener('click', function() {
        currentIndex = (currentIndex - 1 + galleryImages.length) % galleryImages.length;
        showImage(currentIndex);
    });

    // Next button
    nextBtn.addEventListener('click', function() {
        currentIndex = (currentIndex + 1) % galleryImages.length;
        showImage(currentIndex);
    });

    // Keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (modal.classList.contains('show')) {
            if (e.key === 'ArrowLeft') {
                prevBtn.click();
            } else if (e.key === 'ArrowRight') {
                nextBtn.click();
            } else if (e.key === 'Escape') {
                const bsModal = bootstrap.Modal.getInstance(modal);
                bsModal.hide();
            }
        }
    });

    function showImage(index) {
        if (galleryImages[index]) {
            modalImage.src = galleryImages[index];
            modalImage.alt = '{{ $gallery->title }} - Image ' + (index + 1);
            imageCounter.textContent = (index + 1) + ' of ' + galleryImages.length;
        }
    }
});
</script>
@endpush