PEEJWORLD/edusign-smart-tuition-registration

1document.addEventListener('DOMContentLoaded', function() {2    // Initialize form validation3    const form = document.querySelector('form');4    5    if (form) {6        form.addEventListener('submit', function(e) {7            e.preventDefault();8            9            // Validate required fields10            const requiredFields = form.querySelectorAll('[required]');11            let isValid = true;12            13            requiredFields.forEach(field => {14                if (!field.value.trim()) {15                    field.classList.add('border-red-500');16                    isValid = false;17                } else {18                    field.classList.remove('border-red-500');19                }20            });21            22            if (!isValid) {23                alert('Please fill in all required fields.');24                return;25            }26            // Collect form data27            const formData = {28                parentName: form.querySelector('input[type="text"]:nth-of-type(1)').value,29                parentContact: form.querySelector('input[type="tel"]').value,30                parentEmail: form.querySelector('input[type="email"]').value,31                parentAddress: form.querySelector('input[type="text"]:nth-of-type(2)').value,32                childName: form.querySelector('input[type="text"]:nth-of-type(3)').value,33                childClass: form.querySelector('input[type="text"]:nth-of-type(4)').value,34                childAge: form.querySelector('input[type="number"]').value,35                improvementAreas: form.querySelector('textarea:nth-of-type(1)').value,36                specialNeeds: form.querySelector('textarea:nth-of-type(2)').value,37                selectedPackage: form.querySelector('input[placeholder="Selected Package"]').value,38                totalCost: form.querySelector('input[placeholder="Total Cost"]').value,39                paymentMethod: form.querySelector('input[name="payment"]:checked')?.nextElementSibling.textContent || 'Not selected',40                signatureDate: form.querySelector('input[type="date"]').value41            };42 43            // Get selected days44            const selectedDays = [];45            document.querySelectorAll('.day-btn').forEach(btn => {46                if (btn.classList.contains('bg-blue-100')) {47                    selectedDays.push(btn.textContent);48                }49            });50 51            // Format WhatsApp message52            const whatsappMessage = `53*New Tuition Registration*54 55*Parent Details:*56👤 Name: ${formData.parentName}57📞 Contact: ${formData.parentContact}58📧 Email: ${formData.parentEmail}59🏠 Address: ${formData.parentAddress}60 61*Child Details:*62👶 Name: ${formData.childName}63📚 Class: ${formData.childClass}64🎂 Age: ${formData.childAge}65📝 Areas Needing Improvement: ${formData.improvementAreas}66⚠️ Special Needs: ${formData.specialNeeds}67 68*Tuition Details:*69📦 Package: ${formData.selectedPackage}70💰 Cost: ${formData.totalCost}71📅 Preferred Days: ${selectedDays.join(', ')}72💳 Payment Method: ${formData.paymentMethod}73 74*Declaration Signed On:* ${formData.signatureDate}75            `.trim();76 77            // Encode message for WhatsApp URL78            const encodedMessage = encodeURIComponent(whatsappMessage);79            // Open WhatsApp with pre-filled message to Sir Godwin's number80            window.open(`https://wa.me/233542697094?text=${encodedMessage}`, '_blank');81// Reset form82            form.reset();83            document.querySelectorAll('input[name="package"]').forEach(radio => {84                radio.checked = false;85            });86            document.querySelectorAll('.day-btn').forEach(btn => {87                btn.classList.remove('bg-blue-100', 'border-blue-500', 'text-blue-700');88            });89});90    }91    92    // Add input validation styling93    document.querySelectorAll('input, textarea').forEach(input => {94        input.addEventListener('input', function() {95            if (this.value.trim()) {96                this.classList.remove('border-red-500');97            }98        });99    });100    101    // Initialize tooltips102    const initTooltips = () => {103        const tooltipTriggers = document.querySelectorAll('[data-tooltip]');104        105        tooltipTriggers.forEach(trigger => {106            const tooltip = document.createElement('div');107            tooltip.className = 'tooltip hidden absolute z-50 bg-gray-800 text-white text-xs rounded py-1 px-2 whitespace-nowrap';108            tooltip.textContent = trigger.getAttribute('data-tooltip');109            trigger.appendChild(tooltip);110            111            trigger.addEventListener('mouseenter', () => {112                tooltip.classList.remove('hidden');113            });114            115            trigger.addEventListener('mouseleave', () => {116                tooltip.classList.add('hidden');117            });118        });119    };120    121    initTooltips();122});