@extends('layouts.app')
@section('title', 'Gallery')

@push('styles')
<style>
.gallery-grid { columns: 3; gap: 14px; }
.gallery-grid .gallery-item { break-inside: avoid; margin-bottom: 14px; overflow: hidden; border-radius: 10px; cursor: pointer; position: relative; }
.gallery-grid .gallery-item img { width: 100%; display: block; transition: transform 0.4s; }
.gallery-grid .gallery-item:hover img { transform: scale(1.05); }
.gallery-grid .gallery-item .overlay { position: absolute; inset: 0; background: rgba(68,32,100,0.55); opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; }
.gallery-grid .gallery-item:hover .overlay { opacity: 1; }
.filter-btn.active { background: var(--purple-dark) !important; color: white !important; border-color: var(--purple-dark) !important; }
@media (max-width: 768px) { .gallery-grid { columns: 2; } }
@media (max-width: 480px) { .gallery-grid { columns: 1; } }
</style>
@endpush

@section('content')

<div class="page-hero">
    <div class="container">
        <h1>Gallery</h1>
        <p class="lead mt-2">Moments of healing, growth & transformation</p>
        <nav aria-label="breadcrumb"><ol class="breadcrumb justify-content-center mb-0">
            <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-warning">Home</a></li>
            <li class="breadcrumb-item active text-white">Gallery</li>
        </ol></nav>
    </div>
</div>

<section class="py-5">
    <div class="container">

        <!-- Filter Buttons -->
        <div class="d-flex flex-wrap justify-content-center gap-2 mb-5">
            <button class="btn btn-outline-secondary filter-btn active" data-filter="all">All</button>
            @if(isset($categories) && $categories->count())
                @foreach($categories as $cat)
                <button class="btn btn-outline-secondary filter-btn" data-filter="{{ $cat }}">
                    {{ ucfirst($cat) }}
                </button>
                @endforeach
            @else
                <button class="btn btn-outline-secondary filter-btn" data-filter="sessions">Sessions</button>
                <button class="btn btn-outline-secondary filter-btn" data-filter="workshops">Workshops</button>
                <button class="btn btn-outline-secondary filter-btn" data-filter="awards">Awards</button>
            @endif
        </div>

        <!-- Gallery Grid -->
        <div class="gallery-grid" id="galleryGrid">
            @forelse($images as $img)
            <div class="gallery-item" data-category="{{ $img->category }}"
                 data-bs-toggle="modal" data-bs-target="#lightbox"
                 data-src="{{ asset('storage/'.$img->image) }}"
                 data-title="{{ $img->title }}">
                <img src="{{ asset('storage/'.$img->image) }}" alt="{{ $img->title }}">
                <div class="overlay">
                    <i class="fas fa-expand text-white fa-lg"></i>
                </div>
            </div>
            @empty
         @php
    $sampleImgs = [
        ['src' => asset('public/images/14th March.png'),       'cat' => 'sessions',   'title' => 'Healing Session'],
        ['src' => asset('public/images/Blue and White Geometric Stress Relief Workshop LinkedIn Post.png'),       'cat' => 'sessions',   'title' => 'Auromon Chakrabarti'],
        ['src' => asset('public/images/Blue Peach Benefits of Meditation Facebook Post.png'), 'cat' => 'workshops',  'title' => 'Workshop'],
        ['src' => asset('public/images/Green White Modern Holistic Health Tips For Daily Wellness Instagram Post.png'),
         'cat' => 'sessions',   'title' => 'Counselling Session'],
        ['src' => asset('public/images/Blue Yellow Pastel Gradient Illustrative Tips For Anxiety Instagram Post.png'),
         'cat' => 'awards',     'title' => 'Award Ceremony'],
        ['src' => asset('public/images/Black and Beige Luxury Stress Relief  Instagram Post (1).png'),
         'cat' => 'workshops',  'title' => 'Group Workshop'],
    ];
@endphp
            @foreach($sampleImgs as $img)
            <div class="gallery-item" data-category="{{ $img['cat'] }}"
                 data-bs-toggle="modal" data-bs-target="#lightbox"
                 data-src="{{ $img['src'] }}" data-title="{{ $img['title'] }}">
                <img src="{{ $img['src'] }}" alt="{{ $img['title'] }}" loading="lazy">
                <div class="overlay">
                    <i class="fas fa-expand text-white fa-lg"></i>
                </div>
            </div>
            @endforeach
            @endforelse
        </div>
    </div>
</section>

<!-- Lightbox Modal -->
<div class="modal fade" id="lightbox" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content bg-dark border-0">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title text-white" id="lightboxTitle"></h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center p-2">
                <img id="lightboxImg" src="" class="img-fluid rounded" alt="">
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
// Filter
document.querySelectorAll('.filter-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        const filter = this.dataset.filter;
        document.querySelectorAll('.gallery-item').forEach(item => {
            item.style.display = (filter === 'all' || item.dataset.category === filter) ? 'block' : 'none';
        });
    });
});

// Lightbox
const lightbox = document.getElementById('lightbox');
lightbox.addEventListener('show.bs.modal', function(e) {
    const trigger = e.relatedTarget;
    document.getElementById('lightboxImg').src = trigger.dataset.src;
    document.getElementById('lightboxTitle').textContent = trigger.dataset.title || '';
});
</script>
@endpush
@endsection