@extends('layouts.dashboard')

@section('title', __('nav.my_classes'))
@section('eyebrow', __('lms.trainer_space'))

@section('content')
@php
    $totalMaterials = $classes->sum(fn ($class) => $class->materials->count());
    $totalOpenQuestions = $classes->sum(fn ($class) => $class->materials->sum('open_questions_count'));
    $avgProgress = round($classes->flatMap->materials->avg('progresses_avg_progress_percent') ?? 0);
@endphp

<div class="space-y-6">
    <section class="rounded-lg bg-slate-950 p-5 text-white shadow-sm">
        <div class="grid gap-5 lg:grid-cols-[1.2fr_.8fr] lg:items-end">
            <div>
                <div class="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs font-black uppercase text-sky-100">
                    <i data-lucide="school" class="h-4 w-4"></i>
                    {{ __('lms.class_learning_room') }}
                </div>
                <h2 class="mt-4 text-2xl font-black sm:text-3xl">{{ __('lms.class_learning_room_note') }}</h2>
            </div>
            <div class="grid grid-cols-3 gap-3">
                <div class="rounded-lg bg-white/10 p-4">
                    <p class="text-2xl font-black">{{ $totalMaterials }}</p>
                    <p class="mt-1 text-xs font-bold text-slate-300">{{ __('nav.materials') }}</p>
                </div>
                <div class="rounded-lg bg-white/10 p-4">
                    <p class="text-2xl font-black">{{ $avgProgress }}%</p>
                    <p class="mt-1 text-xs font-bold text-slate-300">{{ __('lms.avg_watch') }}</p>
                </div>
                <div class="rounded-lg bg-white/10 p-4">
                    <p class="text-2xl font-black">{{ $totalOpenQuestions }}</p>
                    <p class="mt-1 text-xs font-bold text-slate-300">{{ __('lms.open_questions') }}</p>
                </div>
            </div>
        </div>
    </section>

    <section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="mb-4 flex items-start gap-3">
            <span class="grid h-10 w-10 place-items-center rounded-lg bg-sky-100 text-sky-700">
                <i data-lucide="video" class="h-5 w-5"></i>
            </span>
            <div>
                <h3 class="font-black text-slate-950">{{ __('lms.add_learning_video') }}</h3>
                <p class="text-sm leading-6 text-slate-500">{{ __('lms.add_learning_video_note') }}</p>
            </div>
        </div>
        <form method="POST" action="{{ route('trainer.materials.store') }}" enctype="multipart/form-data" class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
            @csrf
            <select name="class_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
                <option value="">{{ __('lms.select_class') }}</option>
                @foreach($classes as $class)
                    <option value="{{ $class->id }}">{{ $class->class_name }}</option>
                @endforeach
            </select>
            <input name="title" placeholder="{{ __('lms.title_placeholder') }}" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
            <select name="material_type" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                @foreach(['video', 'text', 'pdf', 'image', 'file'] as $type)
                    <option value="{{ $type }}">{{ $type }}</option>
                @endforeach
            </select>
            <input name="order_number" type="number" value="1" min="1" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
            <input name="video_url" type="url" placeholder="https://youtube.com/..." class="rounded-lg border border-slate-300 px-3 py-2 text-sm md:col-span-2">
            <input name="file_path" type="file" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
            <select name="status" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="active">active</option>
                <option value="inactive">inactive</option>
            </select>
            <textarea name="description" rows="3" placeholder="{{ __('lms.short_description') }}" class="rounded-lg border border-slate-300 px-3 py-2 text-sm md:col-span-2 xl:col-span-4"></textarea>
            <button class="inline-flex items-center justify-center gap-2 rounded-lg bg-sky-700 px-4 py-2.5 text-sm font-black text-white hover:bg-slate-950 md:col-span-2 xl:col-span-4">
                <i data-lucide="save" class="h-4 w-4"></i>
                {{ __('app.actions.save') }}
            </button>
        </form>
    </section>

    <div class="grid gap-5">
        @forelse($classes as $class)
            @php
                $classAvg = round($class->materials->avg('progresses_avg_progress_percent') ?? 0);
                $openQuestions = $class->materials->sum('open_questions_count');
            @endphp
            <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                    <div>
                        <p class="text-xs font-black uppercase text-sky-700">{{ $class->level?->name }}</p>
                        <h3 class="mt-1 text-xl font-black text-slate-950">{{ $class->class_name }}</h3>
                        <p class="mt-2 text-sm leading-6 text-slate-600">{{ $class->description }}</p>
                    </div>
                    <div class="grid grid-cols-3 gap-2 text-center">
                        <div class="rounded-lg bg-slate-50 p-3">
                            <p class="text-lg font-black text-slate-950">{{ $class->students_count }}</p>
                            <p class="text-xs font-bold text-slate-500">{{ __('lms.students_learning') }}</p>
                        </div>
                        <div class="rounded-lg bg-slate-50 p-3">
                            <p class="text-lg font-black text-slate-950">{{ $classAvg }}%</p>
                            <p class="text-xs font-bold text-slate-500">{{ __('lms.avg_watch') }}</p>
                        </div>
                        <div class="rounded-lg bg-slate-50 p-3">
                            <p class="text-lg font-black text-slate-950">{{ $openQuestions }}</p>
                            <p class="text-xs font-bold text-slate-500">{{ __('lms.open_questions') }}</p>
                        </div>
                    </div>
                </div>

                <div class="mt-5 grid gap-4 lg:grid-cols-2">
                    @forelse($class->materials as $material)
                        @php($materialAvg = round($material->progresses_avg_progress_percent ?? 0))
                        <section class="rounded-lg border border-slate-200 p-4">
                            <div class="flex flex-wrap items-start justify-between gap-3">
                                <div>
                                    <div class="flex flex-wrap gap-2">
                                        <x-status-badge :status="$material->status" />
                                        <x-status-badge :status="$material->material_type" />
                                    </div>
                                    <h4 class="mt-3 font-black text-slate-950">{{ $material->title }}</h4>
                                    <p class="mt-1 text-sm leading-6 text-slate-600">{{ $material->description }}</p>
                                </div>
                                <div class="text-right">
                                    <p class="text-2xl font-black text-slate-950">{{ $materialAvg }}%</p>
                                    <p class="text-xs font-bold text-slate-500">{{ __('lms.watch_progress') }}</p>
                                </div>
                            </div>
                            <div class="mt-4 h-2 overflow-hidden rounded-full bg-slate-200">
                                <div class="h-full rounded-full bg-sky-600" style="width: {{ $materialAvg }}%"></div>
                            </div>
                            <div class="mt-4 flex flex-wrap gap-2">
                                @if($material->video_url)
                                    <a href="{{ $material->video_url }}" target="_blank" class="inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm font-black text-sky-700 hover:border-sky-300">
                                        <i data-lucide="play-circle" class="h-4 w-4"></i>
                                        {{ __('lms.open_video') }}
                                    </a>
                                @endif
                                @if($material->file_path)
                                    <a href="{{ asset('storage/'.$material->file_path) }}" target="_blank" class="inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm font-black text-sky-700 hover:border-sky-300">
                                        <i data-lucide="download" class="h-4 w-4"></i>
                                        {{ __('app.actions.file') }}
                                    </a>
                                @endif
                                <span class="inline-flex items-center rounded-lg bg-slate-100 px-3 py-2 text-sm font-black text-slate-600">
                                    {{ $material->open_questions_count }} {{ __('lms.open_questions') }}
                                </span>
                            </div>

                            <details class="mt-4">
                                <summary class="cursor-pointer text-sm font-black text-sky-700">{{ __('lms.questions') }}</summary>
                                <div class="mt-3 grid gap-3">
                                    @forelse($material->questions as $question)
                                        <div id="question-{{ $question->id }}" class="rounded-lg bg-slate-50 p-3">
                                            <div class="flex flex-wrap items-center justify-between gap-2">
                                                <p class="text-sm font-black text-slate-950">{{ $question->user?->name }}</p>
                                                <x-status-badge :status="$question->status" />
                                            </div>
                                            <p class="mt-2 text-sm leading-6 text-slate-600">{{ $question->question }}</p>
                                            @if($question->answer)
                                                <p class="mt-3 rounded-lg bg-emerald-50 p-3 text-sm leading-6 text-emerald-700">{{ $question->answer }}</p>
                                            @else
                                                <form method="POST" action="{{ route('trainer.materials.questions.answer', $question) }}" class="mt-3 grid gap-2">
                                                    @csrf
                                                    @method('PATCH')
                                                    <textarea name="answer" rows="3" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" placeholder="{{ __('lms.answer_placeholder') }}" required></textarea>
                                                    <button class="inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-3 py-2 text-sm font-black text-white hover:bg-slate-950 sm:w-max">
                                                        <i data-lucide="message-circle-reply" class="h-4 w-4"></i>
                                                        {{ __('lms.save_answer') }}
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    @empty
                                        <p class="text-sm text-slate-500">{{ __('lms.questions') }} belum tersedia.</p>
                                    @endforelse
                                </div>
                            </details>
                        </section>
                    @empty
                        <div class="rounded-lg border border-dashed border-slate-300 p-6 text-center text-sm text-slate-500 lg:col-span-2">{{ __('lms.materials_title') }} belum tersedia.</div>
                    @endforelse
                </div>
            </article>
        @empty
            <div class="rounded-lg border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">{{ __('nav.my_classes') }} belum tersedia.</div>
        @endforelse
    </div>
</div>
@endsection