<?php
declare(strict_types=1);

require_once '../includes/session.php';
require_once '../includes/security.php';
require_once '../includes/csrf.php';
require_once '../includes/functions.php';

if (isset($_SESSION['admin_logged_in']) && $_SESSION['admin_logged_in'] === true) {
    header("Location: dashboard.php");
    exit;
}

$pageTitle = "Res Site Admin Login";
?>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?= e($pageTitle); ?></title>

    <link rel="stylesheet" href="../assets/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="../assets/css/adminlte.min.css">
    <link rel="stylesheet" href="../assets/css/custom.css">

</head>

<body class="hold-transition login-page">

<div class="login-box">

    <div class="card card-outline card-primary shadow">

        <div class="card-header text-center">

            <h2 class="font-weight-bold mb-0">
                RES SITE
                ADMIN
            </h2>

            <small class="text-muted">
              </small>

        </div>

        <div class="card-body">

            <?php if (!empty($_SESSION['error'])) : ?>

                <div class="alert alert-danger">

                    <?= e($_SESSION['error']); ?>

                </div>

                <?php unset($_SESSION['error']); ?>

            <?php endif; ?>

            <form action="../actions/login.php" method="POST" autocomplete="off">

                <input
                    type="hidden"
                    name="csrf_token"
                    value="<?= e(csrf_token()); ?>">

                <div class="input-group mb-3">

                    <input
                        type="text"
                        name="username"
                        class="form-control"
                        placeholder="Username"
                        required>

                    <div class="input-group-append">

                        <div class="input-group-text">

                            <span class="fas fa-user"></span>

                        </div>

                    </div>

                </div>

                <div class="input-group mb-3">

                    <input
                        type="password"
                        id="password"
                        name="password"
                        class="form-control"
                        placeholder="Password"
                        required>

                    <div class="input-group-append">

                        <div
                            class="input-group-text"
                            style="cursor:pointer"
                            onclick="togglePassword()">

                            <span id="eye" class="fas fa-eye"></span>

                        </div>

                    </div>

                </div>

                <div class="row">

                    <div class="col-12">

                        <button
                            type="submit"
                            class="btn btn-primary btn-block">

                            <i class="fas fa-sign-in-alt"></i>

                            Login

                        </button>

                    </div>

                </div>

            </form>

        </div>

    </div>

</div>

<script src="../assets/plugins/jquery/jquery.min.js"></script>
<script src="../assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/adminlte.min.js"></script>

<script>

function togglePassword(){

    let password=document.getElementById("password");

    let eye=document.getElementById("eye");

    if(password.type==="password"){

        password.type="text";

        eye.classList.remove("fa-eye");

        eye.classList.add("fa-eye-slash");

    }else{

        password.type="password";

        eye.classList.remove("fa-eye-slash");

        eye.classList.add("fa-eye");

    }

}

</script>

</body>
</html>