{{-- resources/views/admin/kesiswaan/kenaikan-kelas/_sidebar_kelas.blade.php --}}

<div class="card card-round shadow-sm border-0 mb-3">
    <div class="card-header bg-primary text-white py-2 px-3">
        <div class="d-flex align-items-center">
            <i class="fa fa-list me-2"></i>
            <span class="fw-bold text-uppercase" style="font-size: 0.85rem; letter-spacing: 0.5px;">Data Kelas</span>
        </div>
    </div>
    
    <div class="card-body p-0">
        <div class="accordion accordion-flush" id="accordionKelas">
            
            @foreach($sidebarMenu as $groupName => $rombelItems)
                @php
                    $collapseId = 'collapse-' . Str::slug($groupName);
                    $isActiveGroup = $rombelItems->contains('id', $selectedRombelId);
                @endphp

                <div class="accordion-item border-bottom">
                    <h2 class="accordion-header">
                        <button class="accordion-button {{ $isActiveGroup ? '' : 'collapsed' }} py-2 px-3 shadow-none" 
                                type="button" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#{{ $collapseId }}"
                                style="font-size: 0.85rem; font-weight: 600;">
                            {{ $groupName }}
                        </button>
                    </h2>
                    
                    <div id="{{ $collapseId }}" 
                         class="accordion-collapse collapse {{ $isActiveGroup ? 'show' : '' }}" 
                         data-bs-parent="#accordionKelas">
                        
                        {{-- List Group: Item lebih padat --}}
                        <div class="list-group list-group-flush">
                            @foreach($rombelItems as $item)
                                @php
                                    $isActive = $selectedRombelId == $item->id;
                                @endphp
                                
                                <a href="{{ route('admin.kenaikan-kelas.index', array_merge(request()->query(), ['rombel_id' => $item->id])) }}" 
                                   class="list-group-item list-group-item-action py-1 px-3 d-flex justify-content-between align-items-center {{ $isActive ? 'bg-light text-primary fw-bold border-start border-primary border-3' : 'text-muted' }}"
                                   style="font-size: 0.8rem; {{ $isActive ? 'background-color: #f8f9fa;' : '' }}">
                                    
                                    <span>
                                        @if($isActive)
                                            <i class="fa fa-caret-right me-1 small"></i>
                                        @else
                                            <i class="fa fa-circle me-2 text-muted" style="font-size: 4px; vertical-align: middle;"></i>
                                        @endif
                                        {{ $item->nama_rombel }}
                                    </span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            @endforeach

        </div>
    </div>
</div>