@extends('layouts.dashboard')

@section('title', __('lms.assignments_title'))
@section('eyebrow', __('lms.management'))

@section('content')
<div class="space-y-6">
    <section class="grid gap-4 md:grid-cols-3">
        <div class="rounded-lg bg-slate-950 p-5 text-white shadow-sm md:col-span-2">
            <div class="flex items-center gap-3">
                <span class="grid h-11 w-11 place-items-center rounded-lg bg-white text-slate-950">
                    <i data-lucide="clipboard-list" class="h-6 w-6"></i>
                </span>
                <div>
                    <p class="text-sm font-bold text-slate-300">{{ __('lms.assignment_room') }}</p>
                    <h2 class="text-2xl font-black">{{ __('lms.assignment_heading') }}</h2>
                </div>
            </div>
        </div>
        <div class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
            <p class="text-sm font-bold text-slate-500">{{ __('lms.submissions_in') }}</p>
            <p class="mt-2 text-3xl font-black text-slate-950">{{ $submissions->total() }}</p>
            <p class="mt-1 text-xs font-semibold text-slate-500">{{ __('lms.submissions_note') }}</p>
        </div>
    </section>

    <section class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="mb-4 flex items-center gap-3">
            <span class="grid h-10 w-10 place-items-center rounded-lg bg-sky-100 text-sky-700">
                <i data-lucide="plus" class="h-5 w-5"></i>
            </span>
            <div>
                <h3 class="font-black text-slate-950">{{ __('lms.create_assignment') }}</h3>
                <p class="text-sm text-slate-500">{{ __('lms.create_assignment_note') }}</p>
            </div>
        </div>
        <form method="POST" action="{{ route('admin.lms.assignments.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 }}" @selected(old('class_id') == $class->id)>{{ $class->class_name }}</option>
                @endforeach
            </select>
            <select name="learning_material_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                <option value="">{{ __('lms.select_material') }}</option>
                @foreach($materials as $material)
                    <option value="{{ $material->id }}" @selected(old('learning_material_id') == $material->id)>{{ $material->swimmingClass?->class_name }} - {{ $material->title }}</option>
                @endforeach
            </select>
            <input name="title" value="{{ old('title') }}" placeholder="{{ __('lms.title_placeholder') }}" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
            <input name="due_at" value="{{ old('due_at') }}" type="datetime-local" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
            <input name="max_score" value="{{ old('max_score', 100) }}" type="number" min="1" max="100" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
            <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>
            <input name="attachment_file" type="file" class="rounded-lg border border-slate-300 px-3 py-2 text-sm md:col-span-2">
            <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">{{ old('description') }}</textarea>
            <textarea name="instructions" rows="3" placeholder="{{ __('lms.instructions_placeholder') }}" class="rounded-lg border border-slate-300 px-3 py-2 text-sm md:col-span-2">{{ old('instructions') }}</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>
                {{ __('lms.save_assignment') }}
            </button>
        </form>
    </section>

    <section class="grid gap-5 lg:grid-cols-[.95fr_1.05fr]">
        <div class="space-y-4">
            <div class="flex items-center justify-between gap-3">
                <h3 class="text-lg font-black text-slate-950">{{ __('lms.assignment_list') }}</h3>
                <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-black text-slate-600">{{ $assignments->total() }} {{ __('lms.assignments') }}</span>
            </div>
            @forelse($assignments as $assignment)
                <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 class="min-w-0">
                            <div class="flex flex-wrap gap-2">
                                <x-status-badge :status="$assignment->status" />
                                <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-black text-slate-600">{{ $assignment->submissions_count }} submission</span>
                            </div>
                            <h4 class="mt-3 font-black text-slate-950">{{ $assignment->title }}</h4>
                            <p class="mt-1 text-sm text-slate-600">{{ $assignment->swimmingClass?->class_name }} - {{ $assignment->material?->title ?? 'Tanpa materi khusus' }}</p>
                        </div>
                        <div class="text-right text-xs font-bold text-slate-500">
                            <p>{{ $assignment->due_at ? \App\Support\LocaleFormat::date($assignment->due_at, 'd M Y H:i') : __('lms.no_deadline') }}</p>
                            <p>{{ __('lms.score') }} {{ $assignment->max_score }}</p>
                        </div>
                    </div>
                    <p class="mt-3 text-sm leading-6 text-slate-600">{{ $assignment->description }}</p>
                    <details class="mt-4">
                        <summary class="cursor-pointer text-sm font-black text-sky-700">{{ __('lms.edit_assignment') }}</summary>
                        <form method="POST" action="{{ route('admin.lms.assignments.update', $assignment) }}" enctype="multipart/form-data" class="mt-4 grid gap-3">
                            @csrf
                            @method('PUT')
                            <select name="class_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
                                @foreach($classes as $class)
                                    <option value="{{ $class->id }}" @selected($assignment->class_id == $class->id)>{{ $class->class_name }}</option>
                                @endforeach
                            </select>
                            <select name="learning_material_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                                <option value="">Materi terkait</option>
                                @foreach($materials as $material)
                                    <option value="{{ $material->id }}" @selected($assignment->learning_material_id == $material->id)>{{ $material->swimmingClass?->class_name }} - {{ $material->title }}</option>
                                @endforeach
                            </select>
                            <input name="title" value="{{ $assignment->title }}" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
                            <textarea name="description" rows="2" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">{{ $assignment->description }}</textarea>
                            <textarea name="instructions" rows="3" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">{{ $assignment->instructions }}</textarea>
                            <div class="grid gap-3 sm:grid-cols-3">
                                <input name="due_at" value="{{ $assignment->due_at?->format('Y-m-d\TH:i') }}" type="datetime-local" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                                <input name="max_score" value="{{ $assignment->max_score }}" type="number" min="1" max="100" class="rounded-lg border border-slate-300 px-3 py-2 text-sm" required>
                                <select name="status" class="rounded-lg border border-slate-300 px-3 py-2 text-sm">
                                    <option value="active" @selected($assignment->status === 'active')>active</option>
                                    <option value="inactive" @selected($assignment->status === 'inactive')>inactive</option>
                                </select>
                            </div>
                            <input name="attachment_file" 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>
                </article>
            @empty
                <div class="rounded-lg border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">{{ __('lms.empty_assignments') }}</div>
            @endforelse
            {{ $assignments->links() }}
        </div>

        <div class="space-y-4">
            <div class="flex items-center justify-between gap-3">
                <h3 class="text-lg font-black text-slate-950">{{ __('lms.review_submissions') }}</h3>
                <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-black text-slate-600">{{ $submissions->total() }} {{ __('app.actions.file') }}</span>
            </div>
            @forelse($submissions as $submission)
                <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="$submission->status" />
                                <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-black text-slate-600">{{ \App\Support\LocaleFormat::date($submission->submitted_at, 'd M Y H:i') }}</span>
                            </div>
                            <h4 class="mt-3 font-black text-slate-950">{{ $submission->assignment?->title }}</h4>
                            <p class="mt-1 text-sm text-slate-600">{{ $submission->user?->name }} - {{ $submission->assignment?->swimmingClass?->class_name }}</p>
                        </div>
                        @if($submission->file_path)
                            <a href="{{ asset('storage/'.$submission->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
                    </div>
                    @if($submission->answer_text)
                        <p class="mt-4 rounded-lg bg-slate-50 p-3 text-sm leading-6 text-slate-600">{{ $submission->answer_text }}</p>
                    @endif
                    <form method="POST" action="{{ route('admin.lms.submissions.review', $submission) }}" class="mt-4 grid gap-3 sm:grid-cols-[7rem_1fr]">
                        @csrf
                        @method('PATCH')
                        <input name="score" value="{{ old('score', $submission->score) }}" type="number" min="0" max="{{ $submission->assignment?->max_score ?? 100 }}" placeholder="Nilai" 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">
                            @foreach(['reviewed' => 'Reviewed', 'accepted' => 'Diterima', 'revision' => 'Perlu revisi'] as $value => $label)
                                <option value="{{ $value }}" @selected(old('status', $submission->status) === $value)>{{ __("status.$value") }}</option>
                            @endforeach
                        </select>
                        <textarea name="feedback" rows="3" placeholder="Feedback" class="rounded-lg border border-slate-300 px-3 py-2 text-sm sm:col-span-2">{{ old('feedback', $submission->feedback) }}</textarea>
                        <button class="inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-black text-white hover:bg-slate-950 sm:col-span-2">
                            <i data-lucide="check-circle-2" class="h-4 w-4"></i>
                            {{ __('lms.review_saved') }}
                        </button>
                    </form>
                </article>
            @empty
                <div class="rounded-lg border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500">{{ __('lms.review_submissions') }} belum tersedia.</div>
            @endforelse
            {{ $submissions->links() }}
        </div>
    </section>
</div>
@endsection