<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="input-group mb-3">
            <span class="input-group-text" id="basic-addon1"><i class="fa-solid fa-user"></i></span>
            <input type="text" autocomplete="off" class="form-control email" placeholder="Username/Email" aria-label="Username/Email" aria-describedby="basic-addon1">
        </div>
        <!--Input Password-->
        <div class="d-flex w-100 flex-column mb-3">
            <div class="input-group ">
                <span class="input-group-text" id="basic-addon1"><i class="fa-solid fa-lock"></i></span>
                <input type="password"  autocomplete="off"  class="form-control password" placeholder="Password" aria-label="Password" aria-describedby="basic-addon1">
            </div>
            <span>
                <a href="?reset_password" class="float-end text-decoration-none text-muted " id="general-text">Forgot Password</a>
            </span>
        </div>
        <!--Login Button-->
        <button type="button" class="btn login  bg-major-primary text-white btn-block">Login</button>


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

</div>




</div>

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

        
        jQuery("button.login").on("click",function(){
            var reset_text = "Login";
            var email = jQuery("input.email").val();
            var password = jQuery("input.password").val();

            if(email == ""){
                showToast("Input A Valid Username/Email","red");
                return;
            }
            else if(password == ""){
                showToast("Input A Valid Password","red");
                return;
            }

            var data = {
                'username':email,
                'password':password,
            };

            jQuery(this).text("Processing...");
                    jQuery.ajax({
                    url:"/wp-content/plugins/vtupress/logit.php",
                    method:"POST",
                    data:data,
                    error: function (jqXHR, exception) {
                        jQuery("button.login").text(reset_text);

                        var msg;
                        if (jqXHR.status === 0) {
                            msg = "No Network!";

                        }
                        else if (exception === "timeout") {
                            msg = "Timed Out";

                        }
                        else if (exception === "abort") {
                            msg = "Ajax Request Aborted";

                        }else{
                            msg = jqXHR.status;

                        }

                        showToast(msg,"red");

                    },
                    success:function(data){
                        jQuery("button.login").text(reset_text);


                        
                        var msg;
                        var color;
                        if(data.includes("100")){
                            msg = "Successful";

                            jQuery("button.login").text("Hold...");
                            setTimeout(function(){
                                location.reload();
                            },1000);
                            color = "green";

                        }
                        else if(data.includes("Wrong")){
                            msg = "Wrong Credentials";

                            color = "red";
                            showToast(msg,color);
                        }
                        else{

                            //convert data to json and extract the message
                            var obj = JSON.parse(data);
                            msg = obj.message;
                            color = "red";
                            showToast(msg,color);


                        }
                        



                    }
                });

        });

    });



</script>