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

@php
    /** @var \Illuminate\Pagination\LengthAwarePaginator|\App\Models\InventoryMovement[] $movements */
    $q = $q ?? request('q', '');
    $from = $from ?? request('from', '');
    $to = $to ?? request('to', '');
@endphp

<x-layouts.app title="Verbrauch" userRole="Ortstelle">
    <div class="flex flex-col gap-4">

        {{-- Header --}}
        <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3">
            <div>
                <div class="text-xl font-semibold">Verbrauch</div>
                <div class="mt-1 text-sm text-rk-slate">
                    Verbrauchsbuchungen für deine Ortstelle · Bestand wird reduziert.
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-2">
                {{-- Wenn du Export-Routen hast, tausche href entsprechend aus --}}
                <div class="flex items-center gap-2">
                    <a href="{{ route('consumption.export.csv', request()->query()) }}" class="btn-rk-soft">
                        Export CSV
                    </a>
                    <a href="{{ route('consumption.export.xlsx', request()->query()) }}" class="btn-rk-soft">
                        Export XLSX
                    </a>
                </div>
                @if (auth()->user()->isStationUser())
                    <a href="{{ route('consumption.create') }}" class="btn-rk-soft-green">
                        Verbrauch erfassen
                    </a>
                @endif
            </div>
        </div>

        {{-- Filter Bar --}}
        <form method="GET" action="{{ route('consumption.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 for="q"
                        class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Suche</label>
                    <input id="q" name="q" type="text" 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="Grund, Artikel, Variante…">
                </div>

                <div class="lg:col-span-3">
                    <label for="from"
                        class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Von</label>
                    <input id="from" 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-3">
                    <label for="to"
                        class="text-xs font-semibold text-rk-slate/80 uppercase tracking-wider">Bis</label>
                    <input id="to" 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 justify-end gap-2 pt-2">
                    <a href="{{ route('consumption.index') }}" class="btn-rk-soft">
                        Reset
                    </a>
                    <button type="submit"
                        class="rounded-2xl bg-rk-red px-4 py-2.5 text-sm font-semibold text-white hover:bg-rk-red-dark transition-rk">
                        Filtern
                    </button>
                </div>
            </div>
        </form>

        {{-- Table --}}
        <div class="rounded-3xl bg-white border border-rk shadow-sm overflow-hidden">
            <div class="px-5 py-4 flex items-center justify-between gap-3">
                <div>
                    <div class="text-sm font-semibold">Historie</div>
                    <div class="text-xs text-rk-slate">Verbrauch (type = out).</div>
                </div>
                <div class="text-xs text-rk-slate">
                    {{ $movements->total() }} Einträge
                </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">Variante</th>
                            <th class="py-3 px-5 text-left">Grund</th>
                            <th class="py-3 px-5 text-right">Menge</th>
                            @if (auth()->user()?->isDistrictUser())
                                <th class="py-3 px-5 text-left">Ortstelle</th>
                            @endif
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-[color:var(--rk-border)]">
                        @forelse ($movements as $m)
                            @php
                                $qty = (int) $m->quantity_delta; // bei out ist das meist negativ
                                $isOut = $m->type === 'out';
                                $displayQty = $qty; // falls bei dir out bereits negativ gespeichert ist
                                // Falls du out als POSITIV speicherst: dann hier: $displayQty = -abs($qty);
                            @endphp

                            <tr class="hover:bg-neutral-50">
                                <td class="py-4 px-5 text-rk-slate whitespace-nowrap">
                                    {{ optional($m->booked_at)->format('d.m.Y H:i') }}
                                </td>

                                <td class="py-4 px-5 font-medium">
                                    {{ $m->product?->name ?? '—' }}
                                </td>

                                <td class="py-4 px-5 text-rk-slate">
                                    {{ $m->variant?->name ?? '—' }}
                                </td>

                                <td class="py-4 px-5 text-rk-slate">
                                    {{ $m->reason ?? '—' }}
                                </td>

                                <td class="py-4 px-5 text-right font-semibold">
                                    {{ $displayQty }}
                                </td>

                                @if (auth()->user()?->isDistrictUser())
                                    <td class="py-4 px-5 text-rk-slate">
                                        {{ $m->station?->name ?? '—' }}
                                    </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ auth()->user()?->isDistrictUser() ? 6 : 5 }}"
                                    class="py-10 px-5 text-center text-rk-slate">
                                    Keine Buchungen gefunden.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

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