× `; cartItemsContainer.appendChild(itemDiv); }); } }; const updateSummary = () => { const total = cartItems.reduce((sum, item) => sum + item.price, 0); const mov = parseFloat(minOrderValueInput.value) || 0; currentTotalText.textContent = formatCurrency(total); minimumValueText.textContent = formatCurrency(mov); const progress = mov > 0 ? Math.min((total / mov) * 100, 100) : 0; progressBar.style.width = `${progress}%`; if (total >= mov) { statusMessage.textContent = "Congratulations! You've reached the minimum order value."; statusMessage.className = "p-4 rounded-lg text-center font-semibold mb-4 bg-green-100 text-green-800"; progressBar.classList.replace('bg-teal-500', 'bg-green-500'); suggestionsSection.classList.add('hidden'); } else { const remaining = mov - total; statusMessage.textContent = `You need to add ${formatCurrency(remaining)} more to your order.`; statusMessage.className = "p-4 rounded-lg text-center font-semibold mb-4 bg-yellow-100 text-yellow-800"; progressBar.classList.replace('bg-green-500', 'bg-teal-500'); suggestionsSection.classList.remove('hidden'); } }; const renderSuggestions = () => { suggestedItemsContainer.innerHTML = ''; SUGGESTED_ITEMS.forEach(item => { const button = document.createElement('button'); button.type = 'button'; button.className = 'suggest-item-btn p-2 bg-gray-100 border rounded-lg hover:bg-gray-200 transition'; button.innerHTML = `${item.name}
${formatCurrency(item.price)}`; button.dataset.name = item.name; button.dataset.price = item.price; suggestedItemsContainer.appendChild(button); }); }; const addItem = (name, price) => { const newItem = { id: Date.now(), name, price }; cartItems.push(newItem); renderCart(); updateSummary(); }; // --- EVENT LISTENERS --- addItemForm.addEventListener('submit', (e) => { e.preventDefault(); const name = itemNameInput.value.trim(); const price = parseFloat(itemPriceInput.value); if (name && !isNaN(price) && price > 0) { addItem(name, price); itemNameInput.value = ''; itemPriceInput.value = ''; itemNameInput.focus(); } else { alert('Please enter a valid item name and price.'); } }); cartItemsContainer.addEventListener('click', (e) => { if (e.target.classList.contains('remove-item-btn')) { const idToRemove = parseInt(e.target.dataset.id); cartItems = cartItems.filter(item => item.id !== idToRemove); renderCart(); updateSummary(); } }); suggestedItemsContainer.addEventListener('click', (e) => { const button = e.target.closest('.suggest-item-btn'); if (button) { const name = button.dataset.name; const price = parseFloat(button.dataset.price); addItem(name, price); } }); minOrderValueInput.addEventListener('input', updateSummary); downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const doc = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const docWidth = doc.internal.pageSize.getWidth(); doc.setFillColor(31, 41, 55); // gray-800 doc.rect(0, 0, docWidth, 60, 'F'); doc.setFontSize(20); doc.setTextColor(255, 255, 255); doc.setFont('helvetica', 'bold'); doc.text("Order Summary Report", 40, 38); let yPos = 90; const total = cartItems.reduce((sum, item) => sum + item.price, 0); const mov = parseFloat(minOrderValueInput.value) || 0; doc.autoTable({ startY: yPos, body: [ ['Minimum Order Value:', formatCurrency(mov)], ['Your Cart Total:', formatCurrency(total)], ['Status:', total >= mov ? 'Requirement Met' : `Short by ${formatCurrency(mov - total)}`], ], theme: 'plain', styles: { fontSize: 11, cellPadding: 6 }, columnStyles: { 0: { fontStyle: 'bold' } }, didParseCell: data => { if (data.row.index === 2) { data.cell.styles.fontStyle = 'bold'; data.cell.styles.textColor = total >= mov ? '#15803d' : '#be123c'; } } }); yPos = doc.autoTable.previous.finalY + 20; doc.setFontSize(14); doc.setTextColor(31, 41, 55); doc.text("Items in Cart", 40, yPos); const tableBody = cartItems.map(item => [item.name, formatCurrency(item.price)]); doc.autoTable({ startY: yPos + 10, head: [['Item Description', 'Price']], body: tableBody, foot: [['Total', formatCurrency(total)]], theme: 'striped', margin: { left: 40, right: 40 }, headStyles: { fillColor: [55, 65, 81] }, footStyles: { fillColor: [55, 65, 81], textColor: [255, 255, 255], fontStyle: 'bold' }, }); doc.save('Order_Summary.pdf'); }); // --- INITIALIZATION --- renderSuggestions(); updateSummary(); });