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

        <!-- Dashboard (COMMON) -->
        <li class="nav-item">
            <a class="nav-link active" href="#">
                <i class="mdi mdi-home menu-icon"></i>
                <span class="menu-title">Dashboard</span>
            </a>
        </li>

        {{-- ================= SUPER ADMIN ================= --}}
        @role('super_admin')

        <!-- Principals -->
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#principals-menu">
                <i class="mdi mdi-account-tie menu-icon"></i>
                <span class="menu-title">Principals</span>
                <i class="mdi mdi-chevron-down menu-arrow"></i>
            </a>
            <div class="collapse" id="principals-menu">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"><a class="nav-link" href="#">All Principals</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pending Approval</a></li>
                </ul>
            </div>
        </li>

        <!-- Teachers -->
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#teachers-menu">
                <i class="mdi mdi-account-group menu-icon"></i>
                <span class="menu-title">Teachers</span>
                <i class="mdi mdi-chevron-down menu-arrow"></i>
            </a>
            <div class="collapse" id="teachers-menu">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"><a class="nav-link" href="#">All Teachers</a></li>
                </ul>
            </div>
        </li>

        <!-- Jobs -->
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#jobs-menu">
                <i class="mdi mdi-briefcase menu-icon"></i>
                <span class="menu-title">Jobs</span>
                <i class="mdi mdi-chevron-down menu-arrow"></i>
            </a>
            <div class="collapse" id="jobs-menu">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"><a class="nav-link" href="#">All Jobs</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pending Jobs</a></li>
                </ul>
            </div>
        </li>

        <!-- Applications -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-file-document menu-icon"></i>
                <span class="menu-title">Applications</span>
            </a>
        </li>

        <!-- Subscriptions -->
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#finance-menu">
                <i class="mdi mdi-currency-usd menu-icon"></i>
                <span class="menu-title">Subscriptions</span>
                <i class="mdi mdi-chevron-down menu-arrow"></i>
            </a>
            <div class="collapse" id="finance-menu">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"><a class="nav-link" href="#">Plans</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Payments</a></li>
                </ul>
            </div>
        </li>

        <!-- Settings -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-cog menu-icon"></i>
                <span class="menu-title">Settings</span>
            </a>
        </li>

        @endrole


        {{-- ================= PRINCIPAL ================= --}}
        @role('principal')

        <!-- School Profile -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-domain menu-icon"></i>
                <span class="menu-title">School Profile</span>
            </a>
        </li>

        <!-- Jobs -->
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#principal-jobs-menu">
                <i class="mdi mdi-briefcase menu-icon"></i>
                <span class="menu-title">Jobs</span>
                <i class="mdi mdi-chevron-down menu-arrow"></i>
            </a>
            <div class="collapse" id="principal-jobs-menu">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"><a class="nav-link" href="#">Post Job</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">My Jobs</a></li>
                </ul>
            </div>
        </li>

        <!-- Applications -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-account-search menu-icon"></i>
                <span class="menu-title">Applications</span>
            </a>
        </li>

        <!-- Subscription -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-currency-usd menu-icon"></i>
                <span class="menu-title">Subscription</span>
            </a>
        </li>

        @endrole


        {{-- ================= TEACHER ================= --}}
        @role('teacher')

        <!-- Profile -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-account menu-icon"></i>
                <span class="menu-title">My Profile</span>
            </a>
        </li>

        <!-- Jobs -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-briefcase-search menu-icon"></i>
                <span class="menu-title">Browse Jobs</span>
            </a>
        </li>

        <!-- Applied -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-file-document menu-icon"></i>
                <span class="menu-title">Applied Jobs</span>
            </a>
        </li>

        <!-- Interviews -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-calendar-clock menu-icon"></i>
                <span class="menu-title">Interviews</span>
            </a>
        </li>

        <!-- Hired -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-check-circle menu-icon"></i>
                <span class="menu-title">Hired Status</span>
            </a>
        </li>

        @endrole

    </ul>
</nav>
<style>
    .nav { padding: 1rem 0; }
    .nav-item { width: 100%; margin: 2px 0; }
    .nav-link {
        display: flex;
        align-items: center;
        padding: 0.75rem 1.5rem;
        color: #f36969;
        transition: all 0.3s ease;
    }
    .nav-link:hover { color: #007bff; }
    .nav-link:hover > .menu-title {
        color: #f36969 !important;
        font-family: "ubuntu-medium", sans-serif;
    }
    .menu-icon { margin-right: 0.75rem; font-size: 1.1rem; width: 20px; text-align: center; }
    .menu-title { flex: 1; font-size: 0.9rem; }
    .menu-arrow { font-size: 1rem; transition: transform 0.3s ease; }
    .nav-link[aria-expanded="true"] .menu-arrow { transform: rotate(180deg); }
    .sub-menu { padding-left: 2.5rem; }
    .sub-menu .nav-link { padding: 0.5rem 1rem; font-size: 0.85rem; }
    .badge { padding: 0.25rem 0.5rem; font-size: 0.65rem; border-radius: 10px; margin-left: 0.5rem; }
    .badge-warning { background-color: #ffc107; color: #000; }
    .badge-danger { background-color: #dc3545; color: #fff; }
    .badge-success { background-color: #28a745; color: #fff; }
    .badge-info { background-color: #17a2b8; color: #fff; }
</style>