{{--
  Interactive deal structuring calculator. Inputs are sent to POST /deals/calculate (FinanceCalculator on the server) after a short pause,
  so the numbers shown are exactly what will be saved. Used on the quick calculator page ($mode = 'quick') and on the deal edit form ($mode = 'deal').
--}}
@php
    $d = $deal ?? null;
    $init = [
        'mode' => $mode, 'dealId' => $d?->id, 'vehicleId' => $d?->vehicle_id ?? ($vehicleId ?? ''),
        'payment_type' => old('payment_type', $d?->payment_type ?? 'cash'),
        'discount_mode' => old('discount_mode', 'amount'), 'discount_value' => old('discount_value', $d ? (float) $d->discount_amount : ''),
        'tax_rate_id' => old('tax_rate_id', $d?->tax_rate_id ?? ($taxRates->firstWhere('is_default', true)->id ?? '')), 'tax_inclusive' => (bool) old('tax_inclusive', $d?->tax_inclusive ?? true),
        'trade_in_id' => old('trade_in_id', $d?->trade_in_id ?? ''), 'trade_in_value' => '', 'trade_in_payoff' => '',
        'deposit_mode' => old('deposit_mode', 'amount'), 'deposit_value' => old('deposit_value', $d ? (float) $d->deposit_required : ''),
        'interest_rate' => old('interest_rate', $d && $d->payment_type === 'finance' ? (float) $d->interest_rate : 14), 'interest_method' => old('interest_method', $d?->interest_method ?? 'reducing'),
        'term_months' => old('term_months', $d?->term_months ?? 48), 'finance_fee' => old('finance_fee', $d ? (float) $d->finance_fee : ''),
        'first_payment_date' => old('first_payment_date', optional($d?->first_payment_date)->toDateString() ?? ''),
        'list_price' => '',
        'items' => old('items', $d ? $d->items->map(fn ($i) => ['type' => $i->type, 'description' => $i->description, 'quantity' => $i->quantity, 'unit_price' => (float) $i->unit_price, 'taxable' => $i->taxable ? '1' : '0'])->all() : []),
        'prices' => isset($vehicles) ? $vehicles->mapWithKeys(fn ($v) => [$v->id => (float) $v->selling_price])->all() : [],
        'url' => route('deals.calculate'),
    ];
@endphp

<div x-data="dealCalc(@js($init))" class="grid gap-6 lg:grid-cols-5">
<div class="space-y-6 lg:col-span-3">

    @if ($mode === 'quick')
    <fieldset class="grid gap-3 sm:grid-cols-3">
        <legend class="mb-1 text-base font-semibold">Vehicle</legend>
        <div class="sm:col-span-2"><label for="c_veh" class="mb-1 block text-sm font-medium">Vehicle in stock</label>
            <select id="c_veh" x-model="f.vehicleId" @change="vehicleChanged()" class="field"><option value="">Type a price instead</option>
                @foreach ($vehicles as $v)<option value="{{ $v->id }}">{{ $v->stock_id }} · {{ $v->display_name }} · KSh {{ number_format((float) $v->selling_price) }}</option>@endforeach</select></div>
        <div x-show="!f.vehicleId" x-cloak><label for="c_price" class="mb-1 block text-sm font-medium">Price (KES)</label><input id="c_price" type="number" min="0" x-model="f.list_price" class="field"></div>
    </fieldset>
    @endif

    <fieldset class="grid gap-3 sm:grid-cols-3">
        <legend class="mb-1 text-base font-semibold">Discount and tax</legend>
        <div><label for="c_dm" class="mb-1 block text-sm font-medium">Discount as</label>
            <select id="c_dm" name="discount_mode" x-model="f.discount_mode" class="field"><option value="amount">Amount (KES)</option><option value="percent">Percent</option></select></div>
        <div><label for="c_dv" class="mb-1 block text-sm font-medium">Discount</label><input id="c_dv" name="discount_value" type="number" min="0" step="0.01" x-model="f.discount_value" class="field"></div>
        <div class="sm:col-span-3" x-show="@js($mode === 'deal')"><label for="c_dr" class="mb-1 block text-sm font-medium">Reason for the discount <span class="font-normal text-muted">(the approver reads this)</span></label>
            <input id="c_dr" name="discount_reason" maxlength="255" value="{{ old('discount_reason', $d?->discount_reason) }}" class="field"></div>
        <div><label for="c_tax" class="mb-1 block text-sm font-medium">Tax</label>
            <select id="c_tax" name="tax_rate_id" x-model="f.tax_rate_id" class="field"><option value="">No tax</option>@foreach ($taxRates as $r)<option value="{{ $r->id }}">{{ $r->name }} ({{ rtrim(rtrim($r->rate, '0'), '.') }}%)</option>@endforeach</select></div>
        <label class="flex items-end gap-2 pb-2 text-sm"><input type="checkbox" name="tax_inclusive" value="1" x-model="f.tax_inclusive" class="rounded border-line"> Prices include tax</label>
    </fieldset>

    <fieldset>
        <legend class="mb-1 text-base font-semibold">Add-ons and fees</legend>
        <p class="mb-2 text-xs text-muted">Insurance, warranty, tracker, accessories, registration or transfer fees.</p>
        <template x-for="(it, i) in f.items" :key="it.k">
            <div class="mb-2 grid gap-2 sm:grid-cols-12">
                <select :name="`items[${i}][type]`" x-model="it.type" class="field sm:col-span-2" aria-label="Type">@foreach (config('deals.item_types') as $k => $l)<option value="{{ $k }}">{{ $l }}</option>@endforeach</select>
                <input :name="`items[${i}][description]`" x-model="it.description" placeholder="Description" maxlength="200" class="field sm:col-span-4" aria-label="Description">
                <input :name="`items[${i}][quantity]`" x-model="it.quantity" type="number" min="1" max="20" class="field sm:col-span-1" aria-label="Quantity">
                <input :name="`items[${i}][unit_price]`" x-model="it.unit_price" type="number" min="0" step="0.01" placeholder="Price" class="field sm:col-span-2" aria-label="Unit price">
                <select :name="`items[${i}][taxable]`" x-model="it.taxable" class="field sm:col-span-2" aria-label="Taxable"><option value="1">Taxable</option><option value="0">No tax</option></select>
                <button type="button" class="btn-quiet px-2 sm:col-span-1" @click="f.items.splice(i, 1)" aria-label="Remove this line">Remove</button>
            </div>
        </template>
        <button type="button" class="btn-quiet" @click="addItem()">Add a line</button>
    </fieldset>

    <fieldset class="grid gap-3 sm:grid-cols-3">
        <legend class="mb-1 text-base font-semibold">Trade-in</legend>
        @if ($mode === 'deal')
            <div class="sm:col-span-3"><label for="c_ti" class="mb-1 block text-sm font-medium">Accepted appraisal</label>
                <select id="c_ti" name="trade_in_id" x-model="f.trade_in_id" class="field"><option value="">No trade-in</option>
                    @foreach ($tradeIns as $t)<option value="{{ $t->id }}">{{ $t->display_name }} · offered KSh {{ number_format((float) $t->offered_value) }}{{ $t->has_outstanding_finance ? ' less loan KSh '.number_format((float) $t->outstanding_balance) : '' }}</option>@endforeach</select>
                @if ($tradeIns->isEmpty())<p class="mt-1 text-xs text-muted">None available. Appraise the customer's vehicle and have them accept the offer first.</p>@endif</div>
        @else
            <div><label for="c_tv" class="mb-1 block text-sm font-medium">Trade-in value (KES)</label><input id="c_tv" type="number" min="0" x-model="f.trade_in_value" class="field"></div>
            <div><label for="c_tp" class="mb-1 block text-sm font-medium">Loan still owed on it</label><input id="c_tp" type="number" min="0" x-model="f.trade_in_payoff" class="field"></div>
        @endif
    </fieldset>

    <fieldset class="grid gap-3 sm:grid-cols-3">
        <legend class="mb-1 text-base font-semibold">Payment</legend>
        <div class="sm:col-span-3 flex gap-4 text-sm">
            <label class="flex items-center gap-2"><input type="radio" name="payment_type" value="cash" x-model="f.payment_type"> Cash</label>
            <label class="flex items-center gap-2"><input type="radio" name="payment_type" value="finance" x-model="f.payment_type"> Finance / hire purchase</label>
        </div>
        <div><label for="c_depm" class="mb-1 block text-sm font-medium">Deposit as</label>
            <select id="c_depm" name="deposit_mode" x-model="f.deposit_mode" class="field"><option value="amount">Amount (KES)</option><option value="percent">Percent of total</option></select></div>
        <div><label for="c_dep" class="mb-1 block text-sm font-medium">Deposit</label><input id="c_dep" name="deposit_value" type="number" min="0" step="0.01" x-model="f.deposit_value" class="field"></div>
    </fieldset>

    <fieldset class="grid gap-3 sm:grid-cols-3" x-show="f.payment_type === 'finance'" x-cloak>
        <legend class="mb-1 text-base font-semibold">Finance terms</legend>
        <div><label for="c_ir" class="mb-1 block text-sm font-medium">Interest rate (% a year)</label><input id="c_ir" name="interest_rate" type="number" min="0" step="0.01" x-model="f.interest_rate" class="field"></div>
        <div><label for="c_im" class="mb-1 block text-sm font-medium">Interest method</label>
            <select id="c_im" name="interest_method" x-model="f.interest_method" class="field">@foreach (config('deals.interest_methods') as $k => $l)<option value="{{ $k }}">{{ $l }}</option>@endforeach</select></div>
        <div><label for="c_tm" class="mb-1 block text-sm font-medium">Term (months)</label><input id="c_tm" name="term_months" type="number" min="1" max="{{ config('deals.max_term_months') }}" x-model="f.term_months" class="field"></div>
        <div><label for="c_ff" class="mb-1 block text-sm font-medium">Arrangement fee (KES, added to the loan)</label><input id="c_ff" name="finance_fee" type="number" min="0" step="0.01" x-model="f.finance_fee" class="field"></div>
        <div><label for="c_fp" class="mb-1 block text-sm font-medium">First payment date</label><input id="c_fp" name="first_payment_date" type="date" min="{{ today()->addDay()->toDateString() }}" x-model="f.first_payment_date" class="field"></div>
        @if ($mode === 'deal')
        <div><label for="c_fn" class="mb-1 block text-sm font-medium">Lender (bank or SACCO)</label><input id="c_fn" name="financier_name" maxlength="100" value="{{ old('financier_name', $d?->financier_name) }}" class="field"></div>
        <div><label for="c_fr" class="mb-1 block text-sm font-medium">Lender reference</label><input id="c_fr" name="financier_reference" maxlength="60" value="{{ old('financier_reference', $d?->financier_reference) }}" class="field"></div>
        @endif
    </fieldset>
</div>

{{-- Live summary --}}
<aside class="lg:col-span-2" aria-live="polite" aria-label="Deal summary">
    <div class="sticky top-20 rounded-lg border border-line bg-panel p-4">
        <h2 class="text-sm font-semibold">Summary <span x-show="busy" x-cloak class="ml-1 text-xs font-normal text-muted">updating…</span></h2>

        <template x-if="r && r.errors && r.errors.length"><ul class="mt-2 list-disc space-y-1 rounded-md border border-stop/30 bg-stop/10 py-2 pl-6 pr-3 text-sm text-stop"><template x-for="e in r.errors"><li x-text="e"></li></template></ul></template>
        <template x-if="r && r.warnings && r.warnings.length"><ul class="mt-2 list-disc space-y-1 rounded-md border border-amber-300 bg-amber-50 py-2 pl-6 pr-3 text-sm text-amber-900"><template x-for="w in r.warnings"><li x-text="w"></li></template></ul></template>
        <template x-if="r && r.approval && r.approval.level"><p class="mt-2 rounded-md border border-sky-300 bg-sky-50 p-2 text-sm text-sky-900">This discount (<span x-text="r.approval.percent"></span>%) needs <strong x-text="r.approval.level"></strong> approval before the deal can go ahead.</p></template>

        <template x-if="r">
        <dl class="mt-3 space-y-1.5 text-sm">
            <div class="flex justify-between"><dt class="text-muted">Vehicle price</dt><dd x-text="money(r.list_price)"></dd></div>
            <div class="flex justify-between" x-show="num(r.discount) > 0"><dt class="text-muted">Discount (<span x-text="r.discount_percent"></span>%)</dt><dd class="text-stop" x-text="'− ' + money(r.discount)"></dd></div>
            <div class="flex justify-between" x-show="num(r.items_taxable) + num(r.items_nontaxable) > 0"><dt class="text-muted">Add-ons and fees</dt><dd x-text="money(num(r.items_taxable) + num(r.items_nontaxable))"></dd></div>
            <div class="flex justify-between" x-show="num(r.tax) > 0"><dt class="text-muted" x-text="r.tax_inclusive ? 'of which tax' : 'Tax added'"></dt><dd x-text="money(r.tax)"></dd></div>
            <div class="flex justify-between border-t border-line pt-1.5 font-semibold"><dt>Total price</dt><dd x-text="money(r.total)"></dd></div>
            <div class="flex justify-between" x-show="num(r.trade_in_credit) != 0"><dt class="text-muted">Trade-in credit</dt><dd x-text="'− ' + money(r.trade_in_credit)"></dd></div>
            <div class="flex justify-between" x-show="num(r.deposit) > 0"><dt class="text-muted">Deposit (<span x-text="r.deposit_percent"></span>%)</dt><dd x-text="'− ' + money(r.deposit)"></dd></div>
            <div class="flex justify-between border-t border-line pt-1.5 font-semibold"><dt x-text="r.finance ? 'Amount financed' : 'Balance to pay'"></dt><dd x-text="money(r.finance ? r.finance.principal : r.balance)"></dd></div>
        </dl>
        </template>

        <template x-if="r && r.finance">
            <div class="mt-4 rounded-md bg-ink p-3 text-white">
                <p class="text-xs text-white/70">Monthly instalment</p>
                <p class="text-2xl font-bold" x-text="money(r.finance.installment)"></p>
                <p class="text-xs text-white/70">for <span x-text="r.finance.term"></span> months<span x-show="r.finance.method === 'flat'"> (flat rate)</span></p>
                <dl class="mt-3 space-y-1 text-sm">
                    <div class="flex justify-between"><dt class="text-white/70">Total interest</dt><dd x-text="money(r.finance.total_interest)"></dd></div>
                    <div class="flex justify-between"><dt class="text-white/70">Total to repay</dt><dd x-text="money(r.finance.total_repayable)"></dd></div>
                    <div class="flex justify-between"><dt class="text-white/70">True yearly cost</dt><dd><span x-text="r.finance.effective_rate"></span>%</dd></div>
                </dl>
                <p class="mt-2 text-xs text-white/60">True yearly cost lets you compare flat and reducing-balance quotes fairly. A flat rate costs more than the same number on a reducing balance.</p>
            </div>
        </template>

        <template x-if="r && r.finance && r.finance.schedule">
            <details class="mt-3 text-sm"><summary class="cursor-pointer font-medium">Payment schedule</summary>
                <div class="mt-2 max-h-72 overflow-auto"><table class="min-w-full text-left text-xs"><caption class="sr-only">Instalment schedule</caption>
                    <thead class="sticky top-0 bg-panel text-muted"><tr><th scope="col" class="py-1 pr-2">#</th><th scope="col" class="py-1 pr-2">Due</th><th scope="col" class="py-1 pr-2 text-right">Instalment</th><th scope="col" class="py-1 pr-2 text-right">Interest</th><th scope="col" class="py-1 text-right">Balance</th></tr></thead>
                    <tbody><template x-for="row in r.finance.schedule" :key="row.n"><tr class="border-t border-line"><td class="py-1 pr-2" x-text="row.n"></td><td class="py-1 pr-2" x-text="row.due_date"></td><td class="py-1 pr-2 text-right" x-text="money(row.installment)"></td><td class="py-1 pr-2 text-right" x-text="money(row.interest)"></td><td class="py-1 text-right" x-text="money(row.closing)"></td></tr></template></tbody></table></div>
            </details>
        </template>

        <p x-show="!r" class="mt-3 text-sm text-muted">Fill in the details and the figures appear here.</p>
    </div>
</aside>
</div>

@once
<script>
    function dealCalc(init) {
        let key = 0;
        const withKeys = items => (items || []).map(i => ({ k: ++key, ...i }));
        return {
            f: { ...init, items: withKeys(init.items) }, r: null, busy: false, timer: null, seq: 0,
            init() {
                this.$watch('f', () => this.schedule(), { deep: true });
                this.schedule(0);
            },
            addItem() { this.f.items.push({ k: ++key, type: 'accessory', description: '', quantity: 1, unit_price: '', taxable: '1' }); },
            vehicleChanged() { if (this.f.vehicleId && this.f.prices[this.f.vehicleId]) this.f.list_price = this.f.prices[this.f.vehicleId]; },
            schedule(wait = 350) { clearTimeout(this.timer); this.timer = setTimeout(() => this.run(), wait); },
            async run() {
                const f = this.f, mine = ++this.seq;
                if (f.mode === 'quick' && !f.vehicleId && !(parseFloat(f.list_price) > 0)) { this.r = null; return; }
                this.busy = true;
                const body = {
                    vehicle_id: f.vehicleId || null, deal_id: f.dealId || null, list_price: f.list_price || null,
                    discount_mode: f.discount_mode, discount_value: f.discount_value || 0, tax_rate_id: f.tax_rate_id || null, tax_inclusive: !!f.tax_inclusive,
                    trade_in_id: f.trade_in_id || null, trade_in_value: f.trade_in_value || 0, trade_in_payoff: f.trade_in_payoff || 0,
                    deposit_mode: f.deposit_mode, deposit_value: f.deposit_value || 0, payment_type: f.payment_type,
                    interest_rate: f.interest_rate || 0, interest_method: f.interest_method, term_months: f.term_months || 0, finance_fee: f.finance_fee || 0,
                    first_payment_date: f.first_payment_date || null,
                    items: f.items.map(i => ({ quantity: i.quantity || 1, unit_price: i.unit_price || 0, taxable: i.taxable === '1' || i.taxable === 1 || i.taxable === true })),
                };
                try {
                    const res = await fetch(f.url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content }, body: JSON.stringify(body) });
                    const data = await res.json();
                    if (mine === this.seq) this.r = res.ok ? data : { errors: Object.values(data.errors || { e: ['Check the figures you entered.'] }).flat(), warnings: [] };
                } catch (e) { if (mine === this.seq) this.r = { errors: ['Could not reach the server. Check your connection.'], warnings: [] }; }
                if (mine === this.seq) this.busy = false;
            },
            num(v) { return parseFloat(v || 0); },
            money(v) { return 'KSh ' + Number(v || 0).toLocaleString('en-KE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); },
        };
    }
</script>
@endonce