const navToggle = document.querySelector(".navbar-toggle");
const navMenu = document.querySelector(".menu");

navToggle.addEventListener("click", () => {
    navMenu.classList.toggle("menu_visible");
})

!(function($) {
    "use strict";
    // Formulario de contacto
    $("#formulario").submit(function (event) {
        $('.formulario__btn').html('Enviando...');
        event.preventDefault();
        hideAlertMessages();
        if(!$(this).valid()) {
            $('.formulario__btn').html('Enviar');
            return;
        }
        $.ajax({
            type: 'POST',
            url: '../forms/sendmail.php',
            data: $('#formulario').serialize(),
            dataType: 'json',
            success: function(_response) {
                $('#formulario').fadeTo('slow', 1, function() {
                    $('.formulario__btn').html('Enviar');
                    $(this).find(':input').val('');
                    $(this).find('label').css('cursor','default');
                    $('#alert-success').fadeIn();
                    $('#alert-error').hide();
                    $('#alert-success').show();
                    hideAlertMessages();
                });
            },
            error: function(_request, _status, _error) {
                $('#formulario').fadeTo('slow', 1, function() {
                    $('.formulario__btn').html('Enviar');
                    $('#alert-error').fadeIn();
                    $('#alert-success').hide();
                    $('#alert-error').show();
                    hideAlertMessages();
                });
            }
        });
  });
  function hideAlertMessages() {
    setTimeout(function(){
      $('#alert-error').fadeOut();
      $('#alert-success').fadeOut();
    }, 8000);
  }
  

    //Formulario equipo
    $("#formulario-equipo").submit(function (event) {
        $('.btn-form-equipo').html('Sending...');
            event.preventDefault();
            hideAlertMessages();
            if(!$(this).valid()) {
                $('.btn-form-equipo').html('Send');
                return;
            }
        $.ajax({
            type: 'POST',
            url: '../forms/sendmail.php',
            data: $('#formulario-equipo').serialize(),
            dataType: 'json',
            success: function(_response) {
                $('#formulario-equipo').fadeTo('slow', 1, function() {
                    $('.btn-form-equipo').html('Sent');
                    $(this).find(':input').val('');
                    $(this).find('label').css('cursor','default');
                });
            },
            error: function(_request, _status, _error) {
                $('#formulario-equipo').fadeTo('slow', 1, function() {
                    $('.btn-form-equipo').html('Send');
                });
            }
        });
    });

})(jQuery);

//Carrousel
!(function() {
    "use strict";
    //   const arrowBtnLeft = document.querySelector(".btn-arrow-left");
    //   const arrowBtnRight = document.querySelector(".btn-arrow-right");

      const slides = document.querySelectorAll(".slide");
      const dotsContainer = document.querySelector(".dots");

      let curSlide = 0;

      // functions
      const goToSlide = (slide) => {
        slides.forEach((s, i) => {
          s.style.transform = `translateX(${100 * (i - slide)}%)`;
        });
      };

      const nextSlide = function () {
        curSlide === slides.length - 1 ? (curSlide = 0) : curSlide++;
        goToSlide(curSlide);
        activateDot(curSlide);
      };

      const prevSlide = function () {
        curSlide === 0 ? (curSlide = slides.length - 1) : curSlide--;
        goToSlide(curSlide);
        activateDot(curSlide);
      };

      const createDots = () => {
        slides.forEach((_, i) =>
          dotsContainer.insertAdjacentHTML(
            "beforeend",
            `<button class='dot' data-slide='${i}'></button>`
          )
        );
      };

      const activateDot = (slide) => {
        document
          .querySelectorAll(".dot")
          .forEach((dot) => dot.classList.remove("dot--active"));
        document
          .querySelectorAll(`.dot[data-slide="${slide}"]`)
          .forEach((dot) => dot.classList.add("dot--active"));
      };

      // inital
      const init = () => {
        goToSlide(0);
        createDots();
        activateDot(0);
      };
      init();

      // event listeners
    //   arrowBtnLeft.addEventListener("click", prevSlide);
    //   arrowBtnRight.addEventListener("click", nextSlide);

      dotsContainer.addEventListener("click", function (e) {
        // if needed to work only on dots and not on dot container
        if (e.target.classList.contains("dot")) {
          const { slide } = e.target.dataset;
          goToSlide(slide);
          activateDot(slide);
        }
      });

      
    
    let touchstartX = 0
    let touchendX = 0

    slides.forEach((slide) => {
        slide.addEventListener('touchstart', e => {
            touchstartX = e.changedTouches[0].screenX
        })
        
        slide.addEventListener('touchend', e => {
            touchendX = e.changedTouches[0].screenX
            swipe()
        })
    });
      
    function swipe() {
        if (touchendX < touchstartX) nextSlide()
        if (touchendX > touchstartX) prevSlide()
    }

    })();