@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">Detail Pertanyaan</h2>
        </div>
        <a href="{{ url('admin/exams/questions/'.$question->id.'/edit') }}" class="px-4 py-2 bg-blue-50 text-blue-700 rounded-lg text-sm font-bold hover:bg-blue-100 transition-colors">
            Edit 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-4">
            <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">#{{ $question->id }}</span>
            </div>
            <div>
                <span class="block text-xs font-semibold text-slate-400 uppercase">Materi SOP</span>
                <span class="block text-sm font-medium text-slate-900">{{ $question->matrix->title ?? '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->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->level == 'mudah' ? 'text-emerald-500' : ($question->level == 'sedang' ? 'text-amber-500' : 'text-red-500') }}">
                    {{ strtoupper($question->level) }}
                </span>
            </div>
        </div>
        
        <div class="border-t border-slate-100 mt-4 pt-4 flex gap-6">
            <div>
                <span class="block text-xs font-semibold text-slate-400 uppercase">Dikhususkan untuk Departemen:</span>
                <span class="block text-sm text-slate-700">{{ $question->department->name ?? 'Semua Departemen' }}</span>
            </div>
            <div>
                <span class="block text-xs font-semibold text-slate-400 uppercase">Dikhususkan untuk Jabatan:</span>
                <span class="block text-sm text-slate-700">{{ $question->position->name ?? 'Semua Jabatan' }}</span>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6 sm:p-8">
        <h4 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">Isi Pertanyaan</h4>
        
        <div class="prose prose-slate max-w-none text-slate-800 text-lg mb-8">
            {!! nl2br(e($question->question_text)) !!}
        </div>

        <h4 class="text-sm font-bold text-slate-400 uppercase tracking-wider mb-4 border-b border-slate-100 pb-2">Opsi Jawaban & Kunci</h4>
        
        <div class="space-y-3">
            @if($question->type === 'descriptive')
                <div class="p-4 bg-slate-50 border border-slate-200 rounded-xl">
                    <span class="text-xs font-bold text-slate-500 uppercase">Kunci / Panduan Penilaian:</span>
                    <p class="text-slate-800 mt-2">{{ $question->expected_answer ?? 'Tidak ada kata kunci khusus yang diatur.' }}</p>
                </div>
            @else
                <p class="italic text-sm text-slate-500">Tampilan opsi jawaban disesuaikan dengan struktur relasi database opsi Anda.</p>
            @endif
        </div>
    </div>
</div>
@endsection