@extends('layouts.dashboard')

@section('title', $class->class_name)
@section('eyebrow', __('lms.learning_session'))

@section('content')
@php
    $totalModules = $class->materials->count();
    $totalAssignments = $class->assignments->count();
    $hours = max(1, (int) ceil(max(1, $totalModules * 30) / 60));
    $materialProgress = fn ($material) => (int) ($material->progresses->first()?->progress_percent ?? 0);
@endphp

<div class="space-y-5">
    <section class="overflow-hidden rounded-lg border border-cyan-100 bg-white shadow-sm">
        <div class="grid lg:grid-cols-[1fr_360px]">
            <div class="bg-gradient-to-br from-cyan-600 via-sky-500 to-emerald-500 p-6 text-white lg:p-8">
                <div class="flex flex-wrap items-center gap-2 text-sm font-bold text-cyan-50">
                    <a href="{{ route('user.lms.classes') }}" class="hover:text-amber-100">Kelas & Materi</a>
                    <i data-lucide="chevron-right" class="h-4 w-4"></i>
                    <span>{{ $class->class_name }}</span>
                </div>
                <h1 class="mt-8 text-3xl font-black leading-tight sm:text-4xl">{{ $class->class_name }}</h1>
                <p class="mt-4 max-w-3xl text-sm font-semibold leading-7 text-cyan-50">{{ $class->description ?: 'Ruang belajar kelas berisi materi, tugas, dan progress latihan.' }}</p>
                <div class="mt-6 grid gap-3 text-sm font-black sm:grid-cols-4">
                    <span class="rounded-lg bg-white/20 p-3">{{ $class->students->count() }} siswa</span>
                    <span class="rounded-lg bg-white/20 p-3">{{ $totalModules }} materi</span>
                    <span class="rounded-lg bg-white/20 p-3">{{ $totalAssignments }} tugas</span>
                    <span class="rounded-lg bg-white/20 p-3">{{ $hours }} jam</span>
                </div>
            </div>

            <aside class="p-5">
                <div class="overflow-hidden rounded-lg border border-cyan-100 bg-cyan-50">
                    @if($embedUrl)
                        <iframe class="aspect-video w-full" src="{{ $embedUrl }}" title="{{ $firstMaterial?->title ?? $class->class_name }}" allowfullscreen></iframe>
                    @else
                        <img src="{{ $heroImage }}" alt="{{ $class->class_name }}" class="aspect-video w-full object-cover">
                    @endif
                </div>
                <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>{{ $progressPercent }}%</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: {{ $progressPercent }}%"></div>
                    </div>
                    @if($firstMaterial)
                        <a href="{{ route('user.lms.materials.show', $firstMaterial) }}" class="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-lg bg-cyan-600 px-4 py-3 text-sm font-black text-white hover:bg-orange-400 hover:text-cyan-950">
                            <i data-lucide="play-circle" class="h-4 w-4"></i>
                            Masuk Kelas
                        </a>
                    @endif
                </div>
            </aside>
        </div>
    </section>

    <section class="grid gap-5 xl:grid-cols-[1fr_420px]">
        <div class="rounded-lg border border-cyan-100 bg-white p-5 shadow-sm">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <p class="text-sm font-black uppercase text-cyan-700">Materi kelas</p>
                    <h2 class="mt-1 text-xl font-black text-cyan-950">Belajar dari modul yang tersedia</h2>
                </div>
            </div>

            <div class="mt-5 grid gap-3">
                @if($class->materials->isEmpty())
                    <p class="rounded-lg border border-dashed border-cyan-200 bg-cyan-50 p-5 text-sm text-slate-500">Materi belum tersedia.</p>
                @else
                @foreach($class->materials as $material)
                    @php
                        $percent = $materialProgress($material);
                    @endphp
                    <article class="grid gap-4 rounded-lg border border-cyan-100 bg-cyan-50/60 p-4 md:grid-cols-[1fr_180px] md:items-center">
                        <div>
                            <div class="flex flex-wrap gap-2">
                                <span class="rounded-full bg-white px-2.5 py-1 text-xs font-black text-cyan-700">#{{ $material->order_number }}</span>
                                <span class="rounded-full bg-white px-2.5 py-1 text-xs font-black text-slate-600">{{ str($material->material_type)->replace('_', ' ')->title() }}</span>
                            </div>
                            <h3 class="mt-3 font-black text-cyan-950">{{ $material->title }}</h3>
                            <p class="mt-1 text-sm leading-6 text-slate-600">{{ $material->description }}</p>
                            <div class="mt-3 h-2 overflow-hidden rounded-full bg-white">
                                <div class="h-full rounded-full bg-cyan-600" style="width: {{ $percent }}%"></div>
                            </div>
                        </div>
                        <div class="flex flex-wrap justify-start gap-2 md:justify-end">
                            <a href="{{ route('user.lms.materials.show', $material) }}" class="inline-flex items-center gap-2 rounded-lg bg-cyan-600 px-3 py-2 text-sm font-black text-white hover:bg-orange-400 hover:text-cyan-950">
                                <i data-lucide="book-open-check" class="h-4 w-4"></i>
                                {{ $percent > 0 ? __('lms.continue_learning') : __('lms.start_learning') }}
                            </a>
                            @if($material->file_path)
                                <a href="{{ route('public-storage.show', $material->file_path) }}" target="_blank" class="inline-flex items-center gap-2 rounded-lg border border-cyan-200 bg-white px-3 py-2 text-sm font-black text-cyan-800 hover:text-orange-600">
                                    <i data-lucide="download" class="h-4 w-4"></i>
                                    File
                                </a>
                            @endif
                        </div>
                    </article>
                @endforeach
                @endif
            </div>
        </div>

        <aside class="rounded-lg border border-cyan-100 bg-white p-5 shadow-sm">
            <div>
                <p class="text-sm font-black uppercase text-orange-600">Tugas terkait</p>
                <h2 class="mt-1 text-xl font-black text-cyan-950">Kumpulkan tugas dari kelas ini</h2>
                <p class="mt-2 text-sm leading-6 text-slate-600">Tugas tidak lagi dipisah sebagai menu. Semua pengumpulan ada di ruang kelas ini.</p>
            </div>

            <div class="mt-5 grid gap-4">
                @if($class->assignments->isEmpty())
                    <p class="rounded-lg border border-dashed border-cyan-200 bg-cyan-50 p-5 text-sm text-slate-500">Belum ada tugas untuk kelas ini.</p>
                @else
                @foreach($class->assignments as $assignment)
                    @php
                        $submission = $assignment->submissions->first() ?? null;
                        $isOverdue = $assignment->due_at && now()->greaterThan($assignment->due_at);
                        $status = $submission?->status ?? ($isOverdue ? 'late' : 'belum_dikumpulkan');
                        $hasSubmission = $submission !== null;
                    @endphp
                    <article class="rounded-lg border border-cyan-100 bg-cyan-50/70 p-4">
                        <div class="flex flex-wrap items-start justify-between gap-2">
                            <div>
                                <span class="{{ $hasSubmission ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700' }} rounded-full px-2.5 py-1 text-xs font-black">{{ str($status)->replace('_', ' ')->title() }}</span>
                                <h3 class="mt-3 font-black text-cyan-950">{{ $assignment->title }}</h3>
                            </div>
                            <div class="rounded-lg bg-white px-3 py-2 text-center">
                                <p class="text-lg font-black text-cyan-950">{{ $submission?->score ?? '-' }}</p>
                                <p class="text-[11px] font-bold text-slate-500">/{{ $assignment->max_score }}</p>
                            </div>
                        </div>

                        @if($assignment->due_at)
                            <p class="mt-2 text-xs font-bold {{ $isOverdue ? 'text-rose-600' : 'text-cyan-700' }}">
                                Deadline {{ \App\Support\LocaleFormat::date($assignment->due_at, 'd M Y H:i') }}
                            </p>
                        @endif
                        <p class="mt-3 text-sm leading-6 text-slate-600">{{ $assignment->description }}</p>

                        @if($assignment->instructions)
                            <details class="mt-3 rounded-lg bg-white p-3 text-sm">
                                <summary class="cursor-pointer font-black text-cyan-950">Instruksi</summary>
                                <p class="mt-2 whitespace-pre-line leading-6 text-slate-600">{{ $assignment->instructions }}</p>
                            </details>
                        @endif

                        @if($submission?->feedback)
                            <div class="mt-3 rounded-lg bg-emerald-50 p-3">
                                <p class="text-sm font-black text-emerald-800">{{ __('lms.review_feedback') }}</p>
                                <p class="mt-1 text-sm leading-6 text-emerald-700">{{ $submission->feedback }}</p>
                            </div>
                        @endif

                        <form method="POST" action="{{ route('user.lms.assignments.submit', $assignment) }}" enctype="multipart/form-data" class="mt-4 grid gap-3">
                            @csrf
                            <textarea name="answer_text" rows="3" class="w-full rounded-lg border border-cyan-200 px-3 py-2 text-sm" placeholder="{{ __('lms.answer_placeholder') }}">{{ old('answer_text', $submission?->answer_text) }}</textarea>
                            <input name="submission_file" type="file" class="w-full rounded-lg border border-cyan-200 bg-white px-3 py-2 text-sm">
                            <div class="flex flex-wrap gap-2">
                                @if($assignment->attachment_path)
                                    <a href="{{ route('public-storage.show', $assignment->attachment_path) }}" target="_blank" class="inline-flex items-center gap-1 text-xs font-black text-cyan-700 hover:text-orange-600">
                                        <i data-lucide="paperclip" class="h-3.5 w-3.5"></i>
                                        Lampiran
                                    </a>
                                @endif
                                @if($submission?->file_path)
                                    <a href="{{ route('public-storage.show', $submission->file_path) }}" target="_blank" class="inline-flex items-center gap-1 text-xs font-black text-cyan-700 hover:text-orange-600">
                                        <i data-lucide="file-check-2" class="h-3.5 w-3.5"></i>
                                        File terkumpul
                                    </a>
                                @endif
                            </div>
                            <button class="inline-flex items-center justify-center gap-2 rounded-lg bg-orange-400 px-4 py-2.5 text-sm font-black text-cyan-950 hover:bg-amber-300">
                                <i data-lucide="upload-cloud" class="h-4 w-4"></i>
                                {{ $submission ? __('lms.resubmit') : __('lms.submit') }}
                            </button>
                        </form>
                    </article>
                @endforeach
                @endif
            </div>
        </aside>
    </section>
</div>
@endsection