@extends('layout',['heading'=>__('ui.inventory'),'clinic'=>$clinic])
@section('content')
<div class="flex flex-wrap justify-between items-end gap-4 mb-6"><div><p class="section-kicker">{{ __('ui.inventory_control') }}</p><h2 class="text-2xl font-extrabold mt-1">{{ __('ui.inventory') }}</h2><p class="text-slate-500 text-sm mt-1">{{ __('ui.inventory_intro') }}</p></div>
    <div class="flex gap-2"><button class="btn" type="button" onclick="openModal('itemModal')">{{ __('ui.add_item') }}</button><button class="btn-secondary" type="button" onclick="openModal('categoryModal')">{{ __('ui.add_local_category') }}</button></div>
</div>
@if(session('ok'))<div class="bg-emerald-50 text-emerald-700 p-3 rounded mb-4">{{ session('ok') }}</div>@endif
@if($errors->any())<div class="bg-red-50 text-red-700 p-3 rounded mb-4">{{ $errors->first() }}</div>@endif
<div class="card p-0 overflow-x-auto"><div class="p-5 border-b border-slate-100 flex justify-between"><div><b class="text-lg">{{ __('ui.inventory_items') }}</b><p class="text-xs text-slate-400 mt-1">{{ __('ui.modal_edit_hint') }}</p></div><span class="text-xs text-slate-400">{{ __('ui.item_count', ['count' => $items->count()]) }}</span></div><table class="w-full text-right"><thead class="bg-slate-50 border-b text-slate-500"><tr><th class="p-3">{{ __('ui.item') }}</th><th class="p-3">{{ __('ui.category') }}</th><th class="p-3">{{ __('ui.source') }}</th><th class="p-3">{{ __('ui.price') }}</th><th class="p-3">{{ __('ui.quantity') }}</th><th class="p-3">{{ __('ui.actions') }}</th></tr></thead><tbody>@forelse($items as $i)<tr class="border-b hover:bg-teal-50/30"><td class="p-3 font-bold">{{ $i->name }}@if($i->active_ingredient)<small class="block text-slate-500 font-normal">{{ $i->active_ingredient }}</small>@endif</td><td class="p-3">{{ $i->category_name ?: $i->category ?: __('ui.uncategorized') }}</td><td class="p-3 text-sm">{{ $i->category_scope === 'system' || $i->is_system_item ? __('ui.system_item') : __('ui.clinic_item') }}</td><td class="p-3">{{ number_format($i->unit_price,2) }} {{ __('ui.currency') }}</td><td class="p-3"><span class="font-bold {{ $i->quantity <= $i->minimum_quantity ? 'text-rose-700' : 'text-emerald-700' }}">{{ $i->quantity }}</span></td><td class="p-3 whitespace-nowrap"><button type="button" class="text-teal-700 font-bold ml-3" onclick="openModal('editItem{{ $i->id }}')">{{ __('ui.edit') }}</button><a class="text-slate-500" href="/inventory/{{ $i->id }}/history">{{ __('ui.history') }}</a></td></tr>@empty<tr><td colspan="6" class="p-12 text-center text-slate-500">{{ __('ui.no_inventory_items') }}</td></tr>@endforelse</tbody></table></div>
@foreach($items as $i)<div id="editItem{{ $i->id }}" class="modal hidden"><div class="panel"><h2 class="font-bold text-lg mb-3">{{ __('ui.edit_inventory_item') }}</h2><p class="text-sm text-slate-500 mb-3">{{ $i->name }}</p><form method="post" action="/inventory/{{ $i->id }}" class="space-y-3">@csrf<label>{{ __('ui.unit_price') }}<input class="input" type="number" step=".01" min="0" name="unit_price" value="{{ $i->unit_price }}" required></label><label>{{ __('ui.current_quantity') }}<input class="input" type="number" min="0" name="quantity" value="{{ $i->quantity }}" required></label><div class="flex gap-2 justify-end"><button type="button" class="btn-secondary" onclick="closeModal('editItem{{ $i->id }}')">{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save_edit') }}</button></div></form></div></div>@endforeach
<div id="itemModal" class="modal hidden"><div class="panel"><h2 class="font-bold text-lg mb-3">{{ __('ui.add_inventory_item') }}</h2><p class="text-sm text-slate-500 mb-3">{{ __('ui.inventory_category_hint') }}</p><form method="post" action="/inventory" class="space-y-3">@csrf<label>{{ __('ui.item_name') }}<input class="input" name="name" required maxlength="190"></label><label>{{ __('ui.category') }}<select class="input" name="inventory_category_id" required><option value="">{{ __('ui.choose_category') }}</option>@foreach($categories as $category)<option value="{{ $category->id }}">{{ $category->name }} — {{ $category->scope === 'system' ? __('ui.system_item') : __('ui.clinic_item') }}</option>@endforeach</select></label><label>{{ __('ui.unit_price') }}<input class="input" name="unit_price" type="number" step=".01" min="0" required></label><label>{{ __('ui.initial_quantity') }}<input class="input" name="quantity" type="number" min="0" value="0" required></label><label>{{ __('ui.minimum_quantity') }}<input class="input" name="minimum_quantity" type="number" min="0" value="0" required></label><div class="flex gap-2 justify-end"><button type="button" class="btn-secondary" onclick="closeModal('itemModal')">{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save') }}</button></div></form></div></div>
<div id="categoryModal" class="modal hidden"><div class="panel"><h2 class="font-bold text-lg mb-3">{{ __('ui.local_category') }}</h2><p class="text-sm text-slate-500 mb-3">{{ __('ui.local_category_hint') }}</p><form method="post" action="/inventory/categories" class="space-y-3">@csrf<label>{{ __('ui.category_name') }}<input class="input" name="name" required maxlength="100" placeholder="{{ __('ui.category_example') }}"></label><div class="flex gap-2 justify-end"><button type="button" class="btn-secondary" onclick="closeModal('categoryModal')">{{ __('ui.cancel') }}</button><button class="btn">{{ __('ui.save') }}</button></div></form></div></div>
<style>.modal{position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:50;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease}.modal.is-open{opacity:1;visibility:visible;pointer-events:auto}.modal.hidden{display:flex}.panel{background:#fff;border:1px solid #e6ebf2;border-radius:18px;padding:1.25rem;width:min(100%,520px);max-height:90vh;overflow:auto;box-shadow:0 20px 50px rgba(15,23,42,.22);transform:translateY(10px) scale(.97);transition:transform .22s cubic-bezier(.23,1,.32,1)}.modal.is-open .panel{transform:translateY(0) scale(1)}.panel h2{font-weight:800}.btn-secondary{border:1px solid #dbe3ec;background:#fff;color:#334155;border-radius:10px;padding:.6rem .9rem}</style><script>function openModal(id){const modal=document.getElementById(id);if(modal){modal.classList.remove('hidden');requestAnimationFrame(()=>modal.classList.add('is-open'))}}function closeModal(id){const modal=document.getElementById(id);if(modal)modal.classList.remove('is-open')}document.querySelectorAll('.modal').forEach(m=>m.addEventListener('click',e=>{if(e.target===m)closeModal(m.id)}));document.addEventListener('keydown',e=>{if(e.key==='Escape')document.querySelectorAll('.modal.is-open').forEach(m=>m.classList.remove('is-open'))});</script>
@endsection