// Activate show more button

$(document).on('click', '.-show-more', function () {
  let newText = $(this).attr('data-change-text');
  let oldText = $(this).find('.text').text();
  $(this).toggleClass('-active');
  $(this).find('.text').text(newText);
  $(this).attr('data-change-text', oldText);
})

$(document).on('click', '.tag:not(.-link)', function () {
  $(this).toggleClass('-active');
})

// Create scrollbar to elements

function createCustomScrollbars() {
  let elementsWithScrollbar = $('.--dropdown .dropdown__list, .checkout-card .info-wrapper');
  if (!elementsWithScrollbar.length) return;

  elementsWithScrollbar.each(function () {
    $(this).overlayScrollbars({
      className: "os-theme-dark",

      scrollbars: {
        clickScrolling: true,
      },
    });
  })
}

$(window).on('load', createCustomScrollbars);

// Checkout cards functionallity

$(document).on('click', '.checkout-card__plus', function () {
  $(this).closest('.checkout-card').toggleClass('-active');
})

$(document).on('click', '.header__dropdown-parent', function () {
  if (!isPc) return;
  lazyload('.header__menu');
  let dropdown = $(this).closest('.header__dropdown');
  if (dropdown.hasClass('-active')) {
    closeHeaderDropdown(dropdown);
  } else {
    openHeaderDropdown(dropdown);
  }
})


customClickOutsideCallback('.header__dropdown.-active', function (e, selector) {
  if (!$('.header__dropdown.-active').length || !isPc) return;
  closeHeaderDropdown($(selector));
});

$(document).on('click', '.header__menu-opener', function () {
  let textWrapper = $(this).find('.text');
  let newText = textWrapper.attr('data-change-text');
  let oldText = textWrapper.text();
  textWrapper.text(newText);
  textWrapper.attr('data-change-text', oldText);

  lazyload('.header__menu');

  if ($('.header').hasClass('-open-menu')) {
    closeMobileMenu();
  } else {
    openMobileMenu();
  }
})


function openHeaderDropdown(dropdown) {
  $('.header').addClass('-open-menu');
  lockScroll();
  dropdown.addClass('-active');
}

function closeHeaderDropdown(dropdown) {
  $('.header').removeClass('-open-menu');
  unlockScroll();
  dropdown.removeClass('-active');
}

function openMobileMenu() {
  $('.header').addClass('-open-menu');
  lockScroll();
}

function closeMobileMenu() {
  $('.header').removeClass('-open-menu');
  unlockScroll();
}

function calculateMenuButtonWidth() {
  if ($('.header').hasClass('-open-menu') && !isPc) return;
  let headerWidth = $('.header__right-wrapper').innerWidth();
  $('.header__right-wrapper').css('width', headerWidth);
}

$(window).on('load resize', calculateMenuButtonWidth);

$(document).on('click', '.header__bg', function () {
  if (isPc) return;
  closeMobileMenu();
})

// fill header after scroll
$(window).on('load scroll', function () {
  if (window.scrollY > 0 && !$('body').hasClass('-scroll-lock')) {
    $('.header').addClass('-scrolled');
  } else {
    $('.header').removeClass('-scrolled');
  }

})


/* use cases slider */

function initUseCasesSlider(container) {
  let useCasesSection = $(container);
  let useCasesSlider = useCasesSection.find('.use-cases__slider .slider');
  let slider = new Swiper(useCasesSlider[0], {
    slidesPerView: 1,
    speed: 700,
    spaceBetween: 20,
    navigation: {
      prevEl: useCasesSection.find('.use-cases__slider .slider-navigation .-prev')[0],
      nextEl: useCasesSection.find('.use-cases__slider .slider-navigation .-next')[0],
    },
    on: {
      init: (swiper) => {
        let totalCountOfSlides = useCasesSection.find('.swiper-slide').length;
        useCasesSection.find('.slider-navigation .current').text('1');
        useCasesSection.find('.slider-navigation .total').text(totalCountOfSlides);
      },
      slideChange: (swiper) => {
        useCasesSection.find('.slider-navigation .current').text(swiper.realIndex + 1);
      }
    },
    breakpoints: {
      1024: {
        allowTouchMove: false,
        spaceBetween: 16,
        navigation: {
          prevEl: useCasesSection.find('.use-cases__content .slider-navigation .-prev')[0],
          nextEl: useCasesSection.find('.use-cases__content .slider-navigation .-next')[0],
        },
      }
    }
  });
}

$(window).on('load', function () {
  if (!$('.use-cases__slider').length) return;

  const useCasesObserver = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      initUseCasesSlider(entries[0].target)
      useCasesObserver.unobserve(entries[0].target);
    }
  }, {
    rootMargin: "100px",
    threshold: 0,
  });


  $('.use-cases').each(function () {
    useCasesObserver.observe(this);
  })
});



/* featured-article__slider */

function initFeaturedArticle(container) {
  let featuredArticleSection = $(container);
  let featuredArticleSliders = featuredArticleSection.find('.featured-article__slider');

  featuredArticleSliders.each(function () {
    let $thisSlider = $(this);
    let sliderContainer = $thisSlider.find('.slider')[0];
    let prevEl = $thisSlider.children('.slider-navigation').children('.arrow.-prev')[0];
    let nextEl = $thisSlider.children('.slider-navigation').children('.arrow.-next')[0];
    let currentSlideEl = $thisSlider.find('.slider-navigation .current');
    let totalSlideEl = $thisSlider.find('.slider-navigation .total');

    let slider = new Swiper(sliderContainer, {
      slidesPerView: 1,
      speed: 700,
      spaceBetween: 16,
      navigation: {
        prevEl: prevEl,
        nextEl: nextEl,
      },
      on: {
        init: function () {
          let totalCountOfSlides = this.slides.length;
          currentSlideEl.text('1');
          totalSlideEl.text(totalCountOfSlides);
          updateSlideClasses(this);
        },
        slideChange: function () {
          currentSlideEl.text(this.activeIndex + 1);
          updateSlideClasses(this);
        }
      },
      breakpoints: {
        1024: {
          slidesPerView: 4,
          spaceBetween: 20,
        },
        500: {
          slidesPerView: 2,
        }
      }
    });

    $thisSlider.data('swiper', slider);
  });
}

function updateSlideClasses(swiper) {
  $(swiper.slides).each((index, slide) => {
    if (index >= swiper.activeIndex && index < swiper.activeIndex + swiper.params.slidesPerView) {
      $(slide).removeClass('-disable');
    } else {
      $(slide).addClass('-disable');
    }
  });
}

$(window).on('load', function () {
  if (!$('.featured-article__slider').length) return;

  const featuredArticleObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        initFeaturedArticle(entry.target);
        featuredArticleObserver.unobserve(entry.target);
      }
    });
  }, {
    rootMargin: "100px",
    threshold: 0,
  });

  $('.featured-article').each(function () {
    featuredArticleObserver.observe(this);
  });
});



/* related-articles__slider */

function initRelatedArticlesSlider(container) {
  let relatedArticlesSection = $(container);
  let relatedArticlesSlider = relatedArticlesSection.find('.related-articles__slider .slider');
  let slider = new Swiper(relatedArticlesSlider[0], {
    slidesPerView: 1,
    speed: 700,
    spaceBetween: 16,
    navigation: {
      prevEl: relatedArticlesSection.find('.related-articles__slider .slider-navigation .-prev')[0],
      nextEl: relatedArticlesSection.find('.related-articles__slider .slider-navigation .-next')[0],
    },
    on: {
      init: (swiper) => {
        let totalCountOfSlides = relatedArticlesSection.find('.swiper-slide').length;
        relatedArticlesSection.find('.slider-navigation .current').text('1');
        relatedArticlesSection.find('.slider-navigation .total').text(totalCountOfSlides);
      },
      slideChange: (swiper) => {
        relatedArticlesSection.find('.slider-navigation .current').text(swiper.realIndex + 1);
      }
    },
    breakpoints: {
      1024: {
        slidesPerView: 3,
        spaceBetween: 20,
      },

      500: {
        slidesPerView: 2,
      }
    }
  });
}

$(window).on('load', function () {
  if (!$('.related-articles__slider').length) return;

  const relatedArticlesObserver = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      initRelatedArticlesSlider(entries[0].target)
      relatedArticlesObserver.unobserve(entries[0].target);
    }
  }, {
    rootMargin: "100px",
    threshold: 0,
  });

  $('.related-articles').each(function () {
    relatedArticlesObserver.observe(this);
  })
});


/* scrolling slider on mob */

function initMobileScrollingSlider(container) {
  let section = $(container);
  let sliderWrapper = section.find('.slider');

  let slider = new Swiper(sliderWrapper[0], {
    slidesPerView: 1,
    speed: 700,
    spaceBetween: 20,
    loop: true,
    pagination: {
      el: sliderWrapper.find('.swiper-pagination')[0],
      type: 'bullets',
      clickable: true,
    },
    breakpoints: {
      760: {
        slidesPerView: 2,
      }
    }
  });
}

$(window).on('load', function () {
  if (!$('.scrolled-slider').length || isPc) return;

  const sliderObserver = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      initMobileScrollingSlider(entries[0].target)
      sliderObserver.unobserve(entries[0].target);
    }
  }, {
    rootMargin: "100px",
    threshold: 0,
  });


  $('.scrolled-slider').each(function () {
    sliderObserver.observe(this);
  })
});


$(window).on('load', function () {
  if (!$('.how-it-work-slider').length || isPc) return;

  const sliderObserver = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      initMobileScrollingSlider(entries[0].target)
      sliderObserver.unobserve(entries[0].target);
    }
  }, {
    rootMargin: "100px",
    threshold: 0,
  });


  $('.how-it-work-slider').each(function () {
    sliderObserver.observe(this);
  })
});

// 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);


// pricing table hover

$(document).on('mouseenter', '.pricing-compare-table__item:not(.-name), .pricing-compare-table__title', function () {
  let index = $(this).closest(".pricing-compare-table__main").length ? $(this).index() - 1 : $(this).index();
  let currentActiveCol = $('.pricing-compare-table__top').find('.pricing-compare-table__title').eq(index);
  let activeHeight = $('.pricing-compare-table__main').innerHeight();

  let tableColsNamesEl = $('.pricing-compare-table__row.-header');

  let calculatedHeight = ($('.pricing-compare-table__main').offset().top + activeHeight) - tableColsNamesEl.offset().top;

  currentActiveCol.find('.bg').css('height', calculatedHeight);
})

$(document).on('mouseleave', '.pricing-compare-table__item:not(.-name), .pricing-compare-table__title', function () {
  let index = $(this).closest(".pricing-compare-table__main").length ? $(this).index() - 1 : $(this).index();
  let currentActiveCol = $('.pricing-compare-table__top').find('.pricing-compare-table__title').eq(index);

  currentActiveCol.find('.bg').css('height', '100%');
})

// set default height for pricing table

$(window).on('load resize', function () {
  if (!$('.pricing-compare-table__main').hasClass('-active')) {
    $('.pricing-compare-table__main').css('height', $('.pricing-compare-table__main-part.-visible').innerHeight());
  }
})

// pricing table show more

$(document).on('click', '.pricing-compare-table .-show-more', function () {
  let tableContainer = $(this).closest('.pricing-compare-table').find(".pricing-compare-table__main");
  tableContainer.toggleClass("-active");

  if (tableContainer.hasClass("-active")) {
    tableContainer.css("height", tableContainer.find('.pricing-compare-table__main-wrapper').innerHeight());
    tableContainer.attr('data-accordion-in-process', true);
  } else {
    tableContainer.attr('data-accordion-in-process', true);
    tableContainer.css("height", tableContainer.innerHeight());
    tableContainer.outerWidth();
    tableContainer.css("height", tableContainer.find('.pricing-compare-table__main-part.-visible').innerHeight());
  }
})

fullTransitionendCallback('.pricing-compare-table__main', function (e) {
  const isOpen = $(e.target).hasClass('-active');
  $(e.target).removeAttr('data-accordion-in-process');

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



//career open work

const positions = [
  {
    title: 'Financial analyst',
    department: 'Finance',
    employmentType: 'Full-time',
    location: 'Remote',
    link: 'job-financial-analyst.html'
  },
  {
    title: 'Account executive',
    department: 'Sales',
    employmentType: 'Full-time',
    location: 'Cyprus',
    link: '#'
  },
  {
    title: 'Front-end developer',
    department: 'Development',
    employmentType: 'Part-time',
    location: 'Remote',
    link: '#'
  },
  {
    title: 'Operations manager',
    department: 'Management',
    employmentType: 'Full-time',
    location: 'Cyprus',
    link: '#'
  },
  {
    title: 'Sales representative',
    department: 'Sales',
    employmentType: 'Part-time',
    location: 'Remote',
    link: '#'
  },
  {
    title: 'Marketing manager',
    department: 'Marketing',
    employmentType: 'Full-time',
    location: 'Remote',
    link: '#'
  },
  {
    title: 'HR specialist',
    department: 'Human Resources',
    employmentType: 'Part-time',
    location: 'Cyprus',
    link: '#'
  },
  {
    title: 'Back-end developer',
    department: 'Development',
    employmentType: 'Full-time',
    location: 'Remote',
    link: '#'
  }
];

document.addEventListener('DOMContentLoaded', function () {
  const tabs = document.querySelectorAll('.tab');
  const positionsContainer = document.querySelector('.open-positions-table__main');
  const showMoreButton = document.querySelector('.open-positions .-show-more');
  const VISIBLE_ITEMS_COUNT = 6;
  let showItems = false
  let visibleItems

  function setContainerHeight() {
    if (!showItems) {
      visibleItems = Array.from(positionsContainer.children).slice(0, VISIBLE_ITEMS_COUNT);
    } else {
      visibleItems = Array.from(positionsContainer.children);
    }
    let totalHeight = 0;
    visibleItems.forEach(item => {
      totalHeight += item.scrollHeight;
    });
    positionsContainer.style.height = `${totalHeight}px`;
  }

  function displayPositions(filteredPositions) {
    positionsContainer.innerHTML = `
          <div class="open-positions-table-row -head">
              <div class="tag-text">Job title</div>
              <div class="tag-text">Department</div>
              <div class="tag-text">Employment type</div>
              <div class="tag-text">Location</div>
              <span class="arrow"></span>
          </div>
      `;

    filteredPositions.forEach((position, index) => {
      const positionElement = document.createElement('a');
      positionElement.href = position.link;
      positionElement.classList.add('open-positions-table-row', 'link', '-hover-arrow');
      positionElement.innerHTML = `
              <h3 class="description-1">${position.title}</h3>
              <div class="article-tag">${position.department}</div>
              <div class="article-tag">${position.employmentType}</div>
              <div class="article-tag">${position.location}</div>
              <span class="arrow"></span>
          `;
      positionsContainer.appendChild(positionElement);

      if (index >= VISIBLE_ITEMS_COUNT) {
        positionElement.classList.add('hidden');
      }
    });

    setContainerHeight();

    if (filteredPositions.length < VISIBLE_ITEMS_COUNT) {
      showMoreButton.classList.add('-hidden');
    } else {
      showMoreButton.classList.remove('-hidden');
    }
  }

  function filterPositions(department) {
    if (department === 'Show all') {
      displayPositions(positions);
    } else {
      const filteredPositions = positions.filter(position => position.department === department);
      displayPositions(filteredPositions);
    }
  }

  if (positionsContainer) {
    displayPositions(positions);

    tabs.forEach(tab => {
      tab.addEventListener('click', function () {
        tabs.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');
        const department = tab.textContent.trim();
        filterPositions(department);
      });
    });

    showMoreButton.addEventListener('click', function () {
      showItems = !showItems
      setContainerHeight();
    });
  }

});


//////////////







window.addEventListener('load', function () {
  if (isPc) {
    const containerHeight = window.innerHeight;
    const stickyBlock = document.querySelector('.how-it-work-text-conainer.-sticky');
    const stickyNeiborBlock = document.querySelector('.how-it-work-slider');

    if (stickyNeiborBlock) {
      const topValue = containerHeight / 2 - stickyNeiborBlock.offsetHeight / 2;
      stickyBlock.style.top = topValue + 'px';
    }
  }
});

$(document).on('click', 'a[href="#"]', function (e) {
  e.preventDefault();
})


document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();

    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});


document.addEventListener("DOMContentLoaded", function () {
  const searchData = {
    topSearches: [
      {
        text: "Billing & Pricing",
        link: "/support.html#featured-articles"
      },
      {
        text: "Authorization",
        link: "#"
      },
      {
        text: "FAQ",
        link: "#"
      },
      {
        text: "General Information",
        link: "#"
      },
      {
        text: "Product information",
        link: "#"
      }
    ],
    forResults: [
      {
        text: "How to use our solutions effectively",
        link: "#"
      },
      {
        text: "How to change your subscription plan",
        link: "#"
      },
      {
        text: "How to choose the best plan for business",
        link: "#"
      },
      {
        text: "How to use analytics and reporting",
        link: "#"
      },
      {
        text: "How to access payment history",
        link: "#"
      },
      {
        text: "How to use our solutions effectively",
        link: "#"
      },
      {
        text: "How to change your subscription plan",
        link: "#"
      },
      {
        text: "How to choose the best plan for business",
        link: "#"
      },
      {
        text: "How to use analytics and reporting",
        link: "#"
      },
      {
        text: "How to access payment history",
        link: "#"
      },
      {
        text: "How to use our solutions effectively",
        link: "#"
      },
      {
        text: "How to change your subscription plan",
        link: "#"
      },
      {
        text: "How to choose the best plan for business",
        link: "#"
      },
      {
        text: "How to use analytics and reporting",
        link: "#"
      },
      {
        text: "How to access payment history",
        link: "#"
      },
      {
        text: "How to use our solutions effectively",
        link: "#"
      },
      {
        text: "How to change your subscription plan",
        link: "#"
      },
      {
        text: "How to choose the best plan for business",
        link: "#"
      },
      {
        text: "How to use analytics and reporting",
        link: "#"
      },
      {
        text: "How to access payment history",
        link: "#"
      },
      {
        text: "How to use our solutions effectively",
        link: "#"
      },
      {
        text: "How to change your subscription plan",
        link: "#"
      },
      {
        text: "How to choose the best plan for business",
        link: "#"
      },
      {
        text: "How to use analytics and reporting",
        link: "#"
      },
      {
        text: "How to access payment history",
        link: "#"
      },
      {
        text: "How to use our solutions effectively",
        link: "#"
      },
      {
        text: "How to change your subscription plan",
        link: "#"
      },
      {
        text: "How to choose the best plan for business",
        link: "#"
      },
      {
        text: "How to use analytics and reporting",
        link: "#"
      },
      {
        text: "How to access payment history",
        link: "#"
      },

    ]
  };

  const searchInput = document.querySelector(".input__wrapper input");
  if (searchInput) {
    const searchInputContainer = searchInput.closest(".input.-search");
    const searchResultsTopList = document.querySelector(".search-results-top__list");
    const searchResultsAnswerList = document.querySelector(".search-results-answer__list");
    const searchResultsTop = document.querySelector(".search-results-top");
    const searchResultsAnswer = document.querySelector(".search-results-answer");

    const html = document.documentElement;
    const body = document.body;
    const cookies = document.querySelector('.cookies');

    searchInput.addEventListener("focus", function () {
      searchInputContainer.classList.add("-activated");
      html.classList.add('-scroll-lock');
      body.classList.add('-scroll-lock');
      cookies.classList.add('-scroll-lock');
    });

    searchInput.addEventListener("blur", function () {
      searchInputContainer.classList.remove("-activated");
      html.classList.remove('-scroll-lock');
      body.classList.remove('-scroll-lock');
      cookies.classList.remove('-scroll-lock');
    });


    displayResults(searchData.topSearches, searchResultsTopList, "tag -link");

    searchInput.addEventListener("input", function (event) {
      const query = event.target.value.trim().toLowerCase();
      let results;
      if (query === "") {
        searchResultsTop.style.display = "block";
        searchResultsAnswer.style.display = "none";
        results = searchData.topSearches;
        displayResults(results, searchResultsTopList, "tag -link");
      } else {
        searchResultsTop.style.display = "none";
        searchResultsAnswer.style.display = "block";
        results = searchData.forResults.filter(item => item.text.toLowerCase().includes(query));
        displayResults(results, searchResultsAnswerList, "link -hover-arrow");
      }
    });

    function displayResults(results, container, classNames) {

      if (!container) {
        return;
      }

      container.innerHTML = "";

      if (results.length === 0) {
        const noResultsItem = document.createElement("li");
        noResultsItem.textContent = "No results found";
        container.appendChild(noResultsItem);
      } else {
        results.forEach(result => {
          const item = document.createElement("li");
          const link = document.createElement("a");
          link.href = result.link;
          link.textContent = result.text;
          link.classList.add(...classNames.split(" "));
          if (classNames.includes("-hover-arrow")) {
            const arrowSpan = document.createElement("span");
            arrowSpan.classList.add("arrow");
            link.appendChild(arrowSpan);
          }
          item.appendChild(link);
          container.appendChild(item);
        });
      }
    }
  }

});



// Blog

const blogData = [
  {
    image: "images/articles/article-1.webp",
    tags: [
      "Products"
    ],
    title: "Set up your checkout with clicks, not code",
    content: "When PayTX set out to fix the checkout, our goal was to dramatically decrease the level of...",
    create_at: "05.02.2024",
    reading_time: "4 min to read",
    url: "blog-article-set-up-your-checkout-with-clicks-not-code.html"
  },
  {
    image: "images/articles/article-2.webp",
    tags: [
      "News"
    ],
    title: "PayTX announces a groundbreaking partnership",
    content: "Discover the latest collaboration that's set to revolutionize the payment industry, enhancing services for users...",
    create_at: "02.02.2024",
    reading_time: "4 min to read",
    url: "#"
  },
  {
    image: "images/articles/article-3.webp",
    tags: [
      "Article"
    ],
    title: "The future of digital payments",
    content: "Explore the evolving landscape of digital payments and how emerging technologies are shaping the way we...",
    create_at: "28.01.2024",
    reading_time: "5 min to read",
    url: "#"
  },
  {
    image: "images/articles/article-4.webp",
    tags: [
      "Events"
    ],
    title: "PayTX at the Global Fintech Conference 2024",
    content: "Get the inside scoop on PayTX's participation and key takeaways from one of the fintech industry's most...",
    create_at: "27.01.2024",
    reading_time: "2 min to read",
    url: "#"
  },
  {
    image: "images/articles/article-5.webp",
    tags: [
      "Payments"
    ],
    title: "Understanding blockchain's impact on payments",
    content: "Delve into how blockchain technology is transforming payment security and efficiency, offering a glimpse into the...",
    create_at: "23.01.2024",
    reading_time: "4 min to read",
    url: "#"
  },

  {
    image: "images/articles/article-6.webp",
    tags: [
      "News"
    ],
    title: "Revolutionizing fintech: PayTX's latest innovation",
    content: "Dive into how PayTX is pushing the boundaries of fintech with cutting-edge technology designed to streamline...",
    create_at: "20.01.2024",
    reading_time: "4 min to read",
    url: "#"
  },
  {
    image: "images/articles/article-7.webp",
    tags: [
      "Article"
    ],
    title: "Securing online transactions: Best practices",
    content: "Learn about the most effective strategies for safeguarding your online financial activities against potential threats...",
    create_at: "18.01.2024",
    reading_time: "5 min to read",
    url: "#"
  },
  {
    image: "images/articles/article-8.webp",
    tags: [
      "Products"
    ],
    title: "Introducing PayTX's new subscription management tool",
    content: "Get a first look at our innovative tool designed to simplify subscription billing, enhancing flexibility for businesses...",
    create_at: "12.01.2024",
    reading_time: "4 min to read",
    url: "#"
  },
  {
    image: "images/articles/article-9.webp",
    tags: [
      "Events"
    ],
    title: "Webinar recap: The evolution of payment gateways",
    content: "In case you missed it, here's a summary of the insights shared during our latest webinar on the advancements in...",
    create_at: "15.01.2024",
    reading_time: "2 min to read",
    url: "#"
  },
  {
    image: "images/articles/article-10.webp",
    tags: [
      "Article"
    ],
    title: "Enhancing customer loyalty through seamless payments",
    content: "Explore the critical role of smooth payment experiences in building and maintaining strong customer...",
    create_at: "10.01.2024",
    reading_time: "3 min to read",
    url: "#"
  },
  {
    image: "images/articles/article-1.webp",
    tags: [
      "Products"
    ],
    title: "Set up your checkout with clicks, not code",
    content: "When PayTX set out to fix the checkout, our goal was to dramatically decrease the level of...",
    create_at: "05.02.2024",
    reading_time: "4 min to read",
    url: "#"
  },
  {
    image: "images/articles/article-2.webp",
    tags: [
      "News"
    ],
    title: "PayTX announces a groundbreaking partnership",
    content: "Discover the latest collaboration that's set to revolutionize the payment industry, enhancing services for users...",
    create_at: "02.02.2024",
    reading_time: "4 min to read",
    url: "#"
  },
  {
    image: "images/articles/article-3.webp",
    tags: [
      "Article"
    ],
    title: "The future of digital payments",
    content: "Explore the evolving landscape of digital payments and how emerging technologies are shaping the way we...",
    create_at: "28.01.2024",
    reading_time: "5 min to read",
    url: "#"
  },

];


document.addEventListener("DOMContentLoaded", function () {
  const postsPerPage = 10;
  let currentPage = 1;
  let currentCategory = 'Show all';

  const tabs = document.querySelectorAll('.--tabs-container__menu-item');
  const container = document.querySelector('.blog-articles-container');

  function displayPosts(page, category) {
    const filteredPosts = blogData.filter(post => {
      if (category === 'Show all') {
        return true;
      } else {
        return post.tags.includes(category);
      }
    });

    const startIndex = (page - 1) * postsPerPage;
    const endIndex = startIndex + postsPerPage;
    const postsToDisplay = filteredPosts.slice(startIndex, endIndex);

    if (!container) {
      return;
    }

    container.innerHTML = '';

    postsToDisplay.forEach((post, index) => {
      const modifier = index === 0 ? '-big' : '-img';
      const postElement = `
                <a href="${post.url}" class="article-preview ${modifier}" data-animate="swim-top">
                    <div class="img">
                        <img src="${post.image}" alt="" />
                    </div>
                    <div class="content">
                        <div class="article-preview__tags">
                            ${post.tags.map(tag => `<div class="article-tag tag-text mob-tag-text">${tag}</div>`).join('')}
                        </div>
                        <p class="title description-2 mob-description-2">${post.title}</p>
                        <p class="text body-2 mob-body-2">${post.content}</p>
                        <div class="article-preview__info tag-text mob-tag-text">
                            <p class="date">${post.create_at}</p>
                            <p class="time">${post.reading_time}</p>
                        </div>
                    </div>
                </a>
            `;
      container.insertAdjacentHTML('beforeend', postElement);
    });
  }

  function scrollToBlogSection() {
    const blogSection = document.querySelector('.blog-articles');
    if (blogSection) {
      const offset = blogSection.offsetTop - 90;
      window.scrollTo({
        top: offset,
        behavior: 'smooth'
      });
    }
  }

  function displayPagination(totalPages) {
    const pagesContainer = document.querySelector('.pagination ul');
    pagesContainer.innerHTML = '';

    for (let i = 1; i <= totalPages; i++) {
      const pageElement = `<li><a href="#" class="page link-text mob-link-text ${i === currentPage ? '-active' : ''}" data-page="${i}">${i}</a></li>`;
      pagesContainer.insertAdjacentHTML('beforeend', pageElement);
    }

    const prevArrow = document.querySelector('.arrow.-prev');
    const nextArrow = document.querySelector('.arrow.-next');

    if (currentPage === 1) {
      prevArrow.classList.add('hidden');
    } else {
      prevArrow.classList.remove('hidden');
    }

    if (currentPage === totalPages) {
      nextArrow.classList.add('hidden');
    } else {
      nextArrow.classList.remove('hidden');
    }
  }

  function addPaginationEventListeners(totalPages) {
    document.querySelector('.pagination ul').addEventListener('click', function (e) {
      if (e.target.classList.contains('page')) {
        e.preventDefault();
        currentPage = parseInt(e.target.dataset.page);
        displayPosts(currentPage, currentCategory);
        displayPagination(totalPages);
        scrollToBlogSection();
      }
    });

    document.querySelector('.arrow.-prev').addEventListener('click', function () {
      if (currentPage > 1) {
        currentPage--;
        displayPosts(currentPage, currentCategory);
        displayPagination(totalPages);
        scrollToBlogSection();
      }
    });

    document.querySelector('.arrow.-next').addEventListener('click', function () {
      if (currentPage < totalPages) {
        currentPage++;
        displayPosts(currentPage, currentCategory);
        displayPagination(totalPages);
        scrollToBlogSection();
      }
    });
  }

  tabs.forEach(tab => {
    tab.addEventListener('click', function () {
      const category = this.textContent.trim();
      currentCategory = category;
      tabs.forEach(tab => tab.classList.remove('-active'));
      this.classList.add('-active');
      currentPage = 1;
      const filteredPosts = blogData.filter(post => {
        if (category === 'Show all') {
          return true;
        } else {
          return post.tags.includes(category);
        }
      });
      const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
      displayPosts(currentPage, currentCategory);
      displayPagination(totalPages);
      scrollToBlogSection();
    });
  });

  if (container) {
    const filteredPosts = blogData.filter(post => {
      if (currentCategory === 'Show all') {
        return true;
      } else {
        return post.tags.includes(currentCategory);
      }
    });
    const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
    displayPosts(currentPage, currentCategory);
    displayPagination(totalPages);
    addPaginationEventListeners(totalPages);
  }

});




// Article shares
const copyButton = document.getElementById('copy-link-button');
const twitterButton = document.getElementById('twitter-share');
const facebookButton = document.getElementById('facebook-share');

if (copyButton) {
  copyButton.addEventListener('click', function () {
    const url = window.location.href;
    navigator.clipboard.writeText(url).then(function () {
      document.getElementById('copy-link-text').textContent = 'Copied';
      setTimeout(function () {
        document.getElementById('copy-link-text').textContent = 'Copy link';
      }, 2000);
    }).catch(function (err) {
      console.error('Error copying link: ', err);
    });
  });
}

if (twitterButton) {
  twitterButton.addEventListener('click', function (event) {
    event.preventDefault();
    const url = window.location.href;
    const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}`;
    window.open(twitterUrl, '_blank');
  });
}

if (facebookButton) {
  facebookButton.addEventListener('click', function (event) {
    event.preventDefault();
    const url = window.location.href;
    const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
    window.open(facebookUrl, '_blank');
  });
}


const togglePassword = document.getElementById('togglePassword');

if (togglePassword) {
  togglePassword.addEventListener('click', function () {
    const passwordInput = document.getElementById('passwordInput');
    const eyeIcon = this.querySelector('.eye-icon');
    const eyeSlashIcon = this.querySelector('.eye-slash-icon');

    if (passwordInput.type === 'password') {
      passwordInput.type = 'text';
      eyeIcon.style.display = 'none';
      eyeSlashIcon.style.display = 'block';
    } else {
      passwordInput.type = 'password';
      eyeIcon.style.display = 'block';
      eyeSlashIcon.style.display = 'none';
    }
  });
}

• [D] lib
• [F] animations.js
  Delete
• [F] custom-solutions.js
  Delete
• [F] script.js
  Delete