@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-plus-circle text-indigo-600 text-xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900">Create Questionnaire Template</h1>
                            <p class="mt-1 text-sm text-gray-500">Add a new questionnaire template</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.store') }}">
                @csrf

                <!-- 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') }}" 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') }}</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') == $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">
                        <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">1</span>
                                    </div>
                                    <h3 class="font-semibold text-gray-900">Question 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" style="display: none;" 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[0][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[0][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[0][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[0][is_mandatory]" value="0">
                                    <input type="checkbox" name="questions[0][is_mandatory]" id="mandatory0" value="1" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    <label for="mandatory0" class="text-sm text-gray-700 cursor-pointer">This is a mandatory question</label>
                                </div>
                            </div>
                        </div>
                    </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> Create Template
                    </button>
                    <a href="{{ route('questionnaires.index') }}" 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 = 1;

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() {
    document.querySelectorAll('select[name*="[question_type]"]').forEach(select => {
        toggleOptions(select);
    });
    updateRemoveButtons();
});
</script>
@endsection