@extends('layouts.app')
@section('title','Create Sales Order')
@section('content')
<x-ui.page-header title="Create Sales Order" :subtitle="__('orders.create_subtitle')"/>
<x-ui.flash/>
<form method="POST" action="{{ route('sales.orders.store') }}" id="order-form" class="ui-orderform">@csrf
<x-ui.card :title="__('orders.details')">
    <div class="ui-formgrid">
        <x-ui.field :label="__('orders.customer')" name="customer_id" required>
            <select name="customer_id" id="customer_id" required><option value="">{{ __('orders.choose_customer') }}</option>@foreach($customers as $customer)<option value="{{ $customer->id }}" @selected((string)old('customer_id')===(string)$customer->id)>{{ $customer->code }} — {{ $customer->name }}</option>@endforeach</select>
        </x-ui.field>
        <x-ui.field :label="__('orders.salesperson')" name="salesperson_user_id" required>
            <select name="salesperson_user_id" id="salesperson_user_id" required @disabled(!$canManage)>@foreach($salespeople as $salesperson)<option value="{{ $salesperson->id }}" @selected((string)old('salesperson_user_id',auth()->id())===(string)$salesperson->id)>{{ $salesperson->name }}</option>@endforeach</select>@unless($canManage)<input type="hidden" name="salesperson_user_id" value="{{ auth()->id() }}">@endunless
        </x-ui.field>
        <x-ui.field label="Stock warehouse" name="warehouse_id" required :hint="$warehouses->isEmpty() ? __('orders.no_warehouse') : null">
            <select name="warehouse_id" id="warehouse_id" required><option value="">{{ __('orders.choose_warehouse') }}</option>@foreach($warehouses as $warehouse)<option value="{{ $warehouse->id }}" @selected((string)old('warehouse_id',$warehouses->count()===1?$warehouse->id:'')===(string)$warehouse->id)>{{ $warehouse->code }} — {{ $warehouse->name }}</option>@endforeach</select>
        </x-ui.field>
        <x-ui.field :label="__('orders.notes_optional')" name="notes" style="grid-column:1/-1">
            <textarea name="notes" id="notes" rows="2" maxlength="4000">{{ old('notes') }}</textarea>
        </x-ui.field>
    </div>
</x-ui.card>
<x-ui.card :title="__('orders.items')" :subtitle="__('orders.items_hint')" :padded="false">
    <x-slot:actions><x-ui.button icon="plus" id="add-line">{{ __('orders.add_product') }}</x-ui.button></x-slot:actions>
    <div class="order-lines" id="order-lines"></div>
</x-ui.card>
<x-ui.alert type="info">{{ __('orders.draft_note') }}</x-ui.alert>
<div class="ui-formbar">
    <dl class="ui-formbar-totals num">
        <div><dt>{{ __('orders.subtotal') }}</dt><dd id="sum-subtotal">AED 0.00</dd></div>
        <div><dt>{{ __('orders.discount') }}</dt><dd id="sum-discount">AED 0.00</dd></div>
        <div><dt>{{ __('orders.vat') }}</dt><dd id="sum-vat">AED 0.00</dd></div>
        <div class="is-grand"><dt>{{ __('orders.estimated_total') }}</dt><dd id="sum-total">AED 0.00</dd></div>
    </dl>
    <div class="ui-actions"><x-ui.button variant="ghost" :href="route('sales.orders.index')">{{ __('ui.cancel') }}</x-ui.button><x-ui.button type="submit" variant="primary">{{ __('orders.create_draft') }}</x-ui.button></div>
</div>
</form>
<script>
(function(){
const products=@json($catalog);
const previous=@json(old('items', []));
const canManual=@json($canManage);
const lines=document.getElementById('order-lines');
const money=n=>'AED '+(Number.isFinite(n)?n:0).toFixed(2);
let uid=0;
function field(label,cls){const wrap=document.createElement('div');wrap.className='order-field ui-field '+(cls||'');const l=document.createElement('label');l.textContent=label;l.htmlFor='line-f'+(++uid);wrap.append(l);return wrap;}
function bind(wrap,control){control.id=wrap.querySelector('label').htmlFor;wrap.append(control);}
function productLabel(p){return p.sku+' — '+p.name+(p.barcodes.length?' · '+p.barcodes.join(', '):'');}
function setProducts(select,query,selected){const q=(query||'').trim().toLowerCase();select.replaceChildren(new Option(@json(__('orders.choose_product')),''));products.filter(p=>!q||productLabel(p).toLowerCase().includes(q)).slice(0,100).forEach(p=>select.add(new Option(productLabel(p),p.id,false,String(p.id)===String(selected))));}
function renumber(){[...lines.children].forEach((row,index)=>row.querySelectorAll('[data-name]').forEach(el=>el.name='items['+index+']['+el.dataset.name+']'));}
function priceOptions(row,selectedSource){
 const product=products.find(p=>String(p.id)===row.querySelector('.product-select').value);
 const select=row.querySelector('.price-select');select.replaceChildren(new Option(@json(__('orders.choose_price')),''));
 (product?.prices||[]).forEach(p=>{const label=p.type+' · '+p.currency+' '+p.display+(p.includes_vat?' incl. VAT':' + VAT');select.add(new Option(label,'price:'+p.id,false,selectedSource==='price:'+p.id||selectedSource==='company_price:'+p.id));});
 if(canManual)select.add(new Option(@json(__('orders.manual_price')),'manual',false,selectedSource==='manual'));
 select.disabled=!product;syncPrice(row);
}
function syncPrice(row){
 const product=products.find(p=>String(p.id)===row.querySelector('.product-select').value);
 const source=row.querySelector('.price-select').value;
 const price=(product?.prices||[]).find(p=>source==='price:'+p.id||source==='company_price:'+p.id);
 const unit=row.querySelector('.unit-price'),vat=row.querySelector('.vat-rate');
 if(price){unit.value=price.net;vat.value=price.vat;unit.readOnly=true;vat.readOnly=true;}
 else {unit.readOnly=!canManual||source!=='manual';vat.readOnly=!canManual||source!=='manual';if(source==='manual'&&canManual){if(!unit.value)unit.value='0.00';if(!vat.value)vat.value='5';}}
 calculate();
}
function calculate(){
 let subtotal=0,discount=0,vat=0,total=0;
 [...lines.children].forEach(row=>{const qty=parseFloat(row.querySelector('.qty').value)||0,price=parseFloat(row.querySelector('.unit-price').value)||0,rate=Math.min(100,Math.max(0,parseFloat(row.querySelector('.discount').value)||0)),tax=Math.min(100,Math.max(0,parseFloat(row.querySelector('.vat-rate').value)||0));const r2=n=>Math.round((n+Number.EPSILON)*100)/100,gross=r2(qty*price),disc=r2(gross*rate/100),taxable=r2(gross-disc),taxAmount=r2(taxable*tax/100),line=r2(taxable+taxAmount);subtotal+=gross;discount+=disc;vat+=taxAmount;total+=line;row.querySelector('.line-total').textContent=money(line);});
 document.getElementById('sum-subtotal').textContent=money(subtotal);document.getElementById('sum-discount').textContent=money(discount);document.getElementById('sum-vat').textContent=money(vat);document.getElementById('sum-total').textContent=money(total);
}
function addLine(data={}){
 const row=document.createElement('div');row.className='order-line';
 const productField=field(@json(__('orders.product_search')),'product-field'),search=document.createElement('input');search.type='search';search.placeholder=@json(__('orders.sku_placeholder'));search.autocomplete='off';bind(productField,search);
 const selectField=field(@json(__('orders.product')),'product-field'),product=document.createElement('select');product.className='product-select';product.dataset.name='company_product_id';product.required=true;setProducts(product,'',data.company_product_id);bind(selectField,product);
 const priceField=field(@json(__('orders.price')),'price-field'),price=document.createElement('select');price.className='price-select';price.dataset.name='pricing_source';price.required=true;bind(priceField,price);
 const qtyField=field(@json(__('orders.qty'))),qty=document.createElement('input');qty.type='number';qty.min='0.0001';qty.step='0.0001';qty.value=data.quantity||'1';qty.className='qty';qty.dataset.name='quantity';qty.required=true;bind(qtyField,qty);
 const unitField=field(@json(__('orders.net_unit'))),unit=document.createElement('input');unit.type='number';unit.min='0';unit.step='0.0001';unit.value=data.gross_unit_price||'';unit.className='unit-price';unit.dataset.name='gross_unit_price';unit.required=true;bind(unitField,unit);
 const discountField=field(@json(__('orders.discount_pct'))),discount=document.createElement('input');discount.type='number';discount.min='0';discount.max='100';discount.step='0.0001';discount.value=data.discount_rate||'0';discount.className='discount';discount.dataset.name='discount_rate';bind(discountField,discount);
 const vatField=field(@json(__('orders.vat_pct'))),vat=document.createElement('input');vat.type='number';vat.min='0';vat.max='100';vat.step='0.0001';vat.value=data.vat_rate||'5';vat.className='vat-rate';vat.dataset.name='vat_rate';bind(vatField,vat);
 const lineTotal=document.createElement('div');lineTotal.className='line-total';lineTotal.textContent='AED 0.00';
 const remove=document.createElement('button');remove.type='button';remove.className='ui-btn ui-btn--ghost ui-btn--sm line-remove';remove.textContent=@json(__('orders.remove'));remove.setAttribute('aria-label',@json(__('orders.remove')));
 row.append(productField,selectField,priceField,qtyField,unitField,discountField,vatField,lineTotal,remove);lines.append(row);renumber();priceOptions(row,data.pricing_source||'');
 search.addEventListener('input',()=>setProducts(product,search.value,product.value));product.addEventListener('change',()=>priceOptions(row,''));price.addEventListener('change',()=>syncPrice(row));row.addEventListener('input',calculate);remove.addEventListener('click',()=>{if(lines.children.length>1){row.remove();renumber();calculate();}});
 calculate();
}
document.getElementById('add-line').addEventListener('click',()=>addLine());
(previous.length?previous:[{}]).forEach(addLine);
})();
</script>
@endsection