'; }); previewEl.innerHTML = html; // Render charts after HTML is in the DOM reportData.components.forEach(comp => { if (comp.type === 'chart') { const ctx = document.getElementById(`chart-${comp.id}`).getContext('2d'); const rows = comp.csvData.split('\n'); const labels = rows.slice(1).map(r => r.split(',')[0]); const data = rows.slice(1).map(r => parseFloat(r.split(',')[1])); chartInstances[comp.id] = new Chart(ctx, { type: comp.chartType, data: { labels, datasets: [{ label: comp.title, data, backgroundColor: '#3b82f6' }] }, options: { responsive: true, maintainAspectRatio: false } }); } }); } // --- MODAL & FORM LOGIC --- window.openModal = (type, id = null) => { document.getElementById('component-form').reset(); document.getElementById('component-type').value = type; document.getElementById('component-id').value = id ? id : ''; const fieldsEl = document.getElementById('modal-fields'); let compData = id ? reportData.components.find(c => c.id === id) : {}; let fieldsHtml = ''; if (type === 'paragraph') { fieldsHtml = ``; } else if (type === 'kpi') { fieldsHtml = ``; } else if (type === 'table' || type === 'chart') { const label = type === 'table' ? 'Table Data (CSV Format)' : 'Chart Data (CSV Format: Label,Value)'; fieldsHtml = ``; if (type === 'chart') { fieldsHtml += ``; } fieldsHtml += ``; } fieldsEl.innerHTML = fieldsHtml; modal.style.display = 'flex'; }; window.editComponent = (id) => { const comp = reportData.components.find(c => c.id === id); if (comp) openModal(comp.type, id); }; window.deleteComponent = (id) => { if (confirm('Are you sure you want to delete this component?')) { reportData.components = reportData.components.filter(c => c.id !== id); render(); } }; document.getElementById('component-form').addEventListener('submit', (e) => { e.preventDefault(); const id = parseInt(document.getElementById('component-id').value); const type = document.getElementById('component-type').value; let comp = {}; if (type === 'paragraph') comp = { content: document.getElementById('modal-content').value }; if (type === 'kpi') comp = { title: document.getElementById('modal-title').value, value: document.getElementById('modal-value').value }; if (type === 'table') comp = { title: document.getElementById('modal-title').value, csvData: document.getElementById('modal-csv').value }; if (type === 'chart') comp = { title: document.getElementById('modal-title').value, chartType: document.getElementById('modal-chart-type').value, csvData: document.getElementById('modal-csv').value }; if (id) { const index = reportData.components.findIndex(c => c.id === id); reportData.components[index] = { ...reportData.components[index], ...comp }; } else { comp.id = Date.now(); comp.type = type; reportData.components.push(comp); } modal.style.display = 'none'; render(); }); // --- EVENT LISTENERS --- document.querySelector('.arg-tabs').addEventListener('click', e => { if (e.target.matches('.arg-tab-link')) { document.querySelectorAll('.arg-tab-link').forEach(t => t.classList.remove('active')); document.querySelectorAll('.arg-tab-content').forEach(c => c.classList.remove('active')); e.target.classList.add('active'); const content = document.querySelector(`.arg-tab-content[data-tab-content="${e.target.dataset.tab}"]`); content.classList.add('active'); if (e.target.dataset.tab === '3') renderReportPreview(); // Refresh preview on tab click } }); document.getElementById('cancel-btn').addEventListener('click', () => modal.style.display = 'none'); document.getElementById('report-title').addEventListener('input', e => reportData.title = e.target.value); document.getElementById('report-author').addEventListener('input', e => reportData.author = e.target.value); document.getElementById('report-date').addEventListener('input', e => reportData.date = e.target.value); // PDF Download document.getElementById('arg-pdf-download-btn').addEventListener('click', async () => { const btn = document.getElementById('arg-pdf-download-btn'); btn.textContent = 'Generating...'; btn.disabled = true; const { jsPDF } = window.jspdf; const pdf = new jsPDF('p', 'mm', 'a4'); const canvas = await html2canvas(document.getElementById('report-preview'), { scale: 2 }); const imgData = canvas.toDataURL('image/png'); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save(`${reportData.title.replace(/\s/g, '_')}.pdf`); btn.textContent = 'Download as PDF'; btn.disabled = false; }); // Initial Render render(); });