{{-- resources/views/ui/feedback/create.blade.php --}}
@php
    $types = ['bug' => 'Bug', 'feature' => 'Verbesserung'];
    $priorities = ['low' => 'Niedrig', 'medium' => 'Mittel', 'high' => 'Hoch'];
@endphp

<x-layouts.app title="Meldung erstellen"
    userRole="{{ auth()->user()->isDistrictUser() ? 'Bezirksstelle' : 'Ortstelle' }}">
    <div class="flex flex-col gap-4">

        <div class="flex items-end justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Meldung erstellen</div>
                <div class="mt-1 text-sm text-rk-slate">Bugs oder Verbesserungsvorschläge einreichen.</div>
            </div>
            <a href="{{ route('feedback.index') }}" class="btn-rk-soft">Zurück</a>
        </div>

        @if ($errors->any())
            <div class="rounded-3xl border border-red-200 bg-red-50 p-4 text-sm text-red-800">
                <div class="font-semibold">Bitte prüfen:</div>
                <ul class="mt-2 list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $e)
                        <li>{{ $e }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('feedback.store') }}"
            class="rounded-3xl bg-white border border-rk p-6 shadow-sm space-y-5">
            @csrf

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:items-end">
                <div class="lg:col-span-3">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Typ</label>
                    <select name="type" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        @foreach ($types as $k => $lbl)
                            <option value="{{ $k }}" @selected(old('type', 'bug') === $k)>{{ $lbl }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="lg:col-span-3">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Priorität</label>
                    <select name="priority" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        @foreach ($priorities as $k => $lbl)
                            <option value="{{ $k }}" @selected(old('priority', 'medium') === $k)>{{ $lbl }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="lg:col-span-6">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Titel</label>
                    <input name="title" value="{{ old('title') }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                        placeholder="Kurzbeschreibung…" required>
                </div>

                <div class="lg:col-span-12">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Beschreibung</label>
                    <textarea name="description" rows="5"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                        placeholder="Was ist passiert / was wünschst du dir?" required>{{ old('description') }}</textarea>
                </div>

                <div class="lg:col-span-12">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Schritte zur
                        Reproduktion (optional)</label>
                    <textarea name="steps" rows="4"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                        placeholder="1) … 2) … 3) …">{{ old('steps') }}</textarea>
                </div>

                <div class="lg:col-span-6">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Erwartetes Ergebnis
                        (optional)</label>
                    <textarea name="expected" rows="3"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                        placeholder="Was sollte passieren?">{{ old('expected') }}</textarea>
                </div>

                <div class="lg:col-span-6">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Tatsächliches
                        Ergebnis (optional)</label>
                    <textarea name="actual" rows="3"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm focus:ring-2 ring-rk focus:border-transparent"
                        placeholder="Was passiert stattdessen?">{{ old('actual') }}</textarea>
                </div>
            </div>

            <div class="flex flex-col sm:flex-row sm:justify-end gap-2">
                <a href="{{ route('feedback.index') }}" class="btn-rk-soft text-center">Abbrechen</a>
                <button class="btn-rk-primary">Speichern</button>
            </div>
        </form>
    </div>
</x-layouts.app>