`;
lucide.createIcons();
return;
}
const progressSteps = ['Order Placed', 'Shipped', 'In Transit', 'Out for Delivery', 'Delivered'];
const currentStepIndex = progressSteps.indexOf(order.status);
const progressBarHtml = `
${progressSteps.map((step, index) => {
const isCompleted = index < currentStepIndex;
const isActive = index === currentStepIndex;
const icon = {
'Order Placed': 'clipboard-list', 'Shipped': 'package-check', 'In Transit': 'truck', 'Out for Delivery': 'map-pin', 'Delivered': 'home'
}[step];
return `
${index > 0 ? `
` : ''}
${step}
`;
}).join('')}
`;
const itemsHtml = order.items.map(item => `
${item.name} (x${item.qty})
${formatCurrency(item.price * item.qty)}
`).join('');
const historyHtml = order.trackingHistory.slice().reverse().map(entry => `
${entry.status}
${entry.location}
${entry.timestamp}
`).join('');
resultsContainer.innerHTML = `
Order #${order.id}
Status: ${order.status}
Estimated Delivery
${formatDate(order.estimatedDelivery)}
${progressBarHtml}
Shipping To
${order.customerName}
${order.shippingAddress}
Order Items
${itemsHtml}
`;
// 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 = `
Order Data (JSON)
Edit the JSON data below to change the available orders for tracking. Ensure the format is correct.
Save Changes
`;
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();
});
