@extends('layouts.nova')

@section('content')
<div class="mx-auto max-w-6xl px-4 py-8">
    <div class="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <div>
            <h1 class="text-xl font-semibold text-gray-100">Countries</h1>
            <p class="mt-1 text-sm text-gray-400">Read-only ISO country catalog with manual sync support.</p>
        </div>

        <form method="post" action="{{ route('admin.countries.sync') }}">
            @csrf
            <button type="submit" class="rounded-lg border border-sky-500/40 bg-sky-500/10 px-3 py-2 text-sm text-sky-200">
                Sync countries
            </button>
        </form>
    </div>

    @if (session('success'))
        <div class="mb-4 rounded-lg border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-200">
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="mb-4 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200">
            {{ session('error') }}
        </div>
    @endif

    <form method="get" action="{{ route('admin.countries.index') }}" class="mb-4">
        <div class="flex flex-col gap-3 md:flex-row md:items-center">
            <input
                type="text"
                name="q"
                value="{{ $search }}"
                placeholder="Search by code or name"
                class="w-full rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-gray-100 placeholder:text-gray-500 md:max-w-sm"
            />
            <button type="submit" class="rounded-lg border border-gray-700 bg-gray-900 px-3 py-2 text-sm text-gray-200">Search</button>
        </div>
    </form>

    <div class="overflow-hidden rounded-xl border border-gray-700 bg-gray-900">
        <table class="min-w-full divide-y divide-gray-700 text-sm">
            <thead class="bg-gray-800 text-gray-300">
                <tr>
                    <th class="px-4 py-3 text-left">Country</th>
                    <th class="px-4 py-3 text-left">ISO2</th>
                    <th class="px-4 py-3 text-left">ISO3</th>
                    <th class="px-4 py-3 text-left">Region</th>
                    <th class="px-4 py-3 text-left">Status</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-800 text-gray-200">
                @forelse ($countries as $country)
                    <tr>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                @if ($country->local_flag_path)
                                    <img
                                        src="{{ $country->local_flag_path }}"
                                        alt="{{ $country->name_common }}"
                                        class="h-4 w-6 rounded-sm object-cover"
                                        onerror="this.style.display='none'"
                                    >
                                @endif
                                <div>
                                    <div>{{ $country->name_common }}</div>
                                    @if ($country->name_official)
                                        <div class="text-xs text-gray-500">{{ $country->name_official }}</div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td class="px-4 py-3 font-mono">{{ $country->iso2 }}</td>
                        <td class="px-4 py-3 font-mono">{{ $country->iso3 ?? '—' }}</td>
                        <td class="px-4 py-3">{{ $country->region ?? '—' }}</td>
                        <td class="px-4 py-3">
                            <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs {{ $country->active ? 'bg-emerald-500/10 text-emerald-200' : 'bg-gray-700 text-gray-300' }}">
                                {{ $country->active ? 'Active' : 'Inactive' }}
                            </span>
                            @if ($country->is_featured)
                                <span class="ml-2 inline-flex items-center rounded-full bg-sky-500/10 px-2.5 py-1 text-xs text-sky-200">Featured</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-6 text-center text-gray-400">No countries found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">{{ $countries->links() }}</div>
</div>
@endsection