jQuery(document).ready(function ($) {

  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      $(".back-to-top a").fadeIn();
    } else {
      $(".back-to-top a").fadeOut();
    }
  });

  $(".back-to-top a").click(function () {
    $("html, body").animate({ scrollTop: 0 }, 800);
    return false;
  });


  //slider swiper
  var fse_dental_clinic_Slider = new Swiper(".fse-dental-clinic-slider", {
    slidesPerView: 1,
    speed: 1000,
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".fse-dental-clinic-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".fse-dental-clinic-button-next",
      prevEl: ".fse-dental-clinic-button-prev",
    },
    grabCursor: true,
  });

  var fse_dental_clinic_Service = new Swiper(".service-section .mySwiper", {
    breakpoints: {
      0: {
        slidesPerView: 1,
        centeredSlides: false,
      },
      768: {
        slidesPerView: 2,
        centeredSlides: false,
      },
      992: {
        slidesPerView: 3,
        centeredSlides: true,
      }
    },
    autoplay: {
      delay: 3000,
      disableOnInteraction: true,
    },
    spaceBetween: 30,
    loop: true,
    navigation: {
      nextEl: ".service-swiper-button-next",
      prevEl: ".service-swiper-button-prev",
    },
  });

  //projects-swiper
  var fse_dental_clinic_project_Slider = new Swiper(".projects-slider", {
    breakpoints: {
      0: {
        slidesPerView: 1,
        centeredSlides: false,
      },
      768: {
        slidesPerView: 2,
        centeredSlides: false,
      },
      992: {
        slidesPerView: 3,
        centeredSlides: true,
      }
    },
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    spaceBetween: 30,
    loop: true,
    navigation: {
      nextEl: ".projects-swiper-button-next",
      prevEl: ".projects-swiper-button-prev",
    },
  });

});

document.addEventListener("DOMContentLoaded", function () {

  const sliders = document.querySelectorAll(".before-after-container");
  sliders.forEach((container) => {
    const sliderHandle = container.querySelector(".slider-handle");
    const sliderLine = container.querySelector(".slider-line");
    const beforeImage = container.querySelector(".before-image");
    const afterImage = container.querySelector(".after-image");
    let isDragging = false;
    // Initialize each slider at center
    const initializeSlider = () => {
      sliderHandle.style.left = "50%";
      sliderLine.style.left = "50%";
      beforeImage.style.clipPath = `inset(0 50% 0 0)`;
      afterImage.style.clipPath = `inset(0 0 0 50%)`;
    };
    const moveSlider = (clientX) => {
      const rect = container.getBoundingClientRect();
      let offsetX = clientX - rect.left;
      if (offsetX < 0) offsetX = 0;
      if (offsetX > rect.width) offsetX = rect.width;
      const percentage = (offsetX / rect.width) * 100;
      sliderHandle.style.left = `${percentage}%`;
      sliderLine.style.left = `${percentage}%`;
      beforeImage.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;
      afterImage.style.clipPath = `inset(0 0 0 ${percentage}%)`;
    };
    const startDragging = () => {
      isDragging = true;
      sliderHandle.style.transition = "none";
      sliderLine.style.transition = "none";
    };
    const stopDragging = () => {
      isDragging = false;
      sliderHandle.style.transition = "left 0.3s ease";
      sliderLine.style.transition = "left 0.3s ease";
    };
    // Mouse events
    sliderHandle.addEventListener("mousedown", startDragging);
    sliderLine.addEventListener("mousedown", startDragging);
    window.addEventListener("mousemove", (e) => {
      if (isDragging) moveSlider(e.clientX);
    });
    window.addEventListener("mouseup", stopDragging);
    // Touch events
    sliderHandle.addEventListener("touchstart", startDragging);
    sliderLine.addEventListener("touchstart", startDragging);
    window.addEventListener("touchmove", (e) => {
      if (isDragging) moveSlider(e.touches[0].clientX);
    });
    window.addEventListener("touchend", stopDragging);
    // Initialize
    initializeSlider();
  }); // end foreach slider

});
