import Swiper from "swiper";

function movePartnerContent() {
  const cards = document.querySelectorAll(
    ".partners-carousel-content-loader .dce-posts-wrapper .dce-post-item",
  );
  const target = document.querySelector(".partners-swiper .swiper-wrapper");

  if (target) {
    cards.forEach((card) => {
      target.appendChild(card);
      card.classList.add("swiper-slide");
    });
  }
}

function createPartnerPagination() {
  const paginationCount = document.querySelectorAll(
    ".partners-carousel-content-loader .dce-posts-wrapper .dce-post-item",
  ).length;
  let paginationHtml = "";
  for (let i = 0; i < paginationCount; i++) {
    paginationHtml += `<span class="swiper-pagination-bullet"><div class="display-dot"></div></span>`;
  }

  const target = document.querySelector(".partners-carousel-interactions");
  if (target) {
    target.insertAdjacentHTML(
      "beforeend",
      `<div class="partners-pagination">
            ${paginationHtml}    
        </div>`,
    );
  }
}

function initailisePartnerSwiper() {
  const swiper = new Swiper(".partners-swiper", {
    spaceBetween: 12,
    navigation: {
      nextEl: ".partners-swiper .swiper-button-next",
      prevEl: ".partners-swiper .swiper-button-prev",
    },
    pagination: {
      el: ".partners-pagination",
      clickable: true,
      renderBullet: function (index: number, className: string) {
        return (
          '<span class="' + className + '"><div class="display-dot"></div></span>'
        );
      },
    },
    breakpoints: {
      768: {
        slidesPerView: 2,
      },
      1024: {
        slidesPerView: "auto",
      },
    },
  });
}

function modifyCardContent() {
  const cards = document.querySelectorAll(".partners-swiper .swiper-slide");
  cards.forEach((card) => {
    const content = card.querySelector(".location-container");
    if (content && content.children.length == 1) {
      const label = card.querySelector(".location-label .elementor-heading-title");
      if (label) {
        label.textContent = label.textContent + " only";
      }
    } else if (content && content.children.length > 1) {
      const labels = card.querySelectorAll(".location-container >div");
      for (const child of labels) {
        child.insertAdjacentHTML(
          "afterend",
          '<svg class="seperator-dot" xmlns="http://www.w3.org/2000/svg" width="2" height="2" viewBox="0 0 2 2" fill="none"><circle cx="1" cy="1" r="1" fill="currentColor"/></svg>',
        );
      }
    }
  });
}

function waitForSwiper(method: () => void) {
  if (typeof Swiper !== "undefined") {
    method();
  } else {
    const checkInterval = setInterval(() => {
      if (typeof Swiper !== "undefined") {
        clearInterval(checkInterval);
        method();
      }
    }, 100);
  }
}

document.addEventListener("DOMContentLoaded", async () => {
  waitForSwiper(() => {
    createPartnerPagination();
    movePartnerContent();
    initailisePartnerSwiper();
    modifyCardContent();
  });
});

<script>
  (() => {
    document.addEventListener("DOMContentLoaded", () => {
      // display only the last interest free
      document
        .querySelectorAll(
          ".partners-tiles .partners-tiles__interest-free .ck-partner__description-item .elementor-heading-title",
        )
        .forEach((element) => {
          const hasSpan = element.querySelectorAll("span").length;
          if (hasSpan > 0) {
            element.querySelectorAll("span").forEach((span, index) => {
              if (index < hasSpan - 1) {
                span.style.display = "none";
              }
            });

            // wrap the last span in a text
            const defaultText = "Up to [xx] interest-free";
            const lastSpan = element.querySelector("span:last-child");
            const interestFree = lastSpan.textContent.toLowerCase().trim();
            if (interestFree.indexOf("month") !== -1 && /\d/.test(interestFree)) {
              const text = defaultText.replace("[xx]", interestFree);
              lastSpan.textContent = text;
            }
          }
        });

      // Add class to parent and child elements to display the bullet point
      document
        .querySelectorAll(
          ".partners-tiles .ck-partner__description-item .elementor-heading-title",
        )
        .forEach((element) => {
          const hasSpan = element.querySelectorAll("span").length;
          if (hasSpan > 0) {
            element.classList.add("ck-partner__description-item-child-icon");
          } else {
            element.classList.add("ck-partner__description-item-parent-icon");
          }
        });

      // count how many offers are displayed and update the count
      let totalOffers = 0;
      document
        .querySelectorAll(".partners-offer-body .partners-offer-tile")
        .forEach((element) => {
          totalOffers++;
        });
      const countElement = document.querySelectorAll(
        ".partners-description__count-offers .elementor-heading-title",
      );
      if (countElement.length > 0) {
        let countText = countElement[0].textContent.trim();
        countText = countText
          .replace("[X]", totalOffers)
          .replace("[x]", totalOffers);
        if (totalOffers === 1) {
          countText = countText.replace("offers", "offer");
        }
        countElement[0].textContent = countText;
      }

      // add the min spent to the description of each offer
      const minSpent = document.querySelector(
        ".partners-tiles__min-spend .ck-partner__description-item .elementor-heading-title",
      );
      const description = document.querySelectorAll(
        ".partners-offer-body .partners-offer-tile .partners-offer-tile__body",
      );
      if (minSpent) {
        let minSpentText = minSpent.textContent.trim().toLowerCase();
        if (minSpentText.includes("$") || minSpentText.match(/\d+/)) {
          description.forEach((desc) => {
            desc.textContent =
              desc.textContent + " Min spend " + minSpent.textContent + ".";
          });
        }
      }

      // add payment holiday badge
      const isPaymetnHoliday = document.querySelector(
        ".ck-partner-description__payment-holiday",
      );
      if (isPaymetnHoliday) {
        const paymentHolidayText = isPaymetnHoliday.textContent.trim();
        const offersTitle = document.querySelectorAll(
          ".partners-offer-body .partners-offer-tile .partners-offer-tile__title",
        );
        offersTitle.forEach((title) => {
          const offerText = title.textContent.trim();
          if (offerText === paymentHolidayText) {
            const badge = document.createElement("span");
            badge.className = "partners-badge";
            badge.textContent = "Payment Holiday";
            title.appendChild(badge);
          }
        });
      }
    });
  })();
</script>