@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>
        <div class="space-x-2">
            <a href="{{ url('admin/exams/questions/'.$question->id.'/edit') }}" class="px-4 py-2 bg-amber-500 text-white rounded-lg text-sm font-bold hover:bg-amber-600 shadow-sm transition-colors">Edit</a>
        </div>
    </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">Q.ID</span>
                <span class="block text-sm font-mono font-bold text-slate-900 mt-1">#{{ $question->id }} <span class="font-normal text-slate-400">(Old: {{ $question->old_id ?? '-' }})</span></span>
            </div>
            <div>
                <span class="block text-xs font-semibold text-slate-400 uppercase">Materi</span>
                <span class="block text-sm font-bold text-slate-800 mt-1">{{ $question->subject->name ?? 'Umum' }}</span>
            </div>
            <div>
                <span class="block text-xs font-semibold text-slate-400 uppercase">Tipe Soal</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">Level</span>
                <span class="block text-sm font-bold mt-1 {{ $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:</b> {{ $question->department->name ?? 'Global' }}</div>
            <div><b>Posisi:</b> {{ $question->position->name ?? 'Global' }}</div>
            <div><b>Kriteria:</b> PG: {{ $question->passing_grade }} | Durasi: {{ $question->duration }} dtk</div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 sm:p-8">
        <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-3">
            @php 
                $ans = $question->correct_answer;
                $arrKeys = is_string($ans) ? json_decode($ans, true) : (is_array($ans) ? $ans : [$ans]);
                if(!is_array($arrKeys)) $arrKeys = [];
            @endphp

            @if($question->question_type === 'descriptive')
                <div class="p-4 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-700">
                    {!! nl2br(e($question->option_a)) !!}
                </div>
            @elseif($question->question_type === 'true_false')
                <div class="p-3 rounded-xl border {{ in_array('True', $arrKeys) || in_array('opt_a', $arrKeys) ? 'bg-emerald-50 border-emerald-200 font-bold text-emerald-900' : 'border-slate-100 text-slate-600' }}">True (Benar)</div>
                <div class="p-3 rounded-xl border {{ in_array('False', $arrKeys) || in_array('opt_b', $arrKeys) ? 'bg-emerald-50 border-emerald-200 font-bold text-emerald-900' : 'border-slate-100 text-slate-600' }}">False (Salah)</div>
            @else
                @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) || in_array($col, $arrKeys) ? 'bg-emerald-50 border-emerald-200 text-emerald-900 font-bold shadow-sm' : 'border-slate-100 text-slate-600 bg-slate-50' }}">
                            <div class="flex items-center">
                                <span class="w-7 h-7 rounded-md text-xs font-mono font-bold flex items-center justify-center mr-3 {{ in_array($k, $arrKeys) || in_array($col, $arrKeys) ? 'bg-emerald-500 text-white' : 'bg-slate-200 text-slate-500' }}">{{ $k }}</span>
                                <span>{{ $question->$col }}</span>
                            </div>
                            @if(in_array($k, $arrKeys) || in_array($col, $arrKeys))
                                <span class="text-[10px] bg-emerald-600 text-white px-2 py-1 rounded font-bold uppercase tracking-widest">Kunci</span>
                            @endif
                        </div>
                    @endif
                @endforeach
            @endif
        </div>
        
        <div class="mt-8 pt-4 border-t border-slate-100 text-xs text-slate-400 text-right">
            Dibuat oleh: <span class="font-semibold">{{ $question->creator->first_name ?? 'ID '.$question->created_by }}</span> pada {{ $question->created_at->format('d M Y') }}
        </div>
    </div>
</div>
@endsection