`; container.appendChild(itemEl); // Add event listeners const checkbox = itemEl.querySelector('input[type="checkbox"]'); const updateState = () => { checklistState[item.id] = checkbox.checked; itemEl.classList.toggle('completed', checkbox.checked); updateProgress(); }; checkbox.addEventListener('change', updateState); itemEl.addEventListener('click', (e) => { if (e.target !== checkbox) { checkbox.checked = !checkbox.checked; updateState(); } }); }); }); updateProgress(); }; const updateUI = () => { // Tabs tabButtons.forEach((btn, index) => btn.classList.toggle('active', index === currentTab)); tabContents.forEach((content, index) => content.classList.toggle('active', index === currentTab)); // Buttons prevBtn.style.visibility = currentTab === 0 ? 'hidden' : 'visible'; nextBtn.style.visibility = currentTab === tabButtons.length - 1 ? 'hidden' : 'visible'; }; const updateProgress = () => { const totalItems = Object.keys(checklistState).length; const completedItems = Object.values(checklistState).filter(Boolean).length; const percentage = totalItems > 0 ? (completedItems / totalItems) * 100 : 0; if (progressBar) progressBar.style.width = `${percentage}%`; if (progressText) progressText.textContent = `${completedItems} / ${totalItems}`; }; const generateSummary = () => { if (!summaryList) return; summaryList.innerHTML = ''; let hasCompletedItems = false; checklistData.forEach(category => { const completedInCategory = category.items.filter(item => checklistState[item.id]); if (completedInCategory.length > 0) { hasCompletedItems = true; const categoryTitle = document.createElement('h3'); categoryTitle.className = 'text-md font-semibold text-gray-600 mt-4 first:mt-0'; categoryTitle.textContent = category.title; summaryList.appendChild(categoryTitle); const list = document.createElement('ul'); list.className = 'list-disc list-inside space-y-1'; completedInCategory.forEach(item => { const listItem = document.createElement('li'); listItem.className = 'text-gray-700'; listItem.textContent = item.label; list.appendChild(listItem); }); summaryList.appendChild(list); } }); if (!hasCompletedItems) { summaryList.innerHTML = '

You haven\'t completed any items yet. Go back and check some off!

'; } }; const showTab = (index) => { currentTab = index; if (currentTab === tabButtons.length - 1) { // Summary tab generateSummary(); } updateUI(); }; const downloadPdf = () => { downloadPdfBtn.classList.add('hidden'); pdfLoader.classList.remove('hidden'); setTimeout(() => { try { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.setFontSize(18); doc.text("Estate Planning Checklist Summary", 14, 22); doc.setFontSize(11); doc.setTextColor(100); doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 14, 30); const completedItems = Object.values(checklistState).filter(Boolean).length; const totalItems = Object.keys(checklistState).length; doc.text(`Overall Progress: ${completedItems} of ${totalItems} items completed.`, 14, 38); const tableData = []; checklistData.forEach(category => { const completedInCategory = category.items.filter(item => checklistState[item.id]); if (completedInCategory.length > 0) { tableData.push([{ content: category.title, colSpan: 2, styles: { fontStyle: 'bold', fillColor: '#f0f9ff' } }]); completedInCategory.forEach(item => { tableData.push(['Completed', item.label]); }); } }); doc.autoTable({ startY: 50, head: [['Status', 'Task']], body: tableData, theme: 'grid', headStyles: { fillColor: [13, 148, 136] }, // --primary-color columnStyles: { 0: { cellWidth: 25 } } }); doc.save('Estate-Planning-Checklist.pdf'); } catch(e) { console.error("Error generating PDF:", e); alert("An error occurred while creating the PDF."); } finally { pdfLoader.classList.add('hidden'); downloadPdfBtn.classList.remove('hidden'); } }, 500); }; // --- Event Listeners --- tabButtons.forEach(btn => btn.addEventListener('click', () => showTab(parseInt(btn.dataset.tabIndex)))); prevBtn.addEventListener('click', () => { if (currentTab > 0) showTab(currentTab - 1); }); nextBtn.addEventListener('click', () => { if (currentTab < tabButtons.length - 1) showTab(currentTab + 1); }); downloadPdfBtn.addEventListener('click', downloadPdf); // --- Initialisation --- initializeChecklist(); updateUI(); });