// header navbar start

document.addEventListener("click", (e) => {
  const isDropdownButton = e.target.matches("[data_dropdown_button]");
  
  // If click is inside an active dropdown, do nothing
  if (!isDropdownButton && e.target.closest("[data_dropdown]") != null) return;

  let currentDropdown;
  if (isDropdownButton) {
    currentDropdown = e.target.closest("[data_dropdown]");

    // Toggle the 'active' class on the clicked dropdown
    currentDropdown.classList.toggle("active");

    // Remove 'active' class from other dropdowns
    document.querySelectorAll(".single_line_drop.active").forEach((dropdown) => {
      if (dropdown !== currentDropdown) {
        dropdown.classList.remove("active");
      }
    });

    // Update the backdrop (if applicable)
    updateHeadInnerBackdrop();
  }

  // Ensure only one dropdown is active at a time
  document.querySelectorAll(".single_line_drop.active").forEach((dropdown) => {
    if (dropdown !== currentDropdown) {
      dropdown.classList.remove("active");
    }
  });

  // Update parent link color after closing or toggling dropdowns
  updateParentLinkColor();
});

function updateParentLinkColor() {
  // Reset all parent nav_link styles
  document.querySelectorAll("[data_dropdown_button]").forEach((button) => {
    button.style.color = ""; // Reset to default
    button.style.fontWeight = ""; // Reset font weight
  });

  // Find active dropdowns and update their parent nav_link styles
  document.querySelectorAll(".dropdown_content .nav-link.active").forEach((activeLink) => {
    const parentDropdown = activeLink.closest("[data_dropdown]");
    if (parentDropdown) {
      const parentButton = parentDropdown.querySelector("[data_dropdown_button]");
      if (parentButton) {
        parentButton.style.color = "#e5195e"; // Apply active color
        parentButton.style.fontWeight = "500"; // Apply active font weight
      }
    }
  });
}

// Run updateParentLinkColor on page load to set the correct state
document.addEventListener("DOMContentLoaded", updateParentLinkColor);


// header navbar end

// sticky header start

const header = document.querySelector("#header");

window.addEventListener("scroll", () => {
  const currentScroll = window.scrollY;
  if (currentScroll > 50) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
});

// sticky header end


// faqs accordion start

$(document).ready(function () {
  $(".inn_data > h3").on("click", function () {
    $(this).hasClass("active")
      ? ($(this).removeClass("active"),
        $(this).siblings(".accordion_content").slideUp(200),
        $(".inn_data > h3 i").removeClass("fa-minus").addClass("fa-plus"))
      : ($(".inn_data > h3 i").removeClass("fa-minus").addClass("fa-plus"),
        $(this).find("i").removeClass("fa-plus").addClass("fa-minus"),
        $(".inn_data > h3").removeClass("active"),
        $(this).addClass("active"),
        $(".accordion_content").slideUp(200),
        $(this).siblings(".accordion_content").slideDown(200));
  });
});

// faqs accordion end

// Progress-bar and back to top start

let calcSrollValue = () => {
  let scrollProgress = document.getElementById("progress_bar");
  let pos = document.documentElement.scrollTop;

  let calcHeight =
    document.documentElement.scrollHeight -
    document.documentElement.clientHeight;
  let scrollValue = Math.round((pos * 100) / calcHeight);

  if (pos > 100) {
    scrollProgress.style.display = "grid";
  } else {
    scrollProgress.style.display = "none";
  }

  scrollProgress.addEventListener("click", () => {
    document.documentElement.scrollTop = 0;
  });

  scrollProgress.style.background = `conic-gradient(#d1afbb ${scrollValue}%, #E5195E ${scrollValue}%)`;
};

window.onscroll = calcSrollValue;
window.onload = calcSrollValue;

// Progress-bar and back to top end

// left side open nav  start

const sidebar = document.querySelector(".header .head_inner .nav_bar");
const overlay = document.querySelector(".overlay");
const hamburgerIcon = document.querySelector(".ham_burger");
const closeBtn = document.querySelector(".nav_cross_btn");

function openSidebar() {
  header.classList.add("active");
}
function closeSidebar() {
  header.classList.remove("active");
}

hamburgerIcon.addEventListener("click", () => {
  openSidebar();
});

overlay.addEventListener("click", () => {
  closeSidebar();
});

closeBtn.addEventListener("click", () => {
  closeSidebar();
});

// left side open nav end

// plus_minus_start

$(document).ready(function () {
  $(
    ".request_the_price_sec .quantity__minus, .request_the_price_sec .quantity__plus"
  ).click(function (e) {
    var $this = $(this);
    var $quantity__input = $(this).parent().find(".quantity__input");
    var $currentVal = parseInt($(this).parent().find(".quantity__input").val());

    //Increment
    if ($currentVal != NaN && $this.hasClass("quantity__plus")) {
      $quantity__input.val($currentVal + 1);
    }
    //Decrement
    else if ($currentVal != NaN && $this.hasClass("quantity__minus")) {
      if ($currentVal >= 1) {
        $quantity__input.val($currentVal - 1);
      }
    }
  });
});

// plus_minus_end


// *********** solution tabs end
document.addEventListener("DOMContentLoaded", function () {
  const tabs = document.querySelectorAll('.solution-tab .nav-link');
  const navContainer = document.querySelector('.solution-tab .nav');

  // Create a stepper line element dynamically
  const stepperLine = document.createElement('div');
  stepperLine.classList.add('stepper-line');
  navContainer.appendChild(stepperLine);

  function updateStepperLine(lastVisitedTab) {
    const lastTabRect = lastVisitedTab.getBoundingClientRect();
    const containerRect = navContainer.getBoundingClientRect();

    // Calculate the new width for the stepper line
    const scrollOffset = navContainer.scrollLeft; // Account for scrolling
    const newWidth = lastTabRect.right - containerRect.left + scrollOffset;
    stepperLine.style.width = `${newWidth}px`;
  }

  // Initialize stepper line for the active tab on load
  const activeTab = document.querySelector('.solution-tab .nav-link.active');
  if (activeTab) {
    updateStepperLine(activeTab);
  }

  // Update the stepper line on tab click
  tabs.forEach((tab, index) => {
    tab.addEventListener('click', function () {
      // Mark all tabs up to the current one as visited
      tabs.forEach((t, i) => {
        if (i <= index) {
          t.classList.add('visited');
        } else {
          t.classList.remove('visited');
        }
      });

      // Update the stepper line width
      updateStepperLine(this);
    });
  });

  // Update the stepper line on window resize or scroll
  window.addEventListener('resize', function () {
    const activeTab = document.querySelector('.solution-tab .nav-link.active');
    if (activeTab) {
      updateStepperLine(activeTab);
    }
  });

  navContainer.addEventListener('scroll', function () {
    const activeTab = document.querySelector('.solution-tab .nav-link.active');
    if (activeTab) {
      updateStepperLine(activeTab);
    }
  });
});


// *********** solution tabs end

// *********** Portfolio slider start

$(document).ready(function () {
  // Initialize background slider
  $("#bg_slide").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: false,
    fade: true,
    asNavFor: "#card_slide",
  });

  // Initialize card slider
  $("#card_slide").slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    arrows: true,
    asNavFor: "#bg_slide",
    dots: false,
    centerMode: true,
    centerPadding: "0",
    focusOnSelect: true,
    prevArrow:
      '<button class="prev_arrow"><i class="fa-solid fa-arrow-left"></i></button>',
    nextArrow:
      '<button class="next_arrow"><i class="fa-solid fa-arrow-right"></i></button>',
    responsive: [
      {
        breakpoint: 991,
        settings: {
          slidesToShow: 3,
          centerMode: true,
        },
      },
      {
        breakpoint: 576,
        settings: {
          slidesToShow: 2,
          centerMode: false,
        },
      },
    ],
  });

  // Automatically trigger the Next button every 3 seconds
  // setInterval(function () {
  //   if (isElementInViewport($("#card_slide")[0])) {
  //     $(".next_arrow").trigger("click");
  //   }
  // }, 3000);

  // Utility function: Check if an element is in the viewport
  function isElementInViewport(el) {
    const rect = el.getBoundingClientRect();
    return rect.top < window.innerHeight && rect.bottom > 0;
  }
});


// *********** Portfolio slider end

// *********** Range input start

const slider = document.getElementById("customRange3");
const dots = document.querySelectorAll(".dot");

// Update slider progress based on value
function updateSliderProgress() {
  const value = slider.value;
  const max = slider.max;
  const progress = (value / max) * 100;

  // Set the background color to show completed portion as pink
  slider.style.background = `linear-gradient(to right, #E5195E ${progress}%, #999999 ${progress}%)`;

  // Hide dots based on the range value
  if (value >= 1) {
    dots[0].classList.add("hidden");
  } else {
    dots[0].classList.remove("hidden");
  }

  if (value >= 2) {
    dots[1].classList.add("hidden");
  } else {
    dots[1].classList.remove("hidden");
  }

  if (value >= 3) {
    dots[2].classList.add("hidden");
  } else {
    dots[2].classList.remove("hidden");
  }

  if (value >= 4) {
    dots[3].classList.add("hidden");
  } else {
    dots[3].classList.remove("hidden");
  }

  if (value >= 5) {
    dots[4].classList.add("hidden");
  } else {
    dots[4].classList.remove("hidden");
  }
}

// Update the slider progress on input
slider.addEventListener("input", updateSliderProgress);

// Initial update on page load
updateSliderProgress();

// *********** Range input end
