$(document).ready(function () {
  $("#kirb_plugin_activation_form").submit(function (e) {
    e.preventDefault();
    let form = $(this);
    let name = form.find('input[name="name"]').val();
    let company_name = form.find('input[name="company_name"]').val();
    let email = form.find('input[name="email"]').val();
    let dial_code = form.find('input[name="dial_code"]').val();
    let phone = `${dial_code}-${form
      .find('input[id="temp_phone_kirb_act"]')
      .val()}`;
    let country = form.find('input[name="country"]').val();
    form.find('input[name="phone"]').val(phone);

    let data = {
      name: name,
      company_name: company_name,
      email: email,
      phone: phone,
      country: country,
      website_url: KIRB_PATHS.SITE_URL,
    };

    let isValid = true;
    $(".kirb_err_lbl").remove();
    $.each(data, function (key, value) {
      if (value.length == 0) {
        isValid = false;
        form
          .find(`input[name="${key}"]`)
          .after(
            '<span class="kirb_err_lbl text-required">' +
              '<img src="data:image/svg+xml;utf8,' +
              encodeURIComponent(
                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(0,0,134,1)"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 15V17H13V15H11ZM11 7V13H13V7H11Z"></path></svg>'
              ) +
              '" alt="Error"width="24" height="24" style="margin-right:5px;">' +
              "Required</span>"
          );
      } else if (key == "email") {
        let emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        if (!emailRegex.test(value)) {
          isValid = false;
          form
            .find(`input[name="${key}"]`)
            .after(
              '<span class="kirb_err_lbl text-required">' +
                '<img src="data:image/svg+xml;utf8,' +
                encodeURIComponent(
                  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(0,0,134,1)"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 15V17H13V15H11ZM11 7V13H13V7H11Z"></path></svg>'
                ) +
                '" alt="Error"width="24" height="24" style="margin-right:5px;">' +
                "Invalid</span>"
            );
        }
      } else if (key == "website_url" && !value.startsWith("http")) {
        isValid = false;
        form
          .find(`input[name="${key}"]`)
          .after(
            '<span class="kirb_err_lbl text-required">Invalid website  url</span>'
          );
      } else if (key === "phone") {
        let phoneInput = form.find('input[id="temp_phone_kirb_act"]').val();

        if (phoneInput.length === 0) {
          isValid = false;
          $(".phone-error-container").append(
            '<span class="kirb_err_lbl text-required">' +
              '<img src="data:image/svg+xml;utf8,' +
              encodeURIComponent(
                '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(0,0,134,1)"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 15V17H13V15H11ZM11 7V13H13V7H11Z"></path></svg>'
              ) +
              '" alt="Error" width="24" height="24" style="margin-right:5px;">' +
              "Required</span>"
          );
        }
      } else if (key === "country") {
        if (value.length === 0) {
          form
            .find(`input[name="${key}"]`)
            .after(
              $(".country-error-container").append(
                '<span class="kirb_err_lbl text-required">' +
                  '<img src="data:image/svg+xml;utf8,' +
                  encodeURIComponent(
                    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(0,0,134,1)"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 15V17H13V15H11ZM11 7V13H13V7H11Z"></path></svg>'
                  ) +
                  '" alt="Error"width="24" height="24" style="margin-right:5px;">' +
                  "Required</span>"
              )
            );
        }
      }
    });

    if (!isValid) {
      return;
    }
    // disable the form and submit button
    form.find('button[type="submit"]').attr("disabled", "disabled");

    kirb_activation_sidebar_toggle(false);
    form.unbind("submit").submit();
  });

  $(".kirb_active_form").click(() => {
    kirb_activation_sidebar_toggle(true);
  });

  $("#kirb_activation_form_overlay").click(() => {
    kirb_activation_sidebar_toggle(false);
    closeSliderLang();
  });

  $(".kirb-admin-edit-contact-info-btn, .kirb-activate-plugin-btn, .kirb-open-activation").click(() => {
    kirb_activation_sidebar_toggle(true);
  });

  document.querySelectorAll(".dropdown-number").forEach((dropdown) => {
    const dropdownContent = dropdown.querySelector(".number-dropdown-content");
    const arrowIcon = dropdown.querySelector(".arrowIcon");
    const selectedSpan = dropdown.querySelector(".dropdown-selected");
    const data_id = dropdown.getAttribute("data-id");

    // Toggle the dropdown on click
    dropdown.addEventListener("click", function (e) {
      e.stopPropagation(); // Prevent the event from bubbling up to the window

      let active_element = $(dropdown)
        .find(".number-dropdown-content")
        .find(".active");

      setTimeout(() => {
        $(dropdownContent).scrollTop(
          $(active_element).offset().top -
            $(dropdownContent).offset().top +
            $(dropdownContent).scrollTop()
        );
      }, 50);

      // Close any other open dropdowns
      document
        .querySelectorAll(".number-dropdown-content")
        .forEach((content) => {
          if (content !== dropdownContent) {
            content.classList.remove("show");
          }
        });
      document.querySelectorAll(".arrowIcon").forEach((icon) => {
        if (icon !== arrowIcon) {
          icon.classList.remove("rotate");
        }
      });

      // Toggle the clicked dropdown
      dropdownContent.classList.toggle("show");
      arrowIcon.classList.toggle("rotate");
    });

    // Handle item selection
    dropdown.querySelectorAll(".number-item").forEach((item) => {
      item.addEventListener("click", function (e) {
        e.stopPropagation(); // Prevent the dropdown from toggling back open

        const selectedCode = this.getAttribute("data-code");
        selectedSpan.textContent = selectedCode;

        $(dropdown).find(".number-item").removeClass("active");
        $(this).addClass("active");
        $('#country-search').val('');

        $("#kirb_plugin_activation_form")
          .find(`input[name="${data_id}"]`)
          .val(selectedCode);

        // Close the dropdown after selection
        dropdownContent.classList.remove("show");
        arrowIcon.classList.remove("rotate");

        let idx = $(this).attr("data-idx");
        let dynamic_class = "";
        let related_field_name = "";

        if (data_id == "country") {
          dynamic_class = "kirb_phone_number_dropdown_content";
          related_field_name = "dial_code";
        } else {
          dynamic_class = "kirb_country_dropdown_content";
          related_field_name = "country";
        }

        $(`.${dynamic_class} > div`).removeClass("active");
        $(`.${dynamic_class}`)
          .children(`div[data-idx="${idx}"]`)
          .addClass("active");
        let related_field_content = $(`.${dynamic_class}`)
          .children(`div[data-idx="${idx}"]`)
          .attr("data-code");
        $(`.${dynamic_class.replace("_content", "")}`)
          .find(".dropdown-selected")
          .html(related_field_content);
        $("#kirb_plugin_activation_form")
          .find(`input[name="${related_field_name}"]`)
          .val(related_field_content);
      });
    });
  });

  // Close the dropdown if clicked outside
  window.addEventListener("click", function () {
    document.querySelectorAll(".number-dropdown-content").forEach((content) => {
      content.classList.remove("show");
    });
    document.querySelectorAll(".arrowIcon").forEach((icon) => {
      icon.classList.remove("rotate");
    });
  });

  // Registration Form Country Search Bar
  $("#country-search").on("keydown", function (e) {
    if (e.key === "Enter") {
      e.preventDefault();
    }
  });

  $("#country-search").on("click", function (event) {
    event.stopPropagation();
  });

  // Country Filter Functionality
  $("#country-search").on("keyup", function () {
    let searchTerm = $(this).val().toLowerCase();
    let countryFound = false;
    $("#country-list div").each(function () {
      let countryName = $(this).text().toLowerCase();
      if (countryName.includes(searchTerm)) {
        $(this).show();
        countryFound = true;
      } else {
        $(this).hide();
      }
    });
    // Response body if no country found
    if (!countryFound) {
      $("#kirb-no-results").show();
    } else {
      $("#kirb-no-results").hide();
    }
  });

  $("form#kirb_plugin_activation_form input").on("change", function () {
    $(this).val($(this).val().trim());
  });

  // Pricing Tab Section Dropdown
  $(".plan-dropdown-heading").click(function () {
    const content = $(this).next();
    const arrowIcon = $(this).find(".arrow-icon");

    // Toggle visibility of the content
    if (content.css("display") === "block") {
      $(content).hide(200);
      arrowIcon.removeClass("rotate");
    } else {
      $(content).show(200);
      arrowIcon.addClass("rotate");
    }
  });
});

$('.kirb-input-number').on('input', function(){
  this.value = this.value.replace(/[^0-9]/g, '');
  if($(this).val().length > 15) {
    $(this).val($(this).val().slice(0, 15))
  }
})

// video Play 
const serviceCards = $('.service-card');
  if (serviceCards) {
$(function () {
  const isMobile = /Mobi|Android/i.test(navigator.userAgent);
  
  $('.service-card').each(function () {
    const video = $(this).find('video').get(0);
    if (!video) return;

    if (isMobile) {
      video.muted = true;
      video.playsInline = true;
      video.autoplay = true;
      video.currentTime = 0;
      video.play().catch(() => {});
    } else {
      $(this).hover(
        () => { video.currentTime = 0; video.play(); },
        () => { video.pause(); video.currentTime = 0; video.load(); }
      );
    }
  });
})};