@extends('layouts.app')

@section('title', 'Stock')

@section('content')
    @php
        $money = fn ($v) => \App\Support\Fmt::money($v);
        $plain = fn ($v) => rtrim(rtrim(number_format((float) $v, 2), '0'), '.');
        $statusClasses = fn (string $s) => match ($s) {
            'In Stock' => 'bg-emerald-500/15 text-emerald-700',
            'Low Stock' => 'bg-amber-500/15 text-amber-700',
            default => 'bg-rose-500/15 text-rose-700',
        };
    @endphp

    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">Stock</h1>
                <p class="text-xs text-muted-foreground">Inventory items, quantities and reorder tracking</p>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('inventory.stock.csv', $filters) }}"
                   class="rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium hover:bg-accent">CSV</a>
                <button type="button" onclick="document.getElementById('stock-new').open = true"
                        class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                    Add Item
                </button>
            </div>
        </div>

        @include('partials.flashes')

        <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
            @foreach ([
                ['label' => 'Total Items', 'value' => $totalItems],
                ['label' => 'Total Value', 'value' => $money($totalValue)],
                ['label' => 'Low Stock Alerts', 'value' => $lowCount],
                ['label' => 'Out of Stock', 'value' => $outCount],
            ] as $stat)
                <div class="rounded-xl border border-border bg-card p-4">
                    <div class="flex flex-col">
                        <span class="text-lg font-semibold leading-tight tabular-nums">{{ $stat['value'] }}</span>
                        <span class="text-xs text-muted-foreground">{{ $stat['label'] }}</span>
                    </div>
                </div>
            @endforeach
        </div>

        <form method="get" action="{{ route('inventory.stock') }}"
              class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Search</label>
                <input type="search" name="q" value="{{ $filters['q'] }}" placeholder="Search items..."
                       class="h-9 w-64 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Warehouse</label>
                <select name="warehouse" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <option value="">All Warehouses</option>
                    @foreach ($warehouses as $w)
                        <option value="{{ $w->id }}" @selected((string) $filters['warehouse'] === (string) $w->id)>{{ $w->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Department</label>
                <select name="department" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <option value="">All Departments</option>
                    @foreach ($departments as $d)
                        <option value="{{ $d->id }}" @selected((string) $filters['department'] === (string) $d->id)>{{ $d->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Stock Level</label>
                <select name="level" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <option value="">All Stock Levels</option>
                    <option value="Low" @selected($filters['level'] === 'Low')>Low Stock</option>
                    <option value="Out" @selected($filters['level'] === 'Out')>Out of Stock</option>
                </select>
            </div>
            <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Filter</button>
            <a href="{{ route('inventory.stock') }}" class="h-9 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Clear</a>
        </form>

        <div class="rounded-xl border border-border bg-card">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            <th class="px-3 py-2 font-medium">Item</th>
                            <th class="px-3 py-2 font-medium">Category</th>
                            <th class="px-3 py-2 font-medium">Store</th>
                            <th class="px-3 py-2 font-medium">Department</th>
                            <th class="px-3 py-2 text-right font-medium">On Hand</th>
                            <th class="px-3 py-2 text-right font-medium">Reorder</th>
                            <th class="px-3 py-2 text-right font-medium">Unit Cost</th>
                            <th class="px-3 py-2 text-right font-medium">Value</th>
                            <th class="px-3 py-2 font-medium">Status</th>
                            <th class="px-3 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $item)
                            <tr class="border-b last:border-0 hover:bg-accent/40">
                                <td class="px-3 py-2">
                                    <div class="flex flex-col">
                                        <span class="font-medium">{{ $item->name }}</span>
                                        <span class="font-mono text-xs text-muted-foreground">{{ $item->sku }}</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2 text-muted-foreground">{{ $item->category ?: '—' }}</td>
                                <td class="px-3 py-2 text-muted-foreground">{{ $item->warehouse?->name ?? '—' }}</td>
                                <td class="px-3 py-2 text-muted-foreground">{{ $item->department?->name ?? '—' }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ $plain($item->current_stock) }} {{ $item->unit }}</td>
                                <td class="px-3 py-2 text-right tabular-nums text-muted-foreground">{{ $plain($item->reorder_level) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ $money($item->unit_cost) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ $money($item->stockValue()) }}</td>
                                <td class="px-3 py-2">
                                    <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $statusClasses($item->status()) }}">{{ $item->status() }}</span>
                                </td>
                                <td class="px-3 py-2">
                                    <div class="flex items-center justify-end gap-1">
                                        <button type="button" onclick="document.getElementById('item-{{ $item->id }}').classList.toggle('hidden')"
                                                class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Edit</button>
                                        <form method="post" action="{{ route('inventory.stock.destroy', $item) }}"
                                              onsubmit="return confirm('Delete Stock Item {{ $item->name }}?')">
                                            @csrf @method('DELETE')
                                            <button class="rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Delete</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>

                            <tr class="hidden" id="item-{{ $item->id }}">
                                <td colspan="10" class="bg-muted/30 px-3 py-4">
                                    @include('inventory.partials.item-form', [
                                        'action' => route('inventory.stock.update', $item),
                                        'method' => 'PUT',
                                        'prefix' => 'item-'.$item->id,
                                        'row' => $item,
                                        'warehouses' => $warehouses,
                                        'departments' => $departments,
                                    ])
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="10" class="px-3 py-10 text-center text-sm text-muted-foreground">No stock items match your filters.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="border-t px-4 py-2 text-xs text-muted-foreground">
                {{ $rows->count() }} of {{ $totalItems }} items &middot; {{ $money($shownValue) }} shown value
            </div>
        </div>

        <details id="stock-new" class="rounded-xl border border-border bg-card p-4">
            <summary class="cursor-pointer text-sm font-semibold">Add new stock item</summary>
            <div class="mt-3">
                @include('inventory.partials.item-form', [
                    'action' => route('inventory.stock.store'),
                    'method' => 'POST',
                    'prefix' => 'item-new',
                    'row' => null,
                    'warehouses' => $warehouses,
                    'departments' => $departments,
                ])
            </div>
        </details>
    </div>
@endsection