@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-6">
    <!-- Header -->
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Edit Questionnaire Template</h1>
            <p class="text-gray-600 mt-1">{{ $questionnaire->name }}</p>
        </div>
    </div>

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

            <!-- Template Information -->
            <div class="mb-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">Template Information</h2>
                <div class="space-y-4">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">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-blue-500 focus:border-transparent @error('name') border-red-500 @enderror" value="{{ old('name', $questionnaire->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">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-blue-500 focus:border-transparent">{{ old('description', $questionnaire->description) }}</textarea>
                    </div>

                    <div>
                        <label for="service_type_id" class="block text-sm font-medium text-gray-700 mb-2">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-blue-500 focus:border-transparent @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-6">
                <h2 class="text-xl font-semibold text-gray-900 mb-4">Questions</h2>
                <div id="questions-container" class="space-y-4 mb-4">
                    @foreach($questionnaire->questions as $index => $question)
                    <div class="question-item bg-gray-50 rounded-lg p-4 border border-gray-200">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="font-semibold text-gray-900">Question {{ $index + 1 }}</h3>
                            <button type="button" onclick="removeQuestion(this)" class="text-red-600 hover:text-red-700">
                                <i class="fas fa-trash"></i> Remove
                            </button>
                        </div>

                        <div class="space-y-3">
                            <input type="hidden" name="questions[{{ $index }}][id]" value="{{ $question->id }}">
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">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-blue-500 focus:border-transparent" value="{{ $question->question_text }}">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">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-blue-500 focus:border-transparent">
                                    <option value="text" {{ $question->question_type === 'text' ? 'selected' : '' }}>Text</option>
                                    <option value="radio" {{ $question->question_type === 'radio' ? 'selected' : '' }}>Radio Button</option>
                                    <option value="checkbox" {{ $question->question_type === 'checkbox' ? 'selected' : '' }}>Checkbox</option>
                                    <option value="rating" {{ $question->question_type === 'rating' ? 'selected' : '' }}>Rating</option>
                                    <option value="date" {{ $question->question_type === 'date' ? 'selected' : '' }}>Date</option>
                                </select>
                            </div>

                            <div class="options-container" style="display: {{ in_array($question->question_type, ['radio', 'checkbox']) ? 'block' : 'none' }};">
                                <label class="block text-sm font-medium text-gray-700 mb-2">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-blue-500 focus:border-transparent" value="{{ $question->options ?? '' }}">
                            </div>

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

                <button type="button" onclick="addQuestion()" class="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition">
                    <i class="fas fa-plus mr-2"></i> Add Question
                </button>
            </div>

            <!-- Actions -->
            <div class="flex gap-3">
                <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                    <i class="fas fa-save mr-2"></i> Update Template
                </button>
                <a href="{{ route('questionnaires.show', $questionnaire) }}" class="px-6 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition">
                    <i class="fas fa-times mr-2"></i> Cancel
                </a>
            </div>
        </form>
    </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-lg p-4 border border-gray-200';
    newQuestion.innerHTML = `
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-semibold text-gray-900">Question ${questionCount + 1}</h3>
            <button type="button" onclick="removeQuestion(this)" class="text-red-600 hover:text-red-700">
                <i class="fas fa-trash"></i> Remove
            </button>
        </div>
        <div class="space-y-3">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">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-blue-500 focus:border-transparent" placeholder="Enter your question">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">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-blue-500 focus:border-transparent">
                    <option value="text">Text</option>
                    <option value="radio">Radio Button</option>
                    <option value="checkbox">Checkbox</option>
                    <option value="rating">Rating</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">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-blue-500 focus:border-transparent" placeholder="Option 1, Option 2, Option 3">
            </div>
            <div class="flex items-center gap-3">
                <input type="checkbox" name="questions[${questionCount}][is_mandatory]" id="mandatory${questionCount}" class="rounded border-gray-300">
                <label for="mandatory${questionCount}" class="text-sm text-gray-700">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-3').querySelector('.options-container');
    const type = select.value;
    optionsContainer.style.display = ['radio', 'checkbox'].includes(type) ? 'block' : 'none';
}

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