@php
    $title = 'RTW 3 – Erinnerungen';
    $pageTitle = 'Erinnerungen';
    $pageSubtitle = 'RTW 3 • MA-RTW 903 • Aufgaben & Fristen (unabhängig von Dokumenten)';

    $items = [
        [
            'title' => 'TÜV Termin vereinbaren',
            'date' => '20.05.2024',
            'priority' => 'high', // low | medium | high
            'status' => 'open', // open | done
            'note' => 'Werkstatt Mustermann kontaktieren',
        ],
        [
            'title' => 'Wartung Absaugpumpe prüfen',
            'date' => '02.06.2024',
            'priority' => 'medium',
            'status' => 'open',
            'note' => 'Gerät laut Checkliste prüfen',
        ],
        [
            'title' => 'Innenraumdesinfektion dokumentieren',
            'date' => '01.04.2024',
            'priority' => 'low',
            'status' => 'done',
            'note' => 'Durchgeführt nach Einsatz 4711',
        ],
    ];

    $prio = [
        'low' => ['cls' => 'bg-gray-100 text-gray-700 ring-gray-200', 'label' => 'Niedrig'],
        'medium' => ['cls' => 'bg-yellow-50 text-yellow-800 ring-yellow-200', 'label' => 'Mittel'],
        'high' => ['cls' => 'bg-red-50 text-red-700 ring-red-200', 'label' => 'Hoch'],
    ];

    $status = [
        'open' => ['cls' => 'bg-brand/10 text-brand ring-brand/15', 'label' => 'Offen'],
        'done' => ['cls' => 'bg-gray-100 text-gray-700 ring-gray-200', 'label' => 'Erledigt'],
    ];
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div x-data="{ createOpen: false, tab: 'open' }" 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">
                    <div class="inline-flex overflow-hidden rounded-xl border border-gray-200 bg-white">
                        <button class="px-4 py-2.5 text-sm font-semibold"
                            :class="tab === 'open' ? 'bg-brand/10 text-brand' : 'text-gray-700 hover:bg-gray-50'"
                            @click="tab='open'">Offen</button>
                        <button class="px-4 py-2.5 text-sm font-semibold"
                            :class="tab === 'done' ? 'bg-brand/10 text-brand' : 'text-gray-700 hover:bg-gray-50'"
                            @click="tab='done'">Erledigt</button>
                    </div>

                    <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="Erinnerungen suchen…"
                            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>Priorität: Alle</option>
                        <option>Hoch</option>
                        <option>Mittel</option>
                        <option>Niedrig</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"
                        @click="createOpen = true">
                        Erinnerung anlegen
                    </button>
                </div>
            </div>
        </div>

        <!-- List -->
        <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">Liste</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">Datum</th>
                        <th class="px-5 py-3 text-left font-semibold">Titel</th>
                        <th class="px-5 py-3 text-left font-semibold">Priorität</th>
                        <th class="px-5 py-3 text-left font-semibold">Status</th>
                        <th class="px-5 py-3 text-right font-semibold"></th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-gray-200">
                    @foreach ($items as $it)
                        <tr class="bg-white">
                            <td class="px-5 py-4">{{ $it['date'] }}</td>
                            <td class="px-5 py-4">
                                <div class="font-semibold">{{ $it['title'] }}</div>
                                <div class="mt-1 text-xs text-gray-500">{{ $it['note'] }}</div>
                            </td>
                            <td class="px-5 py-4">
                                <span
                                    class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $prio[$it['priority']]['cls'] }}">
                                    {{ $prio[$it['priority']]['label'] }}
                                </span>
                            </td>
                            <td class="px-5 py-4">
                                <span
                                    class="rounded-full px-2.5 py-1 text-xs font-semibold ring-1 {{ $status[$it['status']]['cls'] }}">
                                    {{ $status[$it['status']]['label'] }}
                                </span>
                            </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">
                                        Bearbeiten
                                    </button>
                                    <button
                                        class="rounded-xl bg-brand px-3 py-2 text-xs font-semibold text-white hover:bg-brand-600">
                                        Erledigt
                                    </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/Tab steuern später die echte Datenabfrage.
            </div>
        </div>

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

            <div x-show="createOpen" 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">Erinnerung anlegen</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="createOpen = 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. TÜV Termin 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">Datum</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>
                                <label class="text-sm font-semibold">Priorität</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>Hoch</option>
                                    <option>Mittel</option>
                                    <option>Niedrig</option>
                                </select>
                            </div>

                            <div class="md:col-span-2">
                                <label class="text-sm font-semibold">Notiz</label>
                                <textarea rows="3" placeholder="Optional: Details, Ansprechpartner, Hinweise…"
                                    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">Wiederholung (optional)</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>Keine</option>
                                    <option>Wöchentlich</option>
                                    <option>Monatlich</option>
                                    <option>Jährlich</option>
                                </select>
                                <div class="mt-2 text-xs text-gray-500">UX-only: Wiederholung wird später umgesetzt.
                                </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="createOpen = 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">
                            Speichern
                        </button>
                    </div>
                </div>
            </div>
        </div>

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