@php
    $title = 'RTW 3 – Schäden';
    $pageTitle = 'Schäden';
    $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">
        <!-- List -->
        <section class="col-span-12 lg:col-span-8 space-y-6">
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                    <div class="inline-flex overflow-hidden rounded-xl border border-gray-200 bg-white">
                        <button class="bg-brand/10 px-4 py-2.5 text-sm font-semibold text-brand">Aktiv</button>
                        <button
                            class="px-4 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-50">Erledigt</button>
                    </div>

                    <div class="flex items-center gap-2">
                        <select
                            class="rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            <option>Status: Alle</option>
                            <option>Offen</option>
                            <option>In Bearbeitung</option>
                            <option>Erledigt</option>
                        </select>
                        <select
                            class="rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            <option>Dringlichkeit: Alle</option>
                            <option>Kritisch</option>
                            <option>Mittel</option>
                            <option>Gering</option>
                        </select>
                    </div>
                </div>

                <div class="mt-5 overflow-hidden rounded-xl border border-gray-200">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 text-gray-600">
                            <tr>
                                <th class="px-4 py-3 text-left font-semibold">Datum</th>
                                <th class="px-4 py-3 text-left font-semibold">Beschreibung</th>
                                <th class="px-4 py-3 text-left font-semibold">Status</th>
                                <th class="px-4 py-3 text-left font-semibold">Dringlichkeit</th>
                                <th class="px-4 py-3 text-right font-semibold"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <tr class="bg-white">
                                <td class="px-4 py-3">11.05.2024</td>
                                <td class="px-4 py-3">
                                    <div class="font-semibold">Defibrillator – Fehlermeldung</div>
                                    <div class="text-xs text-gray-500">Einsatzrelevant: Ja</div>
                                </td>
                                <td class="px-4 py-3">
                                    <span
                                        class="rounded-full bg-red-50 px-2.5 py-1 text-xs font-semibold text-red-700 ring-1 ring-red-200">Offen</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span
                                        class="rounded-full bg-red-50 px-2.5 py-1 text-xs font-semibold text-red-700 ring-1 ring-red-200">Kritisch</span>
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <button
                                        class="rounded-xl bg-brand px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">Bearbeiten</button>
                                </td>
                            </tr>

                            <tr class="bg-white">
                                <td class="px-4 py-3">18.04.2024</td>
                                <td class="px-4 py-3">
                                    <div class="font-semibold">Parkdelle hinten links</div>
                                    <div class="text-xs text-gray-500">Einsatzrelevant: Nein</div>
                                </td>
                                <td class="px-4 py-3">
                                    <span
                                        class="rounded-full bg-yellow-50 px-2.5 py-1 text-xs font-semibold text-yellow-800 ring-1 ring-yellow-200">In
                                        Bearbeitung</span>
                                </td>
                                <td class="px-4 py-3">
                                    <span
                                        class="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">Gering</span>
                                </td>
                                <td class="px-4 py-3 text-right">
                                    <a href="/ux/damage-detail"
                                        class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                        Details
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="mt-4 text-xs text-gray-500">
                    UX-Regel: „Kritisch“ + „Einsatzrelevant“ ⇒ Status kann automatisch auf „Nicht einsatzbereit“
                    wechseln.
                </div>
            </div>
        </section>

        <!-- Form -->
        <aside class="col-span-12 lg:col-span-4">
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <h2 class="text-lg font-semibold">Schaden melden</h2>

                <form class="mt-4 space-y-4">
                    <div>
                        <label class="text-sm font-semibold">Schadenstyp</label>
                        <select
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            <option>Medizinische Ausstattung</option>
                            <option>Technik</option>
                            <option>Karosserie</option>
                            <option>Innenraum</option>
                            <option>Hygiene</option>
                        </select>
                    </div>

                    <div>
                        <label class="text-sm font-semibold">Beschreibung</label>
                        <textarea rows="3"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white text-sm focus:border-brand focus:ring-brand"
                            placeholder="Was ist passiert?"></textarea>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="text-sm font-semibold">Status</label>
                            <select
                                class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                                <option>Offen</option>
                                <option>In Bearbeitung</option>
                                <option>Erledigt</option>
                            </select>
                        </div>
                        <div>
                            <label class="text-sm font-semibold">Dringlichkeit</label>
                            <select
                                class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                                <option>Kritisch</option>
                                <option>Mittel</option>
                                <option>Gering</option>
                            </select>
                        </div>
                    </div>

                    <label class="flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 p-3">
                        <input type="checkbox" class="rounded border-gray-300 text-brand focus:ring-brand" checked>
                        <span class="text-sm font-semibold">Einsatzrelevant</span>
                        <span class="text-xs text-gray-500">(beeinflusst RTW-Status)</span>
                    </label>

                    <a href="/ux/damage-detail"
                        class="inline-flex w-full items-center justify-center rounded-xl bg-brand px-4 py-3 text-sm font-semibold text-white hover:bg-brand-600">
                        Schaden speichern
                    </a>

                    <p class="text-xs text-gray-500">UX-only: Fotos/Dateien werden später ergänzt.</p>
                </form>
            </div>
        </aside>
    </div>
</x-ux-layout>