@extends('layouts.app')
@section('content')
<div class="page"><div class="container"><div class="card"><h1>{{ $menuItem->name }} — Ingredients</h1><p>Add each ingredient and grams.</p>
<form method="POST" action="{{ route('dashboard.menu-items.ingredients.update',$menuItem) }}">@csrf @method('PUT')
<div id="rows">
@forelse($menuItem->ingredients as $s)
<div class="grid grid-2 row"><select name="ingredient_id[]">@foreach($ingredients as $i)<option value="{{ $i->id }}" @selected($s->id==$i->id)>{{ $i->name }}</option>@endforeach</select><div><input type="number" step=".1" name="quantity_grams[]" value="{{ $s->pivot->quantity_grams }}"><button type="button" class="btn danger remove">×</button></div></div>
@empty
<div class="grid grid-2 row"><select name="ingredient_id[]">@foreach($ingredients as $i)<option value="{{ $i->id }}">{{ $i->name }}</option>@endforeach</select><div><input type="number" step=".1" name="quantity_grams[]" placeholder="grams"><button type="button" class="btn danger remove">×</button></div></div>
@endforelse
</div><br><button type="button" id="add" class="btn light">+ Add ingredient</button> <button class="btn">Save and Calculate</button></form>
</div></div></div>
@endsection
@push('scripts')
<script>
const options=@json($ingredients->map(fn($i)=>['id'=>$i->id,'name'=>$i->name]));
add.onclick=()=>{const d=document.createElement('div');d.className='grid grid-2 row';d.innerHTML='<select name="ingredient_id[]">'+options.map(i=>`<option value="${i.id}">${i.name}</option>`).join('')+'</select><div><input type="number" step=".1" name="quantity_grams[]" placeholder="grams"><button type="button" class="btn danger remove">×</button></div>';rows.appendChild(d)};
document.addEventListener('click',e=>{if(e.target.classList.contains('remove')&&document.querySelectorAll('.row').length>1)e.target.closest('.row').remove()});
</script>
@endpush