155 lines
10 KiB
PHP
Executable File
155 lines
10 KiB
PHP
Executable File
<x-layouts.app>
|
|
<div class="mx-auto max-w-[1800px] space-y-6" dusk="countries-index">
|
|
<div
|
|
class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
|
|
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-blue-200">Reference data</p>
|
|
<h1 class="mt-2 text-3xl font-semibold tracking-tight">Countries</h1>
|
|
<p class="mt-2 max-w-3xl text-sm text-blue-100/90">Governed ISO 3166 country records for tenants,
|
|
companies, warehouses, billing, shipping, carriers, customs and integrations.</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<form method="POST" action="{{ route('countries.sync') }}">
|
|
@csrf
|
|
<button type="submit"
|
|
class="rounded-xl bg-white/10 px-4 py-2.5 text-sm font-semibold text-white ring-1 ring-white/20 hover:bg-white/20">Sync
|
|
ISO data</button>
|
|
</form>
|
|
<a href="{{ route('countries.create') }}" wire:navigate
|
|
class="rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">New
|
|
country</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@if (session('success'))
|
|
<div
|
|
class="rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-200">
|
|
{{ session('success') }}</div>
|
|
@endif
|
|
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<div
|
|
class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="text-sm text-zinc-500">Total countries</div>
|
|
<div class="mt-2 text-3xl font-semibold">{{ number_format($totalCount) }}</div>
|
|
</div>
|
|
<div
|
|
class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="text-sm text-zinc-500">Active</div>
|
|
<div class="mt-2 text-3xl font-semibold text-emerald-700 dark:text-emerald-300">
|
|
{{ number_format($activeCount) }}</div>
|
|
</div>
|
|
<div
|
|
class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="text-sm text-zinc-500">Inactive</div>
|
|
<div class="mt-2 text-3xl font-semibold text-amber-700 dark:text-amber-300">
|
|
{{ number_format($inactiveCount) }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="GET" action="{{ route('countries.index') }}"
|
|
class="grid gap-3 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 md:grid-cols-[1fr_220px_220px_auto] md:items-center">
|
|
<label for="sonar-input-517d4d4cc5" class="visually-hidden">Search by country, ISO code, currency or calling code</label>
|
|
<input name="search" value="{{ $search }}"
|
|
placeholder="Search by country, ISO code, currency or calling code"
|
|
class="min-h-11 rounded-xl border-zinc-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" id="sonar-input-517d4d4cc5">
|
|
<select aria-label="Status" name="status"
|
|
class="min-h-11 rounded-xl border-zinc-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100">
|
|
<option value="all" @selected($status === 'all')>All statuses</option>
|
|
<option value="active" @selected($status === 'active')>Active</option>
|
|
<option value="inactive" @selected($status === 'inactive')>Inactive</option>
|
|
</select>
|
|
<select name="region"
|
|
class="min-h-11 rounded-xl border-zinc-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100">
|
|
<option value="all" @selected($region === 'all')>All regions</option>
|
|
@foreach ($regions as $availableRegion)
|
|
<option value="{{ $availableRegion }}" @selected($region === $availableRegion)>{{ $availableRegion }}</option>
|
|
@endforeach
|
|
</select>
|
|
<button type="submit"
|
|
class="rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">Filter</button>
|
|
</form>
|
|
|
|
<div
|
|
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-800">
|
|
<caption class="sr-only">Data table</caption>
|
|
<thead class="bg-zinc-50 dark:bg-zinc-950">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-zinc-500">
|
|
Country</th>
|
|
<th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-zinc-500">ISO
|
|
</th>
|
|
<th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-zinc-500">
|
|
Region</th>
|
|
<th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-zinc-500">
|
|
Currency</th>
|
|
<th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide text-zinc-500">
|
|
Support</th>
|
|
<th class="px-4 py-3 text-right text-xs font-bold uppercase tracking-wide text-zinc-500">
|
|
Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
|
@forelse ($countries as $country)
|
|
<tr class="hover:bg-blue-50/50 dark:hover:bg-blue-950/20">
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xl">{{ $country->flag_emoji }}</span>
|
|
<div>
|
|
<div class="font-semibold text-zinc-900 dark:text-zinc-100">
|
|
{{ $country->effective_name }}</div>
|
|
<div class="text-xs text-zinc-500">
|
|
{{ $country->official_name ?: $country->name }}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<div class="font-mono text-sm text-blue-700 dark:text-blue-300">
|
|
{{ $country->alpha2 }} / {{ $country->alpha3 }} / {{ $country->numeric }}
|
|
</div>
|
|
<div class="text-xs text-zinc-500">
|
|
{{ str($country->iso_status ?? 'official')->replace('_', ' ')->title() }}</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm text-zinc-600 dark:text-zinc-300">
|
|
<div>{{ $country->region ?: '—' }}</div>
|
|
<div class="text-xs text-zinc-500">{{ $country->subregion ?: '—' }}</div>
|
|
</td>
|
|
<td class="px-4 py-3 text-sm">
|
|
<div class="font-mono text-zinc-900 dark:text-zinc-100">
|
|
{{ $country->currency_code ?: '—' }}</div>
|
|
<div class="text-xs text-zinc-500">{{ $country->currency_name ?: '—' }}</div>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
@if ($country->is_active)
|
|
<span
|
|
class="rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-bold text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">Active</span>@else<span
|
|
class="rounded-full bg-amber-100 px-2.5 py-1 text-xs font-bold text-amber-800 dark:bg-amber-950 dark:text-amber-200">Inactive</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-4 py-3 text-right"><a href="{{ route('countries.show', $country) }}"
|
|
wire:navigate
|
|
class="rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-blue-700">Open</a>
|
|
<a href="{{ route('countries.edit', $country) }}" wire:navigate
|
|
class="rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-emerald-700">Edit</a>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="px-4 py-10 text-center text-sm text-zinc-500">No countries
|
|
matched your search.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="border-t border-zinc-200 px-4 py-3 dark:border-zinc-800">{{ $countries->links() }}</div>
|
|
</div>
|
|
</div>
|
|
</x-layouts.app>
|