<aside id="app-sidebar" aria-label="Thanh điều hướng chính">
    {{-- Logo --}}
    <div class="sidebar-logo-area">
        <div class="sidebar-logo-wrapper">
            <img src="/images/11zon_cropped.png" alt="KOC">
        </div>
    </div>

    {{-- Điều chỉnh màu chủ đạo --}}
    {{-- Slider removed from sidebar (moved to layout control if needed) --}}

    {{-- Danh sách menu - chia thành 3 phần: top / middle / bottom --}}

    {{-- Top: 1 mục (Dashboard) --}}
    <nav class="sidebar-nav" aria-label="Menu top">
        <ul>
            <li>
                <a href="/dashboard" class="sidebar-item {{ request()->is('dashboard') ? 'active' : '' }}"
                   title="Dashboard">
                    <span class="sidebar-icon">
                            @svg('fas-th-large')
                        </span>
                    <span class="sidebar-label">Dashboard</span>
                </a>
            </li>
        </ul>
    </nav>

    {{-- Middle: nhóm các item điều hướng (chiếm không gian giữa, sẽ co giãn) --}}
    <div class="sidebar-middle">
        <nav class="sidebar-nav" aria-label="Menu chính">
            <ul>
                <li>
                    <a href="/koc-management" class="sidebar-item {{ request()->is('koc-management*') ? 'active' : '' }}"
                       title="Quản lý KOL/KOC">
                        <span class="sidebar-icon">
                            @svg('fas-bullhorn')
                        </span>
                        <span class="sidebar-label">KOL / KOC</span>
                    </a>
                </li>
                <li>
                    <a href="/campaigns" class="sidebar-item {{ request()->is('campaigns*') ? 'active' : '' }}"
                       title="Quản lý chiến dịch">
                        <span class="sidebar-icon">
                            @svg('fas-bullseye')
                        </span>
                        <span class="sidebar-label">Chiến dịch</span>
                    </a>
                </li>
                <li>
                    <a href="/videos" class="sidebar-item {{ request()->is('videos*') ? 'active' : '' }}"
                       title="Quản lý video">
                        <span class="sidebar-icon">
                            @svg('fas-video')
                        </span>
                        <span class="sidebar-label">Video</span>
                    </a>
                </li>
                <li>
                    <a href="/reports" class="sidebar-item {{ request()->is('reports*') ? 'active' : '' }}"
                       title="Báo cáo hoạt động">
                        <span class="sidebar-icon">
                            @svg('fas-chart-column')
                        </span>
                        <span class="sidebar-label">Báo cáo</span>
                    </a>
                </li>
                <li x-data="{ toolsOpen: false }">
                    <a href="#"
                       class="sidebar-item sidebar-item--parent {{ request()->is('booking-sop*') || request()->is('analysis*') ? 'active' : '' }}"
                       title="Công cụ"
                       @click.prevent="toolsOpen = !toolsOpen">
                        <span class="sidebar-icon">
                            @svg('fas-toolbox')
                        </span>
                        <span class="sidebar-label">Công cụ</span>
                    </a>
                    <div class="sidebar-submenu" x-show="toolsOpen" x-cloak @click.outside="toolsOpen = false">
                        <a href="/booking-sop"
                           class="sidebar-subitem {{ request()->is('booking-sop') ? 'active' : '' }}"
                           title="Quy trình Booking mẫu">
                            <span class="sidebar-subicon">
                                @svg('fas-handshake')
                            </span>
                            <span class="sidebar-sublabel">SOP</span>
                        </a>

                        <a href="/analysis"
                           class="sidebar-subitem {{ request()->is('analysis') ? 'active' : '' }}"
                           title="Đơn hàng liên kết">
                            <span class="sidebar-subicon">
                                @svg('fas-chart-pie')
                            </span>
                            <span class="sidebar-sublabel">ĐH liên kết</span>
                        </a>

                        <a href="/analysis/live"
                           class="sidebar-subitem {{ request()->is('analysis/live*') ? 'active' : '' }}"
                           title="Phân tích phiên live">
                            <span class="sidebar-subicon">
                                @svg('fas-broadcast-tower')
                            </span>
                            <span class="sidebar-sublabel">Hiệu suất live</span>
                        </a>

                        <a href="/analysis/creator"
                           class="sidebar-subitem {{ request()->is('analysis/creator*') ? 'active' : '' }}"
                           title="Phân tích hiệu suất creator">
                            <span class="sidebar-subicon">
                                @svg('fas-chart-line')
                            </span>
                            <span class="sidebar-sublabel">Hiệu suất creator</span>
                        </a>
                    </div>
                </li>
                @if(auth()->check() && (auth()->user()->hasRole('owner') || auth()->user()->hasRole('admin')))
                    <li>
                        <a href="/staff" class="sidebar-item {{ request()->is('staff*') ? 'active' : '' }}"
                           title="Quản lý nhân viên">
                            <span class="sidebar-icon">
                                @svg('fas-users')
                            </span>
                            <span class="sidebar-label">Nhân viên</span>
                        </a>
                    </li>
                @endif
            </ul>
        </nav>
    </div>

    {{-- Bottom: user + tasks + logout (nằm dưới cùng) --}}
    <div class="sidebar-bottom">
        @if(auth()->check())
            <nav class="sidebar-nav" aria-label="Menu dưới">
                <ul>
                    <li>
                        <a href="#" class="sidebar-item" title="Thông tin người dùng" @click.prevent="window.openProfileModal()">
                            <span class="sidebar-icon sidebar-icon--user">
                                @svg('fas-user-circle')
                            </span>
                            <span class="sidebar-label">{{ auth()->user()->display_name ?? auth()->user()->name }}</span>
                        </a>
                    </li>
                    <li>
                        <a href="/tasks" class="sidebar-item {{ request()->is('tasks*') ? 'active' : '' }}"
                           title="Quản lý công việc">
                            <span class="sidebar-icon sidebar-icon--task">
                                @svg('fas-check-circle')
                                @if($uncompletedTaskCount ?? 0 > 0)
                                    <span class="sidebar-badge">{{ $uncompletedTaskCount }}</span>
                                @endif
                            </span>
                            <span class="sidebar-label">Task</span>
                        </a>
                    </li>
                    <li>
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display:contents;">
                            @csrf
                            <button type="submit" class="sidebar-item" title="Đăng xuất" style="background:transparent; border:none; cursor:pointer;">
                                <span class="sidebar-icon sidebar-icon--logout">
                                    @svg('fas-sign-out-alt')
                                </span>
                                <span class="sidebar-label">Logout</span>
                            </button>
                        </form>
                    </li>
                </ul>
            </nav>
        @endif
    </div>

    {{-- Swatch màu hiện tại --}}
    {{-- color swatch removed as requested --}}
</aside>