@extends('layouts.app')
@section('page-title', 'Countries')

@section('content')

    <x-admin-hero-header
        title="Countries"
        subtitle="View countries and control their availability"
        eyebrow="Location setup"
    >
        <x-slot:icon>
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 21a9 9 0 100-18 9 9 0 000 18zm0 0c2.2-2.5 3.3-5.5 3.3-9S14.2 5.5 12 3m0 18c-2.2-2.5-3.3-5.5-3.3-9S9.8 5.5 12 3M3.5 9h17m-17 6h17"/>
            </svg>
        </x-slot:icon>
    </x-admin-hero-header>

    <form method="GET" action="{{ route('admin.countries.index') }}" class="card p-4 mb-6">
        <div class="flex flex-wrap items-end gap-3">
            <div class="flex-1 min-w-[220px]">
                <label for="search" class="form-label">Search</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg class="w-4 h-4 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>
                    <input type="text" id="search" name="search" value="{{ request('search') }}"
                        placeholder="Search by country or ISO code..."
                        class="form-input pl-9"/>
                </div>
            </div>

            <div class="min-w-[150px]">
                <x-searchable-select
                    name="status"
                    id="status"
                    label="Status"
                    :options="[['value' => '1', 'label' => 'Active'], ['value' => '0', 'label' => 'Inactive']]"
                    :selected="request('status')"
                    placeholder="All Status"
                />
            </div>

            <div class="flex gap-2 pb-0.5">
                <button type="submit" class="btn-primary">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z"/>
                    </svg>
                    Filter
                </button>
                <a href="{{ route('admin.countries.index') }}" class="btn-ghost">Reset</a>
            </div>
        </div>
    </form>

    @if($countries->total() > 0)
        <p class="text-xs text-surface-400 mb-3 px-1">
            Showing {{ $countries->firstItem() }}-{{ $countries->lastItem() }} of {{ $countries->total() }} countries
        </p>
    @endif

    <div class="card overflow-hidden">
        @if($countries->count())
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr>
                            <th class="table-th">Country</th>
                            <th class="table-th">ISO Code</th>
                            <th class="table-th">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-surface-50">
                        @foreach($countries as $country)
                            <tr class="table-row-hover">
                                <td class="table-td">
                                    <p class="font-semibold text-surface-900">{{ $country->name }}</p>
                                </td>
                                <td class="table-td">
                                    <span class="inline-flex items-center rounded-lg bg-surface-100 px-2.5 py-1 text-xs font-semibold text-surface-600">
                                        {{ $country->iso2 }}
                                    </span>
                                </td>
                                <td class="table-td">
                                    <div x-data="statusToggle(@js((bool) $country->status), @js(route('admin.countries.toggle-status', $country)))"
                                          class="flex items-center gap-2">
                                        <button
                                            type="button"
                                            :disabled="loading"
                                            @click="toggle"
                                            role="switch"
                                            :aria-checked="active.toString()"
                                            aria-label="Toggle country status"
                                            class="relative inline-flex h-5 w-9 items-center rounded-full
                                                   transition-colors duration-200 focus:outline-none
                                                   focus:ring-2 focus:ring-emerald-500/30 focus:ring-offset-1 disabled:opacity-60"
                                            :class="active ? 'bg-emerald-500' : 'bg-surface-200'"
                                        >
                                            <span class="inline-block h-3.5 w-3.5 transform rounded-full bg-white
                                                         shadow-sm transition-transform duration-200"
                                                  :class="active ? 'translate-x-[18px]' : 'translate-x-0.5'">
                                            </span>
                                        </button>
                                        <span class="text-xs font-medium"
                                              :class="active ? 'text-emerald-600' : 'text-surface-400'"
                                              x-text="active ? 'Active' : 'Inactive'">
                                        </span>
                                        <span x-show="error" x-text="error" class="sr-only"></span>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="px-6 py-4 border-t border-surface-100">
                {{ $countries->appends(request()->query())->links() }}
            </div>
        @else
            <div class="flex flex-col items-center justify-center py-24 text-center">
                <div class="w-16 h-16 rounded-2xl bg-surface-100 flex items-center justify-center mb-4">
                    <svg class="w-8 h-8 text-surface-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25"
                            d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2h1a2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488A9 9 0 118.512 3.512"/>
                    </svg>
                </div>
                <h3 class="font-display font-semibold text-surface-900 mb-1">
                    {{ array_filter($filters ?? []) ? 'No matching countries' : 'No countries found' }}
                </h3>
                <p class="text-surface-400 text-sm max-w-xs">
                    {{ array_filter($filters ?? []) ? 'Try adjusting your search or filter criteria.' : 'Run the country seeder to populate countries.' }}
                </p>
            </div>
        @endif
    </div>

@endsection