@extends('layouts.frontend')

@section('title', 'গ্যালারী - ' . ($settings['site_name'] ?? 'সাংসদ পোর্টাল'))

@section('content')
    <!-- Hero Section -->
    <section class="bg-bd-green-500 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-3xl md:text-4xl font-bold mb-4">গ্যালারী</h1>
                <p class="text-bd-green-100 text-lg">বিভিন্ন কার্যক্রম ও অনুষ্ঠানের ছবি</p>
            </div>
        </div>
    </section>

    <!-- Filter Section -->
    <section class="py-6 bg-white border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-wrap gap-3 justify-center">
                <a href="{{ route('gallery') }}"
                    class="px-4 py-2 rounded-full text-sm font-medium transition
                        {{ !request('category') ? 'bg-bd-green-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                    সব
                </a>
                @foreach (\App\Models\Gallery::CATEGORIES as $key => $label)
                    <a href="{{ route('gallery', ['category' => $key]) }}"
                        class="px-4 py-2 rounded-full text-sm font-medium transition
                            {{ request('category') === $key ? 'bg-bd-green-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                        {{ $label }}
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Gallery Grid -->
    <section class="py-12 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            @if ($galleries->count() > 0)
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                    @foreach ($galleries as $gallery)
                        <div class="bg-white rounded-xl shadow-md overflow-hidden group cursor-pointer hover:shadow-lg transition"
                            onclick="openLightbox('{{ Storage::url($gallery->image) }}', '{{ $gallery->title }}', '{{ $gallery->description }}')">
                            <div class="relative overflow-hidden">
                                <img src="{{ Storage::url($gallery->image) }}" alt="{{ $gallery->title }}"
                                    class="w-full h-48 object-cover group-hover:scale-105 transition duration-300">

                                <!-- Overlay -->
                                <div
                                    class="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition duration-300 flex items-center justify-center">
                                    <i
                                        class="fas fa-search-plus text-white text-2xl opacity-0 group-hover:opacity-100 transition duration-300"></i>
                                </div>

                                @if ($gallery->is_featured)
                                    <span
                                        class="absolute top-2 right-2 px-2 py-1 text-xs font-medium bg-bd-red-500 text-white rounded">
                                        ফিচার্ড
                                    </span>
                                @endif
                            </div>
                            <div class="p-4">
                                <h3 class="font-semibold text-gray-900 mb-1 line-clamp-1">{{ $gallery->title }}</h3>
                                <div class="flex items-center justify-between text-sm text-gray-500">
                                    <span class="px-2 py-0.5 rounded bg-bd-green-50 text-bd-green-600">
                                        {{ $gallery->category_label }}
                                    </span>
                                    @if ($gallery->event_date)
                                        <span><i
                                                class="fas fa-calendar-alt mr-1"></i>{{ $gallery->event_date->format('d M, Y') }}</span>
                                    @endif
                                </div>
                                @if ($gallery->location)
                                    <p class="text-sm text-gray-500 mt-2">
                                        <i class="fas fa-map-marker-alt mr-1"></i>{{ $gallery->location }}
                                    </p>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="mt-10">
                    {{ $galleries->links() }}
                </div>
            @else
                <div class="text-center py-16">
                    <div class="w-24 h-24 mx-auto mb-6 rounded-full bg-gray-100 flex items-center justify-center">
                        <i class="fas fa-images text-4xl text-gray-400"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">কোনো ছবি পাওয়া যায়নি</h3>
                    <p class="text-gray-600">এই বিভাগে এখনো কোনো ছবি যোগ করা হয়নি।</p>
                </div>
            @endif
        </div>
    </section>

    <!-- Lightbox Modal -->
    <div id="lightbox" class="fixed inset-0 bg-black/90 z-50 hidden items-center justify-center p-4">
        <button onclick="closeLightbox()" class="absolute top-4 right-4 text-white text-2xl hover:text-gray-300 transition">
            <i class="fas fa-times"></i>
        </button>
        <button onclick="closeLightbox()" class="absolute inset-0 -z-10"></button>
        <div class="max-w-5xl w-full">
            <img id="lightbox-image" src="" alt=""
                class="w-full h-auto max-h-[80vh] object-contain rounded-lg">
            <div class="mt-4 text-center">
                <h3 id="lightbox-title" class="text-xl font-semibold text-white mb-2"></h3>
                <p id="lightbox-description" class="text-gray-300"></p>
            </div>
        </div>
    </div>

    @push('styles')
        <style>
            .line-clamp-1 {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
            }
        </style>
    @endpush

    @push('scripts')
        <script>
            function openLightbox(imageUrl, title, description) {
                document.getElementById('lightbox-image').src = imageUrl;
                document.getElementById('lightbox-title').textContent = title;
                document.getElementById('lightbox-description').textContent = description || '';
                document.getElementById('lightbox').classList.remove('hidden');
                document.getElementById('lightbox').classList.add('flex');
                document.body.style.overflow = 'hidden';
            }

            function closeLightbox() {
                document.getElementById('lightbox').classList.add('hidden');
                document.getElementById('lightbox').classList.remove('flex');
                document.body.style.overflow = 'auto';
            }

            // Close on escape key
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    closeLightbox();
                }
            });
        </script>
    @endpush
@endsection