@extends('student.layouts.app')

@section('title', $assignment->title)

@section('styles')
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet" />
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <style>
        .filepond--credits { display: none; }
        .filepond--drop-label { color: #18181b; }
        .filepond--panel-root { border-radius: 1.5rem; background: rgba(244, 244, 245, 0.95); border: 1px dashed rgba(245, 158, 11, 0.45); }
        html.dark .filepond--panel-root { background: rgba(24, 24, 27, 0.95); border-color: rgba(245, 158, 11, 0.35); }
    </style>
@endsection

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
    $submission = $assignment->currentStudentSubmission;
    $dueDate = $assignment->due_date;
    $isPastDue = $dueDate ? now()->isAfter($dueDate) : false;
    $isSubmitted = $submission !== null;
    $isGraded = $isSubmitted && $submission->score !== null;
    $canEdit = $isSubmitted && ! $isPastDue && ! $isGraded;
    $latestVersion = $submission?->latestVersion;
    $versions = $submission?->versions ?? collect();
@endphp

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

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(21rem,0.85fr)]">
        <div class="space-y-6">
            <div class="student-card overflow-hidden">
                <div class="border-b border-zinc-200 bg-zinc-50 px-6 py-5 dark:border-zinc-800 dark:bg-zinc-950">
                    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                        <div>
                            <div class="flex flex-wrap items-center gap-3">
                                <span class="inline-flex items-center gap-2 rounded-full bg-amber-100 px-3 py-1 text-[11px] font-black text-amber-700 dark:bg-amber-500/10 dark:text-amber-300">
                                    <i class="fa-solid fa-list-check"></i>
                                    {{ $isArabic ? 'تفاصيل المهمة' : 'Assignment details' }}
                                </span>
                                <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-[11px] font-black
                                    @if ($isGraded) bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300
                                    @elseif ($isSubmitted) bg-indigo-100 text-indigo-700 dark:bg-indigo-500/10 dark:text-indigo-300
                                    @elseif ($isPastDue) bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-300
                                    @else bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 @endif">
                                    @if ($isGraded)
                                        {{ $isArabic ? 'تم التصحيح' : 'Graded' }}
                                    @elseif ($isSubmitted)
                                        {{ $isArabic ? 'تم التسليم' : 'Submitted' }}
                                    @elseif ($isPastDue)
                                        {{ $isArabic ? 'انتهى الموعد' : 'Closed' }}
                                    @else
                                        {{ $isArabic ? 'متاحة للتسليم' : 'Open' }}
                                    @endif
                                </span>
                            </div>
                            <h1 class="mt-4 text-2xl font-black text-zinc-900 dark:text-white md:text-3xl">{{ $assignment->title }}</h1>
                            <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">
                                {{ $course->teacher?->name ?: ($isArabic ? 'لم يتم تعيين المعلم بعد' : 'Teacher not assigned yet') }}
                            </p>
                        </div>

                        <div class="grid min-w-[14rem] gap-3 sm:grid-cols-2">
                            <div class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-center dark:border-zinc-800 dark:bg-zinc-900">
                                <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'الدرجة' : 'Score' }}</div>
                                <div class="mt-1 text-2xl font-black text-zinc-900 dark:text-white font-numbers">{{ $assignment->score ?? 0 }}</div>
                            </div>
                            <div class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-center dark:border-zinc-800 dark:bg-zinc-900">
                                <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'الموعد' : 'Due' }}</div>
                                <div class="mt-1 text-sm font-black text-zinc-900 dark:text-white">{{ $dueDate ? $dueDate->format('Y-m-d') : '--' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-y-5 p-6">
                    <div class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                        <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'وصف المهمة' : 'Assignment description' }}</h3>
                        <p class="mt-4 whitespace-pre-line text-sm leading-7 text-zinc-600 dark:text-zinc-300">{{ $assignment->description ?: ($isArabic ? 'لا يوجد وصف إضافي لهذه المهمة.' : 'No extra description was added for this assignment.') }}</p>
                    </div>

                    <div class="grid gap-4 md:grid-cols-3">
                        <div class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                            <div class="text-xs font-black text-zinc-400">{{ $isArabic ? 'موعد التسليم' : 'Due date' }}</div>
                            <div class="mt-2 text-base font-black text-zinc-900 dark:text-white">
                                {{ $dueDate ? $dueDate->format('Y-m-d h:i A') : ($isArabic ? 'غير محدد' : 'Not specified') }}
                            </div>
                            @if ($dueDate)
                                <div class="mt-2 text-xs font-semibold text-zinc-500 dark:text-zinc-400">{{ $dueDate->diffForHumans() }}</div>
                            @endif
                        </div>

                        <div class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                            <div class="text-xs font-black text-zinc-400">{{ $isArabic ? 'حالة التسليم' : 'Submission status' }}</div>
                            <div class="mt-2 text-base font-black text-zinc-900 dark:text-white">
                                @if ($isGraded)
                                    {{ $isArabic ? 'تم التصحيح' : 'Graded' }}
                                @elseif ($isSubmitted)
                                    {{ $isArabic ? 'تم التسليم' : 'Submitted' }}
                                @elseif ($isPastDue)
                                    {{ $isArabic ? 'انتهى الموعد' : 'Closed' }}
                                @else
                                    {{ $isArabic ? 'لم يتم التسليم بعد' : 'Not submitted yet' }}
                                @endif
                            </div>
                        </div>

                        <div class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                            <div class="text-xs font-black text-zinc-400">{{ $isArabic ? 'نتيجتك' : 'Your result' }}</div>
                            <div class="mt-2 text-base font-black text-zinc-900 dark:text-white">
                                @if ($isGraded)
                                    {{ $submission->score }} / {{ $assignment->score }}
                                @elseif ($isSubmitted)
                                    {{ $isArabic ? 'بانتظار المراجعة' : 'Waiting for review' }}
                                @else
                                    {{ $isArabic ? 'لا توجد نتيجة بعد' : 'No result yet' }}
                                @endif
                            </div>
                        </div>
                    </div>

                    @if ($dueDate && ! $isPastDue && ! $isGraded)
                        <div class="rounded-3xl border border-amber-200 bg-amber-50 px-5 py-4 dark:border-amber-500/20 dark:bg-amber-500/10">
                            <div id="popup" class="text-sm font-bold text-amber-800 dark:text-amber-200">
                                <div id="countdown" data-due-date="{{ $dueDate->toIso8601String() }}">
                                    {{ $isArabic ? 'المتبقي على إغلاق التسليم:' : 'Time left until submission closes:' }}
                                    <span id="days" class="font-numbers">00</span>
                                    {{ $isArabic ? 'يوم' : 'days' }}
                                    <span id="hours" class="font-numbers">00</span>
                                    {{ $isArabic ? 'ساعة' : 'hours' }}
                                    <span id="minutes" class="font-numbers">00</span>
                                    {{ $isArabic ? 'دقيقة' : 'minutes' }}
                                    <span id="seconds" class="font-numbers">00</span>
                                    {{ $isArabic ? 'ثانية' : 'seconds' }}
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($assignment->files->isNotEmpty())
                        <div class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                            <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'ملفات المهمة' : 'Assignment files' }}</h3>
                            <div class="mt-4 space-y-3">
                                @foreach ($assignment->files as $file)
                                    <a href="{{ Storage::url($file->file_path) }}" download class="flex items-center justify-between gap-3 rounded-2xl border border-zinc-200 px-4 py-3 text-decoration-none dark:border-zinc-800">
                                        <div class="flex items-center gap-3">
                                            <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">
                                                <i class="fa-solid fa-file-arrow-down"></i>
                                            </span>
                                            <div>
                                                <div class="text-sm font-black text-zinc-900 dark:text-white">{{ basename($file->file_path) }}</div>
                                                <div class="text-xs text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'ملف مرفق للمهمة' : 'Attached assignment file' }}</div>
                                            </div>
                                        </div>
                                        <span class="text-xs font-black text-primary">{{ $isArabic ? 'تحميل' : 'Download' }}</span>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="student-card overflow-hidden">
                <div class="border-b border-zinc-200 bg-zinc-50 px-6 py-5 dark:border-zinc-800 dark:bg-zinc-950">
                    <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'إجابتك' : 'Your submission' }}</h2>
                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'تابع آخر نسخة رفعتها أو أضف إجابة جديدة قبل انتهاء الموعد.' : 'Review your latest version or submit a new answer before the deadline.' }}</p>
                </div>

                <div class="space-y-5 p-6">
                    @if ($isGraded)
                        <div class="rounded-3xl border border-emerald-200 bg-emerald-50 p-5 dark:border-emerald-500/20 dark:bg-emerald-500/10">
                            <div class="text-xs font-black text-emerald-700 dark:text-emerald-300">{{ $isArabic ? 'تم التصحيح' : 'Graded' }}</div>
                            <div class="mt-2 text-3xl font-black text-emerald-800 dark:text-emerald-200 font-numbers">{{ $submission->score }} / {{ $assignment->score }}</div>
                            @if ($submission->feedback)
                                <p class="mt-4 whitespace-pre-line text-sm text-emerald-900 dark:text-emerald-100">{{ $submission->feedback }}</p>
                            @endif
                        </div>
                    @elseif ($isPastDue && ! $isSubmitted)
                        <div class="rounded-3xl border border-red-200 bg-red-50 p-5 text-sm font-semibold text-red-700 dark:border-red-500/20 dark:bg-red-500/10 dark:text-red-300">
                            {{ $isArabic ? 'انتهى موعد التسليم لهذه المهمة.' : 'The submission deadline for this assignment has passed.' }}
                        </div>
                    @elseif ($isSubmitted && ! $canEdit && ! $isGraded)
                        <div class="rounded-3xl border border-indigo-200 bg-indigo-50 p-5 text-sm font-semibold text-indigo-700 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300">
                            {{ $isArabic ? 'تم استلام إجابتك وهي الآن بانتظار المراجعة.' : 'Your answer has been received and is waiting for review.' }}
                        </div>
                    @endif

                    @if ($isSubmitted)
                        <div class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                            <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'آخر نسخة' : 'Latest version' }}</h3>

                            @if ($latestVersion?->type === 'text')
                                <div class="mt-4 rounded-2xl bg-zinc-50 p-4 text-sm leading-7 text-zinc-700 dark:bg-zinc-950 dark:text-zinc-200">
                                    {!! nl2br(e($latestVersion->body)) !!}
                                </div>
                            @elseif ($latestVersion?->type === 'file')
                                <a href="{{ Storage::url($latestVersion->file_path) }}" target="_blank" class="mt-4 flex items-center justify-between gap-3 rounded-2xl bg-zinc-50 px-4 py-4 text-decoration-none dark:bg-zinc-950">
                                    <div class="flex items-center gap-3">
                                        <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300">
                                            <i class="fa-solid fa-file-lines"></i>
                                        </span>
                                        <div>
                                            <div class="text-sm font-black text-zinc-900 dark:text-white">{{ basename($latestVersion->file_path) }}</div>
                                            <div class="text-xs text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'اضغط لفتح الملف' : 'Open the uploaded file' }}</div>
                                        </div>
                                    </div>
                                    <span class="text-xs font-black text-primary">{{ $isArabic ? 'فتح' : 'Open' }}</span>
                                </a>
                            @endif
                        </div>
                    @endif

                    @if ($versions->isNotEmpty())
                        <div class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                            <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'سجل التسليمات' : 'Submission timeline' }}</h3>
                            <div class="mt-4 space-y-3">
                                @foreach ($versions as $version)
                                    <div class="flex items-center justify-between gap-3 rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-950">
                                        <div class="flex items-center gap-3">
                                            <span class="flex h-10 w-10 items-center justify-center rounded-2xl {{ $version->type === 'file' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-primary-light text-primary dark:bg-primary/10 dark:text-primary-container' }}">
                                                <i class="fa-solid {{ $version->type === 'file' ? 'fa-file-arrow-up' : 'fa-pen' }}"></i>
                                            </span>
                                            <div>
                                                <div class="text-sm font-black text-zinc-900 dark:text-white">
                                                    {{ $version->type === 'file' ? ($isArabic ? 'رفع ملف' : 'File upload') : ($isArabic ? 'إجابة نصية' : 'Text answer') }}
                                                </div>
                                                <div class="text-xs text-zinc-500 dark:text-zinc-400">{{ $version->created_at?->diffForHumans() }}</div>
                                            </div>
                                        </div>
                                        @if ($version->type === 'file' && $version->file_path)
                                            <a href="{{ Storage::url($version->file_path) }}" target="_blank" class="text-xs font-black text-primary">{{ $isArabic ? 'عرض' : 'View' }}</a>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if (! $isPastDue || $canEdit)
                        @if (! $isGraded && (! $isSubmitted || $canEdit))
                            <form action="{{ $isSubmitted ? route('student.assignment-submissions.update', $submission->id) : route('student.assignment-submissions.store', $assignment->id) }}" method="POST" enctype="multipart/form-data" class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                                @csrf
                                @if ($isSubmitted)
                                    @method('PUT')
                                @endif

                                <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $isArabic ? ($isSubmitted ? 'تحديث الإجابة' : 'تسليم الإجابة') : ($isSubmitted ? 'Update submission' : 'Submit answer') }}</h3>

                                <div class="mt-4 flex flex-wrap gap-3">
                                    <label class="inline-flex items-center gap-2 rounded-2xl bg-zinc-50 px-4 py-3 text-sm font-black dark:bg-zinc-950">
                                        <input class="form-check-input" type="radio" name="submission_type" value="file" {{ old('submission_type', $latestVersion?->type ?? 'file') === 'file' ? 'checked' : '' }}>
                                        <span>{{ $isArabic ? 'رفع ملف' : 'Upload file' }}</span>
                                    </label>
                                    <label class="inline-flex items-center gap-2 rounded-2xl bg-zinc-50 px-4 py-3 text-sm font-black dark:bg-zinc-950">
                                        <input class="form-check-input" type="radio" name="submission_type" value="text" {{ old('submission_type', $latestVersion?->type) === 'text' ? 'checked' : '' }}>
                                        <span>{{ $isArabic ? 'كتابة نص' : 'Write text' }}</span>
                                    </label>
                                </div>

                                <div id="file_upload_section" class="mt-5" style="{{ old('submission_type', $latestVersion?->type ?? 'file') === 'file' ? '' : 'display:none;' }}">
                                    <input type="file" class="my-pond" name="file_path" />
                                </div>

                                <div id="text_answer_section" class="mt-5" style="{{ old('submission_type', $latestVersion?->type) === 'text' ? '' : 'display:none;' }}">
                                    <textarea name="body" class="w-full rounded-3xl border border-zinc-200 bg-zinc-50 px-4 py-4 text-sm text-zinc-800 outline-none transition focus:border-primary dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100" rows="8" placeholder="{{ $isArabic ? 'اكتب إجابتك هنا...' : 'Write your answer here...' }}">{{ old('body', $latestVersion?->type === 'text' ? $latestVersion->body : '') }}</textarea>
                                </div>

                                @error('submission_type')
                                    <p class="mt-3 text-sm font-bold text-red-500">{{ $message }}</p>
                                @enderror
                                @error('file_path')
                                    <p class="mt-3 text-sm font-bold text-red-500">{{ $message }}</p>
                                @enderror
                                @error('body')
                                    <p class="mt-3 text-sm font-bold text-red-500">{{ $message }}</p>
                                @enderror

                                <div class="mt-5">
                                    <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-amber-500 px-5 py-3 text-sm font-black text-white">
                                        <i class="fa-solid fa-paper-plane"></i>
                                        {{ $isArabic ? ($isSubmitted ? 'حفظ التحديث' : 'تسليم الإجابة') : ($isSubmitted ? 'Save update' : 'Submit answer') }}
                                    </button>
                                </div>
                            </form>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('scripts')
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>
    <script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>
    <script>
        FilePond.registerPlugin(FilePondPluginImagePreview);
        $(document).ready(function () {
            $('.my-pond').filepond({
                allowMultiple: false,
                server: {
                    url: '{{ url('filepond') }}',
                    process: '/process',
                    revert: '/revert',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
                }
            });

            $('input[name="submission_type"]').on('change', function() {
                if (this.value === 'file') {
                    $('#file_upload_section').show();
                    $('#text_answer_section').hide();
                } else {
                    $('#file_upload_section').hide();
                    $('#text_answer_section').show();
                }
            });
        });
    </script>
    <script>
        const countdownElement = document.getElementById('countdown');
        if (countdownElement) {
            const dueDate = new Date(countdownElement.getAttribute('data-due-date')).getTime();
            const interval = setInterval(() => {
                const now = new Date().getTime();
                const timeLeft = dueDate - now;

                if (timeLeft <= 0) {
                    clearInterval(interval);
                    document.getElementById('popup').innerHTML = "<p class='mb-0 fw-bold'>{{ $isArabic ? 'انتهى وقت التسليم.' : 'Submission time has ended.' }}</p>";
                    return;
                }

                const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
                const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

                document.getElementById('days').textContent = String(days).padStart(2, '0');
                document.getElementById('hours').textContent = String(hours).padStart(2, '0');
                document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
                document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
            }, 1000);
        }
    </script>
@endsection