@php
    $vehicle = app(\App\Support\VehicleContext::class)->current();

    $title = ($vehicle?->call_sign ?? 'RTW') . ' – Schaden melden';
    $pageTitle = 'Schaden melden';
    $pageSubtitle =
        'Schäden melden und Status verfolgen. Kritische Schäden können den RTW auf „Nicht einsatzbereit“ setzen.';
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="grid grid-cols-12 gap-6">
        <section class="col-span-12 lg:col-span-8 space-y-6">
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <h2 class="text-lg font-semibold">Neuer Schaden</h2>

                <form method="POST" action="{{ route('damages.store') }}" class="mt-4 space-y-4">
                    @csrf

                    <div>
                        <label class="text-sm font-semibold">Schadenstyp</label>
                        <select name="damage_type"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand"
                            required>
                            @foreach (\App\Models\Damage::TYPES as $t)
                                <option value="{{ $t }}" {{ old('damage_type') === $t ? 'selected' : '' }}>
                                    {{ $t }}</option>
                            @endforeach
                        </select>
                        @error('damage_type')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="text-sm font-semibold">Titel</label>
                        <input name="title" type="text" maxlength="190" required value="{{ old('title') }}"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand"
                            placeholder="z. B. Defibrillator – Fehlermeldung">
                        @error('title')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="text-sm font-semibold">Beschreibung</label>
                        <textarea name="description" rows="4" maxlength="5000"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white text-sm focus:border-brand focus:ring-brand"
                            placeholder="Was ist passiert?">{{ old('description') }}</textarea>
                        @error('description')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <div>
                            <label class="text-sm font-semibold">Status</label>
                            <select name="status"
                                class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand"
                                required>
                                <option value="{{ \App\Models\Damage::STATUS_OPEN }}"
                                    {{ (string) old('status', \App\Models\Damage::STATUS_OPEN) === (string) \App\Models\Damage::STATUS_OPEN ? 'selected' : '' }}>
                                    Offen</option>
                                <option value="{{ \App\Models\Damage::STATUS_IN_PROGRESS }}"
                                    {{ (string) old('status') === (string) \App\Models\Damage::STATUS_IN_PROGRESS ? 'selected' : '' }}>
                                    In Bearbeitung</option>
                                <option value="{{ \App\Models\Damage::STATUS_RESOLVED }}"
                                    {{ (string) old('status') === (string) \App\Models\Damage::STATUS_RESOLVED ? 'selected' : '' }}>
                                    Erledigt</option>
                            </select>
                            @error('status')
                                <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                            @enderror
                        </div>

                        <div>
                            <label class="text-sm font-semibold">Dringlichkeit</label>
                            <select name="urgency"
                                class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand"
                                required>
                                <option value="{{ \App\Models\Damage::URGENCY_CRITICAL }}"
                                    {{ (string) old('urgency') === (string) \App\Models\Damage::URGENCY_CRITICAL ? 'selected' : '' }}>
                                    Kritisch</option>
                                <option value="{{ \App\Models\Damage::URGENCY_MEDIUM }}"
                                    {{ (string) old('urgency', \App\Models\Damage::URGENCY_MEDIUM) === (string) \App\Models\Damage::URGENCY_MEDIUM ? 'selected' : '' }}>
                                    Mittel</option>
                                <option value="{{ \App\Models\Damage::URGENCY_LOW }}"
                                    {{ (string) old('urgency') === (string) \App\Models\Damage::URGENCY_LOW ? 'selected' : '' }}>
                                    Gering</option>
                            </select>
                            @error('urgency')
                                <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div>
                        <label class="text-sm font-semibold">Ereigniszeitpunkt (optional)</label>
                        <input name="occurred_at" type="datetime-local" value="{{ old('occurred_at') }}"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                        @error('occurred_at')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <label class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 p-3">
                        <input name="is_operational" value="1" type="checkbox"
                            class="rounded border-gray-300 text-brand focus:ring-brand"
                            {{ old('is_operational', true) ? 'checked' : '' }}>
                        <span class="text-sm font-semibold">Einsatzrelevant</span>
                        <span class="text-xs text-gray-500">(beeinflusst RTW-Status)</span>
                    </label>
                    @error('is_operational')
                        <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                    @enderror

                    <div class="flex items-center justify-between gap-3 pt-2">
                        <a href="{{ route('damages.index') }}"
                            class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                            Abbrechen
                        </a>

                        <button
                            class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                            Schaden speichern
                        </button>
                    </div>

                    <p class="text-xs text-gray-500">Uploads (Fotos/Dateien) erfolgen nach dem Speichern in der
                        Detailansicht.</p>
                </form>
            </div>
        </section>

        <aside class="col-span-12 lg:col-span-4">
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <h3 class="text-lg font-semibold">Hinweis</h3>
                <div class="mt-3 text-sm text-gray-600">
                    Kritisch + Einsatzrelevant kann den RTW-Status automatisch auf „Nicht einsatzbereit“ setzen (Regel
                    folgt).
                </div>
            </div>
        </aside>
    </div>
</x-ux-layout>