`;
});
// Add marker for retirement
if (retirementHorizon > 0) {
const leftPercent = (retirementHorizon / totalYears) * 100;
timelineHtml += `
Retirement
${retirementHorizon} Yrs
`;
}
timelineHtml += `
`;
resultsContainer.innerHTML = timelineHtml;
initialMessage.classList.add('hidden');
resultsContainer.classList.remove('hidden');
pdfButtonContainer.classList.remove('hidden');
};
downloadPdfBtn.addEventListener('click', () => {
if (!lastPlanData) return;
const { jsPDF } = window.jspdf;
const { currentAge, retirementAge, retirementHorizon, goals } = lastPlanData;
const doc = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
const pageW = doc.internal.pageSize.getWidth();
const margin = 50;
let y = 0;
// PDF Header
doc.setFillColor('#f0fdf4'); // green-50
doc.rect(0, 0, pageW, 70, 'F');
doc.setFont('helvetica', 'bold');
doc.setFontSize(22);
doc.setTextColor('#065f46'); // emerald-800
doc.text('Personal Investment Plan', margin, 45);
y = 100;
// Profile Summary
doc.autoTable({
startY: y,
body: [
['Current Age', `${currentAge}`],
['Target Retirement Age', `${retirementAge}`],
['Retirement Horizon', `${retirementHorizon} Years`],
],
theme: 'plain',
styles: { fontSize: 11 }
});
y = doc.autoTable.previous.finalY + 30;
// Timeline Visualization
doc.setFont('helvetica', 'bold');
doc.setFontSize(14);
doc.setTextColor('#1f2937');
doc.text('Investment Timeline', margin, y);
y += 30;
const timelineY = y;
const timelineWidth = pageW - margin * 2;
doc.setDrawColor('#d1d5db');
doc.setLineWidth(2);
doc.line(margin, timelineY, margin + timelineWidth, timelineY);
const totalYears = Math.max(retirementHorizon, ...goals.map(g => g.years)) + 2;
const addMarker = (years, label, color) => {
const xPos = margin + (years / totalYears) * timelineWidth;
doc.setDrawColor(color);
doc.setLineWidth(3);
doc.line(xPos, timelineY - 10, xPos, timelineY + 10);
doc.setFontSize(9);
doc.setTextColor('#374151');
doc.text(label, xPos, timelineY - 25, { align: 'center' });
doc.setFontSize(8);
doc.setTextColor('#6b7280');
doc.text(`${years} Yrs`, xPos, timelineY - 15, { align: 'center' });
};
goals.forEach(goal => addMarker(goal.years, goal.name, '#059669'));
if (retirementHorizon > 0) addMarker(retirementHorizon, 'Retirement', '#ef4444');
y += 40;
// Goals Table
doc.setFont('helvetica', 'bold');
doc.setFontSize(14);
doc.setTextColor('#1f2937');
doc.text('Financial Goals Summary', margin, y);
y += 20;
const getRiskProfile = (years) => {
if (years <= 3) return 'Conservative';
if (years <= 10) return 'Balanced';
return 'Aggressive Growth';
};
const tableBody = goals.map(g => [
g.name,
`${g.years} Years`,
`$${g.amount.toLocaleString()}`,
getRiskProfile(g.years)
]);
doc.autoTable({
startY: y,
head: [['Goal', 'Time Horizon', 'Target Amount', 'Suggested Approach']],
body: tableBody,
theme: 'striped',
headStyles: { fillColor: '#047857' },
});
// Footer
const date = `Plan Generated: ${new Date().toLocaleDate-String('en-US')}`;
doc.setFontSize(9);
doc.setTextColor('#9ca3af');
doc.text(date, pageW / 2, doc.internal.pageSize.getHeight() - 20, { align: 'center' });
doc.save('Investment_Horizon_Plan.pdf');
});
// Initialize with default goals
createGoalElement();
document.querySelector('.goal-name').value = 'House Down Payment';
document.querySelector('.goal-years').value = 5;
document.querySelector('.goal-amount').value = 50000;
createGoalElement();
document.querySelectorAll('.goal-name')[1].value = 'Child\'s College Fund';
document.querySelectorAll('.goal-years')[1].value = 15;
document.querySelectorAll('.goal-amount')[1].value = 150000;
showTab(0);
});
