{{-- resources/views/reminders/edit.blade.php --}}
<x-ux-layout title="Erinnerung bearbeiten">
    <div class="max-w-6xl mx-auto">
        {{-- Header --}}
        <div class="flex items-start justify-between gap-4">
            <div>
                <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Erinnerung bearbeiten</h1>
                <p class="mt-1 text-sm text-gray-600">Titel, Datum und Priorität anpassen.</p>
            </div>

            <a href="{{ route('reminders.index') }}"
                class="inline-flex items-center gap-2 rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/30">
                <span aria-hidden="true">←</span>
                Zurück
            </a>
        </div>

        {{-- Card --}}
        <div class="mt-6 overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm">
            <div class="h-1 w-full bg-gradient-to-r from-emerald-600 via-emerald-500 to-emerald-400"></div>

            <form method="POST" action="{{ route('reminders.update', $reminder) }}" class="p-6 space-y-6">
                @csrf
                @method('PUT')

                {{-- Titel --}}
                <div>
                    <label for="title" class="text-sm font-medium text-gray-800">Titel</label>
                    <div class="mt-2">
                        <input id="title" name="title" value="{{ old('title', $reminder->title) }}" required
                            maxlength="190"
                            class="block w-full rounded-xl border-gray-200 bg-white px-4 py-2.5 text-gray-900 shadow-sm
                                   placeholder:text-gray-400
                                   focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/20"
                            placeholder="z.B. TÜV Termin, Material prüfen, Fahrzeugreinigung…">
                    </div>
                    @error('title')
                        <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Datum + Priorität --}}
                <div class="grid gap-5 md:grid-cols-2">
                    <div>
                        <label for="due_at" class="text-sm font-medium text-gray-800">Fällig am</label>
                        <div class="mt-2">
                            <input type="date" id="due_at" name="due_at"
                                value="{{ old('due_at', optional($reminder->due_at)->toDateString()) }}"
                                class="block w-full rounded-xl border-gray-200 bg-white px-4 py-2.5 text-gray-900 shadow-sm
                                       focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/20">
                        </div>
                        <p class="mt-2 text-xs text-gray-500">Nur Datum – keine Uhrzeit.</p>
                        @error('due_at')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="text-sm font-medium text-gray-800">Priorität</label>

                        @php($p = old('priority', $reminder->priority ?? 'normal'))

                        <div class="mt-2 grid grid-cols-3 gap-2 rounded-2xl bg-gray-50 p-2 ring-1 ring-gray-200">
                            {{-- Niedrig --}}
                            <label class="cursor-pointer">
                                <input type="radio" name="priority" value="low" class="peer sr-only"
                                    @checked($p === 'low')>
                                <span
                                    class="flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium transition
                                           text-gray-600 hover:text-gray-900
                                           peer-checked:bg-white peer-checked:text-gray-900 peer-checked:shadow-sm peer-checked:ring-1 peer-checked:ring-gray-200">
                                    Niedrig
                                </span>
                            </label>

                            {{-- Normal --}}
                            <label class="cursor-pointer">
                                <input type="radio" name="priority" value="normal" class="peer sr-only"
                                    @checked($p === 'normal')>
                                <span
                                    class="flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium transition
                                           text-gray-600 hover:text-gray-900
                                           peer-checked:bg-white peer-checked:text-gray-900 peer-checked:shadow-sm peer-checked:ring-1 peer-checked:ring-gray-200">
                                    Normal
                                </span>
                            </label>

                            {{-- Hoch --}}
                            <label class="cursor-pointer">
                                <input type="radio" name="priority" value="high" class="peer sr-only"
                                    @checked($p === 'high')>
                                <span
                                    class="flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium transition
                                           text-gray-600 hover:text-gray-900
                                           peer-checked:bg-white peer-checked:text-gray-900 peer-checked:shadow-sm peer-checked:ring-1 peer-checked:ring-gray-200">
                                    Hoch
                                </span>
                            </label>
                        </div>

                        @error('priority')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                {{-- Notizen --}}
                <div>
                    <label for="notes" class="text-sm font-medium text-gray-800">Notizen</label>
                    <div class="mt-2">
                        <textarea id="notes" name="notes" rows="5" maxlength="5000"
                            class="block w-full rounded-xl border-gray-200 bg-white px-4 py-3 text-gray-900 shadow-sm
                                   placeholder:text-gray-400
                                   focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/20"
                            placeholder="Optional: Details, Ansprechpartner, Kontext, ToDos…">{{ old('notes', $reminder->notes) }}</textarea>
                    </div>
                    <p class="mt-2 text-xs text-gray-500">Max. 5000 Zeichen.</p>
                    @error('notes')
                        <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Actions --}}
                <div
                    class="flex flex-col-reverse gap-3 border-t border-gray-100 pt-5 sm:flex-row sm:items-center sm:justify-end">
                    <a href="{{ route('reminders.index') }}"
                        class="inline-flex justify-center rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-emerald-500/30">
                        Abbrechen
                    </a>

                    <button type="submit"
                        class="inline-flex justify-center rounded-xl bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm
                               hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-500/25">
                        Änderungen speichern
                    </button>
                </div>
            </form>
        </div>

        <form method="POST" action="{{ route('reminders.destroy', $reminder) }}" class="mt-4">
            @csrf
            @method('DELETE')
            <button type="submit"
                class="w-full rounded-xl border border-red-200 bg-white px-4 py-2.5 text-sm font-semibold text-red-700 shadow-sm hover:bg-red-50">
                Erinnerung löschen
            </button>
        </form>
    </div>
</x-ux-layout>