{% extends 'baseCore.html' %}
{% load crispy_forms_tags %}
{% block body_main %}
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>

<h3><span style="font-family:Arial,Helvetica,sans-serif;color:#999999">Reset Password</span></h3>
<div class="row">
    <div class="col-md-8 col-sm-10 col-12">
        <form method="POST" novalidate action={% url 'accounts:password_reset_submit' token %}>
            {% csrf_token %}
            <input type="hidden" name="token" value="{{ token }}">
            <div class="row mb-3">
                <div class="col">
                    <h6 class="mb-2"><strong>New Password</strong></h6>
                    <input type="password" id="pword" name="pword" value="" size="35"><br>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col">
                    <h6 class="mb-2"><strong>Confirm New Password</strong></h6>
                    <input type="password" id="con_password" name="con_password" value="" size="35"><br><br>
                </div>
            </div>
            {{ form|crispy }}
            <button type="submit" class="btn btn-success" disabled>Submit</button>
        </form>
         <div style="margin-top: 7px;" id="CheckPasswordMatch"></div>
          <br>
    </div>
</div>
<script>
    $(document).ready(function() {
      $("#con_password").on('keyup', function() {
        var password = $("#pword").val();
        var confirmPassword = $("#con_password").val();
        if (password != confirmPassword) {
            $("#CheckPasswordMatch").html("Password does not match").css("color", "red");
            $(':input[type="submit"]').prop('disabled', true);
        }
        else {
            $(':input[type="submit"]').prop('disabled', false);
            $("#CheckPasswordMatch").html("").css("color", "green");
        }
      });

      $("#pword").keyup(function () {
        var errorMessage = validatePassword();
        if(errorMessage.length > 0) {
              $("#CheckPasswordMatch").html(errorMessage).css("color", "red");
              $(':input[type="submit"]').prop('disabled', true);
        }
        else {
              $("#CheckPasswordMatch").html("").css("color", "green");
              $(':input[type="submit"]').prop('disabled', false);
        }
      });

        function validatePassword() {
            var passwordValue = $("#pword").val();
            if (passwordValue.length == 0) {
              return "Password is empty";
            }
            if (passwordValue.length < 8) {
              return "Password length is less than 8 characters";
            }
            if (!passwordValue.match(/[A-z]/) ) {
              return "Password does not contain alphabets";
            }

            //validate capital letter
            if ( !passwordValue.match(/[A-Z]/) ) {
              return "Password does not contain capital letters";
            }

            //validate number
            if ( !passwordValue.match(/\d/) ) {
              return "Password does not contain numeric value";
            }

            return "";
          }
 

    });
  </script>
{% endblock %}