@php
    $editing = isset($invoice);
    $quotationMode = !$editing && request('mode') === 'quotation';
    $initialItems = $editing
        ? $invoice->items->map(fn($item) => [
            'description' => $item->description, 'quantity' => $item->quantity, 'rate' => $item->unit_price,
            'discount' => $item->discount_amount ?? 0, 'vat_rate' => $item->vat_rate ?? 0,
            'fee_type' => match($item->fee_type) {'gov_fee'=>'government_fee','typing_fee'=>'typing_fee','service_charge'=>'service_revenue',default=>$item->fee_type},
            'account_id' => $item->account_id,
        ])->values()->all()
        : [
            ['description' => 'Government / authority fee', 'quantity' => 1, 'rate' => '', 'discount' => 0, 'vat_rate' => 0, 'fee_type' => 'government_fee', 'account_id' => ''],
            ['description' => 'Typing / professional service charge', 'quantity' => 1, 'rate' => '', 'discount' => 0, 'vat_rate' => 5, 'fee_type' => 'service_revenue', 'account_id' => ''],
        ];
    $formAction = $editing ? route('app.billing.invoices.update', $invoice) : ($quotationMode ? route('app.finance.quotations.store') : route('app.finance.invoices.store'));
@endphp
<form method="POST" action="{{ $formAction }}" x-data="invoiceComposer(@js($initialItems))" class="space-y-6">
    @csrf
    @if($editing) @method('PUT') @endif
    <section class="grid gap-5 xl:grid-cols-[1fr_320px]">
        <div class="space-y-5">
            <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex flex-wrap items-center justify-between gap-3"><div><h2 class="font-extrabold">Customer & document</h2><p class="text-xs text-slate-400">Choose an individual or corporate account; quick-create is available for new walk-ins.</p></div><span class="rounded-full bg-emerald-50 px-3 py-1 text-[10px] font-bold uppercase text-emerald-700">{{ $quotationMode ? 'Quotation' : ($editing ? 'Revision V'.($invoice->version+1) : 'Draft Invoice') }}</span></div>
                <div class="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                    <label class="text-xs font-bold text-slate-500">Individual customer<select name="customer_id" class="mt-1 w-full rounded-xl border-slate-200 text-sm"><option value="">None / quick customer</option>@foreach($customers as $customer)<option value="{{ $customer->id }}" @selected(old('customer_id',$invoice->customer_id??null)==$customer->id)>{{ $customer->customer_code }} — {{ $customer->full_name_en }}</option>@endforeach</select></label>
                    <label class="text-xs font-bold text-slate-500">Corporate client<select name="company_id" class="mt-1 w-full rounded-xl border-slate-200 text-sm"><option value="">None</option>@foreach($companies as $company)<option value="{{ $company->id }}" @selected(old('company_id',$invoice->company_id??null)==$company->id)>{{ $company->company_code }} — {{ $company->name_en }}</option>@endforeach</select></label>
                    <label class="text-xs font-bold text-slate-500">Branch<select name="branch_id" class="mt-1 w-full rounded-xl border-slate-200 text-sm"><option value="">Default branch</option>@foreach($branches as $branch)<option value="{{ $branch->id }}" @selected(old('branch_id',$invoice->branch_id??auth()->user()->default_branch_id)==$branch->id)>{{ $branch->name }}</option>@endforeach</select></label>
                    @unless($editing)<label class="text-xs font-bold text-slate-500">Quick customer name<input name="quick_customer_name" value="{{ old('quick_customer_name') }}" placeholder="Full name" class="mt-1 w-full rounded-xl border-slate-200 text-sm"></label><label class="text-xs font-bold text-slate-500">Quick mobile<input name="quick_customer_mobile" value="{{ old('quick_customer_mobile') }}" placeholder="+971…" class="mt-1 w-full rounded-xl border-slate-200 text-sm"></label><label class="text-xs font-bold text-slate-500">Quick email<input name="quick_customer_email" value="{{ old('quick_customer_email') }}" type="email" placeholder="name@example.com" class="mt-1 w-full rounded-xl border-slate-200 text-sm"></label>@endunless
                    @if($quotationMode)
                        <label class="text-xs font-bold text-slate-500">Quotation date<input type="date" name="quotation_date" value="{{ old('quotation_date',date('Y-m-d')) }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm"></label>
                        <label class="text-xs font-bold text-slate-500">Expires on<input type="date" name="expires_on" value="{{ old('expires_on',now()->addDays(30)->format('Y-m-d')) }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm"></label>
                    @else
                        <label class="text-xs font-bold text-slate-500">Invoice date<input type="date" name="invoice_date" value="{{ old('invoice_date',isset($invoice)?$invoice->invoice_date->format('Y-m-d'):date('Y-m-d')) }}" required class="mt-1 w-full rounded-xl border-slate-200 text-sm"></label>
                        <label class="text-xs font-bold text-slate-500">Due date<input type="date" name="due_date" value="{{ old('due_date',isset($invoice)?$invoice->due_date?->format('Y-m-d'):date('Y-m-d')) }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm"></label>
                        <label class="text-xs font-bold text-slate-500">Payment terms<select name="payment_terms_days" class="mt-1 w-full rounded-xl border-slate-200 text-sm">@foreach([0=>'Immediate',7=>'7 days',15=>'15 days',30=>'30 days',45=>'45 days',60=>'60 days'] as $days=>$label)<option value="{{ $days }}">{{ $label }}</option>@endforeach</select></label>
                    @endif
                    <label class="text-xs font-bold text-slate-500">Reference number<input name="reference_number" value="{{ old('reference_number',$invoice->reference_number??'') }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm"></label>
                    <label class="text-xs font-bold text-slate-500">Purchase order<input name="purchase_order_number" value="{{ old('purchase_order_number',$invoice->purchase_order_number??'') }}" class="mt-1 w-full rounded-xl border-slate-200 text-sm"></label>
                </div>
            </div>

            <div class="rounded-3xl border border-slate-200 bg-white shadow-sm">
                <div class="flex items-center justify-between border-b border-slate-200 p-5"><div><h2 class="font-extrabold">Line items</h2><p class="text-xs text-slate-400">Government fees remain clearing liabilities; only service lines become revenue.</p></div><button type="button" @click="addLine()" class="rounded-xl bg-emerald-600 px-3 py-2 text-xs font-bold text-white">+ Add line</button></div>
                <div class="overflow-x-auto"><table class="min-w-[1160px] w-full text-xs"><thead class="bg-slate-50 uppercase text-slate-400"><tr><th class="p-3 text-left">Description</th><th class="p-3 text-left">Fee type</th><th class="p-3 text-left">Account mapping</th><th class="p-3 text-center">Qty</th><th class="p-3 text-right">Rate</th><th class="p-3 text-right">Discount</th><th class="p-3 text-right">VAT %</th><th class="p-3 text-right">Amount</th><th></th></tr></thead><tbody>
                    <template x-for="(item,index) in items" :key="index"><tr class="border-t border-slate-100 align-top"><td class="p-2"><input x-model="item.description" :name="`items[${index}][description]`" required class="w-full rounded-lg border-slate-200 text-xs"></td><td class="p-2"><select x-model="item.fee_type" :name="`items[${index}][fee_type]`" class="w-full rounded-lg border-slate-200 text-xs" @change="if(['government_fee','pass_through_cost'].includes(item.fee_type)){item.vat_rate=0}"><option value="government_fee">Government fee</option><option value="typing_fee">Typing fee</option><option value="service_revenue">Service revenue</option><option value="other_revenue">Other revenue</option><option value="pass_through_cost">Pass-through</option><option value="expense_reimbursement">Expense reimbursement</option><option value="miscellaneous">Miscellaneous</option></select></td><td class="p-2"><select x-model="item.account_id" :name="`items[${index}][account_id]`" class="w-44 rounded-lg border-slate-200 text-[10px]"><option value="">Automatic mapping</option>@foreach($accounts as $account)<option value="{{ $account->id }}">{{ $account->account_code }} — {{ $account->account_name }}</option>@endforeach</select></td><td class="p-2"><input x-model.number="item.quantity" :name="`items[${index}][quantity]`" type="number" min="1" required class="w-16 rounded-lg border-slate-200 text-center text-xs"></td><td class="p-2"><input x-model="item.rate" :name="`items[${index}][rate]`" type="number" step="0.01" min="0" required class="w-24 rounded-lg border-slate-200 text-right text-xs"></td><td class="p-2"><input x-model="item.discount" :name="`items[${index}][discount]`" type="number" step="0.01" min="0" class="w-24 rounded-lg border-slate-200 text-right text-xs"></td><td class="p-2"><input x-model="item.vat_rate" :name="`items[${index}][vat_rate]`" type="number" step="0.01" min="0" max="100" class="w-20 rounded-lg border-slate-200 text-right text-xs"></td><td class="p-3 text-right font-black" x-text="money(lineTotal(item))"></td><td class="p-2"><button type="button" @click="removeLine(index)" x-show="items.length>1" class="rounded-lg p-2 font-bold text-rose-500">×</button></td></tr></template>
                </tbody></table></div>
                <div class="border-t border-slate-200 bg-slate-50 p-4"><div class="flex flex-wrap gap-2">@foreach([['Custom line','miscellaneous'],['Service','service_revenue'],['Government fee','government_fee'],['Expense reimbursement','expense_reimbursement']] as [$label,$type])<button type="button" @click="addLine('{{ $type }}','{{ $label }}')" class="rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-[10px] font-bold">+ {{ $label }}</button>@endforeach</div></div>
            </div>

            <div class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm"><h2 class="font-extrabold">Notes & terms</h2><div class="mt-4 grid gap-3 md:grid-cols-2"><textarea name="notes" rows="4" placeholder="Internal/customer notes" class="rounded-xl border-slate-200 text-sm">{{ old('notes',$invoice->notes??'') }}</textarea><textarea name="terms_and_conditions" rows="4" placeholder="Terms and conditions" class="rounded-xl border-slate-200 text-sm">{{ old('terms_and_conditions',$invoice->terms_and_conditions??'') }}</textarea></div>@if($editing)<label class="mt-4 block text-xs font-bold text-rose-600">Revision reason<input name="revision_reason" required placeholder="Explain why this revision is necessary" class="mt-1 w-full rounded-xl border-rose-200 text-sm"></label>@endif</div>
        </div>

        <aside class="h-fit rounded-3xl border border-slate-200 bg-white p-5 shadow-sm xl:sticky xl:top-4"><p class="text-[10px] font-extrabold uppercase tracking-[.18em] text-emerald-600">Document summary</p><h2 class="mt-1 text-xl font-black">AED <span x-text="money(grandTotal())"></span></h2><div class="mt-5 space-y-3 text-sm"><div class="flex justify-between"><span class="text-slate-500">Subtotal</span><strong>AED <span x-text="money(subtotal())"></span></strong></div><div class="flex justify-between"><span class="text-slate-500">Discount</span><strong class="text-rose-600">− AED <span x-text="money(discountTotal())"></span></strong></div><div class="flex justify-between"><span class="text-slate-500">Taxable value</span><strong>AED <span x-text="money(taxableValue())"></span></strong></div><div class="flex justify-between"><span class="text-slate-500">VAT</span><strong class="text-violet-600">AED <span x-text="money(vatTotal())"></span></strong></div><div class="border-t border-slate-200 pt-3 flex justify-between text-base"><span class="font-extrabold">Grand total</span><strong>AED <span x-text="money(grandTotal())"></span></strong></div></div><div class="mt-5 rounded-xl bg-amber-50 p-3 text-[11px] text-amber-800"><strong>Accounting rule:</strong> government and pass-through lines credit Government Fee Clearing, never company revenue.</div><button class="mt-5 w-full rounded-xl bg-emerald-600 py-3 text-xs font-extrabold text-white">{{ $quotationMode ? 'Save Quotation' : ($editing ? 'Save Audited Revision' : 'Save Draft Invoice') }}</button><a href="{{ route('app.billing.invoices.index') }}" class="mt-2 block text-center text-xs font-bold text-slate-400">Cancel</a></aside>
    </section>
</form>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('invoiceComposer', (initialItems) => ({
        items: initialItems,
        number(value){ return Math.max(0, parseFloat(value) || 0) },
        subtotal(){ return this.items.reduce((sum,item)=>sum+(this.number(item.quantity)*this.number(item.rate)),0) },
        discountTotal(){ return this.items.reduce((sum,item)=>sum+Math.min(this.number(item.discount),this.number(item.quantity)*this.number(item.rate)),0) },
        taxableValue(){ return this.subtotal()-this.discountTotal() },
        vatTotal(){ return this.items.reduce((sum,item)=>{ const taxable=Math.max(0,this.number(item.quantity)*this.number(item.rate)-this.number(item.discount)); return sum+(taxable*this.number(item.vat_rate)/100) },0) },
        grandTotal(){ return this.taxableValue()+this.vatTotal() },
        lineTotal(item){ const taxable=Math.max(0,this.number(item.quantity)*this.number(item.rate)-this.number(item.discount)); return taxable+(taxable*this.number(item.vat_rate)/100) },
        money(value){ return this.number(value).toLocaleString('en-AE',{minimumFractionDigits:2,maximumFractionDigits:2}) },
        addLine(type='service_revenue',description=''){ this.items.push({description,quantity:1,rate:'',discount:0,vat_rate:['government_fee','pass_through_cost'].includes(type)?0:5,fee_type:type,account_id:''}) },
        removeLine(index){ if(this.items.length>1)this.items.splice(index,1) },
    }))
})
</script>