@extends('layouts.app')

@section('title', 'Tugas Siswa')

@section('content')
<style>
    /* ═══════════════════════════════════════════════
     *  Standarisasi font & judul kartu — selaras dengan
     *  Dashboard (.sd), Materi, Tagihan, dan Ujian.
     *  Bootstrap menimpa font pada heading, jadi 'Plus
     *  Jakarta Sans' dipaksa di seluruh halaman ini.
     * ═══════════════════════════════════════════════ */
    .student-tasks-page,
    .student-tasks-page h1, .student-tasks-page h2, .student-tasks-page h3, .student-tasks-page h4,
    .student-tasks-page p, .student-tasks-page span, .student-tasks-page a, .student-tasks-page label,
    .student-tasks-page button, .student-tasks-page input, .student-tasks-page select,
    .student-tasks-page textarea, .student-tasks-page td, .student-tasks-page th {
        font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif !important;
    }

    /* Judul kartu tugas — samakan ukuran & bobot dengan kartu Materi/Dashboard. */
    .student-tasks-page .sp-card h2 {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        letter-spacing: -0.01em !important;
        line-height: 1.25 !important;
    }
    .student-tasks-page .sp-card h3 {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
    }
</style>
<div class="student-tasks-page mx-auto max-w-6xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><a href="{{ route('student.dashboard') }}" class="text-blue-700">Ruang Belajar</a><i class="bi bi-chevron-right" aria-hidden="true"></i>Tugas</p>

            <h1 class="pkbm-dashboard__title">Tugas Siswa</h1>
            <p class="pkbm-dashboard__subtitle">{{ $student->className }}{{ $period ? ' · '.$period->tahun_pelajaran.' · Semester '.$period->semester : '' }}</p>
        </div>
    </header>
    @if (session('status'))<div role="status" class="settings-notice settings-notice--success">{{ session('status') }}</div>@endif
    @if ($errors->any())<div role="alert" class="settings-notice settings-notice--error">{{ $errors->first() }}</div>@endif
    @if (! $period)
        <p class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Periode akademik aktif belum diatur.</p>
    @elseif ($tasks->isEmpty())
        <p class="rounded-xl border border-blue-200 bg-blue-50 p-4 text-sm text-blue-900">Belum ada tugas untuk kelas Anda.</p>
    @else
        <section class="grid gap-4 lg:grid-cols-2">
            @foreach ($tasks as $task)
                @php $expired = $task->deadline && now()->gt($task->deadline); @endphp
                <article class="sp-card p-5">
                    <div class="flex flex-wrap items-start justify-between gap-3">
                        <div><span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-bold text-blue-700">{{ $task->nama_mapel ?: 'Mata pelajaran' }}</span><h2 class="mt-3 text-lg font-bold text-slate-900">{{ $task->judul }}</h2><p class="mt-1 text-xs text-slate-500">{{ $task->judul_materi ?: 'Tugas umum' }} · Dibuat {{ $task->tanggal_upload }}</p></div>
                        @if ($task->answer_id)<span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-800">Sudah dikumpulkan</span>@elseif ($expired)<span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-600">Batas waktu lewat</span>@else<span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-bold text-amber-800">Belum dikumpulkan</span>@endif
                    </div>
                    <p class="mt-3 text-sm text-slate-600">Batas waktu: <strong>{{ $task->deadline ?: 'Tanpa batas waktu' }}</strong></p>
                    @if ($task->tipe === 'file' && $task->file_path)
                        <a class="sp-btn-secondary mt-3" href="{{ route('kbm.file', ['kind' => 'tugas', 'id' => $task->id]) }}"><i class="bi bi-download" aria-hidden="true"></i>Unduh instruksi</a>
                    @endif
                    @if ($task->konten)
                        @if ($task->tipe === 'embed')
                            <a class="mt-3 block break-all text-sm text-blue-700 underline" href="{{ $task->konten }}" target="_blank" rel="noopener noreferrer">Buka tautan tugas</a>
                        @elseif ($task->tipe === 'html')
                            <div class="prose prose-sm mt-3 max-w-none rounded-xl bg-slate-50 p-4 text-slate-700">{!! $task->safe_html !!}</div>
                        @else
                            <div class="mt-3 whitespace-pre-line rounded-xl bg-slate-50 p-4 text-sm text-slate-700">{{ $task->konten }}</div>
                        @endif
                    @endif
                    @if ($task->answer_id)
                        <div class="mt-4 rounded-xl border border-slate-200 p-4">
                            <h3 class="text-sm font-bold text-slate-800">Jawaban Anda</h3>
                            <p class="mt-2 whitespace-pre-line text-sm text-slate-600">{{ $task->jawaban_teks ?: 'Tidak ada jawaban teks.' }}</p>
                            @if ($task->file_jawaban)<a class="mt-2 inline-block text-sm text-blue-700 underline" href="{{ route('kbm.file', ['kind' => 'jawaban', 'id' => $task->answer_id]) }}">Unduh file yang dikumpulkan</a>@endif
                            @if ($task->nilai !== null)<p class="mt-3 text-sm font-bold text-emerald-700">Nilai: {{ $task->nilai }}</p>@endif
                            @if ($task->catatan)<p class="mt-1 text-sm text-slate-600">Catatan guru: {{ $task->catatan }}</p>@endif
                        </div>
                    @endif
                    @if (! $expired && $task->nilai === null)
                        <form method="POST" action="{{ route('student.learning.tasks.submit', $task->id) }}" enctype="multipart/form-data" class="mt-4 space-y-3 border-t border-slate-100 pt-4">
                            @csrf
                            <div><label class="sp-form-label" for="answer-{{ $task->id }}">Jawaban teks</label><textarea class="sp-form-control px-3 py-2 text-sm" id="answer-{{ $task->id }}" name="jawaban_teks" rows="3">{{ $task->jawaban_teks }}</textarea></div>
                            <div><label class="sp-form-label" for="answer-file-{{ $task->id }}">Lampiran (opsional, maks. 10 MB)</label><input class="sp-form-control px-3 py-2 text-sm" id="answer-file-{{ $task->id }}" name="file" type="file"></div>
                            <button class="sp-btn-primary" type="submit"><i class="bi bi-send" aria-hidden="true"></i>{{ $task->answer_id ? 'Perbarui jawaban' : 'Kumpulkan tugas' }}</button>
                        </form>
                    @endif
                </article>
            @endforeach
        </section>
    @endif
</div>
@endsection