@extends('layouts.admin')

@section('title', 'Countries — Global Supply Chain')
@section('page_title', 'Countries')

@section('content')

{{-- ── Header row ──────────────────────────────────────────────── --}}
<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-lg font-semibold text-white">All Countries</h2>
        <p class="text-sm text-slate-400 mt-0.5">
            {{ $countries->total() }} active countries in the dataset.
        </p>
    </div>
</div>

{{-- ── Table ────────────────────────────────────────────────────── --}}
<div class="rounded-xl bg-slate-800 border border-slate-700 overflow-hidden">

    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="text-xs text-slate-500 uppercase tracking-wider border-b border-slate-700 bg-slate-800/80">
                    <th class="px-5 py-3 text-left font-medium w-8">#</th>
                    <th class="px-5 py-3 text-left font-medium">Country</th>
                    <th class="px-5 py-3 text-left font-medium">ISO</th>
                    <th class="px-5 py-3 text-left font-medium">Region</th>
                    <th class="px-5 py-3 text-left font-medium">Capital</th>
                    <th class="px-5 py-3 text-left font-medium">Currency</th>
                    <th class="px-5 py-3 text-right font-medium">Population</th>
                    <th class="px-5 py-3 text-center font-medium">Risk</th>
                    <th class="px-5 py-3 text-center font-medium">Score</th>
                    <th class="px-2 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-700/50">
                @forelse($countries as $country)
                    <tr class="hover:bg-slate-700/30 transition-colors">

                        <td class="px-5 py-3 text-slate-500 text-xs">
                            {{ $countries->firstItem() + $loop->index }}
                        </td>

                        <td class="px-5 py-3">
                            <div class="flex items-center gap-2.5">
                                @if($country->flag_url)
                                    <img src="{{ $country->flag_url }}"
                                         alt="{{ $country->iso2 }} flag"
                                         class="w-6 h-4 object-cover rounded-sm shrink-0">
                                @endif
                                <a href="{{ route('admin.countries.show', $country) }}"
                                   class="font-medium text-slate-200 hover:text-sky-400 transition-colors">
                                    {{ $country->name }}
                                </a>
                            </div>
                        </td>

                        <td class="px-5 py-3 font-mono text-xs text-slate-400">
                            {{ $country->iso2 }} / {{ $country->iso3 }}
                        </td>

                        <td class="px-5 py-3 text-slate-400">
                            {{ $country->region ?? '—' }}
                            @if($country->subregion)
                                <span class="block text-xs text-slate-600">{{ $country->subregion }}</span>
                            @endif
                        </td>

                        <td class="px-5 py-3 text-slate-400">
                            {{ $country->capital ?? '—' }}
                        </td>

                        <td class="px-5 py-3 text-slate-400 font-mono text-xs">
                            {{ $country->currency?->code ?? '—' }}
                            @if($country->currency?->symbol)
                                <span class="text-slate-600">({{ $country->currency->symbol }})</span>
                            @endif
                        </td>

                        <td class="px-5 py-3 text-right text-slate-400 font-mono text-xs">
                            {{ $country->population ? number_format($country->population) : '—' }}
                        </td>

                        <td class="px-5 py-3 text-center">
                            @if($country->latestRiskScore)
                                @include('partials.risk-badge', ['level' => $country->latestRiskScore->risk_level])
                            @else
                                <span class="text-xs text-slate-600">—</span>
                            @endif
                        </td>

                        <td class="px-5 py-3 text-right font-mono font-semibold text-white">
                            {{ $country->latestRiskScore ? number_format($country->latestRiskScore->total_score, 1) : '—' }}
                        </td>

                        <td class="px-2 py-3 text-right">
                            <a href="{{ route('admin.countries.show', $country) }}"
                               class="text-slate-500 hover:text-sky-400 transition-colors text-xs px-2">
                                View →
                            </a>
                        </td>

                    </tr>
                @empty
                    <tr>
                        <td colspan="10" class="px-5 py-12 text-center text-slate-500 text-sm">
                            No countries found.
                            Run <code class="text-slate-400">php artisan countries:sync --countries</code> to import.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    @if($countries->hasPages())
        <div class="px-5 py-4 border-t border-slate-700">
            {{ $countries->links() }}
        </div>
    @endif

</div>

@endsection