@extends('layouts.admin')

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

@section('header-actions')
    <a href="{{ route('admin.surveys.show', $survey) }}" class="btn-ghost">
        <i class="fas fa-arrow-left mr-2"></i>
        Back to Survey
    </a>
    @if($survey->status === 'draft' && $survey->questions->count() > 0)
        <form action="{{ route('admin.surveys.activate', $survey) }}" method="POST" class="inline">
            @csrf
            <button type="submit" class="btn-primary">
                <i class="fas fa-play mr-2"></i>
                Activate Survey
            </button>
        </form>
    @endif
@endsection

@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Current Questions -->
    <div class="lg:col-span-2">
        <div class="card">
            <div class="card-header flex items-center justify-between">
                <h3 class="font-semibold text-secondary-900">Survey Questions ({{ $survey->questions->count() }})</h3>
                @if($survey->questions->count() > 0)
                    <span class="text-sm text-gray-500">Drag to reorder</span>
                @endif
            </div>
            
            @if($survey->questions->count() > 0)
                <div id="questionsList" class="divide-y divide-gray-100">
                    @foreach($survey->questions->sortBy('sort_order') as $question)
                        <div class="px-6 py-4 hover:bg-gray-50 question-item" data-id="{{ $question->id }}">
                            <div class="flex items-start">
                                <div class="cursor-move text-gray-400 mr-3 mt-1 drag-handle">
                                    <i class="fas fa-grip-vertical"></i>
                                </div>
                                <span class="text-xl mr-3">{{ $question->category->icon }}</span>
                                <div class="flex-1">
                                    <p class="text-gray-900 mb-1">{{ $question->question_text }}</p>
                                    <div class="flex items-center space-x-3 text-sm">
                                        <span class="text-gray-500">{{ $question->category->name }}</span>
                                        <span class="badge badge-secondary text-xs">
                                            {{ ucfirst(str_replace('_', ' ', $question->question_type)) }}
                                        </span>
                                        @if($question->is_required)
                                            <span class="text-red-500 text-xs">Required</span>
                                        @endif
                                    </div>
                                </div>
                                <form action="{{ route('admin.surveys.questions.remove', [$survey, $question]) }}" method="POST" class="ml-4">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn-ghost btn-sm text-red-500" onclick="return confirm('Remove this question from the survey?')">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="card-body text-center py-12">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-question text-gray-400 text-2xl"></i>
                    </div>
                    <h3 class="text-gray-700 font-medium mb-2">No questions yet</h3>
                    <p class="text-gray-500">Import questions from the bank or add custom questions.</p>
                </div>
            @endif
        </div>
    </div>
    
    <!-- Add Questions Panel -->
    <div class="space-y-6">
        <!-- Import from Bank -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Import from Bank</h3>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.surveys.questions.import', $survey) }}" method="POST" id="importForm">
                    @csrf
                    <div class="space-y-4 max-h-80 overflow-y-auto">
                        @foreach($categories as $category)
                            @if(isset($questionBank[$category->id]) && $questionBank[$category->id]->count() > 0)
                                <div class="border-b border-gray-100 pb-3">
                                    <div class="flex items-center mb-2">
                                        <span class="text-lg mr-2">{{ $category->icon }}</span>
                                        <span class="text-sm font-medium text-gray-700">{{ $category->name }}</span>
                                    </div>
                                    <div class="space-y-2 ml-7">
                                        @foreach($questionBank[$category->id] as $bankQuestion)
                                            @php
                                                $alreadyAdded = $survey->questions->contains('question_text', $bankQuestion->question_text);
                                            @endphp
                                            <label class="flex items-start {{ $alreadyAdded ? 'opacity-50' : '' }}">
                                                <input type="checkbox" name="questions[]" value="{{ $bankQuestion->id }}" class="form-checkbox mt-1" {{ $alreadyAdded ? 'disabled' : '' }}>
                                                <span class="ml-2 text-sm text-gray-600">
                                                    {{ Str::limit($bankQuestion->question_text, 60) }}
                                                    @if($alreadyAdded)
                                                        <span class="text-xs text-green-500">(Added)</span>
                                                    @endif
                                                </span>
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    </div>
                    <button type="submit" class="btn-primary w-full mt-4">
                        <i class="fas fa-download mr-2"></i>
                        Import Selected
                    </button>
                </form>
            </div>
        </div>
        
        <!-- Add Custom Question -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Add Custom Question</h3>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.surveys.questions.add', $survey) }}" method="POST">
                    @csrf
                    <div class="space-y-4">
                        <div class="form-group">
                            <label for="category_id" class="form-label">Category</label>
                            <select id="category_id" name="category_id" class="form-select" required>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->icon }} {{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="question_text" class="form-label">Question</label>
                            <textarea id="question_text" name="question_text" rows="2" class="form-textarea" required placeholder="Enter your question..."></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label for="question_type" class="form-label">Type</label>
                            <select id="question_type" name="question_type" class="form-select">
                                <option value="likert_5">Likert Scale (5-point)</option>
                                <option value="rating_10">Rating (1-10)</option>
                                <option value="nps">Net Promoter Score</option>
                                <option value="open_text">Open Text</option>
                            </select>
                        </div>
                        
                        <label class="flex items-center">
                            <input type="checkbox" name="is_required" value="1" class="form-checkbox" checked>
                            <span class="ml-2 text-sm text-gray-600">Required</span>
                        </label>
                        
                        <button type="submit" class="btn-outline w-full">
                            <i class="fas fa-plus mr-2"></i>
                            Add Question
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Category Summary -->
        <div class="card">
            <div class="card-header">
                <h3 class="font-semibold text-secondary-900">Questions by Category</h3>
            </div>
            <div class="card-body">
                @php
                    $categoryCounts = $survey->questions->groupBy('category_id')->map->count();
                @endphp
                <div class="space-y-2">
                    @foreach($categories as $category)
                        @php $count = $categoryCounts[$category->id] ?? 0; @endphp
                        <div class="flex items-center justify-between text-sm">
                            <div class="flex items-center">
                                <span class="mr-2">{{ $category->icon }}</span>
                                <span class="text-gray-600">{{ $category->name }}</span>
                            </div>
                            <span class="badge {{ $count > 0 ? 'badge-primary' : 'badge-secondary' }}">{{ $count }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
    const list = document.getElementById('questionsList');
    if (list) {
        new Sortable(list, {
            handle: '.drag-handle',
            animation: 150,
            onEnd: function(evt) {
                const order = Array.from(list.querySelectorAll('.question-item')).map(el => el.dataset.id);
                
                fetch('{{ route("admin.surveys.questions.reorder", $survey) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ order: order })
                });
            }
        });
    }
</script>
@endpush
@endsection