<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Edit Question') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <form action="{{ route('admin.questions.update', $question) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="mb-4">
                            <x-input-label for="question_set_id" :value="__('Question Set')" />
                            <select id="question_set_id" name="question_set_id" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
                                <option value="">Select a set</option>
                                @foreach($questionSets as $set)
                                    <option value="{{ $set->id }}" {{ old('question_set_id', $question->question_set_id) == $set->id ? 'selected' : '' }}>{{ $set->title }} ({{ $set->cbtClass->name }})</option>
                                @endforeach
                            </select>
                            <x-input-error class="mt-2" :messages="$errors->get('question_set_id')" />
                        </div>

                        <div class="mb-4">
                            <x-input-label for="question_text" :value="__('Question Text')" />
                            <textarea id="question_text" name="question_text" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" rows="3" required>{{ old('question_text', $question->question_text) }}</textarea>
                            <x-input-error class="mt-2" :messages="$errors->get('question_text')" />
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div class="mb-4">
                                <x-input-label for="option_a" :value="__('Option A')" />
                                <x-text-input id="option_a" name="option_a" type="text" class="mt-1 block w-full" :value="old('option_a', $question->option_a)" required />
                                <x-input-error class="mt-2" :messages="$errors->get('option_a')" />
                            </div>
                            <div class="mb-4">
                                <x-input-label for="option_b" :value="__('Option B')" />
                                <x-text-input id="option_b" name="option_b" type="text" class="mt-1 block w-full" :value="old('option_b', $question->option_b)" required />
                                <x-input-error class="mt-2" :messages="$errors->get('option_b')" />
                            </div>
                            <div class="mb-4">
                                <x-input-label for="option_c" :value="__('Option C')" />
                                <x-text-input id="option_c" name="option_c" type="text" class="mt-1 block w-full" :value="old('option_c', $question->option_c)" required />
                                <x-input-error class="mt-2" :messages="$errors->get('option_c')" />
                            </div>
                            <div class="mb-4">
                                <x-input-label for="option_d" :value="__('Option D')" />
                                <x-text-input id="option_d" name="option_d" type="text" class="mt-1 block w-full" :value="old('option_d', $question->option_d)" required />
                                <x-input-error class="mt-2" :messages="$errors->get('option_d')" />
                            </div>
                        </div>

                        <div class="mb-4">
                            <x-input-label for="correct_answer" :value="__('Correct Answer')" />
                            <select id="correct_answer" name="correct_answer" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" required>
                                <option value="">Select correct option</option>
                                <option value="A" {{ old('correct_answer', $question->correct_answer) == 'A' ? 'selected' : '' }}>A</option>
                                <option value="B" {{ old('correct_answer', $question->correct_answer) == 'B' ? 'selected' : '' }}>B</option>
                                <option value="C" {{ old('correct_answer', $question->correct_answer) == 'C' ? 'selected' : '' }}>C</option>
                                <option value="D" {{ old('correct_answer', $question->correct_answer) == 'D' ? 'selected' : '' }}>D</option>
                            </select>
                            <x-input-error class="mt-2" :messages="$errors->get('correct_answer')" />
                        </div>

                        <div class="flex items-center gap-4">
                            <x-primary-button>{{ __('Update Question') }}</x-primary-button>
                            <a href="{{ route('admin.questions.index') }}" class="text-sm text-gray-600 hover:text-gray-900">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
