<!DOCTYPE html>
<html>

<head>
    <title>LogIn</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/AdminLTE.min.css">

    <style>
    .height-45 {
        height: 45px;
        font-size: 18px;
    }

    .login-title {
        color: #000;
        float: right;
        display: inline-block;
        margin: 0px;
        margin-right: 10px;
    }

    .bodyColor {
        background: -webkit-linear-gradient(-29deg, #E72026, #E72026 100%);
        background: -o-linear-gradient(-29deg, #E72026, #E72026 100%);
        background: linear-gradient(-29deg, #E72026, #E72026 100%);
    }

    #submitbtn {
        background-color: #040404;
        border-color: #000000;
    }

    input {
        background-color: #fff;
    }

    .logo {
        background: -webkit-linear-gradient(-29deg, rgba(35, 59, 136, 1) 100%, rgba(193, 15, 65, 1) 0);
        background: -o-linear-gradient(-29deg, rgba(35, 59, 136, 1) 100%, rgba(193, 15, 65, 1) 0);
        background: linear-gradient(-29deg, rgba(35, 59, 136, 1) 100%, rgba(193, 15, 65, 1) 0);

    }

    .box {
        background: #fff;
    }

    .box-header {
        margin: 10px 20px;
    }
    </style>

</head>

<body class="bodyColor">

    <div style="position:relative;">

        <section class="content"
            style="position:absolute;width: 100%;transform: translate(0%, 50%);text-align: center;">
            <!-- Small boxes (Stat box) -->
            <div class="row">
                <div class="col-lg-4"></div>
                <div class="col-lg-4 col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <img src="./images/logo/logo.png" style="width:35%;float:left;" />
                            <h2 class="login-title">Login</h2>
                        </div>

                        <form id="login_form" class="form-horizontal">
                            <div class="box-body">
                                <div class="form-group">
                                    <div class="col-sm-10 col-sm-offset-1">
                                        <input type="text" class="form-control height-45" id="username" name="username"
                                            placeholder="Username" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-10 col-sm-offset-1">
                                        <input type="password" class="form-control height-45" id="password"
                                            name="password" placeholder="Password" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-10 col-sm-offset-1">
                                        <button type="submit" class="btn btn-info height-45" id="submitbtn"
                                            style="width: 100%;">Login</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-lg-4"></div>
            </div>
        </section>
    </div>

    <!-- jQuery 3 -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <!-- jQuery UI 1.11.4 -->
    <script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <script>
    $(document).ready(function() {
        $("form#login_form").submit(function(event) {
            event.preventDefault();
            $('#submitbtn').text("Login...");
            $('#submitbtn').attr('disabled', true);

            $.ajax({
                url: 'adminloginprocess.php',
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    if (response == "ok") {
                        $('#submitbtn').text("Login");
                        $('#submitbtn').attr('disabled', false);
                        setTimeout(function() {
                            window.location.href = "./index.php";
                        }, 1000);
                    } else {
                        alert(response);
                        $('#submitbtn').text("Login");
                        $('#submitbtn').attr('disabled', false);
                    }
                }
            });
        });
    });
    </script>

</body>

</html>