@extends('layouts.app')

@section('title', 'Bangladesh Landed Cost Calculator – NBR Customs & Duty Estimator | MotoSolution')

@section('content')
<div class="py-12 bg-[#0B0F19]" x-data="landedCostCalculator()">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center max-w-3xl mx-auto mb-12">
            <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest bg-red-600/10 text-red-400 border border-red-500/20 mb-3">
                <i class="fa-solid fa-calculator"></i> NBR Customs Tariff Simulator
            </span>
            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight font-heading">
                Bangladesh <span class="text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-amber-400">Landed Cost</span> Calculator
            </h1>
            <p class="mt-4 text-slate-400 text-sm sm:text-base leading-relaxed">
                Estimate true on-the-road cost from Japanese auction floor to Dhaka registration. Computes authentic NBR import duties (CD, RD, SD, VAT, AIT, AT), year depreciation, shipping, and port charges.
            </p>
        </div>

        <!-- Quick Model Presets -->
        <div class="mb-10 bg-slate-900/80 border border-white/10 rounded-2xl p-4 sm:p-6 shadow-xl backdrop-blur-sm">
            <p class="text-xs font-bold uppercase tracking-wider text-slate-400 mb-3 flex items-center gap-2">
                <i class="fa-solid fa-bolt text-amber-400"></i> Popular Japanese Models (Quick Fill):
            </p>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2.5">
                <button type="button" @click="loadPreset('corolla_cross')" class="px-3 py-2 rounded-xl bg-white/5 hover:bg-red-600/20 border border-white/10 hover:border-red-500/40 text-left transition group">
                    <p class="text-xs font-bold text-white group-hover:text-red-400">Corolla Cross</p>
                    <p class="text-[10px] text-slate-400">1,797cc Hybrid · 2022</p>
                </button>
                <button type="button" @click="loadPreset('harrier')" class="px-3 py-2 rounded-xl bg-white/5 hover:bg-red-600/20 border border-white/10 hover:border-red-500/40 text-left transition group">
                    <p class="text-xs font-bold text-white group-hover:text-red-400">Toyota Harrier</p>
                    <p class="text-[10px] text-slate-400">2,487cc Hybrid · 2021</p>
                </button>
                <button type="button" @click="loadPreset('premio')" class="px-3 py-2 rounded-xl bg-white/5 hover:bg-red-600/20 border border-white/10 hover:border-red-500/40 text-left transition group">
                    <p class="text-xs font-bold text-white group-hover:text-red-400">Toyota Premio</p>
                    <p class="text-[10px] text-slate-400">1,496cc Petrol · 2020</p>
                </button>
                <button type="button" @click="loadPreset('vezel')" class="px-3 py-2 rounded-xl bg-white/5 hover:bg-red-600/20 border border-white/10 hover:border-red-500/40 text-left transition group">
                    <p class="text-xs font-bold text-white group-hover:text-red-400">Honda Vezel</p>
                    <p class="text-[10px] text-slate-400">1,496cc Hybrid · 2022</p>
                </button>
                <button type="button" @click="loadPreset('prado')" class="px-3 py-2 rounded-xl bg-white/5 hover:bg-red-600/20 border border-white/10 hover:border-red-500/40 text-left transition group">
                    <p class="text-xs font-bold text-white group-hover:text-red-400">Land Cruiser Prado</p>
                    <p class="text-[10px] text-slate-400">2,755cc Diesel · 2021</p>
                </button>
                <button type="button" @click="loadPreset('hustler')" class="px-3 py-2 rounded-xl bg-white/5 hover:bg-red-600/20 border border-white/10 hover:border-red-500/40 text-left transition group">
                    <p class="text-xs font-bold text-white group-hover:text-red-400">Suzuki Hustler</p>
                    <p class="text-[10px] text-slate-400">658cc Kei Hybrid · 2022</p>
                </button>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <!-- Input Form Console (Left 5 Cols) -->
            <div class="lg:col-span-5 bg-slate-900 border border-white/10 rounded-2xl p-6 sm:p-8 shadow-2xl space-y-6">
                <div class="flex items-center justify-between border-b border-white/10 pb-4">
                    <h2 class="text-lg font-bold text-white font-heading flex items-center gap-2">
                        <i class="fa-solid fa-sliders text-red-500"></i> Vehicle Specifications
                    </h2>
                    <span class="text-xs text-slate-400">Live recalculation</span>
                </div>

                <!-- Auction Price JPY -->
                <div>
                    <div class="flex justify-between items-center mb-1.5">
                        <label class="text-xs font-bold uppercase tracking-wider text-slate-300">Japan Auction / FOB (JPY)</label>
                        <span class="text-xs font-bold text-amber-400">¥<span x-text="formatNumber(form.price_jpy)"></span></span>
                    </div>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-slate-500 font-bold text-sm">¥</span>
                        <input type="number" step="50000" x-model.number="form.price_jpy" @input="recalculate()" class="w-full bg-slate-950 border border-white/10 rounded-xl pl-8 pr-4 py-3 text-white text-sm font-semibold focus:border-red-500 focus:outline-none focus:ring-1 focus:ring-red-500 transition">
                    </div>
                    <input type="range" min="300000" max="15000000" step="50000" x-model.number="form.price_jpy" @input="recalculate()" class="w-full mt-2 accent-red-600">
                </div>

                <!-- Engine Capacity (CC) -->
                <div>
                    <div class="flex justify-between items-center mb-1.5">
                        <label class="text-xs font-bold uppercase tracking-wider text-slate-300">Engine Displacement</label>
                        <span class="text-xs font-bold text-red-400"><span x-text="form.engine_cc"></span> cc</span>
                    </div>
                    <div class="grid grid-cols-4 gap-2 mb-2">
                        <button type="button" @click="form.engine_cc = 658; recalculate()" :class="form.engine_cc === 658 ? 'bg-red-600 text-white' : 'bg-slate-950 text-slate-300 border border-white/10'" class="py-1.5 rounded-lg text-xs font-bold transition">660cc</button>
                        <button type="button" @click="form.engine_cc = 1496; recalculate()" :class="form.engine_cc === 1496 ? 'bg-red-600 text-white' : 'bg-slate-950 text-slate-300 border border-white/10'" class="py-1.5 rounded-lg text-xs font-bold transition">1500cc</button>
                        <button type="button" @click="form.engine_cc = 1797; recalculate()" :class="form.engine_cc === 1797 ? 'bg-red-600 text-white' : 'bg-slate-950 text-slate-300 border border-white/10'" class="py-1.5 rounded-lg text-xs font-bold transition">1800cc</button>
                        <button type="button" @click="form.engine_cc = 2487; recalculate()" :class="form.engine_cc === 2487 ? 'bg-red-600 text-white' : 'bg-slate-950 text-slate-300 border border-white/10'" class="py-1.5 rounded-lg text-xs font-bold transition">2500cc</button>
                    </div>
                    <input type="number" min="500" max="6000" x-model.number="form.engine_cc" @input="recalculate()" class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2.5 text-white text-sm font-semibold focus:border-red-500 focus:outline-none">
                </div>

                <!-- Fuel Type & Hybrid Checkbox -->
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1.5">Powertrain</label>
                        <select x-model="form.fuel_type" @change="recalculate()" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none">
                            <option value="Hybrid">Hybrid (HEV / PHEV)</option>
                            <option value="Petrol">Regular Petrol / Gasoline</option>
                            <option value="Diesel">Turbo Diesel</option>
                            <option value="Electric">All-Electric (EV)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-xs font-bold uppercase tracking-wider text-slate-300 mb-1.5">Manufacturing Year</label>
                        <select x-model.number="form.year" @change="recalculate()" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2.5 text-white text-xs font-semibold focus:border-red-500 focus:outline-none">
                            @for($y = date('Y'); $y >= date('Y') - 5; $y--)
                                <option value="{{ $y }}">{{ $y }} ({{ date('Y') - $y }} yr old)</option>
                            @endfor
                        </select>
                    </div>
                </div>

                <!-- JPY Exchange Rate -->
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <label class="text-xs font-bold uppercase tracking-wider text-slate-300">Exchange Rate (JPY to BDT)</label>
                        <span class="text-xs font-bold text-slate-400">1 JPY = <span x-text="form.exchange_rate"></span> BDT</span>
                    </div>
                    <input type="number" step="0.01" min="0.5" max="2.0" x-model.number="form.exchange_rate" @input="recalculate()" class="w-full bg-slate-950 border border-white/10 rounded-xl px-4 py-2 text-white text-sm font-semibold focus:border-red-500 focus:outline-none">
                    <p class="text-[11px] text-slate-400 mt-1">Reflects Bangladesh commercial banking TT clean / LC import rate.</p>
                </div>

                <!-- Live NBR Tax bracket callout -->
                <div class="bg-red-950/20 border border-red-500/20 rounded-xl p-4 text-xs space-y-1.5">
                    <div class="flex justify-between text-slate-300">
                        <span>Applicable NBR Customs Bracket:</span>
                        <span class="font-bold text-white"><span x-text="result.rates.cd"></span>% CD + <span x-text="result.rates.sd"></span>% SD</span>
                    </div>
                    <div class="flex justify-between text-slate-300">
                        <span>Year Age NBR Depreciation:</span>
                        <span class="font-bold text-emerald-400"><span x-text="result.depreciation_percentage"></span>% Discount on CIF</span>
                    </div>
                </div>
            </div>

            <!-- Detailed Cost Breakdown Output (Right 7 Cols) -->
            <div class="lg:col-span-7 space-y-6">
                
                <!-- Main Big Grand Total Hero Card -->
                <div class="bg-gradient-to-br from-slate-900 via-slate-900 to-[#1e1524] border-2 border-red-500/30 rounded-2xl p-6 sm:p-8 shadow-2xl relative overflow-hidden">
                    <div class="absolute -right-8 -bottom-8 w-48 h-48 bg-red-600/10 rounded-full blur-3xl pointer-events-none"></div>
                    
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-white/10 pb-5 mb-5">
                        <div>
                            <span class="text-[11px] font-bold uppercase tracking-wider text-red-400 block mb-1">Estimated Bangladesh Landed Cost</span>
                            <div class="flex items-baseline gap-2">
                                <span class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white font-heading">
                                    ৳<span x-text="formatNumber(result.total_landed_cost_bdt)"></span>
                                </span>
                                <span class="text-xs text-slate-400 font-medium">BDT Total</span>
                            </div>
                            <p class="text-xs text-slate-400 mt-1">Approx. <span class="font-bold text-white">৳<span x-text="(result.total_landed_cost_bdt / 100000).toFixed(2)"></span> Lac</span> (Dhaka Showroom Ready)</p>
                        </div>
                        
                        <div class="flex flex-col gap-2 shrink-0">
                            <a :href="'https://wa.me/{{ config('motosolution.contact.whatsapp') }}?text=' + encodeURIComponent('Hello MotoSolution, I estimated a ' + form.year + ' ' + form.engine_cc + 'cc ' + form.fuel_type + ' at ¥' + form.price_jpy.toLocaleString() + ' with total landed cost approx ৳' + formatNumber(result.total_landed_cost_bdt) + ' BDT. Please advise on upcoming auction lots.')" target="_blank" class="inline-flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white font-bold text-xs px-4 py-2.5 rounded-xl shadow-lg transition">
                                <i class="fa-brands fa-whatsapp text-base"></i>
                                <span>Inquire on WhatsApp</span>
                            </a>
                            <a href="{{ route('auction.index') }}" class="inline-flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 text-white font-bold text-xs px-4 py-2.5 rounded-xl transition">
                                <i class="fa-solid fa-gavel"></i>
                                <span>Browse Live Lots</span>
                            </a>
                        </div>
                    </div>

                    <!-- Cost Composition Bar -->
                    <div>
                        <div class="flex justify-between text-[11px] font-bold uppercase tracking-wider text-slate-400 mb-2">
                            <span>Cost Structure Distribution</span>
                            <span>CIF (<span x-text="Math.round((result.cif_value_bdt / result.total_landed_cost_bdt) * 100)"></span>%) · Customs (<span x-text="Math.round((result.total_customs_taxes_bdt / result.total_landed_cost_bdt) * 100)"></span>%) · Local (<span x-text="Math.round((result.total_local_charges_bdt / result.total_landed_cost_bdt) * 100)"></span>%)</span>
                        </div>
                        <div class="w-full h-3 rounded-full bg-slate-800 flex overflow-hidden">
                            <div class="bg-blue-500 h-full transition-all duration-300" :style="'width: ' + ((result.cif_value_bdt / result.total_landed_cost_bdt) * 100) + '%'" title="Japan CIF & Shipping"></div>
                            <div class="bg-red-500 h-full transition-all duration-300" :style="'width: ' + ((result.total_customs_taxes_bdt / result.total_landed_cost_bdt) * 100) + '%'" title="NBR Customs & Duties"></div>
                            <div class="bg-emerald-500 h-full transition-all duration-300" :style="'width: ' + ((result.total_local_charges_bdt / result.total_landed_cost_bdt) * 100) + '%'" title="Local Clearing & BRTA"></div>
                        </div>
                        <div class="flex flex-wrap gap-4 mt-2 text-[11px] text-slate-400">
                            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span> Japan CIF Value</span>
                            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-red-500"></span> NBR Customs & Duties</span>
                            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span> Port, BRTA & Fees</span>
                        </div>
                    </div>
                </div>

                <!-- 3 Detailed Breakdown Panels -->
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    
                    <!-- 1. Japan Side Costs -->
                    <div class="bg-slate-900 border border-white/10 rounded-xl p-4 text-xs space-y-2">
                        <div class="flex items-center gap-2 border-b border-white/10 pb-2">
                            <i class="fa-solid fa-plane-departure text-blue-400"></i>
                            <h3 class="font-bold text-white uppercase tracking-wider text-[11px]">1. Japan CIF Costs</h3>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>Auction FOB:</span>
                            <span class="font-medium text-slate-200">¥<span x-text="formatNumber(result.price_jpy)"></span></span>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>Auction House Fee:</span>
                            <span class="font-medium text-slate-200">¥<span x-text="formatNumber(result.auction_fee_jpy)"></span></span>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>Inland Transport:</span>
                            <span class="font-medium text-slate-200">¥<span x-text="formatNumber(result.inland_transport_jpy)"></span></span>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>Ocean Freight:</span>
                            <span class="font-medium text-slate-200">¥<span x-text="formatNumber(result.shipping_jpy)"></span></span>
                        </div>
                        <div class="border-t border-white/10 pt-2 flex justify-between font-bold text-blue-400">
                            <span>CIF Value (BDT):</span>
                            <span>৳<span x-text="formatNumber(result.cif_value_bdt)"></span></span>
                        </div>
                    </div>

                    <!-- 2. NBR Customs & Duties -->
                    <div class="bg-slate-900 border border-white/10 rounded-xl p-4 text-xs space-y-2">
                        <div class="flex items-center gap-2 border-b border-white/10 pb-2">
                            <i class="fa-solid fa-file-invoice-dollar text-red-400"></i>
                            <h3 class="font-bold text-white uppercase tracking-wider text-[11px]">2. NBR Customs</h3>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>Customs Duty (CD):</span>
                            <span class="font-medium text-slate-200">৳<span x-text="formatNumber(result.customs_duty_bdt)"></span></span>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>Regulatory Duty (RD):</span>
                            <span class="font-medium text-slate-200">৳<span x-text="formatNumber(result.regulatory_duty_bdt)"></span></span>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>Supplementary (SD):</span>
                            <span class="font-medium text-slate-200">৳<span x-text="formatNumber(result.supplementary_duty_bdt)"></span></span>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>VAT (15%):</span>
                            <span class="font-medium text-slate-200">৳<span x-text="formatNumber(result.vat_bdt)"></span></span>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>AIT (5%) & AT (5%):</span>
                            <span class="font-medium text-slate-200">৳<span x-text="formatNumber(result.advance_income_tax_bdt + result.advance_tax_bdt)"></span></span>
                        </div>
                        <div class="border-t border-white/10 pt-2 flex justify-between font-bold text-red-400">
                            <span>Total Duties:</span>
                            <span>৳<span x-text="formatNumber(result.total_customs_taxes_bdt)"></span></span>
                        </div>
                    </div>

                    <!-- 3. Local Port & Registration -->
                    <div class="bg-slate-900 border border-white/10 rounded-xl p-4 text-xs space-y-2">
                        <div class="flex items-center gap-2 border-b border-white/10 pb-2">
                            <i class="fa-solid fa-dharmachakra text-emerald-400"></i>
                            <h3 class="font-bold text-white uppercase tracking-wider text-[11px]">3. BD Local Charges</h3>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>Chittagong Port & C&F:</span>
                            <span class="font-medium text-slate-200">৳<span x-text="formatNumber(result.port_and_cf_charges_bdt)"></span></span>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>BRTA Registration (Est):</span>
                            <span class="font-medium text-slate-200">৳<span x-text="formatNumber(result.brta_registration_bdt)"></span></span>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>MotoSolution Fee:</span>
                            <span class="font-medium text-slate-200">৳<span x-text="formatNumber(result.service_fee_bdt)"></span></span>
                        </div>
                        <div class="flex justify-between text-slate-400">
                            <span>Carrier & Misc:</span>
                            <span class="font-medium text-slate-200">৳<span x-text="formatNumber(result.misc_charges_bdt)"></span></span>
                        </div>
                        <div class="border-t border-white/10 pt-2 flex justify-between font-bold text-emerald-400">
                            <span>Total Local:</span>
                            <span>৳<span x-text="formatNumber(result.total_local_charges_bdt)"></span></span>
                        </div>
                    </div>

                </div>

                <!-- 4 Payment Milestones -->
                <div class="bg-slate-900/60 border border-white/10 rounded-xl p-5">
                    <h4 class="text-xs font-bold uppercase tracking-wider text-slate-300 mb-3 flex items-center gap-2">
                        <i class="fa-solid fa-coins text-amber-400"></i> Transparent 4-Stage Payment Milestone Plan
                    </h4>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block">STAGE 01 (20%)</span>
                            <p class="text-xs font-bold text-white mt-0.5">Booking Deposit</p>
                            <p class="text-sm font-extrabold text-amber-400 mt-1">৳<span x-text="formatNumber(result.payment_milestones.booking_deposit_20)"></span></p>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block">STAGE 02 (40%)</span>
                            <p class="text-xs font-bold text-white mt-0.5">Japan Export / BL</p>
                            <p class="text-sm font-extrabold text-blue-400 mt-1">৳<span x-text="formatNumber(result.payment_milestones.japan_export_40)"></span></p>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block">STAGE 03 (30%)</span>
                            <p class="text-xs font-bold text-white mt-0.5">Customs Assessment</p>
                            <p class="text-sm font-extrabold text-red-400 mt-1">৳<span x-text="formatNumber(result.payment_milestones.customs_duty_30)"></span></p>
                        </div>
                        <div class="bg-slate-950 p-3 rounded-xl border border-white/5">
                            <span class="text-[10px] text-slate-500 font-bold block">STAGE 04 (10%)</span>
                            <p class="text-xs font-bold text-white mt-0.5">Dhaka Handover</p>
                            <p class="text-sm font-extrabold text-emerald-400 mt-1">৳<span x-text="formatNumber(result.payment_milestones.delivery_balance_10)"></span></p>
                        </div>
                    </div>
                </div>

                <!-- Official Disclaimer -->
                <div class="bg-amber-500/10 border border-amber-500/30 rounded-xl p-4 flex items-start gap-3 text-xs text-amber-300">
                    <i class="fa-solid fa-circle-exclamation text-amber-400 text-base shrink-0 mt-0.5"></i>
                    <div>
                        <span class="font-bold text-white block mb-0.5">Statutory NBR Chittagong Assessment Disclaimer:</span>
                        {{ $defaultCalc['disclaimer'] }} Real-time exchange rates, shipping surcharges, and actual physical assessment by Chittagong Customs House apply at vessel berthing.
                    </div>
                </div>

            </div>

        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
function landedCostCalculator() {
    return {
        form: {
            price_jpy: {{ $defaultCalc['price_jpy'] }},
            engine_cc: {{ $defaultCalc['engine_cc'] }},
            fuel_type: '{{ $defaultCalc['fuel_type'] }}',
            is_hybrid: {{ $defaultCalc['is_hybrid'] ? 'true' : 'false' }},
            year: {{ $defaultCalc['year'] }},
            exchange_rate: {{ $defaultCalc['exchange_rate'] }}
        },
        result: @json($defaultCalc),
        loading: false,

        formatNumber(num) {
            if (!num) return '0';
            return Math.round(num).toLocaleString('en-US');
        },

        loadPreset(type) {
            const presets = {
                corolla_cross: { price_jpy: 2600000, engine_cc: 1797, fuel_type: 'Hybrid', year: {{ date('Y') - 2 }} },
                harrier: { price_jpy: 4200000, engine_cc: 2487, fuel_type: 'Hybrid', year: {{ date('Y') - 3 }} },
                premio: { price_jpy: 2200000, engine_cc: 1496, fuel_type: 'Petrol', year: {{ date('Y') - 4 }} },
                vezel: { price_jpy: 2700000, engine_cc: 1496, fuel_type: 'Hybrid', year: {{ date('Y') - 2 }} },
                prado: { price_jpy: 6800000, engine_cc: 2755, fuel_type: 'Diesel', year: {{ date('Y') - 3 }} },
                hustler: { price_jpy: 1400000, engine_cc: 658, fuel_type: 'Hybrid', year: {{ date('Y') - 2 }} }
            };

            if (presets[type]) {
                Object.assign(this.form, presets[type]);
                this.form.is_hybrid = this.form.fuel_type.toLowerCase().includes('hybrid');
                this.recalculate();
            }
        },

        async recalculate() {
            this.form.is_hybrid = this.form.fuel_type.toLowerCase().includes('hybrid');
            
            try {
                const response = await fetch('{{ route('calculator.compute') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify(this.form)
                });

                const data = await response.json();
                if (data.success && data.data) {
                    this.result = data.data;
                }
            } catch (err) {
                console.error('Calculation error:', err);
            }
        }
    };
}
</script>
@endsection