@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Page Header -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                <div class="mb-4 sm:mb-0">
                    <div class="flex items-center">
                        <div class="bg-indigo-100 rounded-lg p-3 mr-4">
                            <i class="fas fa-edit text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900">Edit Questionnaire Template</h1>
                            <p class="mt-1 text-sm text-gray-500">{{ $questionnaire->name }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 max-w-4xl">
            <form method="POST" action="{{ route('questionnaires.update', $questionnaire) }}">
                @csrf
                @method('PUT')

                <!-- Template Information -->
                <div class="mb-8">
                    <div class="flex items-center mb-6">
                        <i class="fas fa-info-circle text-gray-400 mr-2"></i>
                        <h2 class="text-lg font-semibold text-gray-900">Template Information</h2>
                    </div>
                    <div class="space-y-4">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-tag text-gray-400 mr-1"></i> Template Name *
                            </label>
                            <input type="text" name="name" id="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('name') border-red-500 @enderror" value="{{ old('name', $questionnaire->name) }}" placeholder="Enter template name">
                            @error('name')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-align-left text-gray-400 mr-1"></i> Description
                            </label>
                            <textarea name="description" id="description" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors resize-none" placeholder="Enter template description">{{ old('description', $questionnaire->description) }}</textarea>
                        </div>

                        <div>
                            <label for="service_type_id" class="block text-sm font-medium text-gray-700 mb-2">
                                <i class="fas fa-cog text-gray-400 mr-1"></i> Service Type *
                            </label>
                            <select name="service_type_id" id="service_type_id" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors @error('service_type_id') border-red-500 @enderror">
                                <option value="">Select a service type</option>
                                @foreach($serviceTypes as $type)
                                <option value="{{ $type->id }}" {{ old('service_type_id', $questionnaire->service_type_id) == $type->id ? 'selected' : '' }}>
                                    {{ $type->name }}
                                </option>
                                @endforeach
                            </select>
                            @error('service_type_id')
                            <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Questions -->
                <div class="mb-8">
                    <div class="flex items-center justify-between mb-6">
                        <div class="flex items-center">
                            <i class="fas fa-question-circle text-gray-400 mr-2"></i>
                            <h2 class="text-lg font-semibold text-gray-900">Questions</h2>
                        </div>
                        <button type="button" onclick="addQuestion()" class="inline-flex items-center px-4 py-2 bg-indigo-100 text-indigo-700 text-sm font-medium rounded-lg hover:bg-indigo-200 transition-colors">
                            <i class="fas fa-plus mr-2"></i> Add Question
                        </button>
                    </div>
                    <div id="questions-container" class="space-y-4">
                        @foreach($questionnaire->questions as $index => $question)
                        <div class="question-item bg-gray-50 rounded-xl p-6 border border-gray-200">
                            <div class="flex justify-between items-center mb-4">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                                        <span class="text-indigo-600 font-semibold text-sm">{{ $index + 1 }}</span>
                                    </div>
                                    <h3 class="font-semibold text-gray-900">Question {{ $index + 1 }}</h3>
                                </div>
                                <button type="button" onclick="removeQuestion(this)" class="text-red-600 hover:text-red-800 transition-colors p-1 hover:bg-red-50 rounded" title="Remove">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>

                            <div class="space-y-4">
                                <input type="hidden" name="questions[{{ $index }}][id]" value="{{ $question->id }}">
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class="fas fa-question text-gray-400 mr-1"></i> Question Text *
                                    </label>
                                    <input type="text" name="questions[{{ $index }}][question_text]" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" value="{{ $question->question_text }}" placeholder="Enter your question">
                                </div>

                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class="fas fa-tag text-gray-400 mr-1"></i> Question Type *
                                    </label>
                                    <select name="questions[{{ $index }}][question_type]" required onchange="toggleOptions(this)" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors">
                                        <option value="text" {{ $question->question_type === 'text' ? 'selected' : '' }}>Text</option>
                                        <option value="textarea" {{ $question->question_type === 'textarea' ? 'selected' : '' }}>Textarea</option>
                                        <option value="email" {{ $question->question_type === 'email' ? 'selected' : '' }}>Email</option>
                                        <option value="number" {{ $question->question_type === 'number' ? 'selected' : '' }}>Number</option>
                                        <option value="mcq" {{ $question->question_type === 'mcq' ? 'selected' : '' }}>Multiple Choice (Radio)</option>
                                        <option value="checkbox" {{ $question->question_type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
                                        <option value="dropdown" {{ $question->question_type === 'dropdown' ? 'selected' : '' }}>Dropdown</option>
                                        <option value="file" {{ $question->question_type === 'file' ? 'selected' : '' }}>File Upload</option>
                                        <option value="date" {{ $question->question_type === 'date' ? 'selected' : '' }}>Date</option>
                                    </select>
                                </div>

                                <div class="options-container" style="display: {{ in_array($question->question_type, ['mcq', 'checkbox', 'dropdown']) ? 'block' : 'none' }};">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">
                                        <i class="fas fa-list text-gray-400 mr-1"></i> Options (comma-separated)
                                    </label>
                                    <input type="text" name="questions[{{ $index }}][options]" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" value="{{ is_array($question->options) ? implode(', ', $question->options) : ($question->options ?? '') }}" placeholder="Option 1, Option 2, Option 3">
                                    <p class="text-xs text-gray-500 mt-1">For MCQ, Checkbox, and Dropdown questions - enter options separated by commas</p>
                                </div>

                                <div class="flex items-center gap-3">
                                    <input type="hidden" name="questions[{{ $index }}][is_mandatory]" value="0">
                                    <input type="checkbox" name="questions[{{ $index }}][is_mandatory]" id="mandatory{{ $index }}" value="1" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" {{ $question->is_mandatory ? 'checked' : '' }}>
                                    <label for="mandatory{{ $index }}" class="text-sm text-gray-700 cursor-pointer">This is a mandatory question</label>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- Actions -->
                <div class="flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-200">
                    <button type="submit" class="inline-flex items-center px-6 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-all duration-200 shadow-sm hover:shadow-md">
                        <i class="fas fa-save mr-2"></i> Update Template
                    </button>
                    <a href="{{ route('questionnaires.show', $questionnaire) }}" class="inline-flex items-center px-6 py-2 bg-gray-600 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-all duration-200 shadow-sm hover:shadow-md">
                        <i class="fas fa-times mr-2"></i> Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
let questionCount = {{ count($questionnaire->questions) }};

function addQuestion() {
    const container = document.getElementById('questions-container');
    const newQuestion = document.createElement('div');
    newQuestion.className = 'question-item bg-gray-50 rounded-xl p-6 border border-gray-200';
    newQuestion.innerHTML = `
        <div class="flex justify-between items-center mb-4">
            <div class="flex items-center">
                <div class="flex-shrink-0 h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                    <span class="text-indigo-600 font-semibold text-sm">${questionCount + 1}</span>
                </div>
                <h3 class="font-semibold text-gray-900">Question ${questionCount + 1}</h3>
            </div>
            <button type="button" onclick="removeQuestion(this)" class="text-red-600 hover:text-red-800 transition-colors p-1 hover:bg-red-50 rounded" title="Remove">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-question text-gray-400 mr-1"></i> Question Text *
                </label>
                <input type="text" name="questions[${questionCount}][question_text]" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" placeholder="Enter your question">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-tag text-gray-400 mr-1"></i> Question Type *
                </label>
                <select name="questions[${questionCount}][question_type]" required onchange="toggleOptions(this)" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors">
                    <option value="text">Text</option>
                    <option value="textarea">Textarea</option>
                    <option value="email">Email</option>
                    <option value="number">Number</option>
                    <option value="mcq">Multiple Choice (Radio)</option>
                    <option value="checkbox">Checkbox</option>
                    <option value="dropdown">Dropdown</option>
                    <option value="file">File Upload</option>
                    <option value="date">Date</option>
                </select>
            </div>
            <div class="options-container" style="display: none;">
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-list text-gray-400 mr-1"></i> Options (comma-separated)
                </label>
                <input type="text" name="questions[${questionCount}][options]" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors" placeholder="Option 1, Option 2, Option 3">
                <p class="text-xs text-gray-500 mt-1">For MCQ, Checkbox, and Dropdown questions - enter options separated by commas</p>
            </div>
            <div class="flex items-center gap-3">
                <input type="hidden" name="questions[${questionCount}][is_mandatory]" value="0">
                <input type="checkbox" name="questions[${questionCount}][is_mandatory]" id="mandatory${questionCount}" value="1" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                <label for="mandatory${questionCount}" class="text-sm text-gray-700 cursor-pointer">This is a mandatory question</label>
            </div>
        </div>
    `;
    container.appendChild(newQuestion);
    questionCount++;
    updateRemoveButtons();
}

function removeQuestion(button) {
    button.closest('.question-item').remove();
    updateRemoveButtons();
}

function updateRemoveButtons() {
    const items = document.querySelectorAll('.question-item');
    items.forEach((item, index) => {
        const removeBtn = item.querySelector('button[onclick="removeQuestion(this)"]');
        removeBtn.style.display = items.length > 1 ? 'block' : 'none';
    });
}

function toggleOptions(select) {
    const optionsContainer = select.closest('.space-y-4').querySelector('.options-container');
    const type = select.value;
    optionsContainer.style.display = ['mcq', 'checkbox', 'dropdown'].includes(type) ? 'block' : 'none';
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    updateRemoveButtons();
});
</script>
@endsection