Details will appear once expenses are added.

"; } else { monthlyBreakdownTableContainer.innerHTML = breakdownHtml; } } // Update Tab 3: Review & Download (this is a full copy for review before PDF) if (finalReviewOutput) { if (seasonalExpenses.length === 0 || totalAnnualCost === 0) { finalReviewOutput.innerHTML = "

Please add your seasonal expenses on the first tab to generate the plan.

"; return; } let reviewHtml = '

Your Seasonal Expense Plan

'; reviewHtml += '

Itemized Expenses:

'; if (seasonalExpenses.filter(e => e.name.trim() !== "").length > 0) { reviewHtml += ''; seasonalExpenses.forEach(exp => { if (exp.name.trim() !== "") { reviewHtml += ``; } }); reviewHtml += '

Expense	Cost ($)	Month
${exp.name}	${parseFloat(exp.cost || 0).toFixed(2)}	${exp.month}

'; } else { reviewHtml += "

No itemized expenses recorded.

"; } reviewHtml += ``; reviewHtml += '

Monthly Expense Outlook:

'; reviewHtml += monthlyBreakdownTableContainer.innerHTML; // Reuse the table html finalReviewOutput.innerHTML = reviewHtml; } } window.sep_openTab = function(event, tabId) { if (!tabContents || !tabLinks) { console.error("Tab elements not found for Seasonal Planner."); return; } tabContents.forEach(tc => tc.style.display = 'none'); tabLinks.forEach(tl => tl.classList.remove('sep-active')); const tabElement = document.getElementById(tabId); if (tabElement) { tabElement.style.display = 'block'; } else { console.error("Tab element not found for id:", tabId); } if (event && event.currentTarget) { event.currentTarget.classList.add('sep-active'); } else if (event) { const activeTabButton = Array.from(tabLinks).find(btn => btn.getAttribute('onclick').includes(tabId)); if(activeTabButton) activeTabButton.classList.add('sep-active'); } currentTabIndex = Array.from(tabLinks).findIndex(tl => tl.classList.contains('sep-active')); sep_updateNavButtons(); // Refresh content when certain tabs are opened if (tabId === 'sepAnnualOverview' || tabId === 'sepDownloadPlan') { sep_calculateAndDisplaySummaries(); } } window.sep_navigateTab = function(direction) { let newIndex = currentTabIndex; if (direction === 'next' && currentTabIndex < tabLinks.length - 1) { newIndex++; } else if (direction === 'prev' && currentTabIndex > 0) { newIndex--; } if(tabLinks[newIndex]) { tabLinks[newIndex].click(); } } function sep_updateNavButtons() { if(prevTabButton) prevTabButton.disabled = (currentTabIndex === 0); if(nextTabButton) nextTabButton.disabled = (currentTabIndex === tabLinks.length - 1); } window.sep_downloadPlanAsPDF = async function() { if (!sep_jsPDFLoaded || !sep_html2canvasLoaded) { alert("PDF libraries are still loading. Please wait a moment and try again."); return; } if (typeof html2canvas === 'undefined' || typeof jspdf === 'undefined' || typeof jspdf.jsPDF === 'undefined') { alert("PDF generation library (jsPDF or html2canvas) is not available. Please ensure you are connected to the internet."); return; } const { jsPDF } = jspdf; const pdfDoc = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); // Prepare content for PDF const pdfItemizedContainer = document.getElementById('sep-pdfItemizedExpenses'); const pdfSummaryContainer = document.getElementById('sep-pdfFinancialSummary'); const pdfMonthlyContainer = document.getElementById('sep-pdfMonthlyOutlook'); const pdfMainTitle = document.querySelector('#sep-pdfContent h2'); // The main H2 from the hidden div if (!pdfItemizedContainer || !pdfSummaryContainer || !pdfMonthlyContainer || !pdfMainTitle) { console.error("One or more PDF content template containers are missing."); return; } sep_calculateAndDisplaySummaries(); // Ensure data is fresh let totalAnnualCost = 0; seasonalExpenses.forEach(exp => { if (exp.name.trim() !== "") totalAnnualCost += parseFloat(exp.cost || 0); }); const averageMonthlySavings = totalAnnualCost > 0 ? (totalAnnualCost / 12) : 0; // 1. Populate Itemized Expenses for PDF let itemizedHtml = '

Itemized Seasonal Expenses

'; if (seasonalExpenses.filter(e => e.name.trim() !== "").length > 0) { itemizedHtml += ''; seasonalExpenses.forEach(exp => { if (exp.name.trim() !== "") { itemizedHtml += ``; } }); itemizedHtml += '

Expense	Cost ($)	Month
${exp.name}	${parseFloat(exp.cost || 0).toFixed(2)}	${exp.month}

'; } else { itemizedHtml += "

No itemized expenses recorded.

"; } pdfItemizedContainer.innerHTML = itemizedHtml; // 2. Populate Financial Summary for PDF pdfSummaryContainer.innerHTML = `

Financial Summary

Total Annual Seasonal Expenses:	$${totalAnnualCost.toFixed(2)}
Suggested Monthly Savings:	$${averageMonthlySavings.toFixed(2)}

`; // 3. Populate Monthly Outlook for PDF const monthlyTotals = months.reduce((acc, month) => { acc[month] = 0; return acc; }, {}); seasonalExpenses.forEach(exp => { if (exp.name.trim() !== "" && monthlyTotals.hasOwnProperty(exp.month)) { monthlyTotals[exp.month] += parseFloat(exp.cost || 0); } }); let monthlyHtml = '

Monthly Expense Outlook

'; months.forEach(month => { monthlyHtml += ``; }); monthlyHtml += '

Month	Total Expenses ($)
${month}	${monthlyTotals[month].toFixed(2)}

'; pdfMonthlyContainer.innerHTML = monthlyHtml; const pdfContentElement = document.getElementById('sep-pdfContent'); if (!pdfContentElement) { console.error("PDF content element 'sep-pdfContent' not found."); return; } pdfContentElement.style.display = 'block'; // Make it visible for html2canvas try { const canvas = await html2canvas(pdfContentElement, { scale: 2, useCORS: true, backgroundColor: '#ffffff', onclone: (clonedDoc) => { const thElements = clonedDoc.querySelectorAll('.sep-results-table th'); thElements.forEach(th => { th.style.backgroundColor = '#e8f5e9'; // Use static color from CSS th.style.color = '#4CAF50'; }); clonedDoc.querySelectorAll('#sep-pdfContent h2, #sep-pdfContent h3').forEach(h => { h.style.color = '#4CAF50'; }); } }); pdfContentElement.style.display = 'none'; const imgData = canvas.toDataURL('image/png'); const imgProps = pdfDoc.getImageProperties(imgData); const pdfWidth = pdfDoc.internal.pageSize.getWidth(); const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width; let currentPosition = 0; const pageHeight = pdfDoc.internal.pageSize.getHeight() - 20; // Page height with margin (10mm top, 10mm bottom) let heightLeft = pdfHeight; pdfDoc.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, 0); // Add image, auto-height based on width heightLeft -= pageHeight; while (heightLeft > 0) { currentPosition -= pageHeight; pdfDoc.addPage(); pdfDoc.addImage(imgData, 'PNG', 10, currentPosition, pdfWidth - 20, 0); heightLeft -= pageHeight; } pdfDoc.save('Seasonal_Expense_Plan.pdf'); } catch (error) { console.error("Error generating PDF for Seasonal Planner:", error); alert("An error occurred while generating the PDF. Please check the console."); pdfContentElement.style.display = 'none'; } } // Initial Setup function sep_initialize() { // Add one empty row to start, or load from saved data if implemented if (seasonalExpenses.length === 0) { sep_addExpenseRowEntry(); } else { // If there was data (e.g. from a future load state) seasonalExpenses.forEach(exp => sep_addExpenseRowEntry(exp)); } sep_calculateAndDisplaySummaries(); if (tabLinks.length > 0) sep_openTab(null, tabContents[0].id); sep_updateNavButtons(); const pdfDownloadButton = document.getElementById('sep-downloadPdfButton'); if (!pdfDownloadButton) { console.error("PDF download button 'sep-downloadPdfButton' not found."); } else { if (!sep_jsPDFLoaded || !sep_html2canvasLoaded) { pdfDownloadButton.disabled = true; } } } sep_initialize(); });