<x-layouts.site>
    <x-slot:title>Debt Payoff Planner</x-slot:title>
    <x-slot:description>List your debts, pick a strategy and see your debt-free date, free interactive debt payoff planner for African money life, in your own currency.</x-slot:description>

    <div class="bg-mesh" x-data="debtPlanner()" x-init="init()" @currency-changed.window="applyCurrency()">
        <div class="container-site section">
            <div class="mx-auto max-w-2xl text-center" data-hero>
                <span class="icon-tile mx-auto h-20 w-20 bg-wise-400 text-navy-950 shadow-wise" data-hero-item><x-icon name="unlink" class="h-9 w-9" /></span>
                <h1 class="mt-4 font-display text-display-sm font-bold text-navy-900" data-hero-item>Debt Payoff Planner</h1>
                <p class="mt-3 text-lg text-navy-600" data-hero-item>List every debt, yes, even the mobile loans. Pick a strategy. Meet your debt-free date.</p>
                <div class="mt-5 flex justify-center" data-hero-item><x-currency-picker /></div>
                <x-tool-intro slug="debt-payoff" title="Debt Payoff Planner"
                    tagline="See your exact debt-free date and the smartest order to clear what you owe."
                    :steps="[
                        'List each debt: balance, interest rate and minimum payment.',
                        'Choose a strategy: snowball for motivation, or avalanche for the maths.',
                        'Add any extra you can put toward debt each month.',
                        'See your debt-free date, then save or download the plan.',
                    ]" />
            </div>

            <div class="mx-auto mt-8 grid max-w-5xl gap-4 md:grid-cols-3" data-gsap-stagger>
                <div class="card p-5">
                    <p class="font-display font-bold text-navy-900">Minimum payments still matter</p>
                    <p class="mt-2 text-sm leading-relaxed text-navy-600">The planner first covers every minimum so accounts keep moving, then directs extra money to the target debt.</p>
                </div>
                <div class="card p-5">
                    <p class="font-display font-bold text-navy-900">Interest changes the answer</p>
                    <p class="mt-2 text-sm leading-relaxed text-navy-600">Avalanche attacks the highest-rate debt first, so expensive loans stop compounding against you sooner.</p>
                </div>
                <div class="card p-5">
                    <p class="font-display font-bold text-navy-900">Save before you leave</p>
                    <p class="mt-2 text-sm leading-relaxed text-navy-600">Create a free account or email the plan so your debt-free date and payoff order are not lost.</p>
                </div>
            </div>

            <div class="mt-10 grid gap-6 lg:grid-cols-[1.1fr,1fr]">
                {{-- ===== Inputs ===== --}}
                <div class="space-y-6 lg:sticky lg:top-24 lg:self-start">
                    <div class="card p-6">
                        <div class="flex items-center justify-between">
                            <h2 class="font-display font-bold text-navy-900">Your debts</h2>
                            <button @click="addDebt()" class="btn-ghost btn-sm">+ Add debt</button>
                        </div>

                        <div class="mt-4 space-y-3">
                            <template x-for="(debt, i) in debts" :key="debt.id">
                                <div class="rounded-2xl bg-navy-50/60 p-4 ring-1 ring-navy-100">
                                    <div class="flex items-center gap-2">
                                        <input type="text" x-model="debt.name" placeholder="e.g. Mobile loan, Student loan, Car loan"
                                               class="w-full rounded-xl border-0 bg-white px-3 py-2 text-sm font-semibold text-navy-900 ring-1 ring-navy-200 focus:ring-2 focus:ring-wise-400">
                                        <button @click="removeDebt(i)" class="grid h-9 w-9 shrink-0 place-items-center rounded-full text-navy-400 transition hover:bg-rose-50 hover:text-rose-500" aria-label="Remove debt">
                                            <x-icon name="trash" class="h-5 w-5" />
                                        </button>
                                    </div>
                                    <div class="mt-3 grid grid-cols-3 gap-3">
                                        <label class="block">
                                            <span class="text-[11px] font-bold uppercase tracking-wide text-navy-400">Balance</span>
                                            <input type="number" min="0" x-model.number="debt.balance" @input.debounce.300ms="recalc()"
                                                   class="mt-1 w-full rounded-xl border-0 bg-white px-3 py-2 text-sm font-semibold ring-1 ring-navy-200 focus:ring-2 focus:ring-wise-400">
                                        </label>
                                        <label class="block">
                                            <span class="text-[11px] font-bold uppercase tracking-wide text-navy-400">Interest %/yr</span>
                                            <input type="number" min="0" max="200" x-model.number="debt.rate" @input.debounce.300ms="recalc()"
                                                   class="mt-1 w-full rounded-xl border-0 bg-white px-3 py-2 text-sm font-semibold ring-1 ring-navy-200 focus:ring-2 focus:ring-wise-400">
                                        </label>
                                        <label class="block">
                                            <span class="text-[11px] font-bold uppercase tracking-wide text-navy-400">Min/month</span>
                                            <input type="number" min="0" x-model.number="debt.minPayment" @input.debounce.300ms="recalc()"
                                                   class="mt-1 w-full rounded-xl border-0 bg-white px-3 py-2 text-sm font-semibold ring-1 ring-navy-200 focus:ring-2 focus:ring-wise-400">
                                        </label>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="card p-6">
                        <h2 class="font-display font-bold text-navy-900">Your strategy</h2>
                        <p class="mt-1 text-sm text-navy-500">Snowball is for momentum. Avalanche is for lower total interest. You can switch anytime and compare the result.</p>

                        <div class="mt-4 grid grid-cols-2 gap-3">
                            <button @click="strategy = 'snowball'; recalc()"
                                    :class="strategy === 'snowball' ? 'ring-wise-500 bg-wise-50 shadow-wise' : 'ring-navy-100'"
                                    class="rounded-2xl bg-white p-4 text-left ring-2 transition">
                                <span class="icon-tile !h-10 !w-10"><x-icon name="snowflake" class="h-5 w-5" /></span>
                                <p class="mt-2 font-display text-sm font-bold text-navy-900">Snowball</p>
                                <p class="text-xs text-navy-500">Smallest debt first, quick wins, big motivation</p>
                            </button>
                            <button @click="strategy = 'avalanche'; recalc()"
                                    :class="strategy === 'avalanche' ? 'ring-wise-500 bg-wise-50 shadow-wise' : 'ring-navy-100'"
                                    class="rounded-2xl bg-white p-4 text-left ring-2 transition">
                                <span class="icon-tile !h-10 !w-10"><x-icon name="mountain" class="h-5 w-5" /></span>
                                <p class="mt-2 font-display text-sm font-bold text-navy-900">Avalanche</p>
                                <p class="text-xs text-navy-500">Highest interest first, cheapest overall</p>
                            </button>
                        </div>

                        <div class="mt-6">
                            <div class="flex items-baseline justify-between">
                                <label for="extra" class="text-sm font-semibold text-navy-700">Extra payment each month</label>
                                <span class="font-display text-lg font-extrabold text-wise-600" x-text="fmt(extra)"></span>
                            </div>
                            <input id="extra" type="range" min="0" :max="Math.round(50000 * cf)" :step="Math.max(1, Math.round(500 * cf))" x-model.number="extra" @input="recalc()" class="slider mt-2">
                            <p class="mt-1 text-xs text-navy-400">Even a small extra amount changes your date dramatically. Try it.</p>
                        </div>
                    </div>
                </div>

                {{-- ===== Results ===== --}}
                <div class="space-y-6">
                    <div class="card overflow-hidden p-0">
                        <div class="bg-navy-900 bg-mesh-dark p-6 text-center">
                            <template x-if="result.months > 0">
                                <div>
                                    <p class="flex items-center justify-center gap-2 text-sm font-semibold uppercase tracking-widest text-wise-300">
                                        <x-icon name="award" class="h-4 w-4" /> Your debt-free date
                                    </p>
                                    <p class="mt-2 font-display text-4xl font-extrabold text-white" x-text="result.freedomDate"></p>
                                    <p class="mt-1 text-navy-200"><span class="font-bold text-wise-300" x-text="result.monthsLabel"></span> from today</p>
                                </div>
                            </template>
                            <template x-if="result.months === 0 && totalBalance() > 0">
                                <p class="flex items-center justify-center gap-2 font-display text-xl font-bold text-amber-300">
                                    <x-icon name="alert-triangle" class="h-6 w-6 shrink-0" /> Payments don't cover the interest, increase the monthly amount to make progress.
                                </p>
                            </template>
                            <template x-if="totalBalance() === 0">
                                <p class="font-display text-xl font-bold text-white">Add your debts to see your freedom date</p>
                            </template>
                        </div>
                        <div class="grid grid-cols-3 divide-x divide-navy-100 text-center">
                            <div class="p-4">
                                <p class="text-[11px] font-bold uppercase tracking-wide text-navy-400">Total debt</p>
                                <p class="mt-1 font-display font-extrabold text-navy-900" x-text="fmt(totalBalance())"></p>
                            </div>
                            <div class="p-4">
                                <p class="text-[11px] font-bold uppercase tracking-wide text-navy-400">Interest you'll pay</p>
                                <p class="mt-1 font-display font-extrabold text-navy-900" x-text="fmt(result.totalInterest)"></p>
                            </div>
                            <div class="p-4">
                                <p class="text-[11px] font-bold uppercase tracking-wide text-navy-400">Vs other strategy</p>
                                <p class="mt-1 font-display font-extrabold" :class="result.savingsVsOther >= 0 ? 'text-emerald-600' : 'text-navy-900'"
                                   x-text="result.savingsVsOther > 0 ? 'saves ' + fmt(result.savingsVsOther) : 'same cost'"></p>
                            </div>
                        </div>
                    </div>

                    <div class="card p-6">
                        <h2 class="font-display font-bold text-navy-900">The road to zero</h2>
                        <div class="mt-3"><canvas id="payoffChart" height="200"></canvas></div>
                    </div>

                    {{-- Strategy face-off --}}
                    <div class="card p-6" x-show="compare.snowball.months > 0 && compare.avalanche.months > 0">
                        <h2 class="flex items-center gap-2 font-display font-bold text-navy-900"><x-icon name="scale" class="h-5 w-5 text-wise-600" /> Strategy face-off</h2>
                        <div class="mt-4 grid grid-cols-2 gap-3">
                            <template x-for="s in ['snowball', 'avalanche']" :key="s">
                                <div class="relative rounded-2xl p-4 ring-2 transition"
                                     :class="strategy === s ? 'ring-wise-500 bg-wise-50' : 'ring-navy-100'">
                                    <span x-show="compare[s].interest < compare[s === 'snowball' ? 'avalanche' : 'snowball'].interest"
                                          class="sticker absolute -right-2 -top-3 !rotate-3 !px-2 !py-1 !text-[9px]">Cheapest</span>
                                    <p class="font-display text-sm font-extrabold capitalize text-navy-900" x-text="s"></p>
                                    <p class="mt-2 text-[11px] font-bold uppercase tracking-wide text-navy-400">Debt-free in</p>
                                    <p class="font-display text-lg font-extrabold text-navy-900"><span x-text="compare[s].months"></span> mo</p>
                                    <p class="mt-1.5 text-[11px] font-bold uppercase tracking-wide text-navy-400">Interest paid</p>
                                    <p class="font-display text-sm font-extrabold text-navy-700" x-text="fmt(compare[s].interest)"></p>
                                    <button @click="strategy = s; recalc()" x-show="strategy !== s"
                                            class="mt-2 text-xs font-bold text-wise-600 hover:text-wise-700">Switch to this →</button>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="card p-6">
                        <h2 class="font-display font-bold text-navy-900">Payoff order</h2>
                        <ol class="mt-3 space-y-2">
                            <template x-for="(item, i) in result.order" :key="i">
                                <li class="flex items-center gap-3 rounded-xl bg-navy-50/60 px-4 py-2.5">
                                    <span class="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-wise-400 text-xs font-extrabold text-navy-950" x-text="i + 1"></span>
                                    <span class="flex-1 text-sm font-semibold text-navy-800" x-text="item.name || 'Debt ' + (i + 1)"></span>
                                    <span class="text-xs font-bold text-navy-500" x-text="'cleared ' + item.clearedDate"></span>
                                </li>
                            </template>
                        </ol>
                    </div>

                    <div class="card p-6">
                        <h2 class="flex items-center gap-2 font-display font-bold text-navy-900"><x-icon name="target" class="h-5 w-5 text-wise-600" /> Make it a goal</h2>
                        <p class="mt-1 text-sm text-navy-500">Once the numbers look realistic, set a debt-free goal so the plan becomes part of your wider money dashboard.</p>
                        <div class="mt-4 flex flex-wrap gap-3">
                            <a href="{{ route('tools.show', 'wealth-goals') }}" class="btn-primary btn-sm">Set a goal <x-icon name="arrow-right" class="h-4 w-4" /></a>
                            @guest
                                <a href="{{ route('register') }}" class="btn-ghost btn-sm">Create free account</a>
                            @else
                                <a href="{{ route('dashboard') }}" class="btn-ghost btn-sm">Go to dashboard</a>
                            @endguest
                        </div>
                    </div>

                    {{-- PDF --}}
                    <div class="card flex items-center justify-between gap-4 p-6" x-data="{ busy: false }">
                        <div>
                            <h2 class="flex items-center gap-2 font-display font-bold text-navy-900"><x-icon name="download" class="h-5 w-5 text-wise-600" /> PDF report</h2>
                            <p class="mt-1 text-sm text-navy-500">Your full plan, branded and printable.</p>
                        </div>
                        <button @click="busy = true; window.downloadToolPdf('debt-payoff', pdfPayload()).then(() => busy = false)"
                                class="btn-primary btn-sm shrink-0" :disabled="busy || result.months === 0">
                            <span x-show="!busy">Download</span><span x-cloak x-show="busy">…</span>
                        </button>
                    </div>

                    {{-- Save plan --}}
                    <div class="card p-6" x-data="{ email: '', saved: false, saving: false, error: '' }">
                        <h2 class="flex items-center gap-2 font-display font-bold text-navy-900"><x-icon name="mail" class="h-5 w-5 text-wise-600" /> Keep this plan</h2>
                        <template x-if="!saved">
                            <div>
                                <p class="mt-1 text-sm text-navy-500">Save your plan before you leave. A free account keeps it on your dashboard; guests can email themselves a copy.</p>
                                <div class="mt-3 flex gap-2">
                                    @auth
                                        <button @click="saving = true; savePlan().then(() => { saved = true; saving = false; markSaved() })" class="btn-accent flex-1" :disabled="saving">
                                            <span x-show="!saving">Save to my dashboard</span><span x-cloak x-show="saving">Saving…</span>
                                        </button>
                                    @else
                                        <input type="email" x-model="email" placeholder="you@example.com"
                                               class="min-w-0 flex-1 rounded-full border-navy-200 px-4 text-sm focus:border-wise-400 focus:ring-wise-400">
                                        <button @click="if (!email.includes('@')) { error = 'Enter a valid email'; return }; error = ''; saving = true; savePlan(email).then(() => { saved = true; saving = false; markSaved() })"
                                                class="btn-accent shrink-0" :disabled="saving">
                                            <span x-show="!saving">Email me my plan</span><span x-cloak x-show="saving">Sending…</span>
                                        </button>
                                    @endauth
                                </div>
                                <p x-show="error" x-text="error" class="mt-2 text-sm font-medium text-rose-600"></p>
                            </div>
                        </template>
                        <template x-if="saved">
                            <p class="mt-2 flex items-center gap-1.5 font-semibold text-emerald-600"><x-icon name="check-circle" class="h-4 w-4" /> Plan saved! One step closer to freedom.</p>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        function debtPlanner() {
            const cf = window.MW.factor();

            return {
                cf,
                debts: [
                    { id: 1, name: 'Mobile loans (Fuliza, MoMo…)', balance: Math.round(8000 * cf), rate: 96, minPayment: Math.round(2000 * cf) },
                    { id: 2, name: 'Bank loan', balance: Math.round(150000 * cf), rate: 16, minPayment: Math.round(7500 * cf) },
                ],
                nextId: 3,
                strategy: 'snowball',
                extra: Math.round(2000 * cf),
                result: { months: 0, monthsLabel: '', freedomDate: '', totalInterest: 0, savingsVsOther: 0, order: [], series: [] },
                compare: { snowball: { months: 0, interest: 0 }, avalanche: { months: 0, interest: 0 } },
                chart: null,
                initialized: false,
                dirty: false,
                planSaved: false,

                fmt(v) { return window.MW.fmt(v); },
                totalBalance() { return this.debts.reduce((s, d) => s + (d.balance || 0), 0); },

                init() {
                    this.recalc();
                    window.addEventListener('beforeunload', (event) => {
                        if (!this.shouldWarnBeforeExit()) return;

                        event.preventDefault();
                        event.returnValue = '';
                    });
                },

                shouldWarnBeforeExit() {
                    return this.dirty && !this.planSaved && this.result.months > 0;
                },

                markSaved() {
                    this.planSaved = true;
                    this.dirty = false;
                },

                applyCurrency() {
                    const nf = window.MW.factor();
                    const r = nf / this.cf;
                    this.cf = nf;
                    this.debts.forEach(d => { d.balance = Math.round(d.balance * r); d.minPayment = Math.round(d.minPayment * r); });
                    this.extra = Math.round(this.extra * r);
                    this.recalc();
                },

                addDebt() { this.debts.push({ id: this.nextId++, name: '', balance: 0, rate: 14, minPayment: 0 }); },
                removeDebt(i) { this.debts.splice(i, 1); this.recalc(); },

                simulate(strategy) {
                    let debts = this.debts
                        .filter(d => (d.balance || 0) > 0)
                        .map(d => ({ ...d, balance: d.balance, minPayment: Math.max(0, d.minPayment || 0), cleared: null }));

                    if (debts.length === 0) return { months: 0, totalInterest: 0, order: [], series: [] };

                    const sortFn = strategy === 'snowball'
                        ? (a, b) => a.balance - b.balance
                        : (a, b) => b.rate - a.rate;

                    // Snowball/avalanche keeps the TOTAL monthly outlay constant: as each debt
                    // clears, its freed-up minimum rolls onto the next target debt. So the budget
                    // is extra + the sum of every debt's minimum, held steady until all are clear.
                    const monthlyBudget = this.extra + debts.reduce((s, d) => s + d.minPayment, 0);

                    let months = 0, totalInterest = 0;
                    const series = [debts.reduce((s, d) => s + d.balance, 0)];
                    const order = [];

                    while (debts.some(d => d.balance > 0.5) && months < 600) {
                        months++;

                        // 1. Interest accrues on every open debt
                        for (const d of debts) {
                            if (d.balance <= 0.5) continue;
                            const interest = d.balance * (d.rate / 100 / 12);
                            d.balance += interest;
                            totalInterest += interest;
                        }

                        let budget = monthlyBudget;

                        // 2. Cover each open debt's minimum first (capped at its balance and the budget)
                        for (const d of debts) {
                            if (d.balance <= 0.5 || budget <= 0) continue;
                            const pay = Math.min(d.minPayment, d.balance, budget);
                            d.balance -= pay;
                            budget -= pay;
                        }

                        // 3. Pour everything left (extra + freed-up minimums) onto the target debt(s)
                        const open = debts.filter(d => d.balance > 0.5).sort(sortFn);
                        for (const d of open) {
                            if (budget <= 0) break;
                            const pay = Math.min(budget, d.balance);
                            d.balance -= pay;
                            budget -= pay;
                        }

                        // 4. Record debts cleared this month
                        for (const d of debts) {
                            if (d.balance <= 0.5 && !d.cleared) {
                                d.cleared = months;
                                d.balance = 0;
                                order.push({ name: d.name, month: months });
                            }
                        }

                        series.push(debts.reduce((s, d) => s + Math.max(0, d.balance), 0));

                        // No-progress guard: the budget can't even cover the interest
                        if (series[months] >= series[months - 1] - 0.01) {
                            return { months: 0, totalInterest: 0, order: [], series: [] };
                        }
                    }

                    if (months >= 600) return { months: 0, totalInterest: 0, order: [], series: [] };

                    return { months, totalInterest, order, series };
                },

                monthToDate(m) {
                    const d = new Date();
                    d.setMonth(d.getMonth() + m);
                    return d.toLocaleDateString('en-KE', { month: 'short', year: 'numeric' });
                },

                recalc() {
                    if (this.initialized) {
                        this.dirty = true;
                        this.planSaved = false;
                    }

                    const mine = this.simulate(this.strategy);
                    const other = this.simulate(this.strategy === 'snowball' ? 'avalanche' : 'snowball');

                    this.compare = {
                        snowball: this.strategy === 'snowball'
                            ? { months: mine.months, interest: Math.round(mine.totalInterest) }
                            : { months: other.months, interest: Math.round(other.totalInterest) },
                        avalanche: this.strategy === 'avalanche'
                            ? { months: mine.months, interest: Math.round(mine.totalInterest) }
                            : { months: other.months, interest: Math.round(other.totalInterest) },
                    };

                    const years = Math.floor(mine.months / 12);
                    const rem = mine.months % 12;
                    const monthsLabel = mine.months === 0 ? '' :
                        (years > 0 ? `${years} yr${years > 1 ? 's' : ''} ` : '') + (rem > 0 ? `${rem} month${rem > 1 ? 's' : ''}` : '');

                    this.result = {
                        months: mine.months,
                        monthsLabel,
                        freedomDate: mine.months ? this.monthToDate(mine.months) : '',
                        totalInterest: mine.totalInterest,
                        savingsVsOther: other.months > 0 && mine.months > 0 ? Math.round(other.totalInterest - mine.totalInterest) : 0,
                        order: mine.order.map(o => ({ ...o, clearedDate: this.monthToDate(o.month) })),
                        series: mine.series,
                    };

                    this.drawChart();
                    this.initialized = true;
                },

                drawChart() {
                    const ctx = document.getElementById('payoffChart');
                    if (!ctx || !window.Chart) return;

                    const labels = this.result.series.map((_, i) => i);
                    if (this.chart) this.chart.destroy();

                    this.chart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels,
                            datasets: [{
                                label: 'Total debt',
                                data: this.result.series,
                                fill: true,
                                borderColor: window.brand.sky,
                                backgroundColor: 'rgba(88, 185, 230, 0.15)',
                                tension: 0.35,
                                pointRadius: 0,
                                borderWidth: 3,
                            }],
                        },
                        options: {
                            animation: { duration: 700 },
                            plugins: {
                                legend: { display: false },
                                tooltip: { callbacks: {
                                    title: (items) => 'Month ' + items[0].label,
                                    label: (item) => window.MW.fmt(item.raw),
                                } },
                            },
                            scales: {
                                y: { ticks: { callback: (v) => window.brand.num.format(v / 1000) + 'k' } },
                                x: { ticks: { maxTicksLimit: 8, callback: function (v) { return 'M' + this.getLabelForValue(v); } } },
                            },
                        },
                    });
                },

                pdfPayload() {
                    return {
                        highlight: { value: this.result.freedomDate, label: 'Your debt-free date, ' + this.result.monthsLabel + ' from today' },
                        sections: [
                            {
                                title: 'Plan summary',
                                rows: [
                                    ['Total debt today', this.fmt(this.totalBalance())],
                                    ['Strategy', this.strategy === 'snowball' ? 'Snowball (smallest first)' : 'Avalanche (highest interest first)'],
                                    ['Extra payment per month', this.fmt(this.extra)],
                                    ['Total interest you will pay', this.fmt(this.result.totalInterest)],
                                    ['Months to freedom', String(this.result.months)],
                                ],
                            },
                            {
                                title: 'Your debts',
                                rows: this.debts.map(d => [d.name || 'Debt', this.fmt(d.balance) + ' @ ' + d.rate + '%/yr']),
                            },
                            {
                                title: 'Payoff order',
                                rows: this.result.order.map((o, i) => [(i + 1) + '. ' + (o.name || 'Debt'), 'cleared ' + o.clearedDate]),
                            },
                        ],
                        note: 'Pay minimums on everything, put every extra coin on the target debt, and celebrate each cleared loan. Rebuild this plan whenever your numbers change: moneywise.co.ke/tools/debt-payoff',
                    };
                },

                savePlan(email = null) {
                    return fetch('{{ route('tools.save', 'debt-payoff') }}', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
                        body: JSON.stringify({
                            email,
                            label: 'Debt payoff plan',
                            inputs: { debts: this.debts, strategy: this.strategy, extra: this.extra, currency: window.MW.code() },
                            outputs: { months: this.result.months, freedomDate: this.result.freedomDate, totalInterest: Math.round(this.result.totalInterest) },
                        }),
                    }).then(() => window.celebrate?.());
                },
            };
        }
    </script>
    @endpush
</x-layouts.site>
