{{-- Ported from sidebar.php (repo root) — see the Phase 4 plan. $role passed in
     from layouts/app.blade.php (\App\Support\SessionAuth::role()). Pure
     role-conditional nav markup, no query logic. --}}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">

<link rel="stylesheet" href="/css/style.css?v={{ @filemtime(base_path('../css/style.css')) ?: 1 }}">

<style>
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 260px;
        background: var(--ax-surface, #ffffff);
        border-right: 1px solid var(--ax-border, #dee2e6);
        box-shadow: var(--ax-shadow-sm, 2px 0 8px rgba(0,0,0,0.08));
        display: flex;
        flex-direction: column;
        transition: left 0.28s ease, width 0.28s ease;
        z-index: 1040;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--ax-primary-100, #c7d7ff) transparent;
    }

    .sidebar::-webkit-scrollbar {
        width: 6px;
    }
    .sidebar::-webkit-scrollbar-thumb {
        background-color: var(--ax-primary-100, #c7d7ff);
        border-radius: 4px;
    }

    .sidebar.collapsed {
        width: 76px;
    }

    .sidebar .sidebar-header {
        padding: 14px;
        border-bottom: 1px solid var(--ax-border, #dee2e6);
        background: var(--ax-surface, #ffffff);
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .sidebar .sidebar-brand {
        font-weight: 700;
        color: var(--ax-primary-900, #003a7a);
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
    }

    .sidebar.collapsed .sidebar-brand {
        display: none;
    }

    .sidebar .toggle-btn {
        color: var(--ax-gray-600, #495057);
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        transition: background-color 0.2s ease, color 0.2s ease;
        flex-shrink: 0;
    }

    .sidebar .toggle-btn:hover {
        color: var(--ax-primary, #0d6efd);
        background: var(--ax-gray-100, #f1f3f5);
    }

    .sidebar ul {
        padding: 8px;
        flex: 1;
    }

    .sidebar ul li {
        background: none;
        border: none;
        box-shadow: none;
        margin: 2px 0;
        padding: 0;
    }

    .sidebar ul li a {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 11px 14px;
        color: var(--ax-gray-700, #1f355f);
        border-radius: var(--ax-radius-sm, 8px);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.92rem;
        transition: background-color 0.2s ease, color 0.2s ease;
        position: relative;
        white-space: nowrap;
    }

    .sidebar ul li a i {
        font-size: 1.2rem;
        color: var(--ax-primary-600, #2f4d8f);
        flex-shrink: 0;
        width: 22px;
        text-align: center;
    }

    .sidebar ul li a:hover {
        background: var(--ax-gray-100, #f8f9fa);
        color: var(--ax-primary, #0d6efd);
        text-decoration: none;
    }

    .sidebar ul li a.active {
        background: var(--ax-primary-50, #e9f0ff);
        color: var(--ax-primary, #0d6efd);
        font-weight: 700;
        box-shadow: inset 3px 0 0 var(--ax-primary, #0d6efd);
    }

    .sidebar ul li a.active i {
        color: var(--ax-primary, #0d6efd);
    }

    .sidebar.collapsed ul li a span {
        display: none;
    }

    .sidebar.collapsed ul li a {
        justify-content: center;
        padding: 11px;
    }

    .sidebar .nav-group-row {
        display: flex;
        align-items: stretch;
        gap: 2px;
    }

    .sidebar .nav-group-row > a {
        flex: 1 1 auto;
        min-width: 0;
    }

    .sidebar .nav-group-caret {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        flex-shrink: 0;
        background: none;
        border: none;
        color: var(--ax-gray-600, #495057);
        border-radius: var(--ax-radius-sm, 8px);
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .sidebar .nav-group-caret:hover {
        background: var(--ax-gray-100, #f8f9fa);
        color: var(--ax-primary, #0d6efd);
    }

    .sidebar .nav-group-caret i {
        font-size: 0.8rem;
        transition: transform 0.2s ease;
    }

    .sidebar .nav-group-caret[aria-expanded="true"] i {
        transform: rotate(180deg);
    }

    .sidebar .nav-group-list {
        list-style: none;
        padding: 2px 0 2px 14px;
        margin: 0;
    }

    .sidebar .nav-group-list li a {
        padding: 9px 14px 9px 34px;
        font-size: 0.87rem;
        font-weight: 500;
    }

    .sidebar .nav-group-list li a i {
        font-size: 1.05rem;
    }

    .sidebar.collapsed .nav-group-caret,
    .sidebar.collapsed .nav-group-list {
        display: none !important;
    }

    .sidebar .bottom-actions {
        margin-top: auto;
        padding: 12px;
        border-top: 1px solid var(--ax-border, #dee2e6);
        background: var(--ax-surface, #ffffff);
    }

    .sidebar .bottom-actions .btn {
        border-radius: var(--ax-radius-sm, 10px);
        font-size: 0.88rem;
        font-weight: 600;
        padding: 9px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.2s ease;
    }

    .sidebar .bottom-actions .btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--ax-shadow-sm);
    }

    .sidebar.collapsed .bottom-actions a span {
        display: none;
    }

    .content-wrapper {
        margin-left: 260px;
        transition: margin-left 0.28s ease, width 0.28s ease;
        width: calc(100% - 260px);
    }

    .content-wrapper.expanded {
        margin-left: 76px;
        width: calc(100% - 76px);
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(23, 27, 38, 0.45);
        z-index: 1035;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .sidebar-backdrop.active {
        display: block;
        opacity: 1;
    }

    @media (max-width: 991.98px) {
        .sidebar {
            left: -280px;
            width: 260px;
        }
        .sidebar.active {
            left: 0;
            box-shadow: var(--ax-shadow-lg, 4px 0 20px rgba(0,0,0,0.2));
        }
        .content-wrapper {
            margin-left: 0 !important;
            width: 100% !important;
        }
    }
</style>

<div class="sidebar-backdrop" id="sidebarBackdrop"></div>

<div class="sidebar" id="sidebar">

    <div class="sidebar-header">
        <span class="sidebar-brand">Меню</span>
        <button class="toggle-btn" id="sidebarToggle" title="Меню">
            <i class="bi bi-list"></i>
        </button>
    </div>

    <ul>
        @if ($role === 'admin')
            <li><a href="/analytics.php"><i class="bi bi-graph-up"></i><span>Аналитика</span></a></li>
            <li><a href="/admin/ent_scores.php"><i class="bi bi-clipboard-data"></i><span>ЕНТ</span></a></li>
            <li><a href="/admin/all_journal.php"><i class="bi bi-journal-text"></i><span>Журнал всех уроков</span></a></li>
            <li><a href="/admin/substitutions.php"><i class="bi bi-arrow-left-right"></i><span>Замены</span></a></li>
            <li><a href="/admin/backfills.php"><i class="bi bi-hourglass-split"></i><span>Задним числом</span></a></li>
            <li><a href="/admin/adviser_tasks.php"><i class="bi bi-clipboard-check"></i><span>Задачи кураторов</span></a></li>
            <li><a href="/admin/leads.php"><i class="bi bi-inbox"></i><span>Заявки</span></a></li>
            <li><a href="/groups.php"><i class="bi bi-diagram-3"></i><span>Группы</span></a></li>
            <li><a href="/admin/schedule.php"><i class="bi bi-calendar3"></i><span>Расписание</span></a></li>
            <li><a href="/students.php"><i class="bi bi-person-lines-fill"></i><span>Ученики</span></a></li>
            <li><a href="/admin/users.php"><i class="bi bi-gear"></i><span>Пользователи</span></a></li>

            <li class="nav-group">
                <div class="nav-group-row">
                    <a href="/admin/finances.php"><i class="bi bi-cash-coin"></i><span>Финансы</span></a>
                    <button type="button" class="nav-group-caret" data-bs-toggle="collapse" data-bs-target="#navGroupFinances" aria-expanded="false" aria-label="Развернуть Финансы">
                        <i class="bi bi-chevron-down"></i>
                    </button>
                </div>
                <ul class="collapse nav-group-list" id="navGroupFinances">
                    <li><a href="/payments.php"><i class="bi bi-cash-stack"></i><span>Оплаты</span></a></li>
                    <li><a href="/charges.php"><i class="bi bi-receipt"></i><span>Начисления</span></a></li>
                    <li><a href="/admin/teachers_count.php"><i class="bi bi-people"></i><span>Сводка по преподавателям</span></a></li>
                </ul>
            </li>

            <li><a href="/admin/feedbacks.php"><i class="bi bi-chat-square-text"></i><span>Жалобы и похвалы</span></a></li>

            <li class="nav-group">
                <div class="nav-group-row">
                    <a href="/admin/indexes.php"><i class="bi bi-bar-chart"></i><span>Индексы</span></a>
                    <button type="button" class="nav-group-caret" data-bs-toggle="collapse" data-bs-target="#navGroupIndexes" aria-expanded="false" aria-label="Развернуть Индексы">
                        <i class="bi bi-chevron-down"></i>
                    </button>
                </div>
                <ul class="collapse nav-group-list" id="navGroupIndexes">
                    <li><a href="/admin/tariffs.php"><i class="bi bi-tags"></i><span>Тарифы</span></a></li>
                    <li><a href="/admin/shop_items.php"><i class="bi bi-shop"></i><span>Магазин</span></a></li>
                    <li><a href="/admin/achievements.php"><i class="bi bi-trophy"></i><span>Достижения</span></a></li>
                    <li><a href="/admin/hero_levels.php"><i class="bi bi-star"></i><span>Уровни</span></a></li>
                </ul>
            </li>

            <li><a href="/admin/admin_holidays.php"><i class="bi bi-calendar-event"></i><span>Праздники</span></a></li>
        @endif

        @if ($role === 'adviser')
            <li><a href="/students.php"><i class="bi bi-person-lines-fill"></i><span>Ученики</span></a></li>
            <li><a href="/adviser/schedule.php"><i class="bi bi-calendar3"></i><span>Расписание</span></a></li>
            <li><a href="/groups.php"><i class="bi bi-diagram-3"></i><span>Группы</span></a></li>
            <li><a href="/adviser/feedbacks.php"><i class="bi bi-chat-square-text"></i><span>Жалобы и похвалы</span></a></li>
            <li><a href="/analytics.php"><i class="bi bi-graph-up"></i><span>Аналитика</span></a></li>
        @endif

        @if ($role === 'teacher')
            <li><a href="journal.php"><i class="bi bi-journal-text"></i><span>Журнал</span></a></li>
            <li><a href="teacher_schedule.php"><i class="bi bi-calendar3"></i><span>Расписание</span></a></li>
            <li><a href="attendance_history.php"><i class="bi bi-clock-history"></i><span>Незаполненные уроки</span></a></li>
        @endif

        @if ($role === 'manager')
            <li><a href="/sales/students.php"><i class="bi bi-person-lines-fill"></i><span>Ученики</span></a></li>
            <li><a href="/sales/schedule.php"><i class="bi bi-calendar3"></i><span>Расписание</span></a></li>
            <li><a href="/sales/groups.php"><i class="bi bi-diagram-3"></i><span>Группы</span></a></li>
            <li><a href="/charges.php"><i class="bi bi-receipt"></i><span>Начисления</span></a></li>
            <li><a href="/admin/tariffs.php"><i class="bi bi-tags"></i><span>Тарифы</span></a></li>
            <li><a href="/admin/shop_items.php"><i class="bi bi-shop"></i><span>Магазин</span></a></li>
            <li><a href="/analytics.php"><i class="bi bi-graph-up"></i><span>Аналитика</span></a></li>
        @endif
        @if ($role === 'parent')
            <li><a href="/parent/parent_dashboard.php"><i class="bi bi-person-lines-fill"></i><span>Главная</span></a></li>
        @endif
    </ul>

    <div class="bottom-actions">
        <a href="change_password.php" class="btn btn-outline-primary w-100 mb-2">
            <i class="bi bi-key"></i> <span>Сменить пароль</span>
        </a>
        <a href="/logout.php" class="btn btn-outline-danger w-100">
            <i class="bi bi-box-arrow-right"></i> <span>Выйти</span>
        </a>
    </div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const sidebar = document.getElementById('sidebar');
        const toggle = document.getElementById('sidebarToggle');
        const content = document.querySelector('.content-wrapper');
        const backdrop = document.getElementById('sidebarBackdrop');

        function closeMobileSidebar() {
            sidebar.classList.remove('active');
            backdrop.classList.remove('active');
        }

        toggle.addEventListener('click', () => {
            if (window.innerWidth < 992) {
                sidebar.classList.toggle('active');
                backdrop.classList.toggle('active');
            } else {
                sidebar.classList.toggle('collapsed');
                content.classList.toggle('expanded');
            }
        });

        backdrop.addEventListener('click', closeMobileSidebar);

        sidebar.querySelectorAll('ul li a').forEach((link) => {
            if (window.location.pathname === new URL(link.href, window.location.origin).pathname) {
                link.classList.add('active');
            }
            link.addEventListener('click', () => {
                if (window.innerWidth < 992) {
                    closeMobileSidebar();
                }
            });
        });

        sidebar.querySelectorAll('.nav-group-list a.active').forEach((activeLink) => {
            const groupList = activeLink.closest('.nav-group-list');
            if (!groupList) return;
            groupList.classList.add('show');
            const caret = sidebar.querySelector(`[data-bs-target="#${groupList.id}"]`);
            if (caret) caret.setAttribute('aria-expanded', 'true');
        });
    });
</script>