@extends('layouts.app')

@section('content')
<div class="fixed inset-0 bg-gradient-to-br from-green-400/15 via-emerald-400/10 to-teal-400/15 z-0"></div>

<div class="fixed inset-0 bg-[radial-gradient(circle_at_25%_20%,rgba(52,211,153,0.12)_0%,transparent_40%),radial-gradient(circle_at_75%_80%,rgba(34,197,94,0.1)_0%,transparent_45%)] z-0"></div>

<div class="relative z-10 min-h-screen">
    @include('navbar')

    <section id="gallery" class="min-h-screen py-8 px-4 pt-24 pb-16">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-10">
                <h1 class="text-4xl md:text-5xl font-black text-green-800 mb-3 uppercase">
                    @if($currentCategory)
                        {{ $categoryLabels[$currentCategory] ?? ucfirst($currentCategory) }}  
                    @endif
                    GALLERY DOKUMENTASI
                </h1>
                <p class="text-lg text-green-700 max-w-2xl mx-auto">
                    {{ $currentCategory 
                        ? 'Dokumentasi momen ' . strtolower($categoryLabels[$currentCategory] ?? $currentCategory) 
                        : 'Dokumentasi momen berharga selama ISNU Futsal 2026' }}
                </p>
            </div>

            <div class="mb-8 flex flex-wrap justify-center gap-2">
                <a href="{{ route('gallery') }}" 
                   class="px-5 py-2.5 text-sm font-bold rounded-full transition-all
                          {{ !$currentCategory 
                             ? 'bg-green-600 text-white shadow-md' 
                             : 'bg-green-100 text-green-800 hover:bg-green-200 border border-green-200/50' }}">
                    <i class="fas fa-th-large mr-1.5"></i> Semua
                </a>

                @foreach($categoryLabels as $key => $label)
                    <a href="{{ route('gallery', ['category' => $key]) }}" 
                       class="px-5 py-2.5 text-sm font-bold rounded-full transition-all flex items-center
                              {{ $currentCategory === $key 
                                 ? 'bg-green-600 text-white shadow-md' 
                                 : 'bg-green-100 text-green-800 hover:bg-green-200 border border-green-200/50' }}">
                        @if($key === 'match')
                            <i class="fas fa-futbol mr-1.5"></i>
                        @elseif($key === 'ceremony')
                            <i class="fas fa-award mr-1.5"></i>
                        @elseif($key === 'team')
                            <i class="fas fa-users mr-1.5"></i>
                        @else
                            <i class="fas fa-images mr-1.5"></i>
                        @endif
                        {{ $label }}
                    </a>
                @endforeach
            </div>

            @if($currentCategory)
                <div class="mb-6 text-center">
                    <span class="inline-flex items-center px-4 py-1.5 bg-white/50 backdrop-blur-sm text-green-700 rounded-full text-sm font-medium border border-green-200">
                        <i class="fas fa-filter mr-2"></i>
                        Menampilkan: <strong class="ml-1">{{ $categoryLabels[$currentCategory] }}</strong>
                        <button onclick="window.location.href='{{ route('gallery') }}'" 
                                class="ml-3 text-green-600 hover:text-green-800">
                            <i class="fas fa-times"></i>
                        </button>
                    </span>
                </div>
            @endif

            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
                @forelse($gallery as $item)
                    <div class="group relative overflow-hidden rounded-xl bg-white shadow-sm hover:shadow-xl hover:scale-[1.02] transition-all duration-300 border border-green-100">
                        <div class="aspect-square w-full bg-gray-50">
                            <img src="{{ asset('storage/' . $item->image_url) }}"
                                 alt="{{ $item->caption }}"
                                 class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                                 onerror="this.src='https://placehold.co/400x400/10b981/white?text=Foto+Tidak+Tersedia'"
                            />
                            
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-3 flex flex-col justify-end">
                                @if($item->caption)
                                    <p class="text-white font-bold text-[10px] sm:text-xs line-clamp-1 mb-1">
                                        {{ $item->caption }}
                                    </p>
                                @endif

                                @if($item->match_id && $item->match)
                                    <div class="flex items-center text-green-300 text-[9px] sm:text-xs mb-1">
                                        <i class="fas fa-futbol mr-1"></i>
                                        <span class="truncate">{{ $item->match->home_team_name }} vs {{ $item->match->away_team_name }}</span>
                                    </div>
                                @endif

                                <div class="mt-auto">
                                    <span class="inline-flex items-center px-2 py-0.5 text-[8px] font-bold bg-green-700 text-white rounded uppercase tracking-wider">
                                        {{ $categoryLabels[$item->category] ?? $item->category }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="p-2 bg-white/90 border-t border-green-50">
                            <p class="text-[9px] text-green-600 text-center font-bold">
                                {{ \Carbon\Carbon::parse($item->upload_date)->format('d M Y') }}
                            </p>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full text-center py-20">
                        <div class="text-6xl mb-4 text-green-300">
                            <i class="fas fa-images"></i>
                        </div>
                        <h3 class="text-xl font-bold text-green-800">Belum Ada Foto</h3>
                    </div>
                @endforelse
            </div>

            @if($gallery->hasPages())
                <div class="mt-10 flex justify-center">
                    {{ $gallery->appends(['category' => $currentCategory])->links() }}
                </div>
            @endif
        </div>
    </section>

    @include('footer')
</div>
@endsection

@section('styles')
<style>
/* Tetap menggunakan style asli Anda namun dipastikan support Tailwind */
.pagination {
    @apply flex space-x-1 justify-center items-center mt-8;
}
.pagination .page-link {
    @apply px-3.5 py-1.5 text-sm font-bold rounded-lg border bg-white text-green-700 border-green-200 hover:bg-green-50 transition-colors;
}
.pagination .page-item.active .page-link {
    @apply bg-green-600 text-white border-green-600 shadow-sm;
}
</style>
@endsection