<link rel="stylesheet" href="<?php echo plugins_url('opay/');?>css/login.css?ver=<?php echo $rand;?>" />


<div class="container position-relative bg-white  " id="main-page">

<div class="major1 d-flex flex-column justify-content-between" style="height:100%;">


    <div class="login-div flex-grow-1 d-flex flex-column py-5 align-items-center justify-content-center" >

        <span class="login-image">
            <img src="<?php echo get_site_icon_url( 75, '/wp-content/plugins/opay/image/vlogo.png');?>" alt="site icon" style="height:75px; width:75px;">
        </span>
        <span class="login-text mb-4 text-center d-flex flex-column">
            <span class="fw-bold">Welcome to <?php echo ucfirst($site_name);?></span>
            <span class="general-text">Please login to continue</span>
        </span>
        <!--Input Username/Email-->

        <div class="d-flex w-100 flex-column justify-content-end mb-3">
            <div class="input-group ">
                <span class="input-group-text" id="basic-addon1"><i class="fa-solid fa-at"></i></span>
                <input type="email" autocomplete="off" class="form-control email" placeholder="Username/Email" aria-label="Username/Email" aria-describedby="basic-addon1">
            </div>
            <span class="get_cod">
                <small class="text-major-primary float-end fw-bold get-code" for="password">Get Code</small>
            </span>
        </div>

        <div class="d-flex w-100 flex-column justify-content-end mb-3">
            <div class="input-group">
                <span class="input-group-text" id="basic-addon1"><i class="fa-solid fa-key"></i></span>
                <input type="number" autocomplete="off" class="form-control code" placeholder="Password Reset Code" aria-label="Password Reset Code" aria-describedby="basic-addon1">
            </div>
            <span>
                <small class="float-end text-muted " id="general-text">Click on Get Code to receive the code to enter here</small>
            </span>
        </div>
        <!--Input Password-->
        <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1"><i class="fa-solid fa-lock"></i></span>
            <input type="password"  autocomplete="off"  class="form-control new" placeholder="New Password" aria-label="New Password" aria-describedby="basic-addon1">
        </div>
        <!--Input Password-->
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1"><i class="fa-solid fa-lock"></i></span>
                <input type="password"  autocomplete="off"  class="form-control confirm" placeholder="Confirm New Password" aria-label="New Password" aria-describedby="basic-addon1">
            </div>
        <!--Login Button-->
        <button type="button" class="btn login  bg-major-primary text-white btn-block reset-password" for="reset-password">Reset Password</button>


    </div>
    
    <div class="d-flex mb-3 flex-column justify-content-center align-items-center">
        <span class="general-text">Already have an account?</span>
        <a href="/vpaccount?login" class="text-decoration-none text-major-primary">Login</a>
    </div>

</div>




</div>

<script>
    jQuery(document).ready(function(){
        hideLoader();

        jQuery(".get-code").on("click",function(){
                    var forThis = jQuery(this).attr("for");
                    var value;

                    jQuery(this).text("Sending..");

                    if(forThis == "password"){
                        value =  jQuery("input[type=email]").val();

                        if(value == ""){
                            jQuery(this).text("Get Code");
                            showToast("Enter a valid co","red");
                        }

                    }
                    else{
                        jQuery(this).text("Enter a valid email");
                        
                        setTimeout(function(){
                                jQuery(".get-code").text("Get Code");
                            },2000);

                        return;
                    }



                    jQuery.ajax({
                    url:"/wp-content/plugins/opay/saves/forgot-password.php",
                    method:"POST",
                    data:{
                        'for':forThis,
                        'email':value
                    },
                    error: function (jqXHR, exception) {
                        if (jqXHR.status === 0) {
                            jQuery(".get-code").text("No Network!");

                        }
                        else if (exception === "timeout") {
                            jQuery(".get-code").text("Timed Out");

                        }
                        else if (exception === "abort") {
                            jQuery(".get-code").text("Ajax Request Aborted");

                        }else{
                            jQuery(".get-code").text(jqXHR.status);

                        }
                    },
                    success:function(data){

                        if(data == "100"){
                            jQuery(".get-code").text("Sent!");

                        }else{
                            jQuery(".get-code").text(data);

                        }

                        setTimeout(function(){
                                jQuery(".get-code").text("Get Code");
                            },2000);

                    }
                });

                });


        jQuery(".reset-password").on("click",function(){
            var email = jQuery("input[type=email]").val();
            var password = jQuery("input[type=password].new").val();
            var confirm = jQuery("input[type=password].confirm").val();
            var code = jQuery("input[type=number]").val();
            var forThis = jQuery(this).attr("for");

            if(email == ""){
                showToast("Enter a valid email","red");
                return;
            }
            if(password == ""){
                showToast("Enter a valid password","red");
                return;
            }
            if(confirm == ""){
                showToast("Enter a valid password","red");
                return;
            }
            if(code == ""){
                showToast("Enter a valid code","red");
                return;
            }
            if(password!= confirm){
                showToast("Passwords do not match","red");
                return;
            }
            if(password.length < 8){
                showToast("Password must be at least 8 characters","red");
                return;
            }
            if(password.length > 20){
                showToast("Password must be less than 20 characters","red");
                return;
            }
            if(forThis == "reset-password"){
                jQuery(".reset-password").text("Processing..");
            }else{
                jQuery(".reset-password").text("Reset Password");
                showToast("Can't Determine","red");
                return;
            }

            jQuery.ajax({
                    url:"/wp-content/plugins/opay/saves/forgot-password.php",
                    method:"POST",
                    data:{
                        'for':forThis,
                        'email':email,
                        'password':password,
                        'code':code
                    },
                    error: function (jqXHR, exception) {
                        if (jqXHR.status === 0) {
                            jQuery(".reset-password").text("No Network!");

                        }
                        else if (exception === "timeout") {
                            jQuery(".reset-password").text("Timed Out");

                        }
                        else if (exception === "abort") {
                            jQuery(".reset-password").text("Ajax Request Aborted");

                        }else{
                            jQuery(".reset-password").text(jqXHR.status);

                        }
                    },
                    success:function(data){

                        if(data == "100"){
                            
                            showToast("Password Reset Successfully","green");
                            setTimeout(function(){
                                window.location.href = "/vpaccount?login";
                            },2000);

                        }else{
                            
                            showToast(data,"red");


                        }

                        setTimeout(function(){
                                jQuery(".reset-password").text("Reset Password");
                            },2000);

                    }
                });



        });

    });



</script>