/home/bdqbpbxa/demo-subdomains/settlepay.goodface.com.ua/js/custom-solutions.js
// Prevent default function

function preventDefault(e) {
  e.preventDefault();
}

// Scroll lock

function lockScroll() {
  const html = document.documentElement;
  const body = document.body;

  const scrollTop = window.scrollY;

  html.classList.add("-scroll-lock");
  body.classList.add("-scroll-lock");

  document.body.scrollTo(0, scrollTop);
  html.setAttribute("data-scroll", scrollTop);

  $(".--modal-scrollable-element").on("touchmove pointermove", preventDefault);
}

function unlockScroll() {
  const html = document.documentElement;
  const body = document.body;

  const scrollPositionBeforeLock = html.getAttribute("data-scroll");

  html.classList.remove("-scroll-lock");
  body.classList.remove("-scroll-lock");

  window.scrollTo(0, scrollPositionBeforeLock);
  document.body.scrollTo(0, 0);

  $(".--modal-scrollable-element").off("touchmove pointermove", preventDefault);
}

// Check device type

const isApple = navigator.userAgent.toLowerCase().indexOf("mac") !== -1;
const isAndroid = navigator.userAgent.toLowerCase().indexOf("android") !== -1;

if (isApple) {
  document.body.classList.add("-apple");
}

if (isAndroid) {
  document.body.classList.add("-android");
}

// Check device size

window.isPc = window.innerWidth > 1024;
window.isTablet = window.innerWidth > 759 && window.innerWidth <= 1024;
window.isMobile = window.innerWidth < 760;

function checkDeviceSize() {
  window.isPc = window.innerWidth > 1024;
  window.isTablet = window.innerWidth > 759 && window.innerWidth <= 1024;
  window.isMobile = window.innerWidth < 760;
}

window.addEventListener("DOMContentLoaded", checkDeviceSize);
window.addEventListener("resize", checkDeviceSize);

// Set CSS variable with window.innerHeight

function setCssWindowInnerHeight() {
  document.documentElement.style.setProperty("--window-inner-height", `${window.innerHeight}px`);
}

window.addEventListener("DOMContentLoaded", setCssWindowInnerHeight);
window.addEventListener("resize", setCssWindowInnerHeight);

// Set CSS variable with scrollbar width

function setScrollbarWidthInCSS() {
  $("body").append(`
		<div id="scrollbar-width-test" style="position: absolute;top: -999px;left: -999px;width: 50px;height: 50px;overflow: scroll;">
			<div style="height: 100px;"></div>
		</div>
	`);

  const scrollbarWidthTestEl = $("#scrollbar-width-test")[0];
  const scrollbarWidth = scrollbarWidthTestEl.offsetWidth - scrollbarWidthTestEl.clientWidth;

  document.documentElement.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);

  window.scrollbarWidth = scrollbarWidth;

  scrollbarWidthTestEl.remove();
}

window.addEventListener("DOMContentLoaded", setScrollbarWidthInCSS);
window.addEventListener("resize", setScrollbarWidthInCSS);

function fullTransitionendCallback(element, callback, customProperty = false) {
  if ($(element).length === 0) return;

  const transitionProperties = $(element)
    .css("transition-property")
    .split(",")
    .map((property) => {
      return property.trim();
    });

  const transitionDurations = $(element)
    .css("transition-duration")
    .split(",")
    .map((duration) => {
      return parseFloat(duration);
    });

  let longestProperty = false;

  if (transitionProperties.length > 1 && customProperty === false) {
    longestProperty =
      transitionProperties[transitionDurations.indexOf(Math.max(...transitionDurations))];
  }

  $(element).on("transitionstart", function () {
    $(this).removeAttr("data-transitionend-triggered");
  });

  $(element).on("transitionend", function (e) {
    const isTriggered = $(this).is("[data-transitionend-triggered]");

    if (isTriggered) return;

    const isCustomProperty = customProperty && e.originalEvent.propertyName === customProperty;
    const isSingleCallback =
      customProperty === false && longestProperty === false && typeof callback === "function";
    const isLongestPropertyCallback =
      longestProperty &&
      e.originalEvent.propertyName === longestProperty &&
      typeof callback === "function";

    if (isCustomProperty || isSingleCallback || isLongestPropertyCallback) {
      $(this).attr("data-transitionend-triggered", true);
      callback(e);
    }
  });
}

function customAccordionReady() {
  $(".faq-item").each(function () {
    const openClass = $(this).hasClass("-open");
    if (openClass) {
      openCustomAccordion($(this));
      $(this).addClass("-open");
    }
  });
}
const accordionWithImageWrapper = $(".accordion-with-image-wrapper");
if (accordionWithImageWrapper.length) {
  const firstAccordion = accordionWithImageWrapper.first().find(".faq-item").first();
  openCustomAccordion(firstAccordion);
  firstAccordion.addClass("-open");
}
$(document).on("click", ".faq-item__open.--accordion__open", function () {
  const accordion = $(this).closest(".faq-item");
  const isAccordionLock =
    accordion.find("[data-accordion-in-process]").length ||
    accordion.parent().closest("[data-accordion-in-process]").length;

  if (isAccordionLock) return;

  if (accordion.closest(".accordion-with-image-wrapper").length) {
    let index = accordion.closest(".accordion-with-image-wrapper").index();
    $(".faq-list-img").find(".-active").removeClass("-active");
    $(".faq-list-img").find(".faq-img").eq(index).addClass("-active");
    $(".accordion-item-with-image-img-mobile").removeClass("-active");
    $(".accordion-item-with-image-img-mobile").eq(index).addClass("-active");
  }

  const isOpen = accordion.hasClass("-open");
  const icon = accordion.find(".accordion-icon");

  $(".faq-item.-open").each(function () {
    closeCustomAccordion($(this));
    $(this).removeClass("-open");
    $(this).find(".accordion-icon").css("transform", "rotate(0deg)");
  });

  accordion.attr("data-accordion-in-process", true);

  if (isOpen) {
    closeCustomAccordion(accordion);
    icon.css("transform", "rotate(0deg)");
    accordion.removeClass("-open");
  } else {
    openCustomAccordion(accordion);
    icon.css("transform", "rotate(180deg)");
    accordion.addClass("-open");
  }
});

function openCustomAccordion(accordion) {
  const container = accordion.find(".--accordion__content-container").eq(0);
  const contentHeight = accordion.find(".--accordion__content").eq(0).outerHeight();

  accordion.addClass("-open");
  container.css("height", `${contentHeight}px`);

  closeSameAccordionGroup(accordion);
}

function closeCustomAccordion(accordion) {
  const container = accordion.find(".--accordion__content-container").eq(0);
  const containerCurrentHeight = container.outerHeight();

  container.css({
    height: `${containerCurrentHeight}px`,
    transition: "unset",
  });

  container.outerHeight(); // Lifehack

  container.css({
    height: "0px",
    transition: "",
  });

  accordion.removeClass("-open");

  closeAccordionChildren(accordion);
}

function closeAccordionChildren(accordion) {
  if (accordion.is("[data-close-children]")) {
    accordion.find(".--accordion").each(function () {
      closeCustomAccordion($(this));
    });
  }
}

function closeSameAccordionGroup(accordion) {
  const groupName = accordion.attr("data-accordion-group");

  if (groupName) {
    $(`.--accordion[data-accordion-group="${groupName}"]`).each(function () {
      if (accordion[0] !== this) {
        closeCustomAccordion($(this));
      }
    });
  }
}

fullTransitionendCallback(
  ".--accordion__content-container",
  function (e) {
    const accordion = $(e.target).closest(".--accordion");
    const isOpen = accordion.hasClass("-open");

    accordion.removeAttr("data-accordion-in-process");

    if (isOpen) {
      $(e.target).css("height", "auto");
    }
  },
  "height"
);

// Anchor link - params

const scrollLinkMinSpeed = 600;
const scrollLinkSpeedValue = 2;

const scrollLinkDefaultOffset = false;
const scrollLinkCustomOffset = 20;

const scrollLinkDefaultOffsetToTop = false;
const scrollLinkCustomOffsetToTop = false;

const scrollLinkDefaultOffsetToBottom = false;
const scrollLinkCustomOffsetToBottom = false;

// Anchor link - logic

$(document).on("click", "a", function (e) {
  const href = $(this).attr("href");
  const to = getElementByHref(href);

  if (to) {
    e.preventDefault();

    const position = getScrollLinkFinalPosition(to);

    if (position === window.scrollY) return;

    const speed = getScrollSpeedByPosition(position);

    $("html, body").animate({ scrollTop: position }, 0);
  }
});

// Anchor link - helpers

function getElementByHref(href) {
  let hash = false;

  if (href.indexOf("#") === 0) {
    hash = href;
  } else {
    const url = new URL(href);

    if (url.host === window.location.host && url.pathname === window.location.pathname) {
      hash = url.hash ? url.hash : false;
    }
  }

  if (hash === "#") {
    hash = false;
  } else {
    hash = $(hash);
  }

  return hash.length ? hash : false;
}

function getScrollLinkDefaultValue(value, hasBg) {
  if (value === false) return false;

  let returnValue = false;

  if (typeof value === "object") {
    let objectKey;

    if (hasBg && typeof value["hasBg"] !== "undefined") {
      objectKey = value["hasBg"];
    } else {
      objectKey = value["default"];
    }

    if (typeof objectKey === "string" || typeof objectKey === "number") {
      returnValue = objectKey;
    } else if (typeof objectKey === "object") {
      Object.keys(objectKey).forEach((key) => {
        if (window.innerWidth > key) {
          returnValue = objectKey[key];
          return false;
        }
      });
    }
  } else {
    returnValue = value;
  }

  return returnValue;
}

function getScrollLinkPositionByParams(to, offsetValue, customOffsetValue) {
  const pageScrollHeight = Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.body.clientHeight,
    document.documentElement.clientHeight
  );

  const maxScrollHeight = pageScrollHeight - window.innerHeight;

  const header = $(".header");
  const marginTop = parseInt(to.css("margin-top"));

  let offset = 0;
  let position = to.offset().top;

  if (offsetValue === "margin") {
    offset += marginTop;
  } else if (offsetValue === "half-margin") {
    offset += marginTop / 2;
  } else if (offsetValue === "header-height") {
    offset += header.length ? header.outerHeight() : 0;
  }

  if (customOffsetValue) {
    offset += customOffsetValue;
  }

  position -= offset;

  if (position < 0) {
    position = 0;
  } else if (position > maxScrollHeight) {
    position = maxScrollHeight;
  }

  return position;
}

function getScrollLinkFinalPosition(to) {
  const hasBg = $(to).hasClass("--has-bg");

  const offsetValue = getScrollLinkDefaultValue(scrollLinkDefaultOffset, hasBg);
  const customOffsetValue = getScrollLinkDefaultValue(scrollLinkCustomOffset, hasBg);

  const offsetValueToTop = getScrollLinkDefaultValue(scrollLinkDefaultOffsetToTop, hasBg);
  const customOffsetValueToTop = getScrollLinkDefaultValue(scrollLinkCustomOffsetToTop, hasBg);

  const offsetValueToBottom = getScrollLinkDefaultValue(scrollLinkDefaultOffsetToBottom, hasBg);
  const customOffsetValueToBottom = getScrollLinkDefaultValue(
    scrollLinkCustomOffsetToBottom,
    hasBg
  );

  let position = getScrollLinkPositionByParams(to, offsetValue, customOffsetValue);

  if (position > window.scrollY && (offsetValueToBottom || customOffsetValueToBottom)) {
    if (offsetValueToBottom === false) {
      position = getScrollLinkPositionByParams(to, offsetValue, customOffsetValueToBottom);
    } else if (customOffsetValueToBottom === false) {
      position = getScrollLinkPositionByParams(to, offsetValueToBottom, customOffsetValue);
    } else {
      position = getScrollLinkPositionByParams(to, offsetValueToBottom, customOffsetValueToBottom);
    }
  }

  if (position < window.scrollY && (offsetValueToTop || customOffsetValueToTop)) {
    if (offsetValueToTop === false) {
      position = getScrollLinkPositionByParams(to, offsetValue, customOffsetValueToTop);
    } else if (customOffsetValueToTop === false) {
      position = getScrollLinkPositionByParams(to, offsetValueToTop, customOffsetValue);
    } else {
      position = getScrollLinkPositionByParams(to, offsetValueToTop, customOffsetValueToTop);
    }
  }

  return position;
}

function getScrollSpeedByPosition(position) {
  let speed = position * (0.001 * scrollLinkSpeedValue) * 100;

  if (speed < scrollLinkMinSpeed) {
    speed = scrollLinkMinSpeed;
  }

  return speed;
}
// Anchors navigation

function updateAnchorNav(e) {
  const scrollHeight = Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.body.clientHeight,
    document.documentElement.clientHeight
  );

  const isResize = e ? e.type.toLowerCase() === "resize" : false;
  const halfViewport = window.scrollY + window.innerHeight / 2;
  const maxScrollPosition = scrollHeight - window.innerHeight;

  $(".--anchors-nav").each(function () {
    const links = $(this).find("a");

    if (links.length === 0) {
      $(this).addClass("-empty");
      return;
    } else {
      $(this).removeClass("-empty");
    }

    let currentElement = false;

    if (window.scrollY === 0) {
      currentElement = links.eq(0);
    } else if (window.scrollY === maxScrollPosition) {
      currentElement = links.eq(links.length - 1);
    } else {
      links.each(function () {
        const href = $(this).attr("href");
        const element = $(href);

        if (element.offset()?.top < halfViewport) {
          currentElement = $(this);
        }
      });
    }

    currentElement = $(currentElement);

    const isCurrentElementActive = currentElement.hasClass("-active");

    if (!isCurrentElementActive || isResize) {
      links.removeClass("-active");
      currentElement.addClass("-active");
      updateAnchorNavLinePosition($(this), currentElement);
    }
  });
}

function getAnchorNavType(nav) {
  let type = nav.data("anchors-nav-type");

  const tabletType = nav.data("anchors-nav-tablet-type");
  const mobileType = nav.data("anchors-nav-mobile-type");

  if (window.isTablet && tabletType) {
    type = tabletType;
  }

  if (window.isMobile && mobileType) {
    type = mobileType;
  }

  return type;
}

function updateAnchorNavLinePosition(nav, element) {
  if (element === false) return;

  const type = getAnchorNavType(nav);
  const line = nav.find(".--anchors-nav__line");

  if (line && type === "horizontal") {
    const elementLeft = element.offset()?.left;
    const elementWidth = element.outerWidth();

    const lineTransform = line.css("transform");
    const lineTransformValueX =
      lineTransform?.indexOf("matrix") !== -1 ? parseInt(lineTransform?.split(",")[4]) : 0;

    const lineLeft = line.offset()?.left - lineTransformValueX;
    const lineTo = elementLeft - lineLeft;

    line.css({
      width: `${elementWidth}px`,
      height: "",
      transform: `translateX(${lineTo}px)`,
    });
  }

  if (line && type === "vertical") {
    const elementTop = element.offset()?.top;
    const elementHeight = element.outerHeight();

    const lineTransform = line.css("transform");
    const lineTransformValueY =
      lineTransform?.indexOf("matrix") !== -1 ? parseInt(lineTransform?.split(",")[5]) : 0;

    const lineTop = line.offset()?.top - lineTransformValueY;
    const lineTo = elementTop - lineTop;

    line.css({
      width: "",
      height: `${elementHeight}px`,
      transform: `translateX(11px) translateY(${lineTo}px)`,
    });
  }
}

function generateAnchorsNav() {
  $(".--anchors-nav__list").each(function () {
    const groupName = $(this).data("anchors-group");
    const htmlTemplate = $(this).data("html-template");
    const searchSelector = $(this).data("search-selector");

    if (!groupName) return;

    let anchorsNavHtml = "";
    const anchors = $(`[data-anchors-group="${groupName}"]`)
      .not(".--anchors-nav__list")
      .find(searchSelector);

    anchors.each(function () {
      const id = $(this).attr("id");

      if (!id) return;

      const dataTitle = $(this).data("title");
      const textContent = $(this).text();
      const title = dataTitle ? dataTitle : textContent;

      anchorsNavHtml += htmlTemplate.replace("[href]", `#${id}`).replace("[title]", title);
    });

    $(this).html(anchorsNavHtml);
  });

  updateAnchorNav();
}

$(document).ready(generateAnchorsNav);
$(window).on("load scroll resize", updateAnchorNav);

// Dropdowns functionality

$(document).on("click", ".--dropdown__value", function () {
  $(this).closest(".--dropdown").toggleClass("-active");
});

$(document).on("click", ".--dropdown__list-item", function () {
  const dropdown = $(this).closest(".--dropdown");

  const valueEl = dropdown.find(".--dropdown__value-text");
  const valueContainer = dropdown.find(".--dropdown__value");

  const text = $(this).text().trim();
  const dataValue = $(this).data("value");

  const value = dataValue ? dataValue : text;

  if (valueEl.length) {
    valueEl.html(value);
  } else {
    valueContainer.html(value);
  }

  dropdown.find("input").attr("value", value);
  dropdown.find(".--dropdown__list-item").removeClass("-active");
  dropdown.addClass("-selected").removeClass("-active");

  $(this).addClass("-active");
});

$(document).on("click", ".--dropdown__clear", function () {
  const dropdown = $(this).closest(".--dropdown");
  const placeholder = dropdown.data("placeholder");

  const valueEl = dropdown.find(".--dropdown__value-text");
  const valueContainer = dropdown.find(".--dropdown__value");

  if (valueEl.length) {
    valueEl.html(placeholder ? placeholder : "");
  } else {
    valueContainer.html(placeholder ? placeholder : "");
  }

  dropdown.find("input").removeAttr("value");
  dropdown.find(".--dropdown__list-item").removeClass("-active");
  dropdown.removeClass("-selected -active");
});

customClickOutsideCallback(".--dropdown.-active", function (e, selector) {
  $(selector).removeClass("-active");
});

function customClickOutsideCallback(selector, callback) {
  $(document).on("mouseup", function (e) {
    const isSelector = $(e.target).is(selector);
    const hasParent = $(e.target).closest(selector).length;

    if (!isSelector && !hasParent && typeof callback === "function") {
      callback(e, selector);
    }
  });
}

// Tabs

$(document).on("click", ".--tabs-container__menu-item", function (e) {
  const index = $(this).index();
  const tabsContainer = $(this).closest(".--tabs-container");

  const menuItems = tabsContainer.find(".--tabs-container__menu-item");
  const tabs = tabsContainer.find(".--tabs-container__item");

  menuItems.removeClass("-active");
  menuItems.eq(index).addClass("-active");

  updateCustomTabLinePosition(tabsContainer);
  updateTabContentHeight(tabsContainer, tabs.eq(index));

  tabs.removeClass("-active");
  tabs.eq(index).addClass("-active");
});

function updateCustomTabLinePosition(tabsContainer) {
  const menu = tabsContainer.find(".--tabs-container__menu");
  const menuLine = tabsContainer.find(".--tabs-container__menu-line");
  const activeMenuItem = tabsContainer.find(".--tabs-container__menu-item.-active");

  if (menuLine.length) {
    const lineWidth = activeMenuItem.outerWidth();
    const linePosition = menu.scrollLeft() + activeMenuItem.position().left;

    menuLine.css({
      width: `${lineWidth}px`,
      transform: `translateX(${linePosition}px)`,
    });
  }
}

function updateTabContentHeight(tabsContainer, nextTab) {
  const hasAutoHeight = tabsContainer.is("[data-auto-height]");
  const animationInProcess = tabsContainer.is("[data-animation-in-process]");

  if (hasAutoHeight) {
    const itemsContainer = tabsContainer.find(".--tabs-container__items-inner");
    const currTabHeight = tabsContainer.find(".--tabs-container__item.-active").outerHeight();
    const nextTabHeight = nextTab.outerHeight();

    if (animationInProcess) {
      itemsContainer.css("height", `${nextTabHeight}px`);
    } else {
      tabsContainer.attr("data-animation-in-process", true);

      itemsContainer.css({
        height: `${currTabHeight}px`,
        transition: "unset",
      });

      itemsContainer.outerWidth(); // Lifehack

      itemsContainer.css({
        height: `${nextTabHeight}px`,
        transition: "",
      });
    }
  }
}

function updateAllCustomTabsLinesPosition() {
  $(".--tabs-container").each(function () {
    updateCustomTabLinePosition($(this));
  });
}

function readyCustomTabs() {
  $(".--tabs-container").each(function () {
    $(this).find(".--tabs-container__menu-item").eq(0).addClass("-active");
    $(this).find(".--tabs-container__item").eq(0).addClass("-active");
  });
}

fullTransitionendCallback(
  ".--tabs-container[data-auto-height] .--tabs-container__items",
  function (e) {
    $(e.target).css("height", "auto");
    $(e.target).closest(".--tabs-container").removeAttr("data-animation-in-process");
  },
  "height"
);

$(document).ready(function () {
  readyCustomTabs();
  updateAllCustomTabsLinesPosition();
});

$(window).on("resize", updateAllCustomTabsLinesPosition);