{{--
    FIX #4: Hapus `fixed right-0 top-[73px] bottom-0` yang hardcode pixel.
    Ganti dengan `sticky top-0` agar sidebar mengikuti layout flex secara dinamis
    tanpa bergantung pada tinggi topbar yang bisa berubah.
--}}
<aside
    class="w-80 border-l bg-gradient-to-b from-white to-gray-50/80
           flex-shrink-0 sticky top-0 self-start flex flex-col"
    style="height: 100vh;">

    <!-- SCROLLABLE BODY -->
    <div class="flex-1 overflow-y-auto p-6">

    <!-- PROGRESS DESKTOP -->
    <div class="mb-6">
        <p class="text-sm text-gray-500 mb-2">
            Progress Kursus ({{ $progress }}%)
        </p>

        <div class="w-full bg-gray-200 rounded-full h-2 mb-6 shadow-inner">
            <div
                class="bg-gray-900 h-2 rounded-full transition-all duration-500 ease-out"
                style="width: {{ $progress }}%"
            ></div>
        </div>
    </div>

    <!-- SECTION LIST DESKTOP -->
    <div class="space-y-5 text-sm">

        @foreach($sections as $section)
            <div x-data="{ open: true }" class="bg-white rounded-xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow">

                <!-- SECTION HEADER -->
                <button
                    type="button"
                    @click="open = !open"
                    class="w-full flex justify-between items-center px-4 py-3.5
                           font-semibold text-gray-800 bg-gray-50/80 hover:bg-gray-100
                           transition-colors border-b border-gray-100"
                >
                    <span class="truncate">{{ $section->title }}</span>
                    <div class="flex items-center gap-2">
                        <span class="text-xs bg-white px-2 py-1 rounded-full text-gray-600 shadow-sm">
                            {{ $section->items->count() }}
                        </span>
                        <i data-lucide="chevron-down"  x-show="open"  class="w-4 h-4 text-gray-600"></i>
                        <i data-lucide="chevron-right" x-show="!open" class="w-4 h-4 text-gray-600"></i>
                    </div>
                </button>

                <!-- ITEMS -->
                <ul x-show="open" x-transition class="space-y-2 p-4">

                    @foreach($section->items as $item)

                        @php
                            $now = now();

                            // Aman untuk stdClass maupun Eloquent model
                            $rawAvailable = $item->available_at ?? null;
                            $rawDeadline  = $item->deadline ?? null;

                            $availableAt = $rawAvailable
                                ? \Carbon\Carbon::parse($rawAvailable)
                                : null;

                            $deadline = $rawDeadline
                                ? \Carbon\Carbon::parse($rawDeadline)
                                : null;

                            $notYetOpen = $availableAt && $now->lt($availableAt);
                            $expired    = $deadline    && $now->gt($deadline);

                            $canClickQuiz = $item->type === 'quiz'
                                && ! $item->is_locked
                                && ! $notYetOpen;

                            $canClickTask = $item->type === 'task'
                                && ! $item->is_locked
                                && ! $notYetOpen;

                            $canClickNormal = ! $item->is_locked
                                && ! $notYetOpen
                                && ! $expired;
                        @endphp

                        <li class="relative">

                            {{-- ITEM BISA DIKLIK --}}
                            @if($canClickNormal || $canClickQuiz || $canClickTask)

                                <div class="group relative flex items-start justify-between gap-2 p-3 rounded-xl
                                    transition-all duration-200 hover:shadow-md
                                    {{ $item->type === 'quiz' && $expired ? 'bg-red-50/80 border border-red-200' : '' }}
                                    {{ $item->type === 'task' ? 'bg-blue-50/80 border border-blue-200 hover:bg-blue-100/80' : '' }}
                                    {{ $item->type === 'lesson' ? 'hover:bg-gray-100/80 border border-transparent hover:border-gray-200' : '' }}">

                                    <div class="flex gap-3 flex-1">

                                        <div class="flex-shrink-0">
                                            @if($item->type === 'lesson')
                                                <div class="w-6 h-6 rounded-full bg-amber-100 flex items-center justify-center">
                                                    <i data-lucide="book-open" class="w-3.5 h-3.5 text-amber-700"></i>
                                                </div>
                                            @elseif($item->type === 'quiz')
                                                <div class="w-6 h-6 rounded-full bg-yellow-100 flex items-center justify-center">
                                                    <i data-lucide="clipboard-list" class="w-3.5 h-3.5 text-yellow-700"></i>
                                                </div>
                                            @elseif($item->type === 'task')
                                                <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center">
                                                    <i data-lucide="upload-cloud" class="w-3.5 h-3.5 text-blue-700"></i>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="flex-1 min-w-0">
                                            @if($item->type === 'lesson')
                                                <a href="{{ route('siswa.modul.show', $item->id) }}"
                                                   class="block text-sm font-medium truncate hover:underline underline-offset-2
                                                   @if($item->id === $lesson->id)
                                                       font-semibold text-black
                                                   @elseif($item->is_completed)
                                                       text-green-600
                                                   @else
                                                       text-gray-700 group-hover:text-gray-900
                                                   @endif">
                                                    {{ $item->title }}
                                                </a>

                                            @elseif($item->type === 'quiz')
                                                <a href="{{ route('siswa.quiz.intro', $item->id) }}"
                                                   class="block text-sm font-semibold truncate hover:underline underline-offset-2
                                                   {{ $expired ? 'text-red-600' : 'text-yellow-700' }}">
                                                    {{ $item->title }}
                                                </a>
                                                
                                                @if($expired)
                                                    <div class="text-[11px] text-red-500 mt-1.5 flex items-center gap-1.5 bg-red-100/50 px-2 py-1 rounded-full w-fit">
                                                        <i data-lucide="alert-circle" class="w-3 h-3"></i>
                                                        Deadline berakhir: {{ $deadline->translatedFormat('d F Y H:i') }}
                                                    </div>
                                                @endif

                                            @elseif($item->type === 'task')
                                                <a href="{{ route('siswa.task.show', $item->id) }}"
                                                   class="block text-sm font-semibold truncate hover:underline underline-offset-2
                                                   {{ $expired ? 'text-gray-500' : 'text-blue-700' }}">
                                                    {{ $item->title }}
                                                </a>

                                                @if($expired)
                                                    <div class="text-[11px] text-red-500 mt-1.5 flex items-center gap-1.5 bg-red-100/50 px-2 py-1 rounded-full w-fit">
                                                        <i data-lucide="alert-circle" class="w-3 h-3"></i>
                                                        Deadline berakhir: {{ $deadline->translatedFormat('d F Y H:i') }}
                                                    </div>
                                                @endif
                                            @endif
                                        </div>
                                    </div>

                                    @if($item->is_completed)
                                        <div class="flex-shrink-0">
                                            <i data-lucide="check-circle" class="w-4 h-4 text-green-600"></i>
                                        </div>
                                    @endif
                                </div>

                                <!--@if($item->type === 'quiz' && $expired)-->
                                <!--    <div class="text-[11px] text-red-500 mt-1 ml-9 flex items-center gap-1.5 bg-red-100/50 px-2 py-1 rounded-full w-fit">-->
                                <!--        <i data-lucide="alert-triangle" class="w-3 h-3"></i>-->
                                <!--        Deadline berakhir: {{ $deadline->translatedFormat('d F Y H:i') }}-->
                                <!--    </div>-->
                                <!--@endif-->

                            {{-- BELUM DIBUKA --}}
                            @elseif($notYetOpen)

                                <div class="p-3 rounded-xl bg-gradient-to-r from-yellow-50 to-amber-50/50 border border-yellow-200 flex gap-3">
                                    <div class="w-6 h-6 rounded-full bg-yellow-200 flex items-center justify-center flex-shrink-0">
                                        <i data-lucide="clock" class="w-3.5 h-3.5 text-yellow-800"></i>
                                    </div>
                                    <div class="flex-1">
                                        <span class="text-sm font-medium text-yellow-800 block">{{ $item->title }}</span>
                                        <div class="text-[11px] text-yellow-700 mt-1.5 flex items-center gap-1 bg-yellow-200/50 px-2 py-1 rounded-full w-fit">
                                            <i data-lucide="calendar" class="w-3 h-3"></i>
                                            Dibuka: {{ $availableAt->translatedFormat('d F Y H:i') }}
                                        </div>
                                    </div>
                                </div>

                            {{-- EXPIRED --}}
                            @elseif($expired)

                                <div class="p-3 rounded-xl bg-gradient-to-r from-red-50 to-rose-50/50 border border-red-200 flex gap-3">
                                    <div class="w-6 h-6 rounded-full bg-red-200 flex items-center justify-center flex-shrink-0">
                                        <i data-lucide="x-circle" class="w-3.5 h-3.5 text-red-800"></i>
                                    </div>
                                    <div class="flex-1">
                                        <span class="text-sm font-medium text-red-800 block">{{ $item->title }}</span>
                                        <div class="text-[11px] text-red-700 mt-1.5 flex items-center gap-1 bg-red-200/50 px-2 py-1 rounded-full w-fit">
                                            <i data-lucide="alert-octagon" class="w-3 h-3"></i>
                                            Deadline berakhir: {{ $deadline->translatedFormat('d F Y H:i') }}
                                        </div>
                                    </div>
                                </div>

                            {{-- TERKUNCI --}}
                            @else

                                <div class="p-3 rounded-xl bg-gradient-to-r from-gray-100 to-gray-50 border border-gray-200 flex gap-3 opacity-80">
                                    <div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center flex-shrink-0">
                                        <i data-lucide="lock" class="w-3.5 h-3.5 text-gray-600"></i>
                                    </div>
                                    <div class="flex-1">
                                        <span class="text-sm font-medium text-gray-600 block">{{ $item->title }}</span>
                                        <div class="text-[11px] text-gray-500 mt-1.5 flex items-center gap-1">
                                            <i data-lucide="arrow-right" class="w-3 h-3"></i>
                                            Selesaikan item sebelumnya
                                        </div>
                                    </div>
                                </div>

                            @endif

                        </li>
                    @endforeach

                </ul>
            </div>
        @endforeach

    </div>

    <div class="h-4"></div>
    </div><!-- end scrollable -->
</aside>