/**
 * Modern Courses Page JavaScript
 * Animations and 3D effects for the courses page
 */

document.addEventListener('DOMContentLoaded', function() {
  // Initialize AOS animations
  AOS.init({
    duration: 800,
    easing: 'ease-out',
    once: true
  });

  // Initialize Vanilla Tilt for 3D hover effect on course cards
  VanillaTilt.init(document.querySelectorAll('.course-card'), {
    max: 10,
    speed: 400,
    glare: true,
    'max-glare': 0.3,
    perspective: 1000,
    scale: 1.03
  });
  
  // Initialize Particles.js for hero background
  if (document.getElementById('particles-js')) {
    particlesJS('particles-js', {
      particles: {
        number: {
          value: 80,
          density: {
            enable: true,
            value_area: 800
          }
        },
        color: {
          value: '#ffffff'
        },
        shape: {
          type: 'circle',
          stroke: {
            width: 0,
            color: '#000000'
          },
          polygon: {
            nb_sides: 5
          }
        },
        opacity: {
          value: 0.5,
          random: false,
          anim: {
            enable: false,
            speed: 1,
            opacity_min: 0.1,
            sync: false
          }
        },
        size: {
          value: 3,
          random: true,
          anim: {
            enable: false,
            speed: 40,
            size_min: 0.1,
            sync: false
          }
        },
        line_linked: {
          enable: true,
          distance: 150,
          color: '#ffffff',
          opacity: 0.4,
          width: 1
        },
        move: {
          enable: true,
          speed: 2,
          direction: 'none',
          random: false,
          straight: false,
          out_mode: 'out',
          bounce: false,
          attract: {
            enable: false,
            rotateX: 600,
            rotateY: 1200
          }
        }
      },
      interactivity: {
        detect_on: 'canvas',
        events: {
          onhover: {
            enable: true,
            mode: 'grab'
          },
          onclick: {
            enable: true,
            mode: 'push'
          },
          resize: true
        },
        modes: {
          grab: {
            distance: 140,
            line_linked: {
              opacity: 1
            }
          },
          bubble: {
            distance: 400,
            size: 40,
            duration: 2,
            opacity: 8,
            speed: 3
          },
          repulse: {
            distance: 200,
            duration: 0.4
          },
          push: {
            particles_nb: 4
          },
          remove: {
            particles_nb: 2
          }
        }
      },
      retina_detect: true
    });
  }
  
  // Add scroll reveal animation to course cards
  const courseCards = document.querySelectorAll('.course-card-container');
  courseCards.forEach((card, index) => {
    card.classList.add('fade-in-up');
    card.style.animationDelay = `${index * 0.1}s`;
  });
  
  // Initialize Counter animation for statistics
  const counters = document.querySelectorAll('.counter');
  if (counters.length) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const target = entry.target;
          const countTo = parseInt(target.innerText);
          let current = 0;
          const increment = countTo / 80; // Divide by the number of steps
          const timer = setInterval(() => {
            current += increment;
            if (current >= countTo) {
              target.innerText = countTo;
              clearInterval(timer);
            } else {
              target.innerText = Math.round(current);
            }
          }, 20);
          observer.unobserve(target);
        }
      });
    }, { threshold: 0.5 });
    
    counters.forEach(counter => {
      observer.observe(counter);
    });
  }
  
  // Animate progress bars on scroll
  const progressBars = document.querySelectorAll('.progress-bar');
  if (progressBars.length) {
    const progressObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const target = entry.target;
          const width = target.getAttribute('data-width');
          setTimeout(() => {
            target.style.width = width;
          }, 200);
          progressObserver.unobserve(target);
        }
      });
    }, { threshold: 0.2 });
    
    progressBars.forEach(bar => {
      progressObserver.observe(bar);
    });
  }
  
  // Filter courses by category
  const filterButtons = document.querySelectorAll('.btn-filter');
  const courseItems = document.querySelectorAll('.course-card-container');
  
  filterButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Remove active class from all buttons
      filterButtons.forEach(btn => btn.classList.remove('active'));
      
      // Add active class to clicked button
      this.classList.add('active');
      
      const category = this.getAttribute('data-category');
      
      // Filter course items
      courseItems.forEach(item => {
        if (category === 'all') {
          item.style.display = 'block';
          setTimeout(() => {
            item.style.opacity = '1';
            item.style.transform = 'translateY(0)';
          }, 100);
        } else if (item.getAttribute('data-category') === category) {
          item.style.display = 'block';
          setTimeout(() => {
            item.style.opacity = '1';
            item.style.transform = 'translateY(0)';
          }, 100);
        } else {
          item.style.opacity = '0';
          item.style.transform = 'translateY(20px)';
          setTimeout(() => {
            item.style.display = 'none';
          }, 300);
        }
      });
    });
  });
  
  // Handle search
  const courseSearchForm = document.getElementById('courseSearchForm');
  const courseSearch = document.getElementById('courseSearch');
  
  if (courseSearchForm && courseSearch) {
    courseSearchForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const searchValue = courseSearch.value.toLowerCase();
      
      courseItems.forEach(item => {
        const courseTitle = item.querySelector('.course-title').innerText.toLowerCase();
        const courseCategory = item.getAttribute('data-category').toLowerCase();
        
        if (courseTitle.includes(searchValue) || courseCategory.includes(searchValue)) {
          item.style.display = 'block';
          setTimeout(() => {
            item.style.opacity = '1';
            item.style.transform = 'translateY(0)';
          }, 100);
        } else {
          item.style.opacity = '0';
          item.style.transform = 'translateY(20px)';
          setTimeout(() => {
            item.style.display = 'none';
          }, 300);
        }
      });
    });
  }
  
  // Initialize MixItUp for filtering if available
  if (window.mixitup && document.querySelector('.course-grid')) {
    const mixer = mixitup('.course-grid');
  }
});

// Parallax effect for hero section on mouse move
document.addEventListener('mousemove', function(e) {
  const hero = document.querySelector('.courses-hero');
  if (hero) {
    const heroContent = hero.querySelector('.hero-content');
    const x = e.clientX / window.innerWidth;
    const y = e.clientY / window.innerHeight;
    
    heroContent.style.transform = `translateX(${x * 20}px) translateY(${y * 20}px)`;
  }
});