@extends('layouts.epelcon')
@section('title', 'Inventory')

@section('content')
<div x-data="{ add: false, move: null, 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">Inventory & stores</h1>
            <p class="text-sm text-slate-500">Stock across main store, kitchen, bar and housekeeping.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('epelcon.inventory.movements') }}" 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">Movements</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">Stock value</p><p class="mt-1 text-xl font-extrabold text-emerald-600">@money($summary['value'])</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">Expiring ≤30d</p><p class="mt-1 text-2xl font-extrabold text-rose-600">{{ $summary['expiring'] }}</p></div>
    </div>

    <form method="GET" class="mb-4 flex flex-wrap gap-2">
        <input name="q" value="{{ request('q') }}" placeholder="Search name or SKU…" 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">
        <select name="location" onchange="this.form.submit()" class="rounded-xl border-0 bg-white py-2.5 text-sm shadow-sm ring-1 ring-slate-200">
            <option value="">All locations</option>
            @foreach (['main_store' => 'Main store', 'kitchen' => 'Kitchen', 'bar' => 'Bar', 'housekeeping' => 'Housekeeping'] as $loc => $label)
                <option value="{{ $loc }}" @selected(request('location') === $loc)>{{ $label }}</option>
            @endforeach
        </select>
        <a href="{{ route('epelcon.inventory.index', ['filter' => 'low']) }}" class="rounded-xl px-4 py-2.5 text-sm font-bold {{ request('filter') === 'low' ? 'bg-amber-500 text-white' : 'bg-white text-amber-600 ring-1 ring-slate-200' }}">⚠ Low stock only</a>
    </form>

    <div class="overflow-x-auto rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
        <table class="w-full min-w-[760px] 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">Location</th><th class="px-4 py-3 text-right">Qty</th><th class="px-4 py-3 text-right">Reorder at</th><th class="px-4 py-3 text-right">Unit cost</th><th class="px-4 py-3">Supplier</th><th class="px-4 py-3"></th>
            </tr></thead>
            <tbody class="divide-y divide-slate-100">
            @forelse ($items as $item)
                <tr class="{{ $item->isLow() ? '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="font-mono text-[11px] text-slate-400">{{ $item->sku }} · {{ $item->category }}</p></td>
                    <td class="px-4 py-3 capitalize text-slate-600">{{ str_replace('_', ' ', $item->location) }}</td>
                    <td class="px-4 py-3 text-right font-extrabold {{ $item->isLow() ? 'text-amber-600' : 'text-slate-900' }}">{{ $item->quantity + 0 }} {{ $item->unit }}</td>
                    <td class="px-4 py-3 text-right text-slate-500">{{ $item->reorder_level + 0 }}</td>
                    <td class="px-4 py-3 text-right text-slate-600">@money($item->cost_price)</td>
                    <td class="px-4 py-3 text-slate-500">{{ $item->supplier->name ?? '—' }}</td>
                    <td class="px-4 py-3">
                        <div class="flex justify-end gap-1.5">
                            <button @click='move = {{ json_encode($item->only(['id','name','unit','quantity','location'])) }}' class="rounded-lg bg-emerald-50 px-2.5 py-1.5 text-[11px] font-bold text-emerald-700 hover:bg-emerald-100">± Stock</button>
                            <button @click='edit = {{ json_encode($item->only(['id','name','category','unit','reorder_level','cost_price','selling_price','supplier_id','location'])) }}' 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>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="px-4 py-10 text-center text-slate-400">No inventory items found.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-5">{{ $items->links() }}</div>

    {{-- 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 inventory item</h2>
            <form method="POST" action="{{ route('epelcon.inventory.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><input name="category" list="inv-cats" class="w-full rounded-xl border-slate-200 text-sm">
                    <datalist id="inv-cats"><option>Food</option><option>Beverage</option><option>Housekeeping</option><option>Utilities</option><option>Restaurant</option></datalist></label>
                <label><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Unit</span><input name="unit" value="pcs" 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">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">Reorder level</span><input type="number" step="0.01" name="reorder_level" 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">Cost price ({{ $CUR }})</span><input type="number" step="0.01" name="cost_price" 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">Selling price</span><input type="number" step="0.01" name="selling_price" 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">Location</span>
                    <select name="location" class="w-full rounded-xl border-slate-200 text-sm">
                        @foreach (['main_store' => 'Main store', 'kitchen' => 'Kitchen', 'bar' => 'Bar', 'housekeeping' => 'Housekeeping'] 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">Supplier</span>
                    <select name="supplier_id" class="w-full rounded-xl border-slate-200 text-sm"><option value="">—</option>
                        @foreach ($suppliers as $supplier)<option value="{{ $supplier->id }}">{{ $supplier->name }}</option>@endforeach
                    </select></label>
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Expiry date (optional)</span><input type="date" name="expiry_date" 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>

    {{-- Stock movement modal --}}
    <div x-cloak x-show="move" 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="move = null"></div>
        <div x-show="move" x-transition class="relative w-full max-w-md rounded-t-3xl bg-white p-6 shadow-2xl sm:rounded-3xl">
            <h2 class="mb-1 text-lg font-extrabold">Stock movement</h2>
            <p class="mb-4 text-sm text-slate-500"><span x-text="move?.name"></span> — current: <span class="font-bold" x-text="(move?.quantity ?? 0) + ' ' + move?.unit"></span></p>
            <form method="POST" :action="'{{ url('epelcon/inventory') }}/' + move?.id + '/movement'" class="space-y-4">@csrf
                <div>
                    <span class="mb-1 block text-xs font-bold uppercase text-slate-500">Type</span>
                    <div class="grid grid-cols-4 gap-2">
                        @foreach (['in' => 'Stock in', 'out' => 'Stock out', 'adjustment' => 'Set qty', 'transfer' => 'Transfer'] as $t => $label)
                            <label class="cursor-pointer rounded-xl border border-slate-200 p-2.5 text-center text-xs font-bold text-slate-600 has-[:checked]:border-indigo-500 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                <input type="radio" name="type" value="{{ $t }}" class="hidden" @checked($t === 'in')>{{ $label }}
                            </label>
                        @endforeach
                    </div>
                </div>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Quantity</span>
                    <input type="number" step="0.01" min="0.01" name="quantity" required class="w-full rounded-xl border-slate-200 text-sm"></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">To location (transfers)</span>
                    <select name="to_location" class="w-full rounded-xl border-slate-200 text-sm"><option value="">—</option>
                        @foreach (['main_store' => 'Main store', 'kitchen' => 'Kitchen', 'bar' => 'Bar', 'housekeeping' => 'Housekeeping'] as $loc => $label)<option value="{{ $loc }}">{{ $label }}</option>@endforeach
                    </select></label>
                <label class="block"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Reference / reason</span>
                    <input name="reference" placeholder="e.g. kitchen requisition" class="w-full rounded-xl border-slate-200 text-sm"></label>
                <div class="flex justify-end gap-2"><button type="button" @click="move = null" class="rounded-xl px-4 py-2.5 text-sm font-bold text-slate-500">Cancel</button>
                    <button class="rounded-xl bg-emerald-600 px-5 py-2.5 text-sm font-bold text-white">Record</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/inventory') }}/' + 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><input name="category" :value="edit?.category" 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">Unit</span><input name="unit" :value="edit?.unit" 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">Reorder level</span><input type="number" step="0.01" name="reorder_level" :value="edit?.reorder_level" 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">Cost price</span><input type="number" step="0.01" name="cost_price" :value="edit?.cost_price" 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">Selling price</span><input type="number" step="0.01" name="selling_price" :value="edit?.selling_price" 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">Location</span>
                    <select name="location" class="w-full rounded-xl border-slate-200 text-sm" x-init="edit && ($el.value = edit.location)">
                        @foreach (['main_store' => 'Main store', 'kitchen' => 'Kitchen', 'bar' => 'Bar', 'housekeeping' => 'Housekeeping'] as $loc => $label)<option value="{{ $loc }}">{{ $label }}</option>@endforeach
                    </select></label>
                <label class="col-span-2"><span class="mb-1 block text-xs font-bold uppercase text-slate-500">Supplier</span>
                    <select name="supplier_id" class="w-full rounded-xl border-slate-200 text-sm" x-init="edit && ($el.value = edit.supplier_id)"><option value="">—</option>
                        @foreach ($suppliers as $supplier)<option value="{{ $supplier->id }}">{{ $supplier->name }}</option>@endforeach
                    </select></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
