<?php

$pageTitle = "Login";

require_once "../includes/auth.php";

if (is_logged_in()) {

        redirect("../dashboard/index.php");

    }

    $error = "";

    if ($_SERVER["REQUEST_METHOD"] == "POST") {

        $email = sanitize($_POST["email"]);

        $password = $_POST["password"];

        if (login($email, $password)) {

            set_flash("Welcome back!");

            redirect("../dashboard/index.php");

        }

        $error = "Invalid email or password.";

    }

    require_once "../includes/auth-header.php";

?>

<div class="overlay bg-black bg-opacity-50 w-100 h-100 position-fixed z-9 visibility-hidden opacity-0 duration-300">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="d-lg-flex bg-white">
    <div class="w-50 d-lg-flex d-none overflow-hidden">
        <img src="../assets/images/thumbs/nysc.jpg" alt="Login Image" class="w-100 h-100 object-fit-cover">
    </div>
    <div class="lg-w-50 px-24 py-32 d-flex justify-content-center align-items-center">
        <div class="max-w-540-px mx-auto">
            <div class="text-center mb-40">

                <img src="../assets/images/thumbs/nysc-logo.webp" width="90" class="mb-3">
                <h5 class="fw-bold text-success">
                    Centralized NYSC
                </h5>
                <p class="text-secondary-light">
                    Management Information System
                </p>
            </div>

            <div class="mt-32 mb-32">
                <h1 class="h6 fw-bold text-primary-light mb-8">
                    Welcome Back 👋
                </h1>
                <p class="text-sm text-secondary-light mb-0">
                    Log in to your account to continue
                </p>
            </div>
            <?php if ($flash = get_flash()) : ?>
            <div class="alert alert-success">
                <?= htmlspecialchars($flash['message']) ?>
            </div>
            <?php endif; ?>
            <?php if ($error) : ?>
            <div class="alert alert-danger">
                <?= htmlspecialchars($error) ?>
            </div>
            <?php endif; ?>
            <form action="../auth/login.php" class="d-flex flex-column gap-32 submit-form" method="POST">
                <div class="d-flex flex-column gap-16">
                    <div>
                        <label for="email" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">
                            Email Address
                            <span class="text-danger-600">*</span>
                        </label>
                        <input type="email" id="email" name="email" class="email-field form-control"
                            placeholder="Enter your email" required value="<?= htmlspecialchars(old('email')) ?>">
                    </div>

                    <div>
                        <label for="password" class="text-sm fw-semibold text-primary-light d-inline-block mb-8">
                            Password
                            <span class="text-danger-600">*</span>
                        </label>
                        <div class="position-relative">
                            <input type="password" name="password" id="password" class="password-field form-control"
                                placeholder="Enter your password" required>
                            <button type="button"
                                class="toggle-password btn p-0 border-0 bg-transparent position-absolute end-0 top-50 translate-middle-y me-16 text-secondary-light cursor-pointer ri-eye-line"
                                data-toggle="#password" aria-label="Toggle password visibility">
                            </button>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between gap-2">
                    <div class="form-check style-check d-flex align-items-center">
                        <input class="form-check-input border border-neutral-400" type="checkbox" value="" id="remeber">
                        <label class="form-check-label" for="remeber">Remember me </label>
                    </div>
                    <a href="javascript:void(0)" class="text-primary-600 fw-medium text-decoration-underline">Forgot
                        Password?</a>
                </div>
                <div class="">
                    <button type="submit"
                        class="loginBtn btn btn-primary-600 text-sm btn-sm px-12 py-16 w-100 radius-8"> Log In
                    </button>
                </div>
                <div class="text-center text-sm text-secondary-light">
                    or login as
                </div>
                <div class="d-grid sm-grid-cols-3 grid-cols-3 gap-16">
                    <a href="javascript:void(0)"
                        class="d-flex align-items-center gap-8 fw-semibold text-sm radius-6 justify-content-center flex-grow-1 bg-info-600 text-white py-10 px-8">
                        <span class="d-flex">
                            <img src="../assets/images/icons/dashboard-icon.png" alt="Icon">
                        </span>
                        <span class="">Admin</span>
                    </a>
                    <a href="javascript:void(0)"
                        class="d-flex align-items-center gap-8 fw-semibold text-sm radius-6 justify-content-center flex-grow-1 bg-warning-600 text-white py-10 px-8">
                        <span class="d-flex">
                            <img src="../assets/images/icons/student-icon.png" alt="Icon">
                        </span>
                        <span class="">Camp Officer</span>
                    </a>
                    <a href="javascript:void(0)"
                        class="d-flex align-items-center gap-8 fw-semibold text-sm radius-6 justify-content-center flex-grow-1 bg-purple-600 text-white py-10 px-8">
                        <span class="d-flex">
                            <img src="../assets/images/icons/teacher-icon.png" alt="Icon">
                        </span>
                        <span class="">LGI</span>
                    </a>
                    <a href="javascript:void(0)"
                        class="d-flex align-items-center gap-8 fw-semibold text-sm radius-6 justify-content-center flex-grow-1 bg-primary-600 text-white py-10 px-8">
                        <span class="d-flex">
                            <img src="../assets/images/icons/guardian-icon.png" alt="Icon">
                        </span>
                        <span class="">Corps Member</span>
                    </a>
                </div>
            </form>
            <div class="mt-32 text-center text-sm">
                Don't have an account?
                <a href="register.php" class="text-primary-600 fw-semibold text-decoration-underline">
                    Create an account
                </a>
            </div>
        </div>
    </div>
</div>
<?php
 require_once "../includes/auth-footer.php";
?>