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

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

require_once __DIR__ . '/elms_notifications.php';

if (!function_exists('h')) {
    function h($value) {
        return htmlspecialchars((string)$value, ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
    }
}

$current  = basename($_SERVER['PHP_SELF'] ?? '');
$userName = $_SESSION['user_name'] ?? $_SESSION['admin_name'] ?? 'Coordinator';

function coord_active($file) {
    global $current;
    return $current === $file ? 'active' : '';
}

/* ---------------- Notifications ---------------- */

$notifCount = 0;
$notifRows = [];

$notifDb = $mysqli ?? ($conn ?? null);

/*
 * Coordinator user id fallback:
 * Most coordinator pages use user/admin sessions.
 * If your coordinator id session key is different, add it here.
 */
$coordUserId = (int)(
    $_SESSION['user_id']
    ?? $_SESSION['admin_id']
    ?? $_SESSION['coordinator_id']
    ?? 1
);

if ($notifDb instanceof mysqli && $coordUserId > 0) {
    $notifCount = lms_unread_notification_count($notifDb, 'coordinator', $coordUserId);
    $notifRows  = lms_recent_notifications($notifDb, 'coordinator', $coordUserId, 6);
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Coordinator Panel | EDEN ELMS</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{
            --side-width: 260px;
            --eden-red: #b91c1c;
            --eden-dark: #111827;
            --eden-bg: #f5f6fa;
            --eden-border: #e5e7eb;
        }

        body{
            background: var(--eden-bg);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            color:#111827;
        }

        .coord-sidebar{
            position:fixed;
            top:0;
            left:0;
            bottom:0;
            width:var(--side-width);
            background:linear-gradient(180deg,#111827,#1f2937);
            color:#fff;
            z-index:1000;
            padding:18px 14px;
            overflow-y:auto;
        }

        .coord-brand{
            display:flex;
            align-items:center;
            gap:12px;
            padding:8px 8px 18px;
            border-bottom:1px solid rgba(255,255,255,.12);
            margin-bottom:14px;
        }

        .coord-logo{
            width:42px;
            height:42px;
            border-radius:14px;
            background:#fff;
            color:var(--eden-red);
            display:flex;
            align-items:center;
            justify-content:center;
            font-weight:800;
            box-shadow:0 8px 24px rgba(0,0,0,.25);
        }

        .coord-brand h5{
            margin:0;
            font-size:16px;
            font-weight:800;
        }

        .coord-brand small{
            color:#cbd5e1;
            font-size:12px;
        }

        .coord-menu-title{
            font-size:11px;
            color:#94a3b8;
            text-transform:uppercase;
            letter-spacing:.08em;
            margin:18px 10px 8px;
        }

        .coord-nav a{
            display:flex;
            align-items:center;
            gap:10px;
            color:#d1d5db;
            text-decoration:none;
            padding:10px 12px;
            border-radius:12px;
            font-size:14px;
            margin-bottom:4px;
            transition:.2s ease;
        }

        .coord-nav a:hover,
        .coord-nav a.active{
            background:rgba(255,255,255,.12);
            color:#fff;
        }

        .coord-nav a.active{
            box-shadow:inset 3px 0 0 #ef4444;
        }

        .coord-main{
            margin-left:var(--side-width);
            min-height:100vh;
        }

        .coord-topbar{
            position:sticky;
            top:0;
            z-index:900;
            min-height:66px;
            background:rgba(255,255,255,.92);
            backdrop-filter:blur(12px);
            border-bottom:1px solid var(--eden-border);
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:12px 24px;
        }

        .coord-content{
            padding:24px;
        }

        .page-title{
            font-size:24px;
            font-weight:800;
            margin:0;
        }

        .page-subtitle{
            color:#6b7280;
            font-size:14px;
            margin-top:4px;
        }

        .eden-card{
            background:#fff;
            border:1px solid var(--eden-border);
            border-radius:18px;
            box-shadow:0 10px 30px rgba(15,23,42,.06);
        }

        .btn-eden{
            background:var(--eden-red);
            color:#fff;
            border:none;
            border-radius:12px;
            padding:9px 14px;
            font-weight:700;
        }

        .btn-eden:hover{
            background:#991b1b;
            color:#fff;
        }

        .table th{
            font-size:13px;
            color:#374151;
            white-space:nowrap;
        }

        .table td{
            font-size:14px;
            vertical-align:middle;
        }

        .form-control,
        .form-select{
            border-radius:12px;
        }

        .input-group-text{
            border-radius:12px;
        }

        .coord-notif-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            border: 1px solid #e5e7eb;
            background: #ffffff;
            color: #374151;
        }

        .coord-notif-btn:hover {
            background: #fef2f2;
            color: var(--eden-red);
            border-color: #fecaca;
        }

        .coord-notif-menu {
            width: 370px;
            max-width: 90vw;
            padding: 0;
            overflow: hidden;
            border-radius: 16px;
        }

        .coord-notif-item {
            border-radius: 0;
            white-space: normal;
        }

        .coord-notif-icon {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            flex: 0 0 38px;
            display: grid;
            place-items: center;
            background: #fee2e2;
            color: #b91c1c;
        }

        .coord-notif-item.bg-light {
            background: #fff7ed !important;
        }

        @media(max-width: 991px){
            .coord-sidebar{
                position:relative;
                width:100%;
                height:auto;
            }

            .coord-main{
                margin-left:0;
            }

            .coord-topbar{
                position:relative;
                flex-direction:column;
                align-items:flex-start;
                gap:8px;
            }

            .coord-content{
                padding:16px;
            }
        }
    </style>
</head>
<body>

<aside class="coord-sidebar">
    <div class="coord-brand">
        <div class="coord-logo">E</div>
        <div>
            <h5>EDEN ELMS</h5>
            <small>Coordinator Panel</small>
        </div>
    </div>

    <div class="coord-nav">
        <div class="coord-menu-title">Main</div>

        <a class="<?= coord_active('dashboard.php') ?>" href="/elms/coordinator/dashboard.php">
            <i class="bi bi-speedometer2"></i> Dashboard
        </a>

        <a class="<?= coord_active('students.php') ?>" href="/elms/coordinator/students.php">
            <i class="bi bi-people"></i> Students
        </a>

        <a class="<?= coord_active('batches.php') ?>" href="/elms/coordinator/batches.php">
            <i class="bi bi-layers"></i> Batches
        </a>

        <a class="<?= coord_active('modules.php') ?>" href="/elms/coordinator/modules.php">
            <i class="bi bi-journal-bookmark"></i> Modules
        </a>

        <a class="<?= coord_active('lecturers.php') ?>" href="/elms/coordinator/lecturers.php">
            <i class="bi bi-person-badge"></i> Lecturers
        </a>

        <div class="coord-menu-title">Learning</div>

        <a class="<?= coord_active('assessments.php') ?>" href="/elms/coordinator/assessments.php">
            <i class="bi bi-clipboard-check"></i> Assessments
        </a>

        <a class="<?= coord_active('submissions.php') ?>" href="/elms/coordinator/submissions.php">
            <i class="bi bi-inboxes"></i> Submissions
        </a>

        <a class="<?= coord_active('marking.php') ?>" href="/elms/coordinator/marking.php">
            <i class="bi bi-pencil-square"></i> Marking
        </a>

        <a class="<?= coord_active('verification.php') ?>" href="/elms/coordinator/verification.php">
            <i class="bi bi-shield-check"></i> Verification
        </a>

        <a class="<?= coord_active('release.php') ?>" href="/elms/coordinator/release.php">
            <i class="bi bi-send-check"></i> Release
        </a>

        <a class="<?= coord_active('approval.php') ?>" href="/elms/coordinator/approval.php">
            <i class="bi bi-check2-square"></i> Approval Center
        </a>

        <a class="<?= coord_active('notifications.php') ?>" href="/elms/coordinator/notifications.php">
            <i class="bi bi-bell"></i> Notifications

            <?php if ($notifCount > 0): ?>
                <span class="badge bg-danger ms-auto"><?= (int)$notifCount ?></span>
            <?php endif; ?>
        </a>

        <div class="coord-menu-title">Planning & Reports</div>

        <a class="<?= coord_active('planner.php') ?>" href="/elms/coordinator/planner.php">
            <i class="bi bi-calendar-event"></i> Planner
        </a>

        <a class="<?= coord_active('announcements.php') ?>" href="/elms/coordinator/announcements.php">
            <i class="bi bi-megaphone"></i> Announcements
        </a>

        <a class="<?= coord_active('reports.php') ?>" href="/elms/coordinator/reports.php">
            <i class="bi bi-bar-chart"></i> Reports
        </a>

        <div class="coord-menu-title">Account</div>

        <a class="<?= coord_active('profile.php') ?>" href="/elms/coordinator/profile.php">
            <i class="bi bi-person-circle"></i> My Profile
        </a>

        <a href="/elms/coordinator/logout.php">
            <i class="bi bi-box-arrow-right"></i> Logout
        </a>
    </div>
</aside>

<main class="coord-main">
    <div class="coord-topbar">
        <div>
            <strong>Coordinator Workspace</strong>
            <div class="text-muted small">Manage assigned ELMS operations</div>
        </div>

        <div class="d-flex align-items-center gap-2">
            <div class="dropdown">
                <button class="coord-notif-btn position-relative"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        title="Notifications">
                    <i class="bi bi-bell"></i>

                    <?php if ($notifCount > 0): ?>
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                            <?= (int)$notifCount ?>
                        </span>
                    <?php endif; ?>
                </button>

                <div class="dropdown-menu dropdown-menu-end coord-notif-menu shadow border-0">
                    <div class="p-3 border-bottom d-flex justify-content-between align-items-center">
                        <strong>Notifications</strong>
                        <span class="badge bg-danger rounded-pill"><?= (int)$notifCount ?> new</span>
                    </div>

                    <?php if (!$notifRows): ?>
                        <div class="p-4 text-center text-muted">
                            <i class="bi bi-bell-slash fs-3 d-block mb-2"></i>
                            No notifications yet
                        </div>
                    <?php else: ?>
                        <div style="max-height:360px;overflow:auto;">
                            <?php foreach ($notifRows as $n): ?>
                                <a href="<?= h($n['link_url'] ?: '#') ?>"
                                   class="dropdown-item coord-notif-item px-3 py-3 border-bottom <?= ((int)$n['is_read'] === 0) ? 'bg-light' : '' ?>">
                                    <div class="d-flex gap-2">
                                        <div class="coord-notif-icon">
                                            <i class="bi <?= h($n['icon'] ?: 'bi-bell') ?>"></i>
                                        </div>

                                        <div class="flex-grow-1">
                                            <div class="fw-bold small">
                                                <?= h($n['title'] ?? 'Notification') ?>
                                            </div>

                                            <?php if (!empty($n['message'])): ?>
                                                <div class="small text-muted text-wrap">
                                                    <?= h($n['message']) ?>
                                                </div>
                                            <?php endif; ?>

                                            <div class="small text-muted mt-1">
                                                <?= h(date('d M Y, h:i A', strtotime((string)$n['created_at']))) ?>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            <?php endforeach; ?>
                        </div>

                        <div class="p-2 text-center">
                            <a href="/elms/coordinator/notifications.php" class="btn btn-sm btn-outline-danger rounded-pill px-3">
                                View All
                            </a>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <span class="badge text-bg-danger">Coordinator</span>
            <span class="fw-semibold"><?= h($userName) ?></span>
        </div>
    </div>

    <div class="coord-content">