Error: Tool components missing. Please refresh.

"; return; } function formatCurrency(value) { const num = Number(value); if (isNaN(num) || !isFinite(num)) return '$--'; return `$${num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; } function calculateMonthlyPayment(principal, annualRatePercent, termMonths) { if (principal <= 0 || termMonths <= 0) return 0; const monthlyRate = annualRatePercent > 0 ? (annualRatePercent / 100) / 12 : 0; if (monthlyRate === 0) return principal / termMonths; const payment = principal * (monthlyRate * Math.pow(1 + monthlyRate, termMonths)) / (Math.pow(1 + monthlyRate, termMonths) - 1); return isNaN(payment) || !isFinite(payment) ? 0 : payment; } function updateUIForCurrentTab() { tabContents.forEach((content, index) => content.classList.toggle('fvvl-active', index === currentTabIndex)); tabButtons.forEach((button, index) => button.classList.toggle('fvvl-active', index === currentTabIndex)); prevTabBtn.classList.toggle('hidden', currentTabIndex === 0); const isFinalTab = currentTabIndex === TABS_CONFIG.length - 1; if (isFinalTab) { nextTabBtnOrView.textContent = 'View Full Comparison'; nextTabBtnOrView.classList.add('fvvl-view-comparison-btn'); if (!fixedLoanResults || !variableLoanResults) { nextTabBtnOrView.disabled = true; nextTabBtnOrView.style.opacity = '0.6'; if(compareInstructionEl) compareInstructionEl.textContent = "Please calculate fixed and variable loan scenarios in previous tabs to enable comparison."; } else { nextTabBtnOrView.disabled = false; nextTabBtnOrView.style.opacity = '1'; if(compareInstructionEl && comparisonResultsDisplayEl.style.display === 'none') { compareInstructionEl.textContent = "Click 'View Full Comparison' to see the results."; compareInstructionEl.style.display = 'block'; } else if (comparisonResultsDisplayEl.style.display === 'block' && compareInstructionEl) { compareInstructionEl.style.display = 'none'; } } } else { nextTabBtnOrView.textContent = 'Next'; nextTabBtnOrView.classList.remove('fvvl-view-comparison-btn'); nextTabBtnOrView.disabled = false; nextTabBtnOrView.style.opacity = '1'; } nextTabBtnOrView.classList.toggle('hidden', isFinalTab && comparisonResultsDisplayEl.style.display === 'block'); } function validateLoanBasics(showAlerts = true) { const amount = parseFloat(loanAmountEl.value); const term = parseFloat(loanTermYearsEl.value); if (isNaN(amount) || amount <= 0) { if(showAlerts) alert("Loan Basics: Please enter a valid loan amount."); loanAmountEl.focus(); return false;} if (isNaN(term) || term <= 0) { if(showAlerts) alert("Loan Basics: Please enter a valid loan term."); loanTermYearsEl.focus(); return false;} loanBasics.amount = amount; loanBasics.termYears = term; loanBasics.termMonths = Math.round(term * 12); return true; } [loanAmountEl, loanTermYearsEl].forEach(el => { el.addEventListener('input', () => { fixedLoanResults = null; // Reset results if basics change variableLoanResults = null; if (fixedResultsEl) fixedResultsEl.style.display = 'none'; if (variableResultsEl) variableResultsEl.style.display = 'none'; if (comparisonResultsDisplayEl) comparisonResultsDisplayEl.style.display = 'none'; if (pdfDownloadBtn) pdfDownloadBtn.style.display = 'none'; if (compareInstructionEl) compareInstructionEl.style.display = 'block'; updateUIForCurrentTab(); }); }); tabButtons.forEach((button, index) => button.addEventListener('click', () => { currentTabIndex = index; updateUIForCurrentTab(); })); prevTabBtn.addEventListener('click', () => { if (currentTabIndex > 0) { currentTabIndex--; updateUIForCurrentTab(); } }); nextTabBtnOrView.addEventListener('click', () => { if (currentTabIndex === TABS_CONFIG.length - 1) { displayComparison(); } else if (currentTabIndex < TABS_CONFIG.length - 1) { if (currentTabIndex === 0 && !validateLoanBasics(true)) return; if (currentTabIndex === 1 && !fixedLoanResults) { if (fixedInterestRateEl.value.trim() !== "" && parseFloat(fixedInterestRateEl.value) >= 0) { alert("Please calculate the Fixed Loan details before proceeding."); return; } else { fixedLoanResults = { rate: 0, monthlyPayment: 0, totalInterest: 0, totalPaid: loanBasics.amount || 0, termMonths: loanBasics.termMonths || 0 }; } } if (currentTabIndex === 2 && !variableLoanResults) { if (initialVariableRateEl.value.trim() !== "" && parseFloat(initialVariableRateEl.value) >= 0) { alert("Please simulate the Variable Loan details before proceeding."); return; } else { variableLoanResults = { initialRate: 0, rateChanges:[], initialMonthlyPayment:0, paymentRange: [0,0], totalInterest:0, totalPaid:loanBasics.amount || 0, termMonths: loanBasics.termMonths || 0 }; } } currentTabIndex++; updateUIForCurrentTab(); } }); calculateFixedBtn.addEventListener('click', () => { if (!validateLoanBasics(true)) return; const rate = parseFloat(fixedInterestRateEl.value); if (isNaN(rate) || rate < 0 || rate > 100) { alert("Fixed Rate: Please enter a valid interest rate."); fixedInterestRateEl.focus(); return; } const monthlyPayment = calculateMonthlyPayment(loanBasics.amount, rate, loanBasics.termMonths); const totalPaid = monthlyPayment > 0 ? monthlyPayment * loanBasics.termMonths : loanBasics.amount; const totalInterest = totalPaid - loanBasics.amount; fixedMonthlyPaymentEl.textContent = formatCurrency(monthlyPayment); fixedTotalInterestEl.textContent = formatCurrency(totalInterest); fixedTotalPaidEl.textContent = formatCurrency(totalPaid); fixedResultsEl.style.display = 'block'; fixedLoanResults = { rate: rate, monthlyPayment: monthlyPayment, totalInterest: totalInterest, totalPaid: totalPaid, termMonths: loanBasics.termMonths }; updateUIForCurrentTab(); pdfDownloadBtn.style.display = 'none'; comparisonResultsDisplayEl.style.display = 'none'; if(compareInstructionEl) compareInstructionEl.style.display = 'block'; }); [rateChange1ActiveEl, rateChange2ActiveEl].forEach((checkbox, index) => { const inputsEl = index === 0 ? rateChange1InputsEl : rateChange2InputsEl; checkbox.addEventListener('change', () => { inputsEl.classList.toggle('fvvl-hidden', !checkbox.checked); }); }); simulateVariableBtn.addEventListener('click', () => { if (!validateLoanBasics(true)) return; const initialRate = parseFloat(initialVariableRateEl.value); if (isNaN(initialRate) || initialRate < 0 || initialRate > 100) { alert("Variable Rate: Please enter a valid initial rate."); initialVariableRateEl.focus(); return; } let balance = loanBasics.amount; let termRemainingMonthsCalc = loanBasics.termMonths; let currentAnnualRate = initialRate; let totalInterestVar = 0; let totalPrincipalVar = 0; // Will accumulate principal paid let monthlyPaymentsList = []; const rateChanges = []; if (rateChange1ActiveEl.checked) { const month = parseInt(rateChange1AfterMonthsEl.value); const newRate = parseFloat(newRate1El.value); if (!isNaN(month) && month > 0 && month <= loanBasics.termMonths && !isNaN(newRate) && newRate >= 0 && newRate <= 100) { rateChanges.push({ afterMonth: month, newRate: newRate }); } else { alert("Invalid input for Rate Change 1. Month must be within loan term."); return;} } if (rateChange2ActiveEl.checked) { const month = parseInt(rateChange2AfterMonthsEl.value); const newRate = parseFloat(newRate2El.value); if (!isNaN(month) && month > 0 && month <= loanBasics.termMonths && !isNaN(newRate) && newRate >= 0 && newRate <= 100) { if (rateChanges.length > 0 && month <= rateChanges[0].afterMonth) { alert("Rate Change 2 must occur after Rate Change 1."); return; } rateChanges.push({ afterMonth: month, newRate: newRate }); } else { alert("Invalid input for Rate Change 2. Month must be within loan term."); return;} } rateChanges.sort((a,b) => a.afterMonth - b.afterMonth); let currentMonthlyPayment = calculateMonthlyPayment(balance, currentAnnualRate, termRemainingMonthsCalc); if(currentMonthlyPayment === 0 && balance > 0) { // Initial check if loan is payable alert("Cannot calculate variable loan with initial terms resulting in zero payment for a positive balance."); return; } for (let month = 1; month <= loanBasics.termMonths; month++) { if (balance <= 0.005) break; for (const change of rateChanges) { if (month === change.afterMonth) { currentAnnualRate = change.newRate; currentMonthlyPayment = calculateMonthlyPayment(balance, currentAnnualRate, termRemainingMonthsCalc - (month - 1)); if(currentMonthlyPayment === 0 && balance > 0) { alert(`Warning: At rate change in month ${month}, payment became zero with remaining balance. Simulation may be inaccurate.`); // Allow to proceed to show the result of this scenario } break; } } monthlyPaymentsList.push(currentMonthlyPayment); const interestThisMonth = balance * (currentAnnualRate / 100 / 12); let principalThisMonth = currentMonthlyPayment - interestThisMonth; let actualPaymentThisMonth = currentMonthlyPayment; if (principalThisMonth < 0 && currentMonthlyPayment > 0) principalThisMonth = 0; // Payment covers only interest or less if (balance + interestThisMonth <= currentMonthlyPayment + 0.005) { actualPaymentThisMonth = balance + interestThisMonth; principalThisMonth = balance; balance = 0; } else { balance -= principalThisMonth; } totalInterestVar += interestThisMonth; totalPrincipalVar += principalThisMonth; if (balance <= 0.005) balance = 0; } const totalPaidVar = totalPrincipalVar + totalInterestVar; varInitialMonthlyPaymentEl.textContent = formatCurrency(monthlyPaymentsList[0] || 0); const validPayments = monthlyPaymentsList.filter(p => p > 0 && isFinite(p)); const minPayment = validPayments.length ? Math.min(...validPayments) : 0; const maxPayment = validPayments.length ? Math.max(...validPayments) : 0; varPaymentRangeEl.textContent = (minPayment !== maxPayment && maxPayment > 0) ? `${formatCurrency(minPayment)} - ${formatCurrency(maxPayment)}` : formatCurrency(monthlyPaymentsList[0] || 0); varTotalInterestEl.textContent = formatCurrency(totalInterestVar); varTotalPaidEl.textContent = formatCurrency(totalPaidVar); variableResultsEl.style.display = 'block'; variableLoanResults = { initialRate: initialRate, rateChanges: rateChanges, initialMonthlyPayment: monthlyPaymentsList[0] || 0, paymentRange: [minPayment, maxPayment], totalInterest: totalInterestVar, totalPaid: totalPaidVar, termMonths: loanBasics.termMonths }; updateUIForCurrentTab(); pdfDownloadBtn.style.display = 'none'; comparisonResultsDisplayEl.style.display = 'none'; if(compareInstructionEl) compareInstructionEl.style.display = 'block'; }); function displayComparison() { if (!fixedLoanResults || !variableLoanResults) { alert("Please calculate both fixed and variable loan scenarios first (on Tabs 2 and 3)."); return; } if(compareInstructionEl) compareInstructionEl.style.display = 'none'; comparisonResultsDisplayEl.style.display = 'block'; compFixedMonthlyPaymentEl.textContent = formatCurrency(fixedLoanResults.monthlyPayment); compVarInitialMonthlyPaymentEl.textContent = formatCurrency(variableLoanResults.initialMonthlyPayment); let diffInitialPayment = variableLoanResults.initialMonthlyPayment - fixedLoanResults.monthlyPayment; compDiffInitialMonthlyPaymentEl.textContent = `${diffInitialPayment >= 0 ? '+' : ''}${formatCurrency(diffInitialPayment)}`; compDiffInitialMonthlyPaymentEl.className = `fvvl-value-diff ${diffInitialPayment > 0.005 ? 'negative' : (diffInitialPayment < -0.005 ? 'positive' : '')}`; if (variableLoanResults.paymentRange[0] !== variableLoanResults.paymentRange[1] && variableLoanResults.paymentRange[1] > 0) { compVarPaymentRangeEl.textContent = `${formatCurrency(variableLoanResults.paymentRange[0])} - ${formatCurrency(variableLoanResults.paymentRange[1])}`; } else { compVarPaymentRangeEl.textContent = formatCurrency(variableLoanResults.initialMonthlyPayment); } compFixedTotalInterestEl.textContent = formatCurrency(fixedLoanResults.totalInterest); compVarTotalInterestEl.textContent = formatCurrency(variableLoanResults.totalInterest); let diffTotalInterest = variableLoanResults.totalInterest - fixedLoanResults.totalInterest; compDiffTotalInterestEl.textContent = `${diffTotalInterest >= 0 ? '+' : ''}${formatCurrency(diffTotalInterest)}`; compDiffTotalInterestEl.className = `fvvl-value-diff ${diffTotalInterest > 0.005 ? 'negative' : (diffTotalInterest < -0.005 ? 'positive' : '')}`; compFixedTotalPaidEl.textContent = formatCurrency(fixedLoanResults.totalPaid); compVarTotalPaidEl.textContent = formatCurrency(variableLoanResults.totalPaid); let diffTotalPaid = variableLoanResults.totalPaid - fixedLoanResults.totalPaid; compDiffTotalPaidEl.textContent = `${diffTotalPaid >= 0 ? '+' : ''}${formatCurrency(diffTotalPaid)}`; compDiffTotalPaidEl.className = `fvvl-value-diff ${diffTotalPaid > 0.005 ? 'negative' : (diffTotalPaid < -0.005 ? 'positive' : '')}`; pdfDownloadBtn.style.display = 'block'; nextTabBtnOrView.classList.add('hidden'); } pdfDownloadBtn.addEventListener('click', function() { if (!loanBasics.amount || !fixedLoanResults || !variableLoanResults || !comparisonResultsDisplayEl || comparisonResultsDisplayEl.style.display === 'none') { alert("Please complete all loan scenarios and view the comparison first."); return; } // 1. Check if jsPDF library itself is loaded if (typeof window.jspdf === 'undefined' || typeof window.jspdf.jsPDF === 'undefined') { alert("Error: Core PDF library (jsPDF) is not loaded correctly. Please ensure you are connected to the internet or try again later."); console.error("jsPDF core is not available. window.jspdf:", window.jspdf); return; } const { jsPDF } = window.jspdf; const doc = new jsPDF("p", "mm", "a4"); // Initialize 'doc' HERE // 2. Now check if autoTable plugin is available on the 'doc' instance let autoTableAvailable = typeof doc.autoTable === 'function'; if (!autoTableAvailable) { console.warn("jsPDF.autoTable plugin is not available. The comparison table in the PDF will be rendered as simple text."); } try { let yPos = 15; const lineH = 7; const margin = 15; const pageWidth = doc.internal.pageSize.getWidth(); const contentWidth = pageWidth - (2*margin); doc.setFontSize(16).setFont(undefined,'bold').text("Fixed vs. Variable Loan Comparison Report", pageWidth/2, yPos, {align:'center'}); yPos+=lineH*1.5; doc.setFontSize(11).setFont(undefined,'bold').text("Loan Basics:", margin, yPos); yPos+=lineH; doc.setFontSize(9).setFont(undefined,'normal'); doc.text(`Loan Amount: ${formatCurrency(loanBasics.amount)}`, margin+2, yPos); yPos+=lineH*0.8; doc.text(`Loan Term: ${loanBasics.termYears} Years (${loanBasics.termMonths} Months)`, margin+2, yPos); yPos+=lineH*1.2; doc.setFontSize(11).setFont(undefined,'bold').text("Fixed-Rate Loan Scenario:", margin, yPos); yPos+=lineH; doc.setFontSize(9).setFont(undefined,'normal'); doc.text(`Interest Rate: ${fixedLoanResults.rate}%`, margin+2, yPos); yPos+=lineH*0.8; doc.text(`Monthly Payment: ${formatCurrency(fixedLoanResults.monthlyPayment)}`, margin+2, yPos); yPos+=lineH*0.8; doc.text(`Total Interest Paid: ${formatCurrency(fixedLoanResults.totalInterest)}`, margin+2, yPos); yPos+=lineH*0.8; doc.text(`Total Amount Paid: ${formatCurrency(fixedLoanResults.totalPaid)}`, margin+2, yPos); yPos+=lineH*1.2; doc.setFontSize(11).setFont(undefined,'bold').text("Variable-Rate Loan Scenario (Simulated):", margin, yPos); yPos+=lineH; doc.setFontSize(9).setFont(undefined,'normal'); doc.text(`Initial Interest Rate: ${variableLoanResults.initialRate}%`, margin+2, yPos); yPos+=lineH*0.8; variableLoanResults.rateChanges.forEach((change, idx) => { doc.text(` Change ${idx+1}: ${change.newRate}% after ${change.afterMonth} months`, margin+2, yPos); yPos+=lineH*0.8; }); doc.text(`Initial Monthly Payment: ${formatCurrency(variableLoanResults.initialMonthlyPayment)}`, margin+2, yPos); yPos+=lineH*0.8; let paymentRangeText = variableLoanResults.paymentRange[0] !== variableLoanResults.paymentRange[1] && variableLoanResults.paymentRange[1] > 0 ? `${formatCurrency(variableLoanResults.paymentRange[0])} - ${formatCurrency(variableLoanResults.paymentRange[1])}` : formatCurrency(variableLoanResults.initialMonthlyPayment); doc.text(`Monthly Payment Range: ${paymentRangeText}`, margin+2, yPos); yPos+=lineH*0.8; doc.text(`Total Interest Paid: ${formatCurrency(variableLoanResults.totalInterest)}`, margin+2, yPos); yPos+=lineH*0.8; doc.text(`Total Amount Paid: ${formatCurrency(variableLoanResults.totalPaid)}`, margin+2, yPos); yPos+=lineH*1.2; if (yPos > 220) { doc.addPage(); yPos = 15;} // Check for space before table/summary doc.setFontSize(11).setFont(undefined,'bold').text("Comparison Summary:", margin, yPos); yPos+=lineH; if (autoTableAvailable) { doc.autoTable({ startY: yPos, margin: {left: margin, right: margin}, head: [['Metric', 'Fixed-Rate Loan', 'Variable-Rate (Simulated)', 'Difference (Var - Fixed)']], body: [ ['Initial/Fixed Monthly Pmt', compFixedMonthlyPaymentEl.textContent, compVarInitialMonthlyPaymentEl.textContent, compDiffInitialMonthlyPaymentEl.textContent], ['Monthly Payment Range', 'N/A (Constant)', compVarPaymentRangeEl.textContent, 'N/A'], ['Total Interest Paid', compFixedTotalInterestEl.textContent, compVarTotalInterestEl.textContent, compDiffTotalInterestEl.textContent], ['Total Amount Paid', compFixedTotalPaidEl.textContent, compVarTotalPaidEl.textContent, compDiffTotalPaidEl.textContent] ], theme: 'grid', headStyles: {fillColor: [233, 236, 239], textColor: [73,80,87], fontStyle:'bold', fontSize:8}, bodyStyles: {fontSize: 8, cellPadding:1.5}, didDrawCell: (data) => { if (data.column.index === 3 && data.cell.section === 'body') { if (data.cell.text && data.cell.text[0] && data.cell.text[0].includes('+')) { doc.setTextColor(220, 53, 69); } else if (data.cell.text && data.cell.text[0] && data.cell.text[0].includes('-')) { doc.setTextColor(40, 167, 69); } } } }); yPos = doc.autoTable.previous.finalY + lineH; } else { doc.setFontSize(9).setFont(undefined,'normal'); doc.text("Comparison Table (autoTable plugin not available for full formatting):", margin, yPos); yPos+=lineH; doc.text(`Metric | Fixed | Variable | Difference`, margin + 2, yPos); yPos+=lineH*0.5; doc.line(margin + 2, yPos, contentWidth + margin - 2, yPos);yPos+=lineH*0.5; // Simple separator doc.text(`Initial/Fixed Pmt | ${compFixedMonthlyPaymentEl.textContent} | ${compVarInitialMonthlyPaymentEl.textContent} | ${compDiffInitialMonthlyPaymentEl.textContent}`, margin+2, yPos); yPos+=lineH*0.7; doc.text(`Pmt Range | N/A | ${compVarPaymentRangeEl.textContent} | N/A`, margin+2, yPos); yPos+=lineH*0.7; doc.text(`Total Interest | ${compFixedTotalInterestEl.textContent} | ${compVarTotalInterestEl.textContent} | ${compDiffTotalInterestEl.textContent}`, margin+2, yPos); yPos+=lineH*0.7; doc.text(`Total Paid | ${compFixedTotalPaidEl.textContent} | ${compVarTotalPaidEl.textContent} | ${compDiffTotalPaidEl.textContent}`, margin+2, yPos); yPos+=lineH*0.7; } doc.setFontSize(8).setFont(undefined,'normal').setTextColor(80,80,80); const disclaimerText = document.querySelector('#loanTypeSimulatorTool .important-note-fvvl').innerText.replace("Important Simulator Information: ", "").trim(); const disclaimerLines = doc.splitTextToSize(disclaimerText, contentWidth); if (yPos + (disclaimerLines.length * lineH * 0.7) + 6 > 280 && disclaimerLines.length > 0) { doc.addPage(); yPos = 15; } doc.setDrawColor(220,220,220); doc.setFillColor(241,243,245); doc.rect(margin, yPos -3 , contentWidth, (disclaimerLines.length * lineH * 0.6) + 6 , 'FD'); doc.text(disclaimerLines, margin+2, yPos+2); doc.save("Fixed_vs_Variable_Loan_Simulation.pdf"); } catch (error) { console.error("Error during PDF generation:", error); alert("An unexpected error occurred while generating the PDF. Please check the console. Error: " + error.message); } }); // Initialize updateUIForCurrentTab(); [rateChange1ActiveEl, rateChange2ActiveEl].forEach((checkbox, index) => { const inputsEl = index === 0 ? rateChange1InputsEl : rateChange2InputsEl; if (checkbox && inputsEl) inputsEl.classList.toggle('fvvl-hidden', !checkbox.checked); }); });