<?php  include'hold/from.php'; ?>
<?php  include'hold/top.php'; ?>

<div class="container my-auto">
    <div class="card col-lg-8 mx-auto">
        <div class="row">
            <div class="col-lg-6">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-primary shadow-primary border-radius-lg py-3 pe-1">
                        <div class="row mt-3">
                          <div class="col-12 text-center px-1">
                              <img src="img/logo.png" class="avatar avatar-xxl shadow-xl position-relative bg-white z-index-2">
                          </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <h6>Forgot password?</h6>
                    <p>No worries, we'll send you reset information</p>
                </div>
            </div>
            <div class="col-12 col-lg-6"  id="form">
                <div class="card z-index-0 fadeIn3 fadeInBottom">
                    <div class="card-body">
                        <form role="form" class="text-start" action="" method="POST" id="request-otp">
                            <input type="hidden" class="form-control" name="action" value="request-otp">
                            <label class="form-label">Provide email associated with your account</label>
                            <div class="input-group input-group-outline my-3"> 
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control" name="identifier" required>
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn bg-gradient-primary w-100 my-4 mb-2"><span id="spinner"></span>&nbsp;<span id="indicator">Continue</span></button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer text-center"> 
                        <a class="d-flex cursor-pointer" href="/login"><i class="fa fa-arrow-left opacity-6 me-2 mt-1 text-md"></i>Back to login</a>
                    </div>
                </div>
            </div>  
            <div class="col-12 col-lg-6" id="otp" hidden>
                <div class="card z-index-0 fadeIn3 fadeInBottom">
                    <div class="card-body">
                        <form role="form" class="text-start" action="" method="POST" id="verify-otp">
                            <input type="hidden" class="form-control" name="action" value="verify-otp">
                            <label class="form-label">Provide the code you received</label>
                            <div class="input-group input-group-outline my-3" hidden> 
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control" name="otp-email" id="otp-email" readonly>
                            </div>
                            <div class="input-group input-group-outline my-3">
                                <label class="form-label">OTP</label>
                                <input type="number" class="form-control" name="otp" id="otpInput" required>
                            </div>
                            <div class="text-center">
                                <button type="submit" id="reset" class="btn bg-gradient-primary w-100 my-4 mb-2"><span id="spinner2"></span>&nbsp;<span id="indicator2">Continue</span></button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer text-center">
                        <button class="btn btn-light d-flex cursor-pointer" id="resend"><span id="spinner3"></span>&nbsp;<span id="indicator3"><i class="fa fa-envelope opacity-6 me-2 mt-1 text-md"></i>Resend code</span></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php  include'hold/end.php'; ?>
<?php  include'hold/orgin.php'; ?>

<script>
    const otpInput = document.getElementById('otpInput');
    const resetButton = document.getElementById('reset');
    otpInput.addEventListener('input', function() {
        const maxLength = 6;
        const minLength = 6;
        const inputValue = otpInput.value.toString().trim();
    
        if (inputValue.length > maxLength) {
            otpInput.value = inputValue.slice(0, maxLength);
        } else if (inputValue.length < minLength) {
            resetButton.disabled = true;
        }
        else{
            resetButton.disabled = false;
        }
    });
</script>

<script>
    $(document).ready(function(){
        $("#request-otp").submit(function(e){
            e.preventDefault();
            const email = $("input[name=identifier]").val();
            const formdata = new FormData(this);
            $("#request-otp :input").prop("disabled", true);
            $('#spinner').html("<img src='/img/ajax-loader.gif' width='15'>").fadeIn('fast');
            $('#indicator').html("Processing");
            $.ajax({
                url: "/files/users/controller.php",
                type: "POST",
                data: formdata,
                dataType: "JSON", 
                contentType: false,
                cache: false,
                processData: false,
                success: function(data){
                    $('#spinner').hide();
                    $('#indicator').html("Continue");
                    $("#request-otp :input").prop("disabled", false);
                    if(data.status == 200){
                        pop_up_success(data.message);
                        $("#form").attr("hidden", true);
                        $("#otp-email").val(email);
                        $("#otp").attr("hidden", false);
                    }
                    else{
                        pop_info(data.message);
                    }
                },error: function(){
                    $('#spinner').hide();
                    $('#indicator').html("Continue");
                    pop_wrong("Something went wrong!");
                    $("#request-otp :input").prop("disabled", false);
                }
            });
        });
        $("#resend").click(function(e){
            var formdata = {
                identifier: $("#otp-email").val(),
                action: 'request-otp'
            };
            $("#verify-otp :input").prop("disabled", true);
            $('#spinner3').html("<img src='/img/ajax-loader.gif' width='15'>").fadeIn('fast');
            $('#indicator3').html("Processing");
            $.ajax({
                url: "/files/users/controller.php",
                type: "POST",
                data: formdata,
                dataType: "JSON", 
                cache: false,
                success: function(data){
                    $("#verify-otp :input").prop("disabled", false);
                    $('#spinner3').hide();
                    $('#indicator3').html("RESEND CODE");
                    if(data.status == 200){
                        pop_up_success(data.message);
                    }
                    else{
                        pop_info(data.message);
                    }
                },error: function(){
                    $('#spinner3').hide();
                    $('#indicator3').html("RESEND CODE");
                    pop_wrong("Something went wrong!");
                    $("#verify-otp :input").prop("disabled", false);
                }
            });
        });
        
        $("#verify-otp").submit(function(e){
            e.preventDefault();
            const email = $("#otp-email").val();
            const formdata = new FormData(this);
            $("#verify-otp :input").prop("disabled", true);
            $('#spinner2').html("<img src='/img/ajax-loader.gif' width='15'>").fadeIn('fast');
            $('#indicator2').html("Processing");
            $.ajax({
                url: "/files/users/controller.php",
                type: "POST",
                data: formdata,
                dataType: "JSON", 
                contentType: false,
                cache: false,
                processData: false,
                success: function(data){
                    $('#spinner2').hide();
                    $('#indicator2').html("Continue");
                    if(data.status == 200){
                        window.location.href = "/create_password?ac="+email; 
                    }
                    else{
                        pop_info(data.message);
                        $("#verify-otp :input").prop("disabled", false);
                    }
                },error: function(){
                    $('#spinner2').hide();
                    $('#indicator2').html("Continue");
                    pop_wrong("Something went wrong!");
                    $("#verify-otp :input").prop("disabled", false);
                }
            });
        });
    });
    
 </script>
