/* 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} €/mesec`; } 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')); } });