@extends('layouts.app')

@section('title', 'Add Question to ' . $topic->name)

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header with Topic Info -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <a href="{{ route('topics.index') }}" 
                       class="inline-flex items-center text-sm font-medium text-gray-500 hover:text-gray-700 mr-4">
                        <svg class="w-4 h-4 mr-1" 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>
                        Back to Topics
                    </a>
                </div>
            </div>
        </div>

        <!-- Add this near the top of your topics.questions.create blade, after the topic context card -->

<div class="mb-6 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-lg shadow-lg p-4">
    <div class="flex items-center justify-between">
        <div class="flex items-center text-white">
            <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
            </svg>
            <div>
                <h3 class="font-semibold">Need to add many questions at once?</h3>
                <p class="text-sm text-indigo-100">Use our CSV bulk upload feature to import multiple questions quickly</p>
            </div>
        </div>
        <a href="{{ route('topics.questions.bulk-upload', $topic->id) }}" 
           class="px-4 py-2 bg-white text-purple-600 rounded-lg hover:bg-purple-50 transition font-medium whitespace-nowrap">
            Bulk Upload
        </a>
    </div>
</div>

        <!-- Topic Context Card -->
        <div class="mb-6 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-lg p-6 text-white">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-blue-100 mb-1">Adding questions to:</p>
                    <h2 class="text-2xl font-bold">{{ $topic->name }}</h2>
                    <p class="text-blue-100 mt-1">{{ $topic->description }}</p>
                    <div class="mt-3 flex items-center gap-4">
                        <span class="inline-flex items-center text-sm">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"></path>
                            </svg>
                            {{ $topic->questions()->count() }} Questions
                        </span>
                        <span class="inline-flex items-center text-sm">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                            </svg>
                            {{ $topic->subject->name ?? 'N/A' }}
                        </span>
                    </div>
                </div>
                <div>
                    <a href="{{ route('topics.show', $topic->id) }}" 
                       class="inline-flex items-center px-4 py-2 bg-white text-blue-600 rounded-lg hover:bg-blue-50 transition">
                        View All Questions
                    </a>
                </div>
            </div>
        </div>

        <!-- Success Message -->
        @if(session('success'))
            <div class="mb-6 bg-green-50 border border-green-200 rounded-lg p-4">
                <div class="flex items-center">
                    <svg class="w-5 h-5 text-green-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <div>
                        <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Form Card -->
        <div class="bg-white shadow-sm rounded-lg overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h2 class="text-lg font-medium text-gray-900">Question Information</h2>
                <p class="mt-1 text-sm text-gray-500">Create a new multiple choice question for this topic</p>
            </div>

            <form action="{{ route('topics.questions.store', $topic->id) }}" method="POST" class="p-6" id="questionForm">
                @csrf

                <!-- Question -->
                <div class="space-y-2 mb-6">
                    <label for="question" class="block text-sm font-medium text-gray-700">
                        Question <span class="text-red-500">*</span>
                    </label>
                    <div class="relative">
                        <textarea id="question" 
                                  name="question" 
                                  rows="4"
                                  placeholder="Enter the question (e.g., What is the capital of France?)"
                                  class="block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out @error('question') border-red-300 focus:ring-red-500 focus:border-red-500 @enderror"
                                  required>{{ old('question') }}</textarea>
                        <div class="absolute bottom-3 right-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                    </div>
                    
                    @error('question')
                        <div class="flex items-center mt-1 text-sm text-red-600">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            {{ $message }}
                        </div>
                    @enderror
                    
                    <p class="text-xs text-gray-500 mt-1">
                        Write a clear and concise question
                    </p>
                </div>

                <!-- Options Section -->
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-gray-900">Answer Options</h3>
                        <span class="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">Select one correct answer</span>
                    </div>

                    <div class="space-y-4" id="optionsContainer">
                        @for($i = 0; $i < 4; $i++)
                        <div class="option-card p-4 border border-gray-200 rounded-lg hover:border-blue-300 transition-colors duration-150" data-index="{{ $i }}">
                            <div class="flex items-start space-x-4">
                                <!-- Option Number -->
                                <div class="flex-shrink-0">
                                    <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
                                        <span class="text-sm font-medium text-blue-700">
                                            {{ chr(65 + $i) }}
                                        </span>
                                    </div>
                                </div>
                                
                                <!-- Option Input -->
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        Option {{ chr(65 + $i) }} <span class="text-red-500">*</span>
                                    </label>
                                    <input type="text" 
                                           name="options[{{ $i }}][text]" 
                                           value="{{ old("options.$i.text") }}"
                                           placeholder="Enter option text..."
                                           class="option-input block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-150 ease-in-out"
                                           required>
                                    @error("options.$i.text")
                                        <div class="flex items-center mt-1 text-sm text-red-600">
                                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                            </svg>
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                                
                                <!-- Correct Option Radio -->
                                <div class="flex-shrink-0">
                                    <div class="flex items-center h-14">
                                        <label class="flex items-center cursor-pointer">
                                            <input type="radio" 
                                                   name="correct_option" 
                                                   value="{{ $i }}"
                                                   {{ old('correct_option') == $i ? 'checked' : '' }}
                                                   class="correct-radio h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300"
                                                   required>
                                            <span class="ml-2 text-sm font-medium text-gray-700">
                                                Correct
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endfor
                    </div>
                    
                    @error('correct_option')
                        <div class="flex items-center mt-3 text-sm text-red-600">
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                <!-- Form Validation Indicator -->
                <div id="validationIndicator" class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg hidden">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-blue-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <div>
                            <p class="text-sm font-medium text-blue-800">Ready to create question</p>
                            <p class="text-sm text-blue-700 mt-1">All required fields are filled and a correct answer is selected</p>
                        </div>
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="mt-8 pt-6 border-t border-gray-200 flex flex-col-reverse sm:flex-row sm:justify-between">
                    <a href="{{ route('topics.index') }}" 
                       class="mt-3 sm:mt-0 inline-flex justify-center items-center px-4 py-3 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out">
                        <svg class="w-4 h-4 mr-2" 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>
                        Back to Topics
                    </a>
                    
                    <div class="flex flex-col-reverse sm:flex-row sm:space-x-3">
                        <button type="submit" 
                                name="action"
                                value="save_and_add"
                                id="submitBtn"
                                class="mt-3 sm:mt-0 inline-flex justify-center items-center px-6 py-3 border border-blue-600 text-sm font-medium rounded-lg shadow-sm text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                            </svg>
                            Save & Add Another
                        </button>
                        
                        <button type="submit" 
                                name="action"
                                value="save_and_exit"
                                class="inline-flex justify-center items-center px-6 py-3 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                            Save & Finish
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- Help Section -->
        <div class="mt-8 bg-blue-50 rounded-lg p-6">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-blue-800">Quick Tips</h3>
                    <div class="mt-2 text-sm text-blue-700">
                        <ul class="list-disc list-inside space-y-1">
                            <li>Keep questions clear and unambiguous</li>
                            <li>Use plausible distractors for incorrect options</li>
                            <li>Vary the position of correct answers (not always A)</li>
                            <li>Click "Save & Add Another" to quickly add multiple questions</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const questionTextarea = document.getElementById('question');
    const optionInputs = document.querySelectorAll('.option-input');
    const correctOptionRadios = document.querySelectorAll('.correct-radio');
    const optionCards = document.querySelectorAll('.option-card');
    const validationIndicator = document.getElementById('validationIndicator');
    const submitBtn = document.getElementById('submitBtn');
    const form = document.getElementById('questionForm');

    function validateForm() {
        const questionFilled = questionTextarea.value.trim() !== '';
        
        let allOptionsFilled = true;
        let correctOptionSelected = false;

        optionInputs.forEach(input => {
            if (input.value.trim() === '') {
                allOptionsFilled = false;
            }
        });

        correctOptionRadios.forEach(radio => {
            if (radio.checked) {
                correctOptionSelected = true;
            }
        });

        const isValid = questionFilled && allOptionsFilled && correctOptionSelected;

        if (isValid) {
            validationIndicator.classList.remove('hidden');
            document.querySelectorAll('button[type="submit"]').forEach(btn => {
                btn.disabled = false;
            });
        } else {
            validationIndicator.classList.add('hidden');
            document.querySelectorAll('button[type="submit"]').forEach(btn => {
                btn.disabled = true;
            });
        }

        return isValid;
    }

    function updateOptionCards() {
        optionCards.forEach((card, index) => {
            const radio = card.querySelector('.correct-radio');
            if (radio.checked) {
                card.classList.add('bg-green-50', 'border-green-300');
                card.classList.remove('bg-white', 'border-gray-200');
                
                const numberDiv = card.querySelector('.h-8');
                numberDiv.classList.remove('bg-blue-100');
                numberDiv.classList.add('bg-green-100');
                
                const numberSpan = numberDiv.querySelector('span');
                numberSpan.classList.remove('text-blue-700');
                numberSpan.classList.add('text-green-700');
            } else {
                card.classList.remove('bg-green-50', 'border-green-300');
                card.classList.add('bg-white', 'border-gray-200');
                
                const numberDiv = card.querySelector('.h-8');
                numberDiv.classList.remove('bg-green-100');
                numberDiv.classList.add('bg-blue-100');
                
                const numberSpan = numberDiv.querySelector('span');
                numberSpan.classList.remove('text-green-700');
                numberSpan.classList.add('text-blue-700');
            }
        });
    }

    // Event listeners
    questionTextarea.addEventListener('input', validateForm);
    
    optionInputs.forEach(input => {
        input.addEventListener('input', validateForm);
    });

    correctOptionRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            validateForm();
            updateOptionCards();
        });
    });

    // Real-time validation styling
    questionTextarea.addEventListener('input', function() {
        if (this.value.trim().length > 0) {
            this.classList.add('border-green-300');
            this.classList.remove('border-gray-300');
        } else {
            this.classList.remove('border-green-300');
            this.classList.add('border-gray-300');
        }
    });

    optionInputs.forEach(input => {
        input.addEventListener('input', function() {
            if (this.value.trim().length > 0) {
                this.classList.add('border-green-300');
                this.classList.remove('border-gray-300');
            } else {
                this.classList.remove('border-green-300');
                this.classList.add('border-gray-300');
            }
        });
    });

    // Initialize
    validateForm();
    updateOptionCards();
    
    // Auto-scroll to success message if present
    const successAlert = document.querySelector('.bg-green-50');
    if (successAlert) {
        successAlert.scrollIntoView({ behavior: 'smooth', block: 'center' });
        
        // Clear form after successful submission
        if (window.location.search.includes('added=1')) {
            form.reset();
            validateForm();
            updateOptionCards();
        }
    }
});
</script>

<style>
select {
    appearance: none;
}

.transition {
    transition: all 0.2s ease-in-out;
}

.option-card {
    transition: all 0.2s ease-in-out;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

button:disabled:hover {
    background-color: inherit;
}
</style>
@endsection