Total Interest
$${(result.totalPaid - result.totalAmount).toFixed(2)}
Total Paid
$${result.totalPaid.toFixed(2)}
`;
scheduleHtml += `
| # |
Principal |
Interest |
Balance |
`;
let balance = principal;
const monthlyRate = result.apr / 12 / 100;
for (let i = 1; i <= result.numInstallments; i++) {
const interestPayment = balance * monthlyRate;
const principalPayment = result.installmentAmount - interestPayment;
balance -= principalPayment;
scheduleHtml += `
| ${i} |
$${principalPayment.toFixed(2)} |
$${interestPayment.toFixed(2)} |
$${Math.abs(balance).toFixed(2)} |
`;
}
scheduleHtml += `
`;
resultsContainer.innerHTML = scheduleHtml;
};
const renderCalculationLog = () => {
if (calculationsLog.length === 0) {
configTableBody.innerHTML = `
| No calculations in this session. |
`;
} else {
configTableBody.innerHTML = [...calculationsLog].reverse().map(c => `
| $${c.totalAmount.toFixed(2)} |
${c.numInstallments} |
${c.apr.toFixed(1)}% |
$${c.downPaymentAmount.toFixed(2)} |
$${c.installmentAmount.toFixed(2)} |
$${c.totalPaid.toFixed(2)} |
`).join('');
}
};
// --- UI & EVENT HANDLERS ---
const switchTab = (tabId) => {
currentTab = tabId;
Object.values(tabPanes).forEach(pane => pane.classList.add('hidden'));
tabPanes[tabId].classList.remove('hidden');
Object.values(tabButtons).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive'));
tabButtons[tabId].classList.replace('tab-inactive', 'tab-active');
updateNavButtons();
};
const navigateTabs = (direction) => {
const currentIndex = tabs.indexOf(currentTab);
const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
if (newIndex >= 0 && newIndex < tabs.length) switchTab(tabs[newIndex]);
};
const updateNavButtons = () => {
const currentIndex = tabs.indexOf(currentTab);
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === tabs.length - 1;
prevBtn.classList.toggle('opacity-50', prevBtn.disabled);
nextBtn.classList.toggle('opacity-50', nextBtn.disabled);
};
const handlePdfDownload = () => {
if(calculationsLog.length === 0) return;
const pdfRenderContainer = document.getElementById('pdf-render-content');
let pdfHtml = `
Installment Calculation Log
| Total Amt |
# Install |
APR |
Down Pymt |
Install Amt |
Total Paid |
${calculationsLog.map(c => `
| $${c.totalAmount.toFixed(2)} |
${c.numInstallments} |
${c.apr.toFixed(1)}% |
$${c.downPaymentAmount.toFixed(2)} |
$${c.installmentAmount.toFixed(2)} |
$${c.totalPaid.toFixed(2)} |
`).join('')}
`;
pdfRenderContainer.innerHTML = pdfHtml;
html2canvas(pdfRenderContainer, { scale: 2 }).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth(), margin = 40;
const contentWidth = pdfWidth - margin * 2;
const pdfHeight = (canvas.height * contentWidth) / canvas.width;
pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, pdfHeight);
pdf.save('Installment-Calculation-Log.pdf');
});
};
const handleClearLog = () => {
calculationsLog = [];
renderCalculationLog();
resultsContainer.innerHTML = `
Results will appear here after calculation.
`;
downloadPdfBtn.disabled = true;
};
// --- EVENT LISTENERS ---
window.switchTab = switchTab;
window.navigateTabs = navigateTabs;
calculateBtn.addEventListener('click', handleCalculation);
downloadPdfBtn.addEventListener('click', handlePdfDownload);
clearLogBtn.addEventListener('click', handleClearLog);
// --- INITIALIZATION ---
renderCalculationLog();
updateNavButtons();
switchTab('dashboard');
});
