@extends('layouts.admin')

@section('title', 'Create Question')
@section('header', 'Create Question')
@section('subheader', 'Add a new question to the question bank')

@section('content')
<div class="max-w-3xl">
    <form action="{{ route('admin.questions.store') }}" method="POST" id="questionForm">
        @csrf
        
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Question Details</h3>
            </div>
            <div class="card-body space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="form-label">Category <span class="text-red-500">*</span></label>
                        <select name="category_id" class="form-select" required>
                            <option value="">-- Select Category --</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                    
                    <div>
                        <label class="form-label">Question Type <span class="text-red-500">*</span></label>
                        <select name="question_type" id="questionType" class="form-select" required onchange="toggleOptionsField()">
                            @foreach($types as $key => $label)
                                <option value="{{ $key }}" {{ old('question_type', 'likert_5') == $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        @error('question_type')<p class="form-error">{{ $message }}</p>@enderror
                    </div>
                </div>
                
                <div>
                    <label class="form-label">Question Text <span class="text-red-500">*</span></label>
                    <textarea name="question_text" rows="3" class="form-input" placeholder="Enter your question..." required>{{ old('question_text') }}</textarea>
                    @error('question_text')<p class="form-error">{{ $message }}</p>@enderror
                </div>
                
                <!-- Options Section (for Single/Multiple Choice) -->
                <div id="optionsSection" class="hidden">
                    <label class="form-label">Answer Options <span class="text-red-500">*</span></label>
                    <p class="text-sm text-gray-500 mb-2">Add the choices that respondents can select from.</p>
                    
                    <div id="optionsContainer" class="space-y-2">
                        <!-- Options will be added here -->
                    </div>
                    
                    <button type="button" onclick="addOption()" class="mt-3 text-sm text-primary-600 hover:text-primary-700 font-medium">
                        <i class="fas fa-plus mr-1"></i> Add Another Option
                    </button>
                    @error('options')<p class="form-error">{{ $message }}</p>@enderror
                </div>
                
                <!-- Scale Preview (for Likert/NPS/Rating) -->
                <div id="scalePreview" class="bg-gray-50 rounded-lg p-4">
                    <label class="form-label text-gray-600">Scale Preview</label>
                    <div id="scalePreviewContent"></div>
                </div>
                
                <div class="flex items-center pt-2">
                    <label class="flex items-center">
                        <input type="checkbox" name="is_required" value="1" {{ old('is_required', true) ? 'checked' : '' }} class="rounded border-gray-300 text-primary-500 focus:ring-primary-500">
                        <span class="ml-2 text-sm text-gray-700">Required question</span>
                    </label>
                </div>
            </div>
            <div class="card-footer flex justify-between">
                <a href="{{ route('admin.questions.index') }}" class="btn-ghost">Cancel</a>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-save mr-2"></i>Create Question
                </button>
            </div>
        </div>
    </form>
</div>

<script>
let optionCount = 0;

function toggleOptionsField() {
    const type = document.getElementById('questionType').value;
    const optionsSection = document.getElementById('optionsSection');
    const scalePreview = document.getElementById('scalePreview');
    const scalePreviewContent = document.getElementById('scalePreviewContent');
    
    // Types that need custom options
    const choiceTypes = ['single_choice', 'multiple_choice'];
    
    if (choiceTypes.includes(type)) {
        optionsSection.classList.remove('hidden');
        scalePreview.classList.add('hidden');
        
        // Add default options if empty
        if (document.querySelectorAll('.option-input').length === 0) {
            addOption('Option 1');
            addOption('Option 2');
        }
    } else {
        optionsSection.classList.add('hidden');
        scalePreview.classList.remove('hidden');
        
        // Show scale preview
        updateScalePreview(type);
    }
}

function updateScalePreview(type) {
    const content = document.getElementById('scalePreviewContent');
    
    switch(type) {
        case 'likert_5':
            content.innerHTML = `
                <div class="flex flex-wrap gap-2 mt-2">
                    <span class="px-3 py-1 bg-white border rounded text-sm">1 - Strongly Disagree</span>
                    <span class="px-3 py-1 bg-white border rounded text-sm">2 - Disagree</span>
                    <span class="px-3 py-1 bg-white border rounded text-sm">3 - Neutral</span>
                    <span class="px-3 py-1 bg-white border rounded text-sm">4 - Agree</span>
                    <span class="px-3 py-1 bg-white border rounded text-sm">5 - Strongly Agree</span>
                </div>
                <p class="text-xs text-gray-500 mt-2"><i class="fas fa-info-circle mr-1"></i>Favorability: Responses 4-5 counted as favorable</p>`;
            break;
        case 'likert_7':
            content.innerHTML = `
                <div class="flex flex-wrap gap-2 mt-2">
                    <span class="px-3 py-1 bg-white border rounded text-sm">1 - Strongly Disagree</span>
                    <span class="px-3 py-1 bg-white border rounded text-sm">2 - Disagree</span>
                    <span class="px-3 py-1 bg-white border rounded text-sm">3 - Somewhat Disagree</span>
                    <span class="px-3 py-1 bg-white border rounded text-sm">4 - Neutral</span>
                    <span class="px-3 py-1 bg-white border rounded text-sm">5 - Somewhat Agree</span>
                    <span class="px-3 py-1 bg-white border rounded text-sm">6 - Agree</span>
                    <span class="px-3 py-1 bg-white border rounded text-sm">7 - Strongly Agree</span>
                </div>
                <p class="text-xs text-gray-500 mt-2"><i class="fas fa-info-circle mr-1"></i>Favorability: Responses 6-7 counted as favorable (industry standard top-2-box)</p>`;
            break;
        case 'nps':
            content.innerHTML = `
                <div class="mt-2">
                    <p class="text-sm text-gray-600 mb-2">Net Promoter Score (0-10)</p>
                    <div class="flex gap-1">
                        ${[0,1,2,3,4,5,6,7,8,9,10].map(n => `<span class="w-8 h-8 flex items-center justify-center bg-white border rounded text-sm">${n}</span>`).join('')}
                    </div>
                    <div class="flex justify-between text-xs text-gray-500 mt-1">
                        <span>Not at all likely</span>
                        <span>Extremely likely</span>
                    </div>
                    <p class="text-xs text-gray-500 mt-2"><i class="fas fa-info-circle mr-1"></i>0-6 = Detractors, 7-8 = Passives, 9-10 = Promoters</p>
                </div>`;
            break;
        case 'rating_10':
            content.innerHTML = `
                <div class="mt-2">
                    <p class="text-sm text-gray-600 mb-2">Rating Scale (1-10)</p>
                    <div class="flex gap-1">
                        ${[1,2,3,4,5,6,7,8,9,10].map(n => `<span class="w-8 h-8 flex items-center justify-center bg-white border rounded text-sm">${n}</span>`).join('')}
                    </div>
                </div>`;
            break;
        case 'open_text':
            content.innerHTML = `
                <div class="mt-2">
                    <div class="bg-white border rounded p-3 text-gray-400 text-sm">
                        Respondents will see a text area to type their answer...
                    </div>
                </div>`;
            break;
        default:
            content.innerHTML = '';
    }
}

function addOption(value = '') {
    optionCount++;
    const container = document.getElementById('optionsContainer');
    const div = document.createElement('div');
    div.className = 'flex items-center space-x-2 option-row';
    div.innerHTML = `
        <span class="text-gray-400 text-sm w-6">${optionCount}.</span>
        <input type="text" name="options[]" value="${value}" class="form-input flex-1 option-input" placeholder="Enter option..." required>
        <button type="button" onclick="removeOption(this)" class="p-2 text-gray-400 hover:text-red-500 transition">
            <i class="fas fa-times"></i>
        </button>
    `;
    container.appendChild(div);
}

function removeOption(btn) {
    const container = document.getElementById('optionsContainer');
    if (container.querySelectorAll('.option-row').length > 2) {
        btn.closest('.option-row').remove();
        // Re-number options
        container.querySelectorAll('.option-row').forEach((row, index) => {
            row.querySelector('span').textContent = (index + 1) + '.';
        });
        optionCount = container.querySelectorAll('.option-row').length;
    } else {
        alert('You need at least 2 options');
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    toggleOptionsField();
});
</script>
@endsection