@extends('siswa.layout')

@section('content')

<div class="space-y-16">

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

        <div class="absolute -top-20 -right-20 w-64 h-64 bg-yellow-400/10 rounded-full"></div>
        <div class="absolute -bottom-24 -left-24 w-72 h-72 bg-white/5 rounded-full"></div>

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

            <!-- PROFIL -->
            <div class="flex items-center gap-6">

                <!-- FOTO SISWA -->
                <div class="relative">
    <img
        src="{{
            $student->photo
                ? (
                    str_starts_with($student->photo, 'http')
                        ? $student->photo
                        : asset('uploads/' . $student->photo)
                  )
                : 'https://ui-avatars.com/api/?name=' . urlencode($student->name) . '&background=0f172a&color=fff'
        }}"
        class="w-24 h-24 rounded-full object-cover
               border-4 border-yellow-400 shadow-md"
        alt="Foto {{ $student->name }}"
    >
</div>


                <!-- IDENTITAS -->
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold">
                        {{ $student->name }}
                    </h1>

                    <div class="mt-2 space-y-1 text-sm text-slate-300">
                        <p class="flex items-center gap-2">
                            <i data-lucide="id-card" class="w-4 h-4"></i>
                            NISN: {{ $student->nisn }}
                        </p>
                        <p class="flex items-center gap-2">
                            <i data-lucide="users" class="w-4 h-4"></i>
                            Kelas: {{ $student->studentClass->name ?? '-' }}
                        </p>
                        <p class="flex items-center gap-2">
                            <i data-lucide="briefcase" class="w-4 h-4"></i>
                            Jurusan: {{ $student->department->name ?? '-' }}
                        </p>
                        <a href="{{ route('siswa.password.edit') }}"
   class="inline-flex items-center gap-2 text-blue-600 hover:underline">
    <i data-lucide="key" class="w-4 h-4"></i>
    Ubah Password
</a>

                    </div>
                </div>
            </div> --}}
            
<!-- ================= HERO DASHBOARD ================= -->
<div
    x-data="heroDashboard('{{ $student->name }}')"
    x-init="init()"
    class="relative overflow-hidden rounded-3xl p-8 md:p-12 text-white
           border border-slate-700
           bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900
           animate-gradient"
>

    <!-- PARTICLES -->
    <template x-for="i in 6" :key="i">
        <span
            class="absolute rounded-full bg-white/10 blur-xl animate-float"
            :style="randomStyle()"
        ></span>
    </template>

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

        <!-- LEFT CONTENT -->
        <div class="space-y-4 max-w-xl">

            <p
                x-show="show"
                x-transition.opacity.duration.700ms
                class="text-xs uppercase tracking-widest text-slate-400"
            >
                Dashboard Siswa
            </p>

            <h1
                x-show="show"
                x-transition:enter="transition ease-out duration-700 delay-100"
                x-transition:enter-start="opacity-0 translate-y-4"
                x-transition:enter-end="opacity-100 translate-y-0"
                class="text-3xl md:text-4xl font-bold leading-tight"
            >
                Selamat datang,
                <span class="text-yellow-400" x-text="name"></span>
            </h1>

            <p
                x-show="show"
                x-transition:enter="transition ease-out duration-700 delay-200"
                x-transition:enter-start="opacity-0 translate-y-4"
                x-transition:enter-end="opacity-100 translate-y-0"
                class="text-slate-300 text-sm md:text-base italic max-w-md"
            >
                “<span x-text="quote"></span>”
            </p>

        </div>

        <!-- RIGHT -->
        <div
            x-show="show"
            x-transition:enter="transition ease-out duration-700 delay-300"
            x-transition:enter-start="opacity-0 translate-y-4"
            x-transition:enter-end="opacity-100 translate-y-0"
            class="text-left md:text-right"
        >
            <p id="datetime"
               class="font-semibold text-yellow-400 flex items-center gap-2 md:justify-end">
                <i data-lucide="clock" class="w-4 h-4"></i>
            </p>
        </div>

    </div>
</div>



          

    <!-- ================= AGENDA MENDATANG ================= -->
<section class="space-y-6">

    <h2 class="text-xl font-bold text-slate-800 flex items-center gap-2">
        <i data-lucide="calendar-clock" class="w-6 h-6"></i>
        Agenda Mendatang
    </h2>

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

        <!-- ================= QUIZ MENDATANG ================= -->
        <div class="bg-white border rounded-2xl p-6 space-y-4">

            <h3 class="font-semibold text-slate-700 flex items-center gap-2">
                <i data-lucide="clipboard-list" class="w-5 h-5 text-yellow-600"></i>
                Quiz Akan Datang
            </h3>

            @forelse($upcomingQuizzes as $quiz)
                <a href="{{ route('siswa.quiz.intro', $quiz->id) }}"
                   class="block p-4 rounded-xl border hover:shadow
                          transition bg-yellow-50 hover:bg-yellow-100">

                    <p class="font-semibold text-slate-800">
                        {{ $quiz->title }}
                    </p>

                    @if($quiz->deadline)
    {{ \Carbon\Carbon::parse($quiz->deadline)->translatedFormat('d F Y H:i') }}
@else
    Tanpa batas waktu
@endif


                </a>
            @empty
                <div class="text-sm text-slate-400 flex items-center gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4"></i>
                    Tidak ada quiz mendatang
                </div>
            @endforelse

        </div>

        <!-- ================= TUGAS MENDATANG ================= -->
        <div class="bg-white border rounded-2xl p-6 space-y-4">

            <h3 class="font-semibold text-slate-700 flex items-center gap-2">
                <i data-lucide="upload-cloud" class="w-5 h-5 text-blue-600"></i>
                Tugas Akan Datang
            </h3>

            @forelse($upcomingTasks as $task)
                <a href="{{ route('siswa.task.show', $task->id) }}"
                   class="block p-4 rounded-xl border hover:shadow
                          transition bg-blue-50 hover:bg-blue-100">

                    <p class="font-semibold text-slate-800">
                        {{ $task->title }}
                    </p>

                    @if($task->deadline)
    {{ \Carbon\Carbon::parse($task->deadline)->translatedFormat('d F Y H:i') }}
@else
    Tanpa batas waktu
@endif


                </a>
            @empty
                <div class="text-sm text-slate-400 flex items-center gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4"></i>
                    Tidak ada tugas mendatang
                </div>
            @endforelse

        </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 (RINGKAS) ================= -->
<section class="space-y-6" x-data="{ index: 0 }">

    <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>
            Kursus Saya
        </h2>

        <!-- Lihat Semua (DIPERCANTIK) -->
        <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>

    <div class="relative">

        <!-- TOMBOL KIRI -->
        <button
            @click="index = Math.max(index - 1, 0)"
            class="absolute left-0 top-1/2 -translate-y-1/2 z-10
                   bg-white border rounded-full p-2 shadow
                   hover:bg-slate-100"
        >
            <i data-lucide="chevron-left" class="w-5 h-5"></i>
        </button>

        <!-- SLIDER -->
        <div class="overflow-hidden">
            <div class="flex transition-transform duration-300"
                 :style="`transform: translateX(-${index * 300}px)`">

                @foreach($myModules as $module)
                    <div class="w-[280px] shrink-0 mr-6
                                bg-white border rounded-2xl overflow-hidden">

                        <div class="h-32 bg-slate-200">
                            <img
    src="{{ $module->thumbnail
        ? (
            str_starts_with($module->thumbnail, 'http')
                ? $module->thumbnail
                : asset('storage/' . $module->thumbnail)
          )
        : 'https://via.placeholder.com/600x300?text=Kursus' }}"
    class="w-full h-full object-cover">

                        </div>

                        <div class="p-4 space-y-2">
                            <h3 class="font-semibold text-slate-800">
                                {{ $module->title }}
                            </h3>

                            @if($module->lessons && $module->lessons->count())
                                <a href="{{ route('siswa.modul.show', $module->lessons->first()->id) }}"
                                   class="inline-flex items-center gap-1
                                          text-sm text-blue-600 hover:underline">
                                    <i data-lucide="play-circle" class="w-4 h-4"></i>
                                    Masuk Kursus
                                </a>
                            @else
                                <span class="inline-flex items-center gap-1
                                             text-sm text-slate-400">
                                    <i data-lucide="hourglass" class="w-4 h-4"></i>
                                    Materi belum tersedia
                                </span>
                            @endif
                        </div>

                    </div>
                @endforeach

            </div>
        </div>

        <!-- TOMBOL KANAN -->
        <button
            @click="index = Math.min(index + 1, {{ max($myModules->count() - 1, 0) }})"
            class="absolute right-0 top-1/2 -translate-y-1/2 z-10
                   bg-white border rounded-full p-2 shadow
                   hover:bg-slate-100"
        >
            <i data-lucide="chevron-right" class="w-5 h-5"></i>
        </button>

    </div>

</section>





<script>
document.addEventListener('DOMContentLoaded', () => {
    lucide.createIcons();
});
</script>


<script>
document.addEventListener('DOMContentLoaded', () => {
    const el = document.getElementById('datetime');
    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>
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('heroDashboard', (username) => ({
        name: username,
        show: false,
        quote: '',
        quotes: [
            'Belajar hari ini adalah investasi masa depan.',
            'Disiplin kecil setiap hari membawa hasil besar.',
            'Kesuksesan lahir dari konsistensi.',
            'Jangan menunggu motivasi, bangun disiplin.',
            'Ilmu adalah kekuatan sejati.',
            'Setiap hari adalah kesempatan baru untuk berkembang.'
        ],

        init() {
            this.quote = this.quotes[Math.floor(Math.random() * this.quotes.length)];
            setTimeout(() => this.show = true, 150);
        },

        randomStyle() {
            const size = Math.floor(Math.random() * 120) + 60;
            return `
                width:${size}px;
                height:${size}px;
                top:${Math.random() * 100}%;
                left:${Math.random() * 100}%;
                animation-duration:${Math.random() * 10 + 10}s;
            `;
        }
    }))
});
</script>
<style>
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-gradient {
    background-size: 300% 300%;
    animation: gradientMove 15s ease infinite;
}

@keyframes float {
    0%   { transform: translateY(0) translateX(0); opacity: .4; }
    50%  { transform: translateY(-40px) translateX(20px); opacity: .7; }
    100% { transform: translateY(0) translateX(0); opacity: .4; }
}

.animate-float {
    animation: float linear infinite;
}
</style>



@endsection