`;
zoneList.insertAdjacentHTML('beforeend', item);
});
}
// --- EVENT HANDLERS & FORMS ---
locationInput.addEventListener('input', findZone);
zoneForm.addEventListener('submit', (e) => {
e.preventDefault();
const locationsText = document.getElementById('zone-locations').value;
const data = {
name: document.getElementById('zone-name').value,
locations: locationsText.split(',').map(loc => loc.trim().toUpperCase()).filter(loc => loc)
};
if (editingZoneId) {
const zone = shippingZones.find(z => z.id === editingZoneId);
Object.assign(zone, data);
} else {
data.id = Date.now();
shippingZones.push(data);
}
resetZoneForm();
renderAll();
});
document.getElementById('cancel-edit-btn').addEventListener('click', resetZoneForm);
document.getElementById('zone-list').addEventListener('click', (e) => {
const button = e.target;
const action = button.dataset.action;
const id = parseInt(button.dataset.id);
if (action === 'edit') setupEditForm(id);
if (action === 'delete') deleteZone(id);
});
function resetZoneForm() {
zoneForm.reset();
editingZoneId = null;
document.getElementById('form-title').textContent = 'Add New Zone';
document.getElementById('cancel-edit-btn').style.display = 'none';
}
function setupEditForm(id) {
const zone = shippingZones.find(z => z.id === id);
if (!zone) return;
document.getElementById('zone-id').value = zone.id;
document.getElementById('zone-name').value = zone.name;
document.getElementById('zone-locations').value = zone.locations.join(', ');
editingZoneId = id;
document.getElementById('form-title').textContent = 'Edit Zone';
document.getElementById('cancel-edit-btn').style.display = 'inline-block';
}
function deleteZone(id) {
if (confirm('Are you sure you want to delete this zone?')) {
shippingZones = shippingZones.filter(z => z.id !== id);
renderAll();
}
}
downloadPdfBtn.addEventListener('click', generatePdf);
// --- TABS & NAVIGATION ---
window.switchTab = (tabName) => {
currentTab = tabName;
Object.values(tabBtns).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive'));
Object.values(tabContents).forEach(content => content.style.display = 'none');
tabBtns[tabName].classList.replace('tab-inactive', 'tab-active');
tabContents[tabName].style.display = 'block';
};
window.navigateTabs = (direction) => {
if (direction === 'next' && currentTab === 'finder') switchTab('config');
else if (direction === 'prev' && currentTab === 'config') switchTab('finder');
};
// --- PDF GENERATION ---
async function generatePdf() {
const { jsPDF } = window.jspdf;
const pdfReportElement = document.getElementById('pdf-report');
document.getElementById('pdf-date').textContent = new Date().toLocaleDateString('en-US');
const pdfZoneList = document.getElementById('pdf-zone-list');
pdfZoneList.innerHTML = '';
shippingZones.forEach(zone => {
const block = `
${zone.name}
${zone.locations.join(', ')}
`;
pdfZoneList.insertAdjacentHTML('beforeend', block);
});
const canvas = await html2canvas(pdfReportElement, { scale: 2 });
const imgData = canvas.toDataURL('image/jpeg', 0.9);
const pdf = new jsPDF('p', 'mm', 'a4');
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
pdf.save('Shipping-Zone-Configuration.pdf');
}
// --- INITIALIZATION ---
function init() {
shippingZones = [
{ id: 1, name: 'West Coast', locations: ['CA', 'OR', 'WA', 'NV', 'AZ'] },
{ id: 2, name: 'Midwest', locations: ['IL', 'IN', 'IA', 'KS', 'MI', 'MN', 'MO', 'NE', 'ND', 'OH', 'SD', 'WI'] },
{ id: 3, name: 'Northeast', locations: ['CT', 'ME', 'MA', 'NH', 'NJ', 'NY', 'PA', 'RI', 'VT'] },
{ id: 4, name: 'Canada', locations: ['CANADA']}
];
renderAll();
}
init();
});
