@php
    $title = 'RTW 3 – Historie';
    $pageTitle = 'Historie';
    $pageSubtitle = 'RTW 3 • MA-RTW 903 • Änderungsprotokoll (Audit-Log)';

    $rows = [
        [
            'time' => '12.05.2024 16:45',
            'area' => 'Dokumente',
            'action' => 'Dokument hochgeladen',
            'user' => 'Markus',
            'detail' => 'Versicherung_Police_2024.pdf • Kategorie: Versicherung',
        ],
        [
            'time' => '12.05.2024 15:10',
            'area' => 'Schäden',
            'action' => 'Schaden gemeldet',
            'user' => 'Lisa',
            'detail' => 'Defibrillator – Fehlermeldung • Status: Offen',
        ],
        [
            'time' => '11.05.2024 09:02',
            'area' => 'Erinnerungen',
            'action' => 'Erinnerung erstellt',
            'user' => 'Admin',
            'detail' => 'TÜV Termin vereinbaren • Datum: 20.05.2024',
        ],
        [
            'time' => '10.05.2024 18:22',
            'area' => 'Dokumente',
            'action' => 'Kategorie geändert',
            'user' => 'Admin',
            'detail' => 'Wartung_Inspektion_03-2024.pdf → Kategorie: Wartung',
        ],
    ];

    $areaBadge = [
        'Dokumente' => 'bg-brand/10 text-brand ring-brand/15',
        'Erinnerungen' => 'bg-yellow-50 text-yellow-800 ring-yellow-200',
        'Schäden' => 'bg-red-50 text-red-700 ring-red-200',
    ];
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div x-data="{ detailOpen: false }" class="space-y-6">

        <!-- Toolbar -->
        <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="flex flex-col gap-3 md:flex-row md:items-center">
                    <label class="relative w-full md:w-[420px]">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 21l-4.3-4.3" />
                                <circle cx="11" cy="11" r="7" />
                            </svg>
                        </span>
                        <input type="text" placeholder="Historie durchsuchen…"
                            class="w-full rounded-xl border-gray-200 bg-gray-50 pl-9 pr-3 py-2.5 text-sm focus:border-brand focus:ring-brand">
                    </label>

                    <select
                        class="rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                        <option>Zeitraum: 30 Tage</option>
                        <option>7 Tage</option>
                        <option>30 Tage</option>
                        <option>90 Tage</option>
                        <option>Alle</option>
                    </select>

                    <select
                        class="rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                        <option>Bereich: Alle</option>
                        <option>Dokumente</option>
                        <option>Erinnerungen</option>
                        <option>Schäden</option>
                    </select>

                    <select
                        class="rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                        <option>User: Alle</option>
                        <option>Admin</option>
                        <option>Markus</option>
                        <option>Lisa</option>
                    </select>
                </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">
                        Export
                    </button>
                    <button class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                        Bericht erstellen
                    </button>
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="rounded-2xl border border-gray-200 bg-white overflow-hidden">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200">
                <h2 class="text-lg font-semibold">Audit-Log</h2>
                <div class="text-sm text-gray-500">RTW 3</div>
            </div>

            <table class="w-full text-sm">
                <thead class="bg-gray-50 text-gray-600">
                    <tr>
                        <th class="px-5 py-3 text-left font-semibold">Zeitpunkt</th>
                        <th class="px-5 py-3 text-left font-semibold">Ereignis</th>
                        <th class="px-5 py-3 text-left font-semibold">Bereich</th>
                        <th class="px-5 py-3 text-left font-semibold">Benutzer</th>
                        <th class="px-5 py-3 text-left font-semibold">Details</th>
                        <th class="px-5 py-3 text-right font-semibold"></th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200">
                    @foreach ($rows as $r)
                        <tr class="bg-white">
                            <td class="px-5 py-4 whitespace-nowrap">{{ $r['time'] }}</td>

                            <td class="px-5 py-4">
                                <div class="font-semibold">{{ $r['action'] }}</div>
                            </td>

                            <td class="px-5 py-4">
                                <span
                                    class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $areaBadge[$r['area']] ?? 'bg-gray-100 text-gray-700 ring-gray-200' }}">
                                    {{ $r['area'] }}
                                </span>
                            </td>

                            <td class="px-5 py-4">{{ $r['user'] }}</td>

                            <td class="px-5 py-4">
                                <div class="text-sm text-gray-700 line-clamp-2">{{ $r['detail'] }}</div>
                            </td>

                            <td class="px-5 py-4 text-right">
                                <button
                                    class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50"
                                    @click="detailOpen = true">
                                    Details
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="px-5 py-4 border-t border-gray-200 text-xs text-gray-500">
                UX-only: Filter/Export/Bericht werden später an echte Daten gebunden.
            </div>
        </div>

        <!-- Details Modal -->
        <div x-show="detailOpen" 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="detailOpen = false"></div>

            <div x-show="detailOpen" x-transition
                class="relative w-full max-w-xl 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">Ereignisdetails</div>
                        <div class="text-sm text-gray-600">RTW 3 • Audit-Log</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="detailOpen = 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 space-y-4">
                    <div class="rounded-2xl border border-gray-200 bg-gray-50 p-4">
                        <div class="text-xs text-gray-500">Zeitpunkt</div>
                        <div class="mt-1 font-semibold">12.05.2024 16:45</div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="rounded-2xl border border-gray-200 p-4">
                            <div class="text-xs text-gray-500">Bereich</div>
                            <div class="mt-1 font-semibold">Dokumente</div>
                        </div>

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

                        <div class="md:col-span-2 rounded-2xl border border-gray-200 p-4">
                            <div class="text-xs text-gray-500">Ereignis</div>
                            <div class="mt-1 font-semibold">Dokument hochgeladen</div>
                            <div class="mt-2 text-sm text-gray-700">
                                Versicherung_Police_2024.pdf • Kategorie: Versicherung
                            </div>
                        </div>
                    </div>

                    <div class="text-xs text-gray-500">
                        UX-only: Später wird hier auch „Vorher/Nachher“ angezeigt (z. B. Kategorie geändert, Status
                        geändert, etc.).
                    </div>
                </div>

                <div class="flex items-center justify-end gap-2 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="detailOpen = false">
                        Schließen
                    </button>
                    <button class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                        Als PDF exportieren
                    </button>
                </div>
            </div>
        </div>

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