<?php
if (session_status() === PHP_SESSION_NONE) {session_start();}

$isLogin = !empty($_SESSION['login']);
$role    = $isLogin ? $_SESSION['role'] : null;
?>
<!-- NAVIGATION -->
<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom sticky-top shadow-sm">
<div class="container-xl">
    <!-- Logo -->
    <a class="navbar-brand d-flex align-items-center" href="<?= $http ?>">
        <div class="bg-primary p-2 rounded me-2 d-flex align-items-center justify-content-center">
            <i data-lucide="book-open" class="text-white" width="24" height="24"></i>
        </div>
        <div style="line-height: 1.2;">
            <span class="d-block fw-bold text-dark">PAPENTARA</span>
            <span class="d-block text-primary small fw-medium" style="font-size: 0.75rem; letter-spacing: 0.5px;">Keanggotaan dan Seminar</span>
        </div>
    </a>

    <!-- Mobile Toggle -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto align-items-lg-center">
            <li class="nav-item"><a class="nav-link active" href="<?= $http ?>">Beranda</a></li>
            <li class="nav-item"><a class="nav-link" href="<?= $http ?>seminars">Seminar</a></li>
            <li class="nav-item"><a class="nav-link" href="<?= $http ?>keanggotaan">Keanggotaan</a></li>
            
            <!-- Divider for Mobile -->
            <li class="nav-item d-lg-none"><hr class="dropdown-divider"></li>

            <?php if (!$isLogin): ?>
                <!-- Guest -->
                <li class="nav-item ms-lg-3 d-flex gap-2">
                    <a href="<?= $http ?>login" class="btn btn-outline-secondary btn-sm">
                        Masuk
                    </a>
                    <a href="<?= $http ?>register" class="btn btn-primary btn-sm">
                        Daftar
                    </a>
                </li>
            <?php else: ?>
                <!-- Logged -->
                <li class="nav-item dropdown ms-lg-3">
                    <a class="nav-link dropdown-toggle d-flex align-items-center gap-2"
                       data-bs-toggle="dropdown">
            
                        <div class="bg-primary bg-opacity-10 text-primary rounded-circle
                                    d-flex align-items-center justify-content-center fw-bold"
                             style="width:35px;height:35px;">
                            <?= strtoupper(substr($_SESSION['nama'],0,1)) ?>
                        </div>
            
                        <div class="d-none d-lg-block">
                            <small class="fw-bold"><?= htmlspecialchars($_SESSION['nama']) ?></small><br>
                            <small class="text-muted"><?= ucfirst($role) ?></small>
                        </div>
                    </a>
            
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li>
                            <?php if($role === 'admin'): ?>
                                <a class="dropdown-item" href="<?= $http ?>administrator">Administrator</a>
                            <?php elseif($role === 'member'): ?>
                                <a class="dropdown-item" href="<?= $http ?>dashboard">Dashboard</a>
                            <?php else: ?>
                                <a class="dropdown-item disabled" href="#">Dashboard</a>
                            <?php endif; ?>
                        </li>
                        <li><hr class="dropdown-divider"></li>
                        <li>
                            <a class="dropdown-item text-danger" href="<?= $http ?>logout">Logout</a>
                        </li>
                    </ul>
                </li>
            <?php endif; ?>


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

    <!-- TOAST NOTIFICATION -->
    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1060; margin-top: 70px;">
        <div id="liveToast" class="toast align-items-center text-white border-0 shadow" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body fw-medium" id="toast-message">
                    ...
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>