@extends('layouts.epelcon')
@section('title', 'Kitchen Stock')

@section('content')
<div x-data="{ add: false, edit: null }">
    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
        <div>
            <h1 class="text-xl font-extrabold text-slate-900 lg:text-2xl">Kitchen stock &amp; portions</h1>
            <p class="text-sm text-slate-500">Fridge, freezer, pots, store and prepped portions — confirm availability &amp; reorder in time.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('epelcon.kitchenstock.shift') }}" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">Shift handover</a>
            <a href="{{ route('epelcon.kitchenstock.logs') }}" class="rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-slate-700 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50">History</a>
            <button @click="add = true" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-bold text-white shadow-lg shadow-indigo-600/25 hover:bg-indigo-700">+ Item</button>
        </div>
    </div>

    <div class="mb-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Items</p><p class="mt-1 text-2xl font-extrabold text-slate-900">{{ $summary['items'] }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Low stock</p><p class="mt-1 text-2xl font-extrabold text-amber-600">{{ $summary['low'] }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Portions ready</p><p class="mt-1 text-2xl font-extrabold text-emerald-600">{{ $summary['portions_ready'] + 0 }}</p></div>
        <div class="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-slate-200"><p class="text-xs font-bold uppercase text-slate-400">Out of stock</p><p class="mt-1 text-2xl font-extrabold text-rose-600">{{ $summary['out'] }}</p></div>
    </div>

    <form method="GET" class="mb-4 flex flex-wrap gap-2">
        <input name="q" value="{{ request('q') }}" placeholder="Search item…" class="w-full rounded-xl border-0 bg-white px-4 py-2.5 text-sm shadow-sm ring-1 ring-slate-200 sm:w-64">
        <div class="no-scrollbar flex gap-2 overflow-x-auto">
            <a href="{{ route('epelcon.kitchenstock.index', array_filter(['q' => request('q')])) }}"
               class="shrink-0 rounded-full px-4 py-2 text-xs font-bold {{ request('location') === null ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200' }}">All</a>
            @foreach ($locations as $loc => $label)
                <a href="{{ route('epelcon.kitchenstock.index', array_filter(['q' => request('q'), 'location' => $loc])) }}"
                   class="shrink-0 rounded-full px-4 py-2 text-xs font-bold {{ request('location') === $loc ? 'bg-slate-900 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200' }}">{{ $label }}</a>
            @endforeach
        </div>
    </form>

    @forelse ($grouped as $location => $items)
        <div class="mb-5">
            <h2 class="mb-2 flex items-center gap-2 text-sm font-extrabold uppercase tracking-wide text-slate-500">
                {{ $locations[$location] ?? ucfirst($location) }}
                <span class="rounded-full bg-slate-200 px-2 py-0.5 text-[10px] text-slate-600">{{ $items->count() }}</span>
            </h2>
            <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
                <table class="w-full min-w-[720px] text-sm">
                    <thead><tr class="border-b border-slate-100 bg-slate-50 text-left text-xs font-bold uppercase text-slate-400">
                        <th class="px-4 py-3">Item</th><th class="px-4 py-3">Level</th><th class="px-4 py-3 text-right">On hand</th><th class="px-4 py-3 text-right">Par</th><th class="px-4 py-3 text-center">Quick adjust</th><th class="px-4 py-3"></th>
                    </tr></thead>
                    <tbody class="divide-y divide-slate-100">
                    @foreach ($items as $item)
                        @php
                            $out = (float) $item->quantity <= 0;
                            $low = $item->isLow();
                            $par = (float) $item->par_level;
                            $pct = $par > 0 ? min(100, ((float) $item->quantity / $par) * 100) : ((float) $item->quantity > 0 ? 100 : 0);
                            $bar = $out ? 'bg-rose-500' : ($low ? 'bg-amber-500' : 'bg-emerald-500');
                        @endphp
                        <tr class="{{ $out ? 'bg-rose-50/60' : ($low ? 'bg-amber-50/60' : '') }} hover:bg-slate-50">
                            <td class="px-4 py-3">
                                <p class="font-bold text-slate-800">{{ $item->name }}</p>
                                <p class="text-[11px] text-slate-400">{{ $item->category ?? '—' }}@if ($item->menuItem) · dish: {{ $item->menuItem->name }}@endif</p>
                            </td>
                            <td class="px-4 py-3">
                                <div class="h-2 w-28 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full {{ $bar }}" style="width: {{ $pct }}%"></div></div>
                                @if ($out)<span class="mt-1 inline-block rounded-full bg-rose-100 px-2 py-0.5 text-[10px] font-bold text-rose-700">Out of stock</span>
                                @elseif ($low)<span class="mt-1 inline-block rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-bold text-amber-700">Reorder soon</span>@endif
                            </td>
                            <td class="px-4 py-3 text-right font-extrabold {{ $out ? 'text-rose-600' : ($low ? 'text-amber-600' : 'text-slate-900') }}">{{ $item->quantity + 0 }} <span class="text-xs font-medium text-slate-400">{{ $item->unit }}</span></td>
                            <td class="px-4 py-3 text-right text-slate-500">{{ $item->par_level + 0 }}</td>
                            <td class="px-4 py-3">
                                <div class="flex items-center justify-center gap-1.5">
                                    <form method="POST" action="{{ route('epelcon.kitchenstock.adjust', $item) }}">@csrf
                                        <input type="hidden" name="change_type" value="deduct"><input type="hidden" name="quantity" value="1"><input type="hidden" name="reason" value="Quick use">
                                        <button class="flex h-9 w-9 items-center justify-center rounded-lg bg-rose-50 text-lg font-black text-rose-600 hover:bg-rose-100" title="Use 1">&minus;</button>
                                    </form>
                                    <form method="POST" action="{{ route('epelcon.kitchenstock.adjust', $item) }}">@csrf
                                        <input type="hidden" name="change_type" value="add"><input type="hidden" name="quantity" value="1"><input type="hidden" name="reason" value="Quick add">
                                        <button class="flex h-9 w-9 items-center justify-center rounded-lg bg-emerald-50 text-lg font-black text-emerald-600 hover:bg-emerald-100" title="Add 1">+</button>
                                    </form>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-right">
                                <button @click='edit = {{ \Illuminate\Support\Js::from($item->only(["id","name","category","location","unit","par_level","menu_item_id","notes"])) }}' class="rounded-lg bg-indigo-50 px-2.5 py-1.5 text-[11px] font-bold text-indigo-600 hover:bg-indigo-100">Edit</button>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @empty
        <div class="rounded-2xl bg-white p-10 text-center text-slate-400 shadow-sm ring-1 ring-slate-200">No kitchen stock items yet. Add your first item to get started.</div>
    @endforelse

    {{-- Add item modal --}}
    <div x-cloak x-show="add" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="add = false"></div>
        <div x-show="add" x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">New kitchen stock item</h2>
            <form method="POST" action="{{ route('epelcon.kitchenstock.store') }}" class="grid grid-cols-2 gap-4">@csrf
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span><input name="name" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Category</span>
                    <select name="category" class="w-full rounded-xl border-slate-200 text-sm"><option value="">—</option>
                        @foreach ($categories as $cat)<option value="{{ $cat }}">{{ $cat }}</option>@endforeach
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Location</span>
                    <select name="location" class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach ($locations as $loc => $label)<option value="{{ $loc }}">{{ $label }}</option>@endforeach
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Unit</span>
                    <select name="unit" class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach ($units as $u)<option value="{{ $u }}">{{ $u }}</option>@endforeach
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Opening qty</span><input type="number" step="0.01" name="quantity" value="0" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Par level (reorder at)</span><input type="number" step="0.01" name="par_level" value="0" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Linked dish (optional)</span>
                    <select name="menu_item_id" class="w-full rounded-xl border-slate-200 text-sm"><option value="">—</option>
                        @foreach ($menuItems as $mi)<option value="{{ $mi->id }}">{{ $mi->name }}</option>@endforeach
                    </select></label>
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Notes (optional)</span><input name="notes" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <div class="col-span-2 flex justify-end gap-2"><button type="button" @click="add = false" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Add item</button></div>
            </form>
        </div>
    </div>

    {{-- Edit item modal --}}
    <div x-cloak x-show="edit" class="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
        <div class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm" @click="edit = null"></div>
        <div x-show="edit" x-transition class="relative max-h-[92vh] w-full max-w-lg overflow-y-auto rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-4 text-lg font-extrabold">Edit item</h2>
            <form method="POST" :action="'{{ url('epelcon/kitchen-stock') }}/' + edit?.id + '/update'" class="grid grid-cols-2 gap-4">@csrf
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Name</span><input name="name" :value="edit?.name" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Category</span>
                    <select name="category" class="w-full rounded-xl border-slate-200 text-sm" x-init="edit && ($el.value = edit.category ?? '')"><option value="">—</option>
                        @foreach ($categories as $cat)<option value="{{ $cat }}">{{ $cat }}</option>@endforeach
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Location</span>
                    <select name="location" class="w-full rounded-xl border-slate-200 text-sm" x-init="edit && ($el.value = edit.location)">
                        @foreach ($locations as $loc => $label)<option value="{{ $loc }}">{{ $label }}</option>@endforeach
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Unit</span>
                    <select name="unit" class="w-full rounded-xl border-slate-200 text-sm" x-init="edit && ($el.value = edit.unit)">
                        @foreach ($units as $u)<option value="{{ $u }}">{{ $u }}</option>@endforeach
                    </select></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Par level</span><input type="number" step="0.01" name="par_level" :value="edit?.par_level" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Linked dish (optional)</span>
                    <select name="menu_item_id" class="w-full rounded-xl border-slate-200 text-sm" x-init="edit && ($el.value = edit.menu_item_id ?? '')"><option value="">—</option>
                        @foreach ($menuItems as $mi)<option value="{{ $mi->id }}">{{ $mi->name }}</option>@endforeach
                    </select></label>
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Notes (optional)</span><input name="notes" :value="edit?.notes" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <div class="col-span-2 flex justify-end gap-2"><button type="button" @click="edit = null" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-bold text-white">Save</button></div>
            </form>
        </div>
    </div>
</div>
@endsection
