@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.cities')],
    ];
@endphp

<x-ui.layout.page
    :title="__('geography.tabs.cities')"
    :subtitle="__('geography.cities.subtitle')"
    page-icon="fe fe-map-pin"
    :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.cities.create')"
                            :label="__('geography.actions.add_city')"
                        />
                    @endcan
                </x-slot:primary>
                <x-slot:filters>
                    <form method="GET" action="{{ route('settings.geography.cities.index') }}" class="row g-2 align-items-end" data-geo-cascade>
                        <div class="col-auto" style="min-width: 200px;">
                            <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>
                        <div class="col-auto" style="min-width: 200px;">
                            <x-ui.form.search-select
                                name="region_id"
                                lookup="regions"
                                lookup-parent="country_id"
                                :label="__('geography.fields.region')"
                                :options="[]"
                                :selected="$regionId"
                                :placeholder="__('geography.placeholders.all_regions')"
                                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.region')],
            ['label' => __('geography.fields.country')],
            ['label' => __('geography.fields.source')],
            ['label' => __('geography.fields.sort_order')],
            ['label' => __('geography.fields.status')],
            ['label' => __('common.actions'), 'align' => 'end', 'width' => '120px'],
        ]">
            @forelse ($cities as $city)
                @php
                    $isCustom = $city->tenant_id !== null;
                @endphp
                <x-ui.table.row>
                    <td><strong>{{ LocalizedName::fromModel($city) }}</strong></td>
                    <td>{{ $city->region ? LocalizedName::fromModel($city->region) : '—' }}</td>
                    <td>{{ $city->region?->country ? LocalizedName::fromModel($city->region->country) : '—' }}</td>
                    <td>
                        <x-ui.operational.status-badge
                            :label="$isCustom ? __('geography.source.custom') : __('geography.source.global')"
                            :variant="$isCustom ? 'info' : 'neutral'"
                        />
                    </td>
                    <td>{{ $city->sort_order }}</td>
                    <td>
                        <x-ui.operational.status-badge
                            :label="$city->is_active ? __('geography.status.active') : __('geography.status.inactive')"
                            :variant="$city->is_active ? 'success' : 'neutral'"
                        />
                    </td>
                    <td class="text-end">
                        @if ($isCustom && auth()->user()?->can('geography.manage'))
                            <x-ui.table.actions-trigger
                                :type="__('geography.singular.city')"
                                :id="$city->id"
                                :view-href="route('settings.geography.cities.edit', $city)"
                                :delete-url="route('settings.geography.cities.deactivate', $city)"
                            />
                        @else
                            <span class="text-muted small">{{ __('geography.readonly') }}</span>
                        @endif
                    </td>
                </x-ui.table.row>
            @empty
                <x-ui.table.row>
                    <td colspan="7" class="p-0">
                        <x-ui.operational.empty-state :title="__('geography.empty.cities')" />
                    </td>
                </x-ui.table.row>
            @endforelse
        </x-ui.table.table>

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

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

@push('scripts')
    <script src="{{ asset('assets/admin/js/erp-geo-cascade.js') }}"></script>
@endpush
