{% extends 'base.html' %}
{% load static %}

{% block title %}
    <title>Reset Password</title>
{% endblock %}

{% block css %}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="{% static 'assets/vendors/mdi/css/materialdesignicons.min.css' %}">
    <link rel="stylesheet" href="{% static 'assets/vendors/css/vendor.bundle.base.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}">
    <link rel="shortcut icon" href="{% static 'assets/images/favicon.png' %}" />

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    
{% endblock %}


{% block content %}
  <div class="container-scroller login-1 forgot-tt">
      <div class="container-fluid page-body-wrapper full-page-wrapper">
        <div class="content-wrapper d-flex align-items-center auth">
          <div class="row flex-grow">
            <div class="col-lg-4 mx-auto">
              <div class="auth-form-light text-left p-3">
                <div class="brand-logo">
                  <img src="{% static 'images/logo1.png' %}">
                </div>
              <!--   <h4 class="hello-text">Hello! let's get started</h4> -->

              <h4 class="hello-text">Reset Password</h4>


               
                  {% csrf_token %}

                  {% ifequal user_exist True %}
                  <div class="form-group">
                    <input type="password" id="pass" class="form-control form-control-lg" placeholder="Enter New Password">
                   <!--  <span toggle="#pass" class="fa fa-fw fa-eye field-icon toggle-password"></span> -->


                   <span toggle="#pass" class="mdi fa-eye fa  menu-icon icon-eye-1-2 field-icon toggle-password"></span>
          <span class="text-danger" ></span>
                    <span class="text-danger" id="pass_txt"></span>
                  </div>
                  <div class="form-group">
                    <input type="password" id="conf_pass" class="form-control form-control-lg" placeholder="Confirm New Password">
                   <!--  <span toggle="#conf_pass" class="fa fa-fw fa-eye field-icon toggle-password"></span> -->

                   <span toggle="#conf_pass" class="mdi fa-eye fa  menu-icon icon-eye-1-2 field-icon toggle-password"></span>
          <span class="text-danger" id="password_txt"></span>
                    <span class="text-danger" id="conf_pass_txt"></span>
                  </div>
            
                  <div class="mt-3">
                    <button class="btn btn-block btn-gradient-primary btn-lg font-weight-medium auth-form-btn" id="resetpassword-btn" >RESET PASSWORD</button>
                  </div>
                  <div class="my-2 d-flex justify-content-center align-items-center">
                    <a href="/login/" class="auth-link text-black text-center">Login</a>
                  </div>
                  {% else %}
                    <h4><center>Wrong verification link</center></h4>
                  {% endifequal %}
                  
                <!-- </form> -->
              </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->
      </div>
      <!-- page-body-wrapper ends -->
    </div>


    <div class="modal fade error-popup" id="ErrorMessageModal" role="dialog" >
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header border-0">
           <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
         </div>
         <div class="modal-body">
           <h3 id="error-msg">Bad Request</h3>
           <button type="button"  id="close-btn">Ok</button>
         </div>          
       </div>
     </div>
    </div>

    
{% endblock %}

{% block js %}
    <script src="{% static 'assets/vendors/js/vendor.bundle.base.js' %}"></script>
    <script src="{% static 'assets/js/off-canvas.js' %}"></script>
    <script src="{% static 'assets/js/hoverable-collapse.js' %}"></script>
    <script src="{% static 'assets/js/misc.js' %}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!-- <script src="{% static 'js/forgotpassword.js' %}"></script> -->
  <script>
    function CheckPassword(inputtxt) 
    { 
      var decimal=  /^(?=.*[A-Z]).{6,50}$/;
      if(inputtxt.match(decimal)) 
      { 
        return true;
      }
      else
      { 
        return false;
      }
    } 
$(document).on("click","#resetpassword-btn",function(){
    $('#pass_txt').text('')
    $('#conf_pass_txt').text('')
  // debugger;
  var pass=$('#pass').val().trim()
  var conf_pass= $('#conf_pass').val().trim()
  if(pass==""){
    $('#pass_txt').text('Enter Password')
    $('#pass').focus()
    return false
  }
  else
  {
    if(pass.length < 6)
    {
        $('#pass_txt').text('Password should contain minimum 6 characters.')
        $( "#pass" ).focus();
        return false;
    }
    else if(pass.length > 50)
    {
        $('#pass_txt').text('Password should contain maximum 50 characters.')
        $( "#pass" ).focus();
        return false;
    }
    else 
    {
        if(CheckPassword(pass))
        {
            if(/\s/g.test(pass))
            {
              $('#pass_txt').text('Password can not contain space.')
              $( "#pass" ).focus();
              return false;
            }
          
        }
        else
        {
            $('#pass_txt').text('Password should contain atleast one uppercase letter.')
            $( "#pass" ).focus();
            return false;     
        }
    }
  }
  if(conf_pass==""){
    $('#conf_pass_txt').text('Enter Confirm Password')
    $('#conf_pass').focus()
    return false
  }

   if (pass != conf_pass) { 
    $('#conf_pass_txt').text('Please ensure both these passwords match')
      $('.error').show()
      return false; 
  } 
  $('.error').hide()
  var url_link=window.location.pathname

  $.ajax({
         url: '',
         type: "POST",
         data: 
             {
                 "pass":pass,
                 "conf_pass":conf_pass,
                 "link_url" : url_link,
                 csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val()


             },
         dataType: 'json',
         cache: false,
         success: function(response){
          if(response['success']){
            $('#error-msg').text('Your password has been reset.')
              $('#ErrorMessageModal').modal('show')
            setTimeout(function () {
              window.location.href="/login/"
          }, 2000);
            
          }
          else
          {
            $('#error-msg').text('Bad Request')
              $('#ErrorMessageModal').modal('show')
          }
         }
    });  
  })

</script>
<script>
  $(".toggle-password").click(function() {
  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});
</script>

{% endblock %}