@extends('siswa.layout')

@section('content')

<div class="space-y-16">
    {{-- ================= GLOBAL ALERT ================= --}}
@if(session('warning') || session('error') || session('success'))

<div id="global-toast"
     class="fixed top-20 left-1/2 -translate-x-1/2 z-[9999]
            transition-all duration-500 opacity-0 scale-95">

    {{-- WARNING --}}
    @if(session('warning'))
        <div class="toast-item bg-yellow-50 border border-yellow-200 text-yellow-800
                    px-6 py-4 rounded-2xl shadow-xl flex items-center gap-3 cursor-pointer">
            <i data-lucide="alert-circle" class="w-5 h-5"></i>
            {{ session('warning') }}
        </div>
    @endif

    {{-- ERROR --}}
    @if(session('error'))
        <div class="toast-item bg-red-50 border border-red-200 text-red-700
                    px-6 py-4 rounded-2xl shadow-xl flex items-center gap-3 cursor-pointer">
            <i data-lucide="x-circle" class="w-5 h-5"></i>
            {{ session('error') }}
        </div>
    @endif

    {{-- SUCCESS --}}
    @if(session('success'))
        <div class="toast-item bg-green-50 border border-green-200 text-green-700
                    px-6 py-4 rounded-2xl shadow-xl flex items-center gap-3 cursor-pointer">
            <i data-lucide="check-circle" class="w-5 h-5"></i>
            {{ session('success') }}
        </div>
    @endif

</div>

<script>
document.addEventListener('DOMContentLoaded', () => {

    const toast = document.getElementById('global-toast');
    if(!toast) return;

    setTimeout(() => {
        toast.classList.remove('opacity-0','scale-95');
        toast.classList.add('opacity-100','scale-100');
    }, 50);

    setTimeout(() => hideToast(), 2500);

    toast.addEventListener('click', hideToast);

    function hideToast(){
        toast.classList.remove('opacity-100','scale-100');
        toast.classList.add('opacity-0','scale-95');
        setTimeout(()=> toast.remove(), 400);
    }

});
</script>

@endif

    <!-- ================= HERO DASHBOARD ================= -->
    <div class="relative overflow-hidden rounded-3xl p-8 md:p-10 text-white
                bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">

        <div class="flex flex-col md:flex-row justify-between gap-10">

            <!-- KIRI : TEKS -->
            <div class="max-w-2xl">
                <p class="text-xs tracking-widest text-slate-400 uppercase">
                    Dashboard Siswa
                </p>

                <h1 class="mt-3 text-3xl md:text-4xl font-extrabold leading-tight">
                    Selamat datang,
                    <span class="text-yellow-400">
                       {{ $student->name }}
                    </span>
                </h1>

                <p class="mt-4 italic text-slate-300">
                    "Kesuksesan lahir dari konsistensi."
                </p>
            </div>

            <!-- KANAN : JAM + STATS (VERTIKAL) -->
            <div class="flex flex-col items-end gap-6">

                <!-- JAM -->
                <p id="datetime"
                   class="text-yellow-400 font-semibold flex items-center gap-2">
                    <i data-lucide="clock" class="w-4 h-4"></i>
                </p>

                <!-- STATS -->
                <div class="flex gap-8 text-center">
                    <div>
                        <p class="text-2xl font-bold text-white">
                            {{ $myModules->count() }}
                        </p>
                        <p class="text-xs text-slate-300 uppercase">Mapel</p>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-yellow-400">
                            {{ $upcomingQuizzes->count() }}
                        </p>
                        <p class="text-xs text-slate-300 uppercase">Quiz Aktif</p>
                    </div>
                    <div>
                        <p class="text-2xl font-bold text-blue-400">
                            {{ $upcomingTasks->count() }}
                        </p>
                        <p class="text-xs text-slate-300 uppercase">Tugas</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ================= AGENDA MENDATANG - VERSI ELEGAN ================= -->
    <section class="space-y-6">
        
        <!-- HEADER -->
        <div class="flex items-center gap-3">
            <div class="p-3 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600">
                <i data-lucide="calendar-clock" class="w-6 h-6 text-black"></i>
            </div>
            <div>
                <h2 class="text-2xl font-bold text-slate-800">Agenda Mendatang</h2>
                <p class="text-sm text-slate-500">Quiz dan tugas yang perlu segera diselesaikan</p>
            </div>
        </div>

        <!-- GRID AGENDA -->
        <div class="grid md:grid-cols-2 gap-6">
            
            <!-- QUIZ SECTION -->
            <div class="bg-gradient-to-br from-white to-slate-50 rounded-2xl p-6 border border-black shadow-sm">
                <div class="flex items-center gap-3 mb-6">
                    <div class="p-2.5 rounded-lg bg-gradient-to-r from-yellow-500 to-yellow-600">
                        <i data-lucide="clipboard-list" class="w-5 h-5 text-black"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg text-black">Quiz Akan Datang</h3>
                        <p class="text-sm text-black">{{ $upcomingQuizzes->count() }} quiz tersedia</p>
                    </div>
                </div>

                <div class="space-y-4">
                    @forelse($upcomingQuizzes as $quiz)
                        <a href="{{ route('siswa.quiz.intro', $quiz->id) }}"
                           class="group block relative overflow-hidden rounded-xl border border-black bg-slate-200 hover:border-yellow-300 hover:shadow-lg transition-all duration-300">
                            <div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-yellow-500 to-yellow-600"></div>
                            <div class="p-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center gap-3">
                                            <div class="p-2 rounded-lg bg-yellow-50 group-hover:bg-yellow-100">
                                                <i data-lucide="clipboard-list" class="w-4 h-4 text-yellow-600"></i>
                                            </div>
                                            <div>
                                                <p class="font-semibold text-black group-hover:text-yellow-700">
                                                    {{ $quiz->title }}
                                                </p>
                                                <div class="flex items-center gap-3 mt-1">
                                                    <p class="text-sm text-black flex items-center gap-1">
                                                        <i data-lucide="calendar-clock" class="w-3 h-3"></i>
                                                        {{ $quiz->deadline_formatted }}
                                                    </p>
                                                    @if(isset($quiz->time_limit) && $quiz->time_limit)
                                                        <p class="text-sm text-black flex items-center gap-1">
                                                            <i data-lucide="clock" class="w-3 h-3"></i>
                                                            {{ $quiz->time_limit }} menit
                                                        </p>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pl-4">
                                        <i data-lucide="arrow-right" class="w-4 h-4 text-black group-hover:text-black-600"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @empty
                        <div class="text-center py-8">
                            <div class="mx-auto w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center mb-4">
                                <i data-lucide="check-circle" class="w-8 h-8 text-black"></i>
                            </div>
                            <p class="text-black font-medium">Tidak ada quiz mendatang</p>
                            <p class="text-sm text-black mt-1">Semua quiz telah diselesaikan</p>
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- TUGAS SECTION -->
            <div class="bg-gradient-to-br from-white to-slate-50 rounded-2xl p-6 border border-black shadow-sm">
                <div class="flex items-center gap-3 mb-6">
                    <div class="p-2.5 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600">
                        <i data-lucide="upload-cloud" class="w-5 h-5 text-black"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg text-black">Tugas Akan Datang</h3>
                        <p class="text-sm text-black">{{ $upcomingTasks->count() }} tugas tersedia</p>
                    </div>
                </div>

                <div class="space-y-4">
                    @forelse($upcomingTasks as $task)
                        <a href="{{ route('siswa.task.show', $task->id) }}"
                           class="group block relative overflow-hidden rounded-xl border border-black bg-slate-200 hover:border-blue-300 hover:shadow-lg transition-all duration-300">
                            <div class="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 to-blue-600"></div>
                            <div class="p-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex-1">
                                        <div class="flex items-center gap-3">
                                            <div class="p-2 rounded-lg bg-blue-50 group-hover:bg-blue-100">
                                                <i data-lucide="upload-cloud" class="w-4 h-4 text-blue-600"></i>
                                            </div>
                                            <div>
                                                <p class="font-semibold text-black group-hover:text-blue-700">
                                                    {{ $task->title }}
                                                </p>
                                                <div class="flex items-center gap-3 mt-1">
                                                    <p class="text-sm text-black flex items-center gap-1">
                                                        <i data-lucide="calendar-clock" class="w-3 h-3"></i>
                                                        {{ $task->deadline_formatted }}
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pl-4">
                                        <i data-lucide="arrow-right" class="w-4 h-4 text-black group-hover:text-black-600"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @empty
                        <div class="text-center py-8">
                            <div class="mx-auto w-16 h-16 rounded-full bg-slate-100 flex items-center justify-center mb-4">
                                <i data-lucide="check-circle" class="w-8 h-8 text-slate-400"></i>
                            </div>
                            <p class="text-slate-500 font-medium">Tidak ada tugas mendatang</p>
                            <p class="text-sm text-slate-400 mt-1">Semua tugas telah diselesaikan</p>
                        </div>
                    @endforelse
                </div>
            </div>

        </div>
    </section>

    <!-- ================= DAFTAR JURUSAN ================= -->
    <section class="space-y-6">

        <h2 class="text-xl font-bold text-slate-800 flex items-center gap-2">
            <i data-lucide="graduation-cap" class="w-6 h-6"></i>
            Daftar Jurusan
        </h2>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">

            @foreach($departments as $department)

                @php
                    $isMine = $student->department
                        && $department->id === $student->department->id;
                @endphp

                <div class="relative h-44 rounded-2xl overflow-hidden group
                            border {{ $isMine ? 'border-slate-300' : 'border-slate-200 opacity-60' }}">

                    <div class="absolute inset-0 bg-cover bg-center"
                        style="background-image:
                        {{ $department->image
                            ? (
                                str_starts_with($department->image, 'http')
                                    ? 'url(' . $department->image . ')'
                                    : 'url(' . asset('uploads/' . $department->image) . ')'
                            )
                            : 'linear-gradient(135deg,#1e293b,#334155)' }}"
                        >
                    </div>

                    <div class="absolute inset-0 bg-black/55"></div>

                    @unless($isMine)
                        <div class="absolute inset-0 flex items-center justify-center z-20">
                            <i data-lucide="lock" class="w-10 h-10 text-white"></i>
                        </div>
                    @endunless

                    <div class="relative z-10 p-5 text-white">
                        <h3 class="font-semibold text-lg">
                            {{ $department->name }}
                        </h3>
                        <p class="text-sm text-slate-200 flex items-center gap-1">
                            <i data-lucide="layers" class="w-4 h-4"></i>
                            {{ $department->modules_count }} Modul
                        </p>

                        @if($isMine)
                            <span class="inline-flex items-center gap-1 mt-2
                                         bg-yellow-400 text-slate-900
                                         text-xs font-bold px-3 py-1 rounded-full">
                                <i data-lucide="check-circle" class="w-3 h-3"></i>
                                Jurusan Anda
                            </span>
                        @endif
                    </div>

                </div>
            @endforeach

        </div>
    </section>

    <!-- ================= KURSUS SAYA (SLIDER HORIZONTAL) ================= -->
    <section class="space-y-6" x-data="{
        index: 0,
        cardWidth: 280,
        gap: 16,
        total: {{ $myModules->count() }},
        visible: 3,
        get maxIndex() { return Math.max(this.total - this.visible, 0); },
        prev() { this.index = Math.max(this.index - 1, 0); },
        next() { this.index = Math.min(this.index + 1, this.maxIndex); },
        get offset() { return this.index * (this.cardWidth + this.gap); }
    }" x-init="
        visible = window.innerWidth < 640 ? 1 : window.innerWidth < 1024 ? 2 : 3;
        window.addEventListener('resize', () => {
            visible = window.innerWidth < 640 ? 1 : window.innerWidth < 1024 ? 2 : 3;
            index = Math.min(index, maxIndex);
        });
    ">

        <div class="flex justify-between items-center">
            <h2 class="text-xl font-bold text-slate-800 flex items-center gap-2">
                <i data-lucide="book-open" class="w-6 h-6"></i>
                Mata Pelajaran Saya
            </h2>

            <a href="{{ route('siswa.kursus') }}"
               class="inline-flex items-center gap-2
                      px-4 py-2 rounded-full
                      bg-blue-50 text-blue-700
                      hover:bg-blue-100
                      font-semibold text-sm transition">
                Lihat semua
                <i data-lucide="arrow-right" class="w-4 h-4"></i>
            </a>
        </div>

        <!-- SLIDER WRAPPER -->
        <div class="relative">

            <!-- TOMBOL KIRI -->
            <button
                @click="prev()"
                x-show="index > 0"
                class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 z-10
                       bg-white border border-slate-200 rounded-full p-2.5 shadow-md
                       hover:bg-slate-50 hover:shadow-lg transition-all duration-200">
                <i data-lucide="chevron-left" class="w-5 h-5 text-slate-700"></i>
            </button>

            <!-- OVERFLOW CONTAINER -->
            <div class="overflow-hidden rounded-xl px-1 py-2">

                <!-- TRACK -->
                <div class="flex transition-transform duration-300 ease-in-out"
                     :style="`transform: translateX(-${offset}px); gap: ${gap}px;`">

                    @foreach($myModules as $module)

                        @php
                            $progressPct      = $module->progress_weighted ?? 0;
                            $totalLessons     = $module->lessons->count();
                            $completedLessons = round(($progressPct / 100) * $totalLessons);

                            if ($progressPct >= 70) {
                                $barColor = 'from-green-500 to-emerald-400';
                                $glowColor = 'shadow-green-400/60';
                            } elseif ($progressPct >= 35) {
                                $barColor = 'from-yellow-500 to-amber-400';
                                $glowColor = 'shadow-yellow-400/60';
                            } else {
                                $barColor = 'from-red-600 to-rose-400';
                                $glowColor = 'shadow-red-400/60';
                            }

                            $ctaLabel = $progressPct > 0 && $progressPct < 100
                                ? 'Lanjutkan'
                                : ($progressPct === 100 ? 'Lihat Kembali' : 'Masuk Kursus');

                            $firstLessonUrl = $module->lessons->count()
                                ? route('siswa.modul.show', $module->lessons->first()->id)
                                : '';
                        @endphp

                        <!-- CARD -->
                        <div class="flex-none w-[280px]
                                    bg-white border border-slate-200 rounded-2xl overflow-hidden
                                    cursor-pointer shadow-sm
                                    hover:shadow-xl hover:-translate-y-1
                                    transition-all duration-300 module-card"
                             data-title="{{ $module->module->title }}"
                             data-thumbnail="{{ $module->module->thumbnail
                                 ? (str_starts_with($module->module->thumbnail,'http')
                                     ? $module->module->thumbnail
                                     : asset('storage/'.$module->module->thumbnail))
                                 : 'https://via.placeholder.com/600x300?text=Kursus' }}"
                             data-teacher="{{ $module->teacher->name ?? '-' }}"
                             data-url="{{ $firstLessonUrl }}"
                             data-schedules='@json($module->schedules)'>

                            <!-- THUMBNAIL — klik buka modal dengan tombol aksi -->
                            <div class="h-36 bg-slate-100 overflow-hidden relative module-thumbnail-trigger">
                                <img src="{{ $module->module->thumbnail
                                        ? (str_starts_with($module->module->thumbnail, 'http')
                                            ? $module->module->thumbnail
                                            : asset('storage/' . $module->module->thumbnail))
                                        : 'https://via.placeholder.com/600x300?text=Kursus' }}"
                                     class="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
                                     alt="{{ $module->module->title }}">

                                @if($totalLessons > 0)
                                <div class="absolute top-2 right-2
                                            bg-black/60 backdrop-blur-sm
                                            text-white text-[11px] font-bold
                                            px-2 py-0.5 rounded-full">
                                    {{ $progressPct }}%
                                </div>
                                @endif
                            </div>

                            <!-- KONTEN -->
                            <div class="p-4 space-y-3">

                                <h3 class="font-semibold text-slate-800 leading-tight line-clamp-2 text-sm">
                                    {{ $module->module->title }}
                                </h3>

                                @if(!empty($module->module->description))
                                    <p class="text-xs text-slate-500 line-clamp-2">
                                        <!--{{ $module->module->description }}-->
                                    </p>
                                @endif

                                {{-- ===== HEALTH BAR PROGRESS ===== --}}
                                @if($totalLessons > 0)
                                    <div class="mt-3">
                                        <div class="flex items-center justify-between mb-2">
                                            <div class="flex items-center gap-1.5">
                                                <div class="w-5 h-5 rounded-md
                                                            {{ $progressPct >= 70 ? 'bg-green-100' : ($progressPct >= 35 ? 'bg-amber-100' : 'bg-red-100') }}
                                                            flex items-center justify-center">
                                                    <i data-lucide="target" class="w-3.5 h-3.5
                                                        {{ $progressPct >= 70 ? 'text-green-600' : ($progressPct >= 35 ? 'text-amber-600' : 'text-red-500') }}"></i>
                                                </div>
                                                <span class="text-xs font-medium text-slate-600">Progress</span>
                                            </div>
                                            <div class="flex items-center gap-1 px-2 py-0.5 rounded-full
                                                        {{ $progressPct >= 70 ? 'bg-green-50' : ($progressPct >= 35 ? 'bg-amber-50' : 'bg-red-50') }}">
                                                <i data-lucide="zap" class="w-3 h-3
                                                    {{ $progressPct >= 70 ? 'text-green-600' : ($progressPct >= 35 ? 'text-amber-600' : 'text-red-500') }}"></i>
                                                <span class="text-xs font-bold {{ $progressPct >= 70 ? 'text-green-600' : ($progressPct >= 35 ? 'text-amber-600' : 'text-red-500') }}">
                                                    {{ $progressPct }}%
                                                </span>
                                            </div>
                                        </div>
                                        <div class="relative h-2.5 bg-slate-100 rounded-full overflow-hidden
                                                    border border-slate-200 shadow-inner">
                                            <div class="absolute inset-0 opacity-20 rounded-full"
                                                 style="background: {{ $progressPct >= 70 ? '#22c55e' : ($progressPct >= 35 ? '#eab308' : '#ef4444') }};"></div>
                                            <div class="absolute inset-0 opacity-10 rounded-full"
                                                 style="background: #94a3b8;"></div>
                                            <div class="absolute inset-y-0 left-0 h-full rounded-full transition-all duration-700 ease-out"
                                                 style="width: {{ $progressPct }}%;
                                                        background: {{ $progressPct >= 70
                                                            ? 'linear-gradient(to right, #22c55e, #34d399)'
                                                            : ($progressPct >= 35
                                                                ? 'linear-gradient(to right, #eab308, #f59e0b)'
                                                                : 'linear-gradient(to right, #ef4444, #fb7185)') }};"></div>
                                            @if($progressPct > 0 && $progressPct < 100)
                                                <div class="absolute top-1/2 -translate-y-1/2 -translate-x-1/2
                                                            w-4 h-4 rounded-full bg-white border-2
                                                            {{ $progressPct >= 70 ? 'border-green-500' : ($progressPct >= 35 ? 'border-yellow-500' : 'border-red-500') }}
                                                            shadow-lg flex items-center justify-center z-10"
                                                     style="left: {{ $progressPct }}%;">
                                                    <i data-lucide="chevron-right" class="w-2.5 h-2.5
                                                        {{ $progressPct >= 70 ? 'text-green-500' : ($progressPct >= 35 ? 'text-yellow-500' : 'text-red-500') }}"></i>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                                {{-- ===== END HEALTH BAR ===== --}}

                                {{-- CTA — klik langsung redirect, TIDAK buka modal --}}
                                @if($module->lessons->count())
                                    <a href="{{ $firstLessonUrl }}"
                                       class="module-cta-btn inline-flex items-center gap-1.5 px-3 py-1.5
                                              text-xs font-semibold text-blue-600
                                              border border-blue-200 rounded-md
                                              hover:bg-blue-50 hover:border-blue-300 hover:text-blue-700
                                              transition-all duration-200">
                                        {{ $ctaLabel }}
                                    </a>
                                @else
                                    <span class="inline-flex items-center gap-1 text-xs text-slate-400">
                                        <i data-lucide="hourglass" class="w-3.5 h-3.5"></i>
                                        Materi belum tersedia
                                    </span>
                                @endif

                            </div>
                        </div>

                    @endforeach

                </div>
            </div>

            <!-- TOMBOL KANAN -->
            <button
                @click="next()"
                x-show="index < maxIndex"
                class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 z-10
                       bg-white border border-slate-200 rounded-full p-2.5 shadow-md
                       hover:bg-slate-50 hover:shadow-lg transition-all duration-200">
                <i data-lucide="chevron-right" class="w-5 h-5 text-slate-700"></i>
            </button>

        </div>

        {{-- DOT INDICATOR --}}
        @if($myModules->count() > 1)
        <div class="flex justify-center gap-1.5 pt-2">
            @foreach($myModules as $i => $module)
                <button @click="index = {{ $i }}"
                        class="rounded-full transition-all duration-300"
                        :class="index === {{ $i }}
                            ? 'w-5 h-2 bg-slate-800'
                            : 'w-2 h-2 bg-slate-300 hover:bg-slate-400'">
                </button>
            @endforeach
        </div>
        @endif

    </section>

</div>

{{-- ================= MODAL MODULE ================= --}}
<div id="moduleModal"
     class="fixed inset-0 z-[9999] hidden items-center justify-center
            bg-black/60 backdrop-blur-sm p-4">

    <div class="bg-white rounded-2xl max-w-2xl w-full overflow-hidden shadow-2xl">

        <div class="flex flex-col md:flex-row">

            {{-- KIRI THUMBNAIL --}}
            <div class="md:w-1/3 h-40 md:h-auto">
                <img id="modalThumbnail"
                     class="w-full h-full object-cover">
            </div>

            {{-- KANAN INFO --}}
            <div class="flex-1 p-6 space-y-3">

                <h3 id="modalTitle"
                    class="text-xl font-bold text-slate-800"></h3>

                <p class="text-sm text-slate-500 flex items-center gap-2">
                    <i data-lucide="user" class="w-4 h-4"></i>
                    <span id="modalTeacher"></span>
                </p>

                {{-- JADWAL --}}
                <div>
                    <p class="text-sm font-semibold mb-1 text-slate-700">
                        Jadwal:
                    </p>
                    <div id="modalSchedules"
                         class="text-sm text-slate-600 space-y-1"></div>
                </div>

                {{-- BUTTON --}}
                <div class="pt-4 flex gap-3">
                    <button id="closeModal"
                        class="px-4 py-2 rounded-lg border text-slate-600 hover:bg-slate-50">
                        Tutup
                    </button>

                    {{-- Tombol Masuk Materi — hanya tampil saat dibuka via thumbnail --}}
                    <a id="enterModuleBtn"
                       class="px-4 py-2 rounded-lg
                              bg-blue-600 text-white font-semibold
                              hover:bg-blue-700 hidden">
                        Masuk Materi
                    </a>
                </div>

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

<style>
.health-shine {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.35) 40%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0.35) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: healthShine 1.8s ease-in-out infinite;
}

.health-bar-fill {
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.health-bar-fill:not([data-progress="100"]) {
    animation: barPulse 1.6s ease-in-out infinite;
}

@keyframes healthShine {
    0% { transform: translateX(-100%); }
    20%, 100% { transform: translateX(100%); }
}

@keyframes barPulse {
    0%,100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

.segment-bar { transition: background-color 0.3s; }
.health-bar-container:hover .segment-bar { background-color: rgba(255,255,255,0.03); }
.percent-value { display: inline-block; }
</style>

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll('.percent-value').forEach(counter => {
        const target = parseInt(counter.getAttribute('data-target'));
        let current = 0;
        const increment = target / 30;
        const updateCounter = () => {
            if (current < target) {
                current = Math.min(current + increment, target);
                counter.textContent = Math.round(current);
                requestAnimationFrame(updateCounter);
            } else {
                counter.textContent = target;
            }
        };
        setTimeout(updateCounter, 200);
    });
});

document.addEventListener('DOMContentLoaded', () => {

    const modal      = document.getElementById('moduleModal');
    const title      = document.getElementById('modalTitle');
    const thumb      = document.getElementById('modalThumbnail');
    const teacher    = document.getElementById('modalTeacher');
    const schedulesBox = document.getElementById('modalSchedules');
    const enterBtn   = document.getElementById('enterModuleBtn');
    const closeBtn   = document.getElementById('closeModal');

    // ── Helper: isi & buka modal ──
    function openModal(card, showActionBtn) {
        title.textContent   = card.dataset.title;
        thumb.src           = card.dataset.thumbnail;
        teacher.textContent = card.dataset.teacher;

        schedulesBox.innerHTML = '';
        try {
            const schedules = JSON.parse(card.dataset.schedules || '[]');
            if (schedules.length) {
                schedules.forEach(s => {
                    schedulesBox.innerHTML += `
                        <div class="flex items-center gap-2">
                            <i data-lucide="calendar" class="w-4 h-4"></i>
                            ${s.hari} ${s.jam_masuk} - ${s.jam_selesai}
                        </div>`;
                });
            } else {
                schedulesBox.innerHTML = '<p class="text-slate-400">Tidak ada jadwal</p>';
            }
        } catch(e) {
            schedulesBox.innerHTML = '<p class="text-slate-400">Tidak ada jadwal</p>';
        }

        // ── Tombol "Masuk Materi" hanya muncul kalau dibuka via thumbnail ──
        if (showActionBtn && card.dataset.url) {
            enterBtn.href = card.dataset.url;
            enterBtn.classList.remove('hidden');
        } else {
            enterBtn.classList.add('hidden');
        }

        modal.classList.remove('hidden');
        modal.classList.add('flex');
        lucide.createIcons();
    }

    // ── Klik THUMBNAIL → buka modal WITH tombol Masuk Materi ──
    document.querySelectorAll('.module-thumbnail-trigger').forEach(thumb => {
        thumb.addEventListener('click', (e) => {
            e.stopPropagation();
            const card = thumb.closest('.module-card');
            openModal(card, true);
        });
    });

    // ── Klik tombol CTA (Lanjutkan/Masuk Kursus) → langsung redirect ──
    document.querySelectorAll('.module-cta-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.stopPropagation(); // jangan bubble ke card/thumbnail
        });
    });

    // ── Klik area card selain thumbnail & CTA → buka modal WITH tombol ──
    document.querySelectorAll('.module-card').forEach(card => {
        card.addEventListener('click', (e) => {
            // Kalau yang diklik adalah CTA button atau thumbnail (sudah handle sendiri), skip
            if (e.target.closest('.module-cta-btn') || e.target.closest('.module-thumbnail-trigger')) return;
            openModal(card, true);
        });
    });

    closeBtn.addEventListener('click', () => {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    });

    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
    });
});

document.addEventListener('DOMContentLoaded', () => {
    lucide.createIcons();

    const el = document.getElementById('datetime');
    if(el) {
        const update = () => {
            el.innerHTML = `
                <i data-lucide="clock" class="w-4 h-4"></i>
                ${new Date().toLocaleString('id-ID', {
                    weekday:'long', year:'numeric', month:'long', day:'numeric',
                    hour:'2-digit', minute:'2-digit', second:'2-digit'
                })}
            `;
            lucide.createIcons();
        };
        update();
        setInterval(update, 1000);
    }
});
</script>

@endsection