@php
    $depID = session('ismngr')['department_id'];
    $category = \App\Models\Department::where('id',$depID)->first('categories');
    $cate = json_decode($category->categories);
@endphp

<style>

    .sidebar {
        width: 300px; !important
        background-color: #020F20; !important
        padding: 20px; !important
        position: fixed;      /* Fix the sidebar to the left of the viewport */
        top: 0;   !important             /* Ensure it's positioned at the top */
        left: 0;   !important            /* Align it to the left side of the page */
        height: 100vh;                   /* Full viewport height */
        overflow-y: auto;!important      /* Enable vertical scrolling if content is too long */
    }
    .sidebar {
        min-height: 100vh;
    }
    .c-list{
        background-color: transparent;
        padding: 0px;
        border: 0px;
        margin-left: 40px;
    }
    .toggle-icon{
        margin-right: 0px !important;
        padding: 0px !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        color: #6EA0F9 !important;
        font-size: 14px !important;
    }
    .c-list a{
        color: #fff;
        margin-bottom: 5px;
        padding: 5px 10px;
        border-left: 3px solid transparent;
    }
    .c-list a:hover{
        border-left: 3px solid #1a1a4e;
    }
    .c-list .active{
        border-left: 3px solid #6EA0F9;
        background: transparent;
        color: #fff;
    }
</style>

    <!-- Sidebar -->
<div class="sidebar">
    <div class="logo">
        <img src="{{ asset('assets') }}/img/logo-sidebar.png" alt="Carisma Logo">
    </div>

    <a href="{{route('mngr.dashboard')}}" class="menu-item" id="dashboardLink">
        <i class="fas fa-th-large"></i>Dashboard</a>

    <a href="{{route('employee.list')}}" class="menu-item" id="employeeLink">
        <i class="fas fa-user"></i>Employee</a>

    <a href="{{route('dep.targets.listing')}}" class="menu-item" id="employeeLink">
        <i class="fas fa-chart-bar"></i>All Targets</a>
          <a href="{{ route('mManager.points') }}" class="menu-item" id="targetLink">
      <i class="fas fa-users"></i>Requested Points</a>
    <a href="{{route('chat.index')}}" class="menu-item" id="chatLink">
        <i class="far fa-comment-dots"></i>Chat</a>
 <a href="{{route('empVideos.empIndex')}}" class="menu-item" id="pointsLink">
        <i class="fas fa-video"></i>Videos</a>
         <a href="{{route('empVin.index')}}" class="menu-item" id="pointsLink">
        <i class="fas fa-car"></i>VIN Checker</a>
        @foreach($cate as $category)
    <ul class="list-group">
        <!-- Main Category -->
        <li class="list-group-item px-0 py-0 bg-transparent border-0">
            <div class="menu-toggle" data-bs-toggle="collapse" href="#category_{{ $loop->index }}" role="button" aria-expanded="false" aria-controls="category_{{ $loop->index }}">
                <div class="menu-item">
                    <i class="fas fa-th-large"></i>
                    <span>{{ $category }}</span> <!-- Head Category -->
                    <i class="fas fa-angle-right toggle-icon ms-auto"></i>
                </div>
            </div>
            <ul class="list-group collapse" id="category_{{ $loop->index }}">
                <!-- Subcategories -->
                <li class="list-group-item c-list">
                    <a href="{{ route('category.admin', ['category' => urlencode($category)]) }}" class="w-100 active d-flex">Admin</a>
                    <a href="{{ route('employee.points', ['category' => urlencode($category)]) }}" class="w-100 d-flex">Employees</a>
                    <a href="{{ route('targets.listing', ['category' => urlencode($category)]) }}" class="w-100 d-flex">Targets</a>
                </li>
            </ul>
        </li>
    </ul>
@endforeach


    <a href="{{route('mngr.leaderboard')}}" class="menu-item" id="leaderboardLink">
        <i class="fas fa-chart-bar"></i> Leader Board </a>
    
    <a href="{{route('mngr.prize.management')}}" class="menu-item" id="prizeManagementLink">
        <i class="fas fa-gift"></i> Prize Management</a>

    <a href="{{ route('mngr.logout') }}" class="menu-item">
        <i class="fas fa-sign-out-alt"></i> Log Out
    </a>
</div>
<!-- Sidebar -->
@section('custom-scripts')
    <script type="text/javascript">
        // =====menu============
        document.querySelectorAll('.menu-toggle').forEach(toggle => {
            toggle.addEventListener('click', function() {
                // Find all icons within the clicked menu-toggle
                const icons = this.querySelectorAll('.fa-angle-right, .fa-angle-down');
                icons.forEach(icon => {
                    // Toggle icon class
                    if (icon.classList.contains('fa-angle-right')) {
                        icon.classList.remove('fa-angle-right');
                        icon.classList.add('fa-angle-down');
                    } else {
                        icon.classList.remove('fa-angle-down');
                        icon.classList.add('fa-angle-right');
                    }
                });
            });
        });
    </script>
@endsection