/*
 *  Document   : helpers.js
 *  Author     : pixelcave
 *  Description: Various helpers for plugin inits or helper functionality
 *
 */

// Helper variables
let jqSparklineResize = false;
let jqSparklineTimeout;

// Helpers
export default class Helpers {
  /*
   * Run helpers
   *
   */
  static run(helpers, options = {}) {
    let helperList = {
      // Bootstrap
      "bs-tooltip": () => this.bsTooltip(),
      "bs-popover": () => this.bsPopover(),

      // Dashmix
      "dm-toggle-class": () => this.dmToggleClass(),
      "dm-year-copy": () => this.dmYearCopy(),
      "dm-ripple": () => this.dmRipple(),
      "dm-print": () => this.dmPrint(),
      "dm-table-tools-sections": () => this.dmTableToolsSections(),
      "dm-table-tools-checkable": () => this.dmTableToolsCheckable(),

      // JavaScript
      "js-ckeditor5": () => this.jsCkeditor5(),
      "js-simplemde": () => this.jsSimpleMDE(),
      "js-highlightjs": () => this.jsHighlightjs(),
      "js-flatpickr": () => this.jsFlatpickr(),

      // jQuery
      "jq-appear": () => this.jqAppear(),
      "jq-magnific-popup": () => this.jqMagnific(),
      "jq-slick": () => this.jqSlick(),
      "jq-datepicker": () => this.jqDatepicker(),
      "jq-masked-inputs": () => this.jqMaskedInputs(),
      "jq-select2": () => this.jqSelect2(),
      "jq-notify": (options) => this.jqNotify(options),
      "jq-easy-pie-chart": () => this.jqEasyPieChart(),
      "jq-maxlength": () => this.jqMaxlength(),
      "jq-rangeslider": () => this.jqRangeslider(),
      "jq-pw-strength": () => this.jqPwStrength(),
      "jq-sparkline": () => this.jqSparkline(),
      "jq-validation": () => this.jqValidation(),
    };

    if (helpers instanceof Array) {
      for (let index in helpers) {
        if (helperList[helpers[index]]) {
          helperList[helpers[index]](options);
        }
      }
    } else {
      if (helperList[helpers]) {
        helperList[helpers](options);
      }
    }
  }

  /*
   ********************************************************************************************
   *
   * Init helpers for Bootstrap plugins
   *
   *********************************************************************************************
   */

  /*
   * Bootstrap Tooltip, for more examples you can check out https://getbootstrap.com/docs/5.3/components/tooltips/
   *
   * Helpers.run('bs-tooltip');
   *
   * Example usage:
   *
   * <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Tooltip Text">Example</button> or
   * <button type="button" class="btn btn-primary js-bs-tooltip" title="Tooltip Text">Example</button>
   *
   */
  static bsTooltip() {
    let elements = [].slice.call(
      document.querySelectorAll(
        '[data-bs-toggle="tooltip"]:not(.js-bs-tooltip-enabled), .js-bs-tooltip:not(.js-bs-tooltip-enabled)'
      )
    );

    window.helperBsTooltips = elements.map((el) => {
      // Add .js-bs-tooltip-enabled class to tag it as activated
      el.classList.add("js-bs-tooltip-enabled");

      // Init Bootstrap Tooltip
      return new bootstrap.Tooltip(el, {
        container: el.dataset.bsContainer || "#page-container",
        animation:
          el.dataset.bsAnimation &&
          el.dataset.bsAnimation.toLowerCase() == "true"
            ? true
            : false,
      });
    });
  }

  /*
   * Bootstrap Popover, for more examples you can check out https://getbootstrap.com/docs/5.3/components/popovers/
   *
   * Helpers.run('bs-popover');
   *
   * Example usage:
   *
   * <button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Title" data-bs-content="This is the content of the Popover">Example</button> or
   * <button type="button" class="btn btn-primary js-bs-popover" title="Popover Title" data-bs-content="This is the content of the Popover">Example</button>
   *
   */
  static bsPopover() {
    let elements = [].slice.call(
      document.querySelectorAll(
        '[data-bs-toggle="popover"]:not(.js-bs-popover-enabled), .js-bs-popover:not(.js-bs-popover-enabled)'
      )
    );

    window.helperBsPopovers = elements.map((el) => {
      // Add .js-bs-popover-enabled class to tag it as activated
      el.classList.add("js-bs-popover-enabled");

      // Init Bootstrap Popover
      return new bootstrap.Popover(el, {
        container: el.dataset.bsContainer || "#page-container",
        animation:
          el.dataset.bsAnimation &&
          el.dataset.bsAnimation.toLowerCase() == "true"
            ? true
            : false,
        trigger: el.dataset.bsTrigger || "hover focus",
      });
    });
  }

  /*
   ********************************************************************************************
   *
   * JS helpers to add custom functionality
   *
   *********************************************************************************************
   */

  /*
   * Toggle class on element click
   *
   * Helpers.run('dm-toggle-class');
   *
   * Example usage (on button click, "exampleClass" class is toggled on the element with id "elementID"):
   *
   * <button type="button" class="btn btn-primary" data-toggle="class-toggle" data-target="#elementID" data-class="exampleClass">Toggle</button>
   *
   * or
   *
   * <button type="button" class="btn btn-primary js-class-toggle" data-target="#elementID" data-class="exampleClass">Toggle</button>
   *
   */
  static dmToggleClass() {
    let elements = document.querySelectorAll(
      '[data-toggle="class-toggle"]:not(.js-class-toggle-enabled), .js-class-toggle:not(.js-class-toggle-enabled)'
    );

    elements.forEach((el) => {
      el.addEventListener("click", () => {
        // Add .js-class-toggle-enabled class to tag it as activated
        el.classList.add("js-class-toggle-enabled");

        // Get all classes
        let cssClasses = el.dataset.class ? el.dataset.class.split(" ") : false;

        // Toggle class on target elements
        document.querySelectorAll(el.dataset.target).forEach((targetEl) => {
          if (cssClasses) {
            cssClasses.forEach((cls) => {
              targetEl.classList.toggle(cls);
            });
          }
        });
      });
    });
  }

  /*
   * Add the correct copyright year to an element
   *
   * Helpers.run('dm-year-copy');
   *
   * Example usage (it will get populated with current year if empty or will append it to specified year if needed):
   *
   * <span data-toggle="year-copy"></span> or
   * <span data-toggle="year-copy">2018</span>
   *
   */
  static dmYearCopy() {
    let elements = document.querySelectorAll(
      '[data-toggle="year-copy"]:not(.js-year-copy-enabled)'
    );

    elements.forEach((el) => {
      let date = new Date();
      let currentYear = date.getFullYear();
      let baseYear = el.textContent || currentYear;

      // Add .js-year-copy-enabled class to tag it as activated
      el.classList.add("js-year-copy-enabled");

      // Set the correct year
      el.textContent =
        parseInt(baseYear) >= currentYear
          ? currentYear
          : baseYear + "-" + currentYear.toString().substr(2, 2);
    });
  }

  /*
   * Ripple effect fuctionality
   *
   * Helpers.run('dm-ripple');
   *
   * Example usage:
   *
   * <button type="button" class="btn btn-primary" data-toggle="click-ripple">Click Me!</button>
   *
   */
  static dmRipple() {
    let elements = document.querySelectorAll(
      '[data-toggle="click-ripple"]:not(.js-click-ripple-enabled)'
    );

    elements.forEach((el) => {
      // Add .js-click-ripple-enabled class to tag it as activated and init it
      el.classList.add("js-click-ripple-enabled");

      // Add custom CSS styles
      el.style.overflow = "hidden";
      el.style.position = "relative";
      el.style.zIndex = 1;

      // On click create and render the ripple
      el.addEventListener("click", (e) => {
        let cssClass = "click-ripple";
        let ripple = el.querySelector("." + cssClass);
        let d, x, y;

        // If the ripple element exists in this element, remove .animate class from ripple element..
        if (ripple) {
          ripple.classList.remove("animate");
        } else {
          // ..else add it
          let elChild = document.createElement("span");

          elChild.classList.add(cssClass);
          el.insertBefore(elChild, el.firstChild);
        }

        // Get the ripple element
        ripple = el.querySelector("." + cssClass);

        // If the ripple element doesn't have dimensions, set them accordingly
        if (
          getComputedStyle(ripple).height === "0px" ||
          getComputedStyle(ripple).width === "0px"
        ) {
          d = Math.max(el.offsetWidth, el.offsetHeight);

          ripple.style.height = d + "px";
          ripple.style.width = d + "px";
        }

        // Get coordinates for our ripple element
        x =
          e.pageX -
          (el.getBoundingClientRect().left + window.scrollX) -
          parseFloat(getComputedStyle(ripple).width.replace("px", "")) / 2;
        y =
          e.pageY -
          (el.getBoundingClientRect().top + window.scrollY) -
          parseFloat(getComputedStyle(ripple).height.replace("px", "")) / 2;

        // Position the ripple element and add the class .animate to it
        ripple.style.top = y + "px";
        ripple.style.left = x + "px";
        ripple.classList.add("animate");
      });
    });
  }

  /*
   * Print Page functionality
   *
   * Helpers.run('dm-print');
   *
   */
  static dmPrint() {
    // Store all #page-container classes
    let lPage = document.getElementById("page-container");
    let pageCls = lPage.className;

    console.log(pageCls);

    // Remove all classes from #page-container
    lPage.classList = "";

    // Print the page
    window.print();

    // Restore all #page-container classes
    lPage.classList = pageCls;
  }

  /*
   * Table sections functionality
   *
   * Helpers.run('dm-table-tools-sections');
   *
   * Example usage:
   *
   * Please check out the Table Helpers page for complete markup examples
   *
   */
  static dmTableToolsSections() {
    let tables = document.querySelectorAll(
      ".js-table-sections:not(.js-table-sections-enabled)"
    );

    tables.forEach((table) => {
      // Add .js-table-sections-enabled class to tag it as activated
      table.classList.add("js-table-sections-enabled");

      // When a row is clicked in tbody.js-table-sections-header
      table.querySelectorAll(".js-table-sections-header > tr").forEach((tr) => {
        tr.addEventListener("click", (e) => {
          if (
            e.target.type !== "checkbox" &&
            e.target.type !== "button" &&
            e.target.tagName.toLowerCase() !== "a" &&
            e.target.parentNode.nodeName.toLowerCase() !== "a" &&
            e.target.parentNode.nodeName.toLowerCase() !== "button" &&
            e.target.parentNode.nodeName.toLowerCase() !== "label" &&
            !e.target.parentNode.classList.contains("custom-control")
          ) {
            let tbody = tr.parentNode;
            let tbodyAll = table.querySelectorAll("tbody");

            if (!tbody.classList.contains("show")) {
              if (tbodyAll) {
                tbodyAll.forEach((tbodyEl) => {
                  tbodyEl.classList.remove("show");
                  tbodyEl.classList.remove("table-active");
                });
              }
            }

            tbody.classList.toggle("show");
            tbody.classList.toggle("table-active");
          }
        });
      });
    });
  }

  /*
   * Checkable table functionality
   *
   * Helpers.run('dm-table-tools-checkable');
   *
   * Example usage:
   *
   * Please check out the Table Helpers page for complete markup examples
   *
   */
  static dmTableToolsCheckable() {
    let tables = document.querySelectorAll(
      ".js-table-checkable:not(.js-table-checkable-enabled)"
    );

    tables.forEach((table) => {
      // Add .js-table-checkable-enabled class to tag it as activated
      table.classList.add("js-table-checkable-enabled");

      // When a checkbox is clicked in thead
      table
        .querySelector("thead input[type=checkbox]")
        .addEventListener("click", (e) => {
          // Check or uncheck all checkboxes in tbody
          table
            .querySelectorAll("tbody input[type=checkbox]")
            .forEach((checkbox) => {
              checkbox.checked = e.currentTarget.checked;

              // Update Row classes
              this.tableToolscheckRow(checkbox, e.currentTarget.checked);
            });
        });

      // When a checkbox is clicked in tbody
      table
        .querySelectorAll("tbody input[type=checkbox], tbody input + label")
        .forEach((checkbox) => {
          checkbox.addEventListener("click", (e) => {
            let checkboxHead = table.querySelector(
              "thead input[type=checkbox]"
            );

            // Adjust checkbox in thead
            if (!checkbox.checked) {
              checkboxHead.checked = false;
            } else {
              if (
                table.querySelectorAll("tbody input[type=checkbox]:checked")
                  .length ===
                table.querySelectorAll("tbody input[type=checkbox]").length
              ) {
                checkboxHead.checked = true;
              }
            }

            // Update Row classes
            this.tableToolscheckRow(checkbox, checkbox.checked);
          });
        });

      // When a row is clicked in tbody
      table.querySelectorAll("tbody > tr").forEach((tr) => {
        tr.addEventListener("click", (e) => {
          if (
            e.target.type !== "checkbox" &&
            e.target.type !== "button" &&
            e.target.tagName.toLowerCase() !== "a" &&
            e.target.parentNode.nodeName.toLowerCase() !== "a" &&
            e.target.parentNode.nodeName.toLowerCase() !== "button" &&
            e.target.parentNode.nodeName.toLowerCase() !== "label" &&
            !e.target.parentNode.classList.contains("custom-control")
          ) {
            let checkboxHead = table.querySelector(
              "thead input[type=checkbox]"
            );
            let checkbox = e.currentTarget.querySelector(
              "input[type=checkbox]"
            );

            // Update row's checkbox status
            checkbox.checked = !checkbox.checked;

            // Update Row classes
            this.tableToolscheckRow(checkbox, checkbox.checked);

            // Adjust checkbox in thead
            if (!checkbox.checked) {
              checkboxHead.checked = false;
            } else {
              if (
                table.querySelectorAll("tbody input[type=checkbox]:checked")
                  .length ===
                table.querySelectorAll("tbody input[type=checkbox]").length
              ) {
                checkboxHead.checked = true;
              }
            }
          }
        });
      });
    });
  }

  // Checkable table functionality helper - Checks or unchecks table row
  static tableToolscheckRow(checkbox, checkedStatus) {
    if (checkedStatus) {
      checkbox.closest("tr").classList.add("table-active");
    } else {
      checkbox.closest("tr").classList.remove("table-active");
    }
  }

  /*
   ********************************************************************************************
   *
   * Init helpers for pure JS libraries
   *
   ********************************************************************************************
   */

  /*
   * CKEditor 5 init, for more examples you can check out http://ckeditor.com/
   *
   * Helpers.run('js-ckeditor5');
   *
   * Example usage:
   *
   * <div id="js-ckeditor5-classic">Hello classic CKEditor 5!</div>
   * ..or..
   * <div id="js-ckeditor5-inline">Hello inline CKEditor 5!</div>
   *
   */
  static jsCkeditor5() {
    let ckeditor5Inline = document.querySelector("#js-ckeditor5-inline");
    let ckeditor5Full = document.querySelector("#js-ckeditor5-classic");

    // Init inline text editor
    if (ckeditor5Inline) {
      InlineEditor.create(document.querySelector("#js-ckeditor5-inline"))
        .then((editor) => {
          window.editor = editor;
        })
        .catch((error) => {
          console.error(
            "There was a problem initializing the inline editor.",
            error
          );
        });
    }

    // Init full text editor
    if (ckeditor5Full) {
      ClassicEditor.create(document.querySelector("#js-ckeditor5-classic"))
        .then((editor) => {
          window.editor = editor;
        })
        .catch((error) => {
          console.error(
            "There was a problem initializing the classic editor.",
            error
          );
        });
    }
  }

  /*
   * SimpleMDE init, for more examples you can check out https://github.com/NextStepWebs/simplemde-markdown-editor
   *
   * Helpers.run('js-simplemde');
   *
   * Example usage:
   *
   * <textarea class="js-simplemde" id="simplemde" name="simplemde">Hello SimpleMDE!</textarea>
   *
   */
  static jsSimpleMDE() {
    let elements = document.querySelectorAll(".js-simplemde");

    elements.forEach((el) => {
      // Init editor
      new SimpleMDE({ element: el, autoDownloadFontAwesome: false });
    });

    // Fix: Change SimpleMDE's Font Awesome 4 Icons with Font Awesome 6
    if (elements) {
      document
        .querySelector(".editor-toolbar > a.fa-header")
        .classList.replace("fa-header", "fa-heading");
      document
        .querySelector(".editor-toolbar > a.fa-picture-o")
        .classList.replace("fa-picture-o", "fa-image");
    }
  }

  /*
   * Highlight.js, for more examples you can check out https://highlightjs.org/usage/
   *
   * Helpers.run('js-highlightjs');
   *
   * Example usage:
   *
   * Please check out the Syntax Highlighting page in Components for complete markup examples
   *
   */
  static jsHighlightjs() {
    // Init Highlight.js
    if (!hljs.isHighlighted) {
      hljs.initHighlighting();
    }
  }

  /*
   * Flatpickr init, for more examples you can check out https://github.com/flatpickr/flatpickr
   *
   * Helpers.run('js-flatpickr');
   *
   * Example usage:
   *
   * <input type="text" class="js-flatpickr form-control">
   *
   */
  static jsFlatpickr() {
    let elements = document.querySelectorAll(
      ".js-flatpickr:not(.js-flatpickr-enabled)"
    );

    elements.forEach((el) => {
      // Add .js-flatpickr-enabled class to tag it as activated
      el.classList.add("js-flatpickr-enabled");

      // Init it
      flatpickr(el);
    });
  }

  /*
   ********************************************************************************************
   *
   * Init helpers for jQuery plugins
   *
   ********************************************************************************************
   */

  /*
   * jQuery Appear, for more examples you can check out https://github.com/bas2k/jquery.appear
   *
   * Helpers.run('jq-appear');
   *
   * Example usage (the following div will appear on scrolling, remember to add the invisible class):
   *
   * <div class="invisible" data-toggle="appear">...</div>
   *
   */
  static jqAppear() {
    // Add a specific class on elements (when they become visible on scrolling)
    jQuery('[data-toggle="appear"]:not(.js-appear-enabled)').each(
      (index, element) => {
        let windowW =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        let el = jQuery(element);
        let elCssClass = el.data("class") || "animated fadeIn";
        let elOffset = el.data("offset") || 0;
        let elTimeout =
          windowW < 992 ? 0 : el.data("timeout") ? el.data("timeout") : 0;

        // Add .js-appear-enabled class to tag it as activated and init it
        el.addClass("js-appear-enabled").appear(
          () => {
            setTimeout(() => {
              el.removeClass("invisible").addClass(elCssClass);
            }, elTimeout);
          },
          { accY: elOffset }
        );
      }
    );
  }

  /*
   * Magnific Popup functionality, for more examples you can check out http://dimsemenov.com/plugins/magnific-popup/
   *
   * Helpers.run('jq-magnific-popup');
   *
   * Example usage:
   *
   * Please check out the Gallery page in Components for complete markup examples
   *
   */
  static jqMagnific() {
    // Gallery init
    jQuery(".js-gallery:not(.js-gallery-enabled)").each((index, element) => {
      // Add .js-gallery-enabled class to tag it as activated and init it
      jQuery(element)
        .addClass("js-gallery-enabled")
        .magnificPopup({
          delegate: "a.img-lightbox",
          type: "image",
          gallery: {
            enabled: true,
          },
        });
    });
  }

  /*
   * Slick init, for more examples you can check out http://kenwheeler.github.io/slick/
   *
   * Helpers.run('jq-slick');
   *
   * Example usage:
   *
   * <div class="js-slider">
   *   <div>Slide #1</div>
   *   <div>Slide #2</div>
   *   <div>Slide #3</div>
   * </div>
   *
   */
  static jqSlick() {
    // Get each slider element (with .js-slider class)
    jQuery(".js-slider:not(.js-slider-enabled)").each((index, element) => {
      let el = jQuery(element);

      // Add .js-slider-enabled class to tag it as activated and init it
      el.addClass("js-slider-enabled").slick({
        arrows: el.data("arrows") || false,
        dots: el.data("dots") || false,
        slidesToShow: el.data("slides-to-show") || 1,
        centerMode: el.data("center-mode") || false,
        autoplay: el.data("autoplay") || false,
        autoplaySpeed: el.data("autoplay-speed") || 3000,
        infinite:
          typeof el.data("infinite") === "undefined"
            ? true
            : el.data("infinite"),
      });
    });
  }

  /*
   * Bootstrap Datepicker init, for more examples you can check out https://github.com/eternicode/bootstrap-datepicker
   *
   * Helpers.run('jq-datepicker');
   *
   * Example usage:
   *
   * <input type="text" class="js-datepicker form-control">
   *
   */
  static jqDatepicker() {
    // Init datepicker (with .js-datepicker and .input-daterange class)
    jQuery(".js-datepicker:not(.js-datepicker-enabled)")
      .add(".input-daterange:not(.js-datepicker-enabled)")
      .each((index, element) => {
        let el = jQuery(element);

        // Add .js-datepicker-enabled class to tag it as activated and init it
        el.addClass("js-datepicker-enabled").datepicker({
          weekStart: el.data("week-start") || 0,
          autoclose: el.data("autoclose") || false,
          todayHighlight: el.data("today-highlight") || false,
          startDate: el.data("start-date") || false,
          container: el.data("container") || "#page-container",
          orientation: "bottom", // Position issue when using BS5, set it to bottom until officially supported
        });
      });
  }

  /*
   * Masked Inputs, for more examples you can check out https://github.com/digitalBush/jquery.maskedinput
   *
   * Helpers.run('jq-masked-inputs');
   *
   * Example usage:
   *
   * Please check out the Form plugins page for complete markup examples
   *
   */
  static jqMaskedInputs() {
    // Init Masked Inputs
    // a - Represents an alpha character (A-Z,a-z)
    // 9 - Represents a numeric character (0-9)
    // * - Represents an alphanumeric character (A-Z,a-z,0-9)
    jQuery(".js-masked-date:not(.js-masked-enabled)").mask("99/99/9999");
    jQuery(".js-masked-date-dash:not(.js-masked-enabled)").mask("99-99-9999");
    jQuery(".js-masked-phone:not(.js-masked-enabled)").mask("(999) 999-9999");
    jQuery(".js-masked-phone-ext:not(.js-masked-enabled)").mask(
      "(999) 999-9999? x99999"
    );
    jQuery(".js-masked-taxid:not(.js-masked-enabled)").mask("99-9999999");
    jQuery(".js-masked-ssn:not(.js-masked-enabled)").mask("999-99-9999");
    jQuery(".js-masked-pkey:not(.js-masked-enabled)").mask("a*-999-a999");
    jQuery(".js-masked-time:not(.js-masked-enabled)").mask("99:99");

    jQuery(".js-masked-date")
      .add(".js-masked-date-dash")
      .add(".js-masked-phone")
      .add(".js-masked-phone-ext")
      .add(".js-masked-taxid")
      .add(".js-masked-ssn")
      .add(".js-masked-pkey")
      .add(".js-masked-time")
      .addClass("js-masked-enabled");
  }

  /*
   * Select2, for more examples you can check out https://github.com/select2/select2
   *
   * Helpers.run('jq-select2');
   *
   * Example usage:
   *
   * <select class="js-select2 form-control" style="width: 100%;" data-placeholder="Choose one..">
   *   <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
   *   <option value="1">HTML</option>
   *   <option value="2">CSS</option>
   *   <option value="3">Javascript</option>
   * </select>
   *
   */
  static jqSelect2() {
    // Init Select2 (with .js-select2 class)
    jQuery(".js-select2:not(.js-select2-enabled)").each((index, element) => {
      let el = jQuery(element);

      // Add .js-select2-enabled class to tag it as activated and init it
      el.addClass("js-select2-enabled").select2({
        placeholder: el.data("placeholder") || false,
        dropdownParent: document.querySelector(
          el.data("container") || "#page-container"
        ),
      });
    });
  }

  /*
   * Bootstrap Notify, for more examples you can check out http://bootstrap-growl.remabledesigns.com/
   *
   * Helpers.run('jq-notify');
   *
   * Example usage:
   *
   * Please check out the Notifications page for examples
   *
   */
  static jqNotify(options = {}) {
    if (jQuery.isEmptyObject(options)) {
      // Init notifications (with .js-notify class)
      jQuery(".js-notify:not(.js-notify-enabled)").each((index, element) => {
        // Add .js-notify-enabled class to tag it as activated and init it
        jQuery(element)
          .addClass("js-notify-enabled")
          .on("click.pixelcave.helpers", (e) => {
            let el = jQuery(e.currentTarget);

            // Create notification
            jQuery.notify(
              {
                icon: el.data("icon") || "",
                message: el.data("message"),
                url: el.data("url") || "",
              },
              {
                element: "body",
                type: el.data("type") || "info",
                placement: {
                  from: el.data("from") || "top",
                  align: el.data("align") || "right",
                },
                allow_dismiss: true,
                newest_on_top: true,
                showProgressbar: false,
                offset: 20,
                spacing: 10,
                z_index: 1033,
                delay: 5000,
                timer: 1000,
                animate: {
                  enter: "animated fadeIn",
                  exit: "animated fadeOutDown",
                },
                template: `<div data-notify="container" class="col-11 col-sm-4 alert alert-{0} alert-dismissible" role="alert">
  <p class="mb-0">
    <span data-notify="icon"></span>
    <span data-notify="title">{1}</span>
    <span data-notify="message">{2}</span>
  </p>
  <div class="progress" data-notify="progressbar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-{0}" style="width: 0%;"></div>
  </div>
  <a href="{3}" target="{4}" data-notify="url"></a>
  <a class="p-2 m-1 text-dark" href="javascript:void(0)" aria-label="Close" data-notify="dismiss">
    <i class="fa fa-times"></i>
  </a>
</div>`,
              }
            );
          });
      });
    } else {
      // Create notification
      jQuery.notify(
        {
          icon: options.icon || "",
          message: options.message,
          url: options.url || "",
        },
        {
          element: options.element || "body",
          type: options.type || "info",
          placement: {
            from: options.from || "top",
            align: options.align || "right",
          },
          allow_dismiss: options.allow_dismiss === false ? false : true,
          newest_on_top: options.newest_on_top === false ? false : true,
          showProgressbar: options.show_progress_bar ? true : false,
          offset: options.offset || 20,
          spacing: options.spacing || 10,
          z_index: options.z_index || 1033,
          delay: options.delay || 5000,
          timer: options.timer || 1000,
          animate: {
            enter: options.animate_enter || "animated fadeIn",
            exit: options.animate_exit || "animated fadeOutDown",
          },
          template: `<div data-notify="container" class="col-11 col-sm-4 alert alert-{0} alert-dismissible" role="alert">
  <p class="mb-0">
    <span data-notify="icon"></span>
    <span data-notify="title">{1}</span>
    <span data-notify="message">{2}</span>
  </p>
  <div class="progress" data-notify="progressbar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-{0}" style="width: 0%;"></div>
  </div>
  <a href="{3}" target="{4}" data-notify="url"></a>
  <a class="p-2 m-1 text-dark" href="javascript:void(0)" aria-label="Close" data-notify="dismiss">
    <i class="fa fa-times"></i>
  </a>
</div>`,
        }
      );
    }
  }

  /*
   * Easy Pie Chart, for more examples you can check out http://rendro.github.io/easy-pie-chart/
   *
   * Helpers.run('jq-easy-pie-chart');
   *
   * Example usage:
   *
   * <div class="js-pie-chart pie-chart" data-percent="25" data-line-width="2" data-size="100">
   *   <span>..Content..</span>
   * </div>
   *
   */
  static jqEasyPieChart() {
    // Init Easy Pie Charts (with .js-pie-chart class)
    jQuery(".js-pie-chart:not(.js-pie-chart-enabled)").each(
      (index, element) => {
        let el = jQuery(element);

        // Add .js-pie-chart-enabled class to tag it as activated and init it
        el.addClass("js-pie-chart-enabled").easyPieChart({
          barColor: el.data("bar-color") || "#777777",
          trackColor: el.data("track-color") || "#eeeeee",
          lineWidth: el.data("line-width") || 3,
          size: el.data("size") || "80",
          animate: el.data("animate") || 750,
          scaleColor: el.data("scale-color") || false,
        });
      }
    );
  }

  /*
   * Bootstrap Maxlength, for more examples you can check out https://github.com/mimo84/bootstrap-maxlength
   *
   * Helpers.run('jq-maxlength');
   *
   * Example usage:
   *
   * <input type="text" class="js-maxlength form-control" maxlength="20">
   *
   */
  static jqMaxlength() {
    // Init Bootstrap Maxlength (with .js-maxlength class)
    jQuery(".js-maxlength:not(.js-maxlength-enabled)").each(
      (index, element) => {
        let el = jQuery(element);

        // Add .js-maxlength-enabled class to tag it as activated and init it
        el.addClass("js-maxlength-enabled").maxlength({
          alwaysShow: el.data("always-show") ? true : false,
          threshold: el.data("threshold") || 10,
          warningClass: el.data("warning-class") || "badge bg-warning",
          limitReachedClass:
            el.data("limit-reached-class") || "badge bg-danger",
          placement: el.data("placement") || "bottom",
          preText: el.data("pre-text") || "",
          separator: el.data("separator") || "/",
          postText: el.data("post-text") || "",
        });
      }
    );
  }

  /*
   * Ion Range Slider, for more examples you can check out https://github.com/IonDen/ion.rangeSlider
   *
   * Helpers.run('jq-rangeslider');
   *
   * Example usage:
   *
   * <input type="text" class="js-rangeslider form-control" value="50">
   *
   */
  static jqRangeslider() {
    // Init Ion Range Slider (with .js-rangeslider class)
    jQuery(".js-rangeslider:not(.js-rangeslider-enabled)").each(
      (index, element) => {
        let el = jQuery(element);

        // Add .js-rangeslider-enabled class to tag it as activated and init it
        jQuery(element)
          .addClass("js-rangeslider-enabled")
          .ionRangeSlider({
            input_values_separator: ";",
            skin: el.data("skin") || "round",
          });
      }
    );
  }

  /*
   * Password Strength Meter, for more examples you can check out https://github.com/ablanco/jquery.pwstrength.bootstrap
   *
   * Helpers.run('jq-pw-strength');
   *
   * Example usage:
   *
   * <div class="js-pw-strength-container mb-4">
   *   <label class="form-label" for="example-pw-strength1">Password</label>
   *   <input type="password" class="js-pw-strength form-control" id="example-pw-strength1" name="example-pw-strength1">
   *   <div class="js-pw-strength-progress pw-strength-progress mt-1"></div>
   *   <p class="js-pw-strength-feedback form-text mb-0"></p>
   * </div>
   *
   */
  static jqPwStrength() {
    // Init Password Strength Meter (with .js-pw-strength class)
    jQuery(".js-pw-strength:not(.js-pw-strength-enabled)").each(
      (index, element) => {
        let el = jQuery(element);
        let container = el.parents(".js-pw-strength-container");
        let progress = jQuery(".js-pw-strength-progress", container);
        let verdict = jQuery(".js-pw-strength-feedback", container);

        // Add .js-pw-strength-enabled class to tag it as activated and init it
        el.addClass("js-pw-strength-enabled").pwstrength({
          ui: {
            container: container,
            viewports: {
              progress: progress,
              verdict: verdict,
            },
          },
        });
      }
    );
  }

  /*
   * jQuery Sparkline Charts, for more examples you can check out http://omnipotent.net/jquery.sparkline/#s-docs
   *
   * Helpers.run('jq-sparkline');
   *
   * Example usage:
   *
   * <span class="js-sparkline" data-type="line" data-points="[10,20,30,25,15,40,45]"></span>
   *
   */
  static jqSparkline() {
    let self = this;

    // Init jQuery Sparkline Charts (with .js-sparkline class)
    jQuery(".js-sparkline:not(.js-sparkline-enabled)").each(
      (index, element) => {
        let el = jQuery(element);
        let type = el.data("type");
        let options = {};

        // Sparkline types
        let types = {
          line: () => {
            options["type"] = type;
            options["lineWidth"] = el.data("line-width") || 2;
            options["lineColor"] = el.data("line-color") || "#0665d0";
            options["fillColor"] = el.data("fill-color") || "#0665d0";
            options["spotColor"] = el.data("spot-color") || "#495057";
            options["minSpotColor"] = el.data("min-spot-color") || "#495057";
            options["maxSpotColor"] = el.data("max-spot-color") || "#495057";
            options["highlightSpotColor"] =
              el.data("highlight-spot-color") || "#495057";
            options["highlightLineColor"] =
              el.data("highlight-line-color") || "#495057";
            options["spotRadius"] = el.data("spot-radius") || 2;
            options["tooltipFormat"] = "{{prefix}}{{y}}{{suffix}}";
          },
          bar: () => {
            options["type"] = type;
            options["barWidth"] = el.data("bar-width") || 8;
            options["barSpacing"] = el.data("bar-spacing") || 6;
            options["barColor"] = el.data("bar-color") || "#0665d0";
            options["tooltipFormat"] = "{{prefix}}{{value}}{{suffix}}";
          },
          pie: () => {
            options["type"] = type;
            options["sliceColors"] = [
              "#fadb7d",
              "#faad7d",
              "#75b0eb",
              "#abe37d",
            ];
            options["highlightLighten"] = el.data("highlight-lighten") || 1.1;
            options["tooltipFormat"] = "{{prefix}}{{value}}{{suffix}}";
          },
          tristate: () => {
            options["type"] = type;
            options["barWidth"] = el.data("bar-width") || 8;
            options["barSpacing"] = el.data("bar-spacing") || 6;
            options["posBarColor"] = el.data("pos-bar-color") || "#82b54b";
            options["negBarColor"] = el.data("neg-bar-color") || "#e04f1a";
          },
        };

        // If the correct type is set init the chart
        if (types[type]) {
          types[type]();

          // Extra options added only if specified
          if (type === "line") {
            if (el.data("chart-range-min") >= 0 || el.data("chart-range-min")) {
              options["chartRangeMin"] = el.data("chart-range-min");
            }

            if (el.data("chart-range-max") >= 0 || el.data("chart-range-max")) {
              options["chartRangeMax"] = el.data("chart-range-max");
            }
          }

          // Add common options used in all types
          options["width"] = el.data("width") || "120px";
          options["height"] = el.data("height") || "80px";
          options["tooltipPrefix"] = el.data("tooltip-prefix")
            ? el.data("tooltip-prefix") + " "
            : "";
          options["tooltipSuffix"] = el.data("tooltip-suffix")
            ? " " + el.data("tooltip-suffix")
            : "";

          // If we need a responsive width for the chart, then don't add .js-sparkline-enabled class and re-run the helper on window resize
          if (options["width"] === "100%") {
            if (!jqSparklineResize) {
              // Make sure that we bind the event only once
              jqSparklineResize = true;

              // On window resize, re-run the Sparkline helper
              jQuery(window).on(
                "resize.pixelcave.helpers.sparkline",
                function (e) {
                  clearTimeout(jqSparklineTimeout);

                  jqSparklineTimeout = setTimeout(() => {
                    self.sparkline();
                  }, 500);
                }
              );
            }
          } else {
            // It has a specific width (it doesn't need to re-init again on resize), so add .js-sparkline-enabled class to tag it as activated
            jQuery(element).addClass("js-sparkline-enabled");
          }

          // Finally init it
          jQuery(element).sparkline(el.data("points") || [0], options);
        } else {
          console.log(
            "[jQuery Sparkline JS Helper] Please add a correct type (line, bar, pie or tristate) in all your elements with 'js-sparkline' class."
          );
        }
      }
    );
  }

  /*
   * jQuery Validation, for more examples you can check out https://github.com/jzaefferer/jquery-validation
   *
   * Helpers.run('jq-validation');
   *
   * Example usage:
   *
   * By calling the helper, you set up the default options that will be used for jQuery Validation
   *
   */
  static jqValidation() {
    // Set default options for jQuery Validation plugin
    jQuery.validator.setDefaults({
      errorClass: "invalid-feedback animated fadeIn",
      errorElement: "div",
      errorPlacement: (error, el) => {
        jQuery(el).addClass("is-invalid");
        jQuery(el).parents("div:not(.input-group)").first().append(error);
      },
      highlight: (el) => {
        jQuery(el)
          .parents("div:not(.input-group)")
          .first()
          .find(".is-invalid")
          .removeClass("is-invalid")
          .addClass("is-invalid");
      },
      success: (el) => {
        jQuery(el)
          .parents("div:not(.input-group)")
          .first()
          .find(".is-invalid")
          .removeClass("is-invalid");
        jQuery(el).remove();
      },
    });

    // Add custom email validation rule which requires a dot after @
    jQuery.validator.addMethod(
      "emailWithDot",
      function (value, element) {
        let reg =
          /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
        return this.optional(element) || reg.test(value);
      },
      "Please enter a valid email address"
    );
  }
}