{% extends 'includes/base_auth.html' %}
{% load static %}
{% block content %}
<main class="main-content  mt-0">
    <div class="page-header align-items-start min-vh-50 pt-5 pb-11 m-3 border-radius-lg" style="background-image: url('https://images.unsplash.com/photo-1612911853182-96e6be2792c7?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'); background-position: center;">
      <span class="mask bg-gradient-dark opacity-6"></span>
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-5 text-center mx-auto">
            <h1 class="text-white mb-2 mt-5">Welcome!</h1>
            <p class="text-lead text-white">Please log in to continue</p>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="row mt-lg-n10 mt-md-n11 mt-n10 justify-content-center">
        <div class="col-xl-4 col-lg-5 col-md-7 mx-auto">
          <div class="card z-index-0">
            <div class="card-header text-center pt-4">
              <h5>Register</h5>
            </div>
            <div class="card-body">
              <form role="form" id="signup">
                <div class="alert alert-danger text-white" role="alert" id="emailValidationMessage" hidden>
                  This is not a valid email address
                </div>
                <div class="mb-3 form-group" id="form_email">
                  <input type="text" id="id_email" class="form-control" placeholder="Email" aria-label="Email" autocomplete="email">
                </div>
                <div class="alert alert-danger text-white" role="alert" id="passwordMatchAlert" hidden>
                  Passwords do not match!
                </div>
                <div class="mb-3 form-group" id="form_password1">
                  <input type="password" id="id_password1" class="form-control" placeholder="Password" aria-label="Password1" autocomplete="new-password">
                </div>
                <div class="mb-3 form-group" id="form_password2">
                  <input type="password" id="id_password2" class="form-control" placeholder="Confirm Password" aria-label="Password2" autocomplete="new-password">
                </div>
                <div class="form-check form-group form-check-info text-start">
                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
                  <label class="form-check-label" for="flexCheckDefault">
                    I agree the <a href="javascript:;" class="text-dark font-weight-bolder">Terms and Conditions</a>
                  </label>
                </div>
                <div class="text-center">
                  <button type="button" onclick="submit_form()" class="btn bg-gradient-dark w-100 my-4 mb-2" id="signUpSubmit">
                    <span class="spinner-border spinner-border-sm" id="submitSpinner" role="status" aria-hidden="true" hidden></span>
                    Sign up
                  </button>
                </div>
                <p class="text-sm mt-3 mb-0">Already have an account? <a href="{% url 'accounts:sign_in' %}" class="text-dark font-weight-bolder">Sign in</a></p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <!-- -------- START FOOTER 3 w/ COMPANY DESCRIPTION WITH LINKS & SOCIAL ICONS & COPYRIGHT ------- -->

{% endblock content %}
{% block scripts %}
<script>

  function validateEmail(email) {
    const res = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
    return res.test(String(email).toLowerCase());
  }
function submit_form(){
      const csrftoken = Cookies.get('csrftoken');
      document.getElementById('emailValidationMessage').setAttribute('hidden', 'true');
      document.getElementById('passwordMatchAlert').setAttribute('hidden', 'true');
      var email = document.getElementById('id_email').value;
      var password1 = document.getElementById('id_password1').value;
      var password2 = document.getElementById('id_password2').value;
      if (validateEmail(email)){
        var postdata = {'data': JSON.stringify({'email': email, 'password': password1})};
      } else {
        document.getElementById('emailValidationMessage').removeAttribute('hidden');
        throw new Error('manual script stop');
      };
      if (password1 === password2 && password1 !== '' && password2 !== '') {
        event.preventDefault();
        console.log("trying to create user");
        document.getElementById('submitSpinner').removeAttribute('hidden');
        $.ajax({
            url: "{% url 'accounts:user_sign_up' %}",
            type: 'POST',
            dataType: 'json',
            data: postdata,
            headers: {'X-CSRFToken': csrftoken},
            success: function(result){
              console.log(result);
              if(result['no_errors'] === true ) location.href = "{% url 'index' %}"
            }
        });
      } else {
        document.getElementById('passwordMatchAlert').removeAttribute('hidden');
      };
  };
  </script>


{% endblock scripts %}