// JavaScript for scrolling to top when "ESG Spinner" link is clicked
document.addEventListener('DOMContentLoaded', function() {
    const esgSpinnerLink = document.querySelector('a[href="#"]');
    const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
    
    // esgSpinnerLink.addEventListener('click', function(event) {
    //     event.preventDefault();
    //     scrollToTop();
    // });
    
    
    // Optional: Scroll to top when page is loaded if URL contains hash for "ESG Spinner"
    if (window.location.hash === '#') {
        scrollToTop();
    }
});

$('.carousel').carousel();

// Switcher 
function showContent(contentType) {
  // Hide all content elements
  const contentElements = document.querySelectorAll('.content');
  contentElements.forEach(element => {
    element.style.display = 'none';
  });

  // Show the selected content
  const selectedContent = document.getElementById(`${contentType}-content`);
  selectedContent.style.display = 'block';
}
// Switcher : End

// Scroll animation : Begin
// Function to check if an element is in the viewport
function isInViewport(element) {
    var bounding = element.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    );
}

// Function to handle the scroll event
function handleScroll() {
    var elements = document.querySelectorAll('.fade-in');
    elements.forEach(function(element) {
        if (isInViewport(element)) {
            element.classList.add('fade-in-visible');
        }
    });
}

// Add event listener for scroll event
window.addEventListener('scroll', handleScroll);

// Trigger the handleScroll function on page load
handleScroll();
// Scroll animation : End

// Slider : Begin
const sliderInner = document.querySelector('.slider-inner');
const slides = document.querySelectorAll('.slide');
const buttons = document.querySelectorAll('.slider-button button');

// Set initial slide index and activate corresponding button
/*let currentSlideIndex = 0;
buttons[currentSlideIndex].classList.add('active');

function moveToSlide(index) {
    sliderInner.style.transform = `translateX(-${index * 100}%)`;
    
    // Remove active class from all buttons
    buttons.forEach(button => {
        button.classList.remove('active');
    });
    
    // Add active class to the button corresponding to the current slide
    buttons[index].classList.add('active');
    
    // Update current slide index
    currentSlideIndex = index;
    
    // Check if the current slide is the last one
    if (currentSlideIndex === slides.length - 1) {
        // If it is, stop automatic sliding
        clearInterval(slideInterval);
    }
}*/

// Automatically move to the next slide every 5 seconds
/*const slideInterval = setInterval(() => {
    moveToSlide((currentSlideIndex + 1) % slides.length);
}, 15000);*/

// Slider : End

// ZOOMIN : Begin

/*const gifAnimation = document.querySelector('.gif-animation');
const popupContainer = document.querySelector('.popup-container');

gifAnimation.addEventListener('click', function() {
    popupContainer.style.display = 'flex';
});*/

function closePopup() {
    popupContainer.style.display = 'none';
}
// ZOOMIN : End


const moduleCards = document.querySelectorAll('.module-card');

moduleCards.forEach(card => {
  card.addEventListener('click', function() {
    card.classList.toggle('expanded');
  });
});
const moduleCards2 = document.querySelectorAll('.module-card2');

moduleCards2.forEach(card => {
  card.addEventListener('click', function() {
    card.classList.toggle('expanded');
  });
});

//Blury backround behind pop-up
const blurElement = document.querySelector('.blur');
function addExpandClass(){
  blurElement.classList.toggle('expand');
}

moduleCards.forEach(card => {card.addEventListener('click', addExpandClass)});




// JavaScript to handle clicks on module-card2 and show the same pop-up
document.querySelectorAll('.module-card2').forEach(function(card) {
    card.addEventListener('click', function() {
      openPopup(); // Assuming openPopup() is the function that shows the pop-up
    });
  });
  

  const container = document.getElementById('image-container');
  const progressRange = document.getElementById('progress-range');

  let isDragging = false;
  let startX;
  let scrollLeft;

  // Mouse down event to start dragging
  container.addEventListener('mousedown', (e) => {
      isDragging = true;
      container.style.cursor = 'grabbing';
      startX = e.pageX - container.offsetLeft;
      scrollLeft = container.scrollLeft;
  });

  // Mouse leave event to stop dragging
  container.addEventListener('mouseleave', () => {
      isDragging = false;
      container.style.cursor = 'grab';
  });

  // Mouse up event to stop dragging
  container.addEventListener('mouseup', () => {
      isDragging = false;
      container.style.cursor = 'grab';
  });

  // Mouse move event to scroll the images
  container.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      e.preventDefault();
      const x = e.pageX - container.offsetLeft;
      const walk = (x - startX) * 2; // Speed of drag
      container.scrollLeft = scrollLeft - walk;

      // Update progress bar based on scroll position
      updateProgressBar();
  });

  // Update progress bar when images are scrolled manually
  function updateProgressBar() {
      const maxScrollLeft = container.scrollWidth - container.clientWidth;
      const scrollPercentage = (container.scrollLeft / maxScrollLeft) * 100;
      progressRange.value = scrollPercentage;
  }

  // Event listener for progress bar interaction
  progressRange.addEventListener('input', (e) => {
      const progressValue = e.target.value;
      const maxScrollLeft = container.scrollWidth - container.clientWidth;
      container.scrollLeft = (progressValue / 100) * maxScrollLeft;
  });

  // Automatically update progress bar based on animation
  setInterval(() => {
      updateProgressBar();
  }, 100);