@php
    $title = 'RTW 3 – Fahrzeugdetails';
    $pageTitle = 'Fahrzeugdetails';
    $pageSubtitle = 'RTW 3 • MA-RTW 903 • Sprinter • Bj. 2021';
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="grid grid-cols-12 gap-6">
        <!-- Main -->
        <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 items-start justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-semibold">Einsatzstatus</h2>
                        <p class="mt-1 text-sm text-gray-600">
                            Status wird durch offene Schäden und Pflichtfristen beeinflusst.
                        </p>
                    </div>

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

                <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-3">
                    <button
                        class="rounded-xl border border-brand/30 bg-brand/10 px-4 py-3 text-left ring-1 ring-brand/15">
                        <div class="flex items-center gap-2">
                            <span class="h-2.5 w-2.5 rounded-full bg-brand"></span>
                            <div class="font-semibold text-brand">Einsatzbereit</div>
                        </div>
                        <div class="mt-1 text-sm text-gray-600">Keine offenen Punkte</div>
                    </button>

                    <button class="rounded-xl border border-gray-200 bg-white px-4 py-3 text-left hover:bg-gray-50">
                        <div class="flex items-center gap-2">
                            <span class="h-2.5 w-2.5 rounded-full bg-yellow-400"></span>
                            <div class="font-semibold">Eingeschränkt</div>
                        </div>
                        <div class="mt-1 text-sm text-gray-600">Nicht-kritische Einschränkung</div>
                    </button>

                    <button class="rounded-xl border border-gray-200 bg-white px-4 py-3 text-left hover:bg-gray-50">
                        <div class="flex items-center gap-2">
                            <span class="h-2.5 w-2.5 rounded-full bg-red-500"></span>
                            <div class="font-semibold">Nicht einsatzbereit</div>
                        </div>
                        <div class="mt-1 text-sm text-gray-600">Kritischer Schaden/Frist</div>
                    </button>
                </div>

                <div class="mt-4 rounded-2xl border border-gray-200 bg-gray-50 p-4">
                    <div class="text-sm font-semibold">Statuslogik (UX)</div>
                    <ul class="mt-2 list-disc pl-5 text-sm text-gray-700 space-y-1">
                        <li><b>Rot</b>: kritischer Schaden ODER Pflichtfrist überfällig.</li>
                        <li><b>Gelb</b>: nicht-kritischer Schaden ODER Frist „bald fällig“ (z. B. 30 Tage).</li>
                        <li><b>Grün</b>: keine offenen Punkte.</li>
                    </ul>
                </div>
            </div>

            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold">Stammdaten</h2>
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                        Bearbeiten
                    </button>
                </div>

                <dl class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="rounded-xl border border-gray-200 p-4">
                        <dt class="text-xs text-gray-500">Funkrufname</dt>
                        <dd class="mt-1 font-semibold">RTW 3</dd>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4">
                        <dt class="text-xs text-gray-500">Kennzeichen</dt>
                        <dd class="mt-1 font-semibold">MA-RTW 903</dd>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4">
                        <dt class="text-xs text-gray-500">Fahrzeug</dt>
                        <dd class="mt-1 font-semibold">Mercedes Sprinter</dd>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4">
                        <dt class="text-xs text-gray-500">Baujahr</dt>
                        <dd class="mt-1 font-semibold">2021</dd>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4 md:col-span-2">
                        <dt class="text-xs text-gray-500">Notizen</dt>
                        <dd class="mt-1 text-sm text-gray-700">
                            Standard-RTW Wache 1. Medizinische Geräte werden separat dokumentiert.
                        </dd>
                    </div>
                </dl>
            </div>
        </section>

        <!-- Side -->
        <aside class="col-span-12 lg:col-span-4 space-y-6">
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <h2 class="text-lg font-semibold">Einsatzbereitschaft</h2>

                <div class="mt-4 space-y-3">
                    <div class="rounded-xl border border-gray-200 p-4">
                        <div class="text-xs text-gray-500">Letzter Check</div>
                        <div class="mt-1 font-semibold">12.05.2024 • 16:45</div>
                        <div class="text-sm text-gray-600">Markus Barth</div>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4">
                        <div class="text-xs text-gray-500">Nächste Pflichtfrist</div>
                        <div class="mt-1 font-semibold">HU/AU • 02.06.2024</div>
                        <div class="mt-1 text-sm text-gray-600">In 19 Tagen</div>
                    </div>

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

            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex items-center justify-between">
                    <h2 class="text-lg font-semibold">Aktive Probleme</h2>
                    <span
                        class="rounded-full bg-red-50 px-2.5 py-1 text-xs font-semibold text-red-700 ring-1 ring-red-200">1
                        offen</span>
                </div>

                <div class="mt-4 rounded-xl border border-gray-200 p-4">
                    <div class="text-sm font-semibold">Defibrillator – Fehlermeldung</div>
                    <div class="mt-1 text-sm text-gray-600">11.05.2024 • Status: Offen</div>
                    <div class="mt-4 flex gap-2">
                        <a href="/ux/damages"
                            class="rounded-xl bg-brand px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">
                            Bearbeiten
                        </a>
                        <button
                            class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                            Details
                        </button>
                    </div>
                </div>
            </div>
        </aside>
    </div>
</x-ux-layout>