@php($editing = $zone->exists)
@php($oldPoints = old('coordinates'))
@php($points = is_array($oldPoints) ? array_values($oldPoints) : ($zone->coordinates ?? []))
<x-admin.layout :title="$editing ? __('Edit :name', ['name' => $zone->name]) : __('New zone')">
    <x-slot:head>@vite('resources/js/zone-map.js')</x-slot:head>

    <x-admin.page-header :title="$editing ? __('Edit :name', ['name' => $zone->name]) : __('New zone')" :back="route('admin.zones.index', array_filter(['city_id' => $zone->city_id]))" />

    <form method="POST" action="{{ $editing ? route('admin.zones.update', $zone) : route('admin.zones.store') }}" class="grid max-w-6xl grid-cols-1 gap-6 lg:grid-cols-3">
        @csrf
        @if ($editing) @method('PUT') @endif
        <input type="hidden" name="coordinates" id="coordinates" value="{{ json_encode($points) }}">

        <x-admin.card :title="__('Area')" :padding="false" class="lg:col-span-2">
            <div id="zone-editor" class="h-[32rem] min-h-80"
                 data-input="coordinates"
                 data-city-select="city_id"
                 data-max-points="{{ \App\Models\Zone::MAX_POINTS }}"
                 data-center="{{ json_encode($center) }}"
                 data-city-centers="{{ json_encode($cityCenters) }}"
                 data-zones="{{ json_encode($otherZones) }}"
                 data-point-hint="{{ __('Drag to move, click to remove') }}"
                 data-tile-url="{{ setting('map.tile_url') }}"
                 data-tile-attribution="{{ setting('map.tile_attribution') }}"></div>
            <div class="flex flex-wrap items-center justify-between gap-3 border-t border-gray-200 px-5 py-3 dark:border-gray-800">
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('Click the map to add a point, drag a point to move it, click a point to remove it. Other zones are shown dashed.') }}</p>
                <x-admin.button variant="secondary" size="sm" icon="trash" data-zone-clear>{{ __('Clear') }}</x-admin.button>
            </div>
            @if ($message = $errors->first('coordinates') ?: $errors->first('coordinates.*'))
                <p class="form-error px-5 pb-4">{{ $message }}</p>
            @endif
        </x-admin.card>

        <div class="space-y-6">
            <x-admin.card :title="__('Details')">
                <div class="space-y-4">
                    <x-admin.input name="name" :label="__('Name')" :value="$zone->name" required :placeholder="__('e.g. Downtown')" />
                    <x-admin.select name="city_id" :label="__('City')" :options="$cities" :value="$zone->city_id" :placeholder="__('Choose a city')" required />
                    <x-admin.input name="priority" type="number" min="0" max="999" :label="__('Priority')" :value="$zone->priority" required
                                   :hint="__('Where zones overlap, such as an airport inside a city, the highest priority wins.')" />
                </div>
            </x-admin.card>

            <x-admin.card :title="__('Airport')" x-data="{ airport: {{ Js::from((bool) old('is_airport', $zone->is_airport)) }} }">
                <x-admin.toggle name="is_airport" :label="__('Airport zone')" :checked="$zone->is_airport" x-model="airport" />
                <div x-show="airport" x-cloak class="mt-4">
                    <x-admin.input name="airport_fee" type="number" step="0.01" min="0" :label="__('Airport fee')" :value="data_get($zone->settings, 'airport_fee')"
                                   :hint="__('Added once per trip when the pickup or drop is in an airport zone; the higher fee wins.')" />
                </div>
            </x-admin.card>

            <x-admin.card>
                <x-admin.toggle name="is_active" :label="__('Active')" :checked="$zone->is_active" :hint="__('Inactive zones are ignored by pricing and dispatch.')" />
                <div class="mt-5 flex gap-2">
                    <x-admin.button type="submit">{{ $editing ? __('Save changes') : __('Create zone') }}</x-admin.button>
                    <x-admin.button variant="secondary" :href="route('admin.zones.index')">{{ __('Cancel') }}</x-admin.button>
                </div>
            </x-admin.card>
        </div>
    </form>
</x-admin.layout>