@if($errors->any())<div class="alert form-alert"><strong>Please correct the highlighted quotation fields.</strong><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif
<div class="admin-form-grid quotation-main-fields">
 <div class="form-group customer-selector"><div class="label-toggle-row"><label>Customer <b>*</b></label><label class="switch-label"><input id="newCustomerToggle" type="checkbox" name="new_customer" value="1" @checked(old('new_customer'))><span class="switch"></span> New Customer</label></div><div id="existingCustomer"><select id="customerSelect" name="customer_id"><option value="">Select customer</option>@foreach($customers as $c)<option value="{{ $c->id }}" @selected((string)old('customer_id',$quotation->customer_id??'')===(string)$c->id)>{{ $c->name }} — {{ $c->phone }}</option>@endforeach</select></div><div id="newCustomerFields" class="new-customer-fields" hidden><input name="new_customer_name" value="{{ old('new_customer_name') }}" placeholder="Customer name"><input name="new_customer_phone" value="{{ old('new_customer_phone') }}" placeholder="Phone number"></div></div>
 <div class="form-group"><label>Menu Card</label><select id="cateringMenuSelect" name="catering_menu_id"><option value="">Select menu card (optional)</option>@foreach($cateringMenus as $card)<option value="{{ $card->id }}" @selected((string)old('catering_menu_id',$quotation->catering_menu_id??'')===(string)$card->id)>{{ $card->name }} ({{ $card->dishes->count() }} dishes)</option>@endforeach</select><p class="field-hint">Selecting a menu automatically fills its dishes below.</p></div>
 <div class="form-group"><label>Event Name</label><input name="event_name" value="{{ old('event_name',$quotation->event_name??'') }}" placeholder="e.g. Wedding Reception"></div>
 <div class="form-group"><label>Quotation Date <b>*</b></label><input type="date" name="quotation_date" value="{{ old('quotation_date',isset($quotation)?$quotation->quotation_date->format('Y-m-d'):now()->format('Y-m-d')) }}" required></div>
 <div class="form-group"><label>Valid Until <b>*</b></label><input type="date" name="valid_until" value="{{ old('valid_until',isset($quotation)?$quotation->valid_until->format('Y-m-d'):now()->addDays(15)->format('Y-m-d')) }}" required></div>
 <div class="form-group"><label>Event Date</label><input type="date" name="event_date" value="{{ old('event_date',isset($quotation)&&$quotation->event_date?$quotation->event_date->format('Y-m-d'):'') }}"></div>
 <div class="form-group"><label>Guest Count</label><input type="number" name="guest_count" min="1" value="{{ old('guest_count',$quotation->guest_count??'') }}" placeholder="Number of guests"></div>
 <div class="form-group"><label>Status <b>*</b></label><select name="status" required>@foreach(['Draft','Sent','Accepted','Rejected','Expired'] as $status)<option @selected(old('status',$quotation->status??'Draft')===$status)>{{ $status }}</option>@endforeach</select></div>
</div>
<div class="line-items-heading"><div><h3>Quotation Items</h3><p>Add one or more catering dishes.</p></div><button class="secondary-action add-row" type="button" id="addItem">+ Add Dish</button></div>
<div class="table-wrap"><table class="quotation-items-table" id="quotationItemsTable"><thead><tr><th>Dish</th><th>Item Name</th><th>Qty</th><th>Unit</th><th>Rate (&#8377;)</th><th>Amount (&#8377;)</th><th></th></tr></thead><tbody id="itemsBody"></tbody></table></div>
<div class="quotation-bottom"><div class="form-group notes-field"><label>Notes</label><textarea name="notes" rows="5" maxlength="2000" placeholder="Terms, service notes or additional information">{{ old('notes',$quotation->notes??'') }}</textarea></div><div class="totals-box"><label>Subtotal <span id="subtotalText">&#8377;0.00</span></label><label>Discount <input id="discount" type="number" name="discount" min="0" step="0.01" value="{{ old('discount',$quotation->discount??0) }}"></label><label class="gst-toggle-row"><span>With GST (18%)</span><span class="switch-label"><input id="withGst" type="checkbox" name="with_gst" value="1" @checked(old('with_gst',$quotation->with_gst??false))><span class="switch"></span></span></label><label>GST Amount <span id="gstText">&#8377;0.00</span></label><strong>Total <span id="totalText">&#8377;0.00</span></strong></div></div>
<div class="form-actions"><a class="secondary-action" href="{{ route('admin.quotations.index') }}">Cancel</a><button class="primary-action" type="submit">{{ $submitLabel }}</button></div>
@php
$initialItems=old('items',isset($quotation)?$quotation->items->map(fn($i)=>['menu_id'=>$i->menu_id,'item_name'=>$i->item_name,'quantity'=>$i->quantity,'unit'=>$i->unit,'rate'=>$i->rate])->values()->all():[['menu_id'=>'','item_name'=>'','quantity'=>1,'unit'=>'Per Plate','rate'=>0]]);
$menuOptions=$menus->map(fn($m)=>['id'=>$m->id,'name'=>$m->item_name,'unit'=>$m->unit,'rate'=>$m->price,'category'=>$m->category?->name])->values();
$menuCardOptions=$cateringMenus->map(fn($card)=>['id'=>$card->id,'name'=>$card->name,'dishes'=>$card->dishes->map(fn($dish)=>['menu_id'=>$dish->id,'item_name'=>$dish->item_name,'quantity'=>1,'unit'=>$dish->unit,'rate'=>$dish->price])->values()])->values();
@endphp
@push('scripts')<script src="{{ asset('js/searchable-select.js') }}"></script>@endpush
@push('scripts')<script>
(()=>{const menuData=@json($menuOptions),menuCards=@json($menuCardOptions),initial=@json($initialItems),body=document.getElementById('itemsBody'),table=document.getElementById('quotationItemsTable');let index=0;

// Initialize searchable dropdowns for form
function initFormSelects(){
  const customerSelect=document.getElementById('customerSelect');
  if(customerSelect){SearchableSelect.init(customerSelect,{placeholder:'Search or select customer...'});}
  const statusSelect=document.querySelector('select[name="status"]');
  if(statusSelect){SearchableSelect.init(statusSelect,{placeholder:'Select status...'});}
  const cateringMenuSelect=document.getElementById('cateringMenuSelect');
  if(cateringMenuSelect){SearchableSelect.init(cateringMenuSelect,{placeholder:'Search or select menu card...'});}
}

function row(item={}){const i=index++,tr=document.createElement('tr');tr.innerHTML=`<td><select name="items[${i}][menu_id]" class="menu-select" required><option value="">Select menu item</option>${menuData.map(m=>`<option value="${m.id}" ${String(item.menu_id||'')===String(m.id)?'selected':''}>${m.name}${m.category?' — '+m.category:''}</option>`).join('')}</select></td><td><input class="item-name readonly-field" value="${escapeHtml(item.item_name||'')}" readonly tabindex="-1"></td><td><input type="number" name="items[${i}][quantity]" class="qty" min="0.01" step="0.01" value="${item.quantity||1}" required></td><td><input class="unit readonly-field" value="${escapeHtml(item.unit||'')}" readonly tabindex="-1"></td><td><input type="number" name="items[${i}][rate]" class="rate" min="0" step="0.01" value="${item.rate||0}" required></td><td class="row-amount">0.00</td><td><button type="button" class="remove-row" title="Remove">&times;</button></td>`;body.appendChild(tr);
const selectElement=tr.querySelector('.menu-select');SearchableSelect.init(selectElement,{placeholder:'Search or select menu item...',formContext:table});
selectElement.addEventListener('change',e=>{const m=menuData.find(x=>String(x.id)===e.target.value);if(m){tr.querySelector('.item-name').value=m.name;tr.querySelector('.unit').value=m.unit;tr.querySelector('.rate').value=m.rate}calc();updateMenuSelectOptions()});
tr.querySelectorAll('.qty,.rate').forEach(x=>x.addEventListener('input',calc));tr.querySelector('.remove-row').addEventListener('click',()=>{if(body.children.length>1){tr.remove();updateMenuSelectOptions();calc()}});calc()}
function updateMenuSelectOptions(){const selectedValues=Array.from(body.querySelectorAll('.menu-select')).map(s=>String(s.value)).filter(v=>v!=='');body.querySelectorAll('.menu-select').forEach((select)=>{const wrapper=select.nextElementSibling;if(wrapper&&wrapper.classList.contains('searchable-select-wrapper')){const options=wrapper.querySelectorAll('.searchable-select-option');options.forEach(opt=>{const value=opt.dataset.value;const isCurrentSelected=value===String(select.value);const isDuplicate=selectedValues.includes(value)&&value!==''&&!isCurrentSelected;if(isDuplicate){opt.classList.add('disabled');opt.style.pointerEvents='none';opt.style.opacity='0.45'}else{opt.classList.remove('disabled');opt.style.pointerEvents='';opt.style.opacity=''}})}});}
function loadMenuCard(){const selected=document.getElementById('cateringMenuSelect').value,card=menuCards.find(card=>String(card.id)===String(selected));if(!card)return;body.innerHTML='';card.dishes.forEach(dish=>row(dish));if(!card.dishes.length)row();updateMenuSelectOptions();calc()}
function escapeHtml(v){const d=document.createElement('div');d.textContent=v;return d.innerHTML}function calc(){let sub=0;body.querySelectorAll('tr').forEach(r=>{const a=(parseFloat(r.querySelector('.qty').value)||0)*(parseFloat(r.querySelector('.rate').value)||0);r.querySelector('.row-amount').textContent=a.toFixed(2);sub+=a});const discount=Math.min(sub,parseFloat(document.getElementById('discount').value)||0),gst=document.getElementById('withGst').checked?(sub-discount)*.18:0,total=Math.max(0,sub-discount+gst);document.getElementById('subtotalText').textContent='₹'+sub.toFixed(2);document.getElementById('gstText').textContent='₹'+gst.toFixed(2);document.getElementById('totalText').textContent='₹'+total.toFixed(2)}
function toggleCustomer(){const enabled=document.getElementById('newCustomerToggle').checked;document.getElementById('existingCustomer').hidden=enabled;document.getElementById('newCustomerFields').hidden=!enabled;document.getElementById('customerSelect').required=!enabled;document.querySelectorAll('#newCustomerFields input').forEach(i=>i.required=enabled)}
initFormSelects();initial.forEach(row);document.getElementById('cateringMenuSelect').addEventListener('change',loadMenuCard);document.getElementById('addItem').addEventListener('click',()=>{row();updateMenuSelectOptions()});document.getElementById('discount').addEventListener('input',calc);document.getElementById('withGst').addEventListener('change',calc);document.getElementById('newCustomerToggle').addEventListener('change',toggleCustomer);toggleCustomer();calc()})();
</script>@endpush