

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="Content-Language" content="en">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Analytics Dashboard - This is an example dashboard created using build-in elements and components.</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
        <meta name="description" content="This is an example dashboard created using build-in elements and components.">
        <meta name="msapplication-tap-highlight" content="no">

        <script type="text/javascript" src="custom_js/jquery.min.js"></script>

        <link href="./main.css" rel="stylesheet"></head>
    <body>
        <div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
            <div class="app-header header-shadow">
                <div class="app-header__logo">
                    <div class="logo-src"></div>
                </div>
            </div>    
            <!--<div class="app-main" style="background-color: rgba(33, 91, 222, 0.28);background-image: url(assets/images/hd1.jpg)">-->
                <div class="app-main" style="background-color: rgba(33, 91, 222, 0.28);">
                <div style="margin-left: 40px;margin-top: 20px">
                    <!--<img src="assets/images/123.jpg">-->
                    <div style="margin-left: 225px">
                        <!--<img src="assets/images/123.jpg">-->
                    </div>

                </div>

                <div class="app-main__outer">
                    <div class="app-main__inner">
                        <div class="tab-content">
                            <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-6" style="margin-left: 200px">
                                        <div class="main-card mt-5 card">
                                            <div class="card-body"><h5 class="card-title">Login</h5>
                                                <form class="" method="post">

                                                    <div class="position-relative form-group">
                                                        <label for="Username" class="">Username</label>
                                                        <input name="Username" id="username" placeholder="Username" type="text" class="form-control">
                                                        <div id="msg_username"></div>
                                                    </div>
                                                    <div class="position-relative form-group">
                                                        <label for="Password" class="">Password</label>
                                                        <input name="Password" id="password" placeholder="Password" type="password" class="form-control">
                                                        <div id="msg_password"></div>
                                                    </div>

                                                    <button type="button" class="mt-1 mb-2 btn btn-primary" style="float: none" id="btn-login">Login</button>
                                                    <div id="msg_login"></div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(document).ready(function () {

            $("#username").blur(function () {
                if ($("#username").val() == "")
                {
                    $("#msg_username").fadeIn(1000);
                    $("#msg_username").html(" * Username is Empty").css({'color': 'red'});
                } else
                {
                    $("#msg_username").fadeOut(5000);
                }

            })

            $("#password").blur(function () {
                var pass1 = $("#password").val();
                if (pass1 == "")
                {
                    $("#msg_password").fadeIn(1000);
                    $("#msg_password").html("* Password Can't be Empty").css("color", "#F00");
                } else
                {
                    $("#msg_password").fadeOut(5000);
                }
            })

            $('#btn-login').click(function () {
//                alert('click login');

                var username = $('#username').val();
                var password = $('#password').val();

                if (username == '')
                {
                    $("#msg_username").html(" * Username is Empty").css({'color': 'red'});
                } else if (password == '')
                {
                    $("#msg_password").html("* Password Can't be Empty").css("color", "#F00");
                } else
                {
//                    alert('success');
                    var send = {'username': username, 'password': password};
                    $.ajax({
                        url: 'PHP_Code/login_action.php',
                        type: 'POST',
                        data: send,
                        success: function (data)
                        {
                            debugger;
//                            alert('data ' + data);
                            var trimStr = $.trim(data);
                            if (trimStr == 'Login Success .....')
                            {
                                debugger;
                                $("#msg_login").html(trimStr).css({'color': 'green'});
                                window.location.href = "http://localhost/E_Bill_Software/user_dashboard.php";
                            } else
                            {
                                $("#msg_login").html(trimStr).css({'color': 'red'});
                            }
                        },
                        error: function (err) {
                            alert('error ' + err);
                        }
                    });
                }
            });
        });


    </script>
</html>