@php
    $inputClass = 'w-full rounded-xl border border-slate-300 px-3.5 py-2.5 text-[15px] shadow-sm transition focus:border-blue-500 focus:ring-2 focus:ring-blue-100 focus:outline-none';
    $fieldClass = 'space-y-1.5';
    $labelClass = 'block text-sm font-semibold text-slate-900';
@endphp

<div x-data="addFlight({
        isKiosk: @js($isKiosk),
        aeroLat: @js($aeroLatitude),
        aeroLng: @js($aeroLongitude),
        radiusKm: @js($aeroRadiusKm),
        home: @js($homeCode),
        values: {
            registration: @js($registration ?? ''),
            aircraft_type: @js($aircraft_type ?? ''),
            movement_type: @js($movement_type ?? ''),
            pilot_name: @js($pilot_name ?? ''),
            origin: @js($origin ?? ''),
            destination: @js($destination ?? ''),
            departure_time: @js($departure_time ?? ''),
            persons_on_board: @js($persons_on_board ?? ''),
            landing_time: @js($landing_time ?? ''),
            landings_count: @js($landings_count ?? ''),
            remarks: @js($remarks ?? ''),
        },
    })" x-init="init()">

    <div class="mb-5 flex items-center justify-between">
        <h1 class="text-3xl font-bold tracking-tight text-slate-900">{{ $editing ? __('log.add_flight.heading_edit') : __('log.add_flight.heading_create') }}</h1>
        <a href="{{ route('log.index') }}" class="text-sm font-medium text-slate-500 hover:text-slate-800">← {{ __('log.common.back') }}</a>
    </div>

    @if ($editing)
        <div class="mb-5 rounded-xl bg-amber-50 px-4 py-3 text-sm font-medium text-amber-800 ring-1 ring-amber-200">
            ✏️ {{ __('log.add_flight.correction_notice') }}
        </div>
    @endif

    {{-- Geolocation status --}}
    @if ($isKiosk)
        <div class="mb-5 rounded-xl bg-sky-50 px-4 py-3 text-sm font-medium text-sky-800 ring-1 ring-sky-200">
            🖥️ {{ __('log.add_flight.kiosk_notice') }}
        </div>
    @else
        <div class="mb-5 rounded-xl px-4 py-3 text-sm font-medium ring-1"
            :class="{
                'bg-amber-50 text-amber-800 ring-amber-200': status === 'locating',
                'bg-emerald-50 text-emerald-800 ring-emerald-200': status === 'ready',
                'bg-rose-50 text-rose-800 ring-rose-200': status === 'denied' || status === 'too_far',
            }">
            <span x-show="status === 'locating'">📍 {{ __('log.add_flight.geo.locating') }}</span>
            <span x-show="status === 'ready'">✅ {{ __('log.add_flight.geo.ready_prefix') }}<span x-text="distanceLabel()"></span>{{ __('log.add_flight.geo.ready_suffix') }}</span>
            <span x-show="status === 'too_far'">⚠️ {{ __('log.add_flight.geo.too_far_prefix') }}<span x-text="distanceLabel()"></span>{{ __('log.add_flight.geo.too_far_middle') }}<span x-text="radiusLabel()"></span>{{ __('log.add_flight.geo.too_far_suffix') }} <button type="button" class="underline" @click="locate()">{{ __('log.add_flight.geo.retry') }}</button></span>
            <span x-show="status === 'denied'">⚠️ {{ __('log.add_flight.geo.denied_prefix') }}<button type="button" class="underline" @click="locate()">{{ __('log.add_flight.geo.try_again') }}</button>{{ __('log.add_flight.geo.denied_suffix') }}</span>
        </div>

    @endif

    <form wire:submit="save">
        {{-- Honeypot: hidden from humans, tempting for bots. Leave empty. --}}
        <div aria-hidden="true" style="position:absolute; left:-9999px; height:0; width:0; overflow:hidden;">
            <label>{{ __('log.add_flight.website') }}</label>
            <input type="text" tabindex="-1" autocomplete="off" wire:model="website">
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_300px]">

            {{-- LEFT: form --}}
            <div class="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
                <div class="grid grid-cols-1 gap-5 p-5 lg:grid-cols-2 lg:gap-x-6 lg:gap-y-5">

                    {{-- Registration --}}
                    <div class="{{ $fieldClass }}">
                        <label class="{{ $labelClass }}">{{ __('log.add_flight.call_sign') }}<span class="text-rose-600">*</span></label>
                        <input type="text" autocapitalize="characters" placeholder="OO-XXX, F-XXXX, ..."
                            :value="f.registration" @input="upd('registration', $event.target.value)"
                            class="{{ $inputClass }} font-mono text-lg font-semibold uppercase tracking-wide">
                        @error('registration') <p class="text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Aircraft type --}}
                    <div class="{{ $fieldClass }}">
                        <label class="{{ $labelClass }}">{{ __('log.add_flight.aircraft_type') }} <span class="text-rose-600">*</span></label>
                        <input type="text" placeholder="{{ __('log.add_flight.aircraft_type_placeholder') }}"
                            :value="f.aircraft_type" @input="upd('aircraft_type', $event.target.value)"
                            class="{{ $inputClass }}">
                        @error('aircraft_type') <p class="text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Movement type (segmented) --}}
                    <div class="{{ $fieldClass }} lg:col-span-2">
                        <label class="{{ $labelClass }}">{{ __('log.add_flight.movement_type') }} <span class="text-rose-600">*</span></label>
                        <div class="grid grid-cols-2 gap-2 lg:grid-cols-4">
                            @foreach (['Departure' => 'departure', 'Arrival' => 'arrival', 'Local' => 'local', 'Paradrop' => 'paradrop'] as $option => $key)
                                <button type="button" @click="selectMovement(@js($option))"
                                    class="rounded-xl px-4 py-3 text-sm font-bold ring-1 transition"
                                    :class="isMovement(@js($option)) ? 'bg-blue-600 text-white ring-blue-600 shadow-sm' : 'bg-white text-slate-700 ring-slate-300 hover:bg-slate-50'">{{ __('log.movement_types.'.$key) }}</button>
                            @endforeach
                        </div>
                        <button type="button" @click="useOtherMovement()"
                            class="w-full rounded-xl border-2 border-dashed px-4 py-3 text-sm font-bold transition"
                            :class="movementOther ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-slate-300 text-slate-600 hover:bg-slate-50'">{{ __('log.add_flight.movement_other') }}</button>
                        <input x-show="movementOther" x-cloak x-ref="movementOther" type="text" placeholder="{{ __('log.add_flight.movement_other_placeholder') }}"
                            :value="f.movement_type" @input="upd('movement_type', $event.target.value)"
                            class="{{ $inputClass }}">
                        @error('movement_type') <p class="text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Pilot in command --}}
                    <div class="{{ $fieldClass }}">
                        <label class="{{ $labelClass }}">{{ __('log.add_flight.pilot_in_command') }} <span class="text-rose-600">*</span></label>
                        <input type="text" placeholder="{{ __('log.add_flight.pilot_placeholder') }}"
                            :value="f.pilot_name" @input="upd('pilot_name', $event.target.value)"
                            class="{{ $inputClass }}">
                        @error('pilot_name') <p class="text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Departure time --}}
                    <div class="{{ $fieldClass }}">
                        <label class="{{ $labelClass }}">{{ __('log.add_flight.departure_time') }} <span class="text-rose-600">*</span></label>
                        <div class="flex items-center gap-2">
                            <x-time-input get="f.departure_time" set="upd('departure_time', $el.value)"
                                class="{{ $inputClass }}" />
                            <button type="button" @click="setNow()"
                                class="shrink-0 rounded-xl bg-blue-50 px-4 py-2.5 text-sm font-bold text-blue-700 hover:bg-blue-100">{{ __('log.common.now') }}</button>
                        </div>
                        <p class="text-xs text-slate-400">{{ __('log.add_flight.local_time_24h') }}</p>
                        @error('departure_time') <p class="text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Route --}}
                    <div class="{{ $fieldClass }}">
                        <label class="{{ $labelClass }}">{{ __('log.common.route') }} <span class="text-rose-600">*</span></label>
                        <div class="flex items-center gap-2">
                            <input type="text" placeholder="{{ __('log.add_flight.from_placeholder') }}" autocapitalize="characters"
                                :value="f.origin" @input="upd('origin', $event.target.value)"
                                class="{{ $inputClass }} uppercase">
                            <span class="shrink-0 text-slate-400">→</span>
                            <input type="text" placeholder="{{ __('log.add_flight.to_placeholder') }}" autocapitalize="characters"
                                :value="f.destination" @input="upd('destination', $event.target.value)"
                                class="{{ $inputClass }} uppercase">
                        </div>
                        @error('origin') <p class="text-sm text-rose-600">{{ $message }}</p> @enderror
                        @error('destination') <p class="text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Persons on board (stepper) --}}
                    <div class="{{ $fieldClass }} lg:col-span-2">
                        <label class="{{ $labelClass }}">{{ __('log.add_flight.persons_on_board') }} <span class="text-rose-600">*</span></label>
                        <div class="flex gap-2">
                            @foreach ([1, 2, 3, 4] as $n)
                                <button type="button" @click="upd('persons_on_board', {{ $n }}); personsOther = false"
                                    class="h-12 flex-1 rounded-xl text-base font-bold ring-1 transition"
                                    :class="isPersons({{ $n }}) ? 'bg-slate-900 text-white ring-slate-900 shadow-sm' : 'bg-white text-slate-700 ring-slate-300 hover:bg-slate-50'">{{ $n }}</button>
                            @endforeach
                            <button type="button" @click="useOtherPersons()"
                                class="h-12 flex-1 rounded-xl text-sm font-bold ring-1 transition"
                                :class="personsOther ? 'bg-slate-900 text-white ring-slate-900 shadow-sm' : 'bg-white text-slate-700 ring-slate-300 hover:bg-slate-50'">{{ __('log.add_flight.persons_other') }}</button>
                        </div>
                        <input x-show="personsOther" x-cloak x-ref="personsOther" type="number" min="1" max="999" placeholder="{{ __('log.add_flight.persons_other_placeholder') }}"
                            :value="f.persons_on_board" @input="upd('persons_on_board', $event.target.value)"
                            class="{{ $inputClass }}">
                        @error('persons_on_board') <p class="text-sm text-rose-600">{{ $message }}</p> @enderror
                    </div>
                </div>

                {{-- Optional after landing --}}
                <div class="m-4 rounded-xl bg-slate-50 ring-1 ring-slate-200">
                    <div class="border-b border-slate-200 px-4 py-2 text-xs font-bold uppercase tracking-wider text-slate-500">
                        {{ __('log.add_flight.optional_after_landing') }}
                    </div>
                    <div class="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2">
                        <div>
                            <label class="mb-1 block text-sm font-semibold text-slate-900">{{ __('log.common.landing_time') }}</label>
                            <div class="flex items-center gap-2">
                                <x-time-input get="f.landing_time" set="upd('landing_time', $el.value)"
                                    class="{{ $inputClass }} bg-white" />
                                <button type="button" @click="upd('landing_time', nowTime())"
                                    class="shrink-0 rounded-xl bg-blue-50 px-4 py-2.5 text-sm font-bold text-blue-700 hover:bg-blue-100">{{ __('log.common.now') }}</button>
                            </div>
                            <p x-show="landingBeforeDeparture()" x-cloak class="mt-1 text-sm text-amber-700">{{ __('log.messages.landing_before_departure') }}</p>
                            @error('landing_time') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="mb-1 block text-sm font-semibold text-slate-900">{{ __('log.add_flight.nb_of_landings') }}</label>
                            <input type="number" min="0" step="1" :value="f.landings_count" @input="upd('landings_count', $event.target.value)"
                                class="{{ $inputClass }} bg-white">
                            @error('landings_count') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-2">
                            <label class="mb-1 block text-sm font-semibold text-slate-900">{{ __('log.common.remarks') }}</label>
                            <textarea rows="2" placeholder="{{ __('log.add_flight.remarks_placeholder') }}"
                                :value="f.remarks" @input="upd('remarks', $event.target.value)"
                                class="{{ $inputClass }} bg-white"></textarea>
                        </div>
                    </div>
                </div>
            </div>

            {{-- RIGHT: review --}}
            <aside class="h-max rounded-2xl bg-slate-900 p-5 text-white lg:sticky lg:top-6">
                <div class="text-xs font-bold uppercase tracking-widest text-slate-400">{{ __('log.add_flight.review.title') }}</div>

                <dl class="mt-4 space-y-3 text-sm">
                    <div>
                        <dt class="text-xs uppercase tracking-wide text-slate-400">{{ __('log.add_flight.review.aircraft') }}</dt>
                        <dd class="font-semibold" x-text="[f.registration, f.aircraft_type].filter(Boolean).join(' · ') || '—'"></dd>
                    </div>
                    <div>
                        <dt class="text-xs uppercase tracking-wide text-slate-400">{{ __('log.add_flight.review.movement') }}</dt>
                        <dd class="font-semibold" x-text="f.movement_type || '—'"></dd>
                    </div>
                    <div>
                        <dt class="text-xs uppercase tracking-wide text-slate-400">{{ __('log.add_flight.review.pilot') }}</dt>
                        <dd class="font-semibold" x-text="f.pilot_name || '—'"></dd>
                    </div>
                    <div>
                        <dt class="text-xs uppercase tracking-wide text-slate-400">{{ __('log.add_flight.review.route') }}</dt>
                        <dd class="font-semibold" x-text="(f.origin || '—') + ' → ' + (f.destination || '—')"></dd>
                    </div>
                    <div class="flex gap-6">
                        <div>
                            <dt class="text-xs uppercase tracking-wide text-slate-400">{{ __('log.add_flight.review.departure') }}</dt>
                            <dd class="font-semibold" x-text="f.departure_time || '—'"></dd>
                        </div>
                        <div>
                            <dt class="text-xs uppercase tracking-wide text-slate-400">{{ __('log.add_flight.review.on_board') }}</dt>
                            <dd class="font-semibold" x-text="f.persons_on_board || '—'"></dd>
                        </div>
                    </div>
                    <div x-show="f.landing_time">
                        <dt class="text-xs uppercase tracking-wide text-slate-400">{{ __('log.add_flight.review.landing') }}</dt>
                        <dd class="font-semibold" x-text="(f.landing_time || '') + (f.landings_count ? '  ·  ' + f.landings_count + ' ' + @js(__('log.add_flight.review.ldg_suffix')) : '')"></dd>
                    </div>
                </dl>

                <div class="mt-4 border-t border-white/10 pt-3 text-xs">
                    <p>
                        <span x-show="allRequiredFilled()" class="font-semibold text-emerald-400">✓ {{ __('log.add_flight.review.all_filled') }}</span>
                        <span x-show="!allRequiredFilled()" class="text-slate-400"><span x-text="requiredLeft()"></span> {{ __('log.add_flight.review.fields_left', ['total' => 7]) }}</span>
                    </p>
                    @if (! $isKiosk)
                        <p class="mt-1 text-slate-400">
                            <span x-show="status === 'locating'">{{ __('log.add_flight.review.checking_position') }}</span>
                            <span x-show="status === 'ready'">{{ __('log.add_flight.review.position_verified') }}</span>
                            <span x-show="status === 'too_far'">{{ __('log.add_flight.review.too_far_to_save') }}</span>
                            <span x-show="status === 'denied'">{{ __('log.add_flight.review.position_required') }}</span>
                        </p>
                    @endif
                </div>

                <button type="submit" :disabled="!canSubmit()"
                    class="mt-4 w-full rounded-lg bg-white px-5 py-2.5 text-base font-bold text-slate-900 shadow-sm transition hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-40">
                    <span wire:loading.remove wire:target="save">{{ $editing ? __('log.add_flight.save_changes') : __('log.add_flight.save') }}</span>
                    <span wire:loading wire:target="save">{{ __('log.common.saving') }}</span>
                </button>
                <a href="{{ route('log.index') }}" class="mt-2 block text-center text-sm text-slate-400 hover:text-white">{{ __('log.common.cancel') }}</a>
            </aside>
        </div>
    </form>

    <script>
        function addFlight(cfg) {
            return {
                isKiosk: cfg.isKiosk,
                aeroLat: cfg.aeroLat,
                aeroLng: cfg.aeroLng,
                radiusKm: cfg.radiusKm,
                home: cfg.home || 'EBCF',
                status: cfg.isKiosk ? 'ready' : 'locating',
                distanceKm: null,
                movementOther: false,
                personsOther: false,
                f: {
                    registration: cfg.values.registration || '',
                    aircraft_type: cfg.values.aircraft_type || '',
                    movement_type: cfg.values.movement_type || '',
                    pilot_name: cfg.values.pilot_name || '',
                    origin: cfg.values.origin || '',
                    destination: cfg.values.destination || '',
                    departure_time: cfg.values.departure_time || '',
                    persons_on_board: cfg.values.persons_on_board ?? '',
                    landing_time: cfg.values.landing_time || '',
                    landings_count: cfg.values.landings_count ?? '',
                    remarks: cfg.values.remarks || '',
                },
                init() {
                    // When editing, reflect a custom movement/persons value in the "Other" fields.
                    const presets = ['Departure', 'Arrival', 'Local', 'Paradrop'];
                    if (this.f.movement_type && ! presets.includes(this.f.movement_type)) {
                        this.movementOther = true;
                    }
                    if (this.f.persons_on_board !== '' && ! [1, 2, 3, 4].includes(Number(this.f.persons_on_board))) {
                        this.personsOther = true;
                    }
                    if (! this.isKiosk) { this.locate(); }
                },
                upd(key, value) {
                    this.f[key] = value;
                    this.$wire.set(key, value, false);
                },
                isMovement(v) {
                    return ! this.movementOther && this.f.movement_type === v;
                },
                selectMovement(v) {
                    this.movementOther = false;
                    this.upd('movement_type', v);
                    // Auto-fill the route from the home aerodrome — but never overwrite
                    // a value the pilot already typed.
                    const fillIfEmpty = (key) => {
                        if (String(this.f[key] ?? '').trim() === '') { this.upd(key, this.home); }
                    };
                    if (v === 'Local' || v === 'Paradrop') {
                        fillIfEmpty('origin');
                        fillIfEmpty('destination');
                    } else if (v === 'Departure') {
                        fillIfEmpty('origin');
                    } else if (v === 'Arrival') {
                        fillIfEmpty('destination');
                    }
                },
                useOtherMovement() {
                    this.movementOther = true;
                    this.upd('movement_type', '');
                    this.$nextTick(() => this.$refs.movementOther?.focus());
                },
                isPersons(n) {
                    return ! this.personsOther && String(this.f.persons_on_board) === String(n);
                },
                useOtherPersons() {
                    this.personsOther = true;
                    this.$nextTick(() => this.$refs.personsOther?.focus());
                },
                nowTime() {
                    return new Date().toTimeString().slice(0, 5);
                },
                setNow() {
                    this.upd('departure_time', this.nowTime());
                },
                /** Client-side hint only — the rule is enforced again on save. */
                landingBeforeDeparture() {
                    const dep = this.f.departure_time;
                    const ldg = this.f.landing_time;

                    return /^\d{2}:\d{2}$/.test(dep) && /^\d{2}:\d{2}$/.test(ldg) && ldg < dep;
                },
                filledRequired() {
                    const has = (v) => String(v ?? '').trim() !== '';
                    let n = 0;
                    if (has(this.f.registration)) { n++; }
                    if (has(this.f.aircraft_type)) { n++; }
                    if (has(this.f.movement_type)) { n++; }
                    if (has(this.f.pilot_name)) { n++; }
                    if (has(this.f.origin) && has(this.f.destination)) { n++; }
                    if (has(this.f.departure_time)) { n++; }
                    if (has(this.f.persons_on_board)) { n++; }
                    return n;
                },
                requiredLeft() {
                    return Math.max(0, 7 - this.filledRequired());
                },
                allRequiredFilled() {
                    return this.requiredLeft() === 0;
                },
                locate() {
                    this.status = 'locating';
                    this.distanceKm = null;
                    if (! navigator.geolocation) { this.status = 'denied'; return; }
                    navigator.geolocation.getCurrentPosition(
                        (pos) => {
                            this.$wire.set('latitude', pos.coords.latitude, false);
                            this.$wire.set('longitude', pos.coords.longitude, false);
                            this.distanceKm = this.haversine(pos.coords.latitude, pos.coords.longitude);
                            this.status = this.distanceKm <= this.radiusKm ? 'ready' : 'too_far';
                        },
                        () => { this.status = 'denied'; },
                        { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 }
                    );
                },
                haversine(lat, lng) {
                    const R = 6371;
                    const toRad = (d) => d * Math.PI / 180;
                    const dLat = toRad(lat - this.aeroLat);
                    const dLng = toRad(lng - this.aeroLng);
                    const a = Math.sin(dLat / 2) ** 2 + Math.cos(toRad(this.aeroLat)) * Math.cos(toRad(lat)) * Math.sin(dLng / 2) ** 2;
                    return R * 2 * Math.asin(Math.sqrt(a));
                },
                distanceLabel() {
                    if (this.distanceKm === null) { return ''; }
                    return this.distanceKm < 1 ? Math.round(this.distanceKm * 1000) + ' m' : this.distanceKm.toFixed(1) + ' km';
                },
                radiusLabel() {
                    return (Number.isInteger(this.radiusKm) ? this.radiusKm : this.radiusKm.toFixed(1)) + ' km';
                },
                canSubmit() {
                    return this.isKiosk || this.status === 'ready';
                },
            };
        }
    </script>
</div>