`; attachStep2Listeners(); }; const createChecklistItem = (id, label, isToggle = false) => ` ${label} `; const attachStep2Listeners = () => { const updateCheck = (id, checked) => resolutionState.checks[id] = checked; document.getElementById('checkedDeliveryArea').addEventListener('change', e => updateCheck('checkedDeliveryArea', e.target.checked)); document.getElementById('checkedNeighbors').addEventListener('change', e => updateCheck('checkedNeighbors', e.target.checked)); document.getElementById('checkedBuildingMgmt').addEventListener('change', e => updateCheck('checkedBuildingMgmt', e.target.checked)); document.getElementById('isApartment').addEventListener('change', e => { updateCheck('isApartment', e.target.checked); document.getElementById('apartment-check-container').classList.toggle('hidden', !e.target.checked); }); }; const renderStep3 = () => { const content = document.getElementById('content-step3'); if (!content) return; const actionPlanHtml = resolutionState.actionPlan.map(step => ` `).join(''); content.innerHTML = ` `; document.getElementById('download-pdf-btn').addEventListener('click', generatePdf); lucide.createIcons(); }; const renderStep4 = () => { const content = document.getElementById('content-step4'); if (!content) return; const sellerBody = `I am writing about my order, #${resolutionState.orderId}. The tracking information states it was delivered on ${resolutionState.lastSeenDate}, but I have not received it. I have already checked around my property and with my neighbors.\n\nPlease provide an update on its location or advise on the next steps for a replacement or refund.\n\nThank you,`; const carrierBody = `I am filing a claim for a lost package.\n\nOrder/Tracking ID: ${resolutionState.orderId}\nStatus: Marked as delivered on ${resolutionState.lastSeenDate}\n\nDespite the delivery confirmation, I have not received this package. I have already checked with the seller and my neighbors. Please initiate a formal trace for this shipment.\n\nThank you,`; content.innerHTML = ` `; }; const createTemplateCard = (title, to, subject, body) => ` `; const generatePdf = () => { loadingOverlay.style.display = 'flex'; const { jsPDF } = window.jspdf; const pdfContent = document.getElementById('pdf-content-area'); const pdfHeader = document.getElementById('pdf-header'); document.getElementById('pdf-generated-date').textContent = new Date().toLocaleDateString('en-US'); pdfHeader.classList.remove('hidden'); html2canvas(pdfContent, { scale: 2, useCORS: true, logging: false }) .then(canvas => { pdfHeader.classList.add('hidden'); const imgData = canvas.toDataURL('image/jpeg', 0.95); const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pageMargin = 40; const contentWidth = pdfWidth - (pageMargin * 2); const imgProps = pdf.getImageProperties(imgData); const imgHeight = (imgProps.height * contentWidth) / imgProps.width; pdf.addImage(imgData, 'JPEG', pageMargin, pageMargin, contentWidth, imgHeight); pdf.save(`Resolution_Plan_${resolutionState.orderId}.pdf`); loadingOverlay.style.display = 'none'; }).catch(err => { console.error("PDF generation failed:", err); pdfHeader.classList.add('hidden'); loadingOverlay.style.display = 'none'; alert('An error occurred generating the PDF.'); }); }; // --- TAB NAVIGATION & INITIALIZATION --- const initializeTabs = () => { const tabsContainer = document.getElementById('tabs-container'); const prevTabBtn = document.getElementById('prev-tab-btn'); const nextTabBtn = document.getElementById('next-tab-btn'); let activeTabIndex = 0; const tabs = [ { name: '1. Info', id: 'step1', renderer: renderStep1 }, { name: '2. Checks', id: 'step2', renderer: renderStep2 }, { name: '3. Action Plan', id: 'step3', renderer: renderStep3 }, { name: '4. Templates', id: 'step4', renderer: renderStep4 } ]; tabsContainer.innerHTML = tabs.map(t => `${t.name}`).join(''); mainContent.innerHTML = tabs.map(t => ``).join(''); const tabButtons = tabsContainer.querySelectorAll('.tab-btn'); const tabContents = mainContent.querySelectorAll('.tab-content'); const switchTab = (index) => { activeTabIndex = index; // Special logic: generate plan when moving to step 3 if (tabs[index].id === 'step3') { generateActionPlan(); renderStep3(); // Re-render with the new plan } if(tabs[index].id === 'step4'){ renderStep4(); } tabButtons.forEach((btn, i) => btn.classList.toggle('active', i === index)); tabContents.forEach((content, i) => content.classList.toggle('hidden', i !== index)); prevTabBtn.disabled = activeTabIndex === 0; nextTabBtn.disabled = activeTabIndex === tabs.length - 1; }; tabButtons.forEach((btn, index) => btn.addEventListener('click', () => switchTab(index))); prevTabBtn.addEventListener('click', () => { if (activeTabIndex > 0) switchTab(activeTabIndex - 1); }); nextTabBtn.addEventListener('click', () => { if (activeTabIndex < tabs.length - 1) switchTab(activeTabIndex + 1); }); tabs.forEach(t => t.renderer()); switchTab(0); }; initializeTabs(); });