<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $title ?? 'BOAFO — Mentorship & University Transition Support System' ?></title>
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="<?= APP_URL ?>/favicon.ico">
    <!-- Google Fonts: Inter & Outfit -->
    <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@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- FontAwesome for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom Theme Stylesheet -->
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/boafo.css">
</head>
<body class="<?= Auth::check() ? 'authenticated-bg' : 'public-bg' ?>">
    <?php if (Auth::check()): ?>
        <!-- AUTHENTICATED PANEL LAYOUT -->
        <div class="app-container">
            <!-- Sidebar -->
            <aside class="app-sidebar">
                <div class="sidebar-brand">
                    <i class="fa-solid fa-graduation-cap brand-icon"></i>
                    <span class="brand-text">BOAFO</span>
                </div>
                
                <div class="user-quick-profile">
                    <div class="quick-avatar-container">
                        <img src="<?= Auth::user()['avatar'] ? UPLOAD_URL . '/avatars/' . Auth::user()['avatar'] : APP_URL . '/assets/img/default-avatar.png' ?>" alt="Avatar" class="quick-avatar">
                        <span class="status-indicator online"></span>
                    </div>
                    <div class="quick-info">
                        <h6 class="quick-name"><?= htmlspecialchars(Auth::user()['name']) ?></h6>
                        <span class="quick-role text-uppercase"><?= htmlspecialchars(Auth::role()) ?></span>
                    </div>
                </div>

                <nav class="sidebar-menu">
                    <ul>
                        <li class="menu-header">Core</li>
                        <li>
                            <a href="<?= APP_URL ?>/dashboard" class="<?= is_active_route('/dashboard') ? 'active' : '' ?>">
                                <i class="fa-solid fa-gauge"></i> <span>Dashboard</span>
                            </a>
                        </li>
                        
                        <?php if (Auth::isStudent()): ?>
                            <li class="menu-header">Discovery & AI</li>
                            <li>
                                <a href="<?= APP_URL ?>/universities" class="<?= is_active_route('/universities') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-building-columns"></i> <span>Universities</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/scholarships" class="<?= is_active_route('/scholarships') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-award"></i> <span>Scholarships</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/scholarships/recommended" class="<?= is_active_route('/scholarships/recommended') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-wand-magic-sparkles"></i> <span>AI Recommended</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/admission-analyzer" class="<?= is_active_route('/admission-analyzer') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-brain"></i> <span>WASSCE Analyzer</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/mentors/matched" class="<?= is_active_route('/mentors/matched') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-user-gear"></i> <span>AI Mentor Match</span>
                                </a>
                            </li>

                            <li class="menu-header">Mentorship & Career</li>
                            <li>
                                <a href="<?= APP_URL ?>/mentors" class="<?= is_active_route('/mentors') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-users"></i> <span>Mentor Network</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/careers" class="<?= is_active_route('/careers') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-compass"></i> <span>Career Guidance</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/transition" class="<?= is_active_route('/transition') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-route"></i> <span>Transition Center</span>
                                </a>
                            </li>
                        <?php endif; ?>

                        <?php if (Auth::isMentor() || Auth::isTutor()): ?>
                            <li class="menu-header">Management</li>
                            <li>
                                <a href="<?= APP_URL ?>/sessions" class="<?= is_active_route('/sessions') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-calendar-check"></i> <span>Sessions</span>
                                </a>
                            </li>
                        <?php endif; ?>

                        <?php if (Auth::isStudent()): ?>
                            <li>
                                <a href="<?= APP_URL ?>/sessions" class="<?= is_active_route('/sessions') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-calendar-check"></i> <span>Booked Sessions</span>
                                </a>
                            </li>
                        <?php endif; ?>

                        <li class="menu-header">Communication</li>
                        <li>
                            <a href="<?= APP_URL ?>/messages" class="<?= is_active_route('/messages') ? 'active' : '' ?>">
                                <i class="fa-solid fa-comments"></i> <span>Messages</span>
                                <span class="badge bg-danger rounded-pill float-end" id="sidebar-unread-messages" style="display:none;">0</span>
                            </a>
                        </li>
                        <li>
                            <a href="<?= APP_URL ?>/notifications" class="<?= is_active_route('/notifications') ? 'active' : '' ?>">
                                <i class="fa-solid fa-bell"></i> <span>Notifications</span>
                                <span class="badge bg-primary rounded-pill float-end" id="sidebar-unread-notifications" style="display:none;">0</span>
                            </a>
                        </li>
                        <li>
                            <a href="<?= APP_URL ?>/resources" class="<?= is_active_route('/resources') ? 'active' : '' ?>">
                                <i class="fa-solid fa-book-open"></i> <span>Resource Library</span>
                            </a>
                        </li>

                        <?php if (Auth::isAdmin()): ?>
                            <li class="menu-header">Admin panel</li>
                            <li>
                                <a href="<?= APP_URL ?>/admin" class="<?= is_active_route('/admin') && !str_contains($_SERVER['REQUEST_URI'], '/users') && !str_contains($_SERVER['REQUEST_URI'], '/universities') && !str_contains($_SERVER['REQUEST_URI'], '/scholarships') && !str_contains($_SERVER['REQUEST_URI'], '/mentors') && !str_contains($_SERVER['REQUEST_URI'], '/resources') && !str_contains($_SERVER['REQUEST_URI'], '/analytics') && !str_contains($_SERVER['REQUEST_URI'], '/audit') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-chart-pie"></i> <span>Overview</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/admin/users" class="<?= str_contains($_SERVER['REQUEST_URI'], '/admin/users') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-user-group"></i> <span>Users CRUD</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/admin/universities" class="<?= str_contains($_SERVER['REQUEST_URI'], '/admin/universities') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-school"></i> <span>Universities</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/admin/scholarships" class="<?= str_contains($_SERVER['REQUEST_URI'], '/admin/scholarships') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-award"></i> <span>Scholarships</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/admin/mentors" class="<?= str_contains($_SERVER['REQUEST_URI'], '/admin/mentors') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-user-check"></i> <span>Verifications</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/admin/resources" class="<?= str_contains($_SERVER['REQUEST_URI'], '/admin/resources') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-file-invoice"></i> <span>Resources CRUD</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/admin/analytics" class="<?= str_contains($_SERVER['REQUEST_URI'], '/admin/analytics') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-chart-line"></i> <span>Analytics</span>
                                </a>
                            </li>
                            <li>
                                <a href="<?= APP_URL ?>/admin/audit-logs" class="<?= str_contains($_SERVER['REQUEST_URI'], '/admin/audit-logs') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-shield-halved"></i> <span>Audit Logs</span>
                                </a>
                            </li>
                        <?php endif; ?>

                        <li class="menu-header">Account</li>
                        <li>
                            <a href="<?= APP_URL ?>/profile" class="<?= is_active_route('/profile') && !str_contains($_SERVER['REQUEST_URI'], '/edit') && !str_contains($_SERVER['REQUEST_URI'], '/wassce') ? 'active' : '' ?>">
                                <i class="fa-solid fa-user"></i> <span>My Profile</span>
                            </a>
                        </li>
                        <li>
                            <a href="<?= APP_URL ?>/profile/edit" class="<?= is_active_route('/profile/edit') ? 'active' : '' ?>">
                                <i class="fa-solid fa-user-pen"></i> <span>Edit Profile</span>
                            </a>
                        </li>
                        <?php if (Auth::isStudent()): ?>
                            <li>
                                <a href="<?= APP_URL ?>/profile/wassce" class="<?= is_active_route('/profile/wassce') ? 'active' : '' ?>">
                                    <i class="fa-solid fa-scroll"></i> <span>WASSCE Grades</span>
                                </a>
                            </li>
                        <?php endif; ?>
                        <li>
                            <a href="<?= APP_URL ?>/logout" class="logout-link">
                                <i class="fa-solid fa-power-off text-danger"></i> <span class="text-danger">Logout</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </aside>

            <!-- Main Content Shell -->
            <div class="app-main">
                <!-- Top Navbar -->
                <header class="app-header">
                    <button id="sidebar-toggle" class="btn btn-link d-md-none text-dark">
                        <i class="fa-solid fa-bars fs-4"></i>
                    </button>
                    
                    <div class="header-search-container d-none d-md-flex">
                        <i class="fa-solid fa-magnifying-glass search-icon"></i>
                        <input type="text" class="form-control header-search" placeholder="Quick search universities, career, resources...">
                    </div>

                    <div class="header-actions">
                        <!-- Notifications Dropdown -->
                        <div class="dropdown me-3">
                            <button class="btn btn-icon position-relative" type="button" id="notifDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa-regular fa-bell"></i>
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary" id="header-unread-notifications" style="display:none;">0</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end notification-menu-dropdown p-0 shadow-lg" aria-labelledby="notifDropdown">
                                <li class="dropdown-header border-bottom py-3 d-flex justify-content-between align-items-center">
                                    <h6 class="m-0 font-weight-bold">Notifications</h6>
                                    <a href="<?= APP_URL ?>/notifications" class="text-xs">View All</a>
                                </li>
                                <div id="notifications-dropdown-list" class="notification-list-scroll">
                                    <li class="p-4 text-center text-muted text-xs">No new notifications.</li>
                                </div>
                            </ul>
                        </div>

                        <!-- Messages Dropdown -->
                        <div class="dropdown me-3">
                            <button class="btn btn-icon position-relative" type="button" id="msgDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa-regular fa-envelope"></i>
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="header-unread-messages" style="display:none;">0</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end notification-menu-dropdown p-0 shadow-lg" aria-labelledby="msgDropdown">
                                <li class="dropdown-header border-bottom py-3 d-flex justify-content-between align-items-center">
                                    <h6 class="m-0 font-weight-bold">Messages</h6>
                                    <a href="<?= APP_URL ?>/messages" class="text-xs">Inbox</a>
                                </li>
                                <div id="messages-dropdown-list" class="notification-list-scroll">
                                    <li class="p-4 text-center text-muted text-xs">No new messages.</li>
                                </div>
                            </ul>
                        </div>

                        <div class="vertical-divider mx-2"></div>

                        <!-- Profile Menu -->
                        <div class="dropdown">
                            <button class="btn btn-profile d-flex align-items-center" type="button" id="profileDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                <img src="<?= Auth::user()['avatar'] ? UPLOAD_URL . '/avatars/' . Auth::user()['avatar'] : APP_URL . '/assets/img/default-avatar.png' ?>" alt="Avatar" class="avatar-sm">
                                <span class="profile-name ms-2 d-none d-lg-inline-block"><?= htmlspecialchars(Auth::user()['name']) ?></span>
                                <i class="fa-solid fa-angle-down ms-2 fs-xs text-muted"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="profileDropdown">
                                <li><a class="dropdown-item" href="<?= APP_URL ?>/profile"><i class="fa-solid fa-user-circle me-2 text-muted"></i> View Profile</a></li>
                                <li><a class="dropdown-item" href="<?= APP_URL ?>/profile/edit"><i class="fa-solid fa-gears me-2 text-muted"></i> Edit Account</a></li>
                                <?php if (Auth::isStudent()): ?>
                                    <li><a class="dropdown-item" href="<?= APP_URL ?>/profile/wassce"><i class="fa-solid fa-scroll me-2 text-muted"></i> WASSCE Grades</a></li>
                                <?php endif; ?>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item text-danger" href="<?= APP_URL ?>/logout"><i class="fa-solid fa-sign-out-alt me-2"></i> Logout</a></li>
                            </ul>
                        </div>
                    </div>
                </header>

                <!-- Page Content -->
                <main class="page-content-wrapper">
                    <?php if ($success = $_SESSION['flash']['success'] ?? null): unset($_SESSION['flash']['success']); ?>
                        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
                            <i class="fa-solid fa-circle-check me-2"></i> <?= htmlspecialchars($success) ?>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    <?php endif; ?>

                    <?php if ($error = $_SESSION['flash']['error'] ?? null): unset($_SESSION['flash']['error']); ?>
                        <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
                            <i class="fa-solid fa-circle-exclamation me-2"></i> <?= htmlspecialchars($error) ?>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    <?php endif; ?>

                    <?= $content ?>
                </main>
                
                <footer class="app-footer-bar">
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="footer-copy">&copy; <?= date('Y') ?> BOAFO System. All rights reserved.</span>
                        <div class="footer-links">
                            <a href="<?= APP_URL ?>/about">About</a>
                            <a href="<?= APP_URL ?>/contact">Contact Support</a>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
    <?php else: ?>
        <!-- PUBLIC VISITOR LAYOUT -->
        <nav class="navbar navbar-expand-lg navbar-light bg-glass-nav fixed-top shadow-sm py-3">
            <div class="container">
                <a class="navbar-brand d-flex align-items-center" href="<?= APP_URL ?>">
                    <i class="fa-solid fa-graduation-cap brand-icon-public text-primary fs-3 me-2"></i>
                    <span class="font-outfit fw-bold text-dark fs-4">BOAFO</span>
                </a>
                <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#publicNavbar" aria-controls="publicNavbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="publicNavbar">
                    <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link px-3 <?= is_active_route('/') ? 'active' : '' ?>" href="<?= APP_URL ?>">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-3 <?= is_active_route('/universities') ? 'active' : '' ?>" href="<?= APP_URL ?>/universities">Universities</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-3 <?= is_active_route('/scholarships') ? 'active' : '' ?>" href="<?= APP_URL ?>/scholarships">Scholarships</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-3 <?= is_active_route('/mentors') ? 'active' : '' ?>" href="<?= APP_URL ?>/mentors">Mentors</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-3 <?= is_active_route('/careers') ? 'active' : '' ?>" href="<?= APP_URL ?>/careers">Careers</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-3 <?= is_active_route('/resources') ? 'active' : '' ?>" href="<?= APP_URL ?>/resources">Resources</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-3 <?= is_active_route('/about') ? 'active' : '' ?>" href="<?= APP_URL ?>/about">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link px-3 <?= is_active_route('/contact') ? 'active' : '' ?>" href="<?= APP_URL ?>/contact">Contact</a>
                        </li>
                    </ul>
                    <div class="d-flex align-items-center gap-2">
                        <a href="<?= APP_URL ?>/login" class="btn btn-outline-primary rounded-pill px-4">Sign In</a>
                        <a href="<?= APP_URL ?>/register" class="btn btn-primary rounded-pill px-4 shadow-sm">Register</a>
                    </div>
                </div>
            </div>
        </nav>

        <main style="padding-top: 80px;">
            <?php if ($success = $_SESSION['flash']['success'] ?? null): unset($_SESSION['flash']['success']); ?>
                <div class="container my-3">
                    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
                        <i class="fa-solid fa-circle-check me-2"></i> <?= htmlspecialchars($success) ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
            <?php endif; ?>

            <?php if ($error = $_SESSION['flash']['error'] ?? null): unset($_SESSION['flash']['error']); ?>
                <div class="container my-3">
                    <div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert">
                        <i class="fa-solid fa-circle-exclamation me-2"></i> <?= htmlspecialchars($error) ?>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                </div>
            <?php endif; ?>

            <?= $content ?>
        </main>

        <footer class="public-footer py-5 mt-5">
            <div class="container">
                <div class="row g-4">
                    <div class="col-lg-4 col-md-6">
                        <div class="d-flex align-items-center mb-3">
                            <i class="fa-solid fa-graduation-cap text-primary fs-3 me-2"></i>
                            <span class="font-outfit fw-bold text-dark fs-4">BOAFO</span>
                        </div>
                        <p class="text-muted text-sm">Mentorship and transition support for SHS students in Ghana. Bridging the gap between secondary school and university.</p>
                        <div class="social-links d-flex gap-2">
                            <a href="#" class="btn btn-icon btn-sm"><i class="fa-brands fa-facebook-f"></i></a>
                            <a href="#" class="btn btn-icon btn-sm"><i class="fa-brands fa-twitter"></i></a>
                            <a href="#" class="btn btn-icon btn-sm"><i class="fa-brands fa-instagram"></i></a>
                            <a href="#" class="btn btn-icon btn-sm"><i class="fa-brands fa-linkedin-in"></i></a>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-6">
                        <h6 class="fw-bold font-outfit text-dark mb-3">Discovery</h6>
                        <ul class="list-unstyled text-sm footer-link-list">
                            <li><a href="<?= APP_URL ?>/universities">Universities</a></li>
                            <li><a href="<?= APP_URL ?>/scholarships">Scholarships</a></li>
                            <li><a href="<?= APP_URL ?>/careers">Career Paths</a></li>
                            <li><a href="<?= APP_URL ?>/resources">E-Resources</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-2 col-md-6">
                        <h6 class="fw-bold font-outfit text-dark mb-3">Support</h6>
                        <ul class="list-unstyled text-sm footer-link-list">
                            <li><a href="<?= APP_URL ?>/mentors">Mentors Network</a></li>
                            <li><a href="<?= APP_URL ?>/about">Our Mission</a></li>
                            <li><a href="<?= APP_URL ?>/contact">Get Help</a></li>
                        </ul>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <h6 class="fw-bold font-outfit text-dark mb-3">About BOAFO</h6>
                        <p class="text-muted text-sm mb-3">"Boafo" means Helper in Akan. We are committed to making your transition to university seamless and successful.</p>
                    </div>
                </div>
                <hr class="my-4 text-muted opacity-25">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center text-sm text-muted">
                    <p class="m-0">&copy; <?= date('Y') ?> BOAFO - Mentorship & University Transition System.</p>
                </div>
            </div>
        </footer>
    <?php endif; ?>

    <!-- Bootstrap 5 Bundle JS (with Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core Helper JS -->
    <script>
        const APP_URL = "<?= APP_URL ?>";
        const CSRF_TOKEN = "<?= CSRF::token() ?>";
    </script>
    <script src="<?= APP_URL ?>/assets/js/boafo.js" defer></script>

    <?php if (Auth::check()): ?>
    <!-- Live Updates for Authenticated Panel -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Sidebar toggle logic
            const toggle = document.getElementById('sidebar-toggle');
            if (toggle) {
                toggle.addEventListener('click', function() {
                    document.querySelector('.app-sidebar').classList.toggle('show');
                });
            }

            // Real-time counter syncing
            function syncUnreadCounts() {
                // Fetch unread messages
                fetch(APP_URL + '/api/messages/unread-count')
                    .then(r => r.json())
                    .then(data => {
                        const badges = ['sidebar-unread-messages', 'header-unread-messages'];
                        badges.forEach(id => {
                            const el = document.getElementById(id);
                            if (el) {
                                if (data.count > 0) {
                                    el.innerText = data.count;
                                    el.style.display = 'inline-block';
                                } else {
                                    el.style.display = 'none';
                                }
                            }
                        });
                    }).catch(e => console.log('Err messages:', e));

                // Fetch unread notifications
                fetch(APP_URL + '/api/notifications/count')
                    .then(r => r.json())
                    .then(data => {
                        const badges = ['sidebar-unread-notifications', 'header-unread-notifications'];
                        badges.forEach(id => {
                            const el = document.getElementById(id);
                            if (el) {
                                if (data.count > 0) {
                                    el.innerText = data.count;
                                    el.style.display = 'inline-block';
                                } else {
                                    el.style.display = 'none';
                                }
                            }
                        });
                    }).catch(e => console.log('Err notifications:', e));
            }

            // Sync immediately and then every 20 seconds
            syncUnreadCounts();
            setInterval(syncUnreadCounts, 20000);

            // Mobile Sidebar Toggle
            const sidebarToggle = document.getElementById('sidebar-toggle');
            const appSidebar = document.querySelector('.app-sidebar');
            if (sidebarToggle && appSidebar) {
                sidebarToggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    appSidebar.classList.toggle('show');
                });
                
                // Close sidebar when clicking outside on mobile
                document.addEventListener('click', function(e) {
                    if (window.innerWidth < 992) {
                        if (!appSidebar.contains(e.target) && !sidebarToggle.contains(e.target)) {
                            appSidebar.classList.remove('show');
                        }
                    }
                });
            }
        });
    </script>
    <?php endif; ?>
</body>
</html>
