@extends('admin.layout')
@section('title', $question->exists ? 'Edit Question' : 'New Question')

@section('content')
<div class="max-w-3xl">
    <a href="{{ route('admin.questions.index') }}" class="text-sm text-slate-500 hover:underline">← Back</a>

    <form method="POST" action="{{ $question->exists ? route('admin.questions.update', $question) : route('admin.questions.store') }}"
          class="bg-white rounded-lg shadow-sm border border-slate-200 p-6 mt-3 space-y-4">
        @csrf
        @if ($question->exists) @method('PUT') @endif

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium mb-1">Category</label>
                <select name="category_id" required class="w-full rounded-md border border-slate-300 px-3 py-2">
                    @foreach ($categories as $c)
                        <option value="{{ $c->id }}" @selected(old('category_id', $question->category_id) == $c->id)>{{ $c->label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Difficulty</label>
                <select name="difficulty" class="w-full rounded-md border border-slate-300 px-3 py-2">
                    @foreach (['easy', 'medium', 'hard'] as $d)
                        <option value="{{ $d }}" @selected(old('difficulty', $question->difficulty) === $d)>{{ ucfirst($d) }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium mb-1">Question Text</label>
            <textarea name="question" rows="2" required class="w-full rounded-md border border-slate-300 px-3 py-2">{{ old('question', $question->question) }}</textarea>
        </div>

        @php $opts = old('options', $question->options ?? ['', '', '', '']); @endphp
        @for ($i = 0; $i < 4; $i++)
            <div class="flex items-center gap-3">
                <label class="flex items-center gap-2 text-sm">
                    <input type="radio" name="correct_index" value="{{ $i }}" @checked(old('correct_index', $question->correct_index ?? 0) == $i) required>
                    <span class="font-medium">{{ chr(65 + $i) }}</span>
                </label>
                <input type="text" name="option_{{ $i }}" value="{{ old('option_' . $i, $opts[$i] ?? '') }}" required
                       placeholder="Option {{ chr(65 + $i) }}"
                       class="flex-1 rounded-md border border-slate-300 px-3 py-2">
            </div>
        @endfor

        <div>
            <label class="block text-sm font-medium mb-1">Explanation (shown after answer)</label>
            <textarea name="explanation" rows="2" class="w-full rounded-md border border-slate-300 px-3 py-2">{{ old('explanation', $question->explanation) }}</textarea>
        </div>

        <label class="flex items-center gap-2">
            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $question->is_active ?? true))>
            <span class="text-sm">Active (available in quizzes)</span>
        </label>

        <div class="flex justify-end pt-4 border-t">
            <button class="bg-slate-900 text-white px-5 py-2 rounded-md">Save</button>
        </div>
    </form>
</div>
@endsection