@extends('layouts.app')
@section('content')
<div class="pt-24">
<div class="relative py-20 px-4 bg-gradient-to-br from-dark-brown to-deep-green bengali-pattern text-center">
    <h1 class="font-playfair text-5xl text-cream font-bold mb-3" data-aos="fade-up">Photo Gallery</h1>
    <div class="section-divider mt-4"></div>
</div>

<div class="max-w-7xl mx-auto px-4 py-12">
    {{-- Category Filter --}}
    <div class="flex flex-wrap gap-3 justify-center mb-10" data-aos="fade-up">
        <a href="{{ route('gallery.index') }}"
           class="px-5 py-2 rounded-full text-sm font-medium transition-all {{ !request()->route('slug') ? 'bg-gold text-dark-brown' : 'border border-gold/40 text-cream/70 hover:border-gold hover:text-gold' }}">
            All
        </a>
        @foreach($categories as $cat)
        <a href="{{ route('gallery.category', $cat->slug) }}"
           class="px-5 py-2 rounded-full text-sm font-medium transition-all {{ isset($category) && $category->id==$cat->id ? 'bg-gold text-dark-brown' : 'border border-gold/40 text-cream/70 hover:border-gold hover:text-gold' }}">
            {{ $cat->name }} ({{ $cat->galleries_count }})
        </a>
        @endforeach
    </div>

    {{-- Masonry Grid --}}
    @if($galleries->isEmpty())
    <div class="text-center py-20">
        <i class="fas fa-images text-gold/30 text-6xl mb-4"></i>
        <p class="text-cream/50">No gallery images available.</p>
    </div>
    @else
    <div class="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4 space-y-4">
        @foreach($galleries as $item)
        <div class="break-inside-avoid" data-aos="fade-up" data-aos-delay="{{ $loop->index % 4 * 60 }}">
            <div class="group relative overflow-hidden rounded-xl cursor-pointer"
                 onclick="openLightbox('{{ $item->image_url }}','{{ $item->title }}')">
                @if($item->type === 'video')
                    <div class="aspect-video bg-dark-brown flex items-center justify-center">
                        <i class="fas fa-play-circle text-gold text-5xl"></i>
                    </div>
                @else
                    <img src="{{ $item->image_url }}" alt="{{ $item->title }}"
                         class="w-full object-cover group-hover:scale-105 transition-transform duration-500 rounded-xl">
                @endif
                <div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center rounded-xl">
                    <i class="fas fa-expand text-white text-2xl"></i>
                </div>
                @if($item->title)
                <div class="absolute bottom-0 left-0 right-0 p-3 translate-y-full group-hover:translate-y-0 transition-transform bg-gradient-to-t from-black/80 to-transparent rounded-b-xl">
                    <p class="text-white text-sm font-medium">{{ $item->title }}</p>
                </div>
                @endif
            </div>
        </div>
        @endforeach
    </div>
    <div class="mt-10">{{ $galleries->links() }}</div>
    @endif
</div>
</div>

{{-- Lightbox --}}
<div id="lightbox" class="fixed inset-0 z-[100] bg-black/90 hidden items-center justify-center"
     x-data="{ src:'', title:'' }" x-on:lightbox.window="src=$event.detail.src; title=$event.detail.title">
    <div id="lightboxInner" class="hidden fixed inset-0 z-[100] bg-black/90 flex items-center justify-center p-4">
        <button onclick="closeLightbox()" class="absolute top-4 right-4 text-white text-3xl hover:text-gold transition-colors">
            <i class="fas fa-times"></i>
        </button>
        <img id="lightboxImg" src="" alt="" class="max-w-full max-h-[85vh] rounded-xl shadow-2xl object-contain">
    </div>
</div>

@push('scripts')
<script>
function openLightbox(src, title) {
    document.getElementById('lightboxImg').src = src;
    document.getElementById('lightboxInner').classList.remove('hidden');
    document.getElementById('lightboxInner').classList.add('flex');
}
function closeLightbox() {
    document.getElementById('lightboxInner').classList.add('hidden');
    document.getElementById('lightboxInner').classList.remove('flex');
}
document.addEventListener('keydown', e => { if(e.key === 'Escape') closeLightbox(); });
</script>
@endpush
@endsection