@extends('student.layouts.app')

@section('title', app()->getLocale() === 'ar' ? 'المهام' : 'Assignments')

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
@endphp

<div class="space-y-6">
    @include('student.courses.inc.overview', ['course' => $course])
    @include('student.courses.inc.tabs', ['course' => $course])

    <section class="student-card overflow-hidden">
        <div class="flex flex-col gap-4 border-b border-zinc-200 bg-zinc-50 px-6 py-5 dark:border-zinc-800 dark:bg-zinc-950 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'مهام وواجبات المقرر' : 'Course assignments' }}</h2>
                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'واجهة أوضح لمتابعة التسليمات والدرجات والمواعيد النهائية.' : 'A cleaner view for submissions, grades, and deadlines.' }}</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2">
                <div class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'إجمالي المهام' : 'Total assignments' }}</div>
                    <div class="mt-1 text-xl font-black text-zinc-900 dark:text-white font-numbers">{{ $assignments->count() }}</div>
                </div>
                <div class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'بانتظارك' : 'Need action' }}</div>
                    <div class="mt-1 text-xl font-black text-zinc-900 dark:text-white font-numbers">{{ $assignments->filter(fn ($item) => ! $item->currentStudentSubmission && (! $item->due_date || now()->isBefore($item->due_date)))->count() }}</div>
                </div>
            </div>
        </div>
        <div class="grid gap-4 p-6 md:grid-cols-2 xl:grid-cols-3">
            @if ($assignments->isNotEmpty())
                @foreach ($assignments as $assignment)
                    @php
                        $submission = $assignment->currentStudentSubmission;
                        $dueDate = $assignment->due_date;
                        $isPastDue = $dueDate ? now()->isAfter($dueDate) : false;
                        $statusLabel = $isArabic ? 'جديدة' : 'New';
                        $statusClasses = 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300';

                        if ($submission && $submission->score !== null) {
                            $statusLabel = $isArabic ? 'تم التصحيح' : 'Graded';
                            $statusClasses = 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300';
                        } elseif ($submission) {
                            $statusLabel = $isArabic ? 'تم التسليم' : 'Submitted';
                            $statusClasses = 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300';
                        } elseif ($isPastDue) {
                            $statusLabel = $isArabic ? 'متأخرة' : 'Past due';
                            $statusClasses = 'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-300';
                        }
                    @endphp
                    <article class="rounded-3xl border border-zinc-200 bg-white p-5 transition hover:border-primary/30 dark:border-zinc-800 dark:bg-zinc-900">
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex items-start gap-4">
                                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-light text-primary dark:bg-primary/10 dark:text-primary-container">
                                    <i class="fa-solid fa-list-check text-lg"></i>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $assignment->title }}</h3>
                                    <p class="mt-2 line-clamp-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $assignment->description ?: ($isArabic ? 'بدون وصف إضافي.' : 'No extra description.') }}</p>
                                </div>
                            </div>
                            <span class="rounded-full px-3 py-1 text-xs font-black {{ $statusClasses }}">{{ $statusLabel }}</span>
                        </div>

                        <div class="mt-5 grid gap-3 sm:grid-cols-2">
                            <div class="rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-950">
                                <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'موعد التسليم' : 'Due date' }}</div>
                                <div class="mt-1 text-sm font-black text-zinc-900 dark:text-white">
                                    {{ $dueDate ? $dueDate->format('Y-m-d h:i A') : ($isArabic ? 'غير محدد' : 'Not set') }}
                                </div>
                            </div>
                            <div class="rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-950">
                                <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'حالة درجتك' : 'Score status' }}</div>
                                <div class="mt-1 text-sm font-black text-zinc-900 dark:text-white">
                                    @if ($submission && $submission->score !== null)
                                        {{ $submission->score }} / {{ $assignment->score }}
                                    @elseif ($submission)
                                        {{ $isArabic ? 'بانتظار التصحيح' : 'Waiting for grading' }}
                                    @else
                                        {{ $isArabic ? 'لم تسلم بعد' : 'Not submitted yet' }}
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="mt-5 flex items-center justify-between gap-3">
                            <span class="text-xs font-bold text-zinc-400 dark:text-zinc-500">
                                {{ $dueDate ? $dueDate->diffForHumans() : '' }}
                            </span>
                            <a href="{{ route('student.courses.assignments.show', $assignment->id) }}" class="inline-flex items-center gap-2 whitespace-nowrap rounded-2xl bg-primary px-4 py-2 text-sm font-black text-white text-decoration-none">
                                <i class="fa-solid fa-eye text-xs"></i>
                                {{ $isArabic ? 'عرض المهمة' : 'View assignment' }}
                            </a>
                        </div>
                    </article>
                @endforeach
            @else
                <div class="col-span-full rounded-3xl border border-dashed border-zinc-300 p-10 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                    {{ $isArabic ? 'لم يتم إضافة أي مهام بعد.' : 'No assignments have been added yet.' }}
                </div>
            @endif
        </div>
    </section>
</div>
@endsection