@php
    $vehicle = app(\App\Support\VehicleContext::class)->current();

    $title = ($vehicle?->call_sign ?? 'RTW') . ' – Dokument hochladen';
    $pageTitle = 'Dokument hochladen';
    $pageSubtitle = $vehicle ? trim(($vehicle->call_sign ?? '') . ' • ' . ($vehicle->license_plate ?? '')) : '';
@endphp

<x-ux-layout :title="$title" :pageTitle="$pageTitle" :pageSubtitle="$pageSubtitle">
    <div class="grid grid-cols-12 gap-6">

        <section class="col-span-12 lg:col-span-8 space-y-6">
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <h2 class="text-lg font-semibold">Upload</h2>

                <form method="POST" action="{{ route('documents.store') }}" enctype="multipart/form-data"
                    class="mt-4 space-y-4">
                    @csrf

                    <div>
                        <label class="text-sm font-semibold">Titel</label>
                        <input name="title" value="{{ old('title') }}" maxlength="190" required
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand"
                            placeholder="z. B. Versicherungspolice 2026">
                        @error('title')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="text-sm font-semibold">Kategorie</label>
                        <select name="document_category_id"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                            <option value="">— Keine —</option>
                            @foreach ($categories as $c)
                                <option value="{{ $c->id }}"
                                    {{ (int) old('document_category_id') === (int) $c->id ? 'selected' : '' }}>
                                    {{ $c->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('document_category_id')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div>
                        <label class="text-sm font-semibold">Datei</label>
                        <input name="file" type="file" required accept="application/pdf,image/jpeg,image/png"
                            class="mt-2 w-full rounded-xl border-gray-200 bg-white py-2.5 text-sm focus:border-brand focus:ring-brand">
                        <div class="mt-2 text-xs text-gray-500">PDF/JPG/PNG • max. 25 MB</div>
                        @error('file')
                            <div class="mt-2 text-sm text-red-600">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="flex items-center justify-end gap-2">
                        <a href="{{ route('documents.index') }}"
                            class="rounded-xl border border-gray-200 bg-white px-4 py-2.5 text-sm font-semibold hover:bg-gray-50">
                            Abbrechen
                        </a>
                        <button
                            class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-600">
                            Hochladen
                        </button>
                    </div>
                </form>
            </div>
        </section>

        <aside class="col-span-12 lg:col-span-4">
            <div class="rounded-2xl border border-gray-200 bg-white p-5">
                <h3 class="text-lg font-semibold">Hinweise</h3>
                <div class="mt-3 text-sm text-gray-600 space-y-2">
                    <p>Uploads landen im <b>private</b> Storage und sind nur für berechtigte Nutzer erreichbar.</p>
                    <p>Vorschau/Download erfolgt über <b>signed</b> URL.</p>
                </div>
            </div>
        </aside>

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