<?php
declare(strict_types=1);

/*
|--------------------------------------------------------------------------
| Student Digital Card
|--------------------------------------------------------------------------
*/

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';

$pdo = db();

requireStudent();

$student = currentStudent($pdo);

if (!$student) {

    studentLogout();

    redirectTo('login.php');
}

?>

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>
Student Card
</title>

<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{

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

.card-wrapper{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px 20px;
}

.student-card{

    width:100%;
    max-width:760px;

    background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

    border-radius:40px;

    overflow:hidden;

    position:relative;

    box-shadow:
        0 35px 80px rgba(15,23,42,0.25);
}

.student-card::before{

    content:'';

    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    background:
        rgba(255,255,255,0.05);

    top:-180px;
    right:-140px;
}

.card-top{

    padding:34px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:
        1px solid rgba(255,255,255,0.08);

    position:relative;
}

.logo{

    display:flex;

    align-items:center;

    gap:16px;
}

.logo-box{

    width:72px;
    height:72px;

    border-radius:24px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:34px;

    font-weight:900;
}

.logo h1{

    color:#fff;

    font-size:28px;

    font-weight:900;
}

.logo p{

    color:#cbd5e1;

    margin-top:6px;
}

.card-status{

    padding:12px 18px;

    border-radius:999px;

    background:
        rgba(34,197,94,0.14);

    color:#4ade80;

    font-weight:900;
}

.card-body{

    padding:40px;

    position:relative;
}

.student-info{

    display:flex;

    align-items:center;

    gap:28px;

    margin-bottom:40px;
}

.avatar{

    width:130px;
    height:130px;

    border-radius:34px;

    overflow:hidden;

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:48px;

    font-weight:900;
}

.avatar img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.student-details h2{

    color:#fff;

    font-size:38px;

    font-weight:900;

    margin-bottom:14px;
}

.student-details p{

    color:#cbd5e1;

    line-height:2;

    font-size:15px;
}

.info-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;
}

.info-box{

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius:24px;

    padding:22px;
}

.info-box h4{

    color:#94a3b8;

    font-size:13px;

    margin-bottom:12px;

    text-transform:uppercase;

    letter-spacing:1px;
}

.info-box p{

    color:#fff;

    font-size:20px;

    font-weight:800;

    line-height:1.7;
}

.card-footer{

    padding:26px 40px;

    border-top:
        1px solid rgba(255,255,255,0.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:#cbd5e1;

    position:relative;
}

.back-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 22px;

    border-radius:18px;

    background:#fff;

    color:#0f172a;

    font-weight:900;
}

.qr-box{

    width:120px;
    height:120px;

    border-radius:22px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#0f172a;

    font-size:14px;

    font-weight:900;

    text-align:center;

    padding:12px;
}

@media(max-width:700px){

    .student-info{

        flex-direction:column;

        text-align:center;
    }

    .info-grid{

        grid-template-columns:1fr;
    }

    .card-top,
    .card-footer{

        flex-direction:column;

        gap:20px;

        align-items:flex-start;
    }

    .student-details h2{

        font-size:30px;
    }
}

</style>

</head>

<body>

<div class="card-wrapper">

    <div class="student-card">

        <div class="card-top">

            <div class="logo">

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

                <div>

                    <h1>
                        SMI Institute
                    </h1>

                    <p>
                        Official Student Identity
                    </p>

                </div>

            </div>

            <div class="card-status">

             <?php echo strtoupper(e($student['status'] ?? 'ACTIVE')); ?> STUDENT

            </div>

        </div>

        <div class="card-body">

            <div class="student-info">

                <div class="avatar">

                    <?php if(!empty($student['profile_image'])): ?>

                        <img
                        src="../<?php echo e(ltrim((string)$student['profile_image'], '/')); ?>"
                        alt="Student">

                    <?php else: ?>

                        <?php
                        echo strtoupper(
                            substr(
                                $student['full_name'],
                                0,
                                1
                            )
                        );
                        ?>

                    <?php endif; ?>

                </div>

                <div class="student-details">

                    <h2>

                        <?php echo e($student['full_name']); ?>

                    </h2>

                    <p>

                        Student Code:
                        <?php echo e($student['student_code']); ?>

                        <br>

                        Student Card:
                        <?php
echo e(
    $student['student_card']
    ?? $student['student_card_number']
    ?? 'N/A'
);
?>

                        <br>

                        Level:
                        <?php echo e($student['final_level']); ?>

                    </p>

                </div>

            </div>

            <div class="info-grid">

                <div class="info-box">

                    <h4>
                        Email
                    </h4>

                    <p>

                        <?php
                        echo e(
                            $student['email']
                            ?? 'N/A'
                        );
                        ?>

                    </p>

                </div>

                <div class="info-box">

                    <h4>
                        Phone
                    </h4>

                    <p>

                        <?php
                        echo e(
                            $student['phone']
                            ?? 'N/A'
                        );
                        ?>

                    </p>

                </div>

                <div class="info-box">

                    <h4>
                        Country
                    </h4>

                    <p>

                        <?php
                        echo e(
                            $student['country']
                            ?? 'N/A'
                        );
                        ?>

                    </p>

                </div>

                <div class="info-box">

                    <h4>
                        Academic Status
                    </h4>

                    <p>

                   <?php echo e(ucfirst($student['status'] ?? 'approved')); ?> Student

                    </p>

                </div>

            </div>

        </div>

        <div class="card-footer">

            <div>

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

                <br>

                Cognitive Academic Gateway

            </div>

            <div class="qr-box">

                QR Verification
                <br>
                SMI-ID

            </div>

            <a
            href="dashboard.php"
            class="back-btn">

                ← Dashboard

            </a>

        </div>

    </div>

</div>

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

</body>
</html>