let slideNumber = $(".slider_slide").length - 1;
let formLabels = $(".form-navigation").children();
let labelCount = formLabels.length;

//Disable TAB and ENTER keys; this avoids issues with functionality
$(document).keypress(function (event) {
  if (event.which == "13") {
    event.preventDefault();
  }
});

$(document).keydown(function (objEvent) {
  if (objEvent.keyCode == 9) {
    //tab pressed
    objEvent.preventDefault(); // stops its action
  }
});

//Next button click = next slide
$(".btn.is--form").on("click", function () {
  $(".form-next").click();
});

//Submit form
$(".option-radio").on("click", function () {
  setTimeout(() => {
    //$(".form-submit").click();
    $(".form-next").click(); //NEW MODIFICATION
    $(".form_progress-fill").css("width", 80 + "%");
  }, 200);
});

//Slider funcitonality
function sliderAnimation() {
  let currentSlide = $(".w-slider-dot.w-active").index();

  if (currentSlide == 0) {
    $(".form-prev").addClass("is--first-slide");
    $(".form-progress, .form-navigation").addClass("is--disabled");
    $(".form-slider").addClass("is--intro");
    $(".form-slider").removeClass("low-margin");
  } else if (currentSlide == 4) {
    $(".form-slider").addClass("low-margin");
    $(".form-slider").removeClass("is--intro");
  } else {
    $(".form-prev").removeClass("is--first-slide");
    $(".form-progress, .form-navigation").removeClass("is--disabled");
    $(".form-slider").removeClass("is--intro");
    $(".form-slider").removeClass("is--low-m");
  }

  //Form label function
  for (let i = 0; i < labelCount; i++) {
    let currentLabel = formLabels[i];

    if (i === currentSlide - 1) {
      //Add Active classes
      $(currentLabel).addClass("is--active");
      $(currentLabel).find(".q-label-bg").addClass("is--active");
      //Remove other formating
      $(currentLabel).removeClass("is--done");
      $(currentLabel).find(".strike-line").removeClass("is--done");
    } else if (i < currentSlide) {
      //Add Done classes
      $(currentLabel).addClass("is--done");
      $(currentLabel).find(".strike-line").addClass("is--done");
      //Remove other formating
      $(currentLabel).removeClass("is--active");
      $(currentLabel).find(".q-label-bg").removeClass("is--active");
    } else {
      $(currentLabel).removeClass("is--done");
      $(currentLabel).removeClass("is--active");
      $(currentLabel).find(".q-label-bg").removeClass("is--active");
      $(currentLabel).find(".strike-line").removeClass("is--done");
    }
  }

  //Progress Bar
  let percent = ((currentSlide - 1) / (slideNumber + 1)) * 100;
  let percentRound = percent.toFixed(0);
  console.log(percentRound);
  $(".form_progress-fill").css("width", percentRound + "%");
}

//Trigger slider functionality
$(".form-next, .form-prev").on("click", function () {
  setTimeout(() => {
    sliderAnimation();
  }, 200);
});

//Label click
/*$(".q-label").on("click", function () {
  setTimeout(() => {
    let labelNumber = $(this).index();
    console.log(labelNumber);
    let sliderDots = $(".slider-nav").children();
    sliderDots[labelNumber + 1].click();
    sliderAnimation();
  }, 200);
});
*/
//Form Validation
function validateForm(item) {
  let sibilingButton = item.parents().eq(2).find(".btn.is--form");
  if (item.val().length > 1) {
    sibilingButton.addClass("form-active");
  } else {
    sibilingButton.removeClass("form-active");
  }
}

//Email Validation
function validateEmail(email) {
  const 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]{1,}))$/;
  return re.test(email);
}

function validate(item) {
  let formButton = item.parents().eq(3).find(".btn.is--form");
  const email = item.val();

  if (validateEmail(email)) {
    formButton.addClass("form-active");
    $(".form-status-line").addClass("success");
    $(".form-status-line").removeClass("error");
  } else {
    formButton.removeClass("form-active");
    $(".form-status-line").addClass("error");
    $(".form-status-line").removeClass("success");
  }
  return false;
}

$(".email-form-field").keydown(function () {
  validate($(this));
});

$(".email-form-field").focusout(function () {
  validate($(this));
});

$(".text-form-field").keydown(function () {
  validateForm($(this));
});

$(".text-form-field").focusout(function () {
  validateForm($(this));
});

//Next slide with ENTER
$(".text-form-field, .email-form-field").keypress(function (e) {
  let key = e.which;
  if (key == 13) {
    $(".form-next").click();
    return false;
  }
});

let form_name;
function getName() {
  let nameInput = document.getElementById("name");
  form_name = nameInput.value;
  return form_name;
}

let form_email;
function getEmail() {
  let emailInput = document.getElementById("email");
  form_email = emailInput.value;
  return form_email;
}

let form_company;
function getCompany() {
  let companyInput = document.getElementById("company");
  form_company = companyInput.value;
  return form_company;
}

//Set Name
$("#name-next").on("click", function () {
  $(".form-name").html(getName());
});

//Calendly Activation
$("input[type='radio']").on("click", function () {
  form_name = getName();
  form_email = getEmail();
  form_company = getCompany();
  a2_value = $(this).val();

  Calendly.initInlineWidget({
    url:
      "https://calendly.com/franco-cruz/llamada-de-reconocimiento?hide_event_type_details=1&background_color=f1f0ef&text_color=040915&primary_color=fe7505",
    parentElement: document.getElementById("calendar"),
    prefill: {
    	name: form_name,
        email: form_email,
        customAnswers: {
          a1: form_company,
          a2: a2_value
        }
      }
  });
});