@php
$existingItems = old('items');
if ($existingItems === null && isset($record) && $record) {
    $existingItems = $record->items->map(fn($i)=>['ingredient_id'=>$i->ingredient_id,'unit_price'=>$i->unit_price,'quantity'=>$i->quantity])->values()->all();
}
$existingItems = $existingItems ?? [];
@endphp
<style>
.pur-card{background:#fff;border-radius:9px;padding:14px 10px 20px}.pur-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.pur-field label{display:block;color:#66637a;font-size:13px;margin-bottom:7px}.pur-field label span{color:#e54848}.pur-input{width:100%;height:34px;border:1px solid #cfd3dd;border-radius:4px;padding:0 12px;color:#575564;background:#fff}.pur-supplier-row{display:flex;gap:8px;align-items:center}.pur-plus{width:36px;height:34px;border:0;background:#fff;font-size:28px;line-height:28px;cursor:pointer}.pur-top2{display:grid;grid-template-columns:1fr 170px 1fr;gap:20px;align-items:end;margin-top:10px}.pur-read{height:34px;border:0;border-radius:5px;background:#ef5350;color:#fff;font-weight:700;padding:0 22px}.pur-table-wrap{overflow-x:auto;margin-top:25px}.pur-table{width:100%;border-collapse:collapse;min-width:900px}.pur-table th{background:#f3f2f7;color:#68667a;font-size:13px;font-weight:500;text-align:left;padding:12px 8px}.pur-table td{padding:10px 8px;border-bottom:1px solid #eee;color:#676577}.pur-row-input{height:38px;border:1px solid #cfd3dd;border-radius:4px;padding:0 10px;width:100%}.pur-trash{background:#e85043;color:#fff;border:0;border-radius:4px;width:36px;height:36px;cursor:pointer}.pur-summary{display:grid;grid-template-columns:1fr 270px;gap:28px;margin-top:10px}.pur-summary-box .pur-field{margin-bottom:7px}.pur-actions{display:flex;gap:18px;border-top:1px solid #eee;margin-top:28px;padding-top:10px}.pur-btn{min-width:168px;padding:9px 18px;border:0;border-radius:5px;background:#7060f4;color:white;font-weight:700;text-decoration:none;text-align:center;cursor:pointer}.pur-error{font-size:12px;color:#dc2626;margin-top:4px}.pur-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;align-items:center;justify-content:center;padding:20px}.pur-modal.show{display:flex}.pur-modal-card{width:min(760px,96vw);background:#fff;border-radius:8px;padding:22px;position:relative}.pur-close{position:absolute;right:12px;top:8px;border:0;background:#fff;font-size:27px;cursor:pointer}.pur-modal-title{font-size:22px;margin-bottom:18px}.pur-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.pur-modal textarea{height:70px;padding-top:10px}.notice-card{max-width:440px}.notice-box{border:1px solid #ff2e2e;border-radius:4px;padding:10px;color:#ff2e2e}.notice-box strong{display:block;text-align:center;margin-bottom:4px}@media(max-width:850px){.pur-grid3,.pur-top2,.pur-summary,.pur-modal-grid{grid-template-columns:1fr}.pur-plus{flex:0 0 36px}}
</style>
<div class="pur-grid3">
 <div class="pur-field"><label>Reference No</label><input class="pur-input" name="reference_no" value="{{ old('reference_no',$record->reference_no??$nextReference) }}" readonly></div>
 <div class="pur-field"><label>Supplier <span>*</span></label><div class="pur-supplier-row"><select id="purchase-supplier" class="pur-input" name="supplier_id" required><option value="">Select</option>@foreach($suppliers as $s)<option value="{{ $s->id }}" @selected((string)old('supplier_id',$record->supplier_id??'')===(string)$s->id)>{{ $s->name }}</option>@endforeach</select><button class="pur-plus" type="button" id="open-supplier-modal">+</button></div>@error('supplier_id')<div class="pur-error">{{ $message }}</div>@enderror</div>
 <div class="pur-field"><label>Date <span>*</span></label><input class="pur-input" type="date" name="purchase_date" value="{{ old('purchase_date',isset($record)&&$record?$record->purchase_date?->format('Y-m-d'):now()->format('Y-m-d')) }}" required>@error('purchase_date')<div class="pur-error">{{ $message }}</div>@enderror</div>
</div>
<div class="pur-top2">
 <div class="pur-field"><label>Ingredients <span>*</span></label><select id="purchase-ingredient" class="pur-input"><option value="">Select</option>@foreach($ingredients as $ing)<option value="{{ $ing->id }}" data-name="{{ $ing->name }}" data-code="{{ $ing->code }}" data-price="{{ (float)$ing->purchase_price }}" data-unit="{{ $ing->purchaseUnit?->unit_name ?? $ing->consumptionUnit?->unit_name ?? '' }}">{{ $ing->name }}{{ $ing->code ? '('.$ing->code.')' : '' }}</option>@endforeach</select>@error('items')<div class="pur-error">{{ $message }}</div>@enderror</div>
 <button class="pur-read" type="button" id="show-purchase-notice">Read Me First</button><div></div>
</div>
<div class="pur-table-wrap"><table class="pur-table"><thead><tr><th>SN</th><th>Ingredient(Code)</th><th>Unit Price</th><th>Quantity/Amount</th><th>Total</th><th>Actions</th></tr></thead><tbody id="purchase-items-body"></tbody></table></div>
<div class="pur-summary"><div></div><div class="pur-summary-box">
 <div class="pur-field"><label>G. Total <span>*</span></label><input id="grand-total" class="pur-input" value="0.00" readonly></div>
 <div class="pur-field"><label>Paid <span>*</span></label><input id="paid-input" class="pur-input" type="number" step="0.01" min="0" name="paid" value="{{ old('paid',$record->paid??0) }}" required>@error('paid')<div class="pur-error">{{ $message }}</div>@enderror</div>
 <div class="pur-field"><label>Due</label><input id="due-total" class="pur-input" value="0.00" readonly></div>
 <div class="pur-field"><label>Payment Method <span>*</span></label><select class="pur-input" name="payment_method" required><option value="">Select</option><option value="cash" @selected(old('payment_method',$record->payment_method??'')==='cash')>Cash</option><option value="card" @selected(old('payment_method',$record->payment_method??'')==='card')>Card</option></select>@error('payment_method')<div class="pur-error">{{ $message }}</div>@enderror</div>
</div></div>

<div class="pur-modal" id="supplier-modal"><div class="pur-modal-card"><button type="button" class="pur-close" data-close-modal="supplier-modal">×</button><div class="pur-modal-title">Add Supplier</div><div id="supplier-modal-error" class="pur-error" style="margin-bottom:8px"></div><div class="pur-modal-grid">
 <div class="pur-field"><label>Name <span>*</span></label><input class="pur-input" id="qs-name" placeholder="Name"></div><div class="pur-field"><label>Address</label><textarea class="pur-input" id="qs-address" placeholder="Address"></textarea></div>
 <div class="pur-field"><label>Contact Person <span>*</span></label><input class="pur-input" id="qs-contact" placeholder="Contact Person"></div><div class="pur-field"><label>Description</label><textarea class="pur-input" id="qs-description" placeholder="Enter ..."></textarea></div>
 <div class="pur-field"><label>Phone <span>*</span></label><input class="pur-input" id="qs-phone" placeholder="Phone"></div><div></div>
 <div class="pur-field"><label>Email</label><input class="pur-input" type="email" id="qs-email" placeholder="Email"></div><div></div>
 </div><div class="pur-actions" style="border-top:0;margin-top:14px"><button type="button" class="pur-btn" id="quick-supplier-save">Submit</button><button type="button" class="pur-btn" data-close-modal="supplier-modal">Back</button></div></div></div>

<div class="pur-modal" id="notice-modal"><div class="pur-modal-card notice-card"><button type="button" class="pur-close" data-close-modal="notice-modal">×</button><div class="pur-modal-title">NOTICE</div><div class="notice-box"><strong>NOTICE</strong>You must enter the Quantity/Amount in the Unit showing just right after the Quantity/Amount field, otherwise Stock will not match.</div></div></div>

<script>
document.addEventListener('DOMContentLoaded',()=>{
 const ingSelect=document.getElementById('purchase-ingredient'), tbody=document.getElementById('purchase-items-body'), paid=document.getElementById('paid-input'), grand=document.getElementById('grand-total'), due=document.getElementById('due-total');
 const existing=@json($existingItems); let rows=[];
 const esc=v=>String(v??'').replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;').replaceAll('"','&quot;').replaceAll("'",'&#039;');
 function data(id){const o=ingSelect.querySelector(`option[value="${id}"]`); if(!o)return null; return {id:String(id),name:o.dataset.name||'',code:o.dataset.code||'',price:parseFloat(o.dataset.price||0),unit:o.dataset.unit||''};}
 function calc(){let g=0;tbody.querySelectorAll('tr').forEach((tr,i)=>{const p=parseFloat(tr.querySelector('.unit-price').value||0),q=parseFloat(tr.querySelector('.qty').value||0),t=p*q;tr.querySelector('.line-total').value=t.toFixed(2);g+=t;rows[i].price=p;rows[i].quantity=q;});grand.value=g.toFixed(2);due.value=Math.max(0,g-parseFloat(paid.value||0)).toFixed(2)}
 function render(){tbody.innerHTML='';rows.forEach((r,i)=>{const tr=document.createElement('tr');tr.innerHTML=`<td>${i+1}</td><td>${esc(r.name)}${r.code?'('+esc(r.code)+')':''}<input type="hidden" name="items[${i}][ingredient_id]" value="${r.id}"></td><td><input class="pur-row-input unit-price" type="number" step="0.0001" min="0" name="items[${i}][unit_price]" value="${Number(r.price||0).toFixed(4)}" required></td><td><div style="display:flex;align-items:center;gap:7px"><input class="pur-row-input qty" type="number" step="0.0001" min="0.0001" name="items[${i}][quantity]" value="${r.quantity||''}" placeholder="Quantity/Amount" required><span>${esc(r.unit)}</span></div></td><td><input class="pur-row-input line-total" value="0.00" readonly></td><td><button type="button" class="pur-trash" data-remove="${i}">🗑</button></td>`;tbody.appendChild(tr)});tbody.querySelectorAll('.unit-price,.qty').forEach(x=>x.addEventListener('input',calc));tbody.querySelectorAll('[data-remove]').forEach(b=>b.addEventListener('click',()=>{rows.splice(+b.dataset.remove,1);render()}));calc()}
 function add(id,price=null,quantity=''){if(!id||rows.some(r=>r.id===String(id)))return;const d=data(id);if(!d)return;if(price!==null)d.price=parseFloat(price||0);d.quantity=quantity;rows.push(d);render()}
 ingSelect.addEventListener('change',function(){add(this.value);this.value=''}); paid.addEventListener('input',calc); existing.forEach(r=>add(r.ingredient_id,r.unit_price,r.quantity));
 const open=id=>document.getElementById(id).classList.add('show'), close=id=>document.getElementById(id).classList.remove('show'); document.getElementById('open-supplier-modal').onclick=()=>open('supplier-modal');document.getElementById('show-purchase-notice').onclick=()=>open('notice-modal');document.querySelectorAll('[data-close-modal]').forEach(b=>b.onclick=()=>close(b.dataset.closeModal));
 document.getElementById('quick-supplier-save').onclick=async()=>{const err=document.getElementById('supplier-modal-error');err.textContent='';const payload={name:document.getElementById('qs-name').value,contact_person:document.getElementById('qs-contact').value,phone:document.getElementById('qs-phone').value,email:document.getElementById('qs-email').value,address:document.getElementById('qs-address').value,description:document.getElementById('qs-description').value};try{const res=await fetch('{{ route('gm-suppliers.quick-store') }}',{method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},body:JSON.stringify(payload)});const out=await res.json();if(!res.ok){err.textContent=out.message||Object.values(out.errors||{}).flat().join(' ');return}const sel=document.getElementById('purchase-supplier');const opt=new Option(out.supplier.name,out.supplier.id,true,true);sel.add(opt);close('supplier-modal')}catch(e){err.textContent='Supplier could not be added. Please try again.'}};
 const form=tbody.closest('form'); if(form)form.addEventListener('submit',e=>{if(rows.length<1||[...tbody.querySelectorAll('.qty')].some(x=>!(parseFloat(x.value)>0))){e.preventDefault();open('notice-modal')}});
});
</script>