<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Log In | Member</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <!-- App favicon -->
        <link rel="shortcut icon" href="public/assets/images/favicon.ico">

		<!-- App css -->
		<link href="public/assets/css/bootstrap-material.min.css" rel="stylesheet" type="text/css" id="bs-default-stylesheet" />
		<link href="public/assets/css/app-material.min.css" rel="stylesheet" type="text/css" id="app-default-stylesheet" />

		<link href="public/assets/css/bootstrap-material-dark.min.css" rel="stylesheet" type="text/css" id="bs-dark-stylesheet" />
		<link href="public/assets/css/app-material-dark.min.css" rel="stylesheet" type="text/css" id="app-dark-stylesheet" />

		<!-- icons -->
		<link href="public/assets/css/icons.min.css" rel="stylesheet" type="text/css" />

        <!-- css -->
        <link href="<?= base_url()."/public"; ?>/assets/css/style.css" rel="stylesheet" type="text/css" />
        <!-- jquery -->
        <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> -->

    </head>

    <body class="loading">

        <div class="account-pages mt-5 mb-5">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6 col-xl-5">
                        <div class="card">

                            <div class="card-body p-4">
                                
                                <div class="text-center w-75 m-auto">
                                  
                                        
                                              <h1>Account recovery</h1>
                                          
                                  
                                    <!-- <p class="text-muted mb-4 mt-3">Enter your email address and password to access admin panel.</p> -->
                                </div>
                                </br>
                                <form method="post" action="<?php echo base_url();?>change_password_form" method="post">
                                <input type="hidden" id="verify_otp" name="verify_otp" value="">
                                <input type="hidden" id="user" name="user" value="<?= session()->getTempdata('user'); ?>">
                                   
                                <div id="alert1"></div>


                                <?php if(session()->getTempdata('error')):?>
                                   <div class="alert alert-danger" id="alert">
                                   <?= session()->getTempdata('error'); ?>
                                   </div>
                                <?php endif;?>


                                    <div class="form-group mb-3">
                                        <label for="emailaddress">Email address</label>
                                        <input class="form-control" type="email" name="email" id="email" required="required" value="" placeholder="Enter your email">
                                    </div>

                                    <div class="form-group mb-3 disable" id="disable">
                                        <label for="otp">OTP</label>
                                        <div class="input-group input-group-merge">
                                            <input type="text" id="otp" name="otp" value="" required="required" class="form-control" placeholder="Enter your otp">
                                        </div>
                                    </div>

                                    </br>

                                    <div class="form-group mb-0 text-center" id="re-sub">
                                        <button class="btn btn-primary" type="submit"  id="submit1"> Get OTP </button>
                                    </div>

                                </form>

                            </div> <!-- end card-body -->
                        </div>
                        <!-- end card -->

                    </div> <!-- end col -->
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end page -->

        <footer class="footer footer-alt">
        <script>document.write(new Date().getFullYear())</script> &copy;  <a href="" class="text-dark"></a> 
        </footer>

        <!-- Vendor js -->
        <script src="public/assets/js/vendor.min.js"></script>

        <!-- App js -->
        <script src="public/assets/js/app.min.js"></script>
        
    </body>


<script>
// jQuery autohide element after 5 seconds
$('#alert').delay(3000).fadeOut('slow');
// This will disable just the div
$(".disable").hide();

$(document).on('click','#submit1',function(){
    $('#alert1').html('Please wait...');
    var email = $("#email").val();
    var url;
    var user_role = $('#user').val();
    if ($('#user').val() == 'member') { url = "<?php echo base_url();?>forgot_password" } 
    else { url = "<?php echo base_url();?>user_forgot_password" }
    $.ajax({ 
      type: "post",
      url: url,
      data: { email : email },
      json: true,
      success: function(response) {
        response = jQuery.parseJSON(response);
        if (response.status == "success") 
        {
            $('#alert1').html('');
            $(".disable").show();
            $('#verify_otp').val(response.otp);
            $("#re-sub").html('<button class="btn btn-primary btn-block" type="submit"> Submit </button>');
           window.stop();
        } 
        else
        {
            console.log(user_role);
            $('#alert1').html('');
            $('#alert1').addClass('alert alert-danger');
            if (user_role == 'member') 
            { 
                $('#alert1').html('Email is not verified.please check your mail.'); 
            } 
            else 
            { 
                $('#alert1').html('Invalid email.'); 
            }

        }
       
      },
      error: function(jqXHR, textStatus, err) { alert('text status '+textStatus+', err '+err) }
    });
});
</script>
</html>