@php
    $v = $vehicle;

    // Fallback: falls Controller keine $statusOptions liefert
    $statusOptions = $statusOptions ?? \App\Models\Vehicle::statusOptions();

    $inputBase = 'mt-2 w-full rounded-xl border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-900 shadow-sm
                  placeholder:text-gray-400 focus:border-[#00923f] focus:ring-4 focus:ring-[#00923f]/15
                  disabled:bg-gray-50 disabled:text-gray-500';
@endphp

<div class="rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5">
    {{-- Header --}}
    <div class="mb-6 flex items-start justify-between gap-4">
        <div>
            <h2 class="text-base font-semibold text-gray-900">Fahrzeugdaten</h2>
            <p class="mt-1 text-sm text-gray-600">Basisinformationen und Status des RTW.</p>
        </div>

        @if ($v)
            <span
                class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold ring-1 {{ $v->status_badge_class }}">
                <span class="h-2 w-2 rounded-full bg-current opacity-70"></span>
                {{ $v->status_label }}
            </span>
        @endif
    </div>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
        {{-- Name --}}
        <div class="md:col-span-2">
            <label for="name" class="flex items-center justify-between text-sm font-semibold text-gray-800">
                <span>Name</span>
                <span class="text-xs font-medium text-gray-500">Pflichtfeld</span>
            </label>
            <input id="name" name="name" value="{{ old('name', $v?->name) }}"
                class="{{ $inputBase }} @error('name') border-red-300 focus:border-red-400 focus:ring-red-100 @enderror"
                placeholder="z.B. Dann 6" required autocomplete="off">
            @error('name')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        {{-- Funkrufname --}}
        <div>
            <label for="call_sign" class="text-sm font-semibold text-gray-800">Funkrufname</label>
            <input id="call_sign" name="call_sign" value="{{ old('call_sign', $v?->call_sign) }}"
                class="{{ $inputBase }} @error('call_sign') border-red-300 focus:border-red-400 focus:ring-red-100 @enderror"
                placeholder="z.B. Dann-6" autocomplete="off">
            @error('call_sign')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        {{-- Kennzeichen --}}
        <div>
            <label for="license_plate" class="text-sm font-semibold text-gray-800">Kennzeichen</label>
            <input id="license_plate" name="license_plate" value="{{ old('license_plate', $v?->license_plate) }}"
                class="{{ $inputBase }} @error('license_plate') border-red-300 focus:border-red-400 focus:ring-red-100 @enderror"
                placeholder="z.B. DL-102-RD" autocomplete="off">
            @error('license_plate')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        {{-- Status --}}
        <div class="md:col-span-2">
            <label class="text-sm font-semibold text-gray-800">Status</label>

            @php
                $statusOptions = $statusOptions ?? \App\Enums\VehicleStatus::options();
                $current = (string) old('is_active', $v?->is_active ?? \App\Enums\VehicleStatus::READY->value);
            @endphp

            <div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($statusOptions as $key => $label)
                    @php
                        $keyInt = (int) $key;
                        $checked = $current === (string) $keyInt;

                        $id = 'vehicle_status_' . $keyInt;

                        // exakt an Enum gekoppelt
                        $theme = match ($keyInt) {
                            \App\Enums\VehicleStatus::READY->value => [
                                'border' => 'border-emerald-300',
                                'ring' => 'ring-emerald-200',
                                'bg' => 'bg-emerald-50',
                                'text' => 'text-emerald-900',
                                'badge' => 'text-emerald-700 ring-emerald-200',
                                'dot' => 'bg-emerald-600',
                                'bar' => 'bg-emerald-600',
                                'desc' => 'Fahrzeug ist einsatzbereit.',
                            ],
                            \App\Enums\VehicleStatus::NOT_READY->value => [
                                'border' => 'border-red-300',
                                'ring' => 'ring-red-200',
                                'bg' => 'bg-red-50',
                                'text' => 'text-red-900',
                                'badge' => 'text-red-700 ring-red-200',
                                'dot' => 'bg-red-600',
                                'bar' => 'bg-red-600',
                                'desc' => 'Fahrzeug ist aktuell nicht einsatzbereit.',
                            ],
                            \App\Enums\VehicleStatus::SERVICE->value => [
                                'border' => 'border-orange-300',
                                'ring' => 'ring-orange-200',
                                'bg' => 'bg-orange-50',
                                'text' => 'text-orange-900',
                                'badge' => 'text-orange-700 ring-orange-200',
                                'dot' => 'bg-orange-500',
                                'bar' => 'bg-orange-500',
                                'desc' => 'Fahrzeug ist in der Werkstatt.',
                            ],
                            default => [
                                'border' => 'border-gray-300',
                                'ring' => 'ring-gray-200',
                                'bg' => 'bg-gray-50',
                                'text' => 'text-gray-900',
                                'badge' => 'text-gray-700 ring-gray-200',
                                'dot' => 'bg-gray-500',
                                'bar' => 'bg-gray-500',
                                'desc' => 'Status unbekannt.',
                            ],
                        };
                    @endphp

                    <div class="relative">
                        <input id="{{ $id }}" type="radio" name="is_active" value="{{ $keyInt }}"
                            class="peer sr-only" @checked($checked)>

                        <label for="{{ $id }}"
                            class="group relative flex cursor-pointer items-start gap-3 rounded-2xl border bg-white p-4 shadow-sm transition
                           border-gray-200 hover:bg-gray-50 hover:border-gray-300
                           peer-checked:{{ $theme['border'] }} peer-checked:{{ $theme['bg'] }}
                           peer-checked:ring-2 peer-checked:{{ $theme['ring'] }}">
                            <div
                                class="mt-0.5 flex h-9 w-9 items-center justify-center rounded-xl border bg-gray-50 shadow-sm
                                border-gray-200 peer-checked:bg-white peer-checked:{{ $theme['border'] }}">
                                <span class="relative inline-flex h-4 w-4 items-center justify-center">
                                    <span class="absolute h-4 w-4 rounded-full {{ $theme['dot'] }}"></span>
                                    <svg class="relative hidden h-4 w-4 text-white peer-checked:block"
                                        viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                        <path fill-rule="evenodd"
                                            d="M16.704 5.29a1 1 0 010 1.42l-7.25 7.25a1 1 0 01-1.42 0l-3.25-3.25a1 1 0 111.42-1.42l2.54 2.54 6.54-6.54a1 1 0 011.42 0z"
                                            clip-rule="evenodd" />
                                    </svg>
                                </span>
                            </div>

                            <div class="min-w-0 flex-1">
                                <div class="flex items-center justify-between gap-3">
                                    <p class="text-sm font-semibold text-gray-900 peer-checked:{{ $theme['text'] }}">
                                        {{ $label }}
                                    </p>

                                    <span
                                        class="hidden shrink-0 rounded-full bg-white px-2.5 py-1 text-[11px] font-semibold ring-1
                                         peer-checked:inline-flex {{ $theme['badge'] }}">
                                        Ausgewählt
                                    </span>
                                </div>

                                <p class="mt-1 text-xs text-gray-600">
                                    {{ $theme['desc'] }}
                                </p>

                                <div class="mt-3 hidden h-1 w-16 rounded-full peer-checked:block {{ $theme['bar'] }}">
                                </div>
                            </div>
                        </label>
                    </div>
                @endforeach
            </div>

            @error('is_active')
                <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>




    </div>

    {{-- Actions --}}
    <div class="mt-8 flex flex-col-reverse gap-3 sm:flex-row sm:items-center sm:justify-end">
        <a href="{{ route('vehicles.index') }}"
            class="inline-flex items-center justify-center rounded-xl px-4 py-2.5 text-sm font-semibold text-gray-700 ring-1 ring-gray-200 hover:bg-gray-50">
            Abbrechen
        </a>

        <button type="submit"
            class="inline-flex items-center justify-center rounded-xl bg-[#00923f] px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:opacity-95 focus:outline-none focus:ring-4 focus:ring-[#00923f]/20">
            {{ $submitLabel }}
        </button>
    </div>
</div>