{{-- resources/views/ui/inventory/index.blade.php --}}

@php
    $q = $q ?? request('q', '');
    $status = $status ?? request('status', 'alle');
    $category = $category ?? request('category', 'alle');
    $categories = $categories ?? collect();

    $statusLabels = [
        'alle' => 'Alle',
        'ok' => 'OK',
        'warn' => 'Warnung',
        'kritisch' => 'Kritisch',
    ];

    $pill = [
        'ok' => 'bg-emerald-50 text-emerald-700 border-emerald-200',
        'warn' => 'bg-amber-50 text-amber-700 border-amber-200',
        'kritisch' => 'bg-red-50 text-red-700 border-red-200',
    ];

    // kleine Helper
    $activeFilters = $q !== '' || $status !== 'alle' || $category !== 'alle';
@endphp

<x-layouts.app title="Lager (Ortstelle)" userRole="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 class="min-w-0">
                <div class="text-xl font-semibold">Lager</div>
                <div class="mt-1 text-sm text-rk-slate">Eigener Bestand inkl. Mindestbestand & Warnstufen.</div>

                @if ($activeFilters)
                    <div class="mt-2 flex flex-wrap gap-2">
                        @if ($q !== '')
                            <span
                                class="inline-flex items-center gap-2 rounded-full border border-rk bg-white px-3 py-1 text-xs text-rk-slate">
                                Suche: <span class="font-semibold text-rk-charcoal">{{ $q }}</span>
                            </span>
                        @endif

                        @if ($status !== 'alle')
                            <span
                                class="inline-flex items-center gap-2 rounded-full border border-rk bg-white px-3 py-1 text-xs text-rk-slate">
                                Status: <span
                                    class="font-semibold text-rk-charcoal">{{ $statusLabels[$status] ?? $status }}</span>
                            </span>
                        @endif

                        @if ($category !== 'alle')
                            <span
                                class="inline-flex items-center gap-2 rounded-full border border-rk bg-white px-3 py-1 text-xs text-rk-slate">
                                Kategorie: <span class="font-semibold text-rk-charcoal">{{ $category }}</span>
                            </span>
                        @endif

                        <a href="{{ route('inventory.index') }}"
                            class="inline-flex items-center rounded-full border border-rk bg-white px-3 py-1 text-xs font-semibold text-rk-red hover:bg-neutral-50 transition-rk">
                            Filter zurücksetzen
                        </a>
                    </div>
                @endif
            </div>

            <div class="flex items-center gap-2">
                <a href="{{ route('inventory.warnings') }}" class="btn-rk-soft-warning">
                    Warnungen
                </a>
                <a href="{{ route('inventory.index') }}" class="btn-rk-soft">
                    Aktualisieren
                </a>
            </div>
        </div>

        <form method="GET" action="{{ route('inventory.index') }}"
            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-6">
                    <label class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Suche</label>
                    <div class="mt-2 relative">
                        <input name="q" value="{{ $q }}"
                            class="w-full rounded-2xl border border-rk bg-white pl-11 pr-4 py-3 text-sm outline-none focus:ring-2 ring-rk focus:border-transparent"
                            placeholder="Artikel / Variante…" autocomplete="off">
                        <div
                            class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-rk-slate/70">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" aria-hidden="true">
                                <circle cx="11" cy="11" r="8" />
                                <path d="m21 21-4.3-4.3" />
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="lg:col-span-3">
                    <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 ($statusLabels as $k => $lbl)
                            <option value="{{ $k }}" @selected($status === $k)>{{ $lbl }}
                            </option>
                        @endforeach
                    </select>
                </div>

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

                <div class="lg:col-span-12 flex flex-col sm:flex-row gap-2">
                    <a href="{{ route('inventory.index') }}"
                        class="sm:w-auto w-full rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50 transition-rk hover:shadow-soft text-center">
                        Reset
                    </a>
                    <button
                        class="sm:w-auto w-full rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark transition-rk hover:shadow-soft">
                        Filtern
                    </button>

                    <div class="sm:ml-auto text-xs text-rk-slate flex items-center justify-center sm:justify-end">
                        {{ $items->count() }} Positionen
                    </div>
                </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">Artikel</th>
                            <th class="py-3 px-5 text-left">Variante</th>
                            <th class="py-3 px-5 text-right">Bestand</th>
                            <th class="py-3 px-5 text-right">Mindest</th>
                            <th class="py-3 px-5 text-left">Status</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
                                $lvl = $it->level ?? 'ok';
                                $pillClass = $pill[$lvl] ?? 'bg-neutral-100 text-rk-slate border-rk';
                                $qty = (int) $it->quantity;
                            @endphp

                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-5 font-medium">
                                    <div class="flex items-center gap-3 min-w-0">
                                        <span class="truncate">{{ $it->product?->name ?? '—' }}</span>
                                    </div>
                                </td>

                                <td class="py-4 px-5 text-rk-slate">
                                    <span class="truncate block max-w-[24rem]">{{ $it->variant?->name ?? '—' }}</span>
                                </td>

                                <td
                                    class="py-4 px-5 text-right font-semibold {{ $qty <= 0 ? 'text-red-700' : 'text-rk-charcoal' }}">
                                    {{ $qty }}
                                </td>

                                <td class="py-4 px-5 text-right text-rk-slate">
                                    {{ (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 {{ $pillClass }}">
                                        {{ $statusLabels[$lvl] ?? $lvl }}
                                    </span>
                                </td>

                                <td class="py-4 px-5 text-right">
                                    <a href="{{ route('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 hover:shadow-soft"
                                        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="6" class="py-12 px-5">
                                    <div class="text-center">
                                        <div class="text-sm font-semibold text-rk-charcoal">Keine Lagerpositionen</div>
                                        <div class="mt-1 text-sm text-rk-slate">Passe die Filter an oder lege
                                            Positionen an.</div>
                                        <div class="mt-4">
                                            <a href="{{ route('inventory.index') }}"
                                                class="inline-flex items-center rounded-2xl border border-rk bg-white px-4 py-2.5 text-sm font-semibold hover:bg-neutral-50 transition-rk hover:shadow-soft">
                                                Reset
                                            </a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

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