@extends('layouts.dashboard')

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

@section('content')
<div class="space-y-6">
    <section class="overflow-hidden rounded-lg bg-slate-950 text-white shadow-sm">
        <div class="grid gap-6 p-5 sm:p-6 lg:grid-cols-[1.4fr_.9fr] lg:p-8">
            <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="graduation-cap" class="h-4 w-4"></i>
                    {{ __('lms.assignment_room') }}
                </div>
                <h2 class="mt-4 text-2xl font-black sm:text-3xl">{{ __('lms.assignment_heading') }}</h2>
                <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-300">{{ __('lms.assignment_intro') }}</p>
            </div>
            <div class="grid grid-cols-3 gap-3">
                <div class="rounded-lg bg-white/10 p-4">
                    <p class="text-2xl font-black">{{ $assignments->count() }}</p>
                    <p class="mt-1 text-xs font-bold text-slate-300">{{ __('lms.assignments') }}</p>
                </div>
                <div class="rounded-lg bg-white/10 p-4">
                    <p class="text-2xl font-black">{{ $submittedCount }}</p>
                    <p class="mt-1 text-xs font-bold text-slate-300">{{ __('lms.submitted') }}</p>
                </div>
                <div class="rounded-lg bg-white/10 p-4">
                    <p class="text-2xl font-black">{{ $reviewedCount }}</p>
                    <p class="mt-1 text-xs font-bold text-slate-300">{{ __('lms.reviewed') }}</p>
                </div>
            </div>
        </div>
    </section>

    <form class="flex flex-col gap-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm sm:flex-row sm:items-center">
        <div class="min-w-0 flex-1">
            <p class="text-sm font-black text-slate-950">{{ __('lms.filter_class') }}</p>
            <p class="text-xs font-semibold text-slate-500">{{ __('lms.filter_class_note') }}</p>
        </div>
        <select name="class_id" class="rounded-lg border border-slate-300 px-3 py-2 text-sm font-bold">
            <option value="">{{ __('lms.all_classes') }}</option>
            @foreach($classes as $class)
                <option value="{{ $class->id }}" @selected(request('class_id') == $class->id)>{{ $class->class_name }}</option>
            @endforeach
        </select>
        <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="filter" class="h-4 w-4"></i>
            {{ __('app.actions.filter') }}
        </button>
    </form>

    <div class="grid gap-5">
        @forelse($assignments as $assignment)
            @php
                $submission = $submissions->get($assignment->id);
                $isOverdue = $assignment->due_at && now()->greaterThan($assignment->due_at);
                $status = $submission?->status ?? ($isOverdue ? 'late' : 'belum_dikumpulkan');
            @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 class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <x-status-badge :status="$status" />
                            <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-black text-slate-600">{{ $assignment->swimmingClass?->class_name }}</span>
                            @if($assignment->due_at)
                                <span class="rounded-full {{ $isOverdue ? 'bg-rose-50 text-rose-700' : 'bg-sky-50 text-sky-700' }} px-2.5 py-1 text-xs font-black">
                                    {{ __('lms.deadline') }} {{ \App\Support\LocaleFormat::date($assignment->due_at, 'd M Y H:i') }}
                                </span>
                            @endif
                        </div>
                        <h3 class="mt-3 text-xl font-black text-slate-950">{{ $assignment->title }}</h3>
                        <p class="mt-2 text-sm leading-6 text-slate-600">{{ $assignment->description }}</p>
                    </div>
                    <div class="grid min-w-32 rounded-lg bg-slate-50 p-4 text-center">
                        <span class="text-2xl font-black text-slate-950">{{ $submission?->score ?? '-' }}</span>
                        <span class="text-xs font-bold text-slate-500">{{ __('lms.score') }} / {{ $assignment->max_score }}</span>
                    </div>
                </div>

                <div class="mt-5 grid gap-4 lg:grid-cols-[1fr_.9fr]">
                    <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                        <p class="text-sm font-black text-slate-950">{{ __('lms.instruction') }}</p>
                        <p class="mt-2 whitespace-pre-line text-sm leading-6 text-slate-600">{{ $assignment->instructions ?: __('lms.no_instruction') }}</p>
                        <div class="mt-4 flex flex-wrap gap-3 text-sm font-black text-sky-700">
                            @if($assignment->material)
                                <a class="inline-flex items-center gap-2 hover:text-sky-900" href="{{ route('user.lms.materials', ['class_id' => $assignment->class_id]) }}">
                                    <i data-lucide="book-open" class="h-4 w-4"></i>
                                    {{ __('lms.related_material') }}
                                </a>
                            @endif
                            @if($assignment->attachment_path)
                                <a class="inline-flex items-center gap-2 hover:text-sky-900" href="{{ asset('storage/'.$assignment->attachment_path) }}" target="_blank">
                                    <i data-lucide="paperclip" class="h-4 w-4"></i>
                                    {{ __('lms.assignment_attachment') }}
                                </a>
                            @endif
                            @if($submission?->file_path)
                                <a class="inline-flex items-center gap-2 hover:text-sky-900" href="{{ asset('storage/'.$submission->file_path) }}" target="_blank">
                                    <i data-lucide="file-check-2" class="h-4 w-4"></i>
                                    {{ __('lms.submitted_file') }}
                                </a>
                            @endif
                        </div>
                    </div>

                    <div class="rounded-lg border border-slate-200 p-4">
                        @if($submission?->feedback)
                            <div class="mb-4 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="space-y-3">
                            @csrf
                            <textarea name="answer_text" rows="4" class="w-full rounded-lg border border-slate-300 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-slate-300 px-3 py-2 text-sm">
                            <button class="inline-flex w-full 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 sm:w-auto">
                                <i data-lucide="upload-cloud" class="h-4 w-4"></i>
                                {{ $submission ? __('lms.resubmit') : __('lms.submit') }}
                            </button>
                        </form>
                    </div>
                </div>
            </article>
        @empty
            <div class="rounded-lg border border-dashed border-slate-300 bg-white p-8 text-center">
                <i data-lucide="clipboard-list" class="mx-auto h-10 w-10 text-slate-400"></i>
                <p class="mt-3 text-lg font-black text-slate-950">Belum ada tugas yang bisa dibuka.</p>
                <p class="mt-1 text-sm text-slate-500">Tugas akan tampil setelah pendaftaran sekolah renang aktif dan masuk ke kelas.</p>
                <a href="{{ route('user.school-registration.index') }}" class="mt-4 inline-flex items-center gap-2 rounded-lg bg-sky-700 px-4 py-2 text-sm font-black text-white hover:bg-slate-950">
                    <i data-lucide="waves" class="h-4 w-4"></i>
                    Daftar Sekolah Renang
                </a>
            </div>
        @endforelse
    </div>
</div>
@endsection