@extends('layouts.app')

@section('title', 'Kerjakan Evaluasi')

@section('content')
<div class="mx-auto max-w-4xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><a class="text-blue-700" href="{{ route('student.learning.evaluations') }}">Evaluasi</a><i class="bi bi-chevron-right" aria-hidden="true"></i>{{ $material->judul }}</p>
            <h1 class="pkbm-dashboard__title">{{ $material->judul }}</h1>
            <p class="pkbm-dashboard__subtitle">{{ $student->className }} · {{ $questions->count() }} soal</p>
        </div>
    </header>
    @if ($completed)
        <div role="status" class="rounded-xl border border-emerald-200 bg-emerald-50 p-5 text-emerald-900">
            <strong>Evaluasi sudah dikumpulkan.</strong>
            <p class="mt-1 text-sm">Jawaban Anda telah tersimpan dan evaluasi ini tidak dapat dikerjakan ulang.</p>
            @if ($evaluationStatus?->nilai !== null)
                <p class="mt-2 text-lg font-bold">Nilai: {{ number_format((float) $evaluationStatus->nilai, 2, ',', '.') }}</p>
            @else
                <p class="mt-2 text-sm">Nilai esai sedang diperiksa oleh guru.</p>
            @endif
            @if ($gradedAnswers->isNotEmpty())
                <div class="mt-4 space-y-3">
                    @foreach ($gradedAnswers as $answer)
                        <div class="rounded-lg border border-emerald-200 bg-white p-3 text-sm">
                            <p class="font-semibold">{{ $answer->pertanyaan }}</p>
                            <p class="mt-1">Nilai: {{ $answer->nilai === null ? 'Belum dinilai' : number_format((float) $answer->nilai, 2, ',', '.') .' / '.number_format((float) $answer->bobot, 2, ',', '.') }}</p>
                            @if ($answer->catatan)<p class="mt-1 text-slate-600">Catatan guru: {{ $answer->catatan }}</p>@endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    @else
        @if ($errors->any())<div role="alert" class="settings-notice settings-notice--error">{{ $errors->first() }}</div>@endif
        <form method="POST" action="{{ route('student.learning.evaluations.submit', ['subjectId' => request()->route('subjectId'), 'materialId' => $material->id]) }}" class="space-y-4">
            @csrf
            @foreach ($questions as $question)
                <fieldset class="sp-card space-y-3 p-5">
                    <legend class="text-sm font-bold text-blue-700">Soal {{ $loop->iteration }} · {{ strtoupper($question->tipe_soal) }} · {{ number_format((float) $question->bobot, 2, ',', '.') }} poin</legend>
                    <p class="whitespace-pre-line font-semibold text-slate-900">{{ $question->pertanyaan }}</p>
                    @if (in_array($question->tipe_soal, ['pg', 'pg_banyak'], true))
                        @foreach (['a', 'b', 'c', 'd', 'e'] as $option)
                            @if ($question->{'opsi_'.$option})
                                <label class="flex cursor-pointer items-start gap-3 rounded-lg border border-slate-200 p-3 text-sm hover:bg-slate-50">
                                    <input class="mt-1" type="{{ $question->tipe_soal === 'pg' ? 'radio' : 'checkbox' }}" name="jawaban[{{ $question->id }}]{{ $question->tipe_soal === 'pg_banyak' ? '[]' : '' }}" value="{{ $option }}">
                                    <span><strong>{{ strtoupper($option) }}.</strong> {{ $question->{'opsi_'.$option} }}</span>
                                </label>
                            @endif
                        @endforeach
                    @elseif ($question->tipe_soal === 'menjodohkan')
                        @if ($question->structured_items !== [])
                            @php($matchingChoices = collect($question->structured_items)->pluck('answer')->unique()->shuffle()->values())
                            <div class="overflow-x-auto rounded-xl border border-slate-200">
                                <table class="w-full text-left text-sm">
                                    <thead class="bg-slate-50 text-xs font-semibold uppercase text-slate-500"><tr><th class="px-3 py-2">Soal / Istilah</th><th class="px-3 py-2">Pasangan jawaban</th></tr></thead>
                                    <tbody class="divide-y divide-slate-100">
                                        @foreach ($question->structured_items as $index => $item)
                                            <tr>
                                                <td class="px-3 py-2 text-slate-700">{{ $item['prompt'] }}</td>
                                                <td class="px-3 py-2"><label class="sr-only" for="answer-{{ $question->id }}-{{ $index }}">Pilih pasangan untuk {{ $item['prompt'] }}</label><select class="sp-form-control px-3 py-2 text-sm" id="answer-{{ $question->id }}-{{ $index }}" name="jawaban[{{ $question->id }}][{{ $index }}]" required><option value="">Pilih pasangan</option>@foreach ($matchingChoices as $choice)<option value="{{ $choice }}">{{ $choice }}</option>@endforeach</select></td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <label class="sp-form-label" for="answer-{{ $question->id }}">Tuliskan pasangan yang sesuai (satu pasangan per baris, format kiri=kanan)</label>
                            <textarea class="sp-form-control px-3 py-2 text-sm" id="answer-{{ $question->id }}" name="jawaban[{{ $question->id }}]" rows="4" placeholder="Contoh: Istilah 1=Arti 1"></textarea>
                        @endif
                        @if ($question->pasangan && $question->structured_items === [])
                            <div class="rounded-lg bg-slate-50 p-3 text-xs text-slate-600"><strong>Daftar pasangan:</strong><ul class="mt-1 list-disc pl-5">@foreach (explode("\n", $question->pasangan) as $pair)<li>{{ trim(explode('=', $pair, 2)[0] ?? '') }}</li>@endforeach</ul></div>
                        @endif
                    @elseif ($question->tipe_soal === 'tabel')
                        <div class="overflow-x-auto rounded-xl border border-slate-200">
                            <table class="w-full text-left text-sm">
                                <thead class="bg-slate-50 text-xs font-semibold uppercase text-slate-500"><tr><th class="px-3 py-2">Pernyataan</th><th class="px-3 py-2">Jawaban</th></tr></thead>
                                <tbody class="divide-y divide-slate-100">
                                    @foreach ($question->structured_items as $index => $item)
                                        <tr>
                                            <td class="px-3 py-2 text-slate-700">{{ $item['statement'] }}</td>
                                            <td class="px-3 py-2"><label class="sr-only" for="answer-{{ $question->id }}-{{ $index }}">Jawaban untuk {{ $item['statement'] }}</label><select class="sp-form-control px-3 py-2 text-sm" id="answer-{{ $question->id }}-{{ $index }}" name="jawaban[{{ $question->id }}][{{ $index }}]" required><option value="">Pilih jawaban</option>@foreach (['Benar', 'Salah', 'Ya', 'Tidak'] as $choice)<option value="{{ $choice }}">{{ $choice }}</option>@endforeach</select></td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <label class="sp-form-label" for="answer-{{ $question->id }}">Jawaban esai</label>
                        <textarea class="sp-form-control px-3 py-2 text-sm" id="answer-{{ $question->id }}" name="jawaban[{{ $question->id }}]" rows="5"></textarea>
                    @endif
                </fieldset>
            @endforeach
            <button type="submit" class="sp-btn-primary" onclick="return confirm('Kirim semua jawaban dan selesaikan evaluasi?')"><i class="bi bi-send" aria-hidden="true"></i>Kumpulkan semua jawaban</button>
        </form>
    @endif
</div>
@endsection