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

@section('content')
<style>
    :root { --navy:#0d1b2a; --gold:#b8962e; --gold-light:#f7f0dc; --cream:#faf8f4; --cream-2:#f3efe6; --border:#e5e0d5; --muted:#6b6560; }
    .serif { font-family:'Cormorant Garamond',Georgia,serif; }
    .section-label { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; }
    .back-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); text-decoration:none; margin-bottom:20px; }
    .back-link:hover { color:var(--navy); }

    /* Breadcrumb */
    .breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-bottom:20px; }
    .breadcrumb a { color:var(--muted); text-decoration:none; transition:color .12s; }
    .breadcrumb a:hover { color:var(--navy); }
    .breadcrumb i { font-size:9px; }

    .page-layout { display:grid; grid-template-columns:1fr 260px; gap:16px; }
    @media(max-width:960px) { .page-layout{grid-template-columns:1fr;} }
    .panel { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
    .panel-head { padding:18px 22px 16px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .panel-body { padding:20px 22px; }
    .panel-title { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:600; color:var(--navy); }

    .status-pill { font-size:10px; font-weight:600; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; gap:5px; flex-shrink:0; }
    .status-graded { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
    .status-pending { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }

    .answer-box { background:var(--cream); border-radius:10px; padding:14px; font-size:13px; color:var(--navy); line-height:1.7; white-space:pre-wrap; }
    .download-btn { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:#1d4ed8; background:#eff6ff; padding:8px 14px; border-radius:9px; text-decoration:none; transition:background .12s; }
    .download-btn:hover { background:#dbeafe; }

    /* Grade display */
    .grade-circle { text-align:center; padding:20px 0; }
    .grade-num { font-family:'Cormorant Garamond',serif; font-size:56px; font-weight:700; line-height:1; }
    .grade-status { font-size:12px; font-weight:600; margin-top:6px; }
    .feedback-box { background:var(--cream); border-radius:10px; padding:12px 14px; font-size:13px; color:var(--navy); line-height:1.6; }

    .action-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; font-weight:500; padding:10px; border-radius:10px; text-decoration:none; background:var(--cream-2); color:var(--navy); border:1px solid var(--border); transition:background .12s; }
    .action-btn:hover { background:var(--cream); }

    .meta-info { display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--muted); padding-top:12px; border-top:1px solid var(--border); }
    .meta-info i { color:var(--muted); margin-right:3px; }
    .meta-info strong { color:var(--navy); }
</style>

<div class="breadcrumb">
    <a href="{{ route('student.dashboard') }}">Dashboard</a>
    <i class="fa fa-chevron-right"></i>
    <a href="{{ route('student.courses.show', $submission->assignment->course) }}">{{ $submission->assignment->course->title }}</a>
    <i class="fa fa-chevron-right"></i>
    <span style="color:var(--navy);font-weight:500;">{{ $submission->assignment->title }}</span>
</div>

@php
    $status = $submission->grade !== null ? 'dinilai' : 'menunggu';
@endphp

<div class="page-layout">
    {{-- Main --}}
    <div style="display:flex;flex-direction:column;gap:14px;">

        {{-- Assignment info --}}
        <div class="panel">
            <div class="panel-head">
                <div>
                    <span style="font-size:10px;font-weight:600;color:var(--gold);background:var(--gold-light);padding:3px 9px;border-radius:20px;display:inline-block;margin-bottom:6px;">Tugas</span>
                    <h1 class="panel-title" style="font-size:20px;">{{ $submission->assignment->title }}</h1>
                </div>
                <span class="status-pill {{ $status === 'dinilai' ? 'status-graded' : 'status-pending' }}">
                    <span style="width:6px;height:6px;border-radius:50%;background:{{ $status === 'dinilai' ? '#10b981' : '#f59e0b' }};"></span>
                    {{ $status === 'dinilai' ? 'Sudah Dinilai' : 'Menunggu Penilaian' }}
                </span>
            </div>
            <div class="panel-body">
                <div style="font-size:13px;line-height:1.7;color:#374151;margin-bottom:14px;">
                    {!! nl2br(e($submission->assignment->description ?? 'Tidak ada deskripsi.')) !!}
                </div>
                <div class="meta-info">
                    <span><i class="fa fa-clock"></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"></i>Dikumpulkan: <strong>{{ $submission->submitted_at?->format('d M Y, H:i') ?? '—' }}</strong></span>
                </div>
            </div>
        </div>

        {{-- Submission --}}
        <div class="panel">
            <div class="panel-head" style="display:block;">
                <div class="section-label">Jawaban Kamu</div>
                <div class="panel-title" style="margin-top:4px;">Hasil Pengumpulan</div>
            </div>
            <div class="panel-body">
                @if($submission->content)
                <div class="answer-box" style="margin-bottom:14px;">{{ $submission->content }}</div>
                @endif
                @if($submission->file_path)
                <a href="{{ asset('storage/' . $submission->file_path) }}" target="_blank" class="download-btn">
                    <i class="fa fa-download" style="font-size:11px;"></i> Unduh File Jawaban
                </a>
                @endif
                @if(!$submission->content && !$submission->file_path)
                <p style="font-size:13px;color:var(--muted);font-style:italic;">Tidak ada jawaban yang dikirim.</p>
                @endif
            </div>
        </div>
    </div>

    {{-- Sidebar --}}
    <div style="display:flex;flex-direction:column;gap:12px;">
        {{-- Grade --}}
        <div class="panel">
            <div class="panel-head" style="display:block;">
                <div class="panel-title">Nilai</div>
            </div>
            <div class="panel-body">
                @if($submission->grade !== null)
                <div class="grade-circle">
                    <div class="grade-num" style="color:{{ $submission->grade >= 75 ? '#065f46' : ($submission->grade >= 60 ? '#92400e' : '#dc2626') }};">
                        {{ $submission->grade }}
                    </div>
                    <div style="font-size:11px;color:var(--muted);margin-top:2px;">dari 100</div>
                    <div class="grade-status" style="color:{{ $submission->grade >= 75 ? '#065f46' : ($submission->grade >= 60 ? '#92400e' : '#dc2626') }};">
                        {{ $submission->grade >= 75 ? 'Lulus ✓' : ($submission->grade >= 60 ? 'Cukup' : 'Perlu Perbaikan') }}
                    </div>
                </div>
                @if($submission->feedback)
                <div style="padding-top:14px;border-top:1px solid var(--border);margin-top:6px;">
                    <div style="font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;">Catatan Guru</div>
                    <div class="feedback-box">{{ $submission->feedback }}</div>
                </div>
                @endif
                @else
                <div style="text-align:center;padding:28px;color:var(--muted);">
                    <i class="fa fa-hourglass-half" style="font-size:28px;display:block;margin-bottom:8px;opacity:.4;"></i>
                    <p style="font-size:13px;">Belum dinilai</p>
                </div>
                @endif
            </div>
        </div>

        {{-- Action --}}
        <div class="panel" style="overflow:visible;">
            <div class="panel-body">
                <a href="{{ route('student.courses.show', $submission->assignment->course) }}" class="action-btn">
                    <i class="fa fa-arrow-left" style="font-size:11px;"></i> Kembali ke Kursus
                </a>
            </div>
        </div>
    </div>
</div>

@endsection

{{-- below are senippets from related files for reference --}}