`;
}
selectionContainer.innerHTML += `
${categoryData.title}
${contentHTML}
`;
}
}
function renderDashboard() {
if (!summaryList || !totalCostEl) return;
let totalCost = 0;
summaryList.innerHTML = '';
Object.keys(userSelections).forEach(category => {
if (category === '401k_contribution') return;
const selectedPlanId = userSelections[category];
if (selectedPlanId && selectedPlanId !== 'none') {
const planDetails = planData[category].plans.find(p => p.id === selectedPlanId);
if (planDetails) {
totalCost += planDetails.cost;
summaryList.innerHTML += `
${planData[category].title} - ${planDetails.name}
$${planDetails.cost.toFixed(2)}
`;
}
}
});
if (userSelections['401k_contribution'] > 0) {
summaryList.innerHTML += `
401(k) Contribution
${userSelections['401k_contribution']}% of Pay
`;
}
if (summaryList.innerHTML === '') {
summaryList.innerHTML = `
Make selections in the 'Plan Selection' tab.
`;
}
totalCostEl.textContent = `$${totalCost.toFixed(2)}`;
}
// --- EVENT HANDLERS --- //
selectionContainer.addEventListener('change', (e) => {
if (e.target.type === 'radio') {
const category = e.target.name;
userSelections[category] = e.target.value;
renderPlanSelection(); // Re-render to update 'selected' class
renderDashboard();
} else if (e.target.id === 'bed-401k-slider') {
const value = parseFloat(e.target.value);
userSelections['401k_contribution'] = value;
document.getElementById('bed-401k-output').textContent = `${value}%`;
renderDashboard();
}
});
pdfDownloadBtn.addEventListener('click', async () => {
const { jsPDF } = window.jspdf;
const pdfOutput = document.getElementById('bed-pdf-output');
const dashboardContent = document.getElementById('bed-dashboard-content-for-pdf');
if (!pdfOutput || !dashboardContent || !window.html2canvas || !jsPDF) return;
// Clone dashboard content into the hidden PDF container for clean rendering
pdfOutput.innerHTML = `
Benefits Enrollment Summary
` + dashboardContent.innerHTML;
pdfOutput.style.display = 'block';
try {
const canvas = await html2canvas(pdfOutput, { scale: 2 });
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'px',
format: [canvas.width, canvas.height]
});
pdf.addImage(imgData, 'PNG', 0, 0, canvas.width, canvas.height);
pdf.save('benefits-enrollment-summary.pdf');
} catch(error) {
console.error("Error generating PDF:", error);
alert("An error occurred while generating the PDF.");
} finally {
pdfOutput.style.display = 'none';
pdfOutput.innerHTML = '';
}
});
// --- TAB NAVIGATION LOGIC --- //
window.bed_changeTab = (event, tabName) => {
tabContents.forEach(content => content.classList.remove('active'));
tabs.forEach(tab => tab.classList.remove('active'));
document.getElementById(tabName).classList.add('active');
event.currentTarget.classList.add('active');
updateNavButtons();
};
const updateNavButtons = () => {
const activeTabIndex = Array.from(tabs).findIndex(tab => tab.classList.contains('active'));
if (prevBtn) prevBtn.disabled = activeTabIndex === 0;
if (nextBtn) nextBtn.disabled = activeTabIndex === tabs.length - 1;
};
window.bed_navigateTabs = (direction) => {
const activeTabIndex = Array.from(tabs).findIndex(tab => tab.classList.contains('active'));
let newIndex = activeTabIndex;
if (direction === 'next' && activeTabIndex < tabs.length - 1) newIndex++;
else if (direction === 'prev' && activeTabIndex > 0) newIndex--;
tabs[newIndex].click();
};
if (nextBtn) nextBtn.addEventListener('click', () => bed_navigateTabs('next'));
if (prevBtn) prevBtn.addEventListener('click', () => bed_navigateTabs('prev'));
// --- INITIALIZATION --- //
renderPlanSelection();
renderDashboard();
updateNavButtons();
});
