@php
    $statuses = [
        'alle' => 'Alle',
        'placed' => 'Aufgegeben',
        'processing' => 'In Bearbeitung',
        'ready' => 'Abholbereit',
        'received' => 'Erhalten',
    ];

    $priorities = [
        'alle' => 'Alle',
        'low' => 'Niedrig',
        'medium' => 'Mittel',
        'high' => 'Hoch',
    ];

    $urgencies = [
        'alle' => 'Alle',
        'normal' => 'Normal',
        'urgent' => 'Dringend',
        'immediate' => 'Sofort',
    ];
@endphp

<x-layouts.app title="Report · Bestellungen"
    userRole="{{ auth()->user()->isDistrictUser() ? 'Bezirksstelle' : 'Ortstelle' }}">
    <div class="flex flex-col gap-4">

        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Report: Bestellungen</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Treffer: <span class="font-semibold text-rk-charcoal">{{ $kpis['count'] ?? 0 }}</span>
                </div>
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('reports.index') }}" class="btn-rk-soft">
                    Zurück
                </a>

                <a href="{{ route('reports.orders.export.csv', request()->query()) }}" class="btn-rk-soft">
                    Export CSV
                </a>
            </div>
        </div>

        <form method="GET" action="{{ route('reports.orders') }}"
            class="rounded-3xl bg-white border border-rk p-4 shadow-sm">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-3 lg:items-end">
                <div class="lg:col-span-4">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Suche</label>
                    <input name="q" value="{{ $q }}"
                        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="ID, Kommentar…">
                </div>

                <div class="lg:col-span-2">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Status</label>
                    <select name="status" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        @foreach ($statuses as $k => $lbl)
                            <option value="{{ $k }}" @selected($status === $k)>{{ $lbl }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="lg:col-span-2">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Priorität</label>
                    <select name="priority" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        @foreach ($priorities as $k => $lbl)
                            <option value="{{ $k }}" @selected($priority === $k)>{{ $lbl }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="lg:col-span-2">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Dringlichkeit</label>
                    <select name="urgency" class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                        @foreach ($urgencies as $k => $lbl)
                            <option value="{{ $k }}" @selected($urgency === $k)>{{ $lbl }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="lg:col-span-1">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Von</label>
                    <input name="from" type="date" value="{{ $from }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                </div>

                <div class="lg:col-span-1">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Bis</label>
                    <input name="to" type="date" value="{{ $to }}"
                        class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm">
                </div>

                <div class="lg:col-span-12 flex gap-2 pt-2">
                    <button
                        class="rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark">
                        Filtern
                    </button>

                    <a href="{{ route('reports.orders') }}"
                        class="rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50">
                        Reset
                    </a>
                </div>
            </div>
        </form>

        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="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-5 text-left">ID</th>
                            <th class="py-3 px-5 text-left">Status</th>
                            <th class="py-3 px-5 text-left">Priorität</th>
                            <th class="py-3 px-5 text-left">Ortstelle</th>
                            <th class="py-3 px-5 text-left">Placed</th>
                            <th class="py-3 px-5 text-left">Erstellt von</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        @forelse($rows as $o)
                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-5 font-semibold">{{ $o->id }}</td>
                                <td class="py-4 px-5 text-rk-slate">{{ $o->status }}</td>
                                <td class="py-4 px-5 text-rk-slate">{{ $o->priority }} / {{ $o->urgency }}</td>
                                <td class="py-4 px-5 text-rk-slate">{{ $o->station?->name ?? '—' }}</td>
                                <td class="py-4 px-5 text-rk-slate">{{ optional($o->placed_at)->format('d.m.Y H:i') }}
                                </td>
                                <td class="py-4 px-5 text-rk-slate">{{ $o->createdBy?->email ?? '—' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="py-10 px-5 text-center text-rk-slate">Keine Daten.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="px-5 py-4 border-t border-rk bg-white">
                {{ $rows->links() }}
            </div>
        </div>

    </div>
</x-layouts.app>