<?php
 
 require_once 'header.php';
?>

<style>
     
.myColor{
   background-color: #dc3545;  
}
.myShadow{
    box-shadow: 0 5px 10px #111;
}
.myBtn{
    border-radius: 50px;
    font-weight: bold;
    font-size: 20px;
    /* background-image: linear-gradient(to right,  #f0717e 0%,  #dc3545 100% ); */
    border: none;
}
.myBtn:hover{
    background-image: linear-gradient(to right,   #dc3545 0%,  #dc3545 100% );

}
.myHr{
    height:2px;
    border-radius: 100px;
}
.myLinkBtn{
    border-radius: 100px;
    width: 100%;
    border: 2px solid #fff;
}
@media(max-width: 720px){
    .wrapper{
        margin: 2px;
    }
}




</style>


<div class="container">
        <!-- Forgot password form start -->
        <div class="row justify-content-center mt-5" id="forgot-box" >
        <div class="col-lg-5 my-auto">
        <div class="card-group myShadow">
       
          <div class="card rounded-right p-4" style="flex-grow:1.4;">
          <h2 class="text-center font-weight-bold text-dark">Forgot your Password?</h2>
          <hr class="my-3">
          <p class="lead text-center text-secondary">To reset your password, please enter your registered email.</p>
          <form action="#" method="post" class="px-3" id="forgot-form">
          <div id="forgotAlert"></div>
          <div class="input-group input-group-lg form-group">
            <div class="input-group-prepend">
            <span class="input-group-text rounded-0">
            <i class="far fa-envelope fa-lg"></i>
            </span>
            </div>
            <input type="email" name="email" id="femail" class="form-control rounded-0" placeholder="Email" required>
          </div>
          
          <div class="form-group">
            <input type="submit" value="Reset Password" id="forgot-btn" class="btn btn-danger btn-lg btn-block myBtn">
          </div>
          </form>
          <hr class="my-1 bg-dark ">
          <p class="text-center font-weight-bolder text-dark lead"><a href="login" class="text-dark">Back to Sign In</a>  </p>
          </div>  
          
        </div>
        </div>    
    </div>

              <!-- Forgot password form end -->

    </div>










<script type="text/javascript">
  $(document).ready(function(){
     // alert('hello')

      //forgot password aajax request
      $("#forgot-btn").click(function(e){
        if($("#forgot-form")[0].checkValidity()){
          e.preventDefault();

          $("#forgot-btn").val('Please Wait...');

          $.ajax({
            url: 'assets/php/action.php',
            method: 'post',
            data: $("#forgot-form").serialize()+'&action=forgot',
            success:function(response){
             // console.log(response);
             $("#forgot-btn").val('Reset Password');
             $("#forgot-form")[0].reset();
             $("#forgotAlert").html(response);
            }
          });
        }
      });
 
});

 </script>
