@extends('studio.layout')

@section('title', $experience->title . ' – ' . config('brand.name'))

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('studio.tenants.index') }}">Tenants</a></li>
        <li class="breadcrumb-item"><a href="{{ route('studio.tenants.show', $experience->tenant_id) }}">{{ $experience->tenant->name }}</a></li>
        <li class="breadcrumb-item active">{{ $experience->title }}</li>
    </ol>
</nav>

<div class="row g-4">
    {{-- Experience info --}}
    <div class="col-md-4">
        <div class="card shadow-sm">
            <div class="card-body">
                {{-- #2 Rename: inline form replacing the static title --}}
                <form method="POST" action="{{ route('studio.experiences.rename', $experience->id) }}" class="mb-2">
                    @csrf
                    @method('PATCH')
                    <div class="input-group input-group-sm">
                        <input type="text" name="title" class="form-control fw-bold"
                               value="{{ old('title', $experience->title) }}"
                               required maxlength="255" aria-label="Experience title">
                        <button type="submit" class="btn btn-outline-primary">{{ __('btn.rename') }}</button>
                    </div>
                </form>
                <p class="text-muted small mb-1">{{ $experience->slug }}</p>
                <span class="badge {{ $experience->status === 'published' ? 'bg-success' : 'bg-secondary' }} mb-3">
                    {{ $experience->status }}
                </span>
                <ul class="list-unstyled small mb-0">
                    <li><strong>{{ __('experience.languages_label') }}</strong>
                        @foreach($languages as $lang)
                            <span class="badge bg-secondary me-1"
                                  style="font-size:.7rem">{{ strtoupper($lang->locale) }}</span>
                        @endforeach
                    </li>
                    <li><strong>{{ __('experience.zones_label') }}</strong> {{ $experience->zones_count }}</li>
                    <li><strong>{{ __('experience.created_label') }}</strong> {{ $experience->created_at->format('d M Y') }}</li>
                </ul>

                {{-- #7 Audio completeness indicator --}}
                <div class="mt-3">
                    @if($missingZoneIds->isEmpty())
                        <span class="badge bg-success">{{ __('status.all_audio_complete') }}</span>
                    @else
                        <a href="{{ route('studio.map.editor', $experience->id) }}?missing_zone_id={{ $missingZoneIds->first() }}"
                           class="badge bg-warning text-dark text-decoration-none">
                            {{ __('experience.missing_audio') }} {{ $missingZoneIds->count() }}
                        </a>
                    @endif
                </div>
            </div>
        </div>

        {{-- QR Code card --}}
        <div class="card shadow-sm mt-4">
            <div class="card-header fw-semibold small py-2">Experience QR Code</div>
            <div class="card-body text-center py-3">
                <div id="qr-code" class="d-inline-block mb-2" style="line-height:0"></div>
                <p class="font-monospace small text-muted mt-2 mb-3" style="word-break:break-all;font-size:.7rem">
                    aurolis://experience/{{ $experience->id }}
                </p>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-download-qr">
                    ⬇&nbsp; Download PNG
                </button>
            </div>
        </div>
    </div>

    {{-- Right column --}}
    <div class="col-md-8">

        {{-- Publish card --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                {{ __('experience.publish_heading') }}
                @if($latestManifest)
                    <span class="badge bg-success">v{{ $latestManifest->version }}</span>
                @else
                    <span class="badge bg-secondary">{{ __('status.not_published') }}</span>
                @endif
            </div>
            <div class="card-body">
                @if($latestManifest)
                    <p class="small mb-2">
                        {{ __('status.last_published') }} <strong>{{ $latestManifest->generated_at->format('d M Y, H:i') }}</strong>
                        &mdash; {{ __('status.version') }} <strong>{{ $latestManifest->version }}</strong>
                    </p>
                    <p class="small text-muted mb-3">
                        {{ __('experience.manifest_url_label') }}
                        <a href="{{ url('/v1/experiences/' . $experience->id . '/manifest') }}" target="_blank"
                           class="font-monospace">/v1/experiences/{{ $experience->id }}/manifest</a>
                    </p>
                @else
                    <p class="small text-muted mb-3">
                        {{ __('experience.unpublished_help') }}
                    </p>
                @endif

                {{-- #5 + #6: publish (with dialog confirm) and unpublish (with dialog confirm) side by side --}}
                @php
                    $noZones         = $experience->zones_count === 0;
                    $audioIncomplete = !$missingZoneIds->isEmpty();
                    $nothingChanged  = $latestManifest && !$hasChanges;
                    $publishDisabled = $noZones || $audioIncomplete || $nothingChanged;
                @endphp
                <div class="d-flex gap-2 flex-wrap align-items-start">
                    <div>
                    <form id="form-publish" method="POST" action="{{ route('studio.experiences.publish', $experience->id) }}">
                        @csrf
                        <button type="submit"
                                class="btn btn-success{{ $publishDisabled ? ' disabled' : '' }}"
                                @if($publishDisabled) disabled aria-disabled="true" @endif
                                @if($nothingChanged && !$audioIncomplete) title="{{ __('experience.no_changes_tooltip') }}" @endif>
                            @if($nothingChanged && !$audioIncomplete)
                                {{ __('btn.up_to_date') }}
                            @elseif($latestManifest)
                                {{ __('btn.republish') }}
                            @else
                                {{ __('btn.publish') }}
                            @endif
                        </button>
                    </form>
                    @if($noZones)
                    <p class="text-danger small mt-1 mb-0">
                        {{ __('experience.no_zones_error') }}
                    </p>
                    @elseif($audioIncomplete)
                    <p class="text-danger small mt-1 mb-0">
                        {{ __('experience.incomplete_audio_error') }}
                    </p>
                    @endif
                    </div>

                    @if($experience->status === 'published')
                    <form id="form-unpublish" method="POST" action="{{ route('studio.experiences.unpublish', $experience->id) }}">
                        @csrf
                        <button type="submit" class="btn btn-outline-danger">{{ __('btn.unpublish') }}</button>
                    </form>
                    @endif
                </div>
            </div>
        </div>

        {{-- Map configuration --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                {{ __('experience.map_config') }}
                @if($experience->map)
                    {{-- #4 Keep only this RED button; the duplicate outline button below is removed --}}
                    <a href="{{ route('studio.map.editor', $experience->id) }}" class="btn btn-sm btn-danger">
                        {{ __('btn.open_map_editor') }}
                    </a>
                @endif
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('studio.map.save', $experience->id) }}" id="form-map-config">
                    @csrf
                    @method('PUT')

                    {{-- Address search --}}
                    <div class="mb-2">
                        <label class="form-label">{{ __('form.search_address') }}</label>
                        <div class="input-group">
                            <input type="text" id="address-search" class="form-control"
                                   placeholder="{{ __('form.search_address_placeholder') }}">
                            <button type="button" id="btn-find-location" class="btn btn-outline-secondary">
                                {{ __('btn.find_location') }}
                            </button>
                        </div>
                        <div id="geocode-error" class="text-danger small mt-1 d-none"></div>
                    </div>

                    {{-- Leaflet map preview with crosshair --}}
                    <div class="mb-1" style="position:relative; border-radius:8px; overflow:hidden;">
                        <div id="map-config-preview" style="height:300px;"></div>
                        {{-- Crosshair fixed at visual center --}}
                        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;pointer-events:none;line-height:0;">
                            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <line x1="14" y1="2"  x2="14" y2="26" stroke="rgba(0,0,0,0.55)" stroke-width="1.5"/>
                                <line x1="2"  y1="14" x2="26" y2="14" stroke="rgba(0,0,0,0.55)" stroke-width="1.5"/>
                                <line x1="14" y1="2"  x2="14" y2="26" stroke="rgba(255,255,255,0.7)" stroke-width="0.5" stroke-dasharray="2 3"/>
                                <line x1="2"  y1="14" x2="26" y2="14" stroke="rgba(255,255,255,0.7)" stroke-width="0.5" stroke-dasharray="2 3"/>
                                <circle cx="14" cy="14" r="3.5" stroke="rgba(0,0,0,0.55)" stroke-width="1.5" fill="none"/>
                                <circle cx="14" cy="14" r="3.5" stroke="rgba(255,255,255,0.7)" stroke-width="0.5" fill="none"/>
                            </svg>
                        </div>
                    </div>

                    {{-- Live readout --}}
                    <div class="form-text mb-3" id="map-center-readout" style="font-variant-numeric:tabular-nums;">
                        Center: —, — | Zoom: —
                    </div>

                    {{-- Hidden inputs — updated by JS as user drags/zooms --}}
                    <input type="hidden" name="center_lat"   id="input-center-lat"
                           value="{{ $experience->map?->center_lat ?? 50.8503 }}">
                    <input type="hidden" name="center_lng"   id="input-center-lng"
                           value="{{ $experience->map?->center_lng ?? 4.3517 }}">
                    <input type="hidden" name="default_zoom" id="input-default-zoom"
                           value="{{ $experience->map?->default_zoom ?? 14 }}">

                    {{-- Advanced: manual coordinate entry (collapsible) --}}
                    <div class="mb-3">
                        <a class="small text-muted text-decoration-none" data-bs-toggle="collapse"
                           href="#map-advanced" role="button" aria-expanded="false">
                            ▸ {{ __('form.advanced_coordinates') }}
                        </a>
                        <div class="collapse" id="map-advanced">
                            <div class="row g-2 mt-1">
                                <div class="col-md-4">
                                    <label class="form-label small">{{ __('form.center_latitude') }}</label>
                                    <input type="number" step="any" id="adv-lat" class="form-control form-control-sm"
                                           value="{{ $experience->map?->center_lat ?? 50.8503 }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">{{ __('form.center_longitude') }}</label>
                                    <input type="number" step="any" id="adv-lng" class="form-control form-control-sm"
                                           value="{{ $experience->map?->center_lng ?? 4.3517 }}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label small">{{ __('form.default_zoom') }}</label>
                                    <input type="number" id="adv-zoom" class="form-control form-control-sm" min="1" max="20"
                                           value="{{ $experience->map?->default_zoom ?? 14 }}">
                                </div>
                            </div>
                            <button type="button" id="btn-apply-coords" class="btn btn-sm btn-outline-secondary mt-2">
                                Apply
                            </button>
                        </div>
                    </div>

                    <div class="mt-1">
                        <button type="submit" class="btn btn-primary">{{ __('btn.save_map_config') }}</button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Language Management --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold">{{ __('experience.language_management') }}</div>
            <div class="card-body">
                @if($languages->isNotEmpty())
                <table class="table table-sm mb-3">
                    <thead>
                        <tr>
                            <th>{{ __('table.language') }}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach($languages as $lang)
                    <tr>
                        <td>{{ __('locale.' . $lang->locale) }}</td>
                        <td>
                            @if($languages->count() > 1)
                            <button type="button" class="btn btn-link btn-sm text-danger p-0 btn-remove-lang"
                                    data-locale="{{ $lang->locale }}"
                                    data-label="{{ __('locale.' . $lang->locale) }}"
                                    data-action="{{ route('studio.experiences.languages.destroy', [$experience->id, $lang->locale]) }}">
                                {{ __('btn.remove_language') }}
                            </button>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
                @endif

                @php
                    $existingLocales = $languages->pluck('locale')->toArray();
                    $availableToAdd  = array_diff_key(\App\Models\ExperienceLanguage::LABELS, array_flip($existingLocales));
                @endphp
                @if(!empty($availableToAdd))
                <form method="POST" action="{{ route('studio.experiences.languages.store', $experience->id) }}"
                      class="d-flex gap-2 align-items-center">
                    @csrf
                    <select name="locale" class="form-select form-select-sm" style="width:auto">
                        @foreach($availableToAdd as $loc => $lbl)
                        <option value="{{ $loc }}">{{ __('locale.' . $loc) }}</option>
                        @endforeach
                    </select>
                    <button type="submit" class="btn btn-sm btn-outline-primary">{{ __('btn.add_language') }}</button>
                </form>
                @else
                <p class="text-muted small mb-0">{{ __('experience.all_languages_added') }}</p>
                @endif
            </div>
        </div>

        {{-- Audio Engine settings --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-semibold">{{ __('experience.audio_settings') }}</div>
            <div class="card-body">
                @php
                    $defaults = [
                        'out_of_zone'      => 'silence',
                        'zone_enter'       => 'fade_and_replace',
                        'fade_duration_ms' => 800,
                        'after_zone_audio' => 'silence',
                    ];
                    $p = array_merge($defaults, $experience->audio_policy ?? []);
                @endphp
                <form method="POST" action="{{ route('studio.experiences.audio-policy', $experience->id) }}">
                    @csrf
                    @method('PUT')
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label small">{{ __('form.outside_zones') }}</label>
                            <select name="out_of_zone" class="form-select form-select-sm">
                                <option value="silence"        @selected($p['out_of_zone']==='silence')>{{ __('audio.silence') }}</option>
                                <option value="global_ambient" @selected($p['out_of_zone']==='global_ambient')>{{ __('audio.global_ambient') }}</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">{{ __('form.on_zone_enter') }}</label>
                            <select name="zone_enter" class="form-select form-select-sm">
                                <option value="cut"                      @selected($p['zone_enter']==='cut')>{{ __('audio.cut') }}</option>
                                <option value="finish_current"           @selected($p['zone_enter']==='finish_current')>{{ __('audio.finish_current') }}</option>
                                <option value="finish_until_next_marker" @selected($p['zone_enter']==='finish_until_next_marker')>{{ __('audio.finish_until_next_marker') }}</option>
                                <option value="fade_and_replace"         @selected($p['zone_enter']==='fade_and_replace')>{{ __('audio.fade_and_replace') }}</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">{{ __('form.fade_duration_ms') }}</label>
                            <input type="number" name="fade_duration_ms" class="form-control form-control-sm"
                                   value="{{ $p['fade_duration_ms'] }}" min="0" max="10000">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small">{{ __('form.after_zone_audio') }}</label>
                            <select name="after_zone_audio" class="form-select form-select-sm">
                                <option value="silence"             @selected($p['after_zone_audio']==='silence')>{{ __('audio.silence') }}</option>
                                <option value="fallback_to_ambient" @selected($p['after_zone_audio']==='fallback_to_ambient')>{{ __('audio.fallback_to_ambient') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="mt-3">
                        <button type="submit" class="btn btn-primary btn-sm">{{ __('btn.save_audio_settings') }}</button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Ambient Audio (visible only when out_of_zone = global_ambient) --}}
        <div id="ambient-audio-section" class="card shadow-sm mb-4 {{ $p['out_of_zone'] === 'global_ambient' ? '' : 'd-none' }}">
            <div class="card-header fw-semibold small py-2">{{ __('audio.ambient_audio') }}</div>
            <div class="card-body">
                @if($experience->ambientAudioFragment)
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <span class="small text-muted font-monospace">{{ $experience->ambientAudioFragment->label }}</span>
                        <a href="{{ route('studio.audio.markers', $experience->ambientAudioFragment->id) }}?ambient=1"
                           class="btn btn-sm btn-outline-primary">{{ __('audio.edit_markers') }}</a>
                        <form id="form-delete-ambient"
                              method="POST"
                              action="{{ route('studio.experiences.ambient-audio.destroy', $experience->id) }}"
                              class="d-inline">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-outline-danger">{{ __('btn.delete') }}</button>
                        </form>
                    </div>
                @else
                    <form method="POST"
                          action="{{ route('studio.experiences.ambient-audio.store', $experience->id) }}"
                          enctype="multipart/form-data">
                        @csrf
                        <div class="d-flex align-items-center gap-2">
                            <input type="file" name="audio" accept=".mp3,.wav,.ogg,.m4a,.aac"
                                   class="form-control form-control-sm" style="max-width:320px">
                            <button type="submit" class="btn btn-sm btn-primary">{{ __('btn.upload') }}</button>
                        </div>
                        @error('audio') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                    </form>
                @endif
            </div>
        </div>

    </div>{{-- end right column --}}
</div>

{{-- Remove language confirmation dialog --}}
<dialog id="dlg-remove-lang" style="border:none; border-radius:.5rem; padding:0; box-shadow:0 4px 24px rgba(0,0,0,.15); min-width:320px; max-width:420px">
    <div class="p-4">
        <h6 class="fw-bold mb-2">{{ __('dialog.remove_language_title') }}</h6>
        <p class="small text-muted mb-3" id="dlg-remove-lang-body"></p>
        <div class="d-flex gap-2 justify-content-end">
            <button type="button" class="btn btn-secondary btn-sm" id="dlg-remove-lang-cancel">{{ __('btn.cancel') }}</button>
            <form id="dlg-remove-lang-form" method="POST" class="d-inline">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger btn-sm">{{ __('dialog.remove_language_btn') }}</button>
            </form>
        </div>
    </div>
</dialog>

{{-- Publish confirmation dialog --}}
<dialog id="dlg-publish" style="border:none; border-radius:.5rem; padding:0; box-shadow:0 4px 24px rgba(0,0,0,.15); min-width:320px">
    <form method="dialog" class="p-4">
        <h6 class="fw-bold mb-2">{{ __('dialog.publish_title') }}</h6>
        <p class="small text-muted mb-3">{{ __('dialog.publish') }}</p>
        <div class="d-flex gap-2 justify-content-end">
            <button value="cancel" class="btn btn-secondary btn-sm">{{ __('btn.cancel') }}</button>
            <button value="confirm" class="btn btn-success btn-sm">{{ __('btn.publish') }}</button>
        </div>
    </form>
</dialog>

{{-- Unpublish confirmation dialog --}}
<dialog id="dlg-unpublish" style="border:none; border-radius:.5rem; padding:0; box-shadow:0 4px 24px rgba(0,0,0,.15); min-width:320px">
    <form method="dialog" class="p-4">
        <h6 class="fw-bold mb-2">{{ __('dialog.unpublish_title') }}</h6>
        <p class="small text-muted mb-3">{{ __('dialog.unpublish') }}</p>
        <div class="d-flex gap-2 justify-content-end">
            <button value="cancel" class="btn btn-secondary btn-sm">{{ __('btn.cancel') }}</button>
            <button value="confirm" class="btn btn-danger btn-sm">{{ __('btn.unpublish') }}</button>
        </div>
    </form>
</dialog>

{{-- Delete ambient audio confirmation dialog --}}
<dialog id="dlg-delete-ambient" style="border:none; border-radius:.5rem; padding:0; box-shadow:0 4px 24px rgba(0,0,0,.15); min-width:320px; max-width:420px">
    <form method="dialog" class="p-4">
        <h6 class="fw-bold mb-2">{{ __('dialog.delete_ambient_title') }}</h6>
        <p class="small text-muted mb-3">{{ __('dialog.delete_ambient') }}</p>
        <div class="d-flex gap-2 justify-content-end">
            <button value="cancel" class="btn btn-secondary btn-sm">{{ __('btn.cancel') }}</button>
            <button value="confirm" class="btn btn-danger btn-sm">{{ __('btn.delete') }}</button>
        </div>
    </form>
</dialog>
@endsection

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<style>
dialog::backdrop { background: rgba(0,0,0,.4); }
#qr-code canvas, #qr-code img { border-radius: 4px; display: block; }
/* Prevent Leaflet attribution from overlapping readout */
#map-config-preview .leaflet-control-attribution { font-size: 9px; }
</style>
@endpush

@push('scripts')
{{-- Leaflet (map config preview) --}}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
{{-- QR code library (no npm needed — pure browser) --}}
<script src="https://cdn.jsdelivr.net/npm/qrcodejs@1.0.0/qrcode.min.js"></script>
<script>
(function () {
    const qrEl  = document.getElementById('qr-code');
    const qrData = 'aurolis://experience/{{ $experience->id }}';
    if (!qrEl) return;

    const qr = new QRCode(qrEl, {
        text:         qrData,
        width:        200,
        height:       200,
        colorDark:    '#000000',
        colorLight:   '#ffffff',
        correctLevel: QRCode.CorrectLevel.M,
    });

    document.getElementById('btn-download-qr')?.addEventListener('click', () => {
        const canvas = qrEl.querySelector('canvas');
        const img    = qrEl.querySelector('img');
        const link   = document.createElement('a');
        link.download = 'qr-{{ $experience->slug }}.png';
        if (canvas) {
            link.href = canvas.toDataURL('image/png');
        } else if (img) {
            link.href = img.src;
        } else { return; }
        link.click();
    });
}());
</script>
<script>
window._removeLangTpl = @json(__('dialog.remove_language'));
</script>
<script>
(function () {
    function wireConfirm(formId, dialogId) {
        const form   = document.getElementById(formId);
        const dialog = document.getElementById(dialogId);
        if (!form || !dialog) return;
        form.addEventListener('submit', e => { e.preventDefault(); dialog.showModal(); });
        dialog.addEventListener('close', () => { if (dialog.returnValue === 'confirm') form.submit(); });
    }
    wireConfirm('form-publish',         'dlg-publish');
    wireConfirm('form-unpublish',       'dlg-unpublish');
    wireConfirm('form-delete-ambient',  'dlg-delete-ambient');

    // ── Remove language dialog ────────────────────────────────────────────────
    const removeLangDialog = document.getElementById('dlg-remove-lang');
    const removeLangBody   = document.getElementById('dlg-remove-lang-body');
    const removeLangForm   = document.getElementById('dlg-remove-lang-form');
    const removeLangCancel = document.getElementById('dlg-remove-lang-cancel');

    document.querySelectorAll('.btn-remove-lang').forEach(btn => {
        btn.addEventListener('click', () => {
            removeLangBody.innerHTML = window._removeLangTpl.replace(':language', '<strong>' + btn.dataset.label + '</strong>');
            removeLangForm.action    = btn.dataset.action;
            removeLangDialog.showModal();
        });
    });
    removeLangCancel?.addEventListener('click', () => removeLangDialog.close());
    removeLangDialog?.addEventListener('click', e => { if (e.target === removeLangDialog) removeLangDialog.close(); });

    // Show/hide ambient audio card when out_of_zone select changes
    document.querySelector('select[name="out_of_zone"]')
        ?.addEventListener('change', function () {
            document.getElementById('ambient-audio-section')
                .classList.toggle('d-none', this.value !== 'global_ambient');
        });
}());
</script>

{{-- ── Map config preview (Leaflet + Nominatim geocoding) ────────────────── --}}
<script>
(function () {
    const previewEl = document.getElementById('map-config-preview');
    if (!previewEl) return;

    const initLat  = parseFloat(document.getElementById('input-center-lat').value)  || 50.8503;
    const initLng  = parseFloat(document.getElementById('input-center-lng').value)  || 4.3517;
    const initZoom = parseInt(document.getElementById('input-default-zoom').value)   || 14;
    const tileUrl  = @json(config('brand.map_tile_url'));

    const mapPreview = L.map('map-config-preview', { zoomControl: true })
                        .setView([initLat, initLng], initZoom);

    L.tileLayer(tileUrl, {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 20,
    }).addTo(mapPreview);

    // Sync hidden inputs + live readout from current map center/zoom
    function syncFromMap() {
        const c = mapPreview.getCenter();
        const z = mapPreview.getZoom();
        document.getElementById('input-center-lat').value   = c.lat.toFixed(7);
        document.getElementById('input-center-lng').value   = c.lng.toFixed(7);
        document.getElementById('input-default-zoom').value = z;
        // Keep advanced fields in sync so they reflect current state when opened
        document.getElementById('adv-lat').value  = c.lat.toFixed(6);
        document.getElementById('adv-lng').value  = c.lng.toFixed(6);
        document.getElementById('adv-zoom').value = z;
        // Live readout
        document.getElementById('map-center-readout').textContent =
            `Center: ${c.lat.toFixed(5)}, ${c.lng.toFixed(5)} | Zoom: ${z}`;
    }

    mapPreview.on('move', syncFromMap);
    mapPreview.on('zoom', syncFromMap);
    syncFromMap(); // populate readout on load

    // ── Address search (Nominatim) ────────────────────────────────────────
    async function findLocation() {
        const query = document.getElementById('address-search').value.trim();
        if (!query) return;

        const errEl = document.getElementById('geocode-error');
        const btn   = document.getElementById('btn-find-location');
        errEl.classList.add('d-none');
        btn.disabled    = true;
        btn.textContent = '…';

        try {
            const res = await fetch(
                'https://nominatim.openstreetmap.org/search?format=json&limit=1&q=' +
                encodeURIComponent(query),
                { headers: { 'Accept-Language': 'en' } }
            );
            const data = await res.json();
            if (!data.length) {
                errEl.textContent = 'No results found for "' + query + '".';
                errEl.classList.remove('d-none');
            } else {
                mapPreview.setView([parseFloat(data[0].lat), parseFloat(data[0].lon)], 14);
            }
        } catch {
            errEl.textContent = 'Geocoding failed — check your internet connection.';
            errEl.classList.remove('d-none');
        } finally {
            btn.disabled    = false;
            btn.textContent = '{{ __("btn.find_location") }}';
        }
    }

    document.getElementById('btn-find-location').addEventListener('click', findLocation);
    document.getElementById('address-search').addEventListener('keydown', e => {
        if (e.key === 'Enter') { e.preventDefault(); findLocation(); }
    });

    // ── Advanced: apply manual coordinates ───────────────────────────────
    document.getElementById('btn-apply-coords').addEventListener('click', () => {
        const lat  = parseFloat(document.getElementById('adv-lat').value);
        const lng  = parseFloat(document.getElementById('adv-lng').value);
        const zoom = parseInt(document.getElementById('adv-zoom').value);
        if (!isNaN(lat) && !isNaN(lng)) {
            mapPreview.setView([lat, lng], isNaN(zoom) ? 14 : Math.min(Math.max(zoom, 1), 20));
        }
    });

    // ── Invalidate map size after Bootstrap card renders fully ───────────
    // (needed if the card was hidden during initial paint)
    setTimeout(() => mapPreview.invalidateSize(), 250);
}());
</script>
@endpush
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Not Found</title>

        <style>
            /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}code{font-family:monospace,monospace;font-size:1em}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}code{font-family:Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-gray-400{--border-opacity:1;border-color:#cbd5e0;border-color:rgba(203,213,224,var(--border-opacity))}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-xl{max-width:36rem}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.uppercase{text-transform:uppercase}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tracking-wider{letter-spacing:.05em}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@-webkit-keyframes ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}@keyframes ping{0%{transform:scale(1);opacity:1}75%,to{transform:scale(2);opacity:0}}@-webkit-keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@-webkit-keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(0);-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-300 { --text-opacity: 1; color: #e2e8f0; color: rgba(226,232,240,var(--text-opacity)) }}
        </style>

        <style>
            body {
                font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            }
        </style>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center sm:pt-0" role="main">
            <div class="max-w-xl mx-auto sm:px-6 lg:px-8">
                <div class="flex items-center pt-8 sm:justify-start sm:pt-0">
                    <h1 class="px-4 text-lg dark:text-gray-300 text-gray-700 border-r border-gray-400 tracking-wider">
                        404                    </h1>

                    <div class="ml-4 text-lg dark:text-gray-300 text-gray-700 uppercase tracking-wider">
                        Not Found                    </div>
                </div>
            </div>
        </div>
    </body>
</html>