@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-3">
            <a href="{{ route('admin.exams.questions') }}" class="text-slate-400 hover:text-blue-600 transition-colors">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
            </a>
            <h2 class="text-2xl font-bold text-slate-800 tracking-tight">Pratinjau Soal</h2>
        </div>
        <a href="{{ url('admin/exams/questions/'.$question->id.'/edit') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-bold hover:bg-blue-700 transition-colors shadow-sm">
            Edit Konten Soal
        </a>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 mb-6">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div>
                <span class="block text-xs font-semibold text-slate-400 uppercase tracking-wider">ID Sistem</span>
                <span class="block text-sm font-mono font-bold text-slate-900 mt-0.5">#{{ $question->id }} <span class="text-xs font-normal text-slate-400">(Old ID: {{ $question->old_id ?? '-' }})</span></span>
            </div>
            <div>
                <span class="block text-xs font-semibold text-slate-400 uppercase tracking-wider">Subject / Materi</span>
                <span class="block text-sm font-bold text-slate-800 mt-0.5">{{ $question->subject->name ?? 'Materi Umum' }}</span>
            </div>
            <div>
                <span class="block text-xs font-semibold text-slate-400 uppercase tracking-wider">Bentuk Tipe</span>
                <span class="inline-block mt-1 px-2 py-0.5 bg-indigo-50 text-indigo-700 rounded text-[10px] font-bold uppercase border border-indigo-100">
                    {{ str_replace('_', ' ', $question->question_type) }}
                </span>
            </div>
            <div>
                <span class="block text-xs font-semibold text-slate-400 uppercase tracking-wider">Tingkat Kesulitan</span>
                <span class="block text-sm font-bold mt-0.5 {{ $question->question_level == 'mudah' ? 'text-emerald-500' : ($question->question_level == 'sedang' ? 'text-amber-500' : 'text-red-500') }}">
                    {{ strtoupper($question->question_level) }}
                </span>
            </div>
        </div>
        
        <div class="border-t border-slate-100 mt-4 pt-4 grid grid-cols-1 md:grid-cols-3 gap-4 text-xs text-slate-500">
            <div><b>Departemen Target:</b> {{ $question->department->name ?? 'Semua Departemen (Global)' }}</div>
            <div><b>Jabatan Target:</b> {{ $question->position->name ?? 'Semua Struktur Jabatan' }}</div>
            <div><b>Kelayakan Kelulusan:</b> Min score <span class="font-bold text-slate-800">{{ $question->passing_grade }}</span> (Durasi: {{ $question->duration }} detik)</div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 sm:p-8">
        <h4 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3 border-b border-slate-100 pb-2">Konten Soal</h4>
        <div class="text-slate-800 text-base font-medium mb-8 leading-relaxed">
            {!! nl2br(e($question->question_text)) !!}
        </div>

        <h4 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">Struktur Kunci & Pilihan</h4>
        
        <div class="space-y-20">
            @if($question->question_type === 'descriptive')
                <div class="p-4 bg-slate-50 border border-slate-200 rounded-xl">
                    <span class="text-xs font-bold text-slate-400 uppercase block mb-1">Panduan Jawaban Kunci Esai:</span>
                    <p class="text-slate-700 text-sm">{!! nl2br(e($question->option_a)) !!}</p>
                </div>
            @elseif($question->question_type === 'true_false')
                @php $correct = is_array($question->correct_answer) ? $question->correct_answer[0] : $question->correct_answer; @endphp
                <div class="space-y-2">
                    <div class="flex items-center p-3 rounded-xl border {{ in_array($correct, ['True','opt_a']) ? 'bg-emerald-50/70 border-emerald-200 text-emerald-900 font-bold' : 'border-slate-100 text-slate-600' }}">
                        <span class="w-6 text-center text-xs font-bold mr-2">✔</span> True (Benar)
                    </div>
                    <div class="flex items-center p-3 rounded-xl border {{ in_array($correct, ['False','opt_b']) ? 'bg-emerald-50/70 border-emerald-200 text-emerald-900 font-bold' : 'border-slate-100 text-slate-600' }}">
                        <span class="w-6 text-center text-xs font-bold mr-2">✔</span> False (Salah)
                    </div>
                </div>
            @else
                <div class="space-y-2">
                    @php $arrKeys = is_array($question->correct_answer) ? $question->correct_answer : [$question->correct_answer]; @endphp
                    @foreach(['A' => 'option_a', 'B' => 'option_b', 'C' => 'option_c', 'D' => 'option_d', 'E' => 'option_e'] as $k => $col)
                        @if(!empty($question->$col))
                            <div class="flex items-center justify-between p-3 rounded-xl border {{ in_array($k, $arrKeys) ? 'bg-emerald-50/70 border-emerald-200 text-emerald-900 font-bold' : 'border-slate-100 text-slate-600' }}">
                                <div class="flex items-center">
                                    <span class="w-6 h-6 rounded-md text-xs font-mono font-bold bg-slate-100 flex items-center justify-center mr-3 {{ in_array($k, $arrKeys) ? 'bg-emerald-500 text-white' : '' }}">{{ $k }}</span>
                                    <span>{{ $question->$col }}</span>
                                </div>
                                @if(in_array($k, $arrKeys))
                                    <span class="text-xs bg-emerald-600 text-white px-2 py-0.5 rounded font-bold uppercase tracking-wider">Kunci</span>
                                @endif
                            </div>
                        @endif
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>
@endsection