@php
    $editing = (bool) $quotation;
    $addonLabels = collect(\App\Services\Insurance\PremiumCalculator::HDFC_ADDONS)->map(fn ($a) => $a[0])->all();
    $addonHints = [
        'zero_dep' => 'Claims paid without depreciation on parts',
        'ncb_pro' => 'Keeps the no-claim bonus after a claim',
        'engine_gbox' => 'Covers engine & gearbox damage (e.g. water ingress)',
        'cost_rate' => 'Nuts, bolts, oil, coolant and other consumables',
        'return_invoice' => 'Total loss paid at the invoice value',
    ];
    $config = [
        'state' => $state,
        'urls' => ['preview' => route('quotations.preview'), 'vehicles' => route('quotations.vehicles')],
        'plans' => $plans,
        'planCovers' => $planCovers,
        'ncbSlabs' => \App\Services\Insurance\PremiumCalculator::NCB_SLABS,
        'ncbLadder' => \App\Services\Insurance\PremiumCalculator::NCB_LADDER,
        'addonLabels' => $addonLabels,
        'editing' => $editing,
    ];
@endphp
<x-layouts.app :title="$editing ? 'Edit quotation '.$quotation->quotation_no : 'Create quotation'"
               :subtitle="$editing ? 'Changes update this quotation — premiums are recalculated on save.' : 'Private car package policy — HDFC ERGO or TATA AIG.'"
               :breadcrumbs="['Insurance' => null, 'Quotations' => route('quotations.index'), ($editing ? $quotation->quotation_no : 'New') => null]">
    @if ($editing)
        <x-slot:actions>
            <a href="{{ route('quotations.show', $quotation) }}" class="btn btn-secondary"><x-heroicon-m-arrow-left class="h-4 w-4" /> Back to quotation</a>
        </x-slot:actions>
    @endif

    <form method="POST" action="{{ $editing ? route('quotations.update', $quotation) : route('quotations.store') }}"
          x-data="quoteBuilder(@js($config))" @submit="submitting = true" class="grid gap-6 xl:grid-cols-3" novalidate>
        @csrf
        @if ($editing) @method('PUT') @endif
        <input type="hidden" name="insurer" :value="f.insurer">
        <input type="hidden" name="claimed_last_year" :value="f.claimed_last_year ? 1 : 0">
        <input type="hidden" name="rsa" :value="f.rsa ? 1 : 0">
        <template x-for="(on, key) in f.addons" :key="key"><input type="hidden" :name="`addons[${key}]`" :value="on ? 1 : 0"></template>

        <div class="space-y-6 xl:col-span-2">
            {{-- ============ Insurer ============ --}}
            <x-card title="Insurer & plan" subtitle="Choose the insurance company; TATA AIG quotations are priced as package plans.">
                <div class="grid gap-3 sm:grid-cols-2">
                    @foreach (\App\Services\Insurance\PremiumCalculator::INSURERS as $key => $label)
                        <button type="button" @click="setInsurer('{{ $key }}')"
                                class="flex items-center gap-3 rounded-2xl border p-4 text-left transition"
                                :class="f.insurer === '{{ $key }}' ? 'border-brand-500 bg-brand-50/70 ring-4 ring-brand-500/10 dark:bg-brand-500/10' : 'border-ink-200 hover:border-ink-300 dark:border-ink-700'">
                            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $key === 'tata' ? 'bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300' : 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' }}">
                                <x-heroicon-s-shield-check class="h-5 w-5" />
                            </span>
                            <span class="min-w-0 flex-1">
                                <span class="block text-sm font-semibold text-ink-900 dark:text-white">{{ $label }}</span>
                                <span class="block text-xs text-ink-500">{{ $key === 'tata' ? 'Pearl / Sapphire package plans' : 'Individual add-on covers' }}</span>
                            </span>
                            <x-heroicon-s-check-circle class="h-5 w-5 text-brand-500" x-show="f.insurer === '{{ $key }}'" />
                        </button>
                    @endforeach
                </div>

                <div x-show="f.insurer === 'tata'" x-collapse class="mt-5">
                    <label class="form-label">TATA AIG plan <span class="text-rose-500">*</span></label>
                    <input type="hidden" name="plan" :value="f.insurer === 'tata' ? f.plan : ''">
                    <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                        <template x-for="(label, key) in plans" :key="key">
                            <button type="button" @click="f.plan = key; reprice()"
                                    class="rounded-xl border px-3 py-2.5 text-left transition"
                                    :class="f.plan === key ? 'border-sky-500 bg-sky-50 ring-4 ring-sky-500/10 dark:bg-sky-500/10' : 'border-ink-200 hover:border-ink-300 dark:border-ink-700'">
                                <span class="block text-sm font-medium text-ink-900 dark:text-white" x-text="label"></span>
                                <span class="block text-xs text-ink-500" x-text="quote?.plan_rates?.[key] !== undefined ? quote.plan_rates[key] + '% of IDV' : (planCovers[key]?.length || 0) + ' covers'"></span>
                            </button>
                        </template>
                    </div>
                    @error('plan')<p class="form-error">{{ $message }}</p>@enderror
                </div>
            </x-card>

            {{-- ============ Vehicle ============ --}}
            <x-card title="Vehicle">
                <x-slot:actions>
                    <div class="relative w-72 max-w-full" @click.outside="searchOpen = false">
                        <x-heroicon-o-magnifying-glass class="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-ink-400" />
                        <input type="search" x-model="search" @input.debounce.300ms="searchVehicles()" @focus="searchOpen = results.length > 0"
                               @keydown.escape="searchOpen = false" placeholder="Quick search: swift vxi, creta…" class="form-input form-input-sm py-2 pl-9" autocomplete="off">
                        <div x-cloak x-show="searchOpen" x-transition class="absolute right-0 z-20 mt-1 max-h-80 w-full min-w-[20rem] overflow-y-auto rounded-xl border border-ink-200 bg-white p-1 shadow-xl dark:border-ink-700 dark:bg-ink-900">
                            <template x-for="car in results" :key="car.id">
                                <button type="button" @click="pickVehicle(car)" class="block w-full rounded-lg px-3 py-2 text-left hover:bg-brand-50 dark:hover:bg-ink-800">
                                    <span class="block text-sm font-medium text-ink-900 dark:text-white" x-text="`${car.mfg_name} ${car.model}`"></span>
                                    <span class="block text-xs text-ink-500" x-text="`${car.sub_model} · ${car.fuel_type || ''} · ${car.cc || '?'} cc`"></span>
                                </button>
                            </template>
                            <p x-show="!results.length" class="px-3 py-2 text-sm text-ink-500">No vehicles found.</p>
                        </div>
                    </div>
                </x-slot:actions>

                <div class="grid gap-5 sm:grid-cols-3">
                    <div>
                        <label class="form-label" for="mfg">Manufacturer <span class="text-rose-500">*</span></label>
                        <select id="mfg" x-model="f.mfg" @change="changeMfg()" class="form-input">
                            <option value="">Select…</option>
                            @foreach ($manufacturers as $m)<option value="{{ $m }}">{{ $m }}</option>@endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label" for="model">Model <span class="text-rose-500">*</span></label>
                        <select id="model" x-model="f.model" @change="changeModel()" class="form-input" :disabled="!f.mfg || loadingCars">
                            <option value="" x-text="loadingCars ? 'Loading…' : 'Select…'"></option>
                            <template x-for="m in models" :key="m"><option :value="m" x-text="m" :selected="m === f.model"></option></template>
                        </select>
                    </div>
                    <div>
                        <label class="form-label" for="car_id">Variant <span class="text-rose-500">*</span></label>
                        <select id="car_id" name="car_id" x-model="f.car_id" @change="reprice(true)" class="form-input" :disabled="!f.model">
                            <option value="">Select…</option>
                            <template x-for="c in variants" :key="c.id"><option :value="String(c.id)" x-text="`${c.sub_model} · ${c.fuel_type || ''} · ${c.cc || '?'} cc`" :selected="String(c.id) === String(f.car_id)"></option></template>
                        </select>
                        @error('car_id')<p class="form-error">{{ $message }}</p>@enderror
                    </div>

                    <div>
                        <label class="form-label" for="reg_date">Registration / manufacturing date <span class="text-rose-500">*</span></label>
                        <input type="date" id="reg_date" name="reg_date" x-model="f.reg_date" @change="reprice(true)" max="{{ now()->format('Y-m-d') }}" min="1990-01-01" class="form-input" required>
                        @error('reg_date')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="form-label" for="expire_date">Previous policy expiry</label>
                        <input type="date" id="expire_date" name="expire_date" x-model="f.expire_date" class="form-input">
                        @error('expire_date')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="form-label" for="reg_no">Registration no.</label>
                        <input type="text" id="reg_no" name="reg_no" x-model="f.reg_no" placeholder="GJ05AB1234" maxlength="20" class="form-input uppercase">
                        @error('reg_no')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div x-show="quote" x-cloak class="mt-5 flex flex-wrap gap-2 text-xs">
                    <span class="badge badge-gray" x-text="quote?.vehicle.fuel_type || 'Fuel n/a'"></span>
                    <span class="badge badge-gray" x-text="(quote?.vehicle.cc || '?') + ' cc'"></span>
                    <span class="badge badge-gray" x-text="(quote?.vehicle.seating_capacity || '?') + ' seats'"></span>
                    <span class="badge badge-blue" x-text="'Vehicle age: ' + ageLabel()"></span>
                    <span class="badge badge-violet" x-text="'Policy year ' + quote?.age.band"></span>
                    <span class="badge badge-amber" x-text="'Tariff ' + quote?.inputs.tariffrate + '%'"></span>
                    <span x-show="quote && !quote.vehicle.has_tata_rates" class="badge badge-red">No TATA AIG rates</span>
                </div>
            </x-card>

            {{-- ============ Premium inputs ============ --}}
            <x-card title="Premium inputs" subtitle="Values come from the rate card for the vehicle's age — adjust them if needed.">
                <x-slot:actions>
                    <button type="button" class="btn btn-ghost btn-sm" @click="reprice(true)" :disabled="!f.car_id"><x-heroicon-m-arrow-path class="h-4 w-4" /> Reset to rate card</button>
                </x-slot:actions>
                <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @php
                        $fields = [
                            ['idv', 'Insured declared value (IDV) ₹', '1', 'Rate card: ', 'idv'],
                            ['discount', 'Tariff discount %', 'any', 'Rate card: ', 'discount'],
                            ['age_discount', 'Extra discount %', 'any', 'Rate card: ', 'age_discount'],
                            ['pro_discount', 'Professional discount %', 'any', null, null],
                            ['tp', 'Third-party premium ₹', '1', 'By CC slab: ', 'tp'],
                            ['elec_acc', 'Electrical / non-electrical accessories ₹', '1', null, null],
                            ['anit_discount', 'Anti-theft device value ₹', '1', null, null],
                            ['loading', 'Loading %', 'any', null, null],
                        ];
                    @endphp
                    @foreach ($fields as [$name, $label, $step, $hint, $defaultKey])
                        <div>
                            <label class="form-label" for="{{ $name }}">{{ $label }}</label>
                            <input type="number" min="0" step="{{ $step }}" id="{{ $name }}" name="{{ $name }}" x-model="f.{{ $name }}" @input.debounce.400ms="reprice()" class="form-input tabular-nums">
                            @if ($hint)
                                <p class="form-hint" x-show="quote" x-text="'{{ $hint }}' + fmtPlain(quote?.defaults?.{{ $defaultKey }})"></p>
                            @endif
                            @error($name)<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                    @endforeach
                    <div x-show="!quote || quote.vehicle.kit_allowed">
                        <label class="form-label" for="lpg_gng_kit">CNG / LPG kit value ₹</label>
                        <input type="number" min="0" step="1" id="lpg_gng_kit" name="lpg_gng_kit" x-model="f.lpg_gng_kit" @input.debounce.400ms="reprice()" class="form-input tabular-nums">
                        <p class="form-hint" x-show="quote?.vehicle.cng_lpg">Factory CNG/LPG — kit liability ₹60 applies.</p>
                        @error('lpg_gng_kit')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="mt-6 rounded-2xl border border-ink-200 p-4 dark:border-ink-700">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <div>
                            <div class="text-sm font-semibold text-ink-900 dark:text-white">No claim bonus</div>
                            <div class="text-xs text-ink-500">Was a claim made on the previous policy?</div>
                        </div>
                        <div class="inline-flex rounded-xl bg-ink-100 p-1 dark:bg-ink-800">
                            <button type="button" @click="setClaimed(false)" class="rounded-lg px-3 py-1.5 text-sm font-medium transition" :class="!f.claimed_last_year ? 'bg-white shadow-sm dark:bg-ink-700 dark:text-white' : 'text-ink-500'">No claim</button>
                            <button type="button" @click="setClaimed(true)" class="rounded-lg px-3 py-1.5 text-sm font-medium transition" :class="f.claimed_last_year ? 'bg-white shadow-sm dark:bg-ink-700 dark:text-white' : 'text-ink-500'">Claim made</button>
                        </div>
                    </div>
                    <div x-show="!f.claimed_last_year" x-collapse>
                        <div class="mt-4 grid gap-4 sm:grid-cols-2">
                            <div>
                                <label class="form-label" for="no_claim">NCB for this policy %</label>
                                <div class="flex flex-wrap gap-1.5">
                                    <template x-for="s in ncbSlabs" :key="s">
                                        <button type="button" @click="f.no_claim = s; reprice()" class="rounded-lg border px-3 py-1.5 text-sm tabular-nums transition"
                                                :class="Number(f.no_claim) === s ? 'border-brand-500 bg-brand-50 font-semibold text-brand-800 dark:bg-brand-500/10 dark:text-brand-300' : 'border-ink-200 hover:border-ink-300 dark:border-ink-700'" x-text="s + '%'"></button>
                                    </template>
                                </div>
                                <input type="hidden" name="no_claim" :value="f.claimed_last_year ? 0 : f.no_claim">
                                @error('no_claim')<p class="form-error">{{ $message }}</p>@enderror
                            </div>
                            <div x-show="quote?.age.ask_previous_ncb">
                                <label class="form-label" for="previous_ncb">Previous policy NCB (helper)</label>
                                <select id="previous_ncb" x-model="previousNcb" @change="applyPreviousNcb()" class="form-input">
                                    <option value="">Select to apply the NCB ladder…</option>
                                    <template x-for="(next, prev) in ncbLadder" :key="prev"><option :value="prev" x-text="`${prev}% last year → ${next}% now`"></option></template>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </x-card>

            {{-- ============ Add-ons ============ --}}
            <x-card title="Add-on covers">
                <div x-show="f.insurer === 'hdfc'" class="grid gap-3 sm:grid-cols-2">
                    @foreach ($addonLabels as $key => $label)
                        <label class="flex cursor-pointer items-start gap-3 rounded-2xl border p-4 transition"
                               :class="f.addons.{{ $key }} ? 'border-brand-400 bg-brand-50/50 dark:border-brand-500/40 dark:bg-brand-500/5' : 'border-ink-200 dark:border-ink-700'">
                            <input type="checkbox" class="form-checkbox mt-0.5" x-model="f.addons.{{ $key }}" @change="reprice()">
                            <span class="min-w-0 flex-1">
                                <span class="flex items-center justify-between gap-2">
                                    <span class="text-sm font-medium text-ink-900 dark:text-white">{{ $label }}</span>
                                    <span class="text-sm font-semibold tabular-nums" x-text="quote ? fmt(quote.breakdown.addons.{{ $key }}) : ''"></span>
                                </span>
                                <span class="mt-0.5 block text-xs text-ink-500">{{ $addonHints[$key] }}</span>
                                <span class="mt-1 block text-xs text-ink-400" x-show="quote" x-text="'Rate: ' + (quote?.addon_rates.{{ $key }} ?? 0) + '% of IDV + accessories'"></span>
                            </span>
                        </label>
                    @endforeach
                </div>
                <div x-show="f.insurer === 'tata'" x-cloak>
                    <template x-if="f.plan">
                        <div class="rounded-2xl border border-sky-200 bg-sky-50/60 p-4 dark:border-sky-500/20 dark:bg-sky-500/5">
                            <div class="flex flex-wrap items-center justify-between gap-2">
                                <div class="text-sm font-semibold text-ink-900 dark:text-white" x-text="'TATA AIG ' + plans[f.plan]"></div>
                                <div class="text-sm font-semibold tabular-nums" x-text="quote ? fmt(quote.breakdown.tataPlanAmount) + ' (' + quote.inputs.tata_planrate + '%)' : ''"></div>
                            </div>
                            <ul class="mt-3 grid gap-1.5 text-sm text-ink-700 sm:grid-cols-2 dark:text-ink-300">
                                <template x-for="c in planCovers[f.plan]" :key="c"><li class="flex items-center gap-2"><x-heroicon-s-check-circle class="h-4 w-4 shrink-0 text-emerald-500" /><span x-text="c"></span></li></template>
                            </ul>
                        </div>
                    </template>
                    <p x-show="!f.plan" class="text-sm text-ink-500">Select a TATA AIG plan above to see its covers.</p>
                </div>

                <label class="mt-4 flex cursor-pointer items-center gap-3 rounded-2xl border border-ink-200 p-4 dark:border-ink-700">
                    <input type="checkbox" class="form-checkbox" x-model="f.rsa" @change="reprice()">
                    <span class="flex-1 text-sm font-medium text-ink-900 dark:text-white">Road-side assistance</span>
                    <span class="text-sm font-semibold tabular-nums" x-text="f.rsa ? fmt(f.insurer === 'tata' ? {{ \App\Services\Insurance\PremiumCalculator::RSA_TATA }} : {{ \App\Services\Insurance\PremiumCalculator::RSA_HDFC }}) : fmt(0)"></span>
                </label>
            </x-card>

            {{-- ============ Customer ============ --}}
            <x-card title="Customer">
                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label class="form-label" for="name">Customer name <span class="text-rose-500">*</span></label>
                        <input type="text" id="name" name="name" x-model="f.name" maxlength="150" required class="form-input" autocomplete="off">
                        @error('name')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="form-label" for="mobileno">Mobile no. <span class="text-rose-500">*</span></label>
                        <input type="tel" id="mobileno" name="mobileno" x-model="f.mobileno" inputmode="numeric" maxlength="14" required class="form-input tabular-nums" autocomplete="off">
                        @error('mobileno')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="form-label" for="email">Email</label>
                        <input type="email" id="email" name="email" x-model="f.email" maxlength="150" class="form-input" autocomplete="off">
                        @error('email')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <div class="hidden sm:block"></div>
                    <div>
                        <label class="form-label" for="person_name">Contact person name</label>
                        <input type="text" id="person_name" name="person_name" x-model="f.person_name" maxlength="150" class="form-input" autocomplete="off">
                        @error('person_name')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="form-label" for="person_mobile">Contact person mobile</label>
                        <input type="tel" id="person_mobile" name="person_mobile" x-model="f.person_mobile" inputmode="numeric" maxlength="14" class="form-input tabular-nums" autocomplete="off">
                        @error('person_mobile')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                </div>
            </x-card>
        </div>

        {{-- ============ Sticky premium summary ============ --}}
        <div>
            <div class="space-y-4 xl:sticky xl:top-20">
                <div class="card overflow-hidden">
                    <div class="bg-gradient-to-br from-ink-900 to-ink-800 px-5 py-5 text-white dark:from-ink-950 dark:to-ink-900">
                        <div class="flex items-center justify-between">
                            <span class="text-xs font-medium tracking-wider text-ink-300 uppercase" x-text="f.insurer === 'tata' ? 'TATA AIG · Total payable' : 'HDFC ERGO · Total payable'"></span>
                            <span x-show="loading" class="inline-flex items-center gap-1 text-xs text-ink-300"><x-heroicon-m-arrow-path class="h-3.5 w-3.5 animate-spin" /> Calculating</span>
                        </div>
                        <div class="mt-2 text-3xl font-bold tracking-tight tabular-nums" x-text="quote ? fmt(quote.breakdown.totalCost) : '—'"></div>
                        <div class="mt-1 text-xs text-ink-300" x-show="quote" x-text="'incl. GST ' + fmt(quote?.breakdown.gst) + ' · IDV ' + fmt(quote?.inputs.idv)"></div>
                        <div class="mt-1 text-xs text-ink-300" x-show="!quote">Select a vehicle and registration date to see the premium.</div>
                    </div>

                    <template x-if="error">
                        <div class="flex items-start gap-2 border-b border-rose-100 bg-rose-50 px-5 py-3 text-sm text-rose-700 dark:border-rose-500/20 dark:bg-rose-500/10 dark:text-rose-300">
                            <x-heroicon-s-exclamation-triangle class="mt-0.5 h-4 w-4 shrink-0" /><span x-text="error"></span>
                        </div>
                    </template>
                    <template x-for="w in (quote?.warnings || [])" :key="w">
                        <div class="flex items-start gap-2 border-b border-amber-100 bg-amber-50 px-5 py-3 text-xs text-amber-800 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300">
                            <x-heroicon-s-information-circle class="mt-0.5 h-4 w-4 shrink-0" /><span x-text="w"></span>
                        </div>
                    </template>

                    <div class="px-5 py-4 text-sm" x-show="quote" x-cloak>
                        <div class="mb-1 text-[11px] font-semibold tracking-wider text-ink-400 uppercase">Own damage</div>
                        <dl class="space-y-1.5">
                            <template x-for="row in odRows()" :key="row[0]">
                                <div class="flex justify-between gap-3" :class="row[2] ? 'border-t border-dashed border-ink-200 pt-1.5 font-semibold text-ink-900 dark:border-ink-700 dark:text-white' : 'text-ink-600 dark:text-ink-300'">
                                    <dt x-text="row[0]"></dt><dd class="tabular-nums" x-text="fmt(row[1])"></dd>
                                </div>
                            </template>
                        </dl>
                        <div class="mt-4 mb-1 text-[11px] font-semibold tracking-wider text-ink-400 uppercase">Third party</div>
                        <dl class="space-y-1.5 text-ink-600 dark:text-ink-300">
                            <div class="flex justify-between"><dt>Basic TP</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.input.tp)"></dd></div>
                            <div class="flex justify-between" x-show="quote?.breakdown.input.cngTp > 0"><dt>CNG/LPG kit TP</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.input.cngTp)"></dd></div>
                            <div class="flex justify-between"><dt>PA owner-driver</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.input.ownerPa)"></dd></div>
                            <div class="flex justify-between"><dt>LL paid driver</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.input.llPaid)"></dd></div>
                            <div class="flex justify-between"><dt>PA unnamed passengers</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.input.unnamedPa)"></dd></div>
                            <div class="flex justify-between border-t border-dashed border-ink-200 pt-1.5 font-semibold text-ink-900 dark:border-ink-700 dark:text-white"><dt>TP package</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.tpPackage)"></dd></div>
                        </dl>
                        <dl class="mt-4 space-y-1.5 rounded-xl bg-ink-50 p-3 dark:bg-ink-800/60">
                            <div class="flex justify-between"><dt>OD + TP</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.total)"></dd></div>
                            <div class="flex justify-between"><dt>Road-side assistance</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.rsa)"></dd></div>
                            <div class="flex justify-between font-medium"><dt>Net premium</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.netPremium)"></dd></div>
                            <div class="flex justify-between"><dt>GST {{ \App\Services\Insurance\PremiumCalculator::GST_PERCENT }}%</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.gst)"></dd></div>
                            <div class="flex justify-between border-t border-ink-200 pt-1.5 text-base font-bold text-ink-900 dark:border-ink-700 dark:text-white"><dt>Total payable</dt><dd class="tabular-nums" x-text="fmt(quote?.breakdown.totalCost)"></dd></div>
                        </dl>
                        <p class="mt-3 text-[11px] text-ink-400">Effective discount <span x-text="quote?.breakdown.totalDiscountPercent"></span>%. Final amounts are recalculated on the server when saving.</p>
                    </div>
                </div>

                <div class="flex gap-2">
                    <button class="btn btn-brand flex-1" :disabled="submitting || !f.car_id">
                        <x-heroicon-m-check class="h-4 w-4" /> {{ $editing ? 'Save changes' : 'Create quotation' }}
                    </button>
                    <a href="{{ $editing ? route('quotations.show', $quotation) : route('quotations.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </div>
        </div>
    </form>

    @push('scripts')
        <script>
            document.addEventListener('alpine:init', () => {
                window.Alpine.data('quoteBuilder', (cfg) => ({
                    f: cfg.state,
                    plans: cfg.plans,
                    planCovers: cfg.planCovers,
                    ncbSlabs: cfg.ncbSlabs,
                    ncbLadder: cfg.ncbLadder,
                    addonLabels: cfg.addonLabels,
                    cars: [],
                    loadingCars: false,
                    search: '',
                    results: [],
                    searchOpen: false,
                    quote: null,
                    loading: false,
                    error: null,
                    previousNcb: '',
                    submitting: false,
                    seq: 0,

                    async init() {
                        if (this.f.mfg) {
                            await this.loadCars(this.f.mfg);
                        }
                        if (this.f.car_id) {
                            this.reprice(false);
                        }
                    },

                    get models() {
                        return [...new Set(this.cars.map((c) => c.model))];
                    },
                    get variants() {
                        return this.cars.filter((c) => c.model === this.f.model);
                    },

                    async loadCars(mfg) {
                        this.loadingCars = true;
                        try {
                            const res = await window.axios.get(cfg.urls.vehicles, { params: { mfg } });
                            this.cars = res.data;
                        } catch (e) {
                            window.toast('Could not load vehicles.', 'error');
                        } finally {
                            this.loadingCars = false;
                        }
                    },
                    async changeMfg() {
                        this.f.model = '';
                        this.f.car_id = '';
                        this.quote = null;
                        if (this.f.mfg) await this.loadCars(this.f.mfg);
                    },
                    changeModel() {
                        this.f.car_id = '';
                        this.quote = null;
                        if (this.variants.length === 1) {
                            this.f.car_id = String(this.variants[0].id);
                            this.reprice(true);
                        }
                    },
                    async searchVehicles() {
                        if (this.search.trim().length < 2) {
                            this.results = [];
                            this.searchOpen = false;
                            return;
                        }
                        try {
                            const res = await window.axios.get(cfg.urls.vehicles, { params: { q: this.search } });
                            this.results = res.data;
                            this.searchOpen = true;
                        } catch (e) { /* ignore */ }
                    },
                    async pickVehicle(car) {
                        this.searchOpen = false;
                        this.search = '';
                        if (this.f.mfg !== car.mfg_name) {
                            this.f.mfg = car.mfg_name;
                            await this.loadCars(car.mfg_name);
                        }
                        this.f.model = car.model;
                        this.f.car_id = String(car.id);
                        this.reprice(true);
                    },

                    setInsurer(insurer) {
                        if (this.f.insurer === insurer) return;
                        this.f.insurer = insurer;
                        this.reprice(true);
                    },
                    setClaimed(claimed) {
                        this.f.claimed_last_year = claimed;
                        if (!claimed && Number(this.f.no_claim) === 0) this.f.no_claim = 20;
                        this.reprice();
                    },
                    applyPreviousNcb() {
                        if (this.previousNcb === '') return;
                        this.f.no_claim = this.ncbLadder[this.previousNcb] ?? 20;
                        this.reprice();
                    },

                    payload() {
                        const keys = ['insurer', 'plan', 'car_id', 'reg_date', 'claimed_last_year', 'no_claim', 'idv', 'discount', 'age_discount',
                            'pro_discount', 'tp', 'loading', 'elec_acc', 'lpg_gng_kit', 'anit_discount', 'addons', 'rsa'];
                        const data = {};
                        keys.forEach((k) => {
                            const v = this.f[k];
                            data[k] = v === '' ? null : v;
                        });
                        if (this.f.insurer !== 'tata') data.plan = null;
                        return data;
                    },

                    /** Ask the server to price the quotation. reset=true → take IDV/discounts/TP from the rate card. */
                    async reprice(reset = false) {
                        if (!this.f.car_id || !this.f.reg_date) {
                            this.quote = null;
                            return;
                        }
                        if (this.f.insurer === 'tata' && !this.f.plan) {
                            this.error = 'Select a TATA AIG plan to price the quotation.';
                            this.quote = null;
                            return;
                        }
                        if (reset) {
                            ['idv', 'discount', 'age_discount', 'tp'].forEach((k) => (this.f[k] = null));
                        }
                        const seq = ++this.seq;
                        this.loading = true;
                        try {
                            const res = await window.axios.post(cfg.urls.preview, this.payload());
                            if (seq !== this.seq) return;
                            this.quote = res.data;
                            this.error = null;
                            ['idv', 'discount', 'age_discount', 'tp'].forEach((k) => {
                                if (this.f[k] === null || this.f[k] === '') this.f[k] = res.data.inputs[k];
                            });
                            if (!res.data.vehicle.kit_allowed) this.f.lpg_gng_kit = 0;
                        } catch (e) {
                            if (seq !== this.seq) return;
                            const errors = e.response?.data?.errors;
                            this.error = errors ? Object.values(errors).flat()[0] : (e.response?.data?.message || 'Could not calculate the premium.');
                            if (e.response?.status === 422) this.quote = null;
                        } finally {
                            if (seq === this.seq) this.loading = false;
                        }
                    },

                    odRows() {
                        const b = this.quote?.breakdown;
                        if (!b) return [];
                        const rows = [['Basic OD premium', b.basicOd]];
                        const extra = b.basicOd - b.odPremium - b.proDiscountAmount;
                        if (extra) rows.push(['Extra discount', -extra]);
                        if (b.proDiscountAmount) rows.push(['Professional discount', -b.proDiscountAmount]);
                        if (b.accessoriesLoading) rows.push(['Accessories loading', b.accessoriesLoading]);
                        if (b.kitLoading) rows.push(['CNG/LPG kit loading', b.kitLoading]);
                        if (b.antiTheftAmount) rows.push(['Anti-theft discount', -b.antiTheftAmount]);
                        rows.push(['Gross OD', b.grossOdAmount, true]);
                        if (b.ncbAmount) rows.push([`NCB (${b.input.ncb}%)`, -b.ncbAmount]);
                        if (b.loadingAmount) rows.push(['Loading', b.loadingAmount]);
                        if (b.input.insurer === 'tata') {
                            rows.push(['Plan premium', b.tataPlanAmount]);
                        } else {
                            Object.entries(b.addons).forEach(([k, v]) => { if (v) rows.push([this.addonLabels[k], v]); });
                        }
                        rows.push(['Net own damage', b.finalOd, true]);
                        return rows;
                    },

                    ageLabel() {
                        const d = this.quote?.age.days ?? 0;
                        const y = Math.floor(d / 365), m = Math.floor((d % 365) / 30.4);
                        return (y ? `${y} yr ` : '') + `${m} mo (${d} days)`;
                    },
                    fmt(v) {
                        const n = Number(v || 0);
                        const s = Math.abs(n).toLocaleString('en-IN', { maximumFractionDigits: 2 });
                        return (n < 0 ? '− ₹ ' : '₹ ') + s;
                    },
                    fmtPlain(v) {
                        return v === undefined || v === null ? '—' : Number(v).toLocaleString('en-IN', { maximumFractionDigits: 3 });
                    },
                }));
            });
        </script>
    @endpush
</x-layouts.app>