/* Initialize clients section slider */

document.addEventListener("DOMContentLoaded", function () {
  var clients_slider = document.querySelector(".clients-slider");

  if (clients_slider != null) {
    new Splide(clients_slider, {
      type: "loop",
      perPage: 6,
      perMove: 1,
      pagination: false,
      padding: {
        right: "1px",
        left: "1px",
      },
      breakpoints: {
        1600: {
          perPage: 5,
        },
        1500: {
          perPage: 4,
        },
        1366: {
          perPage: 3,
        },
        900: {
          perPage: 2,
        },
        768: {
          perPage: 3,
        },
        600: {
          perPage: 2,
        },
      },
    }).mount();
  }

  var testimonial_slider = document.querySelector(".testimonials-slider");

  if (testimonial_slider != null) {
    new Splide(testimonial_slider, {
      type: "loop",
      focus: "center",
      pagination: false,
      autoWidth: true,
      rewind: true,
      width: "100%",
    }).mount();
  }

  var solutions_slider = document.querySelector(".solutions-slider");

  if (solutions_slider != null) {
    var solutionSplide = new Splide(solutions_slider, {
      type: "loop",
      pagination: false,
      perPage: 1,
      perMove: 1,
      drag: false,
      autoWidth: true,
      width: "575px",
      breakpoints: {
        1700: {
          width: "480px",
        },
        1400: {
          width: "420px",
        },
        1257: {
          width: "430px",
        },
        1100: {
          width: "370px",
        },
        900: {
          width: "100%",
        },
      },
    }).mount();
  }

  /* Add styling on label on input focus */
  var form = document.querySelector(".form-content form");

  if (form.length > 0) {
    var inputs = form.querySelectorAll("input");
    var textarea = form.querySelectorAll("textarea");

    inputs.forEach((element) => {
      var label = element.parentNode.querySelector("label");
      var parent = element.parentNode;

      element.addEventListener("focus", function (event) {
        if (!label.classList.contains("active")) {
          label.classList.add("active");
          parent.classList.add("active");
        }
      });

      element.addEventListener("keyup", function (event) {
        if (element.value != "") {
          label.classList.add("active");
          parent.classList.add("active");
        }
      });

      element.addEventListener("blur", function (event) {
        if (element.value == "") {
          label.classList.remove("active");
          parent.classList.remove("active");
        }
      });
    });

    textarea.forEach((element) => {
      var label = element.parentNode.querySelector("label");
      var parent = element.parentNode;

      element.addEventListener("focus", function (event) {
        if (!label.classList.contains("active")) {
          label.classList.add("active");
          parent.classList.add("active");
        }
      });

      element.addEventListener("keyup", function (event) {
        if (element.value != "") {
          label.classList.add("active");
          parent.classList.add("active");
        }
      });

      element.addEventListener("blur", function (event) {
        if (element.value == "") {
          label.classList.remove("active");
          parent.classList.remove("active");
        }
      });
    });
  }

  /* Open mobile menu */

  var hamburger_menu = document.querySelector(".mobile-menu");
  if (hamburger_menu != null) {
    hamburger_menu.addEventListener("click", function (event) {
      var mobile_menu = document.querySelector(".mobile-menu-content");
      if (mobile_menu != null) {
        if (mobile_menu.classList.contains("active")) {
          mobile_menu.classList.remove("active");
        } else {
          mobile_menu.classList.add("active");
        }
      }
    });
  }

  /* Close mobile menu */
  var close_button = document.querySelector(
    ".mobile-menu-content .close-button"
  );
  if (close_button != null) {
    close_button.addEventListener("click", function (event) {
      var mobile_menu = document.querySelector(".mobile-menu-content");
      if (mobile_menu != null) {
        mobile_menu.classList.remove("active");
      }
    });
  }

  window.addEventListener("scroll", function () {
    /* Show circuit animation on laptop position when user reaches that section */
    var elementTarget = document.querySelectorAll(
      ".solutions-section .solution-group"
    );
    elementTarget.forEach((element) => {
      if (window.scrollY > element.offsetTop - 300) {
        if (!element.classList.contains("reach")) {
          element.classList.add("reach");
        }
      }
    });
    /* Show scroll back to top button */
    var back_to_top = document.querySelector(".scroll-to-top");
    if (back_to_top) {
      if (
        document.body.ScrollTop > window.innerHeight + 100 ||
        document.documentElement.scrollTop > window.innerHeight + 100
      ) {
        back_to_top.classList.add("active");
      } else {
        back_to_top.classList.remove("active");
      }
    }
  });

  /* Form submission */

  var form = document.querySelector(".form-content form");
  var form_submit = document.querySelector(".action-button.contact-submit");

  if (form_submit) {
    form_submit.addEventListener("click", function (event) {
      event.preventDefault();
      var form_inputs = form.querySelectorAll("input, textarea");

      var formData = {};

      form_inputs.forEach((element, index) => {
        formData[element.getAttribute("name")] = element.value;
      });

      if (validateForm(form, formData)) {
        fetch("/ajax/contact.php", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-type": "application/json",
          },
          body: JSON.stringify(formData),
        })
          .then((res) => {
            return res.json();
          })
          .then((data) => {
            if (data.status == 1) {
              form.style.display = "none";
              document.querySelector(
                ".form-content .form-success"
              ).style.display = "block";
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    });
  }

  /* Form retry */

  var form_retry = document.querySelector(".action-button.form-retry");
  if (form_retry) {
    var form = document.querySelector(".form-content form");
    var form_success = document.querySelector(".form-content .form-success");

    form_retry.addEventListener("click", function (event) {
      event.preventDefault();
      // clean inputs
      var inputs = form.querySelectorAll("input, textarea");
      inputs.forEach((element) => {
        element.value = "";
        element.parentNode.classList.remove("active");
        element.previousElementSibling.classList.remove("active");
        element.disabled = true;
        element.disabled = false;
      });
      // show form
      form.style.display = "block";
      // hide success message
      form_success.style.display = "none";
    });
  }

  var phone_input = document.querySelector(
    '.form-content form input[name="telefon"]'
  );
  if (phone_input) {
    phone_input.addEventListener("keydown", function (event) {
      var accepted_keys = [
        8,
        46 /* Delete keys */,
        48,
        49,
        50,
        51,
        52,
        53,
        54,
        55,
        56,
        57,
        96,
        97,
        98,
        99,
        100,
        101,
        102,
        103,
        104,
        105 /* Number keys + numpad keys */,
        37,
        38,
        39,
        40 /* Arrow Keys */,
        9 /* Tab key */,
      ];
      var key = event.which || event.keyCode || event.charCode;
      if (!accepted_keys.includes(key)) {
        event.preventDefault();
      }
    });
  }

  /* Scroll into view from menu */
  var menu_items = document.querySelectorAll(
    ".main-menu .menu-list .menu-item a"
  );
  if (menu_items) {
    menu_items.forEach(function (element) {
      if (element.hasAttribute("scroll-to")) {
        element.addEventListener("click", function (event) {
          event.preventDefault();
          var scrollElement = element.getAttribute("scroll-to");
          var el = document.querySelector(scrollElement);
          if (el) {
            //scrollToElement(el);
            var scroll = new SweetScroll({
              duration: 2000,
            });
            scroll.toElement(el);
            //el.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
          }
        });
      }
    });
  }

  /* Scroll into view from action buttons */
  var action_buttons = document.querySelectorAll("a.action-button");
  if (action_buttons) {
    action_buttons.forEach(function (element) {
      if (element.hasAttribute("scroll-to")) {
        element.addEventListener("click", function (event) {
          event.preventDefault();
          var scrollToElement = element.getAttribute("scroll-to");
          var el = document.querySelector(scrollToElement);
          if (el) {
            var scroll = new SweetScroll({
              duration: 2000,
            });
            scroll.toElement(el);
          }
        });
      }
    });
  }

  /* Scroll into view from mobile menu */
  var mobile_items = document.querySelectorAll(
    ".mobile-menu-content .menu-list .menu-item a"
  );
  if (mobile_items) {
    mobile_items.forEach((el) => {
      if (el.hasAttribute("scroll-to")) {
        el.addEventListener("click", function (event) {
          event.preventDefault();
          var scrollElement = el.getAttribute("scroll-to");
          var scrollTo = document.querySelector(scrollElement);
          if (scrollTo) {
            var mobile_menu = document.querySelector(".mobile-menu-content");
            if (mobile_menu) {
              mobile_menu.classList.remove("active");
            }
            setTimeout(function () {
              var scroll = new SweetScroll({
                duration: 2000,
              });
              scroll.toElement(scrollTo);
            }, 7500);
          }
        });
      }
    });
  }

  /* Click on solutions element will make it active and move the slider content on certain index */
  var content_elements = document.querySelectorAll(
    ".solution-content .content-element"
  );
  if (content_elements.length > 0) {
    content_elements.forEach((el, index) => {
      el.addEventListener("click", function () {
        content_elements.forEach((el) => {
          el.classList.remove("active");
        });
        el.classList.add("active");
        var main_section = document.querySelector(".section.solutions-section");
        if (main_section) {
          var scroll = new SweetScroll({
            duration: 2000,
          });
          scroll.toElement(main_section);
        }
        if (solutionSplide) {
          solutionSplide.go(index);
        }
      });
    });
  }

  /* Scroll back to top */
  var back_to_top = document.querySelector(".scroll-to-top");
  if (back_to_top) {
    back_to_top.addEventListener("click", function () {
      var scroll = new SweetScroll({
        duration: 2500,
      });
      scroll.toElement(document.querySelector("body"));
    });
  }

  /* Change video source in modal on link click */
  var video_buttons = document.querySelectorAll('.video-button');
  if(video_buttons.length > 0) {
      video_buttons.forEach((element) => {
        element.addEventListener('click', function(ev) {
            var video_src = this.getAttribute('video-src');
            var video_html = document.querySelector('video.popup-video');
            if(video_src != '') {
                video_html.querySelector('source').setAttribute('src', video_src);
            }
            video_html.load();
            video_html.play();
        });
      });
  }

  /* horizontal scroll on more articles section */
  var mouseWheel = document.querySelector('.more-articles-wrapper');
  if(mouseWheel) {
    mouseWheel.addEventListener('wheel', function(e) {
      e.preventDefault();
      const race = 90; // How many pixels to scroll

      if (e.deltaY > 0) // Scroll right
          mouseWheel.scrollLeft += race;
      else // Scroll left
          mouseWheel.scrollLeft -= race;
      
      /* if(e.deltaY > 0) {
        smoothScroll(mouseWheel, 60, 100, 'right');
      } else {
        smoothScroll(mouseWheel, 60, 100, 'left');
      } */
    });
  }

  // more articles navigation arrows
  var articles_nav_left = document.querySelector('.more-articles-navigate .arrow-left');
  if(articles_nav_left){
    articles_nav_left.addEventListener('click', function() {
      var index = parseInt(this.parentNode.getAttribute('index'));
      var articles_wrapper = document.querySelector('.more-articles-wrapper');
      var scrollWidth = this.parentNode.parentNode.querySelectorAll('.more-articles-container .more-article')[0].offsetWidth;
      if(index > 1) {
        index--;
        this.parentNode.setAttribute('index', index);
        if(index == 1) {
          articles_wrapper.scrollLeft = 0;
        } else {
          articles_wrapper.scrollLeft -= scrollWidth + 20;
        }
      }
    });
  }

  var articles_nav_right = document.querySelector('.more-articles-navigate .arrow-right');
  if(articles_nav_right){
    articles_nav_right.addEventListener('click', function() {
      var index = parseInt(this.parentNode.getAttribute('index'));
      var max = this.parentNode.parentNode.querySelectorAll('.more-articles-container .more-article').length;
      var articles_wrapper = document.querySelector('.more-articles-wrapper');
      var scrollWidth = this.parentNode.parentNode.querySelectorAll('.more-articles-container .more-article')[0].offsetWidth;
      if (window.innerWidth > 1500) {
        max = max - 3;
      } else if (window.innerWidth > 1000) {
        max = max - 2;
      } else if (window.innerWidth > 800) {
        max = max - 1;
      }
      if(index < max) {
        index++;
        this.parentNode.setAttribute('index', index);
        articles_wrapper.scrollLeft += scrollWidth + 20;
      }
    });
  }
  
});




/* Functions */


function smoothScroll(element, scrollStep, delay, direction) {
    setTimeout(function() {
      if(direction == 'right') {
        element.scrollLeft += scrollStep;
      } else {
        element.scrollLeft -= scrollStep;
      }
      if(delay < 1000) {
        smoothScroll(element, scrollStep, 1.1 * delay, direction);
      }
    }, delay);
  }

function validateForm(form, formData) {
  var form_validation = [];
  /* Hide errors */
  var all_errors = form.querySelectorAll("input, textarea");
  all_errors.forEach((el) => {
    el.parentNode.classList.remove("error");
  });

  if (formData.nume == "") {
    form_validation.push("false");
    form.querySelector('input[name="nume"]').parentNode.classList.add("error");
  }
  if (formData.prenume == "") {
    form_validation.push("false");
    form
      .querySelector('input[name="prenume"]')
      .parentNode.classList.add("error");
  }
  if (formData.telefon == "" || formData.telefon.length != 10) {
    form_validation.push("false");
    form
      .querySelector('input[name="telefon"]')
      .parentNode.classList.add("error");
  }
  if (!validateEmail(formData.email)) {
    form_validation.push("false");
    form.querySelector('input[name="email"]').parentNode.classList.add("error");
  }
  if (formData.club_academie == "") {
    form_validation.push("false");
    form
      .querySelector('input[name="club_academie"]')
      .parentNode.classList.add("error");
  }
  if (formData.mesaj == "") {
    form_validation.push("false");
    form
      .querySelector('textarea[name="mesaj"]')
      .parentNode.classList.add("error");
  }

  if (form_validation.includes("false")) {
    document.querySelector(".form-error-message").style.display = "block";
  } else {
    document.querySelector(".form-error-message").style.display = "none";
  }

  return !form_validation.includes("false");
}

function validateEmail(email) {
  var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

/* Modal JS */

var modal = function () {
  /**
   * Element.closest() polyfill
   * https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
   */
  if (!Element.prototype.closest) {
    if (!Element.prototype.matches) {
      Element.prototype.matches =
        Element.prototype.msMatchesSelector ||
        Element.prototype.webkitMatchesSelector;
    }
    Element.prototype.closest = function (s) {
      var el = this;
      var ancestor = this;
      if (!document.documentElement.contains(el)) return null;
      do {
        if (ancestor.matches(s)) return ancestor;
        ancestor = ancestor.parentElement;
      } while (ancestor !== null);
      return null;
    };
  }

  //
  // Settings
  //
  var settings = {
    speedOpen: 50,
    speedClose: 250,
    activeClass: "is-active",
    visibleClass: "is-visible",
    selectorTarget: "[data-modal-target]",
    selectorTrigger: "[data-modal-trigger]",
    selectorClose: "[data-modal-close]",
  };

  //
  // Methods
  //

  // Toggle accessibility
  var toggleccessibility = function (event) {
    if (event.getAttribute("aria-expanded") === "true") {
      event.setAttribute("aria-expanded", false);
    } else {
      event.setAttribute("aria-expanded", true);
    }
  };

  // Open Modal
  var openModal = function (trigger) {
    // Find target
    var target = document.getElementById(trigger.getAttribute("aria-controls"));

    // Make it active
    target.classList.add(settings.activeClass);

    // Make body overflow hidden so it's not scrollable
    document.documentElement.style.overflow = "hidden";

    // Toggle accessibility
    toggleccessibility(trigger);

    // Make it visible
    setTimeout(function () {
      target.classList.add(settings.visibleClass);
    }, settings.speedOpen);
  };

  // Close Modal
  var closeModal = function (event) {
    // Find target
    var closestParent = event.closest(settings.selectorTarget),
      childrenTrigger = document.querySelector(
        '[aria-controls="' + closestParent.id + '"'
      );

    // Make it not visible
    closestParent.classList.remove(settings.visibleClass);

    // Remove body overflow hidden
    document.documentElement.style.overflow = "";

    // Toggle accessibility
    toggleccessibility(childrenTrigger);
    
    // Stop any video playing from popup
    document.querySelectorAll('video').forEach((element) => {element.pause()});

    // Make it not active
    setTimeout(function () {
      closestParent.classList.remove(settings.activeClass);
    }, settings.speedClose);
  };

  // Click Handler
  var clickHandler = function (event) {
    // Find elements
    var toggle = event.target,
      open = toggle.closest(settings.selectorTrigger),
      close = toggle.closest(settings.selectorClose);

    // Open modal when the open button is clicked
    if (open) {
      openModal(open);
    }

    // Close modal when the close button (or overlay area) is clicked
    if (close) {
      closeModal(close);
    }

    // Prevent default link behavior
    if (open || close) {
      event.preventDefault();
    }
  };

  // Keydown Handler, handle Escape button
  var keydownHandler = function (event) {
    if (event.key === "Escape" || event.keyCode === 27) {
      // Find all possible modals
      var modals = document.querySelectorAll(settings.selectorTarget),
        i;

      // Find active modals and close them when escape is clicked
      for (i = 0; i < modals.length; ++i) {
        if (modals[i].classList.contains(settings.activeClass)) {
          closeModal(modals[i]);
        }
      }
    }
  };

  //
  // Inits & Event Listeners
  //
  document.addEventListener("click", clickHandler, false);
  document.addEventListener("keydown", keydownHandler, false);
};

modal();