<?php
// /elms/includes/lecturer_layout_top.php
declare(strict_types=1);

if (!isset($PAGE_TITLE)) {
    $PAGE_TITLE = 'Lecturer Portal';
}

if (!isset($ACTIVE)) {
    $ACTIVE = '';
}

$lecturer = function_exists('lecturer_user') ? lecturer_user() : [
    'name'  => $_SESSION['elms_user_name'] ?? 'Lecturer',
    'email' => $_SESSION['elms_user_email'] ?? '',
    'role'  => 'lecturer',
];

function lecturer_active(string $key, string $active): string
{
    return $key === $active ? 'active' : '';
}

function lecturer_initials(string $name): string
{
    $name = trim($name);
    if ($name === '') return 'L';

    $parts = preg_split('/\s+/', $name);
    $first = strtoupper(substr($parts[0] ?? 'L', 0, 1));
    $last  = strtoupper(substr($parts[count($parts) - 1] ?? '', 0, 1));

    return $first . ($last !== $first ? $last : '');
}

$name  = (string)($lecturer['name'] ?? 'Lecturer');
$email = (string)($lecturer['email'] ?? '');
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?= lecturer_h($PAGE_TITLE) ?> | EDEN ELMS Lecturer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        :root {
            --lec-bg: #f6f3ee;
            --lec-card: #ffffff;
            --lec-dark: #111827;
            --lec-muted: #6b7280;
            --lec-line: rgba(17, 24, 39, .08);
            --lec-gold: #b8860b;
            --lec-gold-soft: rgba(184, 134, 11, .12);
            --lec-sidebar: #111827;
            --lec-sidebar-2: #1f2937;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background:
                radial-gradient(circle at top left, rgba(184,134,11,.12), transparent 30%),
                linear-gradient(180deg, #fbfaf7 0%, var(--lec-bg) 100%);
            color: var(--lec-dark);
            font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        .lecturer-shell {
            min-height: 100vh;
            display: flex;
        }

        .lecturer-sidebar {
            width: 278px;
            background:
                linear-gradient(180deg, var(--lec-sidebar) 0%, var(--lec-sidebar-2) 100%);
            color: #fff;
            position: fixed;
            inset: 0 auto 0 0;
            z-index: 1040;
            display: flex;
            flex-direction: column;
            box-shadow: 20px 0 60px rgba(17,24,39,.18);
        }

        .lecturer-brand {
            padding: 24px 22px 18px;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

        .brand-mark {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #d4af37, #8a6508);
            color: #111827;
            font-weight: 900;
            box-shadow: 0 16px 40px rgba(212,175,55,.22);
        }

        .brand-title {
            font-weight: 800;
            letter-spacing: .2px;
            margin: 0;
            line-height: 1.1;
        }

        .brand-subtitle {
            color: rgba(255,255,255,.58);
            font-size: .78rem;
            margin: 3px 0 0;
        }

        .lecturer-nav {
            padding: 16px 14px;
            overflow-y: auto;
            flex: 1;
        }

        .nav-section-label {
            font-size: .68rem;
            text-transform: uppercase;
            letter-spacing: .14em;
            color: rgba(255,255,255,.38);
            padding: 14px 12px 8px;
            font-weight: 700;
        }

        .lecturer-nav a {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 13px;
            border-radius: 16px;
            color: rgba(255,255,255,.75);
            text-decoration: none;
            font-weight: 650;
            font-size: .94rem;
            margin-bottom: 5px;
            transition: .18s ease;
        }

        .lecturer-nav a i {
            font-size: 1.08rem;
            width: 22px;
            text-align: center;
            color: rgba(255,255,255,.62);
        }

        .lecturer-nav a:hover {
            background: rgba(255,255,255,.08);
            color: #fff;
            transform: translateX(2px);
        }

        .lecturer-nav a.active {
            background: linear-gradient(135deg, rgba(212,175,55,.24), rgba(255,255,255,.09));
            color: #fff;
            box-shadow: inset 0 0 0 1px rgba(212,175,55,.28);
        }

        .lecturer-nav a.active i {
            color: #d4af37;
        }

        .sidebar-footer {
            padding: 16px;
            border-top: 1px solid rgba(255,255,255,.08);
        }

        .mini-profile {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 12px;
            border-radius: 18px;
            background: rgba(255,255,255,.07);
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #d4af37, #f7e7a8);
            color: #111827;
            font-weight: 900;
            flex: 0 0 auto;
        }

        .mini-profile .name {
            font-weight: 750;
            font-size: .9rem;
            color: #fff;
            line-height: 1.1;
        }

        .mini-profile .role {
            color: rgba(255,255,255,.54);
            font-size: .75rem;
        }

        .lecturer-main {
            margin-left: 278px;
            width: calc(100% - 278px);
            min-height: 100vh;
        }

        .lecturer-topbar {
            height: 74px;
            position: sticky;
            top: 0;
            z-index: 1020;
            backdrop-filter: blur(18px);
            background: rgba(246,243,238,.78);
            border-bottom: 1px solid var(--lec-line);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 26px;
        }

        .page-kicker {
            color: var(--lec-muted);
            font-size: .78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .12em;
        }

        .page-title {
            margin: 2px 0 0;
            font-size: 1.25rem;
            font-weight: 850;
            color: var(--lec-dark);
        }

        .topbar-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .mobile-menu-btn {
            display: none;
            border: 0;
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(17,24,39,.08);
        }

        .profile-btn {
            border: 1px solid var(--lec-line);
            background: rgba(255,255,255,.82);
            border-radius: 18px;
            padding: 7px 10px 7px 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 12px 34px rgba(17,24,39,.06);
        }

        .profile-btn .avatar {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            font-size: .78rem;
        }

        .profile-btn .profile-name {
            font-weight: 800;
            font-size: .88rem;
            line-height: 1;
        }

        .profile-btn .profile-email {
            font-size: .72rem;
            color: var(--lec-muted);
            max-width: 190px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dropdown-menu {
            border: 1px solid var(--lec-line);
            border-radius: 18px;
            box-shadow: 0 24px 70px rgba(17,24,39,.14);
            padding: 8px;
        }

        .dropdown-item {
            border-radius: 12px;
            padding: 10px 12px;
            font-weight: 650;
        }

        .dropdown-item i {
            margin-right: 8px;
        }

        .lecturer-content {
            padding: 26px;
        }

        .lux-card {
            background: rgba(255,255,255,.9);
            border: 1px solid var(--lec-line);
            border-radius: 24px;
            box-shadow: 0 18px 55px rgba(17,24,39,.07);
        }

        .lux-card-header {
            padding: 20px 22px;
            border-bottom: 1px solid var(--lec-line);
        }

        .lux-card-body {
            padding: 22px;
        }

        .btn-lux {
            border: 0;
            background: linear-gradient(135deg, #111827, #374151);
            color: #fff;
            border-radius: 14px;
            font-weight: 800;
            padding: 10px 16px;
            box-shadow: 0 14px 30px rgba(17,24,39,.16);
        }

        .btn-lux:hover {
            color: #fff;
            transform: translateY(-1px);
        }

        .badge-lux {
            background: var(--lec-gold-soft);
            color: #7a5706;
            border: 1px solid rgba(184,134,11,.20);
            border-radius: 999px;
            padding: 7px 10px;
            font-weight: 800;
        }

        .table {
            vertical-align: middle;
        }

        .table thead th {
            font-size: .78rem;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: var(--lec-muted);
            border-bottom-color: var(--lec-line);
        }

        .form-control,
        .form-select {
            border-radius: 14px;
            border-color: var(--lec-line);
            padding: 10px 13px;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: rgba(184,134,11,.55);
            box-shadow: 0 0 0 .2rem rgba(184,134,11,.13);
        }

        @media (max-width: 992px) {
            .lecturer-sidebar {
                transform: translateX(-105%);
                transition: .22s ease;
            }

            .lecturer-sidebar.show {
                transform: translateX(0);
            }

            .lecturer-main {
                margin-left: 0;
                width: 100%;
            }

            .mobile-menu-btn {
                display: inline-grid;
                place-items: center;
            }

            .lecturer-topbar {
                padding: 0 16px;
            }

            .lecturer-content {
                padding: 18px;
            }

            .profile-btn .profile-text {
                display: none;
            }
        }
    </style>
</head>

<body>

<div class="lecturer-shell">

    <aside class="lecturer-sidebar" id="lecturerSidebar">
        <div class="lecturer-brand">
            <div class="d-flex align-items-center gap-3">
                <div class="brand-mark">E</div>
                <div>
                    <h1 class="brand-title fs-5">EDEN ELMS</h1>
                    <p class="brand-subtitle">Lecturer Portal</p>
                </div>
            </div>
        </div>

        <nav class="lecturer-nav">
            <div class="nav-section-label">Main</div>

            <a href="/elms/lecturer/dashboard.php" class="<?= lecturer_active('dashboard', $ACTIVE) ?>">
                <i class="bi bi-grid-1x2-fill"></i>
                <span>Dashboard</span>
            </a>

            <a href="/elms/lecturer/modules.php" class="<?= lecturer_active('modules', $ACTIVE) ?>">
                <i class="bi bi-journal-bookmark-fill"></i>
                <span>My Modules</span>
            </a>

            <a href="/elms/lecturer/content.php" class="<?= lecturer_active('content', $ACTIVE) ?>">
                <i class="bi bi-file-earmark-richtext-fill"></i>
                <span>Content</span>
            </a>

            <div class="nav-section-label">Assessments</div>

            <a href="/elms/lecturer/assessments/" class="<?= lecturer_active('assessments', $ACTIVE) ?>">
                <i class="bi bi-clipboard2-check-fill"></i>
                <span>Assessments</span>
            </a>

            <a href="/elms/lecturer/submissions.php" class="<?= lecturer_active('submissions', $ACTIVE) ?>">
                <i class="bi bi-inboxes-fill"></i>
                <span>Submissions</span>
            </a>

            <a href="/elms/lecturer/marking.php" class="<?= lecturer_active('marking', $ACTIVE) ?>">
                <i class="bi bi-pencil-square"></i>
                <span>Marking</span>
            </a>
            
            <a href="/elms/lecturer/reports.php" class="<?= ($ACTIVE ?? '') === 'reports' ? 'active' : '' ?>">
    <i class="bi bi-bar-chart"></i>
    <span>Reports</span>
</a>

            <div class="nav-section-label">Account</div>

            <a href="/elms/lecturer/profile.php" class="<?= lecturer_active('profile', $ACTIVE) ?>">
                <i class="bi bi-person-badge-fill"></i>
                <span>Profile</span>
            </a>
        </nav>

        <div class="sidebar-footer">
            <div class="mini-profile">
                <div class="avatar"><?= lecturer_h(lecturer_initials($name)) ?></div>
                <div class="overflow-hidden">
                    <div class="name text-truncate"><?= lecturer_h($name) ?></div>
                    <div class="role text-truncate">Lecturer</div>
                </div>
            </div>
        </div>
    </aside>

    <main class="lecturer-main">
        <header class="lecturer-topbar">
            <div class="d-flex align-items-center gap-3">
                <button type="button" class="mobile-menu-btn" onclick="toggleLecturerSidebar()">
                    <i class="bi bi-list fs-4"></i>
                </button>

                <div>
                    <div class="page-kicker">Lecturer Portal</div>
                    <h2 class="page-title"><?= lecturer_h($PAGE_TITLE) ?></h2>
                </div>
            </div>

            <div class="topbar-actions">
                <span class="badge-lux d-none d-md-inline-flex align-items-center gap-1">
                    <i class="bi bi-shield-check"></i>
                    Lecturer
                </span>

                <div class="dropdown">
                    <button class="profile-btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <span class="avatar"><?= lecturer_h(lecturer_initials($name)) ?></span>
                        <span class="profile-text text-start">
                            <span class="profile-name d-block"><?= lecturer_h($name) ?></span>
                            <span class="profile-email d-block"><?= lecturer_h($email ?: 'Lecturer Account') ?></span>
                        </span>
                    </button>

                    <ul class="dropdown-menu dropdown-menu-end">
                        <li>
                            <a class="dropdown-item" href="/elms/lecturer/profile.php">
                                <i class="bi bi-person-circle"></i> Profile
                            </a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="/elms/lecturer/dashboard.php">
                                <i class="bi bi-speedometer2"></i> Dashboard
                            </a>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item text-danger" href="/elms/lecturer/logout.php">
                                <i class="bi bi-box-arrow-right"></i> Logout
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>

        <section class="lecturer-content">