{{-- BACKDROP + CENTER WRAPPER --}}
<div
    x-show="sidebarOpen"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-50 flex items-center justify-center px-4 bg-black/40"
    @click.self="sidebarOpen = false">

    {{-- MODAL SIDEBAR --}}
    <div
        x-show="sidebarOpen"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl flex flex-col"
        style="max-height: 85vh;"
        @click.stop>

        {{-- HEADER (tidak ikut scroll) --}}
        <div class="flex-shrink-0 flex items-center justify-between p-4 border-b bg-gradient-to-b from-white to-gray-50/80 rounded-t-2xl">
            <h3 class="font-semibold text-gray-800">Daftar Materi</h3>
            <button @click="sidebarOpen = false"
                    class="p-2 rounded-lg hover:bg-gray-100"
                    aria-label="Tutup sidebar">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        {{-- BODY (scrollable) --}}
        <div class="flex-1 overflow-y-auto p-4">

            {{-- PROGRESS --}}
            <div class="mb-5">
                <p class="text-sm text-gray-500 mb-2">Progress Kursus ({{ $progress }}%)</p>
                <div class="w-full bg-gray-200 rounded-full h-2 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 --}}
            <div class="space-y-4 text-sm">

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

                        {{-- SECTION HEADER --}}
                        <button
                            type="button"
                            @click="open = !open"
                            class="w-full flex justify-between items-center px-4 py-3
                                   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-3">

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

                                @php
                                    $now = now();

                                    $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) }}"
                                                           @click="sidebarOpen = false"
                                                           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) }}"
                                                           @click="sidebarOpen = false"
                                                           class="block text-sm font-semibold truncate hover:underline underline-offset-2
                                                           {{ $expired ? 'text-red-600' : 'text-yellow-700' }}">
                                                            {{ $item->title }}
                                                        </a>

                                                    @elseif($item->type === 'task')
                                                        <a href="{{ route('siswa.task.show', $item->id) }}"
                                                           @click="sidebarOpen = false"
                                                           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 BODY SCROLL --}}

    </div>
    {{-- END MODAL --}}

</div>
{{-- END BACKDROP --}}