aimojster/script.js

/*
    GENERAL JAVASCRIPT FOR AIMOJSTER.SI
    Last Updated: 16. September 2025
    Author: Gemini AI for AIMojster.si

    This script handles general functionalities for the website, including:
    - Mobile navigation menu.
    - Smooth scrolling for anchor links.
    - Billing toggle (monthly/yearly) for pricing packages.
    - Contact form submission.
    - Intersection Observer for animations.
*/

document.addEventListener('DOMContentLoaded', function() {

    //======================================================================
    // 1. MOBILNI MENI (NAVIGATION)
    //======================================================================
    const menuToggle = document.querySelector('.menu-toggle');
    const navLinks = document.querySelector('.nav-links');

    if (menuToggle && navLinks) {
        menuToggle.addEventListener('click', function(e) {
            e.stopPropagation();
            navLinks.classList.toggle('active');
            const icon = menuToggle.querySelector('i');
            if (icon) {
                icon.classList.toggle('fa-bars');
                icon.classList.toggle('fa-times');
            }
        });

        document.addEventListener('click', function(e) {
            const isClickInsideNav = navLinks.contains(e.target);
            const isClickOnToggle = menuToggle.contains(e.target);
            if (!isClickInsideNav && !isClickOnToggle && navLinks.classList.contains('active')) {
                navLinks.classList.remove('active');
                const icon = menuToggle.querySelector('i');
                if (icon) {
                    icon.classList.remove('fa-times');
                    icon.classList.add('fa-bars');
                }
            }
        });

        navLinks.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', () => {
                if (navLinks.classList.contains('active')) {
                    navLinks.classList.remove('active');
                    const icon = menuToggle.querySelector('i');
                    if (icon) {
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                }
            });
        });
    }

    //======================================================================
    // 2. GLADKO DRSENJE (SMOOTH SCROLLING)
    //======================================================================
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });


    //======================================================================
    // 3. PREKLOP MED MESEČNIM IN LETNIM NAJEMOM (BILLING TOGGLE)
    //======================================================================
    const billingToggle = document.getElementById('billing-toggle');
    if (billingToggle) {
        const packagePrices = {
            'asistent': { monthly: 39, yearly: 29 },
            'partner': { monthly: 89, yearly: 69 },
            'avtomatizacija': { monthly: 149, yearly: 119 }
        };

        const updatePrices = (isYearly) => {
            document.querySelectorAll('.package-card').forEach(card => {
                const packageName = card.dataset.package;
                if (!packageName || !packagePrices[packageName]) return;

                const priceValue = isYearly ? packagePrices[packageName].yearly : packagePrices[packageName].monthly;
                const priceWithVat = (priceValue * 1.22).toFixed(2).replace('.', ',');

                const priceElement = card.querySelector('.price');
                const vatElement = card.querySelector('.vat-price');

                if (priceElement) {
                    priceElement.innerHTML = `${priceValue} €<span>/mesec</span>`;
                }
                if (vatElement) {
                    vatElement.textContent = `${priceWithVat} € z DDV`;
                }
            });
            updateContactFormPackageOptions(isYearly);
        };

        const updateContactFormPackageOptions = (isYearly) => {
            const packageSelect = document.getElementById('package');
            if (!packageSelect) return;

            Array.from(packageSelect.options).forEach(option => {
                const packageName = option.value;
                if (packageName && packagePrices[packageName]) {
                    const price = isYearly ? packagePrices[packageName].yearly : packagePrices[packageName].monthly;
                    const packageTitle = option.text.split(' - ')[0];
                    option.text = `${packageTitle} - ${price}€/mesec`;
                }
            });
        };
        
        updatePrices(billingToggle.checked);
        billingToggle.addEventListener('change', (e) => {
            updatePrices(e.target.checked);
        });
    }

    //======================================================================
    // 4. IZBIRA PAKETA IN POSODOBITEV KONTAKTNEGA OBRAZCA
    //======================================================================
    document.querySelectorAll('.package-button').forEach(button => {
        button.addEventListener('click', function() {
            const packageCard = this.closest('.package-card');
            if (packageCard) {
                const selectedPackage = packageCard.dataset.package;
                const contactFormPackageSelect = document.getElementById('package');
                if (contactFormPackageSelect) {
                    contactFormPackageSelect.value = selectedPackage;
                }
            }
        });
    });


    //======================================================================
    // 5. POŠILJANJE KONTAKTNEGA OBRAZCA (FORM SUBMISSION)
    //======================================================================
    const contactForm = document.getElementById('contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const message = document.getElementById('message').value.trim();
            const selectedPackage = document.getElementById('package').value;
            const submitButton = this.querySelector('.submit-button');
            
            if (!name || !email || !message || !selectedPackage) {
                alert('Prosimo, izpolnite vsa obvezna polja.');
                return;
            }

            const originalButtonText = submitButton.textContent;
            submitButton.textContent = 'Pošiljanje...';
            submitButton.disabled = true;

            const formData = {
                name: name,
                email: email,
                phone: document.getElementById('phone').value.trim(),
                package: selectedPackage,
                message: message
            };

            try {
                const response = await fetch('send_email.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });

                if (!response.ok) throw new Error('Težava z omrežno povezavo.');
                
                const result = await response.json();
                if (result.success) {
                    alert('Hvala za vaše sporočilo! Odgovorili vam bomo v najkrajšem možnem času.');
                    contactForm.reset();
                } else {
                    throw new Error(result.error || 'Prišlo je do napake pri pošiljanju sporočila.');
                }
            } catch (error) {
                console.error('Error:', error);
                alert('Napaka: ' + error.message);
            } finally {
                submitButton.textContent = originalButtonText;
                submitButton.disabled = false;
            }
        });
    }

    //======================================================================
    // 6. ANIMACIJE OB DRSENJU (INTERSECTION OBSERVER)
    //======================================================================
    const animatedElements = document.querySelectorAll('.fade-in');
    if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });
        animatedElements.forEach(el => observer.observe(el));
    } else {
        animatedElements.forEach(el => el.classList.add('visible'));
    }

});