<?php
declare(strict_types=1);

/*
|--------------------------------------------------------------------------
| Student Login
|--------------------------------------------------------------------------
*/

require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/db.php';
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/student-auth.php';
require_once __DIR__ . '/includes/lang.php';

$pdo = db();

if (isStudentLoggedIn()) {

    redirectTo('student/dashboard.php');
}

$error = '';

if (isPost()) {

    requirePostCsrf();

    $studentCode =
        strtoupper(
            trim($_POST['student_code'] ?? '')
        );

    $studentCard =
        strtoupper(
            trim($_POST['student_card'] ?? '')
        );

    if (
        $studentCode === ''
        ||
        $studentCard === ''
    ) {

        $error =
            'Please enter your student code and card number.';
    }

    else {

        $login =
            studentLogin(

                $pdo,
                $studentCode,
                $studentCard

            );

        if ($login) {

            redirectTo(
                'student/dashboard.php'
            );
        }

        $error =
            'Invalid login credentials.';
    }
}

?>

<!DOCTYPE html>
<html
lang="<?php echo e($currentLang); ?>"
dir="<?php echo e(currentDirection()); ?>">

<head>

<meta charset="UTF-8">

<meta
name="viewport"
content="width=device-width, initial-scale=1.0">

<title>

Student Login

</title>

<link
rel="preconnect"
href="https://fonts.googleapis.com">

<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin>

<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet">

<link
rel="stylesheet"
href="assets/css/style.css">

<style>

body{

    min-height:100vh;

    background:
    linear-gradient(
        135deg,
        #eff6ff,
        #f8fafc
    );

    position:relative;

    overflow:hidden;
}

.bg-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:0.18;
}

.bg-shape.one{

    width:380px;
    height:380px;

    background:#2563eb;

    top:-120px;
    left:-100px;
}

.bg-shape.two{

    width:420px;
    height:420px;

    background:#7c3aed;

    bottom:-150px;
    right:-120px;
}

.login-wrapper{

    position:relative;

    z-index:2;
}

.login-card{

    position:relative;

    overflow:hidden;
}

.login-card::before{

    content:'';

    position:absolute;

    top:-120px;
    right:-120px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        rgba(37,99,235,0.08),
        rgba(124,58,237,0.08)
    );
}

.login-top{

    text-align:center;

    margin-bottom:34px;

    position:relative;
}

.login-logo{

    width:88px;
    height:88px;

    margin:auto;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    font-weight:900;

    margin-bottom:22px;

    box-shadow:
        0 20px 40px rgba(37,99,235,0.25);
}

.login-top h1{

    font-size:40px;

    font-weight:900;

    margin-bottom:12px;

    color:#0f172a;
}

.login-top p{

    color:#64748b;

    line-height:1.9;
}

.login-btn{

    width:100%;

    border:none;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#fff;

    padding:18px;

    border-radius:22px;

    font-size:16px;

    font-weight:900;

    cursor:pointer;

    transition:0.25s;
}

.login-btn:hover{

    transform:translateY(-2px);
}

.login-footer{

    text-align:center;

    margin-top:26px;

    color:#64748b;

    font-size:14px;

    line-height:1.8;
}

.lang-switch{

    position:absolute;

    top:26px;
    right:26px;

    display:flex;

    gap:10px;
}

.lang-switch a{

    padding:10px 14px;

    border-radius:14px;

    background:#fff;

    border:1px solid #e2e8f0;

    color:#0f172a;

    font-weight:800;
}

.lang-switch a.active{

    background:#2563eb;

    color:#fff;
}

.input-icon{

    position:relative;
}

.input-icon input{

    padding-left:56px;
}

.icon{

    position:absolute;

    top:50%;
    left:18px;

    transform:translateY(-50%);

    font-size:20px;

    opacity:0.6;
}

@media(max-width:700px){

    .login-top h1{

        font-size:32px;
    }
}

</style>

</head>

<body>

<div class="bg-shape one"></div>
<div class="bg-shape two"></div>

<div class="lang-switch">

    <a
    href="?lang=en"
    class="<?php echo $currentLang === 'en' ? 'active' : ''; ?>">

        EN

    </a>

    <a
    href="?lang=ar"
    class="<?php echo $currentLang === 'ar' ? 'active' : ''; ?>">

        AR

    </a>

</div>

<div class="login-wrapper">

    <div class="login-card">

        <div class="login-top">

            <div class="login-logo">
                S
            </div>

            <h1>
                Student Gateway
            </h1>

            <p>

                Login using your
                SMI student code
                and your official
                student card number.

            </p>

        </div>

        <?php if($error): ?>

            <div class="alert alert-danger">

                <?php echo e($error); ?>

            </div>

        <?php endif; ?>

        <form method="POST">

        <?php echo csrfField(); ?>

            <div class="form-group">

                <label>

                    Student Code

                </label>

                <div class="input-icon">

                    <span class="icon">
                        🎓
                    </span>

                    <input
                    type="text"
                    name="student_code"
                    class="form-control"
                    placeholder="SMI00001"
                    required>

                </div>

            </div>

            <div class="form-group">

                <label>

                    Student Card Number

                </label>

                <div class="input-icon">

                    <span class="icon">
                        🪪
                    </span>

                    <input
                    type="text"
                    name="student_card"
                    class="form-control"
                    placeholder="SMI-ELD-220112"
                    required>

                </div>

            </div>

            <button
            type="submit"
            class="login-btn">

                Login To Gateway

            </button>

        </form>

        <div class="login-footer">

            © <?php echo date('Y'); ?>

            SMI Institute —
            Cognitive Academic Gateway

        </div>

    </div>

</div>

<script src="assets/js/app.js"></script>

</body>
</html>