@extends('layouts.public')

@section('content')

    <!-- Header Section to match screenshot top -->
    <div class="mb-8">
        <h2 class="text-3xl font-bold text-gray-800">Chapters</h2>
    </div>

    <div class="bg-transparent min-h-screen">
        <div class="max-w-7xl mx-auto">
            
            <!-- Search & Filter Bar -->
            <form method="GET" action="{{ route('chapters.index') }}" class="mb-8">
                <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-200 flex flex-col md:flex-row gap-4 justify-between items-end">
                    
                    <div class="w-full md:w-2/3">
                        <x-input-label for="search" :value="__('Search Chapters')" class="text-xs text-gray-600 font-normal mb-1" />
                        <div class="relative flex items-center w-full">
                            <div class="absolute left-3 pointer-events-none flex items-center justify-center">
                                <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <input id="search" name="search" type="text" class="pl-10 block w-full h-11 border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Search by chapter name..." value="{{ request('search') }}" />
                        </div>
                    </div>

                    <div class="w-full md:w-1/3">
                        <x-input-label for="city" :value="__('Filter by City')" class="text-xs text-gray-600 font-normal mb-1" />
                        <select id="city" name="city" onchange="this.form.submit()" class="block w-full h-11 border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm text-gray-700">
                            <option value="all">All Cities</option>
                            @foreach($cities as $c)
                                <option value="{{ $c }}" {{ request('city') == $c ? 'selected' : '' }}>{{ $c }}</option>
                            @endforeach
                        </select>
                    </div>

                </div>
            </form>

            <!-- Chapters Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @forelse($chapters as $chapter)
                    <a href="{{ route('chapters.show', $chapter->id) }}" class="group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden flex flex-col h-full transform hover:-translate-y-2">
                        
                        <!-- Hero Header -->
                        <div class="h-40 w-full bg-gray-100 overflow-hidden relative">
                            @if($chapter->hero_path)
                                <img src="{{ asset('storage/' . $chapter->hero_path) }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700" alt="{{ $chapter->name }} Hero">
                            @else
                                <div class="w-full h-full bg-gradient-to-br from-blue-700 to-blue-900 flex items-center justify-center">
                                    <span class="text-white font-black text-3xl tracking-tighter opacity-20 uppercase">{{ substr($chapter->name, 0, 3) }}</span>
                                </div>
                            @endif
                            <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
                            
                            @if($chapter->network)
                                <div class="absolute top-4 right-4 bg-white/20 backdrop-blur-md rounded-full px-3 py-1 border border-white/30">
                                    <span class="text-[10px] font-black text-white uppercase tracking-widest">{{ $chapter->network->name }}</span>
                                </div>
                            @endif
                        </div>

                        <div class="p-6 flex-grow relative">
                            <!-- Logo Floating -->
                            <div class="w-16 h-16 rounded-xl bg-white p-1.5 border border-gray-100 shadow-lg mb-4 -mt-12 relative z-10 transition-transform group-hover:scale-105 duration-300">
                                @if($chapter->logo_path)
                                    <img src="{{ asset('storage/' . $chapter->logo_path) }}" class="w-full h-full object-contain rounded-lg" alt="{{ $chapter->name }} Logo">
                                @elseif($chapter->photo)
                                    <img src="{{ asset('storage/' . $chapter->photo) }}" class="w-full h-full object-contain rounded-lg" alt="{{ $chapter->name }} Logo">
                                @else
                                    <div class="w-full h-full bg-blue-50 flex items-center justify-center text-blue-300 rounded-lg">
                                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                                    </div>
                                @endif
                            </div>
                            
                            <h3 class="text-xl font-bold text-gray-900 group-hover:text-blue-600 transition-colors mb-2 line-clamp-1">{{ $chapter->name }}</h3>
                            
                            <div class="flex items-center text-gray-500 text-sm mb-6 font-medium">
                                <svg class="w-4 h-4 mr-1.5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                {{ $chapter->city }}, {{ $chapter->state }}
                            </div>

                            <!-- Lead Snapshot -->
                            @php
                                $leader = is_array($chapter->leadership_team) && count($chapter->leadership_team) > 0 
                                    ? $chapter->leadership_team[0] 
                                    : ['name' => 'Support Chapter', 'position' => 'Chapter Member'];
                            @endphp
                            <div class="flex items-center p-3 bg-gray-50 rounded-xl border border-gray-100 mb-6">
                                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold mr-3">
                                    {{ substr($leader['name'], 0, 1) }}
                                </div>
                                <div>
                                    <p class="text-xs font-black text-gray-900 leading-tight truncate w-32">{{ $leader['name'] }}</p>
                                    <p class="text-[10px] text-gray-500 font-bold uppercase tracking-wider">{{ $leader['position'] }}</p>
                                </div>
                            </div>

                            <div class="mt-auto pt-4 border-t border-gray-50 flex items-center justify-between">
                                <div class="flex items-center text-sm text-gray-500 font-bold">
                                    <svg class="h-4 w-4 text-blue-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
                                    </svg>
                                    {{ $chapter->registrations()->count() }}
                                </div>
                                <div class="flex items-center text-blue-600 font-black text-xs uppercase tracking-widest group-hover:translate-x-1 transition-transform">
                                    Full Details <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
                                </div>
                            </div>
                        </div>
                    </a>
                @empty
                    <div class="col-span-1 md:col-span-2 lg:col-span-3 text-center py-12">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">No chapters found</h3>
                        <p class="mt-1 text-sm text-gray-500">We couldn't find any chapters matching your criteria.</p>
                        @if(request('search') || (request('city') && request('city') != 'all'))
                            <div class="mt-6">
                                <a href="{{ route('chapters.index') }}" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                    Clear Filters
                                </a>
                            </div>
                        @endif
                    </div>
                @endforelse
            </div>

            <!-- Pagination -->
            <div class="mt-8 text-center flex justify-center">
                {{ $chapters->links() }}
            </div>

        </div>
    </div>
@endsection