@extends('admin.layout')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Create New Question</h1>
            <p class="text-gray-600">For test: {{ $test->title }}</p>
        </div>
        <a href="{{ route('admin.questions.index', $test) }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
            <i class="fas fa-arrow-left mr-2"></i> Back to Questions
        </a>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <form action="{{ route('admin.questions.store', $test) }}" method="POST" id="questionForm">
            @csrf
            
            <div class="space-y-6">
                <!-- Question Text -->
                <div>
                    <label for="question_text" class="block text-sm font-medium text-gray-700 mb-1">Question Text *</label>
                    <textarea name="question_text" id="question_text" rows="4"
                              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                              required placeholder="Enter the question text">{{ old('question_text') }}</textarea>
                    @error('question_text')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Options -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Options *</label>
                    <div id="options-container" class="space-y-2">
                        @for($i = 0; $i < max(2, count(old('options', []))); $i++)
                        <div class="flex items-center option-item">
                            <input type="text" name="options[]" 
                                   value="{{ old('options.'.$i) }}"
                                   class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="Option {{ $i + 1 }}" required>
                            <button type="button" class="ml-2 text-red-600 hover:text-red-800 remove-option {{ $i < 2 ? 'hidden' : '' }}">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        @endfor
                    </div>
                    <button type="button" id="add-option" class="mt-2 bg-gray-600 hover:bg-gray-700 text-white px-3 py-1 rounded text-sm">
                        <i class="fas fa-plus mr-1"></i> Add Option
                    </button>
                    @error('options')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Correct Answer -->
                <div>
                    <label for="correct_answer" class="block text-sm font-medium text-gray-700 mb-1">Correct Answer *</label>
                    <select name="correct_answer" id="correct_answer" 
                            class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                            required>
                        <option value="">Select correct option</option>
                        @for($i = 0; $i < max(2, count(old('options', []))); $i++)
                        <option value="{{ $i }}" {{ old('correct_answer') == $i ? 'selected' : '' }}>
                            Option {{ $i + 1 }}
                        </option>
                        @endfor
                    </select>
                    @error('correct_answer')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Points -->
                    <div>
                        <label for="points" class="block text-sm font-medium text-gray-700 mb-1">Points *</label>
                        <input type="number" name="points" id="points" 
                               value="{{ old('points', 1) }}"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               min="1" required>
                        @error('points')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Difficulty -->
                    <div>
                        <label for="difficulty" class="block text-sm font-medium text-gray-700 mb-1">Difficulty *</label>
                        <select name="difficulty" id="difficulty" 
                                class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                required>
                            <option value="easy" {{ old('difficulty') == 'easy' ? 'selected' : '' }}>Easy</option>
                            <option value="medium" {{ old('difficulty') == 'medium' ? 'selected' : '' }}>Medium</option>
                            <option value="hard" {{ old('difficulty') == 'hard' ? 'selected' : '' }}>Hard</option>
                        </select>
                        @error('difficulty')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Time Estimate -->
                    <div>
                        <label for="time_estimate" class="block text-sm font-medium text-gray-700 mb-1">Time Estimate (seconds)</label>
                        <input type="number" name="time_estimate" id="time_estimate" 
                               value="{{ old('time_estimate') }}"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               min="10" placeholder="Optional">
                        @error('time_estimate')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Explanation -->
                <div>
                    <label for="explanation" class="block text-sm font-medium text-gray-700 mb-1">Explanation</label>
                    <textarea name="explanation" id="explanation" rows="3"
                              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                              placeholder="Optional explanation for the answer">{{ old('explanation') }}</textarea>
                    @error('explanation')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Image URL -->
                <div>
                    <label for="image_url" class="block text-sm font-medium text-gray-700 mb-1">Image URL</label>
                    <input type="url" name="image_url" id="image_url" 
                           value="{{ old('image_url') }}"
                           class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                           placeholder="https://example.com/image.jpg">
                    @error('image_url')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            
            <div class="flex justify-end space-x-4 mt-8">
                <a href="{{ route('admin.questions.index', $test) }}" 
                   class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition duration-200">
                    Cancel
                </a>
                <button type="submit" 
                        class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition duration-200">
                    Create Question
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const optionsContainer = document.getElementById('options-container');
    const addOptionBtn = document.getElementById('add-option');
    const correctAnswerSelect = document.getElementById('correct_answer');

    // Add new option
    addOptionBtn.addEventListener('click', function() {
        const optionCount = optionsContainer.children.length;
        const newOption = document.createElement('div');
        newOption.className = 'flex items-center option-item';
        newOption.innerHTML = `
            <input type="text" name="options[]" 
                   class="flex-1 border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                   placeholder="Option ${optionCount + 1}" required>
            <button type="button" class="ml-2 text-red-600 hover:text-red-800 remove-option">
                <i class="fas fa-times"></i>
            </button>
        `;
        optionsContainer.appendChild(newOption);
        
        // Add option to correct answer select
        const newOptionElement = document.createElement('option');
        newOptionElement.value = optionCount;
        newOptionElement.textContent = `Option ${optionCount + 1}`;
        correctAnswerSelect.appendChild(newOptionElement);
        
        // Show remove buttons if more than 2 options
        if (optionCount + 1 >= 2) {
            document.querySelectorAll('.remove-option').forEach(btn => btn.classList.remove('hidden'));
        }
    });

    // Remove option
    optionsContainer.addEventListener('click', function(e) {
        if (e.target.closest('.remove-option')) {
            const optionItem = e.target.closest('.option-item');
            const optionIndex = Array.from(optionsContainer.children).indexOf(optionItem);
            
            if (optionsContainer.children.length > 2) {
                optionItem.remove();
                
                // Update correct answer select
                updateCorrectAnswerSelect();
                
                // Hide remove buttons if only 2 options left
                if (optionsContainer.children.length <= 2) {
                    document.querySelectorAll('.remove-option').forEach(btn => btn.classList.add('hidden'));
                }
            }
        }
    });

    function updateCorrectAnswerSelect() {
        // Clear and rebuild correct answer options
        correctAnswerSelect.innerHTML = '<option value="">Select correct option</option>';
        optionsContainer.querySelectorAll('input[name="options[]"]').forEach((input, index) => {
            const option = document.createElement('option');
            option.value = index;
            option.textContent = `Option ${index + 1}`;
            correctAnswerSelect.appendChild(option);
        });
        
        // Reset selection
        correctAnswerSelect.value = '';
    }

    // Form validation
    document.getElementById('questionForm').addEventListener('submit', function(e) {
        const options = optionsContainer.querySelectorAll('input[name="options[]"]');
        const correctAnswer = correctAnswerSelect.value;
        
        if (correctAnswer === '' || correctAnswer >= options.length) {
            e.preventDefault();
            alert('Please select a valid correct answer.');
        }
    });
});
</script>
@endsection