@extends('layouts.dashboard')

@section('title', 'Materi LMS')
@section('eyebrow', 'Manajemen LMS')

@section('content')
<div class="space-y-6">
    <section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="mb-4 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-black uppercase text-sky-700">Bahan ajar</p>
                <h2 class="mt-1 text-2xl font-black text-slate-950">Kelola materi ajar.</h2>
                <p class="mt-2 text-sm leading-6 text-slate-600">Materi dapat berupa teks, video, PDF, gambar, atau file pendukung.</p>
            </div>
            <span class="rounded-lg bg-slate-950 px-4 py-3 text-sm font-black text-white">{{ $materials->total() }} materi</span>
        </div>
        <form method="POST" action="{{ route('admin.learning-materials.store') }}" enctype="multipart/form-data" class="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
            @csrf
            <input name="title" placeholder="Judul materi" 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(['text', 'pdf', 'image', 'video', '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="Link video" 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="Deskripsi materi" 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>
                Tambah Materi
            </button>
        </form>
    </section>

    <div class="grid gap-4 lg:grid-cols-2">
        @forelse($materials as $material)
            @php($materialAvg = round($material->progresses_avg_progress_percent ?? 0))
            <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
                <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" />
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-black text-slate-600">Urutan {{ $material->order_number }}</span>
                        </div>
                        <h3 class="mt-3 font-black text-slate-950">{{ $material->title }}</h3>
                    </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 class="flex gap-2">
                        @if($material->video_url)
                            <a target="_blank" href="{{ $material->video_url }}" class="grid h-10 w-10 place-items-center rounded-lg border border-slate-200 text-sky-700 hover:border-sky-300" aria-label="Video">
                                <i data-lucide="play-circle" class="h-4 w-4"></i>
                            </a>
                        @endif
                        @if($material->file_path)
                            <a target="_blank" href="{{ asset('storage/'.$material->file_path) }}" class="grid h-10 w-10 place-items-center rounded-lg border border-slate-200 text-sky-700 hover:border-sky-300" aria-label="File">
                                <i data-lucide="download" class="h-4 w-4"></i>
                            </a>
                        @endif
                    </div>
                </div>
                <p class="mt-3 text-sm leading-6 text-slate-600">{{ $material->description }}</p>
                <div class="mt-4 grid gap-3 sm:grid-cols-3">
                    <div class="rounded-lg bg-slate-50 p-3">
                        <p class="text-lg font-black text-slate-950">{{ $material->progresses_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">{{ $material->questions_count }}</p>
                        <p class="text-xs font-bold text-slate-500">{{ __('lms.questions') }}</p>
                    </div>
                    <div class="rounded-lg bg-slate-50 p-3">
                        <p class="text-lg font-black text-slate-950">{{ $material->open_questions_count }}</p>
                        <p class="text-xs font-bold text-slate-500">{{ __('lms.open_questions') }}</p>
                    </div>
                </div>
                <details class="mt-4">
                    <summary class="cursor-pointer text-sm font-black text-sky-700">Ubah materi</summary>
                    <form method="POST" action="{{ route('admin.learning-materials.update', $material) }}" enctype="multipart/form-data" class="mt-4 grid gap-3">
                        @csrf
                        @method('PUT')
                        <input name="title" value="{{ $material->title }}" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
                        <textarea name="description" rows="3" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">{{ $material->description }}</textarea>
                        <div class="grid gap-3 sm:grid-cols-3">
                            <select name="material_type" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                                @foreach(['text', 'pdf', 'image', 'video', 'file'] as $type)
                                    <option value="{{ $type }}" @selected($material->material_type === $type)>{{ $type }}</option>
                                @endforeach
                            </select>
                            <input name="order_number" type="number" value="{{ $material->order_number }}" min="1" 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" @selected($material->status === 'active')>active</option>
                                <option value="inactive" @selected($material->status === 'inactive')>inactive</option>
                            </select>
                        </div>
                        <input name="video_url" type="url" value="{{ $material->video_url }}" placeholder="Link video" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        <input name="file_path" type="file" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                        <button class="inline-flex items-center justify-center gap-2 rounded-lg bg-slate-950 px-4 py-2 text-sm font-black text-white hover:bg-sky-700">
                            <i data-lucide="save" class="h-4 w-4"></i>
                            Update
                        </button>
                    </form>
                </details>
                <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('admin.learning-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>
            </article>
        @empty
            <div class="rounded-lg border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500 lg:col-span-2">Belum ada materi.</div>
        @endforelse
    </div>
    {{ $materials->links() }}
</div>
@endsection