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

@php
    $q = $q ?? request('q', '');
    $type = $type ?? request('type', 'alle');
    $counts = $counts ?? ['orders' => 0, 'inventory' => 0, 'movements' => 0, 'products' => 0, 'stations' => 0];

    $tabs = [
        'alle' => [
            'Alle',
            $counts['orders'] + $counts['inventory'] + $counts['movements'] + $counts['products'] + $counts['stations'],
        ],
        'orders' => ['Bestellungen', $counts['orders']],
        'inventory' => ['Lager', $counts['inventory']],
        'movements' => ['Buchungen', $counts['movements']],
        'products' => ['Artikel', $counts['products']],
        'stations' => ['Ortstellen', $counts['stations']],
    ];

    $tabClass = function (string $k) use ($type) {
        $active = $type === $k;
        return $active
            ? 'bg-rk-red text-white border-transparent'
            : 'bg-white border-rk text-rk-charcoal hover:bg-neutral-50';
    };
@endphp

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

        {{-- Header --}}
        <div class="flex flex-col gap-3">
            <div>
                <div class="text-xl font-semibold">Globale Suche</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Durchsucht Bestellungen, Lager, Buchungen, Artikel und Ortstellen – immer im richtigen Scope.
                </div>
            </div>

            <form method="GET" action="{{ route('search.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-8">
                        <label
                            class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Suchbegriff</label>
                        <input name="q" value="{{ $q }}"
                            class="mt-2 w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm outline-none focus:ring-2 ring-rk focus:border-transparent"
                            placeholder="z.B. Handschuhe, #1042, Graz, NaCl, Inventur…">
                    </div>

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

                    <div class="lg:col-span-1 flex gap-2">
                        <a href="{{ route('search.index') }}"
                            class="w-full rounded-2xl border border-rk bg-white px-4 py-3 text-sm font-semibold hover:bg-neutral-50 text-center">
                            Reset
                        </a>
                    </div>

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

                {{-- Tabs --}}
                <div class="mt-4 flex flex-wrap gap-2">
                    @foreach ($tabs as $k => $t)
                        <a href="{{ route('search.index', array_merge(request()->query(), ['type' => $k])) }}"
                            class="rounded-full px-3 py-1 text-xs font-semibold border {{ $tabClass($k) }}">
                            {{ $t[0] }}
                            <span class="ml-1 opacity-80">({{ (int) $t[1] }})</span>
                        </a>
                    @endforeach
                </div>
            </form>
        </div>

        @if ($q === '')
            <div class="rounded-3xl bg-white border border-rk p-6 shadow-sm text-rk-slate">
                Gib einen Suchbegriff ein, um Ergebnisse zu sehen.
            </div>
        @else
            {{-- RESULTS GRID --}}
            <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">

                {{-- ORDERS --}}
                @if ($type === 'alle' || $type === 'orders')
                    <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                        <div class="px-5 py-4 border-b border-rk flex items-center justify-between">
                            <div>
                                <div class="text-sm font-semibold">Bestellungen</div>
                                <div class="text-xs text-rk-slate">Treffer: {{ (int) ($counts['orders'] ?? 0) }}</div>
                            </div>
                            <a href="{{ route('orders.index', ['q' => $q]) }}"
                                class="text-sm text-rk-red font-semibold hover:underline">
                                Zur Liste →
                            </a>
                        </div>

                        <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">Ortstelle</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($orders 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->station?->name ?? '—' }}</td>
                                            <td class="py-4 px-5 text-rk-slate">{{ $o->status ?? '—' }}</td>
                                            <td class="py-4 px-5 text-right">
                                                <a href="{{ route('orders.show', $o) }}"
                                                    class="text-rk-red font-semibold hover:underline">Öffnen</a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="py-8 px-5 text-center text-rk-slate">Keine
                                                Treffer.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif

                {{-- INVENTORY --}}
                @if ($type === 'alle' || $type === 'inventory')
                    <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                        <div class="px-5 py-4 border-b border-rk">
                            <div class="text-sm font-semibold">Lager</div>
                            <div class="text-xs text-rk-slate">Treffer: {{ (int) ($counts['inventory'] ?? 0) }}</div>
                        </div>

                        <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-left">Ortstelle</th>
                                        <th class="py-3 px-5 text-right">Bestand</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-[color:var(--rk-border)]">
                                    @forelse($inventory as $i)
                                        <tr class="hover:bg-neutral-50">
                                            <td class="py-4 px-5 font-semibold">{{ $i->product?->name ?? '—' }}</td>
                                            <td class="py-4 px-5 text-rk-slate">{{ $i->variant?->name ?? '—' }}</td>
                                            <td class="py-4 px-5 text-rk-slate">{{ $i->station?->name ?? '—' }}</td>
                                            <td class="py-4 px-5 text-right font-semibold">
                                                {{ (int) ($i->quantity ?? 0) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="py-8 px-5 text-center text-rk-slate">Keine
                                                Treffer.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif

                {{-- MOVEMENTS --}}
                @if ($type === 'alle' || $type === 'movements')
                    <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                        <div class="px-5 py-4 border-b border-rk">
                            <div class="text-sm font-semibold">Buchungen</div>
                            <div class="text-xs text-rk-slate">Treffer: {{ (int) ($counts['movements'] ?? 0) }}</div>
                        </div>

                        <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">Zeitpunkt</th>
                                        <th class="py-3 px-5 text-left">Artikel</th>
                                        <th class="py-3 px-5 text-left">Ortstelle</th>
                                        <th class="py-3 px-5 text-right">Delta</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-[color:var(--rk-border)]">
                                    @forelse($movements as $m)
                                        @php
                                            $pill =
                                                (int) $m->quantity_delta >= 0
                                                    ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
                                                    : 'bg-red-50 text-red-700 border-red-200';
                                        @endphp
                                        <tr class="hover:bg-neutral-50">
                                            <td class="py-4 px-5 text-rk-slate whitespace-nowrap">
                                                {{ optional($m->booked_at ?? $m->created_at)->format('d.m.Y H:i') }}
                                            </td>
                                            <td class="py-4 px-5 font-semibold">
                                                {{ $m->product?->name ?? '—' }}
                                                <div class="text-xs text-rk-slate">{{ $m->variant?->name ?? '' }}</div>
                                            </td>
                                            <td class="py-4 px-5 text-rk-slate">{{ $m->station?->name ?? '—' }}</td>
                                            <td class="py-4 px-5 text-right">
                                                <span
                                                    class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ $pill }}">
                                                    {{ (int) $m->quantity_delta > 0 ? '+' : '' }}{{ (int) $m->quantity_delta }}
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="4" class="py-8 px-5 text-center text-rk-slate">Keine
                                                Treffer.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif

                {{-- PRODUCTS --}}
                @if ($type === 'alle' || $type === 'products')
                    <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                        <div class="px-5 py-4 border-b border-rk">
                            <div class="text-sm font-semibold">Artikel</div>
                            <div class="text-xs text-rk-slate">Treffer: {{ (int) ($counts['products'] ?? 0) }}</div>
                        </div>

                        <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">Name</th>
                                        <th class="py-3 px-5 text-left">Kategorie</th>
                                        <th class="py-3 px-5 text-right">Varianten</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-[color:var(--rk-border)]">
                                    @forelse($products as $p)
                                        <tr class="hover:bg-neutral-50">
                                            <td class="py-4 px-5 font-semibold">{{ $p->name }}</td>
                                            <td class="py-4 px-5 text-rk-slate">{{ $p->category ?? '—' }}</td>
                                            <td class="py-4 px-5 text-right font-semibold">
                                                {{ (int) ($p->variants_count ?? 0) }}</td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="3" class="py-8 px-5 text-center text-rk-slate">Keine
                                                Treffer.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif

                {{-- STATIONS --}}
                @if ($type === 'alle' || $type === 'stations')
                    <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
                        <div class="px-5 py-4 border-b border-rk">
                            <div class="text-sm font-semibold">Ortstellen</div>
                            <div class="text-xs text-rk-slate">Treffer: {{ (int) ($counts['stations'] ?? 0) }}</div>
                        </div>

                        <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">Name</th>
                                        <th class="py-3 px-5 text-right">Status</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-[color:var(--rk-border)]">
                                    @forelse($stations as $s)
                                        <tr class="hover:bg-neutral-50">
                                            <td class="py-4 px-5 font-semibold">{{ $s->name }}</td>
                                            <td class="py-4 px-5 text-right">
                                                <span
                                                    class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold border {{ (int) ($s->active ?? 1) === 1 ? 'bg-emerald-50 text-emerald-700 border-emerald-200' : 'bg-neutral-100 text-rk-slate border-rk' }}">
                                                    {{ (int) ($s->active ?? 1) === 1 ? 'aktiv' : 'deaktiviert' }}
                                                </span>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="2" class="py-8 px-5 text-center text-rk-slate">Keine
                                                Treffer.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif

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