@extends('layouts.app')
@section('title','Van Loading')
@section('content')
<form method="POST" action="{{ route('van.loading.store',$session) }}" id="loadingForm">@csrf<div class="page-head"><div><h1>Van loading request</h1><p>{{ $session->session_no }} · destination {{ $session->warehouse->code }}</p></div></div><div class="card-erp"><div class="card-erp-body"><div class="row g-2"><div class="col-md-5"><label class="form-label">Source warehouse</label><select id="loadSource" name="source_warehouse_id" class="form-select">@foreach($warehouses as $w)<option value="{{ $w->id }}">{{ $w->code }} · {{ $w->name_en }}</option>@endforeach</select></div><div class="col-md-3"><label class="form-label">Loading date</label><input type="date" name="loading_date" class="form-control" value="{{ now()->toDateString() }}"></div><div class="col-md-4"><label class="form-label">Notes</label><input name="notes" class="form-control"></div></div></div></div><div class="card-erp"><div class="card-erp-header">Products</div><div class="card-erp-body"><input id="loadSearch" class="form-control" placeholder="Search product and press Enter" autocomplete="off"><div id="loadResults" class="mt-1"></div></div><div class="table-responsive"><table class="table table-dense"><thead><tr><th>#</th><th>Product</th><th>Unit</th><th style="width:180px">Quantity</th><th></th></tr></thead><tbody id="loadItems"><tr id="loadEmpty"><td colspan="5" class="text-center text-muted py-4">Add products requested by the van salesman.</td></tr></tbody></table></div></div><div class="sticky-actions d-flex justify-content-end gap-2"><a href="{{ route('van.show',$session) }}" class="btn btn-light border">Cancel</a><button class="btn btn-primary">Submit loading request</button></div></form>
@endsection
@section('scripts')<script>let li=0,lt;loadSearch.oninput=()=>{clearTimeout(lt);let q=loadSearch.value.trim();if(!q){loadResults.innerHTML='';return}lt=setTimeout(async()=>{let r=await fetch(`{{ route('api.products.search') }}?q=${encodeURIComponent(q)}&warehouse_id=${loadSource.value}`,{headers:{Accept:'application/json'}}),a=await r.json();loadResults.innerHTML=a.map((p,i)=>`<button type="button" class="btn btn-sm btn-light border me-1 mb-1 pick-load" data-i="${i}">${p.product_code} · ${p.name_en} · Stock ${p.current_stock}</button>`).join('');document.querySelectorAll('.pick-load').forEach(x=>x.onclick=()=>addL(a[x.dataset.i]))},150)};function addL(p){loadEmpty?.remove();let u=p.units?.find(x=>x.id==p.sales_unit_id)||p.units?.[0]||{id:p.sales_unit_id,code:p.base_unit?.code};let tr=document.createElement('tr');tr.innerHTML=`<td class="ln"></td><td><b>${p.name_en}</b><small class="d-block text-muted" dir="rtl">${p.name_ar||''}</small><input type="hidden" name="items[${li}][product_id]" value="${p.id}"></td><td><select class="form-select" name="items[${li}][unit_id]">${p.units.map(x=>`<option value="${x.id}" ${x.id==u.id?'selected':''}>${x.code}</option>`).join('')}</select></td><td><input class="form-control" type="number" name="items[${li}][quantity]" value="1" min=".0001" step=".0001"></td><td><button type="button" class="btn btn-link text-danger"><i class="bi bi-x"></i></button></td>`;loadItems.appendChild(tr);tr.querySelector('button').onclick=()=>tr.remove();loadItems.querySelectorAll('.ln').forEach((x,i)=>x.textContent=i+1);li++;loadSearch.value='';loadResults.innerHTML='';loadSearch.focus()}loadingForm.onsubmit=e=>{if(!loadItems.querySelector('input[name*="product_id"]')){e.preventDefault();alert('Add at least one product.')}};</script>@endsection