@php
    use App\Support\LocalizedName;

    $breadcrumbs = [
        ['label' => __('common.home'), 'url' => route('dashboard.index')],
        ['label' => __('nav.group.administration')],
        ['label' => __('geography.title'), 'url' => route('settings.geography.countries.index')],
        ['label' => __('geography.tabs.regions')],
    ];
@endphp

<x-ui.layout.page
    :title="__('geography.tabs.regions')"
    :subtitle="__('geography.regions.subtitle')"
    page-icon="fe fe-map"
    :breadcrumbs="$breadcrumbs"
>
    @include('pages.settings.geography._nav', ['activeTab' => $activeTab])

    <x-ui.operational.index-shell>
        <x-slot:toolbar>
            <x-ui.operational.action-bar>
                <x-slot:primary>
                    @can('geography.manage')
                        <x-ui.operational.create-button
                            :href="route('settings.geography.regions.create')"
                            :label="__('geography.actions.add_region')"
                        />
                    @endcan
                </x-slot:primary>
                <x-slot:filters>
                    <form method="GET" action="{{ route('settings.geography.regions.index') }}" class="d-flex gap-2 align-items-end">
                        <div style="min-width: 220px;">
                            <x-ui.form.search-select
                                name="country_id"
                                lookup="countries"
                                :label="__('geography.fields.country')"
                                :options="$countryOptions"
                                :selected="$countryId"
                                :placeholder="__('geography.placeholders.all_countries')"
                                optional
                                data-auto-submit="1"
                            />
                        </div>
                    </form>
                </x-slot:filters>
            </x-ui.operational.action-bar>
        </x-slot:toolbar>

        <x-ui.table.table :columns="[
            ['label' => __('geography.fields.name')],
            ['label' => __('geography.fields.country')],
            ['label' => __('geography.fields.source')],
            ['label' => __('geography.fields.cities_count')],
            ['label' => __('geography.fields.sort_order')],
            ['label' => __('geography.fields.status')],
            ['label' => __('common.actions'), 'align' => 'end', 'width' => '120px'],
        ]">
            @forelse ($regions as $region)
                @php
                    $isCustom = $region->tenant_id !== null;
                @endphp
                <x-ui.table.row>
                    <td><strong>{{ LocalizedName::fromModel($region) }}</strong></td>
                    <td>{{ $region->country ? LocalizedName::fromModel($region->country) : '—' }}</td>
                    <td>
                        <x-ui.operational.status-badge
                            :label="$isCustom ? __('geography.source.custom') : __('geography.source.global')"
                            :variant="$isCustom ? 'info' : 'neutral'"
                        />
                    </td>
                    <td>{{ $region->cities_count }}</td>
                    <td>{{ $region->sort_order }}</td>
                    <td>
                        <x-ui.operational.status-badge
                            :label="$region->is_active ? __('geography.status.active') : __('geography.status.inactive')"
                            :variant="$region->is_active ? 'success' : 'neutral'"
                        />
                    </td>
                    <td class="text-end">
                        <div class="d-inline-flex gap-1">
                            <x-ui.buttons.secondary
                                :href="route('settings.geography.cities.index', ['region_id' => $region->id, 'country_id' => $region->country_id])"
                                size="sm"
                            >
                                {{ __('geography.actions.view_cities') }}
                            </x-ui.buttons.secondary>
                            @if ($isCustom && auth()->user()?->can('geography.manage'))
                                <x-ui.table.actions-trigger
                                    :type="__('geography.singular.region')"
                                    :id="$region->id"
                                    :view-href="route('settings.geography.regions.edit', $region)"
                                    :delete-url="route('settings.geography.regions.deactivate', $region)"
                                />
                            @endif
                        </div>
                    </td>
                </x-ui.table.row>
            @empty
                <x-ui.table.row>
                    <td colspan="7" class="p-0">
                        <x-ui.operational.empty-state :title="__('geography.empty.regions')" />
                    </td>
                </x-ui.table.row>
            @endforelse
        </x-ui.table.table>

        @if ($regions->hasPages())
            <div class="mt-3">{{ $regions->links() }}</div>
        @endif
    </x-ui.operational.index-shell>

    <x-ui.modal.actions />
</x-ui.layout.page>
