@php
    $slug = $slug ?? 'report';
    $titles = [
        'lagerbestand' => 'Lagerbestand',
        'mindestbestand-warnungen' => 'Mindestbestand-Warnungen',
        'bestellungen-status' => 'Bestellungen nach Status',
        'verbrauch-zeitreihe' => 'Verbrauch (Zeitreihe)',
        'audit-events' => 'Audit-Events',
    ];
    $title = $titles[$slug] ?? $slug;
@endphp

<x-layouts.app :title="'Report · ' . $title" userRole="Bezirksstelle">
    <div class="flex flex-col gap-4">

        <div class="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">{{ $title }}</div>
                <div class="mt-1 text-sm text-rk-slate">Parameter, Vorschau, Export (UI).</div>
            </div>

            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('reports.index') }}" class="btn-rk-soft">
                    Zurück
                </a>
                <button class="btn-rk-soft">
                    CSV
                </button>
                <button class="btn-rk-soft">
                    XLSX
                </button>
                <button class="rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark">
                    Export starten
                </button>
            </div>
        </div>

        <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
            {{-- Params --}}
            <div class="rounded-3xl bg-white border border-rk p-5 shadow-sm">
                <div class="text-sm font-semibold">Parameter</div>

                <div class="mt-4 space-y-4">
                    <div>
                        <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Zeitraum</label>
                        <select class="mt-2 w-full rounded-2xl border border-rk px-4 py-3 text-sm">
                            <option>Heute</option>
                            <option>Letzte 7 Tage</option>
                            <option selected>Letzte 30 Tage</option>
                            <option>Benutzerdefiniert</option>
                        </select>
                    </div>

                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Von</label>
                            <input type="date" class="mt-2 w-full rounded-2xl border border-rk px-4 py-3 text-sm">
                        </div>
                        <div>
                            <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Bis</label>
                            <input type="date" class="mt-2 w-full rounded-2xl border border-rk px-4 py-3 text-sm">
                        </div>
                    </div>

                    <div>
                        <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Ortstelle</label>
                        <select class="mt-2 w-full rounded-2xl border border-rk px-4 py-3 text-sm">
                            <option>Alle</option>
                            <option>Graz-Umgebung</option>
                            <option>Leibnitz</option>
                        </select>
                    </div>

                    <div>
                        <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Kategorie</label>
                        <select class="mt-2 w-full rounded-2xl border border-rk px-4 py-3 text-sm">
                            <option>Alle</option>
                            <option>Schutzausrüstung</option>
                            <option>Medizin</option>
                        </select>
                    </div>
                </div>

                <div class="mt-6 rounded-2xl border border-rk bg-neutral-50 p-4 text-sm text-rk-slate">
                    Später: „Saved Parameters“, Zeitplan, E-Mail Versand.
                </div>
            </div>

            {{-- Preview --}}
            <div class="xl:col-span-2 rounded-3xl bg-white border border-rk p-5 shadow-sm">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <div class="text-sm font-semibold">Vorschau (UI)</div>
                        <div class="mt-1 text-xs text-rk-slate">Tabellen/Charts abhängig vom Report.</div>
                    </div>
                    <div class="text-xs text-rk-slate">Datensatz: 1.234 Zeilen (UI)</div>
                </div>

                <div class="mt-4 overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="text-xs text-rk-slate/80 uppercase tracking-wider bg-neutral-50">
                            <tr class="border-t border-b border-rk">
                                <th class="py-3 px-4 text-left">Artikel</th>
                                <th class="py-3 px-4 text-left">Variante</th>
                                <th class="py-3 px-4 text-right">Ist</th>
                                <th class="py-3 px-4 text-right">Mindest</th>
                                <th class="py-3 px-4 text-left">Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-[color:var(--rk-border)]">
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-4 font-medium">Einmalhandschuhe Nitril</td>
                                <td class="py-4 px-4 text-rk-slate">Größe M</td>
                                <td class="py-4 px-4 text-right font-semibold">12</td>
                                <td class="py-4 px-4 text-right text-rk-slate">40</td>
                                <td class="py-4 px-4">
                                    <span
                                        class="inline-flex items-center rounded-full bg-red-50 px-3 py-1 text-xs font-semibold text-red-700 border border-red-200">Kritisch</span>
                                </td>
                            </tr>
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-4 font-medium">Infusion NaCl 0,9%</td>
                                <td class="py-4 px-4 text-rk-slate">500 ml</td>
                                <td class="py-4 px-4 text-right font-semibold">18</td>
                                <td class="py-4 px-4 text-right text-rk-slate">20</td>
                                <td class="py-4 px-4">
                                    <span
                                        class="inline-flex items-center rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700 border border-amber-200">Warnung</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                {{-- Chart placeholder --}}
                <div class="mt-6 rounded-3xl border border-rk p-6 bg-neutral-50">
                    <div class="text-sm font-semibold">Chart (UI Placeholder)</div>
                    <div class="mt-2 text-sm text-rk-slate">Später: Trends, Verbrauch, Status-Verteilung.</div>
                    <div class="mt-4 h-40 rounded-2xl bg-white border border-rk"></div>
                </div>
            </div>
        </div>
    </div>
</x-layouts.app>