<?php
// Initialize the session
require_once "../includes/header.php";

?>


<body class="bg-light">

    <!-- loader -->
    <div id="loader">
        <img src="assets/img/logo-icon.png" alt="icon" class="loading-icon">
    </div>
    <!-- * loader -->

    <!-- App Header -->
    <div class="appHeader no-border">
        <div class="left">
            <a href="javascript:;" class="headerButton goBack">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle"></div>
        <div class="right">
        </div>
    </div>
    <!-- * App Header -->

    <!-- App Capsule -->
    <div id="appCapsule">

        <div class="section mt-2 text-center">
            <h1>Reset password</h1>
            <h4>Type your e-mail to reset your password</h4>
        </div>
        <div class="section mt-2 mb-5 p-3">
        <form id="verifyCodeForm">
            <div class="form-group basic">
                    <div class="input-wrapper">
    <input type="email" name="email" class="form-control" placeholder="Your Email" required>
    <input type="text" name="code" maxlength="8" class="form-control mt-2" placeholder="Enter 8 digit code" required>
     </div>
  </div>
  <div id="loginLoader" class="text-center mt-3" style="display:none;">
                  <div class="spinner-border text-primary" role="status"></div>
                </div>
                
    <button type="button" id="verifyBtn" class="btn btn-primary btn-block mt-3">Verify Code</button>
</form>

<div id="newPasswordSection" style="display:none;">
     <div class="form-group basic">
                    <div class="input-wrapper">
    <input type="password" id="newPass" class="form-control mt-3" placeholder="New Password">
    <input type="password" id="newPass2" class="form-control mt-2" placeholder="Confirm Password">
     </div>
  </div>
  
  <div id="loginLoader2" class="text-center mt-3" style="display:none;">
                  <div class="spinner-border text-primary" role="status"></div>
                </div>
    <button type="button" id="resetBtn" class="btn btn-success btn-block mt-3">Update Password</button>
</div>

        </div>

    </div>
    <!-- * App Capsule -->

<div class="modal fade dialogbox" id="invalidcode" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-icon text-danger">
                <ion-icon name="close-circle"></ion-icon>
            </div>
            <div class="modal-header">
                
            </div>
            <div class="modal-body">
                Invalid or expired code
            </div>
           <div class="modal-footer"> <div class="btn-inline"> 
<a href="#" class="btn" data-dismiss="modal">CLOSE</a> </div> </div>
        </div>
    </div>
</div>

<div class="modal fade dialogbox" id="passwordmismatch" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-icon text-danger">
                <ion-icon name="close-circle"></ion-icon>
            </div>
            <div class="modal-header">
                
            </div>
            <div class="modal-body">
               Passwords do not match
            </div>
           <div class="modal-footer"> <div class="btn-inline"> 
<a href="#" class="btn" data-dismiss="modal">CLOSE</a> </div> </div>
        </div>
    </div>
</div>

    <!-- ///////////// Js Files ////////////////////  -->
    <!-- Jquery -->
    <script src="assets/js/lib/jquery-3.4.1.min.js"></script>
    <!-- Bootstrap-->
    <script src="assets/js/lib/popper.min.js"></script>
    <script src="assets/js/lib/bootstrap.min.js"></script>
    <!-- Ionicons -->
    <script src="../../../../unpkg.com/ionicons%405.0.0/dist/ionicons.js"></script>
    <!-- Owl Carousel -->
    <script src="assets/js/plugins/owl-carousel/owl.carousel.min.js"></script>
    <!-- Base Js File -->
    <script src="assets/js/base.js"></script>
    
    
    <script>
$("#verifyBtn").click(function () {
    
    $("#loginLoader").show();
    $("#verifyBtn").prop("disabled", true);
    
    $.ajax({
        url: "../includes/verify-code.php",
        type: "POST",
        data: $("#verifyCodeForm").serialize(),
        dataType: "json",
        success: function(res){
            
             $("#loginLoader").hide();
            $("#verifyBtn").prop("disabled", false);
           
            if(res.status === "success"){
                $("#verifyCodeForm").hide();
                $("#newPasswordSection").slideDown();
            }  else
                $('#invalidcode').modal('show');
            
        }
    });
});
</script>

<script>
$("#resetBtn").click(function () {
    
     $("#loginLoader2").show();
     
    if($("#newPass").val() !== $("#newPass2").val()){
         $("#loginLoader2").hide();
         $('#passwordmismatch').modal('show');
        return;
    }

    $.ajax({
        url: "../includes/reset-password-process.php",
        type: "POST",
        data: {
            email: $("input[name='email']").val(),
            code: $("input[name='code']").val(),
            password: $("#newPass").val()
        },
        dataType: "json",
        success: function(res){
            if(res.status === "success"){
                //alert("Password updated successfully");
                window.location.href = "app-login.php";
            } else {
                alert("Reset failed");
            }
        }
    });
});
</script>




</body>

