@extends('layouts.app')

@section('content')
<div class="max-w-6xl 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.subjects.index') }}" 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 Materi</h2>
        </div>
    </div>

    <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-2xl shadow-md border border-blue-800 p-8 mb-8 flex flex-col md:flex-row items-center justify-between text-white">
        <div>
            <p class="text-blue-200 text-sm font-bold uppercase tracking-widest mb-2">Nama Subject / Materi</p>
            <h3 class="text-3xl font-black">{{ $subject->name }}</h3>
        </div>
        <div class="text-right mt-4 md:mt-0 bg-white/10 px-6 py-4 rounded-xl border border-white/20 backdrop-blur-sm">
            <p class="text-blue-100 text-xs font-bold uppercase tracking-wider mb-1">Total Bank Soal</p>
            <span class="text-4xl font-black">{{ $subject->questions_count ?? $subject->questions->count() }} <span class="text-lg font-medium text-blue-200">Soal</span></span>
        </div>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="p-5 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
            <h4 class="font-bold text-slate-700">Daftar Pertanyaan di Materi Ini</h4>
            <a href="{{ route('admin.exams.questions.create') }}" class="text-sm font-bold text-blue-600 hover:text-blue-800">
                + Tambah Soal Baru
            </a>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm text-slate-600">
                <thead class="bg-white border-b border-slate-200 text-slate-500 text-xs uppercase tracking-wider">
                    <tr>
                        <th class="px-6 py-4 font-bold">Q.ID</th>
                        <th class="px-6 py-4 font-bold">Tipe & Level</th>
                        <th class="px-6 py-4 font-bold">Teks Pertanyaan</th>
                        <th class="px-6 py-4 font-bold text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($subject->questions as $q)
                    <tr class="hover:bg-slate-50 transition-colors">
                        <td class="px-6 py-4 font-mono text-slate-400">#{{ $q->id }}</td>
                        <td class="px-6 py-4">
                            <span class="block text-xs font-bold text-indigo-600 uppercase mb-1">{{ str_replace('_', ' ', $q->question_type) }}</span>
                            <span class="text-[10px] font-bold px-2 py-0.5 rounded {{ $q->question_level == 'mudah' ? 'bg-emerald-100 text-emerald-700' : ($q->question_level == 'sedang' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700') }}">
                                {{ strtoupper($q->question_level) }}
                            </span>
                        </td>
                        <td class="px-6 py-4">
                            <p class="line-clamp-2 text-slate-700 font-medium">{!! strip_tags($q->question_text) !!}</p>
                        </td>
                        <td class="px-6 py-4 text-right whitespace-nowrap">
                            <a href="{{ route('admin.exams.questions.show', $q->id) }}" 
                               class="inline-block px-3 py-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 font-bold text-xs transition-colors" target="_blank">
                                Cek Soal &rarr;
                            </a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="px-6 py-12 text-center">
                            <svg class="w-12 h-12 text-slate-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
                            <p class="text-slate-500 font-medium">Belum ada bank soal yang menggunakan materi ini.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection