<?php
session_start();
include('includes/database.php');
include('includes/functions.php');

$conn = new Functions();

//fetch school details from database

$sql = "SELECT * FROM general_settings";
$conn->query($sql);
$result = $conn->fetchSingle();
$admin_bg_login = $result->admin_login_bg;
$base_url = $conn->base_url();
$main_url = $conn->main_url();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Admin Login </title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
    <!-- icheck bootstrap -->
    <link rel="stylesheet" href="<?php echo $base_url; ?>plugins/icheck-bootstrap/icheck-bootstrap.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<?php echo $base_url; ?>dist/css/adminlte.min.css">
    <link rel="stylesheet" href="<?php echo $base_url; ?>plugins/toastr/toastr.min.css">
    <link rel="icon" href="<?php echo $conn->base_url()?>upload/<?php echo $result->logo; ?>"  type="image/png">

    <style type="text/css">
        body{
            background-image: url('<?php echo $base_url ."upload/". $admin_bg_login; ?>');
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-clip: border-box;
        }
        .btn-primary {
        color: #fff;
        background-color: #334722;
        border-color: #334722;
        box-shadow: none;
        }

        .btn-primary:hover {
        color: #fff;
        background-color: #517978;
        border-color: #517978;
}
.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #38582b;
    border-color: #38582b;
    box-shadow: 0 0 0 0 rgba(38,143,255,.5);
}

        .card-primary.card-outline {
    border-top: 3px solid #b1793e;
}
.btn-primary:not(:disabled):not(.disabled):active{
    background-color: #38582b;
border-color: #38582b;
}

    </style>
</head>
<body class="hold-transition login-page">
<div class="login-box">
    <!-- /.login-logo -->
    <div class="card card-outline card-primary" style="box-shadow: 0 14px 16px #646161;">
        <div class="card-header text-center">
            <p>
                <i class="fas fa-lock fa-5x" style=" background: #1b2626; padding: 30px; border-radius: 40%; color: white;"></i>
            </p>
            <a href="index" class="h1" style="color: #1b2626;;"><b>Restricted</b> Area</a>
        </div>
        <div class="card-body">
            <p class="login-box-msg">Sign in to start your session</p>

            <div>
                <div class="callout">
                    <h5 class="text-center">Demo login details: </h5>
                    <p class="text-center">
                        Username: admin <br>
                        Password: 6Letters@
                    </p>
                </div>
            </div>

            <form action="" method="post" id="login_form">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Username" name="username">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-envelope"></span>
                        </div>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <input type="password" class="form-control" placeholder="Password" name="password">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <!-- /.col -->
                    <div class="col-4" style="margin: 0 auto;">
                        <button type="submit" class="btn btn-primary btn-block" style="background-color: #382521; border-color: #382521;">Sign In</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>


            <p class="mb-1 mt-2 text-center">
                <a href="<?php echo $main_url; ?>" style="color: #374923;">Back to Home </a>
            </p>
            <div id="msg">
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="<?php echo $base_url; ?>plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?php echo $base_url; ?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="<?php echo $base_url; ?>dist/js/adminlte.min.js"></script>
<script src="<?php echo $base_url; ?>plugins/toastr/toastr.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#login_form').on('submit', function (e) {
                e.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    type: 'POST',
                    url: 'process-login.php',
                    data: formData,
                    success: function (response) {
                        $("#msg").html(response);
                    }
                });
            });
        })
    </script>
</body>
</html>
