roi-theme/Assets/js/main.js

/**
 * ROI THEME - MAIN JAVASCRIPT
 */

// Navbar scroll effect
window.addEventListener('scroll', function() {
    const navbar = document.querySelector('.navbar');
    if (navbar) {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    }
});

/**
 * TOC (Table of Contents) - Handled by toc.js
 * No duplicate code needed here - toc.js provides:
 * - ScrollSpy with IntersectionObserver
 * - Smooth scroll with prefers-reduced-motion support
 * - Toggle functionality
 * - localStorage state
 */

/**
 * CTA A/B Testing
 * Handled by cta-ab-testing.php (PHP) and cta-tracking.js
 * - PHP renders only ONE variant based on cookie
 * - cta-tracking.js handles Analytics tracking
 */

// Contact Modal - Dynamic Loading
function loadContactModal() {
    const modalContainer = document.getElementById('modalContainer');
    if (!modalContainer) return;

    // Use theme URL from localized script
    const modalUrl = (typeof roiheme !== 'undefined' && rroieme.themeUrl)
        ? roiheme.themeUrl + '/modal-contact.html'
        : '/wp-content/themes/roitheme/modal-contact.html';

    fetch(modalUrl)
        .then(response => response.text())
        .then(html => {
            modalContainer.innerHTML = html;
            initContactForm();
        })
        .catch(error => {
            console.error('Error loading modal:', error);
        });
}

document.addEventListener('DOMContentLoaded', loadContactModal);

// Contact Form - Webhook Submission
function initContactForm() {
    const form = document.getElementById('contactForm');
    if (!form) return;

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const WEBHOOK_URL = 'https://tu-webhook.com/contacto';

        const formData = {
            fullName: document.getElementById('fullName').value,
            company: document.getElementById('company').value,
            whatsapp: document.getElementById('whatsapp').value,
            email: document.getElementById('email').value,
            comments: document.getElementById('comments').value,
            timestamp: new Date().toISOString(),
            source: 'APU Website - Modal'
        };

        if (!formData.fullName || !formData.whatsapp || !formData.email) {
            showFormMessage('Por favor completa todos los campos requeridos', 'danger');
            return;
        }

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.email)) {
            showFormMessage('Por favor ingresa un correo electrónico válido', 'danger');
            return;
        }

        const submitButton = form.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enviando...';

        fetch(WEBHOOK_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData)
        })
        .then(response => {
            if (!response.ok) throw new Error('Error en el envío');
            return response.json();
        })
        .then(data => {
            showFormMessage('¡Mensaje enviado exitosamente!', 'success');
            form.reset();

            if (typeof gtag !== 'undefined') {
                gtag('event', 'form_submission', {
                    'event_category': 'Contact Form',
                    'event_label': 'Form Submitted'
                });
            }

            setTimeout(() => {
                const modal = bootstrap.Modal.getInstance(document.getElementById('contactModal'));
                if (modal) modal.hide();
            }, 2000);
        })
        .catch(error => {
            showFormMessage('Error al enviar el mensaje', 'danger');
        })
        .finally(() => {
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
        });
    });
}

function showFormMessage(message, type) {
    const messageDiv = document.getElementById('formMessage');
    if (!messageDiv) return;

    messageDiv.textContent = message;
    messageDiv.className = `mt-3 alert alert-${type}`;
    messageDiv.style.display = 'block';

    setTimeout(() => {
        messageDiv.style.display = 'none';
    }, 5000);
}

// Footer Contact Form
document.addEventListener('DOMContentLoaded', function() {
    const footerForm = document.getElementById('footerContactForm');
    if (!footerForm) return;

    footerForm.addEventListener('submit', function(e) {
        e.preventDefault();

        const WEBHOOK_URL = 'https://tu-webhook.com/contacto';

        const formData = {
            fullName: document.getElementById('footerFullName').value,
            company: document.getElementById('footerCompany').value,
            whatsapp: document.getElementById('footerWhatsapp').value,
            email: document.getElementById('footerEmail').value,
            comments: document.getElementById('footerComments').value,
            timestamp: new Date().toISOString(),
            source: 'APU Website - Footer'
        };

        if (!formData.fullName || !formData.whatsapp || !formData.email) {
            showFooterFormMessage('Por favor completa todos los campos requeridos', 'danger');
            return;
        }

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.email)) {
            showFooterFormMessage('Por favor ingresa un correo válido', 'danger');
            return;
        }

        const submitButton = footerForm.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enviando...';

        fetch(WEBHOOK_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData)
        })
        .then(response => {
            if (!response.ok) throw new Error('Error en el envío');
            return response.json();
        })
        .then(data => {
            showFooterFormMessage('¡Mensaje enviado exitosamente!', 'success');
            footerForm.reset();

            if (typeof gtag !== 'undefined') {
                gtag('event', 'form_submission', {
                    'event_category': 'Footer Form',
                    'event_label': 'Form Submitted'
                });
            }
        })
        .catch(error => {
            showFooterFormMessage('Error al enviar el mensaje', 'danger');
        })
        .finally(() => {
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
        });
    });
});

function showFooterFormMessage(message, type) {
    const messageDiv = document.getElementById('footerFormMessage');
    if (!messageDiv) return;

    messageDiv.textContent = message;
    messageDiv.className = `col-12 mt-2 alert alert-${type}`;
    messageDiv.style.display = 'block';

    setTimeout(() => {
        messageDiv.style.display = 'none';
    }, 5000);
}

// Smooth scroll for all anchor links
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            const href = this.getAttribute('href');

            if (href === '#' || this.getAttribute('data-bs-toggle') === 'modal') {
                return;
            }

            const targetElement = document.querySelector(href);
            if (!targetElement) return;

            e.preventDefault();

            const navbar = document.querySelector('.navbar');
            const navbarHeight = navbar ? navbar.offsetHeight : 0;
            const offsetTop = targetElement.offsetTop - navbarHeight - 20;

            window.scrollTo({
                top: offsetTop,
                behavior: 'smooth'
            });
        });
    });
});

console.log('%c APU México ', 'background: #1e3a5f; color: #FF8600; font-size: 16px; font-weight: bold; padding: 10px;');

// === SIDEBAR TOC - ScrollSpy ===

// Table of Contents - ScrollSpy
function updateActiveSection() {
    const tocLinks = document.querySelectorAll('.toc-container a');
    if (!tocLinks.length) return;

    const navbar = document.querySelector('.navbar');
    const navbarHeight = navbar ? navbar.offsetHeight : 0;

    const sectionIds = Array.from(tocLinks).map(link => {
        const href = link.getAttribute('href');
        return href ? href.substring(1) : null;
    }).filter(id => id !== null);

    const sections = sectionIds.map(id => document.getElementById(id)).filter(el => el !== null);
    const scrollPosition = window.scrollY + navbarHeight + 100;

    let activeSection = null;

    for (let i = 0; i < sections.length; i++) {
        const section = sections[i];
        const sectionTop = section.offsetTop;

        if (scrollPosition >= sectionTop) {
            activeSection = section.getAttribute('id');
        } else {
            break;
        }
    }

    tocLinks.forEach(link => {
        link.classList.remove('active');
        const href = link.getAttribute('href');
        if (href === '#' + activeSection) {
            link.classList.add('active');
        }
    });
}

// Smooth scroll for TOC links
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.toc-container a').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {
                const navbar = document.querySelector('.navbar');
                const navbarHeight = navbar ? navbar.offsetHeight : 0;
                const offsetTop = targetElement.offsetTop - navbarHeight - 40;

                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });

    updateActiveSection();
});

window.addEventListener('scroll', updateActiveSection);

// === NAVBAR DROPDOWN - Allow parent links to navigate on desktop ===
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.navbar .dropdown > .dropdown-toggle[href]').forEach(function(link) {
        link.addEventListener('click', function(e) {
            var href = this.getAttribute('href');
            // Only navigate if link has a real URL (not # or empty)
            if (href && href !== '#' && href !== '' && href !== '#!') {
                // On desktop (>= 992px), navigate to the link
                if (window.innerWidth >= 992) {
                    e.preventDefault();
                    e.stopPropagation();
                    window.location.href = href;
                }
                // On mobile, let Bootstrap handle dropdown toggle
            }
        });
    });
});