`; // Activate progress bar steps document.querySelectorAll('.progress-step').forEach((step, index) => { if (index < currentStepIndex) step.classList.add('completed'); if (index === currentStepIndex) step.classList.add('active'); }); document.getElementById('download-pdf-btn').addEventListener('click', () => generatePdf(order.id)); lucide.createIcons(); }; const renderDataConfig = () => { const configContent = document.getElementById('content-config'); if (!configContent) return; // For simplicity, we'll just show the raw JSON data which can be edited. configContent.innerHTML = ` `; document.getElementById('save-order-data-btn').addEventListener('click', () => { try { const newData = JSON.parse(document.getElementById('order-data-json').value); appData.orders = newData; alert('Order data saved successfully!'); } catch (e) { alert('Error: Invalid JSON format. Please check your data.'); } }); }; const generatePdf = (orderId) => { 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(`Order_Summary_${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: 'Order Tracking', id: 'tracking', renderer: renderTracker }, { name: 'Data Configuration', id: 'config', renderer: renderDataConfig } ]; 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; 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(); });