Payment Summary
Monthly Payment
${formatCurrency(calculationResult.monthlyPayment)}
Total Interest Paid
${formatCurrency(calculationResult.totalInterest)}
Final Payoff Date
${calculationResult.payoffDate}
Amortization Schedule
| # |
Date |
Principal |
Interest |
Balance |
${calculationResult.schedule.map(row => `
| ${row.paymentNumber} |
${row.paymentDate} |
${formatCurrency(row.principalPaid)} |
${formatCurrency(row.interestPaid)} |
${formatCurrency(row.remainingBalance)} |
`).join('')}
`;
document.getElementById('download-pdf-btn').addEventListener('click', generatePdf);
};
const renderConfig = () => {
const configContent = document.getElementById('content-config');
if (!configContent) return;
const feesHtml = appData.fees.map((fee, index) => `
`).join('');
configContent.innerHTML = `
Configure Additional Fees
`;
document.getElementById('fee-config-form').addEventListener('submit', handleConfigUpdate);
};
const handleConfigUpdate = (e) => {
e.preventDefault();
const newFees = [];
document.querySelectorAll('.fee-row').forEach(row => {
newFees.push({
name: row.querySelector('[data-field="name"]').value,
type: row.querySelector('[data-field="type"]').value,
value: parseFloat(row.querySelector('[data-field="value"]').value),
enabled: row.querySelector('[data-field="enabled"]').checked
});
});
appData.fees = newFees;
alert('Fee configuration saved! Your next calculation will include these changes.');
};
const generatePdf = () => {
if (!calculationResult) return;
loadingOverlay.style.display = 'flex';
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
// --- Add Content to PDF ---
let y = 40;
// Title
pdf.setFontSize(18);
pdf.setFont('helvetica', 'bold');
pdf.text('Installment Payment Plan Report', pdf.internal.pageSize.getWidth() / 2, y, { align: 'center' });
y += 30;
// Summary section
pdf.setFontSize(10);
pdf.setFont('helvetica', 'normal');
pdf.text(`Generated on: ${new Date().toLocaleDateString()}`, 40, y);
y += 30;
pdf.setFontSize(12);
pdf.setFont('helvetica', 'bold');
pdf.text('Loan Summary', 40, y);
y += 20;
pdf.setFontSize(10);
pdf.setFont('helvetica', 'normal');
const summaryData = [
['Purchase Amount:', formatCurrency(inputs.purchaseAmount)],
['Down Payment:', formatCurrency(inputs.downPayment)],
['Additional Fees:', formatCurrency(calculationResult.totalFees)],
['Total Principal:', formatCurrency(calculationResult.totalPrincipal)],
['Annual Interest Rate:', `${inputs.annualRate.toFixed(2)}%`],
['Loan Term:', `${inputs.loanTerm} ${inputs.termUnit}`],
['Monthly Payment:', formatCurrency(calculationResult.monthlyPayment)],
['Total Interest:', formatCurrency(calculationResult.totalInterest)],
['Payoff Date:', calculationResult.payoffDate]
];
summaryData.forEach(row => {
pdf.setFont('helvetica', 'bold');
pdf.text(row[0], 50, y);
pdf.setFont('helvetica', 'normal');
pdf.text(row[1], 200, y);
y += 15;
});
y += 20;
// Amortization Table
pdf.setFontSize(12);
pdf.setFont('helvetica', 'bold');
pdf.text('Amortization Schedule', 40, y);
y += 20;
pdf.autoTable({
startY: y,
head: [['#', 'Date', 'Principal', 'Interest', 'Balance']],
body: calculationResult.schedule.map(row => [
row.paymentNumber,
row.paymentDate,
formatCurrency(row.principalPaid),
formatCurrency(row.interestPaid),
formatCurrency(row.remainingBalance)
]),
theme: 'grid',
headStyles: { fillColor: [22, 163, 74] }, // Green header
styles: { fontSize: 8 },
});
pdf.save(`Payment-Plan-Report.pdf`);
loadingOverlay.style.display = 'none';
};
// --- TAB NAVIGATION & INITIALIZATION ---
const switchTab = (tabIndex) => {
activeTabIndex = tabIndex;
document.querySelectorAll('.tab-btn').forEach((btn, i) => btn.classList.toggle('active', i === tabIndex));
document.querySelectorAll('.tab-content').forEach((content, i) => content.classList.toggle('hidden', i !== tabIndex));
updateNavButtons();
};
const updateNavButtons = () => {
prevTabBtn.disabled = activeTabIndex === 0;
nextTabBtn.disabled = activeTabIndex === tabIdentifiers.length - 1;
};
const initializeUI = () => {
const tabs = [
{ name: 'Payment Calculator', id: 'calculator' },
{ name: 'Fee Configuration', id: 'config' }
];
tabIdentifiers = tabs.map(t => t.id);
tabsContainer.innerHTML = tabs.map(tab => `
`).join('');
mainContent.innerHTML = tabs.map(tab => `
`).join('');
tabs.forEach((tab, index) => {
document.getElementById(`tab-${tab.id}`).addEventListener('click', () => switchTab(index));
});
renderCalculator();
renderConfig();
switchTab(0);
lucide.createIcons();
};
initializeUI();
// Load jsPDF autoTable plugin
const autoTableScript = document.createElement('script');
autoTableScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js';
document.head.appendChild(autoTableScript);
prevTabBtn.addEventListener('click', () => { if (activeTabIndex > 0) switchTab(activeTabIndex - 1); });
nextTabBtn.addEventListener('click', () => { if (activeTabIndex < tabIdentifiers.length - 1) switchTab(activeTabIndex + 1); });
});
