@extends('layouts.app')

@section('title', 'Photo Gallery - Saba Remedies')

@section('content')
<div class="bg-gradient-to-r from-emerald-800 to-teal-900 text-white py-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl sm:text-3xl font-extrabold">Photo Gallery</h1>
        <p class="text-xs text-emerald-200 mt-1">Glimpses of Saba Remedies manufacturing, botanical research, and medical camps</p>
    </div>
</div>

<section class="py-12 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Category Filter Tabs -->
        @if(isset($categories) && $categories->count() > 0)
            <div class="flex flex-wrap gap-2 mb-8 justify-center">
                <a href="{{ route('pages.photo-gallery') }}" class="px-4 py-2 rounded-full text-xs font-bold transition-colors {{ !isset($category) ? 'bg-emerald-600 text-white' : 'bg-white border border-slate-200 text-slate-700 hover:bg-slate-50' }}">
                    All Photos
                </a>
                @foreach($categories as $cat)
                    <a href="{{ route('pages.photo-gallery.cat', ['id' => $cat->id]) }}" class="px-4 py-2 rounded-full text-xs font-bold transition-colors {{ (isset($category) && $category->id == $cat->id) ? 'bg-emerald-600 text-white' : 'bg-white border border-slate-200 text-slate-700 hover:bg-slate-50' }}">
                        {{ $cat->gallery_name ?? $cat->name }}
                    </a>
                @endforeach
            </div>
        @endif

        <!-- Images Grid -->
        @if(isset($images) && $images->count() > 0)
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                @foreach($images as $img)
                    <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-xs hover:shadow-md transition-all group">
                        <div class="h-56 bg-slate-100 overflow-hidden flex items-center justify-center">
                            <img src="{{ gallery_image_url($img->image) }}" alt="Gallery Photo" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" onerror="this.onerror=null;this.src='{{ asset('img/about.png') }}';">
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-8">
                {{ $images->links() }}
            </div>
        @else
            <div class="bg-white rounded-3xl p-12 text-center border border-slate-200 max-w-md mx-auto">
                <i class="fa-solid fa-images text-4xl text-slate-300 mb-3 block"></i>
                <h3 class="font-bold text-slate-800 text-sm">No photos found</h3>
                <p class="text-xs text-slate-500 mt-1">Photos will appear here once uploaded.</p>
            </div>
        @endif

    </div>
</section>
@endsection