@extends('admin::layout.default')

@section('content')
<x-page-layout>
    @include('admin::blocks.notification_error')

    @if(session('msg_success'))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{ session('msg_success') }}
        </div>
    @endif

    <div class="row mb-3">
        <div class="col-md-8">
            <h3 class="mb-1">Countries</h3>
            <p class="text-muted mb-0">Read-only ISO country catalog with manual sync support.</p>
        </div>
        <div class="col-md-4 text-right">
            <form method="POST" action="{{ route('admin.cp.countries.sync') }}">
                @csrf
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="fa-solid fa-rotate"></i> Sync countries
                </button>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <form method="GET" action="{{ route('admin.cp.countries.main') }}" class="form-inline">
                <div class="input-group input-group-sm" style="max-width: 420px; width: 100%;">
                    <input
                        type="text"
                        name="q"
                        value="{{ $search }}"
                        placeholder="Search by code or name"
                        class="form-control"
                    />
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-default">Search</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="card-body table-responsive p-0">
            <table class="table table-hover table-sm mb-0">
                <thead>
                    <tr>
                        <th>Country</th>
                        <th>ISO2</th>
                        <th>ISO3</th>
                        <th>Region</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                @forelse ($countries as $country)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center" style="gap: 10px;">
                                @if ($country->local_flag_path)
                                    <img
                                        src="{{ $country->local_flag_path }}"
                                        alt="{{ $country->name_common }}"
                                        style="width: 24px; height: 16px; object-fit: cover; border-radius: 2px;"
                                        onerror="this.style.display='none'"
                                    >
                                @endif
                                <div>
                                    <div>{{ $country->name_common }}</div>
                                    @if ($country->name_official)
                                        <small class="text-muted">{{ $country->name_official }}</small>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td><code>{{ $country->iso2 }}</code></td>
                        <td><code>{{ $country->iso3 ?? '—' }}</code></td>
                        <td>{{ $country->region ?? '—' }}</td>
                        <td>
                            @if ($country->active)
                                <span class="badge badge-success">Active</span>
                            @else
                                <span class="badge badge-secondary">Inactive</span>
                            @endif

                            @if ($country->is_featured)
                                <span class="badge badge-info">Featured</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="text-center text-muted py-4">No countries found.</td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="card-footer clearfix">
            {{ $countries->links() }}
        </div>
    </div>
</x-page-layout>
@endsection