{% if current_person.signed_in? %}
  <script>
    window.location.replace('/app')
  </script>
{% endif %}

<body>
  {% include "header" %}
  {% include "messages" %}
  <main class="np-main np-box-container">
    <div class="np-box">
      <img class="hero-image-left-desktop" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/SkuidSkool-RegisterHero.svg">
      <img class="hero-image-left-mobile" src="https://s3.amazonaws.com/static.northpass.com/Skuid/images/skuid+skool+V3.svg">
      <div class="np-box-content-container">
        <form id="register-form" class="np-form np-box-content" action="{% route sign_up %}" method="post" novalidate>
          <div class="np-form-title"> Welcome to Skuid Skool </div>
          <div class="np-form-subtitle"> Complete your profile below </div>
          {% form_authenticity_token %}
          <div class="np-form-field">
            <label class="np-input-label" for="learner_first_name">
            </label>
            <input
              class="np-input"
              type="text"
              name="learner[first_name]"
              id="learner_first_name"
              placeholder="First Name"
              required
            >
          </div>
          <div class="np-form-field">
            <label class="np-input-label" for="learner_last_name">
            </label>
            <input
              class="np-input"
              type="text"
              name="learner[last_name]"
              id="learner_last_name"
              placeholder="Last Name"
              required
            >
          </div>
          <div class="np-form-field">
            <label class="np-input-label" for="learner_email">
            </label>
            <input
              class="np-input"
              type="email"
              name="learner[email]"
              id="learner_email"
              placeholder="Email"
              required
            >
          </div>
          <p style="display: none; color: salmon;" id="skuid-domain-alert">Skuid team members please login to <a href="https://www.skuadskool.com/" style="text-decoration: none;">skuadskool.com</a></p>
          <div class="np-form-field">
            <label class="np-input-label" for="learner_password">
            </label>
            <input
              class="np-input"
              type="password"
              name="learner[password]"
              id="learner_password"
              placeholder="Password"
              required
            >
          </div>
          <p style="display: none;" id="password-too-short-alert">Password must be minimum 8 characters and contain at least 1 uppercase letter, 1 number, and 1 special character</p>
          <div class="np-form-field">
            <label class="np-input-label" for="learner_second_password">
            </label>
            <input
              class="np-input"
              type="password"
              name="learner[second-password]"
              id="learner_second_password"
              placeholder="Verify Password"
              required
            >
          </div>
          <div class="np-form-field checkbox-field">
            <label class="checkbox-container">
            <input type="checkbox" id="attestationCheckbox">
              I have read and agree to the <a href="http://www.skuid.com/legal/privacy-policy">privacy policy</a> and <a
                    href="http://www.skuid.com/legal/terms-of-use">terms of use</a>.
                <span class="checkmark"></span>
            </label>
          </div>
          {%- comment -%} <div class="np-form-field">
            <label class="np-input-label" for="hear_about">
            </label>
            <select
              class="np-input"
              type="text"
              name="how_did_you_hear"
              id="how_did_you_hear"
              style="text-align-last: left;"
              required 
            >
              <option value="" selected disabled>How did you Hear about Skuid Skool?</option>
              <option value="Colleague or Team Member">Colleague or Team Member</option>
              <option value="Skuid Team Member/Employee">Skuid Team Member/Employee</option>
              <option value="Skuid newsletter, email, social media or other form of Skuid communication">Skuid newsletter, email, social media or other form of Skuid communication</option>
              <option value="Internet Search">Internet Search</option>
              <option value="Other">Other</option>
            </select>
          </div> {%- endcomment -%}

          {% comment %}<div class="np-form-field">
            <label class="np-input-label" for="hear_about">
            </label>
            <select
              class="np-input"
              type="text"
              name="how_did_you_hear"
              id="how_did_you_hear"
              required 
            >
              <option value="" selected>How did you Hear about Skuid Skool?</option>
              <option value="Colleague or Team Member">Colleague or Team Member</option>
              <option value="Skuid Team Member/Employee">Skuid Team Member/Employee</option>
              <option value="Skuid newsletter, email, social media or other form of Skuid communication">Skuid newsletter, email, social media or other form of Skuid communication</option>
              <option value="Internet Search">Internet Search</option>
              <option value="Other">Other</option>
            </select>
          </div>{% endcomment %}
          <p style="display: none;" id="passwords-dont-match-alert">Passwords don't match</p>
         <button type="submit" id="send_button" class="np-button np-button-big np-button-large-font np-form-action" style="border-radius: 56px;" onclick="googleReport(event)">
            Register
          </button>
          <div class="err-required" style="display:none;">Please complete all required fields.</div>
        </form>
       {% comment %} <span class="np-form-terms">
          By submitting this form you agree to the
          
          <a
            class="np-form-link np-button-color"
            target="_blank"
            href="{{ current_school.terms_of_service_url }}"
          >
            Northpass 
          </a>
          and
          
          <a
          class="np-form-link np-button-color"
          target="_blank"
          href="/app/eula"
        >
          Skuid 
        </a>
        Terms of Use
        </span> {% endcomment %}

      </div>
    </div>
  </main>
  {% include "footer" %}
</body>

<style>
    #password-too-short-alert {
      color: salmon;
      font-size: 13px;
    }

    #passwords-dont-match-alert {
      color: salmon;
      font-size: 13px;
    }

  @media (min-width: 426px) and (max-width: 768px) {
    .np-box-content-container {
      align-items: center;
    }
  }

  @media (min-width: 376px) and (max-width: 425px) {
    .np-input {
      padding: 0 0.75rem;
    }
  }

  @media (min-width: 326px) and (max-width: 375px) {
    .np-input {
      padding: 0 0.75rem;
    }
  }

  @media (max-width: 325px) {
    .np-input {
      padding: 0 0.75rem;
    }
  }

  .np-main {
    margin: 25px 0;
  }
  .np-box {
    display: flex;
    flex-direction: row;
    width: unset !important;
    box-shadow: none;
  }
  .np-box-container {
    height: unset !important;
  }
  .hero-image-left-desktop {
    width: 60%;
  }
  .hero-image-left-mobile {
    width: 100%;
    display: none;
  }
  .np-box-content-container {
    margin-top: 0;
    margin-bottom: 0;
    padding: 2rem 0 2rem 2.25rem;
    display: flex;
    flex-direction: column;
  }
  .np-form-title {
    font-weight: 600;
    color: #1B1C1D;
    font-size: 28px;
    justify-content: center;
    text-align: center;
    margin-bottom: 0;
  }
  .np-form-subtitle {
    color: #1B1C1D;
    font-size: 16px;
    justify-content: center;
    text-align: center;
    margin-bottom: 1.25rem;
  }
  .np-input {
    background-color: #FFF6F0;
    border: none;
    border-radius: 4px;
  }
  .np-input::placeholder {
    color: #6F7277;
    font-size: 16px;
  }
  #default-option {
    color: #6F7277;
    font-size: 16px;
  }
  .selection-option {
    font-family: Inter;
  }
  .body {
    height: 100%;
  }
  #learner_role {
    color: #1B1C1D;
    text-align: left;
    text-align-last: left;
  }
  @media only screen and (min-width: 1190px) {
    .hero-image-left-desktop {
      min-width: 60%;
    }
    .np-box-content-container {
      margin-right: 40px;
    }
  }
  @media only screen and (max-width: 768px) {
    .np-box-content-container {
      padding: 2rem 2rem 2.25rem;
    }
    .hero-image-left-desktop {
      display: none;
    }
    .hero-image-left-mobile {
      display: block;
    }
    .np-box {
      flex-direction: column;
      margin: 0;
    }
    .np-main {
      margin: 0;
    }
    .np-box-content-container {
      margin-left: 0;
    }
  }
  #send_button {
    pointer-events: none;
    background-color: #6F7277;
  }

  .loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #00bf8f;
    border-bottom: 16px solid #00bf8f;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .eula-info-box {
    display: none;
    position: absolute;
    padding: 30px;
    background-color: white;
    opacity: 0.7;
    color: black;
  }

  #eula-info:hover .eula-info-box {
    display: block;
  }
</style>
<script>
  document.getElementById("header").scrollIntoView();

  function checkIfInputsExist (){
    window.setTimeout(function(){
      if ($("#learner_email")[0].value.length >0){
        if ($("#learner_email")[0].value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/) && $("#learner_email")[0].value.includes('@skuid') == false){
          $("#skuid-domain-alert").css("display", "none");
          $("#learner_email").css("background-color", "#FFF6F0");
          if ($("#learner_password")[0].value.length > 0){
            if (!$("#learner_password")[0].value.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&.#^+-/()=<>~`:;'",])[A-Za-z\d@$!%*?&.#^+-/()=<>~`:;'",]{8,}$/)) {
              $("#password-too-short-alert").css("display", "block");
              $("#learner_password").css("background-color", "salmon");
              $("#send_button").css("background-color","#6F7277");
              $("#send_button").css("pointer-events","none");
            }
            else {
              $("#password-too-short-alert").css("display", "none");
              $("#learner_password").css("background-color", "#FFF6F0");
              if ($("#learner_password")[0].value == $("#learner_second_password")[0].value){
                $("#passwords-dont-match-alert").css("display", "none");
                $("#learner_second_password").css("background-color", "#FFF6F0");
                if ($("#learner_first_name")[0].value.length * $("#learner_last_name")[0].value.length * $("#learner_email")[0].value.length * $("#learner_password")[0].value.length) {
                  $("#send_button").css("background-color","#005cb9");
                  $("#send_button").css("pointer-events","auto");
                }
                else {
                  $("#send_button").css("background-color","#6F7277");
                  $("#send_button").css("pointer-events","none");
                }
              }
              else {
                $("#passwords-dont-match-alert").css("display", "block");
                $("#learner_second_password").css("background-color", "salmon")
                $("#send_button").css("background-color","#6F7277");
                $("#send_button").css("pointer-events","none");
              }
            }
          }
          else {
            $("#send_button").css("background-color","#6F7277");
            $("#send_button").css("pointer-events","none");
          }
        }
        else {
          $("#learner_email")[0].value.includes('@skuid') ? $("#skuid-domain-alert").css("display", "block") : $("#skuid-domain-alert").css("display", "none");
          $("#learner_email").css("background-color", "salmon")
          $("#send_button").css("background-color","#6F7277");
          $("#send_button").css("pointer-events","none");
        }
      }      
    }, 500)
  }
  document.addEventListener('keydown', checkIfInputsExist);
  $("#learner_email")[0].addEventListener('change', checkIfInputsExist);
</script>
<script>
  //validate the checkbox is selected

  $('.np-form-action').click(function(e) {
    e.preventDefault()
    console.log("clicked")

    if($("#attestationCheckbox").is(":checked")) {
     $('.np-form').submit()
    } else {
      console.log("Checkbox is not checked")
      $('.checkbox-field').addClass('has-err')
      $('.err-required').show();
    }
  });
</script>