@php
    $id = $id ?? 0;
@endphp

<x-layouts.app :title="'Buchung · #' . $id" userRole="Ortstelle">
    <div class="flex flex-col gap-4">

        <div class="flex items-end justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Buchung #{{ $id }}</div>
                <div class="mt-1 text-sm text-rk-slate">Heute, 10:12 · Typ: Verbrauch (UI)</div>
            </div>

            <div class="flex gap-2">
                <a href="{{ route('ui.consumption') }}"
                    class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                    Zurück
                </a>
                <button
                    class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                    Storno (später)
                </button>
            </div>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
            <div class="xl:col-span-2 rounded-3xl bg-white border border-rk p-5 shadow-sm">
                <div class="text-sm font-semibold">Details</div>

                <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                    <div class="rounded-2xl border border-rk p-4">
                        <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Artikel</div>
                        <div class="mt-2 font-semibold">Einmalhandschuhe Nitril</div>
                        <div class="mt-1 text-rk-slate">Variante: Größe M</div>
                    </div>
                    <div class="rounded-2xl border border-rk p-4">
                        <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Menge</div>
                        <div class="mt-2 text-2xl font-semibold text-rk-charcoal">-8</div>
                        <div class="mt-1 text-rk-slate">Typ: Verbrauch</div>
                    </div>

                    <div class="sm:col-span-2 rounded-2xl border border-rk p-4">
                        <div class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Kommentar</div>
                        <div class="mt-2 text-rk-slate">Einsatz Materialverbrauch. (UI)</div>
                    </div>
                </div>
            </div>

            <div class="rounded-3xl bg-white border border-rk p-5 shadow-sm">
                <div class="text-sm font-semibold">Bestand Snapshot (UI)</div>
                <div class="mt-4 space-y-3 text-sm text-rk-slate">
                    <div class="flex items-center justify-between">
                        <span>Vorher</span>
                        <span class="font-semibold text-rk-charcoal">20</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span>Änderung</span>
                        <span class="font-semibold text-rk-charcoal">-8</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <span>Nachher</span>
                        <span class="font-semibold text-red-700">12</span>
                    </div>
                </div>

                <div class="mt-6 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
                    Hinweis: Unter Mindestbestand (UI).
                </div>
            </div>
        </div>
    </div>
</x-layouts.app>