@php
    $isDev = auth()->user()?->hasRole('developer');
    abort_unless($isDev, 403);
@endphp

<x-layouts.app title="Update erstellen" userRole="Developer">
    <div class="flex flex-col gap-4">

        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div class="min-w-0">
                <div class="text-xl font-semibold">Update erstellen</div>
                <div class="mt-1 text-sm text-rk-slate">Titel, Typ und Text (Rich-Text).</div>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('updates.index') }}" class="btn-rk-soft">Abbrechen</a>
                <button form="update-form" type="submit" class="btn-rk-soft-green">Speichern</button>
            </div>
        </div>

        @if ($errors->any())
            <div class="rounded-3xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
                <div class="font-semibold">Bitte prüfe die Eingaben:</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 id="update-form" method="POST" action="{{ route('updates.store') }}"
            class="rounded-3xl bg-white border border-rk p-6 shadow-sm space-y-4">
            @csrf

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                <div class="sm:col-span-2">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Titel</label>
                    <input name="title" value="{{ old('title') }}" required
                        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="z.B. Release v1.4.0">
                    @error('title')
                        <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
                    @enderror
                </div>
                <div>
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Version</label>
                    <input name="version" value="{{ old('version') }}"
                        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="z.B. 1.4.0 oder v1.4.0">
                    <div class="mt-1 text-xs text-rk-slate">Optional</div>
                </div>
            </div>
            <div>
                <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"
                    required>
                    @foreach ($types as $t)
                        <option value="{{ $t }}" @selected(old('type', 'feature') === $t)>{{ ucfirst($t) }}</option>
                    @endforeach
                </select>
                @error('type')
                    <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
                @enderror
            </div>

            <div>
                <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Text</label>

                {{-- Hidden input stores HTML --}}
                <input type="hidden" name="body" id="body" value="{{ old('body', '') }}">

                {{-- Quill container --}}
                <div id="quill-editor" class="mt-2 rounded-2xl border border-rk bg-white overflow-hidden">
                    {{-- Quill injects toolbar/editor here --}}
                </div>

                <div class="mt-2 text-xs text-rk-slate">
                    Hinweis: Formatierungen werden gespeichert (HTML).
                </div>

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

            <div>
                <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Veröffentlichen am
                    (optional)</label>
                <input name="published_at" type="datetime-local" value="{{ old('published_at') }}"
                    class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                @error('published_at')
                    <div class="mt-2 text-xs text-red-600">{{ $message }}</div>
                @enderror
            </div>
        </form>

    </div>

    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                window.initQuill('#quill-editor', '#body', @json(old('body', '')));
            });
        </script>
    @endpush
</x-layouts.app>