@extends('layouts.dashboard')

@section('title', 'Kelas & Materi LMS')
@section('eyebrow', __('lms.college'))

@section('content')
@php
    $courseImages = [
        'pemula' => 'https://images.unsplash.com/photo-1600965962361-9035dbfd1c50?auto=format&fit=crop&w=900&q=85',
        'anak' => 'https://images.unsplash.com/photo-1530549387789-4c1017266635?auto=format&fit=crop&w=900&q=85',
        'dewasa' => 'https://images.unsplash.com/photo-1519315901367-f34ff9154487?auto=format&fit=crop&w=900&q=85',
        'privat' => 'https://images.unsplash.com/photo-1575429198097-0414ec08e8cd?auto=format&fit=crop&w=900&q=85',
        'atlet' => 'https://images.unsplash.com/photo-1530549387789-4c1017266635?auto=format&fit=crop&w=900&q=85',
    ];
@endphp

<div class="space-y-5">
    <section class="rounded-lg border border-cyan-100 bg-white p-5 shadow-sm">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
            <div>
                <p class="text-sm font-black uppercase text-cyan-700">Ruang belajar</p>
                <h2 class="mt-1 text-2xl font-black text-cyan-950">Kelas Aktif</h2>
                <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-600">
                    Kelas, materi, progress, dan tugas disatukan dalam satu alur. Pilih kelas untuk membuka modul dan mengirim tugas terkait.
                </p>
            </div>
            <div class="flex flex-wrap gap-2 text-sm font-black">
                <span class="rounded-full bg-cyan-50 px-3 py-1.5 text-cyan-700">{{ $classes->count() }} kelas aktif</span>
                <span class="rounded-full bg-emerald-50 px-3 py-1.5 text-emerald-700">{{ $classes->sum('materials_count') }} materi</span>
                <span class="rounded-full bg-amber-50 px-3 py-1.5 text-orange-700">{{ $classes->sum('assignments_count') }} tugas</span>
            </div>
        </div>
    </section>

    <section class="grid gap-5">
        @forelse($classes as $class)
            @php
                $keyName = strtolower($class->level?->name.' '.$class->class_name);
                $image = collect($courseImages)->first(fn ($url, $key) => str_contains($keyName, $key)) ?? 'https://images.unsplash.com/photo-1576013551627-0cc20b96c2a7?auto=format&fit=crop&w=900&q=85';
                $progress = (int) round($class->materials->avg(fn ($material) => $material->progresses->first()?->progress_percent ?? 0) ?? 0);
                $nextMaterial = $class->materials->sortBy(fn ($material) => $material->progresses->first()?->progress_percent ?? 0)->first();
            @endphp

            <article class="overflow-hidden rounded-lg border border-cyan-100 bg-white shadow-sm">
                <div class="grid lg:grid-cols-[320px_1fr]">
                    <a href="{{ route('user.lms.classes.show', $class) }}" class="relative block min-h-56 bg-cyan-700">
                        <img src="{{ $image }}" alt="{{ $class->class_name }}" class="h-full min-h-56 w-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-cyan-950/60 to-transparent"></div>
                        <div class="absolute bottom-4 left-4 right-4 text-white">
                            <span class="rounded-md bg-white/20 px-2.5 py-1 text-xs font-black backdrop-blur">Level {{ $class->level?->name }}</span>
                            <h3 class="mt-3 text-xl font-black leading-tight">{{ $class->class_name }}</h3>
                        </div>
                    </a>

                    <div class="grid gap-5 p-5 xl:grid-cols-[1fr_280px]">
                        <div>
                            <div class="flex flex-wrap items-center gap-3 text-sm font-semibold text-slate-600">
                                <span class="inline-flex items-center gap-1.5">
                                    <i data-lucide="book-open-check" class="h-4 w-4 text-cyan-700"></i>
                                    {{ $class->materials_count }} materi
                                </span>
                                <span class="inline-flex items-center gap-1.5">
                                    <i data-lucide="clipboard-check" class="h-4 w-4 text-orange-500"></i>
                                    {{ $class->assignments_count }} tugas
                                </span>
                                <span class="inline-flex items-center gap-1.5">
                                    <i data-lucide="calendar-clock" class="h-4 w-4 text-emerald-600"></i>
                                    {{ $class->sessions_count }} sesi
                                </span>
                            </div>

                            <p class="mt-3 text-sm leading-6 text-slate-600">{{ $class->description ?: 'Materi dan latihan untuk kelas ini tersedia di ruang belajar.' }}</p>

                            <div class="mt-4">
                                <div class="flex items-center justify-between gap-3 text-xs font-black text-slate-600">
                                    <span>Progress belajar</span>
                                    <span>{{ $progress }}%</span>
                                </div>
                                <div class="mt-2 h-2.5 overflow-hidden rounded-full bg-cyan-50">
                                    <div class="h-full rounded-full bg-gradient-to-r from-cyan-500 to-emerald-400" style="width: {{ $progress }}%"></div>
                                </div>
                            </div>

                            <div class="mt-5 flex flex-wrap gap-2">
                                <a href="{{ route('user.lms.classes.show', $class) }}" class="inline-flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2.5 text-sm font-black text-white hover:bg-orange-400 hover:text-cyan-950">
                                    <i data-lucide="door-open" class="h-4 w-4"></i>
                                    Masuk Kelas
                                </a>
                                @if($nextMaterial)
                                    <a href="{{ route('user.lms.materials.show', $nextMaterial) }}" class="inline-flex items-center gap-2 rounded-lg border border-cyan-200 bg-white px-4 py-2.5 text-sm font-black text-cyan-800 hover:border-orange-300 hover:text-orange-600">
                                        <i data-lucide="play-circle" class="h-4 w-4"></i>
                                        {{ ($nextMaterial->progresses->first()?->progress_percent ?? 0) > 0 ? __('lms.continue_learning') : __('lms.start_learning') }}
                                    </a>
                                @endif
                            </div>
                        </div>

                        <aside class="rounded-lg border border-cyan-100 bg-cyan-50/70 p-4">
                            <p class="font-black text-cyan-950">Materi kelas</p>
                            <div class="mt-3 grid gap-2">
                                @forelse($class->materials->take(4) as $material)
                                    @php
                                        $percent = (int) ($material->progresses->first()?->progress_percent ?? 0);
                                    @endphp
                                    <a href="{{ route('user.lms.materials.show', $material) }}" class="rounded-lg bg-white p-3 text-sm hover:ring-1 hover:ring-cyan-200">
                                        <div class="flex items-start justify-between gap-2">
                                            <p class="font-black text-cyan-950">{{ $material->title }}</p>
                                            <span class="shrink-0 rounded-full bg-cyan-50 px-2 py-0.5 text-xs font-black text-cyan-700">{{ $percent }}%</span>
                                        </div>
                                        <p class="mt-1 line-clamp-2 text-xs leading-5 text-slate-500">{{ $material->description }}</p>
                                    </a>
                                @empty
                                    <p class="rounded-lg bg-white p-3 text-sm text-slate-500">Materi belum tersedia.</p>
                                @endforelse
                            </div>
                        </aside>
                    </div>
                </div>
            </article>
        @empty
            <div class="rounded-lg border border-dashed border-cyan-200 bg-white p-8 text-center">
                <p class="text-lg font-black text-cyan-950">Belum masuk kelas aktif.</p>
                <p class="mt-1 text-sm text-slate-500">Daftar sekolah renang atau tunggu admin memasukkan pendaftaran yang sudah dibayar ke kelas.</p>
                <a href="{{ route('user.school-registration.index') }}" class="mt-4 inline-flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-black text-white hover:bg-orange-400 hover:text-cyan-950">
                    <i data-lucide="waves" class="h-4 w-4"></i>
                    Daftar Sekolah Renang
                </a>
            </div>
        @endforelse
    </section>
</div>
@endsection