@php
    $title = 'RTW 3 – Schaden';
    $pageTitle = 'Schaden';
    $pageSubtitle = 'RTW 3 • MA-RTW 903 • Defibrillator – Fehlermeldung';
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div x-data="{ editOpen: false, taskOpen: false, attachOpen: false }" class="grid grid-cols-12 gap-6">

        <!-- Main -->
        <section class="col-span-12 lg:col-span-8 space-y-6">

            <!-- Header Card -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <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>
                            <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>
                            <span
                                class="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">
                                Einsatzrelevant
                            </span>
                        </div>

                        <h2 class="mt-3 text-xl font-bold tracking-tight">Defibrillator – Fehlermeldung</h2>
                        <p class="mt-1 text-sm text-gray-600">
                            Gemeldet am <b>11.05.2024</b> durch <b>Lisa</b> • Bereich: Medizinische Ausstattung
                        </p>

                        <div class="mt-4 rounded-2xl border border-gray-200 bg-gray-50 p-4">
                            <div class="text-sm font-semibold">Beschreibung</div>
                            <div class="mt-2 text-sm text-gray-700">
                                Gerät zeigt Fehlercode E-21, Selbsttest schlägt fehl. Ersatzgerät im Fahrzeug vorhanden.
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <button
                            class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                            Drucken
                        </button>
                        <button
                            class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600"
                            @click="editOpen = true">
                            Bearbeiten
                        </button>
                    </div>
                </div>
            </div>

            <!-- Maßnahmen / Aufgaben -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold">Maßnahmen</h3>
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                        @click="taskOpen = true">
                        Maßnahme hinzufügen
                    </button>
                </div>

                <div class="mt-4 space-y-3">
                    <div class="rounded-xl border border-gray-200 p-4">
                        <div class="flex items-center justify-between">
                            <div class="font-semibold">Hersteller-Support kontaktieren</div>
                            <span
                                class="rounded-full bg-brand/10 px-2.5 py-1 text-xs font-semibold text-brand ring-1 ring-brand/15">Offen</span>
                        </div>
                        <div class="mt-1 text-sm text-gray-600">Verantwortlich: Markus • Termin: 13.05.2024</div>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4">
                        <div class="flex items-center justify-between">
                            <div class="font-semibold">Ersatzgerät prüfen (Funktionscheck)</div>
                            <span
                                class="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-semibold text-gray-700 ring-1 ring-gray-200">Erledigt</span>
                        </div>
                        <div class="mt-1 text-sm text-gray-600">Erledigt durch: Lisa • 11.05.2024</div>
                    </div>
                </div>

                <div class="mt-4 text-xs text-gray-500">
                    UX-only: Maßnahmen sind später echte Tasks inkl. Fälligkeit/Status.
                </div>
            </div>

            <!-- Anhänge (UX-only) -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold">Anhänge</h3>
                    <button class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                        Datei hinzufügen
                    </button>

                </div>

                <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="rounded-xl border border-gray-200 p-4">
                        <div class="font-semibold">foto_defi_display.jpg</div>
                        <div class="mt-1 text-sm text-gray-600">Hochgeladen: 11.05.2024 • Lisa</div>
                    </div>
                    <div class="rounded-xl border border-gray-200 p-4">
                        <div class="font-semibold">service_report.pdf</div>
                        <div class="mt-1 text-sm text-gray-600">Hochgeladen: 12.05.2024 • Markus</div>
                    </div>
                </div>
            </div>

            <!-- Verlauf -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold">Verlauf</h3>
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                        Kommentar hinzufügen
                    </button>
                </div>

                <div class="mt-4 space-y-3">
                    <div class="rounded-xl border border-gray-200 p-4">
                        <div class="flex items-center justify-between">
                            <div class="font-semibold">Schaden gemeldet</div>
                            <div class="text-xs text-gray-500">11.05.2024 15:10</div>
                        </div>
                        <div class="mt-1 text-sm text-gray-600">Lisa • „Fehlercode E-21…“</div>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4">
                        <div class="flex items-center justify-between">
                            <div class="font-semibold">Maßnahme erledigt</div>
                            <div class="text-xs text-gray-500">11.05.2024 16:20</div>
                        </div>
                        <div class="mt-1 text-sm text-gray-600">Lisa • Ersatzgerät geprüft</div>
                    </div>

                    <div class="rounded-xl border border-gray-200 p-4">
                        <div class="flex items-center justify-between">
                            <div class="font-semibold">Anhang hinzugefügt</div>
                            <div class="text-xs text-gray-500">12.05.2024 10:05</div>
                        </div>
                        <div class="mt-1 text-sm text-gray-600">Markus • service_report.pdf</div>
                    </div>
                </div>
            </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">
                <h3 class="text-lg font-semibold">Übersicht</h3>

                <dl class="mt-4 space-y-3">
                    <div class="rounded-xl border border-gray-200 p-4">
                        <dt class="text-xs text-gray-500">Status</dt>
                        <dd class="mt-1 font-semibold">Offen</dd>
                    </div>

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

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

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

                    <div class="rounded-2xl border border-gray-200 bg-gray-50 p-4">
                        <div class="text-sm font-semibold">Hinweis (UX)</div>
                        <div class="mt-2 text-sm text-gray-600">
                            Kritisch + Einsatzrelevant kann RTW-Status auf „Nicht einsatzbereit“ setzen.
                        </div>
                    </div>
                </dl>

                <div class="mt-4 flex gap-2">
                    <button
                        class="w-full rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                        Als erledigt
                    </button>
                    <a href="/ux/damages"
                        class="w-full rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600 text-center">
                        Zur Liste
                    </a>
                </div>
            </div>
        </aside>

        <!-- Edit Modal -->
        <div x-show="editOpen" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center"
            aria-hidden="true">
            <div class="absolute inset-0 bg-gray-900/50" @click="editOpen = false"></div>

            <div x-show="editOpen" x-transition
                class="relative w-full max-w-2xl rounded-2xl bg-white shadow-xl ring-1 ring-black/5" role="dialog"
                aria-modal="true">
                <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
                    <div>
                        <div class="text-lg font-semibold">Schaden bearbeiten</div>
                        <div class="text-sm text-gray-600">RTW 3 • Defibrillator – Fehlermeldung</div>
                    </div>

                    <button
                        class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-white hover:bg-gray-50"
                        @click="editOpen = false" aria-label="Schließen">
                        <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M6 6l12 12M18 6l-12 12" />
                        </svg>
                    </button>
                </div>

                <div class="px-6 py-5">
                    <form class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Titel</label>
                                <input type="text" value="Defibrillator – Fehlermeldung"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            </div>

                            <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 selected>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 selected>Kritisch</option>
                                    <option>Mittel</option>
                                    <option>Gering</option>
                                </select>
                            </div>

                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Bereich</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 selected>Medizinische Ausstattung</option>
                                    <option>Technik</option>
                                    <option>Karosserie</option>
                                    <option>Innenraum</option>
                                    <option>Hygiene</option>
                                </select>
                            </div>

                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Beschreibung</label>
                                <textarea rows="4"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white text-sm focus:border-brand focus:ring-brand">Gerät zeigt Fehlercode E-21, Selbsttest schlägt fehl. Ersatzgerät im Fahrzeug vorhanden.</textarea>
                            </div>

                            <div class="md:col-span-2">
                                <label
                                    class="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-gray-50 px-3 py-2.5 w-full">
                                    <input type="checkbox" class="rounded border-gray-300 text-brand focus:ring-brand"
                                        checked>
                                    <span class="text-sm font-semibold">Einsatzrelevant</span>
                                </label>
                            </div>

                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Verantwortlich</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>Admin</option>
                                    <option selected>Markus</option>
                                    <option>Lisa</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="flex items-center justify-between gap-3 border-t border-gray-200 px-6 py-4">
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                        @click="editOpen = false">
                        Abbrechen
                    </button>

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

        <!-- Maßnahme Modal -->
        <div x-show="taskOpen" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center"
            aria-hidden="true">
            <div class="absolute inset-0 bg-gray-900/50" @click="taskOpen = false"></div>

            <div x-show="taskOpen" x-transition
                class="relative w-full max-w-2xl rounded-2xl bg-white shadow-xl ring-1 ring-black/5" role="dialog"
                aria-modal="true">
                <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
                    <div>
                        <div class="text-lg font-semibold">Maßnahme hinzufügen</div>
                        <div class="text-sm text-gray-600">Schaden: Defibrillator – Fehlermeldung</div>
                    </div>

                    <button
                        class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-white hover:bg-gray-50"
                        @click="taskOpen = false" aria-label="Schließen">
                        <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M6 6l12 12M18 6l-12 12" />
                        </svg>
                    </button>
                </div>

                <div class="px-6 py-5">
                    <form class="space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Titel</label>
                                <input type="text" placeholder="z. B. Werkstatttermin vereinbaren"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            </div>

                            <div>
                                <label class="text-sm font-semibold">Verantwortlich</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>Markus</option>
                                    <option>Lisa</option>
                                    <option>Admin</option>
                                </select>
                            </div>

                            <div>
                                <label class="text-sm font-semibold">Fällig am (optional)</label>
                                <input type="date"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            </div>

                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Notiz</label>
                                <textarea rows="3" placeholder="Optional: Details zur Maßnahme…"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white text-sm focus:border-brand focus:ring-brand"></textarea>
                            </div>

                            <div class="md:col-span-2">
                                <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>Erledigt</option>
                                </select>
                                <div class="mt-2 text-xs text-gray-500">UX-only: echte Task-Logik folgt später.</div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="flex items-center justify-between gap-3 border-t border-gray-200 px-6 py-4">
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                        @click="taskOpen = false">
                        Abbrechen
                    </button>

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

        <!-- Anhang Modal -->
        <div x-show="attachOpen" x-transition.opacity class="fixed inset-0 z-50 flex items-center justify-center"
            aria-hidden="true">
            <div class="absolute inset-0 bg-gray-900/50" @click="attachOpen = false"></div>

            <div x-show="attachOpen" x-transition
                class="relative w-full max-w-2xl rounded-2xl bg-white shadow-xl ring-1 ring-black/5" role="dialog"
                aria-modal="true">
                <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
                    <div>
                        <div class="text-lg font-semibold">Anhang hinzufügen</div>
                        <div class="text-sm text-gray-600">Schaden: Defibrillator – Fehlermeldung</div>
                    </div>

                    <button
                        class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-gray-200 bg-white hover:bg-gray-50"
                        @click="attachOpen = false" aria-label="Schließen">
                        <svg class="h-5 w-5 text-gray-700" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                            stroke-width="2">
                            <path d="M6 6l12 12M18 6l-12 12" />
                        </svg>
                    </button>
                </div>

                <div class="px-6 py-5">
                    <form class="space-y-4">
                        <div class="rounded-2xl border border-dashed border-gray-300 bg-gray-50 p-5">
                            <div class="flex items-center justify-between gap-3">
                                <div class="text-sm text-gray-600">
                                    PDF/JPG/PNG • max. 25 MB
                                    <div class="text-xs text-gray-500 mt-1">UX-only: Drag & Drop später funktional.
                                    </div>
                                </div>
                                <button type="button"
                                    class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                    Datei wählen
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Titel (optional)</label>
                                <input type="text" placeholder="z. B. Foto Display / Werkstattbericht"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            </div>

                            <div>
                                <label class="text-sm font-semibold">Typ</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>Foto</option>
                                    <option>Dokument</option>
                                    <option>Sonstiges</option>
                                </select>
                            </div>

                            <div>
                                <label class="text-sm font-semibold">Sichtbarkeit</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>Alle mit Zugriff</option>
                                    <option>Nur Admin/Leitung</option>
                                </select>
                                <div class="mt-2 text-xs text-gray-500">UX-only: später via Rollen/Berechtigungen.
                                </div>
                            </div>

                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Notiz</label>
                                <textarea rows="3" placeholder="Optional: Kontext zum Anhang…"
                                    class="mt-2 w-full rounded-xl border-gray-200 bg-white text-sm focus:border-brand focus:ring-brand"></textarea>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="flex items-center justify-between gap-3 border-t border-gray-200 px-6 py-4">
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50"
                        @click="attachOpen = false">
                        Abbrechen
                    </button>

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


    </div>
</x-ux-layout>