'; return; } // Add each selected part selectedParts.forEach((part, index) => { const partElement = document.createElement('div'); partElement.className = 'p-3 border-b border-gray-100 last:border-b-0'; partElement.innerHTML = ` `; selectedPartsContainer.appendChild(partElement); // Add event listener to remove button const removeButton = partElement.querySelector('button'); removeButton.addEventListener('click', () => { const index = parseInt(removeButton.dataset.index); // Uncheck the corresponding checkbox const checkbox = document.getElementById(selectedParts[index].id); if (checkbox) checkbox.checked = false; // Remove the part from the array selectedParts.splice(index, 1); // Update the display updateSelectedParts(); // Update the totals updateTotals(); }); }); } // Function to update the totals function updateTotals() { // Calculate subtotal const subtotal = selectedParts.reduce((total, part) => total + (part.price * part.quantity), 0); // Determine discount percentage based on subtotal let discountPercentage = 0; if (subtotal >= 50000) { discountPercentage = 12; } else if (subtotal >= 25000) { discountPercentage = 8; } else if (subtotal >= 10000) { discountPercentage = 5; } // Calculate discount amount const discountAmount = (subtotal * discountPercentage) / 100; // Calculate total const total = subtotal - discountAmount; // Update the display subtotalElement.textContent = `₹${subtotal.toLocaleString()}`; discountElement.textContent = `-₹${discountAmount.toLocaleString()}`; discountBadge.textContent = `${discountPercentage}%`; totalElement.textContent = `₹${total.toLocaleString()}`; } // Add event listeners to checkboxes checkboxes.forEach(checkbox => { checkbox.addEventListener('change', () => { if (checkbox.checked) { // Get the part details const partItem = checkbox.closest('.parts-list-item'); const nameElement = partItem.querySelector('label .font-medium'); const priceElement = partItem.querySelector('.text-blue-600'); const quantitySelect = partItem.querySelector('select'); // Extract the values const name = nameElement.textContent; const price = parseInt(priceElement.textContent.replace(/[^\d]/g, '')); const quantity = parseInt(quantitySelect.value); // Add to selected parts selectedParts.push({ id: checkbox.id, name, price, quantity }); } else { // Remove from selected parts const index = selectedParts.findIndex(part => part.id === checkbox.id); if (index !== -1) { selectedParts.splice(index, 1); } } // Update the display updateSelectedParts(); // Update the totals updateTotals(); }); }); // Add event listeners to quantity selects quantitySelects.forEach(select => { select.addEventListener('change', () => { const partItem = select.closest('.parts-list-item'); const checkbox = partItem.querySelector('input[type="checkbox"]'); if (checkbox.checked) { // Find the part in the selected parts array const index = selectedParts.findIndex(part => part.id === checkbox.id); if (index !== -1) { // Update the quantity selectedParts[index].quantity = parseInt(select.value); // Update the display updateSelectedParts(); // Update the totals updateTotals(); } } }); }); // Initialize WhatsApp order button const whatsappButton = document.querySelector('button.w-full.bg-green-500'); if (whatsappButton) { whatsappButton.addEventListener('click', () => { if (selectedParts.length === 0) { alert('Please select at least one part before placing an order.'); return; } // Prepare the message let message = "Hello, I would like to order the following parts:\n\n"; selectedParts.forEach(part => { message += `• ${part.name} (Qty: ${part.quantity}) - ₹${part.price * part.quantity}\n`; }); // Calculate totals const subtotal = selectedParts.reduce((total, part) => total + (part.price * part.quantity), 0); let discountPercentage = 0; if (subtotal >= 50000) { discountPercentage = 12; } else if (subtotal >= 25000) { discountPercentage = 8; } else if (subtotal >= 10000) { discountPercentage = 5; } const discountAmount = (subtotal * discountPercentage) / 100; const total = subtotal - discountAmount; message += `\nSubtotal: ₹${subtotal.toLocaleString()}`; if (discountPercentage > 0) { message += `\nDiscount (${discountPercentage}%): -₹${discountAmount.toLocaleString()}`; } message += `\nTotal: ₹${total.toLocaleString()}`; message += "\n\nPlease confirm my order. Thank you!"; // Encode the message for WhatsApp const encodedMessage = encodeURIComponent(message); // Open WhatsApp with the message window.open(`https://wa.me/919472806801?text=${encodedMessage}`, '_blank'); }); } } // Initialize when DOM is loaded document.addEventListener('DOMContentLoaded', () => { updateCounters(); initProgressBars(); initPartsSelection(); });