@php
$existingRows = old('ingredients');
if ($existingRows === null && isset($record)) {
    $existingRows = $record->ingredientConsumptions->map(fn($r)=>['ingredient_id'=>$r->ingredient_id,'consumption'=>$r->consumption])->values()->all();
}
$existingRows = $existingRows ?? [];
@endphp
<div class="pm-grid3">
 <div class="pm-field"><label>Name <span>*</span></label><input class="pm-input" name="name" placeholder="Name" value="{{ old('name',$record->name??'') }}" required>@error('name')<div class="pm-error">{{ $message }}</div>@enderror</div>
 <div class="pm-field"><label>Code</label><input class="pm-input" name="code" value="{{ old('code',$record->code??$nextCode) }}" readonly></div>
 <div class="pm-field"><label>Category <span>*</span></label><select class="pm-input" name="category_id" required><option value="">Select</option>@foreach($categories as $category)<option value="{{ $category->id }}" @selected((string)old('category_id',$record->category_id??'')===(string)$category->id)>{{ $category->name }}</option>@endforeach</select>@error('category_id')<div class="pm-error">{{ $message }}</div>@enderror</div>
</div>
<div class="pm-field pm-select-wrap"><label>Ingredient Consumptions <span>*</span></label><select id="pm-ingredient-select" class="pm-input"><option value="">Select</option>@foreach($ingredients as $ingredient)<option value="{{ $ingredient->id }}" data-name="{{ $ingredient->name }}" data-code="{{ $ingredient->code }}" data-cost="{{ (float)$ingredient->cost_per_unit }}" data-unit="{{ $ingredient->consumptionUnit?->unit_name ?? '' }}">{{ $ingredient->name }}{{ $ingredient->code ? '(' . $ingredient->code . ')' : '' }}</option>@endforeach</select>@error('ingredients')<div class="pm-error">{{ $message }}</div>@enderror</div>
<div class="pm-table-wrap"><table class="pm-table" id="pm-ingredient-table"><thead><tr><th>SN</th><th>Ingredient</th><th>Consumption</th><th>Total</th><th style="text-align:right">Actions</th></tr></thead><tbody></tbody></table></div>
<div class="pm-grid3 pm-bottom-grid">
 <div class="pm-field"><label>Consumption Unit <span>*</span></label><select class="pm-input" name="consumption_unit_id" required><option value="">Select</option>@foreach($units as $unit)<option value="{{ $unit->id }}" @selected((string)old('consumption_unit_id',$record->consumption_unit_id??'')===(string)$unit->id)>{{ $unit->unit_name }}</option>@endforeach</select>@error('consumption_unit_id')<div class="pm-error">{{ $message }}</div>@enderror</div>
 <div class="pm-field"><label>Cost Per Unit <span>*</span></label><input id="pm-cost-per-unit" class="pm-input" value="0.000" readonly></div>
 <div class="pm-field"><label>Low Qty <span>*</span></label><input class="pm-input" type="number" step="0.001" min="0" name="low_quantity" placeholder="Low Qty" value="{{ old('low_quantity',$record->low_quantity??'') }}" required>@error('low_quantity')<div class="pm-error">{{ $message }}</div>@enderror</div>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded',()=>{
 const select=document.getElementById('pm-ingredient-select'), tbody=document.querySelector('#pm-ingredient-table tbody'), costBox=document.getElementById('pm-cost-per-unit');
 const existing=@json($existingRows); let rows=[];
 const esc=v=>String(v??'').replaceAll('&','&amp;').replaceAll('<','&lt;').replaceAll('>','&gt;').replaceAll('"','&quot;').replaceAll("'",'&#039;');
 function getData(id){const o=select.querySelector(`option[value="${id}"]`);if(!o)return null;return{id:String(id),name:o.dataset.name||'',code:o.dataset.code||'',cost:parseFloat(o.dataset.cost||0),unit:o.dataset.unit||''};}
 function calc(){let grand=0;rows.forEach((r,i)=>{const tr=tbody.querySelector(`tr[data-i="${i}"]`);if(!tr)return;const q=parseFloat(tr.querySelector('.pm-consumption').value||0),t=q*r.cost;tr.querySelector('.pm-total').value=t.toFixed(3);grand+=t;});costBox.value=grand.toFixed(3);}
 function render(){tbody.innerHTML='';rows.forEach((r,i)=>{const tr=document.createElement('tr');tr.dataset.i=i;tr.innerHTML=`<td>${i+1}</td><td>${esc(r.name)}<input type="hidden" name="ingredients[${i}][ingredient_id]" value="${r.id}"></td><td><div class="pm-consume-cell"><input class="pm-input pm-consumption" type="number" min="0.0001" step="0.0001" name="ingredients[${i}][consumption]" value="${r.consumption??''}" placeholder="Consumption" required><span>${esc(r.unit)}</span><input class="pm-input" value="${r.cost.toFixed(4)}" readonly></div></td><td><input class="pm-input pm-total" value="0.000" readonly></td><td style="text-align:right"><button type="button" class="pm-trash" data-remove="${i}">&#128465;</button></td>`;tbody.appendChild(tr);});
 tbody.querySelectorAll('.pm-consumption').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,cons=''){if(!id||rows.some(r=>r.id===String(id)))return;const d=getData(id);if(d){rows.push({...d,consumption:cons});render();}}
 select.addEventListener('change',function(){add(this.value);this.value='';});existing.forEach(r=>add(r.ingredient_id,r.consumption));
});
</script>
@endpush