<?php
// ============================================================
//  component/nav.php — WADATA Navigation
//  Smart: shows profile dropdown when user is logged in,
//  shows Login/Register when not.
// ============================================================

// Start session if not already started
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// Optionally load DB for notification count (only if db.php exists)
$unread_count = 0;
$user_logged_in = !empty($_SESSION['user_id']);

if ($user_logged_in) {
    $db_path = __DIR__ . '/../includes/db.php';
    if (file_exists($db_path)) {
        require_once $db_path;
        $unread_count = (int)(db_fetch_one(
            "SELECT COUNT(*) AS c FROM notifications WHERE user_id = ? AND is_read = 0",
            [$_SESSION['user_id']]
        )['c'] ?? 0);
    }
}

// Current page for active link detection
$current_page = basename($_SERVER['PHP_SELF']);

// User display helpers
$user_name     = htmlspecialchars($_SESSION['user_name']     ?? '');
$user_username = htmlspecialchars($_SESSION['user_username'] ?? '');
$user_avatar   = $_SESSION['user_avatar'] ?? '';
$user_initials = strtoupper(substr($_SESSION['user_name'] ?? 'U', 0, 1));
$avatar_src    = ($user_avatar && $user_avatar !== 'default_avatar.png')
    ? './assets/images/avatars/' . htmlspecialchars($user_avatar)
    : '';
?>

<nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
    <div class="container">

        <!-- ── BRAND ───────────────────────────────────────── -->
        <a class="navbar-brand d-flex gap-2 align-items-center" href="./index.php">
            <div>
                <img src="./assets/img/logo.png" alt="WADATA Logo">
            </div>
            <div>
                <span>WADATA</span>
                <p>Skills Acquisition Centre</p>
            </div>
        </a>

        <!-- ── MOBILE TOGGLE ───────────────────────────────── -->
        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- ── NAV LINKS ────────────────────────────────────── -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">

                <li class="nav-item">
                    <a class="nav-link <?= $current_page === 'index.php' ? 'active' : '' ?>"
                       href="./index">Home</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link <?= $current_page === 'about.php' ? 'active' : '' ?>"
                       href="./about">About</a>
                </li>

                <!-- Services Dropdown -->
                <li class="nav-item dropdown">
                    <?php
                    $service_pages = ['ict.php','craft.php','tailoring.php','catering.php','makeup.php','printing.php','marriage.php'];
                    $service_active = in_array($current_page, $service_pages) ? 'active' : '';
                    ?>
                    <a class="nav-link dropdown-toggle <?= $service_active ?>"
                       href="#" id="servicesDropdown" role="button"
                       data-bs-toggle="dropdown" aria-expanded="false">
                        Our Services
                    </a>
                    <ul class="dropdown-menu glass-dropdown" aria-labelledby="servicesDropdown">
                        <li><a class="dropdown-item <?= $current_page === 'ict.php'      ? 'active' : '' ?>" href="#"><i class="fas fa-laptop-code"></i> ICT & Graphic Design</a></li>
                        <li><a class="dropdown-item <?= $current_page === 'craft.php'     ? 'active' : '' ?>" href="#"><i class="fas fa-paint-brush"></i> Craft & Creativity</a></li>
                        <li><a class="dropdown-item <?= $current_page === 'tailoring.php' ? 'active' : '' ?>" href="#"><i class="fas fa-cut"></i> Tailoring</a></li>
                        <li><a class="dropdown-item <?= $current_page === 'catering.php'  ? 'active' : '' ?>" href="#"><i class="fas fa-utensils"></i> Catering</a></li>
                        <li><a class="dropdown-item <?= $current_page === 'makeup.php'    ? 'active' : '' ?>" href="#"><i class="fas fa-magic"></i> Makeup & Saloon</a></li>
                        <li><a class="dropdown-item <?= $current_page === 'printing.php'  ? 'active' : '' ?>" href="#"><i class="fas fa-print"></i> Screen/Transfer & Printing</a></li>
                        <li><a class="dropdown-item <?= $current_page === 'marriage.php'  ? 'active' : '' ?>" href="#"><i class="fas fa-heart"></i> Marriage Guidance</a></li>
                    </ul>
                </li>

                <li class="nav-item">
                    <a class="nav-link <?= $current_page === 'facilities.php' ? 'active' : '' ?>"
                       href="./facilities">Facilities</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= $current_page === 'gallery.php' ? 'active' : '' ?>"
                       href="./gallery">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link <?= $current_page === 'contact.php' ? 'active' : '' ?>"
                       href="./contact">Contact</a>
                </li>

            </ul>

            <!-- ── AUTH AREA ──────────────────────────────── -->
            <div class="d-flex align-items-center gap-2 ms-lg-3" id="authButtons">

                <?php if ($user_logged_in): ?>

                    <!-- Notification Bell -->
                    <a href="./user/dashboard.php" class="nav-notif-btn" title="Notifications" id="notifBtn">
                        <i class="fas fa-bell"></i>
                        <?php if ($unread_count > 0): ?>
                            <span class="notif-badge"><?= $unread_count > 9 ? '9+' : $unread_count ?></span>
                        <?php endif; ?>
                    </a>

                    <!-- User Profile Dropdown -->
                    <div class="dropdown nav-profile-dropdown">
                        <button class="nav-profile-btn dropdown-toggle" type="button"
                                id="profileDropdown" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            <?php if ($avatar_src): ?>
                                <img src="<?= $avatar_src ?>" alt="<?= $user_name ?>" class="nav-profile-av"/>
                            <?php else: ?>
                                <div class="nav-profile-av-fb"><?= $user_initials ?></div>
                            <?php endif; ?>
                            <div class="nav-profile-info d-none d-xl-block">
                                <span class="nav-profile-name"><?= $user_name ?></span>
                                <span class="nav-profile-role">Student</span>
                            </div>
                            <i class="fas fa-chevron-down nav-chevron"></i>
                        </button>

                        <ul class="dropdown-menu dropdown-menu-end nav-user-dropdown"
                            aria-labelledby="profileDropdown">

                            <!-- User info header -->
                            <li>
                                <div class="nav-dropdown-header">
                                    <?php if ($avatar_src): ?>
                                        <img src="<?= $avatar_src ?>" alt="" class="ndh-av"/>
                                    <?php else: ?>
                                        <div class="ndh-av-fb"><?= $user_initials ?></div>
                                    <?php endif; ?>
                                    <div class="ndh-info">
                                        <strong><?= $user_name ?></strong>
                                        <span>@<?= $user_username ?></span>
                                    </div>
                                </div>
                            </li>
                            <li><hr class="dropdown-divider nav-divider"></li>

                            <!-- Links -->
                            <li>
                                <a class="dropdown-item nav-dd-item" href="./user/dashboard.php">
                                    <i class="fas fa-gauge-high"></i>
                                    <span>My Dashboard</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item nav-dd-item" href="./user/profile.php">
                                    <i class="fas fa-circle-user"></i>
                                    <span>My Profile</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item nav-dd-item" href="./user/dashboard.php#programmes">
                                    <i class="fas fa-book-open"></i>
                                    <span>My Programmes</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item nav-dd-item" href="./user/dashboard.php#certificates">
                                    <i class="fas fa-certificate"></i>
                                    <span>Certificates</span>
                                </a>
                            </li>
                            <?php if ($unread_count > 0): ?>
                            <li>
                                <a class="dropdown-item nav-dd-item" href="./user/dashboard.php#notifications">
                                    <i class="fas fa-bell"></i>
                                    <span>Notifications</span>
                                    <span class="nav-dd-badge"><?= $unread_count ?></span>
                                </a>
                            </li>
                            <?php endif; ?>

                            <li><hr class="dropdown-divider nav-divider"></li>

                            <li>
                                <a class="dropdown-item nav-dd-item nav-dd-danger"
                                   href="./user/logout.php"
                                   onclick="return confirm('Sign out of your account?')">
                                    <i class="fas fa-right-from-bracket"></i>
                                    <span>Sign Out</span>
                                </a>
                            </li>

                        </ul>
                    </div>

                <?php else: ?>

                    <!-- Not logged in — show Register + Login -->
                    <a href="./user/register.php" class="btn btn-primary btn-sm">
                        <i class="fas fa-user-plus me-1"></i>Register
                    </a>
                    <a href="./user/login.php" class="btn btn-outline-light btn-sm">
                        <i class="fas fa-right-to-bracket me-1"></i>Login
                    </a>

                <?php endif; ?>

            </div>
        </div>
    </div>
</nav>

<!-- ── NAV STYLES ──────────────────────────────────────────── -->
<style>
/* Notification bell */
.nav-notif-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    display: grid;
    place-items: center;
    color: rgba(255,255,255,.92);
    text-decoration: none;
    transition: all .22s ease;
    flex-shrink: 0;
}
.nav-notif-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: scale(1.07);
}
.notif-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--accent);
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 20px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary);
    line-height: 1;
}

/* Profile button */
.nav-profile-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 13px 5px 5px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 40px;
    cursor: pointer;
    transition: all .22s ease;
    color: #fff;
}
.nav-profile-btn:hover,
.nav-profile-btn.show {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.4);
}
.nav-profile-btn::after { display: none; } /* remove default BS caret */

.nav-profile-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.4);
    flex-shrink: 0;
}
.nav-profile-av-fb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.4);
}
.nav-profile-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    line-height: 1.2;
}
.nav-profile-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-profile-role {
    font-size: 9.5px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .5px;
    text-transform: uppercase;
}
.nav-chevron {
    font-size: 9px;
    color: rgba(255,255,255,.7);
    transition: transform .2s;
    flex-shrink: 0;
}
.nav-profile-btn.show .nav-chevron { transform: rotate(180deg); }

/* User dropdown panel */
.nav-user-dropdown {
    min-width: 230px;
    padding: 8px;
    background: rgba(11,37,69,.92) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.45) !important;
    margin-top: 8px !important;
    animation: dropIn .25s cubic-bezier(.22,1,.36,1) both;
}
@keyframes dropIn {
    from { opacity:0; transform:translateY(-8px) scale(.97); }
    to   { opacity:1; transform:none; }
}

/* Dropdown header */
.nav-dropdown-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
}
.ndh-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.2);
    flex-shrink: 0;
}
.ndh-av-fb {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,.2);
}
.ndh-info strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.ndh-info span {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    font-weight: 500;
}

/* Divider */
.nav-divider {
    border-color: rgba(255,255,255,.10) !important;
    margin: 6px 4px !important;
}

/* Dropdown items */
.nav-dd-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 12px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.85) !important;
    transition: all .18s ease !important;
    background: transparent !important;
}
.nav-dd-item i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--accent);
    flex-shrink: 0;
}
.nav-dd-item span { flex: 1; }
.nav-dd-item:hover {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    transform: translateX(3px);
}
.nav-dd-item:hover i { color: #fff; }

.nav-dd-badge {
    background: var(--accent);
    color: #fff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* Danger item */
.nav-dd-danger {
    color: rgba(255,120,120,.85) !important;
    margin-top: 2px;
}
.nav-dd-danger i { color: rgba(255,120,120,.85) !important; }
.nav-dd-danger:hover {
    background: rgba(239,68,68,.15) !important;
    color: #fca5a5 !important;
}
.nav-dd-danger:hover i { color: #fca5a5 !important; }

/* Scrolled state — darken navbar for contrast */
.navbar.scrolled .nav-notif-btn {
    background: rgba(11,37,69,.12);
    border-color: rgba(11,37,69,.18);
    color: var(--primary);
}
.navbar.scrolled .nav-notif-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.navbar.scrolled .nav-profile-btn {
    background: rgba(11,37,69,.10);
    border-color: rgba(11,37,69,.18);
}
.navbar.scrolled .nav-profile-name { color: var(--primary-dark); }
.navbar.scrolled .nav-chevron { color: var(--primary); }

/* Mobile tweaks */
@media (max-width: 991px) {
    .nav-profile-info { display: none !important; }
    .nav-profile-btn { padding: 5px 8px; border-radius: 50px; }
    .authButtons { margin-top: 12px; justify-content: center; }
    .nav-user-dropdown { min-width: 200px; }
}
</style>