@php
    $reasonsByType = [
        'out' => [
            'verbrauch_einsatz' => 'Verbrauch – Einsatz',
            'verbrauch_uebung' => 'Verbrauch – Übung',
        ],
        'in' => [
            'zugang_kauf' => 'Zugang – Einkauf',
            'zugang_umlagerung' => 'Zugang – Umlagerung',
        ],
        'adjust' => [
            'korrektur' => 'Korrektur / Inventur',
        ],
    ];
@endphp

<x-layouts.app title="Buchung erstellen" userRole="Ortstelle">
    <div class="max-w-8xl">
        <div class="flex items-end justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Buchung erstellen</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Zugang, Verbrauch oder Inventur buchen (Bestand wird automatisch angepasst).
                </div>
            </div>
            <a href="{{ route('movements.index') }}" class="btn-rk-soft">Zurück</a>
        </div>

        @if ($errors->any())
            <div class="mt-4 rounded-3xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
                <div class="font-semibold">Bitte Eingaben 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('movements.store') }}"
            class="mt-4 rounded-3xl bg-white border border-rk p-6 shadow-sm space-y-4">
            @csrf

            {{-- TYPE --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <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">
                        <option value="in" @selected(old('type') === 'in')>Zugang</option>
                        <option value="out" @selected(old('type') === 'out')>Verbrauch</option>
                        <option value="adjust" @selected(old('type') === 'adjust')>Inventur (Soll setzen)</option>
                    </select>
                    <div class="mt-1 text-xs text-rk-slate">
                        Inventur: Menge = Soll-Bestand. Zugang/Verbrauch: Menge = Delta.
                    </div>
                </div>

                <div>
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Datum</label>
                    <input name="booked_at" type="date" value="{{ old('booked_at') }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                    <div class="mt-1 text-xs text-rk-slate">Leer lassen = jetzt.</div>
                </div>
            </div>

            {{-- REASON + NOTE --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Grund</label>

                    <select id="reason-select" name="reason"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        <option value="">Bitte zuerst Typ wählen…</option>
                    </select>

                    <div class="mt-1 text-xs text-rk-slate">Je nach Typ werden passende Gründe angezeigt.</div>
                </div>

                <div>
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Notiz</label>
                    <input name="note" type="text" value="{{ old('note') }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm"
                        placeholder="z.B. Einsatz 12/2026, Team Alpha …">
                </div>
            </div>

            {{-- ITEMS[0] --}}
            <div class="rounded-3xl border border-rk bg-neutral-50 p-4">
                <div class="text-sm font-semibold">Position</div>
                <div class="mt-1 text-xs text-rk-slate">Eine Position (du kannst später auf Multi erweitern).</div>

                <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Artikel</label>
                        <select name="items[0][product_id]" data-variants-product
                            data-variants-endpoint="{{ route('api.product.variants', ['product' => '__ID__']) }}"
                            class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                            <option value="">Bitte wählen…</option>
                            @foreach ($products as $p)
                                <option value="{{ $p->id }}" @selected(old('items.0.product_id') == $p->id)>
                                    {{ $p->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">
                            Variante (optional)
                        </label>
                        <select name="items[0][variant_id]" data-variants-target
                            class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                            <option value="">Keine Variante</option>
                        </select>

                        <div data-variants-hint
                            class="mt-2 hidden rounded-2xl border border-rk bg-white px-4 py-3 text-xs text-rk-slate">
                            Für diesen Artikel sind keine Varianten hinterlegt.
                        </div>
                    </div>

                    <div>
                        <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Menge</label>
                        <input name="items[0][quantity]" type="number" min="0"
                            value="{{ old('items.0.quantity', 1) }}"
                            class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                    </div>
                </div>
            </div>

            <div class="flex gap-2">
                <button type="submit" class="btn-rk-soft-green">Speichern</button>
                <a href="{{ route('movements.index') }}" class="btn-rk-soft">Abbrechen</a>
            </div>
        </form>
    </div>

    <script>
        (function() {
            const reasonsByType = @json($reasonsByType);
            const oldType = @json(old('type', 'in'));
            const oldReason = @json(old('reason', ''));

            const typeEl = document.querySelector('select[name="type"]');
            const reasonEl = document.getElementById('reason-select');

            function setReasons(type) {
                const map = reasonsByType[type] || {};
                const keys = Object.keys(map);

                reasonEl.innerHTML = '';

                if (keys.length === 0) {
                    const opt = document.createElement('option');
                    opt.value = '';
                    opt.textContent = 'Keine Gründe verfügbar';
                    reasonEl.appendChild(opt);
                    reasonEl.disabled = true;
                    reasonEl.classList.add('opacity-70');
                    return;
                }

                reasonEl.disabled = false;
                reasonEl.classList.remove('opacity-70');

                // Placeholder
                const ph = document.createElement('option');
                ph.value = '';
                ph.textContent = 'Bitte wählen…';
                reasonEl.appendChild(ph);

                for (const k of keys) {
                    const opt = document.createElement('option');
                    opt.value = k;
                    opt.textContent = map[k];
                    reasonEl.appendChild(opt);
                }

                // Auto-select: oldReason wenn noch gültig, sonst erstes echtes Element
                if (oldReason && map[oldReason]) {
                    reasonEl.value = oldReason;
                } else {
                    reasonEl.value = '';
                }
            }

            typeEl.addEventListener('change', () => setReasons(typeEl.value));

            // Init
            typeEl.value = oldType;
            setReasons(oldType);
        })();
    </script>
</x-layouts.app>