// ========== 1. CENTRALIZED DATA & CONFIG ========== const chatbotConfig = { steps: [ { id: 'name', question: "Assalam-o-Alaikum! Raja School mein khush amdeed. Aapka shubh naam kya hai?", icon: '👤' }, { id: 'interest', question: "Aap kis cheez mein interested hain? (Course / Service / Product)", icon: '🎯' }, { id: 'details', question: "Behtreen! Aap kis specific course ya service ke baare mein janna chahte hain?", icon: '📚' }, { id: 'phone', question: "Shukriya! Apna WhatsApp number likhein taake hum aap se raabta kar sakein.", icon: '📱' } ] }; let currentStep = 0; let userData = {}; // ========== 2. CHATBOT CORE LOGIC ========== function toggleChatbot() { const chatContainer = document.getElementById('chatbot-ui'); chatContainer.classList.toggle('hidden'); if (!chatContainer.classList.contains('hidden') && currentStep === 0) { renderChatStep(); } } function renderChatStep() { const chatBox = document.getElementById('chat-messages'); const step = chatbotConfig.steps[currentStep]; // Add Bot Message const botMsg = document.createElement('div'); botMsg.className = "flex gap-2 mb-4 animate-fade-in"; botMsg.innerHTML = `

${step.question}

`; chatBox.appendChild(botMsg); chatBox.scrollTop = chatBox.scrollHeight; } function handleChatSubmit() { const input = document.getElementById('chat-input-field'); const val = input.value.trim(); if (!val) return; // Save Data userData[chatbotConfig.steps[currentStep].id] = val; // Add User Message to UI const chatBox = document.getElementById('chat-messages'); const userMsg = document.createElement('div'); userMsg.className = "flex justify-end mb-4 animate-fade-in"; userMsg.innerHTML = `

${val}

`; chatBox.appendChild(userMsg); input.value = ''; // Next Step or Finish currentStep++; if (currentStep < chatbotConfig.steps.length) { setTimeout(renderChatStep, 600); } else { finishChatAndSend(); } } function finishChatAndSend() { const chatBox = document.getElementById('chat-messages'); const finalMsg = document.createElement('div'); finalMsg.className = "text-center text-xs text-gray-400 my-4"; finalMsg.innerText = "Connecting to WhatsApp..."; chatBox.appendChild(finalMsg); const whatsappMsg = `🤖 *CHATBOT LEAD*%0A--------------------------%0A` + `👤 *Name:* ${userData.name}%0A` + `🎯 *Type:* ${userData.interest}%0A` + `📚 *Specifics:* ${userData.details}%0A` + `📱 *WhatsApp:* ${userData.phone}%0A%0A` + `_Sent via Raja School Chatbot_`; setTimeout(() => { window.open(`https://wa.me/${config.whatsapp_number}?text=${whatsappMsg}`, '_blank'); toggleChatbot(); // Close after sending }, 1500); } // ========== 3. MAIN RENDER LOGIC (Optimized) ========== function renderGrid(data, containerId, type) { const grid = document.getElementById(containerId); if (!grid) return; grid.innerHTML = data.map(item => `

${getTagHTML(item.tag)}

${item.name}

${type === 'course' ? `PKR ${item.discountedPrice}` : item.price}

${type === 'course' ? `` : ''}

`).join(''); } // ========== 4. INITIALIZATION ========== function init() { renderGrid(courses, 'courses-grid', 'course'); renderGrid(services, 'services-grid', 'service'); renderGrid(products, 'products-grid', 'product'); renderReviews(); populateCourseDropdowns(); setupEventListeners(); // Enter key support for chatbot document.getElementById('chat-input-field')?.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleChatSubmit(); }); } window.addEventListener('DOMContentLoaded', init);