<?php
session_start();
include('../login/check_flogin.php');

if (!isset($_SESSION['student_id'])) {
    header("Location: ../login/student_login.php");
    exit();
}

$con = mysqli_connect("localhost", "root", "", "WSAS");

if (!$con) {
    die("Database connection failed");
}

$student_id = $_SESSION['student_id'];

// Student Data 
$sql = "SELECT * FROM adminstudent WHERE student_id = ?";
$stmt = mysqli_prepare($con, $sql);
mysqli_stmt_bind_param($stmt, "i", $student_id);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
$student = mysqli_fetch_assoc($result);

// Determine if T&C modal should show
$showTermsModal = false;
if ($student['accepted_terms'] == 0) {
    $showTermsModal = true; // show modal if not yet accepted
}

// Handle form submission for accepting T&C
if (isset($_POST['accept_terms'])) {
    $updateTerms = mysqli_prepare($con, "UPDATE adminstudent SET accepted_terms = 1 WHERE student_id = ?");
    mysqli_stmt_bind_param($updateTerms, "i", $student_id);
    mysqli_stmt_execute($updateTerms);

    $_SESSION['accepted_terms'] = 1;  // for session tracking
    $showTermsModal = false;

    // Reload page to remove modal
    header("Location: Student_Dashboard.php");
    exit();
}

// For image update
if (isset($_POST['update_image'])) {
    if (isset($_FILES['new_image']) && $_FILES['new_image']['error'] == 0) {
        
        $fileName = $_FILES['new_image']['name'];
        $fileTmpName = $_FILES['new_image']['tmp_name'];
        $fileSize = $_FILES['new_image']['size']; 
        $fileExt = explode('.', $fileName);
        $fileActualExt = strtolower(end($fileExt));

        $allowed = ['jpg','jpeg','png'];
        $maxSize = 5000000; 

        if (!in_array($fileActualExt, $allowed)) {
            $_SESSION['error_message'] = "Invalid file type. Only JPG, JPEG, PNG allowed.";
        }

        elseif ($fileSize > $maxSize) {
            $_SESSION['error_message'] = "File too large. Maximum size is 5MB.";
        } 
        else {
            $lastName = preg_replace('/[^A-Za-z0-9]/', '', $student['l_name']); 
            $studentNum = $student['student_id_num'];

            $newFileName = $lastName . '_' . $studentNum . '.' . $fileActualExt;
            $fileDestination = '../uploads/student_photos/' . $newFileName;

            if (!is_dir('../uploads/student_photos')) {
                mkdir('../uploads/student_photos', 0777, true);
            }

            if (move_uploaded_file($fileTmpName, $fileDestination)) {
                $updateSql = "UPDATE adminstudent SET image = ? WHERE student_id = ?";
                $stmtUpdate = mysqli_prepare($con, $updateSql);
                mysqli_stmt_bind_param($stmtUpdate, "si", $newFileName, $student_id);
                mysqli_stmt_execute($stmtUpdate);
                
                $_SESSION['success_message'] = "Profile photo updated successfully!";
                header("Location: Student_Dashboard.php");
                exit();
            }
        }
    }
}

// For change pass
if (isset($_POST['change_password'])) {
    $current_password = $_POST['current_password'];
    $new_password = $_POST['new_password'];
    $confirm_password = $_POST['confirm_password'];
    
    if ($new_password !== $confirm_password) {
    $_SESSION['error_message'] = "New passwords do not match!";
    } elseif (strlen($new_password) < 6) {
        $_SESSION['error_message'] = "Password must be at least 6 characters!";
    } else {

        // Verify current password
        $stmt = mysqli_prepare($con, "SELECT pword FROM adminstudent WHERE student_id = ?");
        mysqli_stmt_bind_param($stmt, "i", $student_id);
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);
        $userPassword = mysqli_fetch_assoc($result);
        
        if (password_verify($current_password, $userPassword['pword'])) {
            $hashed = password_hash($new_password, PASSWORD_DEFAULT);
            $update = mysqli_prepare($con, "UPDATE adminstudent SET pword = ? WHERE student_id = ?");
            mysqli_stmt_bind_param($update, "si", $hashed, $student_id);
            mysqli_stmt_execute($update);
            $_SESSION['success_message'] = "Password changed successfully!";
        } else {
            $_SESSION['error_message'] = "Current password is incorrect!";
        }
    }
}

// Check students
if (!$student) {
    session_destroy();
    echo "<script>
        alert('Student not found. Please login again.');
        window.location.href='login/student_login.php';
    </script>";
    exit();
}

// Image path
$imagePath = "";

if (!empty($student['image']) && file_exists('../uploads/student_photos/' . $student['image'])) {
    $imagePath = "../uploads/student_photos/" . $student['image'];
} else {
    $imagePath = "";
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Dashboard - Student </title>

    <link rel="shortcut icon" type="x-icon" href="../images/logo.png">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" />
    <link rel="stylesheet" href="../Style/snavstyle.css">

    <style>
        .mainbar {
            margin-left: 270px; 
            flex: 1;
            padding: 10px;
            transition: all 0.4s ease;
            overflow-y: auto;
        }

        body {
            background: #F3F4F4;
        }

        .mainbar-header {
            padding: 6px 12px;
            background-color: #3e7f31;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .mainbar-header h1 {
            margin: 0;
            color: white;
            font-size: 18px;
        }

        .success-message {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
            padding: 12px 18px;
            border-radius: 10px;
            margin-bottom: 20px;
            margin-top: 40px;
            display: flex;
            align-items: center;
            gap: 10px;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            animation: slideIn 0.5s ease;
            font-size: 11px;
        }

        .success-message ion-icon {
            font-size: 20px;
        }
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .greeting-container {
            background: linear-gradient(135deg, #3e7f31, #66bb6a);
            color: white;
            padding: 12px;
            border-radius: 20px;
            margin-top: 40px;
            margin-bottom: 40px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            width: 90%;
            margin-left: auto;
            margin-right: auto;
        }

        .greeting-container h1 { 
            margin: 0; 
            font-size: 25px; 
        }
        .greeting-container p { 
            margin: 4px 0 0 0; 
            font-size: 14px; 
            opacity: 0.9; 
        }

        .profile-wrapper {
            display: flex;
            justify-content: center;
            gap: 40px;
            width: 90%;
            margin: 0 auto;
        }

        .profile-card {
            flex: 1;
            background: white;
            padding: 18px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }


        .profile-img-container {
            position: relative;
            width: 150px;
            height: 150px;
            margin-bottom: 10px; 
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .profile-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            object-position: center; 
            border: 5px solid #3e7f31;
            background-color: #eee;
        }

        .profile-name {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-top: 18px;   
            margin-bottom: 5px;
            text-align: center;
        }

        .camera-icon-wrapper {
            position: absolute;
            bottom: 6px;
            right: 6px;
            width: 35px;
            height: 35px;
            background-color: #3e7f31;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border: 3px solid white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            transition: background-color 0.3s ease;
        }

        .camera-icon-wrapper:hover {
            background-color: #2e5c25;
        }

        .camera-icon-wrapper .tooltip {
            visibility: hidden;
            width: 100px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 8px 0;
            position: absolute;
            z-index: 1;
            bottom: 120%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 11px;
            font-family: "Segoe UI", sans-serif;
        }

        .camera-icon-wrapper .tooltip::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
        }

        .camera-icon-wrapper:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }

        .camera-icon {
            color: white;
            font-size: 20px;
        }

        .info-card {
            flex: 2;
            background: white;
            padding: 0; 
            font-size: 11px;
            border-radius: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        .info-card table th,
        .info-card table td {
            font-size: 11px;
        }

        table { 
            width: 100%; 
            border-collapse: collapse; 
            font-family: "Segoe UI", sans-serif; 
        }

        table th { 
            background-color: #3e7f31; 
            color: white; 
            font-weight: bold; 
            padding: 6px 16px; 
            text-align: left; 
            width: 40%; 
            padding-left: 70px;
        }

        table td { 
            border-bottom: 1px solid #eee; 
            padding: 6px 16px; 
            color: #333; 
            padding-left: 50px;
        }

        table tr:last-child td { 
            border-bottom: none; 
        }
        
        .section-title {
            background-color: #2e5c25;
            color: white;
            padding: 8px;
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            margin: 0;
        }

        .modal {
            display: none; 
            position: fixed; 
            z-index: 100; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            background-color: rgba(0,0,0,0.5); 
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: #fefefe;
            padding: 20px; 
            border-radius: 15px;
            width: 100%;
            max-width: 400px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            box-sizing: border-box; 
        }

        .modal-content h2 {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #2b5820;
        }

        .modal-content input[type="file"] {
            width: 100%; 
            padding: 6px 16px; 
            font-size: 11px;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin-bottom: 15px;
            box-sizing: border-box;
        }

        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 5px;
        }

        .btn-save,
        .btn-cancel {
            min-width: 100px; 
            padding: 6px 16px; 
            font-size: 11px;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            border: none;
            text-align: center;
            transition: all 0.2s ease;
        }

        .btn-save {
            background-color: #4CAF50;
            color: white;
        }

        .btn-save:hover {
            background-color: #43a047;
        }

        .btn-cancel {
            background-color: #ccc;
            color: #333;
        }

        .btn-cancel:hover {
            background-color: #e0e0e0;
        }

        .modal-content .note {
            text-align: left;
            margin-top: 20px;
            font-size: 11px; 
            color: #303030;
        }
        
        .modal-content .note strong {
            color: #303030;
        }

        .modal {
            display: none; 
            position: fixed; 
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.6);
            justify-content: center;
            align-items: center;
            z-index: 10000;
        }

        /* Modal content box for T&C */
        .tc-modal-content {
            background-color: #fff;
            padding: 20px;
            max-width: 600px;
            width: 90%;
            border-radius: 8px;
            position: relative;
            font-size: 11px;
            max-height: none;
            overflow: hidden;

            display: flex;
            flex-direction: column;
        }

        .tc-modal-content h2 {
            font-size: 16px;
        }

        .tc-modal-content h3,
        .tc-modal-content strong,
        .tc-modal-content p,
        .tc-modal-content li {
            font-size: 11px;
        }

        .terms-text {
            max-height: 300px;
            overflow-y: auto;
            text-align: left;
            margin-bottom: 15px;
            padding-right: 10px;
        }
        .terms-text {
            max-height: 300px;
            overflow-y: auto;
            text-align: left;
            margin-bottom: 15px;
            padding-right: 10px;

            flex: 1; 
        }

        .checkbox-container {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 11px;
            user-select: none;
            padding: 5px 0;
        }

        .checkbox-container input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid #5f6368;
            border-radius: 4px;
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .checkbox-container input[type="checkbox"]:checked {
            background-color: #1a73e8;
            border-color: #1a73e8;
        }

        .checkbox-container input[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            left: 6px;
            top: 2px;
            width: 6px;
            height: 12px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .checkbox-container input[type="checkbox"]:hover {
            border-color: #1a73e8;
        }

        .checkbox-container label {
            cursor: pointer;
        }

        .modal-buttons {
            display: flex;
            justify-content: center;
            margin-top: 10px;
            gap: 10px;
        }

        .tc-btn-save {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 6px 16px;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn-save:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }

        #scrollWarning {
            color: red;
            display: none;
            font-size: 11px;
            margin-top: 10px;
        }

/* Tablets */
@media screen and (max-width: 768px) {
    .mainbar {
        margin-left: 0;
        padding: 8px;
        margin-top: 60px;
    }

    .mainbar-header {
        padding: 5px 10px;
        border-radius: 8px;
    }

    .mainbar-header h1 {
        font-size: 16px;
        text-align: center;
    }

    .success-message {
        width: 100%;
        font-size: 10px;
        padding: 10px 14px;
    }

    .greeting-container {
        width: 100%;
        padding: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 15px;
    }

    .greeting-container h1 {
        font-size: 20px;
    }

    .greeting-container p {
        font-size: 10px;
    }

    .profile-wrapper {
        flex-direction: column;
        align-items: center;
        width: 50%;
        gap: 20px;
    }

    .profile-card {
        width: 60%;
        max-width: 300px;
        padding: 15px;
    }

    .profile-img-container {
        width: 100px;
        height: 100px;
    }

    .profile-name {
        font-size: 14px;
    }

    .info-card {
        width: 120%;
        border-radius: 15px;
    }

    .section-title {
        font-size: 10px;
        padding: 8px;
    }

    table {
        width: 100%;
        table-layout: fixed;
    }

    table th,
    table td {
        font-size: 10px;   
        padding: 3px 6px;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    table th {
        width: 35%;
        padding-left: 20px;
    }

    table td {
        padding-left: 20px;
    }

    .camera-icon-wrapper {
        width: 30px;
        height: 30px;
    }

    .camera-icon-wrapper .tooltip {
        width: 100px;          
        font-size: 10px;        
        padding: 6px 8px;
        bottom: 130%;         
        left: 50%;
        transform: translateX(-50%);
        border-radius: 6px;
        white-space: nowrap;  
    }

    .camera-icon-wrapper .tooltip::after {
        top: 100%;
        border-width: 5px;
    }

    .camera-icon {
        font-size: 14px;
    }

    .modal {
        padding: 12px;
        align-items: center;
    }

    .modal-content {
        width: 95%;
        max-width: 420px;
        padding: 15px;
        border-radius: 12px;
    }

    .modal-content h2 {
        font-size: 10px;
        margin-bottom: 12px;
    }

    .modal-content input[type="file"] {
        font-size: 10px;
        padding: 3px;
    }

    .modal-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap; 
    }

    .btn-save,
    .btn-cancel {
        width: 100px;
        padding: 6px;
        font-size: 10px;
        min-width: 100px; 
        flex-shrink: 0;   
    }

    .modal-content .note {
        font-size: 10px;
        margin-top: 12px;
    }

    .tc-modal-content {
        width: 92%;
        max-width: 500px;
        padding: 15px;
        border-radius: 10px;
    }

    .tc-modal-content h2 {
        font-size: 10px;
        margin-bottom: 10px;
    }

    .tc-modal-content h3,
    .tc-modal-content strong,
    .tc-modal-content p,
    .tc-modal-content li {
        font-size: 10px; 
    }

    .terms-text {
        max-height: 250px;
        padding-right: 8px;
        font-size: 10px;
    }

    .checkbox-container {
        font-size: 10px;
        gap: 8px;
    }

    .checkbox-container input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .modal-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .tc-btn-save {
        width: 100%;
        font-size: 10px;
        padding: 10px;
    }

    #scrollWarning {
        font-size: 10px;
        text-align: center;
    }
}

/* Mobile phones */
@media screen and (max-width: 576px) {
    .mainbar {
        margin-top: 50px;
        padding: 10px;
    }

    .mainbar-header h1 {
        font-size: 14px;
    }

    .success-message {
        font-size: 8px;
        padding: 10px;
    }

    .greeting-container {
        padding: 10px;
    }

    .greeting-container h1 {
        font-size: 16px;
    }

    .greeting-container p {
        font-size: 8px;
    }

    .profile-wrapper {
        width: 80%;
    }

    .profile-card {
        width: 80%;
        max-width: 230px;
    }

    .profile-img-container {
        width: 90px;
        height: 90px;
    }

    .profile-name {
        font-size: 10px;
        margin-top: 10px;
    }

    .info-card {
        width: 90%;
    }

    table {
        width: 100%;
        table-layout: fixed;
    }

    table th,
    table td {
        font-size: 9px;
        padding: 4px 6px;
    }

    table th {
        padding-left: 12px;
    }

    table td {
        padding-left: 12px;
    }

    .camera-icon-wrapper {
        width: 26px;
        height: 26px;
    }

    .camera-icon {
        font-size: 12px;
    }

    .camera-icon-wrapper .tooltip {
        font-size: 9px;
        width: 90px;
        padding: 5px;
    }

    .modal-content {
        width: 95%;
        padding: 12px;
    }

    .modal-content .note {
        font-size: 8px;
        margin-top: 12px;
    }

    .modal-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 6px;
    }

    .btn-save,
    .btn-cancel {
        width: 90px;
        font-size: 8px;
        padding: 6px;
    }

    .tc-modal-content {
        width: 95%;
        padding: 12px;
    }

    .terms-text {
        max-height: 220px;
        font-size: 8px;
    }

    .checkbox-container {
        font-size: 8px;
    }

    .tc-btn-save {
        font-size: 8px;
        padding: 8px;
    }
}

/* For smaller phones*/
@media screen and (max-width: 400px) {

    .mainbar {
        margin-top: 50px;
        padding: 8px;
    }

    .mainbar-header h1 {
        font-size: 12px;
        text-align: center;
    }

    .success-message {
        font-size: 9px;
        padding: 8px 10px;
        width: 100%;
    }

    .greeting-container {
        padding: 8px;
        margin-top: 15px;
        margin-bottom: 15px;
        border-radius: 12px;
    }

    .greeting-container h1 {
        font-size: 14px;
    }

    .greeting-container p {
        font-size: 10px;
    }

    .profile-wrapper {
        width: 70%;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .profile-card {
        width: 100%;
        max-width: 260px;
        padding: 12px;
    }

    .profile-img-container {
        width: 85px;
        height: 85px;
    }

    .profile-name {
        font-size: 10px;
    }

    .info-card {
        width: 100%;
        border-radius: 12px;
    }

    .section-title {
        font-size: 8px;
        padding: 6px;
    }

    table {
        width: 100%;
        table-layout: fixed;
    }

    table th,
    table td {
        font-size: 8px;
        padding: 3px 5px;
        padding-left: 10px;
        word-wrap: break-word;
    }

    table th {
        width: 40%;
    }

    .camera-icon-wrapper {
        width: 25px;
        height: 25px;
    }

    .camera-icon {
        font-size: 12px;
    }

    .camera-icon-wrapper .tooltip {
        font-size: 8px;
        width: 85px;
        padding: 5px 6px;
    }

    .modal-content {
        width: 95%;
        padding: 12px;
        border-radius: 12px;
    }

    .modal-content h2 {
        font-size: 8px;
    }

    .modal-content input[type="file"] {
        font-size: 8px;
        padding: 3px;
    }

    .modal-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 6px;
    }

    .btn-save,
    .btn-cancel {
        font-size: 8px;
        padding: 3px;       
        display: inline-block; 
    }

    .tc-modal-content {
        width: 95%;
        padding: 12px;
    }

    .tc-modal-content h2 {
        font-size: 8px;
    }

    .tc-modal-content h3,
    .tc-modal-content strong,
    .tc-modal-content p,
    .tc-modal-content li {
        font-size: 8px;
    }

    .terms-text {
        max-height: 200px;
        font-size: 8px;
        padding-right: 6px;
    }

    .checkbox-container {
        font-size: 8px;
    }

    .checkbox-container input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

    .tc-btn-save {
        font-size: 8px;
        padding: 8px;
        width: 100%;
    }

    #scrollWarning {
        font-size: 8px;
    }
}
</style>
</head>

<body>
    <?php include('studentnav.php'); ?>

    <aside class="mainbar">
        <div class="mainbar-header">
            <h1> Dashboard </h1>
        </div>

        <?php if (isset($_SESSION['success_message'])): ?>
            <div class="success-message" id="successMessage">
                <ion-icon name="checkmark-circle"></ion-icon>
                <?php 
                    echo $_SESSION['success_message'];
                    unset($_SESSION['success_message']);
                ?>
            </div>
        <?php endif; ?>

        <div class="greeting-container">
            <h1> Hi, <?php echo $student['f_name']; ?>!</h1>
            <p> Welcome to Web-based Student Account System. </p>
        </div>

        <div class="profile-wrapper">
            <div class="profile-card">
                <div class="profile-img-container">
                    <img id="profileImage" src="<?php echo $imagePath . '?t=' . time(); ?>" class="profile-img">
                    <div class="camera-icon-wrapper" onclick="document.getElementById('imageModal').style.display='flex'">
                        <ion-icon name="camera" class="camera-icon"></ion-icon>
                        <span class="tooltip"> Change Photo </span>
                    </div>
                </div>
                
                <h2 class="profile-name">
                    <?php echo $student['f_name'] . " " . $student['l_name']; ?>
                </h2>
            </div>

            <div class="info-card">
                <div class="section-title"> PERSONAL INFORMATION </div>
                <div class="table-container">
                    <table>
                        <tr>
                            <th> Student ID Number </th>
                            <td><?php echo $student['student_id_num']; ?></td>
                        </tr>
                        <tr>
                            <th> Full Name </th>
                            <td>
                                <?php 
                                echo $student['f_name'] . " " . 
                                    $student['m_name'] . " " . 
                                    $student['l_name']; 
                                ?>
                            </td>
                        </tr>
                        <tr>
                            <th> Email </th>
                            <td><?php echo $student['email']; ?></td>
                        </tr>
                        <tr>
                            <th> Sex </th>
                            <td><?php echo $student['sex']; ?></td>
                        </tr>
                        <tr>
                            <th> Course </th>
                            <td>
                                <?php
                                    $course_id = $student['course_id'];
                                    $course_query = mysqli_query($con, "SELECT course_name FROM admincourse WHERE course_id = '$course_id'");
                                    $course = mysqli_fetch_assoc($course_query);
                                    echo $course['course_name'];
                                ?>
                            </td>
                        </tr>

                        <tr>
                            <th> Year Level </th>
                            <td>
                                <?php
                                    $year_query = mysqli_query($con, "SELECT year_level FROM enroll_student WHERE student_id = '$student_id' ORDER BY enroll_id DESC LIMIT 1");
                                    $year = mysqli_fetch_assoc($year_query);
                                    echo $year['year_level'] . " Year";
                                ?>
                            </td>
                        </tr>
                        <tr>
                            <th> Semester </th>
                            <td>
                                <?php
                                    $sem_query = mysqli_query($con, "SELECT semester FROM enroll_student WHERE student_id = '$student_id' ORDER BY enroll_id DESC LIMIT 1");
                                    $sem = mysqli_fetch_assoc($sem_query);
                                    echo $sem['semester'] . " Semester";
                                ?>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </aside>

    <!-- Terms & Conditions Modal -->
    <div id="termsModal" class="modal">
        <div class="modal-content tc-modal-content">
            <h2>TERMS AND CONDITIONS</h2>

            <div class="terms-text">
                <p>By accessing and using this system, you agree to the following terms and conditions:</p> <br>

                <strong>1. System Features</strong>
                <ul>
                    <li>Settling of school fees</li>
                    <li>Viewing of Statement of Account</li>
                    <li>Generating examination permits (limited to download per examination period: Midterm and Final Examination)</li>
                    <li>Downloading of official receipts</li>
                </ul><br>

                <strong>2. Payment Notifications</strong>
                <p>Students will receive monthly email notifications reminding them to settle any account balances.</p><br>

                <strong>3. Payment Methods</strong>
                <p>Students may settle tuition fees through supported banking services provided by the System Administrator. Additional charges such as transaction fees are not included in the system and must be shouldered by the student.</p><br>

                <strong>4. Proof of Payment</strong>
                <p>After completing a payment, students are required to upload proof of transaction (receipt image) for verification and approval by the System Administrator.</p><br>

                <strong>5. File Upload Requirements</strong>
                <ul>
                    <li>Accepted formats: JPEG, JPG, PNG</li>
                    <li>Maximum file size: 5 MB</li>
                </ul><br>

                <strong>6. Excess Payments</strong>
                <p>Any excess payment will automatically be applied to the student’s next month’s tuition fee. If the student’s account balance is already zero, the excess amount will no longer be the responsibility of the system.</p><br>

                <strong>7. Refund Policy</strong>
                <p>The system does not process refund requests. All refund concerns must be handled directly with the designated personnel in the Cashier’s Office.</p><br>

                <strong>8. Account Responsibility</strong>
                <p>Students are responsible for reviewing their account details and ensuring that all submitted information and uploaded documents are accurate.</p><br>

                <strong>9. Account Deactivation</strong>
                <p>Student accounts will be automatically deactivated if the student fails to enroll within three (3) months from the start of the semester.</p><br>

                <strong>10. Acceptance of Terms</strong>
                <p>By using this system, you acknowledge that you have read, understood, and agreed to these Terms and Conditions.</p><br>
            </div>

            <form method="post" style="text-align:center;">
                <div class="checkbox-container">
                    <input type="checkbox" id="agreeTerms" name="agreeTerms">
                    <label for="agreeTerms">I have read and agree to the Terms and Conditions</label>
                </div>

                <div class="modal-buttons">
                    <button type="submit" id="acceptTermsBtn" class="tc-btn-save" name="accept_terms" disabled>
                        Agree & Continue
                    </button>
                </div>

                <div id="scrollWarning">
                    Please read the Terms & Conditions first before agreeing.
                </div>
            </form>
        </div>
    </div>

    <!--For updating profile pic-->
    <div id="imageModal" class="modal">
        <div class="modal-content">
            <h2> UPDATE PROFILE PICTURE </h2>
            <form action="" method="post" enctype="multipart/form-data">
                <input type="file" name="new_image" accept=".jpg,.jpeg,.png" required>
                <div class="modal-buttons">
                    <button type="submit" name="update_image" class="btn-save"> Save </button>
                    <button type="button" class="btn-cancel" onclick="document.getElementById('imageModal').style.display='none'"> Cancel </button>
                </div>

                <div class="note">
                    <strong> Note: </strong> <br>
                    Please upload a profile picture in <strong>JPEG, JPG, or PNG </strong>format. <br>
                    Maximum file size: <strong>5 MB</strong>.
                </div>
            </form>
        </div>
    </div>

    <script>
    // This is for how many secs. the success msg will appear on the screen
    setTimeout(function() {
        const msg = document.getElementById("successMessage");
        if (msg) {
            msg.style.transition = "opacity 0.5s";
            msg.style.opacity = "0";

            setTimeout(function(){
                msg.remove();
            }, 500);
        }
    }, 3000);
    </script>

    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const termsModal = document.getElementById('termsModal');
        const termsText = termsModal.querySelector('.terms-text');
        const agreeCheckbox = document.getElementById('agreeTerms');
        const acceptBtn = document.getElementById('acceptTermsBtn');
        const scrollWarning = document.getElementById('scrollWarning');

        let scrolledToBottom = false;

        // Show modal 
        <?php if ($showTermsModal): ?>
        termsModal.style.display = 'flex';
        <?php endif; ?>

        function checkScroll() {
            const scrollTop = termsText.scrollTop;
            const scrollHeight = termsText.scrollHeight;
            const clientHeight = termsText.clientHeight;
            scrolledToBottom = (scrollTop + clientHeight >= scrollHeight - 2);
            updateButtonState();
        }

        function updateButtonState() {
            if (agreeCheckbox.checked && scrolledToBottom) {
                acceptBtn.disabled = false;
                scrollWarning.style.display = "none";
            } else {
                acceptBtn.disabled = true;
            }
        }

        checkScroll();
        updateButtonState();

        termsText.addEventListener('scroll', checkScroll);
        agreeCheckbox.addEventListener('change', updateButtonState);

        acceptBtn.addEventListener('click', (e) => {
            if (!scrolledToBottom) {
                e.preventDefault();
                scrollWarning.style.display = "block";
                termsText.scrollIntoView({behavior: "smooth", block: "end"});
            }
            if (!agreeCheckbox.checked) {
                e.preventDefault();
                alert("You must check the box to agree.");
            }
        });

        termsModal.addEventListener('click', (e) => {
            if (e.target === termsModal) e.stopPropagation();
        });
    });
    </script>

    <!-- SCRIPTS -->
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>