<%~ includeFile("partials/header.eta", {
	user: user
}); %>
<%~ includeFile("partials/message.eta"); %>
<%~ includeFile("partials/title.eta", {
	icon: "fa-solid fa-user-plus",
	title: "Register"
}); %>

<!--posts-->
<section class="post my-4">
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-lg-5 col-xl-4 mx-auto">
        <div class="card">
          <div class="card-header">
            <h4 class="text-center">Account Register</h4>
          </div>
          <div class="card-body">
            <form id="registerForm">
              <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" readonly onfocus="this.removeAttribute('readonly');">
              </div>

              <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
              </div>

              <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Enter password">
              </div>

              <div class="form-group">
                <label for="password_confirmation">Confirm Password</label>
                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder="Confirm password">
              </div>

              <div class="g-recaptcha mt-3  d-flex justify-content-center" data-sitekey="<%=it.gRecaptcha_siteKey%>"></div>
              <div class="d-flex justify-content-center">
                <button type="submit" class="btn btn-phoenix-primary btn-block mt-4" id="register">Register</button>
              </div>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script type="text/javascript">
  (function() {
    const email = $("#email");
    const name = $("#name");
    const password = $("#password");
    const password_confirmation = $("#password_confirmation");

    email.val();
    name.val();
    password.val();
    password_confirmation.val();

    checkValidEmail();
    checkValidName();
    checkValidPass();
    checkValidPassConfirm();

    email.on("keypress keyup keydown", checkValidEmail);
    name.on("keypress keyup keydown", checkValidName);
    password.on("keypress keyup keydown", checkValidPass);
    password_confirmation.on("keypress keyup keydown", checkValidPassConfirm);

    $("#register").on("click", async function(e) {
      e.preventDefault();
      if (document.querySelector(".is-invalid")) {
        $.createToast({
          type: "error",
          message: "Please fix the errors in the form"
        });
      } else {
        const recaptcha = grecaptcha.getResponse();

        const register = this;
        register.disabled = true;
        register.innerHTML = "<span class='spinner-border spinner-border-sm'></span> Registering...";

        $.ajax({
          url: "/register",
          type: "POST",
          data: {
            email: email.val(),
            name: name.val(),
            password: password.val(),
            password_confirmation: password_confirmation.val(),
            "g-recaptcha-response": recaptcha
          },
          success: function(data) {
            window.location.href = "/register/submit-code";
          },
          error: function(data) {
            grecaptcha.reset();
            register.disabled = false;
            register.innerHTML = "Register";
						data.responseJSON.errors.forEach(function(error) {
							$.createToast({
								type: "error",
								message: error.msg
							});
						});
					}
				});
			}
    });

    function checkValidEmail() {
      if (email.val().length > 100 || email.val().length < 5) {
        email.val(email.val().substring(0, 100));
        email.addClass("is-invalid");
        const div = document.createElement("div");
        div.className = "invalid-feedback";
        div.innerHTML = "Email must be between 5 and 100 characters";
        if (email.parent().find(".invalid-feedback").length === 0)
          email.parent().append(div);
      } else {
        email.removeClass("is-invalid");
        email.parent().find(".invalid-feedback").remove();
      }
    }

    function checkValidName() {
      if (name.val().length > 30 || name.val().length < 3) {
        name.val(name.val().substring(0, 30));
        name.addClass("is-invalid");
        const div = document.createElement("div");
        div.className = "invalid-feedback";
        div.innerHTML = "Name must be between 3 and 30 characters";
        if (name.parent().find(".invalid-feedback").length === 0)
          name.parent().append(div);
      } else {
        name.removeClass("is-invalid");
        name.parent().find(".invalid-feedback").remove();
      }
    }

    function checkValidPass() {
      if (password.val().length < 6) {
        password.val(password.val().substring(0, 6));
        password.addClass("is-invalid");
        const div = document.createElement("div");
        div.className = "invalid-feedback";
        div.innerHTML = "Password must be at least 6 characters";
        if (password.parent().find(".invalid-feedback").length === 0)
          password.parent().append(div);
      } else {
        password.removeClass("is-invalid");
        password.parent().find(".invalid-feedback").remove();
      }
    }

    function checkValidPassConfirm() {
      if (password_confirmation.val() != password.val() || password_confirmation.val().length < 6) {
        password_confirmation.addClass("is-invalid");
        const div = document.createElement("div");
        div.className = "invalid-feedback";
        div.innerHTML = "Password confirmation must match password";
        if (password_confirmation.parent().find(".invalid-feedback").length === 0)
          password_confirmation.parent().append(div);
      } else {
        password_confirmation.removeClass("is-invalid");
        password_confirmation.parent().find(".invalid-feedback").remove();
      }
    }
  })();
</script>

<!--footer section-->
<%~ includeFile("partials/footer.eta") %>