@extends('frontend.layouts.app')
@section('content')
@include('frontend.partials.page-header',['pageTitle'=>'Photo Gallery','pageSubtitle'=>'Campus life and events at SSGMCE','breadcrumbs'=>[['name'=>'Gallery']]])
<section class="py-14"><div class="max-w-7xl mx-auto px-4">
<div class="flex gap-2 mb-8 flex-wrap">
<a href="/gallery" class="px-4 py-2 rounded-full text-sm font-medium {{ !$selectedCat?'bg-primary-700 text-white':'bg-gray-100 text-gray-600 hover:bg-gray-200' }} transition">All</a>
@foreach($categories as $cat)
<a href="/gallery?category={{ $cat->id }}" class="px-4 py-2 rounded-full text-sm font-medium {{ $selectedCat==$cat->id?'bg-primary-700 text-white':'bg-gray-100 text-gray-600 hover:bg-gray-200' }} transition">{{ $cat->name }} <span class="opacity-60">({{ $cat->items_count }})</span></a>
@endforeach
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
@forelse($items as $item)
<a href="{{ asset($item->file_path) }}" data-fancybox="gallery" data-caption="{{ $item->title }}"
   class="group overflow-hidden rounded-xl aspect-square" data-aos="zoom-in" data-aos-delay="{{ ($loop->index%4)*40 }}">
<img src="{{ asset($item->thumbnail ?? $item->file_path) }}" alt="{{ $item->title }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
</a>
@empty
<div class="col-span-4 text-center py-16 text-gray-500"><i class="fas fa-images text-5xl text-gray-200 mb-4 block"></i>No gallery items found.</div>
@endforelse
</div>
<div class="mt-8">{{ $items->links() }}</div>
</div></section>
@endsection