/home/bdqbpbxa/demo-subdomains/settlepay.goodface.com.ua/js/script.js
// Here will be custom scripts

const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
function blockBody() {
  if ($("html").hasClass("no-scroll")) {
    let scrollTop = $("html").attr("data-scroll");

    $("html").removeClass("no-scroll");
    $("html").attr("style", "");

    $("html").css("right", 0 + "px");
    $(".header").css("right", 0 + "px");
    $(".preloader").css("padding-right", 0 + "px");

    $(document).scrollTop(scrollTop);
  } else {
    let scrollTop = $(document).scrollTop();

    $("html").addClass("no-scroll");
    $("html").css({
      top: "-" + scrollTop + "px",
    });

    $("html").css("right", scrollbarWidth + "px");
    $(".header").css("right", scrollbarWidth + "px");
    $(".preloader").css("padding-right", scrollbarWidth + "px");

    $("html").attr("data-scroll", scrollTop);
  }
}

// Animation scroll

$(window).ready(function () {
  if (!$(".line-around").length) return;

  let line = $(".line-around");

  line.each(function () {
    let path = $(this).find("svg path");
    let lineLength = path.get(0).getTotalLength();

    $(this).addClass("animation");
    $(this).attr("data-length", lineLength);

    path.attr("stroke-dasharray", `0, ${lineLength}`);
  });
});

function animation(scrollTop) {
  $(".animation")
    .not(".animated")
    .each(function () {
      let offsetTop = $(this).offset().top - 50;
      let windowHeight = window.innerHeight;

      if ($(this).hasClass("line-around") && scrollTop + windowHeight > offsetTop) {
        $(this).addClass("animated");

        let path = $(this).find("path");
        let lineLength = $(this).attr("data-length");

        path.attr("stroke-dasharray", `${lineLength}, ${lineLength}`);
      } else if (scrollTop + windowHeight > offsetTop) {
        $(this).addClass("animated");
      }
    });
}

$(window).scroll(function () {
  var scrollTop = $(this).scrollTop();
  animation(scrollTop);
});

// Anchor scroll animation

$(".link-scroll").on("click", function (event) {
  event.preventDefault();

  if ($(this).closest(".mob-menu-block").length) {
    blockBody();
    $(this).closest(".mob-menu-block").removeClass("active");
    $(".header__menu-open").removeClass("active");
    $(".header").removeClass("light");
  }

  var id = $(this).attr("href");
  var top = $(id).offset().top - 72;

  $("body,html").animate(
    {
      scrollTop: top,
    },
    1000
  );
});

// Settings for header

let scrollNumber = 0;

$(window).on("scroll", function () {
  const header = $(".header-content");
  let scroll = $(this).scrollTop();

  if (scroll <= 0 && $(".dark-bg").hasClass("active")) {
    header.removeClass("hide");
    return;
  }

  if (scroll <= scrollNumber || scroll <= 0) {
    header.removeClass("hide");
  } else if (scroll > scrollNumber) {
    header.addClass("hide");
  }

  scrollNumber = scroll;
});

$(window).on("load", function () {
  if (isPc) {
    $(".home-main-card, .footer-main-card").each(function () {
      let innerWidth = $(this).find(".--arrow-button span").innerWidth();
      $(this).attr("data-width", innerWidth + 8);
      $(this).find("span").css("width", 0);
    });
  }
});

$(".home-main-card, .footer-main-card").on("mouseenter", function () {
  let innerWidth = $(this).attr("data-width");
  $(this).find("span").css("width", innerWidth);
});

$(".home-main-card, .footer-main-card").on("mouseleave", function () {
  $(this).find("span").css("width", 0);
});

function initCardsSlider() {
  let succesStorySliderContainers = $(".scrollcards");

  succesStorySliderContainers.each(function () {
    let succesStorySliderContainer = $(this);
    let swiperWrapper = succesStorySliderContainer.find(".swiper-wrapper");
    let slidesCount = swiperWrapper.children().length;

    let succesStorySlider = new Swiper(succesStorySliderContainer.find(".slider")[0], {
      slidesPerView: 1,
      spaceBetween: 8,
      autoHeight: true,
      initialSlide: slidesCount <= 3 ? 1 : 1,
      speed: 700,
      loop: true,
      loopedSlides: slidesCount <= 3 ? 1 : 2,
      navigation: {
        prevEl: succesStorySliderContainer.find(".nav-pag .prev")[0],
        nextEl: succesStorySliderContainer.find(".nav-pag .next")[0],
      },
      pagination: {
        el: succesStorySliderContainer.find(".pagination")[0],
        type: "bullets",
        clickable: true,
      },
      on: {
        slideChange: function () {
          let realIndex = this.realIndex;
          this.pagination.update();
          this.pagination.bullets[realIndex % slidesCount]?.classList?.add(
            "swiper-pagination-bullet-active"
          );
        },
      },
      breakpoints: {
        1024: {
          spaceBetween: 40,
          autoHeight: false,
        },
      },
    });
  });
}

$(window).on("load", initCardsSlider);

function animateStickySliderSection() {
  if (!$(".scrolling-card-wrapper").length) return;
  const textCards = gsap.utils.toArray(".scrolling-card-wrapper");
  // if (isPc) {
  //   startPos = "top center";
  //   endPos = "bottom center";
  // } else {
  //   startPos = "top 60%";
  //   endPos = "bottom center";
  // }
  textCards.forEach((card) => {
    gsap.to(card, {
      scrollTrigger: {
        invalidateOnRefresh: true,
        start: "top center",
        end: "bottom center",
        trigger: card,
        onUpdate: (self) => {
          let el = $(self.trigger);
          let menu = el.closest(".scrolling-cards-wrapper");

          menu.find(".-active").removeClass("-active");
          el.addClass("-active");
          ScrollTrigger.refresh(true);
        },
      },
    });
  });
}

function setStickyProgressbarPosition() {
  let windowHeight = window.innerHeight;
  let headerHeight = $(".header").innerHeight();
  let progressBar = $(".sticky-progress__progress");
  if (!progressBar.length) return;
  let topPosition = (windowHeight + headerHeight) / 2 - progressBar.innerHeight() / 2 + 20;
  progressBar.css("top", topPosition);
}

$(window).on("scroll", setStickySliderProgress);
$(window).on("load", animateStickySliderSection);
$(window).on("load resize", setStickyProgressbarPosition);
$(window).on("resize", function () {
  ScrollTrigger?.refresh();
});

function setStickySliderProgress() {
  let parent = $(".scrolling-cards-wrapper");
  if (!parent.length) return;

  let activeIndex = $(".scrolling-card-wrapper.-active").index();
  let progressbarContainer = $(".sticky-progress__progress");

  let allSlidesCount = $(".scrolling-card-wrapper").length;
  let displayedactiveIndex, displayedAllSlidesCount;

  let windowCenter = window.innerHeight / 2;
  let progress = parent.offset().top - windowCenter - window.scrollY;
  let calcProgress;

  if (progress < 0 && Math.abs(progress) < parent.innerHeight()) {
    let onePercent = parent.innerHeight() / 100;
    calcProgress =
      Math.abs(progress / onePercent) + 10 > 100 ? 100 : Math.abs(progress / onePercent) + 10;
  }

  if (allSlidesCount > 10) {
    displayedAllSlidesCount = allSlidesCount;
  } else {
    displayedAllSlidesCount = "0" + allSlidesCount;
  }

  if (activeIndex + 1 > 10) {
    displayedactiveIndex = activeIndex + 1;
  } else {
    let preparedIndex = activeIndex + 1;
    displayedactiveIndex = `0` + preparedIndex;
  }

  progressbarContainer.find(".start").html(displayedactiveIndex);
  progressbarContainer.find(".end").html(displayedAllSlidesCount);
  progressbarContainer.find(".progress-active").css({
    height: `${calcProgress}%`,
  });
}