//for preloader
window.addEventListener("load", () => {
  console.log("Page loaded");
  const preloader = document.querySelector(".preloader");
  preloader.classList.add("hidden");
});

//for tabview
function openPage(pageName, elmnt, color, defaultTab) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.classList.add("active");

  // If a default tab is specified, show its content
  if (defaultTab) {
    document.getElementById(defaultTab).click();
  }
}

// Specify the default tab content ('Home' in this case)
document.addEventListener("DOMContentLoaded", function () {
  openPage('Home', document.getElementById('defaultOpen'), 'white', 'Home');
});


//for payment tab
document.addEventListener("DOMContentLoaded", function () {
  var methodRadios = document.querySelectorAll('input[name="payment-method"]');
  var firstDetail = document.getElementById("details-1");

  // Show the first payment details div initially
  firstDetail.style.display = "block";

  methodRadios.forEach(function (radio) {
    radio.addEventListener("change", function () {
      var methodId = this.id;
      var detailId = "details-" + methodId.split("-")[1];
      var details = document.querySelectorAll(".payment-details");
      details.forEach(function (detail) {
        detail.style.display = "none";
      });
      document.getElementById(detailId).style.display = "block";
    });
  });
});


//for click to pay button it will go to payment details

//for scroll the payment details
document.addEventListener('DOMContentLoaded', function () {
  // Get the "Pay" button element
  const payButton = document.getElementById('payButton');

  // Get the payment section element
  const paymentSection = document.querySelector('.payment-section');

  // Add click event listener to the "Pay" button
  payButton.addEventListener('click', function () {
    // Scroll to the payment section
    paymentSection.scrollIntoView({ behavior: 'smooth' });
  });
});


//for click to contact button it will go to footer
function scrollToFooter() {
  // Scroll to the footer section smoothly
  document.getElementById('footer').scrollIntoView({ behavior: 'smooth' });
}


function videpage(pageName, elmnt, color) {
  var i, video_content, tablinks;
  video_content = document.getElementsByClassName("video_content");
  for (i = 0; i < video_content.length; i++) {
    video_content[i].style.display = "none";
  }
  document.getElementById(pageName).style.display = "block";
}

// Load the "Home" tab content and the first video when the page loads
videpage('Video');

const videoLinks = document.querySelectorAll('.abt_p');
const videoIframe = document.getElementById('video-iframe');

function loadVideo(videoId) {
  const videoUrl = `https://www.youtube.com/embed/${videoId}?rel=0`;
  videoIframe.src = videoUrl;
}

// Load the first video automatically when the page loads
loadVideo(videoLinks[0].getAttribute('data-video-id'));

videoLinks.forEach(link => {
  link.addEventListener('click', () => {
    const videoId = link.getAttribute('data-video-id');
    loadVideo(videoId);
  });
});

//for active video tab

document.querySelectorAll('.abt_p').forEach(function (element) {
  element.addEventListener('click', function () {
    // Remove the 'active' class from all paragraphs
    document.querySelectorAll('.abt_p').forEach(function (el) {
      el.classList.remove('active');
    });

    // Add the 'active' class to the clicked paragraph
    this.classList.add('active');
  });
});


//for click to Learn it will go to Video section
function scrollToVideo() {
  document.getElementById('videoSec').scrollIntoView({ behavior: 'smooth' });
}