@extends('dashboard.layout')

@section('title', 'Cities & States')
@section('meta_description', 'Browse, search and filter the US city and state reference data.')
@section('page_title', 'Cities & States')

@section('content')

{{-- ══════════════════════════════════════
     PAGE HEADER
═══════════════════════════════════════ --}}
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div>
        <h2 class="text-xl font-bold text-gray-900">Cities &amp; States</h2>
        <p class="text-sm text-gray-900 mt-0.5">
            {{ number_format($entries->total()) }} records
            @if($filters['search'] || $filters['state'])
                &mdash; filtered
            @endif
        </p>
    </div>
</div>

{{-- ══════════════════════════════════════
     FILTER BAR
═══════════════════════════════════════ --}}
<form id="filter-form"
      method="GET"
      action="{{ route('cities-states.index') }}"
      class="bg-white border border-gray-200 rounded-2xl shadow-sm p-4 mb-6">

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">

        {{-- Search --}}
        <div class="relative lg:col-span-3">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <svg class="w-4 h-4 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
                </svg>
            </div>
            <input id="search-input"
                   type="text"
                   name="search"
                   value="{{ $filters['search'] }}"
                   placeholder="Search city name, state name or state code…"
                   class="w-full pl-9 pr-4 py-2.5 text-sm bg-gray-50 border border-gray-200 rounded-xl
                          focus:outline-none focus:ring-2 focus:ring-violet-500/30 focus:border-violet-400
                          placeholder:text-gray-900 transition">
        </div>

        {{-- State filter --}}
        <div>
            <select id="state-select"
                    name="state"
                    class="w-full px-3 py-2.5 text-sm bg-gray-50 border border-gray-200 rounded-xl
                           focus:outline-none focus:ring-2 focus:ring-violet-500/30 focus:border-violet-400
                           text-gray-900 transition appearance-none cursor-pointer">
                <option value="">All States</option>
                @foreach($states as $s)
                    <option value="{{ $s->state_code }}" @selected($filters['state'] === $s->state_code)>
                        {{ $s->state_name }} ({{ $s->state_code }})
                    </option>
                @endforeach
            </select>
        </div>
    </div>

    {{-- Actions --}}
    <div class="flex items-center gap-2 mt-3">
        <button id="btn-apply-filters"
                type="submit"
                class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-violet-600 text-white text-sm
                       font-medium shadow-sm hover:bg-violet-700 active:scale-95 transition-all">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"/>
            </svg>
            Apply
        </button>

        @if($filters['search'] || $filters['state'])
            <a id="btn-clear-filters"
               href="{{ route('cities-states.index') }}"
               class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-gray-100 text-gray-900 text-sm
                      font-medium hover:bg-gray-200 active:scale-95 transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 18 6M6 6l12 12"/>
                </svg>
                Clear
            </a>
        @endif
    </div>
</form>

{{-- ══════════════════════════════════════
     TABLE
═══════════════════════════════════════ --}}
<div class="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">

    @if($entries->isEmpty())
        <div class="flex flex-col items-center justify-center py-20 text-center">
            <div class="w-14 h-14 rounded-2xl bg-gray-100 flex items-center justify-center mb-4">
                <svg class="w-7 h-7 text-gray-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
                </svg>
            </div>
            <p class="text-sm font-medium text-gray-900">No records found</p>
            <p class="text-xs text-gray-900 mt-1">Try adjusting your search or filter.</p>
        </div>
    @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100 bg-gray-50/60">
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider w-14">#</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">City</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider">State</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider w-20">Code</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-gray-900 uppercase tracking-wider w-20">Priority</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($entries as $entry)
                        <tr class="hover:bg-violet-50/30 transition-colors">
                            <td class="px-4 py-3 text-xs font-mono text-gray-900">{{ $entry->id }}</td>
                            <td class="px-4 py-3 font-medium text-gray-900">{{ $entry->city_name ?? '—' }}</td>
                            <td class="px-4 py-3 text-gray-900">{{ $entry->state_name ?? '—' }}</td>
                            <td class="px-4 py-3">
                                @if($entry->state_code)
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-semibold
                                                 bg-indigo-50 text-indigo-700 border border-indigo-200 font-mono tracking-wider">
                                        {{ $entry->state_code }}
                                    </span>
                                @else
                                    <span class="text-gray-900">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-gray-900 text-xs">
                                {{ $entry->priority ?? '—' }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        @if($entries->hasPages())
            <div class="px-4 py-3 border-t border-gray-100 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                <p class="text-xs text-gray-900">
                    Showing {{ $entries->firstItem() }}–{{ $entries->lastItem() }}
                    of {{ number_format($entries->total()) }}
                </p>
                <div class="text-sm">
                    {{ $entries->links() }}
                </div>
            </div>
        @endif
    @endif
</div>

@endsection