@php
    $level = $level ?? request('level', 'alle');
@endphp

<x-layouts.app title="Warnungen · Bezirksstelle" userRole="Bezirksstelle">
    <div class="flex items-end justify-between gap-3">
        <div>
            <div class="text-xl font-semibold">Warnungen</div>
            <div class="mt-1 text-sm text-rk-slate">Unter Mindestbestand (Bezirk gesamt).</div>
        </div>

        <div class="flex gap-2">
            <a href="{{ route('district.inventory.warnings', ['level' => 'alle']) }}" class="btn-rk-soft">
                Alle
            </a>
            <a href="{{ route('district.inventory.warnings', ['level' => 'warn']) }}" class="btn-rk-soft-warning">
                Warnung
            </a>
            <a href="{{ route('district.inventory.warnings', ['level' => 'kritisch']) }}" class="btn-rk-soft-red">
                Kritisch
            </a>
        </div>
    </div>

    <div class="mt-4 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">Ortstelle</th>
                        <th class="py-3 px-5 text-left">Artikel</th>
                        <th class="py-3 px-5 text-left">Variante</th>
                        <th class="py-3 px-5 text-right">Ist</th>
                        <th class="py-3 px-5 text-right">Soll</th>
                        <th class="py-3 px-5 text-left">Level</th>
                        <th class="py-3 px-5 text-right">Aktion</th>
                    </tr>
                </thead>

                <tbody class="divide-y divide-[color:var(--rk-border)]">
                    @forelse($items as $it)
                        @php
                            $badge =
                                $it->level === 'kritisch'
                                    ? 'bg-red-50 text-red-700 border-red-200'
                                    : 'bg-amber-50 text-amber-700 border-amber-200';
                        @endphp
                        <tr class="hover:bg-neutral-50">
                            <td class="py-4 px-5">{{ $it->station?->name ?? '—' }}</td>
                            <td class="py-4 px-5 font-medium">{{ $it->product?->name ?? '—' }}</td>
                            <td class="py-4 px-5 text-rk-slate">{{ $it->variant?->name ?? '—' }}</td>
                            <td class="py-4 px-5 text-right font-semibold">{{ (int) $it->quantity }}</td>
                            <td class="py-4 px-5 text-right">{{ (int) $it->minimum_quantity }}</td>
                            <td class="py-4 px-5">
                                <span
                                    class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $badge }}">
                                    {{ $it->level === 'kritisch' ? 'Kritisch' : 'Warnung' }}
                                </span>
                            </td>
                            <td class="py-4 px-6 text-right">
                                <a href="{{ route('district.inventory.show', ['inventory' => $it->id]) }}"
                                    class="inline-flex items-center justify-center h-10 w-10 rounded-2xl border border-rk bg-white hover:bg-neutral-50 transition-rk"
                                    title="Öffnen" aria-label="Öffnen">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"
                                        class="text-rk-green">
                                        <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
                                        <circle cx="12" cy="12" r="3" />
                                    </svg>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-10 px-5 text-center text-rk-slate">Keine Warnungen.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</x-layouts.app>