@php
    $initialCoordinates = old('coordinates', isset($city) ? $city->coordinates : []);
    if (is_string($initialCoordinates)) {
        $decoded = json_decode($initialCoordinates, true);
        $initialCoordinates = json_last_error() === JSON_ERROR_NONE ? $decoded : [];
    }
    $useCustomPrice = (bool) old('use_custom_price', isset($city) ? $city->use_custom_price : false);
    $pricePerMinute = old('price_per_minute', isset($city) ? $city->price_per_minute : '');
    $switchId = 'use_custom_price-' . ($city->id ?? '');
    $defaultCountry = \App\Models\Country::find(1);
    $defaultCountryName = $defaultCountry
        ? ($defaultCountry->getTranslation('name', app()->getLocale()) ?? $defaultCountry->name)
        : 'Saudi Arabia';
    $hasInitialBoundary = is_array($initialCoordinates) && count($initialCoordinates) >= 3;
@endphp

<style>
    .city-boundary-panel {
        border: 1px solid #e0e0e0;
        border-radius: .75rem;
        overflow: hidden;
        background: #fff;
    }

    .city-boundary-toolbar {
        padding: .85rem 1rem;
        border-bottom: 1px solid #ececec;
        background: #fafafa;
    }

    .city-boundary-steps {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-bottom: .75rem;
    }

    .city-boundary-step {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .35rem .65rem;
        border-radius: 999px;
        background: #f1f3f5;
        color: #5e5873;
        font-size: .82rem;
    }

    .city-boundary-step__num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: #7367f0;
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
    }

    .city-boundary-status {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .35rem .65rem;
        border-radius: .5rem;
        font-size: .82rem;
        font-weight: 600;
    }

    .city-boundary-status--empty {
        background: #fff3cd;
        color: #856404;
    }

    .city-boundary-status--ready {
        background: #d4edda;
        color: #155724;
    }

    .city-boundary-status--editing {
        background: #d1ecf1;
        color: #0c5460;
    }

    .city-boundary-search-wrap {
        position: relative;
        margin-bottom: .75rem;
    }

    .city-boundary-search-results {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 1100;
        max-height: 240px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: .5rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
        display: none;
    }

    .city-boundary-search-results.is-open {
        display: block;
    }

    .city-boundary-search-item {
        display: block;
        width: 100%;
        text-align: start;
        padding: .65rem .85rem;
        border: 0;
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
        color: #333;
        cursor: pointer;
    }

    .city-boundary-search-item:last-child {
        border-bottom: 0;
    }

    .city-boundary-search-item:hover,
    .city-boundary-search-item:focus {
        background: #f8f7ff;
        outline: none;
    }

    #city-boundary-map {
        width: 100%;
        height: 480px;
        position: relative;
        z-index: 0;
        background: #e8e8e8;
    }

    #city-boundary-map.leaflet-container .leaflet-tile-pane img,
    #city-boundary-map.leaflet-container img.leaflet-tile {
        max-width: none !important;
        max-height: none !important;
    }

    .city-boundary-map-overlay {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 500;
        pointer-events: none;
    }

    .city-boundary-map-hint {
        display: inline-block;
        padding: .45rem .7rem;
        border-radius: .5rem;
        background: rgba(255, 255, 255, .95);
        color: #444;
        font-size: .78rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    }
</style>

<fieldset class="form-group">
    <legend class="col-form-label pt-0">{{ __('admin.city_region_map') }}</legend>
    <p class="text-muted small mb-1">{{ __('admin.city_region_map_hint') }}</p>

    <div class="city-boundary-panel">
        <div class="city-boundary-toolbar">
            <div class="city-boundary-steps">
                <span class="city-boundary-step">
                    <span class="city-boundary-step__num">1</span>
                    {{ __('admin.city_boundary_step_search') }}
                </span>
                <span class="city-boundary-step">
                    <span class="city-boundary-step__num">2</span>
                    {{ __('admin.city_boundary_step_fetch_or_draw') }}
                </span>
                <span class="city-boundary-step">
                    <span class="city-boundary-step__num">3</span>
                    {{ __('admin.city_boundary_step_save') }}
                </span>
            </div>

            <div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
                <span id="city-boundary-status" class="city-boundary-status {{ $hasInitialBoundary ? 'city-boundary-status--ready' : 'city-boundary-status--empty' }}">
                    <i class="feather icon-map-pin"></i>
                    <span id="city-boundary-status-text">
                        {{ $hasInitialBoundary ? __('admin.city_boundary_status_ready') : __('admin.city_boundary_status_empty') }}
                    </span>
                </span>
                <small class="text-muted" id="city-boundary-meta"></small>
            </div>

            <div class="city-boundary-search-wrap">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="feather icon-search"></i></span>
                    </div>
                    <input type="text"
                           id="city-map-search-input"
                           class="form-control"
                           placeholder="{{ __('admin.city_map_search_placeholder') }}"
                           autocomplete="off">
                </div>
                <div id="city-map-search-results" class="city-boundary-search-results"></div>
            </div>

            <div class="d-flex flex-wrap">
                <button type="button" class="btn btn-sm btn-primary mr-1 mb-1" id="fetch-city-boundary-btn">
                    <i class="feather icon-download-cloud"></i> {{ __('admin.fetch_city_boundary') }}
                </button>
                <button type="button" class="btn btn-sm btn-outline-primary mr-1 mb-1" id="start-draw-boundary-btn">
                    <i class="feather icon-edit-3"></i> {{ __('admin.city_boundary_start_draw') }}
                </button>
                <button type="button" class="btn btn-sm btn-outline-info mr-1 mb-1" id="goto-current-location-btn">
                    <i class="feather icon-navigation"></i> {{ __('admin.go_to_current_location') }}
                </button>
                <button type="button" class="btn btn-sm btn-outline-warning mr-1 mb-1" id="edit-city-boundary-btn" style="display:none;">
                    <i class="feather icon-edit-2"></i> {{ __('admin.city_boundary_edit') }}
                </button>
                <button type="button" class="btn btn-sm btn-success mr-1 mb-1" id="save-city-boundary-btn" style="display:none;">
                    <i class="feather icon-check"></i> {{ __('admin.city_boundary_save_edit') }}
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary mr-1 mb-1" id="cancel-city-boundary-btn" style="display:none;">
                    <i class="feather icon-x"></i> {{ __('admin.city_boundary_cancel_edit') }}
                </button>
                <button type="button" class="btn btn-sm btn-outline-danger mr-1 mb-1" id="delete-city-boundary-btn" style="display:none;">
                    <i class="feather icon-trash-2"></i> {{ __('admin.city_boundary_delete') }}
                </button>
            </div>
        </div>

        <div style="position: relative;">
            <div id="city-boundary-map"
                 data-initial-coordinates='@json($initialCoordinates)'
                 data-fetch-url="{{ route('admin.cities.fetchBoundary') }}"
                 data-search-url="{{ route('admin.cities.searchLocation') }}"
                 data-switch-id="{{ $switchId }}"
                 data-default-country-name="{{ $defaultCountryName }}"></div>
            <div class="city-boundary-map-overlay">
                <span class="city-boundary-map-hint" id="city-boundary-draw-hint">{{ __('admin.city_boundary_draw_hint') }}</span>
            </div>
        </div>
    </div>

    <input type="hidden" name="coordinates" id="city-coordinates-input"
           value='@json($initialCoordinates)'>
</fieldset>

<div class="row">
    <div class="col-md-6 col-12">
        <div class="form-group">
            <x-admin.switch name="use_custom_price" :model="$city ?? null" :label="true" :ajax="false" />
        </div>
    </div>
    <div class="col-md-6 col-12" id="city-price-field" style="{{ $useCustomPrice ? '' : 'display:none;' }}">
        <div class="form-group">
            <label for="price_per_minute">{{ __('admin.price_per_minute') }} ({{ __('admin.currency') }})</label>
            <div class="controls">
                <input type="number" name="price_per_minute" id="price_per_minute" step="0.01" min="0"
                       class="form-control"
                       value="{{ $useCustomPrice ? $pricePerMinute : '' }}"
                       placeholder="{{ __('admin.price_per_minute') }}"
                       {{ $useCustomPrice ? '' : 'disabled' }}>
            </div>
        </div>
    </div>
</div>