<aside id="sidebar" class="sidebar">

    <ul class="sidebar-nav" id="sidebar-nav">

        <li class="nav-item">
            <a class="nav-link" href="dashboard.php">
                <i class="bi bi-grid"></i>
                <span>Dashboard</span>
            </a>
        </li>

        <!-- E-Pin Section -->
        <li class="nav-item">
            <a class="nav-link collapsed" data-bs-target="#forms-nav" data-bs-toggle="collapse" href="#">
                <i class="bi bi-journal-text"></i><span>E-Pin</span><i class="bi bi-chevron-down ms-auto"></i>
            </a>
            <ul id="forms-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
                <li>
                    <a href="pin.php">
                        <i class="bi bi-circle"></i><span>View E-Pin</span>
                    </a>
                </li>
                <li>
                    <a href="pin-request.php">
                        <i class="bi bi-circle"></i><span>E-pin Request</span>
                    </a>
                </li>
            </ul>
        </li>

        <!-- Downline Section -->
        <li class="nav-item">
            <a class="nav-link collapsed" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="#">
                <i class="bi bi-layout-text-window-reverse"></i><span>Downline</span><i class="bi bi-chevron-down ms-auto"></i>
            </a>
            <ul id="tables-nav" class="nav-content collapse" data-bs-parent="#sidebar-nav">
                <li>
                    <a href="level.php">
                        <i class="bi bi-circle"></i><span>Self Downline</span>
                    </a>
                </li>
                <li>
                    <a href="tree.php">
                        <i class="bi bi-circle"></i><span>Genealogy Tree</span>
                    </a>
                </li>
            </ul>
        </li>

        <!-- SUPPORT SECTION WITH LIVE BADGE -->
        <li class="nav-item">
            <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'help.php' ? '' : 'collapsed'; ?>" href="help.php">
                <i class="bi bi-headset"></i>
                
                <span>Help & Support</span>
                
                <?php if ($unread_count > 0): ?>
                        <span class="support-badge" id="supportBadge" style="position: static;
    margin-left: 8px;"><?php echo $unread_count; ?></span>
                    <?php else: ?>
                        <span class="support-badge" id="supportBadge" style="display: none;position: static;
    margin-left: 8px;">0</span>
                    <?php endif; ?>
            </a>
        </li>

        <li class="nav-heading">Pages</li>

        <li class="nav-item">
            <a class="nav-link collapsed" href="registration.php">
                <i class="bi bi-person-plus"></i>
                <span>Register A User</span>
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link collapsed" href="income.php">
                <i class="bi bi-cash"></i>
                <span>Income</span>
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link collapsed" href="withdraw.php">
                <i class="bi bi-bank"></i>
                <span>Withdraw</span>
            </a>
        </li>

        <?php  
        $sql = "SELECT * FROM users WHERE user_id='$_SESSION[user_id]'";
        $run = mysqli_query($conn, $sql);
        $data = mysqli_fetch_assoc($run);
        ?>
        
        <li class="nav-item">
            <a class="nav-link collapsed" href="refferlink-in.php">
                <i class="bi bi-send"></i>
                <span>Refer</span>
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link collapsed" href="profile.php">
                <i class="bi bi-person-badge"></i>
                <span>Profile</span>
            </a>
        </li>

        <li class="nav-item">
            <a class="nav-link collapsed" href="logout.php">
                <i class="bi bi-box-arrow-right"></i>
                <span>Logout</span>
            </a>
        </li>

    </ul>

</aside>

<!-- Add CSS for sidebar badge -->
<style>
#sidebarSupportBadge {
    transition: all 0.3s;
    animation: sidebarPulse 2s infinite;
}

@keyframes sidebarPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); background: linear-gradient(135deg, #dc3545, #c82333); }
    100% { transform: scale(1); }
}

.sidebar-nav .nav-link .badge {
    float: right;
    margin-top: 3px;
    font-size: 0.7rem;
    padding: 3px 7px;
}

.sidebar-nav .nav-link:not(.collapsed) .badge {
    background: white !important;
    color: #4154f1 !important;
    animation: none;
}
</style>