`; } else { html += ` `; } } // Wood Surfaces Products if (woodChecked) { html += ` `; } // Metal Surfaces Products if (metalChecked) { html += ` `; } container.innerHTML = html || '

Please select surfaces above to choose paint products

'; } function selectProduct(label, categoryType) { setTimeout(() => { const radio = label.querySelector('input[type="radio"]'); // Add selected class to the clicked option label.parentElement.querySelectorAll('.product-option').forEach(opt => { opt.classList.remove('selected'); }); if (radio.checked) { label.classList.add('selected'); } // Handle mutual exclusivity for interior/exterior paints if (['luxury', 'midrange', 'budget'].includes(categoryType)) { // Disable other interior paint categories const otherCategories = ['luxury', 'midrange', 'budget'].filter(c => c !== categoryType); otherCategories.forEach(cat => { const catGroup = document.querySelector(`.category-group[data-category-type="${cat}"]`); if (catGroup) { if (radio.checked) { catGroup.classList.add('disabled'); } } }); // Re-enable all if nothing is selected if (!document.querySelector('input[name="luxury-radio"]:checked') && !document.querySelector('input[name="midrange-radio"]:checked') && !document.querySelector('input[name="budget-radio"]:checked')) { ['luxury', 'midrange', 'budget'].forEach(cat => { const catGroup = document.querySelector(`.category-group[data-category-type="${cat}"]`); if (catGroup) { catGroup.classList.remove('disabled'); } }); } } if (['premium', 'standard'].includes(categoryType)) { // Disable other exterior paint categories const otherCategories = ['premium', 'standard'].filter(c => c !== categoryType); otherCategories.forEach(cat => { const catGroup = document.querySelector(`.category-group[data-category-type="${cat}"]`); if (catGroup) { if (radio.checked) { catGroup.classList.add('disabled'); } } }); // Re-enable all if nothing is selected if (!document.querySelector('input[name="premium-radio"]:checked') && !document.querySelector('input[name="standard-radio"]:checked')) { ['premium', 'standard'].forEach(cat => { const catGroup = document.querySelector(`.category-group[data-category-type="${cat}"]`); if (catGroup) { catGroup.classList.remove('disabled'); } }); } } }, 10); } function generateQuotation(visitorName = '', visitorEmail = '', visitorPhone = '') { // Calculate areas let totalArea = 0; let areas = {}; const wallsChecked = document.getElementById('walls-check').checked; const carpetArea = parseFloat(document.getElementById('carpet-area').value) || 0; if (wallsChecked && carpetArea > 0) { areas.walls = carpetArea * 3.5; totalArea += areas.walls; } const woodChecked = document.getElementById('wood-check').checked; const woodArea = parseFloat(document.getElementById('wood-area').value) || 0; if (woodChecked && woodArea > 0) { areas.wood = woodArea; totalArea += areas.wood; } const metalChecked = document.getElementById('metal-check').checked; const metalArea = parseFloat(document.getElementById('metal-area').value) || 0; if (metalChecked && metalArea > 0) { areas.metal = metalArea; totalArea += areas.metal; } if (totalArea === 0) { alert('Please enter area values for selected surfaces.'); return; } // Get all selected products (checked radio buttons) const selectedProducts = document.querySelectorAll('.product-option input[type="radio"]:checked'); if (selectedProducts.length === 0) { alert('Please select at least one paint product.'); return; } // Calculate costs for selected products let products = []; let subtotal = 0; selectedProducts.forEach(radio => { const category = radio.getAttribute('data-category'); const productName = radio.getAttribute('data-product'); const rate = parseFloat(radio.getAttribute('data-rate')); // Determine which area to use based on category let productArea = 0; let categoryDisplay = ''; if (category.startsWith('interior') || category.startsWith('exterior')) { productArea = areas.walls || 0; categoryDisplay = category.includes('luxury') ? 'Luxury Interior' : category.includes('midRange') ? 'Mid-Range Interior' : category.includes('budget') ? 'Budget Interior' : category.includes('premium') ? 'Premium Exterior' : 'Standard Exterior'; } else if (category.includes('woodFinish')) { productArea = areas.wood || 0; categoryDisplay = 'Wood Finish'; } else if (category.includes('primers')) { productArea = areas.metal || 0; categoryDisplay = 'Metal Primer'; } if (productArea > 0) { const cost = productArea * rate; products.push({ name: productName, category: categoryDisplay, area: productArea, rate: rate, cost: cost }); subtotal += cost; } }); if (products.length === 0) { alert('No valid products selected for the entered areas.'); return; } // Calculate GST and total const gst = subtotal * 0.18; const grandTotal = subtotal + gst; // Display quotation const date = new Date().toLocaleDateString('en-IN', { year: 'numeric', month: 'long', day: 'numeric' }); document.getElementById('quotation-date').textContent = date; // Project details with visitor info let projectHTML = ''; if (visitorName) { projectHTML += ` `; } if (visitorEmail) { projectHTML += ` `; } if (visitorPhone) { projectHTML += ` `; } projectHTML += ` `; document.getElementById('project-details').innerHTML = projectHTML; // Product costs let productsHTML = products.map(p => ` `).join(''); document.getElementById('product-costs').innerHTML = productsHTML; // Totals document.getElementById('subtotal').textContent = `₹${subtotal.toFixed(2)}`; document.getElementById('gst').textContent = `₹${gst.toFixed(2)}`; document.getElementById('grand-total').textContent = `₹${grandTotal.toFixed(2)}`; // Show quotation document.getElementById('quotation').classList.add('show'); document.getElementById('quotation').scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } function downloadQuotation() { alert('PDF download functionality would be implemented here using a library like jsPDF or html2pdf.js'); } function openAdminPanel() { populateAdminSettings(); document.getElementById('admin-modal').classList.add('show'); } function closeAdminPanel() { document.getElementById('admin-modal').classList.remove('show'); } function openContactModal() { // First validate that we have the necessary data let totalArea = 0; const wallsChecked = document.getElementById('walls-check').checked; const carpetArea = parseFloat(document.getElementById('carpet-area').value) || 0; if (wallsChecked && carpetArea > 0) { totalArea += carpetArea * 3.5; } const woodChecked = document.getElementById('wood-check').checked; const woodArea = parseFloat(document.getElementById('wood-area').value) || 0; if (woodChecked && woodArea > 0) { totalArea += woodArea; } const metalChecked = document.getElementById('metal-check').checked; const metalArea = parseFloat(document.getElementById('metal-area').value) || 0; if (metalChecked && metalArea > 0) { totalArea += metalArea; } if (totalArea === 0) { alert('Please enter area values for selected surfaces.'); return; } const selectedProducts = document.querySelectorAll('.product-option input[type="radio"]:checked'); if (selectedProducts.length === 0) { alert('Please select at least one paint product.'); return; } // Open the contact modal document.getElementById('contact-modal').classList.add('show'); } function closeContactModal() { document.getElementById('contact-modal').classList.remove('show'); // Reset form document.getElementById('contact-form').reset(); document.querySelectorAll('.error-message').forEach(el => el.classList.remove('show')); } async function submitContactForm(event) { event.preventDefault(); const name = document.getElementById('visitor-name').value.trim(); const email = document.getElementById('visitor-email').value.trim(); const phone = document.getElementById('visitor-phone').value.trim(); // Validation let isValid = true; if (!name) { document.getElementById('name-error').classList.add('show'); isValid = false; } else { document.getElementById('name-error').classList.remove('show'); } if (!email && !phone) { if (!email) document.getElementById('email-error').textContent = 'Email or phone is required'; if (!phone) document.getElementById('phone-error').textContent = 'Email or phone is required'; document.getElementById('email-error').classList.add('show'); document.getElementById('phone-error').classList.add('show'); isValid = false; } else { document.getElementById('email-error').classList.remove('show'); document.getElementById('phone-error').classList.remove('show'); } if (!isValid) return; // Disable submit button const submitBtn = document.getElementById('submit-btn'); submitBtn.disabled = true; submitBtn.textContent = 'Generating...'; try { // Send email to admin await sendEmailToAdmin(name, email, phone); // Close modal closeContactModal(); // Generate and show quotation generateQuotation(name, email, phone); } catch (error) { alert('There was an error processing your request. Your quotation will still be generated.'); closeContactModal(); generateQuotation(name, email, phone); } finally { submitBtn.disabled = false; submitBtn.textContent = 'Generate Quotation'; } } async function sendEmailToAdmin(name, email, phone) { // Calculate quotation details for email let areas = {}; const wallsChecked = document.getElementById('walls-check').checked; const carpetArea = parseFloat(document.getElementById('carpet-area').value) || 0; if (wallsChecked && carpetArea > 0) { areas.walls = carpetArea * 3.5; } const woodChecked = document.getElementById('wood-check').checked; const woodArea = parseFloat(document.getElementById('wood-area').value) || 0; if (woodChecked && woodArea > 0) { areas.wood = woodArea; } const metalChecked = document.getElementById('metal-check').checked; const metalArea = parseFloat(document.getElementById('metal-area').value) || 0; if (metalChecked && metalArea > 0) { areas.metal = metalArea; } const selectedProducts = document.querySelectorAll('.product-option input[type="radio"]:checked'); let productsList = []; let totalCost = 0; selectedProducts.forEach(radio => { const productName = radio.getAttribute('data-product'); const rate = parseFloat(radio.getAttribute('data-rate')); const category = radio.getAttribute('data-category'); let productArea = 0; if (category.startsWith('interior') || category.startsWith('exterior')) { productArea = areas.walls || 0; } else if (category.includes('woodFinish')) { productArea = areas.wood || 0; } else if (category.includes('primers')) { productArea = areas.metal || 0; } const cost = productArea * rate; totalCost += cost; productsList.push(`${productName}: ${productArea.toFixed(2)} sq.ft × ₹${rate} = ₹${cost.toFixed(2)}`); }); const gst = totalCost * 0.18; const grandTotal = totalCost + gst; // Prepare email content const emailBody = ` New Paint Calculator Lead - Estate Lookup Interiors Customer Information: - Name: ${name} - Email: ${email || 'Not provided'} - Phone: ${phone || 'Not provided'} Project Details: - Space Type: ${selections.space.charAt(0).toUpperCase() + selections.space.slice(1)} - Painting Type: ${selections.need === 'fresh' ? 'Fresh Painting' : 'Repainting'} - Total Area: ${(areas.walls || 0) + (areas.wood || 0) + (areas.metal || 0)} Sq.Ft. Selected Products: ${productsList.join('\n')} Quotation Summary: - Subtotal: ₹${totalCost.toFixed(2)} - GST (18%): ₹${gst.toFixed(2)} - Grand Total: ₹${grandTotal.toFixed(2)} Date: ${new Date().toLocaleString('en-IN')} `.trim(); // Using Web3Forms (free service, no backend needed) // You'll need to get an access key from https://web3forms.com const formData = new FormData(); formData.append('access_key', 'YOUR_WEB3FORMS_ACCESS_KEY'); // Replace with actual key formData.append('subject', `New Paint Calculator Lead - ${name}`); formData.append('from_name', 'Estate Lookup Paint Calculator'); formData.append('to', 'estatelookupinteriors@gmail.com'); formData.append('message', emailBody); // Alternative: Using FormSubmit (even simpler, no signup needed) // Just send to: https://formsubmit.co/estatelookupinteriors@gmail.com const response = await fetch('https://formsubmit.co/ajax/estatelookupinteriors@gmail.com', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ name: name, email: email || 'Not provided', phone: phone || 'Not provided', message: emailBody, _subject: `New Paint Calculator Lead - ${name}`, _template: 'box' }) }); return response; } function populateAdminSettings() { const container = document.getElementById('settings-grid'); let html = ''; // Interior Paints html += ''; // Exterior Paints html += ''; // Specialty Products html += ''; container.innerHTML = html; } function saveSettings() { const inputs = document.querySelectorAll('#settings-grid input[type="number"]'); inputs.forEach(input => { const category = input.getAttribute('data-category'); const product = input.getAttribute('data-product'); const value = parseFloat(input.value); const [main, sub] = category.split('.'); if (paintRates[main] && paintRates[main][sub]) { paintRates[main][sub][product] = value; } }); // Save to localStorage localStorage.setItem('estateLookupPaintRates', JSON.stringify(paintRates)); alert('Settings saved successfully!'); closeAdminPanel(); updateProductSelection(); // Refresh product display with new rates } // Initialize updateProductSelection();