@extends('layouts.admin')

@section('title', 'Edit Survey')
@section('header', 'Edit Survey')
@section('subheader', $survey->title)

@section('header-actions')
    <div class="flex items-center space-x-3">
        @if($survey->status === 'draft')
            <form action="{{ route('admin.surveys.activate', $survey) }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="btn-primary" {{ $survey->questions->count() === 0 ? 'disabled title=Add questions first' : '' }}>
                    <i class="fas fa-play mr-2"></i>Activate Survey
                </button>
            </form>
        @elseif($survey->status === 'active')
            <form action="{{ route('admin.surveys.close', $survey) }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="btn-secondary">
                    <i class="fas fa-stop mr-2"></i>Close Survey
                </button>
            </form>
        @endif
    </div>
@endsection

@section('content')
<div class="grid grid-cols-1 xl:grid-cols-4 gap-6">
    <!-- Left Column - Main Content -->
    <div class="xl:col-span-3 space-y-6">
        
        <!-- Survey Settings Card -->
        <div class="card">
            <div class="card-header cursor-pointer flex items-center justify-between" onclick="toggleSection('settingsSection')">
                <h3 class="font-semibold text-secondary-900">
                    <i class="fas fa-cog mr-2 text-gray-400"></i>Survey Settings
                </h3>
                <i class="fas fa-chevron-down text-gray-400 transition-transform" id="settingsChevron"></i>
            </div>
            <div id="settingsSection">
                <form action="{{ route('admin.surveys.update', $survey) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="card-body space-y-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="form-label">Company <span class="text-red-500">*</span></label>
                                <select name="company_id" class="form-select" required>
                                    @foreach($companies as $company)
                                        <option value="{{ $company->id }}" {{ $survey->company_id == $company->id ? 'selected' : '' }}>
                                            {{ $company->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="form-label">Survey Title <span class="text-red-500">*</span></label>
                                <input type="text" name="title" value="{{ $survey->title }}" class="form-input" required>
                            </div>
                        </div>
                        <div>
                            <label class="form-label">Description</label>
                            <textarea name="description" rows="2" class="form-input">{{ $survey->description }}</textarea>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="form-label">Estimated Time (minutes)</label>
                                <input type="number" name="estimated_minutes" value="{{ $survey->estimated_minutes ?? 10 }}" class="form-input" min="1" max="120">
                            </div>
                            <div>
                                <label class="form-label">
                                    Response Limit
                                    <span class="text-gray-400 font-normal">(optional)</span>
                                </label>
                                <input type="number" name="max_responses" value="{{ $survey->max_responses }}" class="form-input" min="1" placeholder="Unlimited">
                                @if($survey->max_responses)
                                    <p class="text-xs text-gray-500 mt-1">
                                        {{ $survey->getCompletedResponsesCount() }} / {{ $survey->max_responses }} responses
                                        @if($survey->hasReachedLimit())
                                            <span class="text-red-500 font-medium">- Limit reached!</span>
                                        @endif
                                    </p>
                                @else
                                    <p class="text-xs text-gray-500 mt-1">Survey will auto-close when limit is reached</p>
                                @endif
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="form-label">Welcome Message</label>
                                <textarea name="welcome_message" rows="3" class="form-input text-sm">{{ $survey->welcome_message }}</textarea>
                            </div>
                            <div>
                                <label class="form-label">Thank You Message</label>
                                <textarea name="thank_you_message" rows="3" class="form-input text-sm">{{ $survey->thank_you_message }}</textarea>
                            </div>
                        </div>
                        <div class="flex flex-wrap gap-6">
                            <label class="flex items-center">
                                <input type="checkbox" name="collect_demographics" value="1" {{ $survey->collect_demographics ? 'checked' : '' }} class="rounded border-gray-300 text-primary-500">
                                <span class="ml-2 text-sm">Collect Demographics</span>
                            </label>
                            <label class="flex items-center">
                                <input type="checkbox" name="is_anonymous" value="1" {{ ($survey->is_anonymous ?? true) ? 'checked' : '' }} class="rounded border-gray-300 text-primary-500">
                                <span class="ml-2 text-sm">Anonymous Responses</span>
                            </label>
                        </div>
                    </div>
                    <div class="card-footer">
                        <button type="submit" class="btn-primary">
                            <i class="fas fa-save mr-2"></i>Save Settings
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Questions Management Card -->
        <div class="card">
            <div class="card-header">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <h3 class="font-semibold text-secondary-900">
                        <i class="fas fa-list-ol mr-2 text-gray-400"></i>
                        Survey Questions 
                        <span class="ml-2 px-2 py-1 bg-primary-100 text-primary-700 rounded-full text-sm">{{ $survey->questions->count() }}</span>
                    </h3>
                    <div class="flex items-center space-x-2">
                        <button type="button" onclick="openModal('addFromBankModal')" class="btn-secondary btn-sm">
                            <i class="fas fa-database mr-1"></i>Add from Bank
                        </button>
                        <button type="button" onclick="openModal('createQuestionModal')" class="btn-primary btn-sm">
                            <i class="fas fa-plus mr-1"></i>Create New
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                @if($survey->questions->count() > 0)
                    @php
                        $groupedQuestions = $survey->questions->sortBy('sort_order')->groupBy('category_id');
                    @endphp
                    
                    <div class="space-y-6">
                        @foreach($groupedQuestions as $categoryId => $questions)
                            @php $category = $questions->first()->category; @endphp
                            <div class="border border-gray-200 rounded-lg overflow-hidden">
                                <div class="bg-gray-50 px-4 py-3 flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-8 h-8 rounded-lg flex items-center justify-center mr-3" style="background-color: {{ $category->color ?? '#6b7280' }}20">
                                            <i class="fas fa-{{ $category->icon ?? 'folder' }}" style="color: {{ $category->color ?? '#6b7280' }}"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-semibold text-gray-900">{{ $category->name ?? 'Uncategorized' }}</h4>
                                            <p class="text-xs text-gray-500">{{ $questions->count() }} questions</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="divide-y divide-gray-100">
                                    @foreach($questions as $index => $question)
                                        <div class="px-4 py-3 flex items-start hover:bg-gray-50 transition group">
                                            <span class="w-6 h-6 bg-gray-200 rounded text-xs flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">
                                                {{ $loop->iteration }}
                                            </span>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-sm text-gray-900">{{ $question->question_text }}</p>
                                                <div class="flex items-center mt-1 space-x-3 text-xs text-gray-500">
                                                    <span class="inline-flex items-center">
                                                        <i class="fas fa-{{ $question->question_type === 'likert_5' ? 'sliders-h' : ($question->question_type === 'open_text' ? 'comment' : ($question->question_type === 'nps' ? 'chart-line' : 'list')) }} mr-1"></i>
                                                        {{ ucfirst(str_replace('_', ' ', $question->question_type)) }}
                                                    </span>
                                                    @if($question->is_required)
                                                        <span class="text-red-500"><i class="fas fa-asterisk mr-1"></i>Required</span>
                                                    @endif
                                                </div>
                                            </div>
                                            <form action="{{ route('admin.surveys.questions.remove', [$survey, $question]) }}" method="POST" 
                                                  onsubmit="return confirm('Remove this question?')" class="opacity-0 group-hover:opacity-100 transition">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="p-2 text-gray-400 hover:text-red-500">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </form>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-12">
                        <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-clipboard-list text-gray-300 text-3xl"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900 mb-2">No Questions Yet</h3>
                        <p class="text-gray-500 mb-6">Start building your survey by adding questions</p>
                        <div class="flex items-center justify-center space-x-3">
                            <button type="button" onclick="openModal('addFromBankModal')" class="btn-secondary">
                                <i class="fas fa-database mr-2"></i>Add from Question Bank
                            </button>
                            <button type="button" onclick="openModal('createQuestionModal')" class="btn-primary">
                                <i class="fas fa-plus mr-2"></i>Create New Question
                            </button>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Right Column - Sidebar -->
    <div class="space-y-6">
        <!-- Status Card -->
        <div class="card">
            <div class="card-body text-center">
                @if($survey->status === 'draft')
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-pencil-alt text-yellow-600 text-2xl"></i>
                    </div>
                    <span class="text-lg font-semibold text-yellow-700">Draft</span>
                    <p class="text-sm text-gray-500 mt-1">Not yet published</p>
                @elseif($survey->status === 'active')
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-broadcast-tower text-green-600 text-2xl"></i>
                    </div>
                    <span class="text-lg font-semibold text-green-700">Active</span>
                    <p class="text-sm text-gray-500 mt-1">Collecting responses</p>
                @else
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-archive text-gray-600 text-2xl"></i>
                    </div>
                    <span class="text-lg font-semibold text-gray-700">Closed</span>
                    <p class="text-sm text-gray-500 mt-1">No longer accepting</p>
                @endif
            </div>
            <div class="px-6 pb-6">
                <div class="grid grid-cols-2 gap-4 text-center">
                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="text-2xl font-bold text-gray-900">{{ $survey->questions->count() }}</div>
                        <div class="text-xs text-gray-500">Questions</div>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="text-2xl font-bold text-gray-900">{{ $survey->responses()->where('is_complete', true)->count() }}</div>
                        <div class="text-xs text-gray-500">Responses</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Distribution Links -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900 text-sm">
                    <i class="fas fa-share-alt mr-2 text-gray-400"></i>Distribution Links
                </h3>
            </div>
            <div class="card-body space-y-3">
                @forelse($survey->links as $link)
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <div class="flex items-center justify-between mb-2">
                            <span class="font-medium text-sm">{{ $link->name }}</span>
                            <span class="w-2 h-2 rounded-full {{ $link->is_active ? 'bg-green-500' : 'bg-gray-400' }}"></span>
                        </div>
                        <div class="flex items-center space-x-1">
                            <input type="text" value="{{ route('survey.welcome.link', $link->token) }}" class="form-input text-xs py-1 flex-1" readonly id="link-{{ $link->id }}">
                            <button type="button" onclick="copyLink('link-{{ $link->id }}')" class="p-1.5 text-gray-500 hover:text-primary-500">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="text-xs text-gray-500 mt-1">{{ $link->response_count ?? 0 }} responses</div>
                    </div>
                @empty
                    <p class="text-sm text-gray-500 text-center py-2">No links created</p>
                @endforelse
                
                <form action="{{ route('admin.surveys.links.create', $survey) }}" method="POST" class="pt-3 border-t">
                    @csrf
                    <input type="text" name="name" placeholder="Link name..." class="form-input text-sm mb-2" required>
                    <button type="submit" class="btn-secondary btn-sm w-full">
                        <i class="fas fa-plus mr-1"></i>Create Link
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Add from Question Bank -->
<div id="addFromBankModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
        <div class="p-6 border-b flex items-center justify-between flex-shrink-0">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Add Questions from Bank</h3>
                <p class="text-sm text-gray-500">Select questions to add to your survey</p>
            </div>
            <button type="button" onclick="closeModal('addFromBankModal')" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        
        <form action="{{ route('admin.surveys.questions.import', $survey) }}" method="POST" class="flex flex-col flex-1 overflow-hidden">
            @csrf
            
            <!-- Category Filter Tabs -->
            <div class="px-6 py-3 bg-gray-50 border-b flex-shrink-0">
                <div class="flex items-center space-x-2 overflow-x-auto pb-1">
                    <button type="button" class="category-filter-btn active px-3 py-1.5 rounded-full text-sm font-medium whitespace-nowrap" data-category="all">
                        All Categories
                    </button>
                    @foreach($categories as $category)
                        @if($availableQuestions->where('category_id', $category->id)->count() > 0)
                            <button type="button" class="category-filter-btn px-3 py-1.5 rounded-full text-sm font-medium whitespace-nowrap" data-category="{{ $category->id }}">
                                <i class="fas fa-{{ $category->icon ?? 'folder' }} mr-1"></i>
                                {{ $category->name }}
                                <span class="ml-1 text-xs opacity-75">({{ $availableQuestions->where('category_id', $category->id)->count() }})</span>
                            </button>
                        @endif
                    @endforeach
                </div>
            </div>
            
            <!-- Questions List -->
            <div class="flex-1 overflow-y-auto p-6">
                @if($availableQuestions->count() > 0)
                    <div class="space-y-2">
                        @foreach($availableQuestions as $question)
                            @php
                                $alreadyAdded = $survey->questions->contains('question_text', $question->question_text);
                            @endphp
                            <label class="question-item flex items-start p-4 rounded-lg border-2 cursor-pointer transition {{ $alreadyAdded ? 'bg-green-50 border-green-200' : 'hover:bg-gray-50 hover:border-primary-300 border-gray-200' }}" 
                                   data-category="{{ $question->category_id }}">
                                <input type="checkbox" name="question_ids[]" value="{{ $question->id }}" 
                                    class="mt-1 rounded border-gray-300 text-primary-500 focus:ring-primary-500" 
                                    {{ $alreadyAdded ? 'disabled checked' : '' }}>
                                <div class="ml-3 flex-1">
                                    <p class="text-sm font-medium text-gray-900">{{ $question->question_text }}</p>
                                    <div class="flex items-center mt-1 text-xs text-gray-500 space-x-3">
                                        <span class="inline-flex items-center px-2 py-0.5 rounded bg-gray-100">
                                            <i class="fas fa-{{ $question->category->icon ?? 'folder' }} mr-1"></i>
                                            {{ $question->category->name ?? 'Uncategorized' }}
                                        </span>
                                        <span>{{ ucfirst(str_replace('_', ' ', $question->question_type)) }}</span>
                                        @if($alreadyAdded)
                                            <span class="text-green-600"><i class="fas fa-check mr-1"></i>Already added</span>
                                        @endif
                                    </div>
                                </div>
                            </label>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-12">
                        <i class="fas fa-inbox text-gray-300 text-4xl mb-4"></i>
                        <p class="text-gray-500">No questions in question bank yet.</p>
                        <a href="{{ route('admin.questions.create') }}" class="text-primary-500 hover:underline mt-2 inline-block">
                            Create questions in Question Bank →
                        </a>
                    </div>
                @endif
            </div>
            
            <div class="p-6 border-t bg-gray-50 flex items-center justify-between flex-shrink-0">
                <span class="text-sm text-gray-500">
                    <span id="selectedCount">0</span> questions selected
                </span>
                <div class="flex space-x-3">
                    <button type="button" onclick="closeModal('addFromBankModal')" class="btn-ghost">Cancel</button>
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-plus mr-2"></i>Add Selected
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Modal: Create New Question -->
<div id="createQuestionModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col">
        <div class="p-6 border-b flex items-center justify-between flex-shrink-0">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">Create New Question</h3>
                <p class="text-sm text-gray-500">Add a new question directly to this survey</p>
            </div>
            <button type="button" onclick="closeModal('createQuestionModal')" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times text-xl"></i>
            </button>
        </div>
        
        <form action="{{ route('admin.questions.store') }}" method="POST" id="createQuestionForm" class="flex flex-col flex-1 overflow-hidden">
            @csrf
            <input type="hidden" name="add_to_survey" value="{{ $survey->id }}">
            <input type="hidden" name="redirect_back" value="1">
            
            <div class="p-6 space-y-4 overflow-y-auto flex-1">
                <div class="grid 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 --</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Question Type <span class="text-red-500">*</span></label>
                        <select name="question_type" id="modalQuestionType" class="form-select" required onchange="toggleModalOptions()">
                            <option value="likert_5">Likert Scale (1-5)</option>
                            <option value="nps">NPS (0-10)</option>
                            <option value="open_text">Open Text</option>
                            <option value="single_choice">Single Choice</option>
                            <option value="multiple_choice">Multiple Choice</option>
                        </select>
                    </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></textarea>
                </div>
                
                <!-- Options Section (for Single/Multiple Choice) -->
                <div id="modalOptionsSection" 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="modalOptionsContainer" class="space-y-2">
                        <!-- Options will be added here -->
                    </div>
                    
                    <button type="button" onclick="addModalOption()" 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>
                </div>
                
                <!-- Scale Preview -->
                <div id="modalScalePreview" class="bg-gray-50 rounded-lg p-4">
                    <label class="form-label text-gray-600 text-sm">Preview</label>
                    <div id="modalScalePreviewContent"></div>
                </div>
                
                <div class="flex items-center">
                    <label class="flex items-center">
                        <input type="checkbox" name="is_required" value="1" checked class="rounded border-gray-300 text-primary-500">
                        <span class="ml-2 text-sm">Required question</span>
                    </label>
                </div>
                
                <div class="flex items-center p-3 bg-blue-50 rounded-lg text-sm text-blue-700">
                    <i class="fas fa-info-circle mr-2"></i>
                    This question will be added to your survey and saved to the Question Bank.
                </div>
            </div>
            
            <div class="p-6 border-t bg-gray-50 flex justify-end space-x-3 flex-shrink-0">
                <button type="button" onclick="closeModal('createQuestionModal')" class="btn-ghost">Cancel</button>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-plus mr-2"></i>Create & Add
                </button>
            </div>
        </form>
    </div>
</div>

<style>
.category-filter-btn {
    background-color: #f3f4f6;
    color: #6b7280;
    transition: all 0.2s;
}
.category-filter-btn:hover {
    background-color: #e5e7eb;
}
.category-filter-btn.active {
    background-color: #a6cf45;
    color: white;
}
</style>

<script>
let modalOptionCount = 0;

function openModal(id) {
    document.getElementById(id).classList.remove('hidden');
    document.body.classList.add('overflow-hidden');
    
    // Initialize modal options if creating question
    if (id === 'createQuestionModal') {
        toggleModalOptions();
    }
}

function closeModal(id) {
    document.getElementById(id).classList.add('hidden');
    document.body.classList.remove('overflow-hidden');
}

function copyLink(inputId) {
    const input = document.getElementById(inputId);
    input.select();
    navigator.clipboard.writeText(input.value);
    
    const btn = input.nextElementSibling;
    const originalHTML = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-check text-green-500"></i>';
    setTimeout(() => btn.innerHTML = originalHTML, 1500);
}

function toggleSection(id) {
    const section = document.getElementById(id);
    const chevron = document.getElementById(id.replace('Section', 'Chevron'));
    section.classList.toggle('hidden');
    if (chevron) chevron.classList.toggle('rotate-180');
}

// Category filter for Add from Bank modal
document.querySelectorAll('.category-filter-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        document.querySelectorAll('.category-filter-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        const category = this.dataset.category;
        
        document.querySelectorAll('.question-item').forEach(item => {
            if (category === 'all' || item.dataset.category === category) {
                item.style.display = 'flex';
            } else {
                item.style.display = 'none';
            }
        });
    });
});

// Update selected count
document.querySelectorAll('#addFromBankModal input[type="checkbox"]:not(:disabled)').forEach(cb => {
    cb.addEventListener('change', updateSelectedCount);
});

function updateSelectedCount() {
    const count = document.querySelectorAll('#addFromBankModal input[type="checkbox"]:checked:not(:disabled)').length;
    document.getElementById('selectedCount').textContent = count;
}

// Modal question type toggle
function toggleModalOptions() {
    const type = document.getElementById('modalQuestionType').value;
    const optionsSection = document.getElementById('modalOptionsSection');
    const scalePreview = document.getElementById('modalScalePreview');
    const previewContent = document.getElementById('modalScalePreviewContent');
    
    const choiceTypes = ['single_choice', 'multiple_choice'];
    
    if (choiceTypes.includes(type)) {
        optionsSection.classList.remove('hidden');
        scalePreview.classList.add('hidden');
        
        // Add default options if empty
        const container = document.getElementById('modalOptionsContainer');
        if (container.querySelectorAll('.modal-option-row').length === 0) {
            addModalOption('Option 1');
            addModalOption('Option 2');
        }
    } else {
        optionsSection.classList.add('hidden');
        scalePreview.classList.remove('hidden');
        
        // Update preview
        switch(type) {
            case 'likert_5':
                previewContent.innerHTML = `
                    <div class="flex flex-wrap gap-2 mt-2">
                        <span class="px-2 py-1 bg-white border rounded text-xs">1 - Strongly Disagree</span>
                        <span class="px-2 py-1 bg-white border rounded text-xs">2 - Disagree</span>
                        <span class="px-2 py-1 bg-white border rounded text-xs">3 - Neutral</span>
                        <span class="px-2 py-1 bg-white border rounded text-xs">4 - Agree</span>
                        <span class="px-2 py-1 bg-white border rounded text-xs">5 - Strongly Agree</span>
                    </div>`;
                break;
            case 'nps':
                previewContent.innerHTML = `
                    <div class="mt-2">
                        <div class="flex gap-1 flex-wrap">
                            ${[0,1,2,3,4,5,6,7,8,9,10].map(n => `<span class="w-6 h-6 flex items-center justify-center bg-white border rounded text-xs">${n}</span>`).join('')}
                        </div>
                    </div>`;
                break;
            case 'open_text':
                previewContent.innerHTML = `
                    <div class="mt-2">
                        <div class="bg-white border rounded p-2 text-gray-400 text-xs">Text area for response...</div>
                    </div>`;
                break;
            default:
                previewContent.innerHTML = '';
        }
    }
}

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

function removeModalOption(btn) {
    const container = document.getElementById('modalOptionsContainer');
    if (container.querySelectorAll('.modal-option-row').length > 2) {
        b.closest('.modal-option-row').remove();
        container.querySelectorAll('.modal-option-row').forEach((row, index) => {
            row.querySelector('span').textContent = (index + 1) + '.';
        });
        modalOptionCount = container.querySelectorAll('.modal-option-row').length;
    } else {
        alert('You need at least 2 options');
    }
}

// Close modals on escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.fixed').forEach(modal => {
            if (!modal.classList.contains('hidden')) {
                modal.classList.add('hidden');
                document.body.classList.remove('overflow-hidden');
            }
        });
    }
});

// Close modal on backdrop click
document.querySelectorAll('.fixed').forEach(modal => {
    modal.addEventListener('click', function(e) {
        if (e.target === this) {
            this.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }
    });
});

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