@extends('layouts.app')

@section('title', 'Kelola Soal Ujian')

@section('content')
<div class="space-y-4 md:space-y-6">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <div>
            <h1 class="text-xl md:text-2xl font-bold text-gray-800">Kelola Soal Ujian</h1>
            <p class="text-gray-500 text-sm">{{ $exam->title }} - {{ $exam->course->name }}</p>
        </div>
        <a href="{{ route('dosen.exams.index') }}" class="text-gray-600 hover:text-gray-800 text-sm font-medium"><i class="fas fa-arrow-left mr-1"></i>Kembali</a>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-4 md:px-6 py-3 md:py-4 border-b border-gray-100">
            <h2 class="font-semibold text-sm md:text-base">Soal Terpilih ({{ $exam->questions->count() }})</h2>
        </div>
        <div class="divide-y divide-gray-100">
            @forelse($exam->questions as $q)
                <div class="px-4 md:px-6 py-3 md:py-4 flex justify-between items-start gap-3">
                    <div class="min-w-0">
                        <p class="font-medium text-sm">{{ $loop->iteration }}. {{ Str::limit($q->question, 100) }}</p>
                        <p class="text-xs text-gray-500 mt-1">{{ str_replace('_', ' ', $q->type) }} | Bobot: {{ $q->point }}</p>
                    </div>
                </div>
            @empty
                <div class="px-4 md:px-6 py-8 text-center text-gray-500 text-sm">Belum ada soal dipilih.</div>
            @endforelse
        </div>
    </div>

    @if($availableQuestions->count())
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 md:p-6">
        <h2 class="font-semibold mb-3 md:mb-4 text-sm md:text-base">Tambah Soal dari Bank</h2>
        <form action="{{ route('dosen.exams.assignQuestions', $exam) }}" method="POST">
            @csrf
            <div class="space-y-2 max-h-80 md:max-h-96 overflow-y-auto mb-4">
                @foreach($availableQuestions as $q)
                <label class="flex items-start gap-3 p-3 border rounded-xl hover:bg-gray-50 cursor-pointer transition active:scale-[0.99]">
                    <input type="checkbox" name="question_ids[]" value="{{ $q->id }}" class="mt-1 rounded text-blue-600 focus:ring-blue-500 w-4 h-4">
                    <div class="min-w-0">
                        <p class="text-sm font-medium">{{ $q->question }}</p>
                        <p class="text-xs text-gray-500 mt-1">{{ str_replace('_', ' ', $q->type) }} | Bobot: {{ $q->point }}</p>
                    </div>
                </label>
                @endforeach
            </div>
            <button type="submit" class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-2.5 rounded-xl hover:from-blue-700 hover:to-indigo-700 transition text-sm font-medium shadow-lg shadow-blue-200 active:scale-[0.98]">
                <i class="fas fa-plus mr-2"></i> Tambahkan ke Ujian
            </button>
        </form>
    </div>
    @endif
</div>
@endsection