@extends('layouts.student')
@section('title', 'Detail Tugas')

@section('content')

{{-- Breadcrumb --}}
<div class="flex items-center gap-2 text-sm text-gray-400 mb-5">
    <a href="{{ route('student.dashboard') }}" class="hover:text-blue-600 transition">Dashboard</a>
    <i class="fa fa-chevron-right" style="font-size:10px;"></i>
    <a href="{{ route('student.courses.show', $submission->assignment->course) }}"
       class="hover:text-blue-600 transition">{{ $submission->assignment->course->title }}</a>
    <i class="fa fa-chevron-right" style="font-size:10px;"></i>
    <span class="text-gray-600 font-medium">{{ $submission->assignment->title }}</span>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Detail Tugas & Submission --}}
    <div class="lg:col-span-2 space-y-5">

        {{-- Info Tugas --}}
        <div class="bg-white rounded-2xl border border-gray-100 p-6" style="box-shadow:0 1px 8px rgba(0,0,0,.04);">
            <div class="flex items-start justify-between gap-4 mb-4">
                <div>
                    <span class="text-xs font-semibold text-amber-600 bg-amber-50 px-2.5 py-1 rounded-full">Tugas</span>
                    <h1 class="text-xl font-bold text-gray-900 mt-2">{{ $submission->assignment->title }}</h1>
                </div>
                {{-- Status Badge --}}
                @php
                    $status = $submission->grade !== null ? 'dinilai' : 'menunggu';
                    $statusColor = $status === 'dinilai' ? 'green' : 'yellow';
                @endphp
                <span class="inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-full flex-shrink-0
                             bg-{{ $statusColor }}-50 text-{{ $statusColor }}-700 border border-{{ $statusColor }}-200">
                    <span class="w-1.5 h-1.5 rounded-full bg-{{ $statusColor }}-500"></span>
                    {{ $status === 'dinilai' ? 'Sudah Dinilai' : 'Menunggu Penilaian' }}
                </span>
            </div>

            <div class="prose prose-sm text-gray-600 max-w-none mb-4">
                {!! nl2br(e($submission->assignment->description ?? 'Tidak ada deskripsi.')) !!}
            </div>

            <div class="flex flex-wrap gap-4 text-sm text-gray-500 pt-4 border-t border-gray-50">
                <span><i class="fa fa-clock mr-1 text-gray-400"></i>
                    Deadline: <strong>{{ $submission->assignment->deadline ? $submission->assignment->deadline->format('d M Y, H:i') : 'Tidak ada' }}</strong>
                </span>
                <span><i class="fa fa-calendar-check mr-1 text-gray-400"></i>
                    Dikumpulkan: <strong>{{ $submission->submitted_at?->format('d M Y, H:i') ?? '-' }}</strong>
                </span>
            </div>
        </div>

        {{-- Jawaban / File Submission --}}
        <div class="bg-white rounded-2xl border border-gray-100 p-6" style="box-shadow:0 1px 8px rgba(0,0,0,.04);">
            <h2 class="font-semibold text-gray-800 mb-4 flex items-center gap-2">
                <i class="fa fa-file-alt text-blue-500"></i> Jawaban Kamu
            </h2>

            @if($submission->content)
                <div class="bg-gray-50 rounded-xl p-4 text-sm text-gray-700 leading-relaxed whitespace-pre-wrap mb-4">
                    {{ $submission->content }}
                </div>
            @endif

            @if($submission->file_path)
                <a href="{{ asset('storage/' . $submission->file_path) }}"
                   target="_blank"
                   class="inline-flex items-center gap-2 text-sm font-semibold text-blue-600
                          bg-blue-50 hover:bg-blue-100 px-4 py-2.5 rounded-xl transition">
                    <i class="fa fa-download"></i> Unduh File Jawaban
                </a>
            @endif

            @if(!$submission->content && !$submission->file_path)
                <p class="text-sm text-gray-400 italic">Tidak ada jawaban yang dikirim.</p>
            @endif
        </div>

    </div>

    {{-- Sidebar Nilai --}}
    <div class="space-y-4">

        {{-- Nilai --}}
        <div class="bg-white rounded-2xl border border-gray-100 p-5" style="box-shadow:0 1px 8px rgba(0,0,0,.04);">
            <h3 class="font-semibold text-gray-800 mb-4 text-sm">Nilai</h3>
            @if($submission->grade !== null)
                <div class="text-center py-4">
                    <div class="text-5xl font-bold mb-1
                        {{ $submission->grade >= 75 ? 'text-green-500' : ($submission->grade >= 60 ? 'text-amber-500' : 'text-red-500') }}">
                        {{ $submission->grade }}
                    </div>
                    <p class="text-xs text-gray-400">dari 100</p>
                    <div class="mt-3 text-sm font-semibold
                        {{ $submission->grade >= 75 ? 'text-green-600' : ($submission->grade >= 60 ? 'text-amber-600' : 'text-red-600') }}">
                        {{ $submission->grade >= 75 ? 'Lulus ✓' : ($submission->grade >= 60 ? 'Cukup' : 'Perlu Perbaikan') }}
                    </div>
                </div>
                @if($submission->feedback)
                <div class="mt-4 pt-4 border-t border-gray-50">
                    <p class="text-xs font-semibold text-gray-500 mb-2">Catatan Guru:</p>
                    <p class="text-sm text-gray-600 leading-relaxed">{{ $submission->feedback }}</p>
                </div>
                @endif
            @else
                <div class="text-center py-6 text-gray-400">
                    <i class="fa fa-hourglass-half" style="font-size:28px;"></i>
                    <p class="text-sm mt-2">Belum dinilai</p>
                </div>
            @endif
        </div>

        {{-- Aksi --}}
        <div class="bg-white rounded-2xl border border-gray-100 p-5" style="box-shadow:0 1px 8px rgba(0,0,0,.04);">
            <a href="{{ route('student.courses.show', $submission->assignment->course) }}"
               class="w-full inline-flex items-center justify-center gap-2 text-sm font-semibold
                      text-gray-600 bg-gray-50 hover:bg-gray-100 px-4 py-2.5 rounded-xl transition">
                <i class="fa fa-arrow-left"></i> Kembali ke Kursus
            </a>
        </div>

    </div>
</div>

@endsection