@php
    $title = 'RTW 3 – Dokumente';
    $pageTitle = 'Dokumente';
    $pageSubtitle = 'RTW 3 • MA-RTW 903 • Dokumentenablage nach Kategorien';

    $categories = [
        ['name' => 'Alle', 'count' => 8, 'active' => true],
        ['name' => 'Zulassung', 'count' => 1, 'active' => false],
        ['name' => 'Versicherung', 'count' => 2, 'active' => false],
        ['name' => 'Wartung', 'count' => 2, 'active' => false],
        ['name' => 'Rechnungen', 'count' => 2, 'active' => false],
        ['name' => 'Sonstiges', 'count' => 1, 'active' => false],
    ];

    $docs = [
        [
            'title' => 'Versicherung_Police_2024.pdf',
            'category' => 'Versicherung',
            'doc_date' => '28.01.2024',
            'uploaded' => '28.01.2024',
            'uploader' => 'Markus',
        ],
        [
            'title' => 'Zulassung.pdf',
            'category' => 'Zulassung',
            'doc_date' => '10.01.2024',
            'uploaded' => '10.01.2024',
            'uploader' => 'Admin',
        ],
        [
            'title' => 'Wartung_Inspektion_03-2024.pdf',
            'category' => 'Wartung',
            'doc_date' => '14.03.2024',
            'uploaded' => '14.03.2024',
            'uploader' => 'Lisa',
        ],
        [
            'title' => 'Rechnung_Bremsen_04-2024.pdf',
            'category' => 'Rechnungen',
            'doc_date' => '18.04.2024',
            'uploaded' => '18.04.2024',
            'uploader' => 'Lisa',
        ],
    ];
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div x-data="{ uploadOpen: false, catOpen: false }" class="grid grid-cols-12 gap-6">
        <!-- Left: Kategorien -->
        <aside class="col-span-12 lg:col-span-3">
            <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">Kategorien</h2>
                    <button
                        class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-semibold hover:bg-gray-50"
                        @click="catOpen = true">
                        Verwalten
                    </button>
                </div>

                <div class="mt-4 space-y-1">
                    @foreach ($categories as $c)
                        <button
                            class="w-full flex items-center justify-between rounded-xl px-3 py-2.5 text-sm font-semibold
                     {{ $c['active'] ? 'bg-brand/10 text-brand ring-1 ring-brand/15' : 'text-gray-700 hover:bg-gray-100' }}">
                            <span class="truncate">{{ $c['name'] }}</span>
                            <span
                                class="rounded-full px-2 py-0.5 text-xs font-semibold
                           {{ $c['active'] ? 'bg-white text-brand ring-1 ring-brand/15' : 'bg-gray-100 text-gray-700 ring-1 ring-gray-200' }}">
                                {{ $c['count'] }}
                            </span>
                        </button>
                    @endforeach
                </div>

                <div class="mt-5 rounded-2xl border border-gray-200 bg-gray-50 p-4">
                    <div class="text-sm font-semibold">Hinweis</div>
                    <div class="mt-2 text-sm text-gray-600">
                        Dokumente sind pro RTW abgelegt und über Kategorien schnell auffindbar.
                    </div>
                </div>
            </div>
        </aside>

        <!-- Right: Liste -->
        <section class="col-span-12 lg:col-span-9 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="Dokumente suchen (Name, Kategorie)…"
                                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>
                    </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"
                            @click="uploadOpen = true">
                            Dokument hochladen
                        </button>
                    </div>
                </div>
            </div>

            <!-- Table -->
            <div class="rounded-2xl border border-gray-200 bg-white p-0 overflow-hidden">
                <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold">Dokumente</h2>
                    <div class="text-sm text-gray-500">Anzeige: <span class="font-semibold text-gray-700">Alle</span>
                    </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">Dokument</th>
                            <th class="px-5 py-3 text-left font-semibold">Kategorie</th>
                            <th class="px-5 py-3 text-left font-semibold">Dokumentdatum</th>
                            <th class="px-5 py-3 text-left font-semibold">Upload</th>
                            <th class="px-5 py-3 text-left font-semibold">Von</th>
                            <th class="px-5 py-3 text-right font-semibold"></th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-gray-200">
                        @foreach ($docs as $d)
                            <tr class="bg-white">
                                <td class="px-5 py-4">
                                    <div class="flex items-start gap-3">
                                        <div
                                            class="mt-0.5 h-9 w-9 rounded-xl bg-gray-100 ring-1 ring-gray-200 flex items-center justify-center">
                                            <svg class="h-4 w-4 text-gray-600" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" stroke-width="2">
                                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                                <path d="M14 2v6h6" />
                                            </svg>
                                        </div>

                                        <div class="min-w-0">
                                            <div class="font-semibold truncate">{{ $d['title'] }}</div>
                                            <div class="mt-1 text-xs text-gray-500">RTW 3</div>
                                        </div>
                                    </div>
                                </td>

                                <td class="px-5 py-4">{{ $d['category'] }}</td>
                                <td class="px-5 py-4">{{ $d['doc_date'] }}</td>
                                <td class="px-5 py-4">{{ $d['uploaded'] }}</td>
                                <td class="px-5 py-4">{{ $d['uploader'] }}</td>

                                <td class="px-5 py-4 text-right">
                                    <div class="inline-flex items-center gap-2">
                                        <button
                                            class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                            Download
                                        </button>
                                        <button
                                            class="rounded-xl bg-brand px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">
                                            Bearbeiten
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

                <div class="px-5 py-4 border-t border-gray-200 text-xs text-gray-500">
                    UX-only: Filter/Sortierung und Upload kommen in der Implementierung.
                </div>
            </div>
        </section>

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

            <div x-show="uploadOpen" 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">Dokument hochladen</div>
                        <div class="text-sm text-gray-600">RTW 3 • MA-RTW 903</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="uploadOpen = 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">Datei</label>
                                <div class="mt-2 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>

                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Titel</label>
                                <input type="text" placeholder="z. B. Versicherungspolice 2024"
                                    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">Kategorie</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>Zulassung</option>
                                    <option>Versicherung</option>
                                    <option>Wartung</option>
                                    <option>Rechnungen</option>
                                    <option>Sonstiges</option>
                                </select>
                            </div>

                            <div>
                                <label class="text-sm font-semibold">Dokumentdatum</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: Hinweise, Nummern, Besonderheiten…"
                                    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="uploadOpen = false">
                        Abbrechen
                    </button>

                    <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">
                            Entwurf
                        </button>
                        <button
                            class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                            Hochladen
                        </button>
                    </div>
                </div>
            </div>
        </div>

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

            <div x-show="catOpen" 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">Kategorien verwalten</div>
                        <div class="text-sm text-gray-600">Dokument-Kategorien für RTW 3</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="catOpen = 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">
                    <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-1 text-sm text-gray-600">
                            Sortierung per Drag & Drop kommt später. Hier: anlegen, umbenennen, löschen.
                        </div>
                    </div>

                    <!-- Neue Kategorie -->
                    <div class="mt-5 rounded-2xl border border-gray-200 bg-white p-4">
                        <div class="text-sm font-semibold">Neue Kategorie</div>
                        <div class="mt-3 flex flex-col gap-3 md:flex-row md:items-center">
                            <input type="text" placeholder="z. B. Geräte / Funk / Hygiene"
                                class="w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand" />
                            <button
                                class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                                Hinzufügen
                            </button>
                        </div>
                    </div>

                    <!-- Kategorienliste -->
                    <div class="mt-5 overflow-hidden rounded-2xl border border-gray-200 bg-white">
                        <div class="px-4 py-3 bg-gray-50 text-sm font-semibold text-gray-700 border-b border-gray-200">
                            Vorhandene Kategorien
                        </div>

                        <div class="divide-y divide-gray-200">
                            @php
                                $catItems = ['Zulassung', 'Versicherung', 'Wartung', 'Rechnungen', 'Sonstiges'];
                            @endphp

                            @foreach ($catItems as $name)
                                <div class="flex items-center justify-between gap-3 px-4 py-3">
                                    <div class="min-w-0">
                                        <div class="flex items-center gap-2">
                                            <span class="h-2.5 w-2.5 rounded-full bg-brand/60"></span>
                                            <div class="font-semibold truncate">{{ $name }}</div>
                                        </div>
                                        <div class="text-xs text-gray-500 mt-1">UX-only • Anzahl wird später dynamisch
                                        </div>
                                    </div>

                                    <div class="flex items-center gap-2">
                                        <button
                                            class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-xs font-semibold hover:bg-gray-50">
                                            Umbenennen
                                        </button>
                                        <button
                                            class="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs font-semibold text-red-700 hover:bg-red-100">
                                            Löschen
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </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="catOpen = 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">
                        Änderungen speichern
                    </button>
                </div>
            </div>
        </div>


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