@extends('crm.layouts.app')

@section('title', 'Edit Health Questionnaire')

@section('content')
<div class="space-y-8">
    <!-- Page Header -->
    <div class="content-card">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-primary">
                    <i class="fas fa-edit mr-3"></i>Edit Health Questionnaire
                </h1>
                <p class="text-secondary mt-2">Update the questionnaire details and questions</p>
            </div>
            <div class="flex space-x-4">
                <a href="{{ route('crm.health-questionnaires.show', $healthQuestionnaire) }}" class="btn-secondary">
                    <i class="fas fa-eye mr-2"></i>View Questionnaire
                </a>
                <a href="{{ route('crm.health-questionnaires.index') }}" class="btn-info">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Questionnaires
                </a>
            </div>
        </div>
    </div>

    @if($errors->any())
        <div class="bg-red-600 text-white p-4 rounded-lg">
            <h4 class="font-semibold mb-2">Please fix the following errors:</h4>
            <ul class="list-disc list-inside">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <!-- Form -->
    <div class="content-card">
        <form action="{{ route('crm.health-questionnaires.update', $healthQuestionnaire) }}" method="POST" id="questionnaireForm" class="space-y-6">
            @csrf
            @method('PUT')

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="lg:col-span-2 space-y-6">
                    <div>
                        <label for="title" class="block text-sm font-medium text-secondary mb-2">
                            Questionnaire Title <span class="text-red-500">*</span>
                        </label>
                        <input type="text"
                               id="title"
                               name="title"
                               value="{{ old('title', $healthQuestionnaire->title) }}"
                               class="form-input @error('title') border-red-500 @enderror"
                               required>
                        @error('title')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="description" class="block text-sm font-medium text-secondary mb-2">Description</label>
                        <textarea id="description"
                                  name="description"
                                  rows="3"
                                  class="form-input @error('description') border-red-500 @enderror"
                                  placeholder="Describe the purpose of this questionnaire...">{{ old('description', $healthQuestionnaire->description) }}</textarea>
                        @error('description')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-primary">Questions</h3>
                            <button type="button" class="btn-primary btn-sm" onclick="addQuestion()">
                                <i class="fas fa-plus mr-2"></i>Add Question
                            </button>
                        </div>

                        <div id="questions-container" class="space-y-4">
                            <!-- Existing questions will be loaded here -->
                        </div>
                    </div>
                </div>

                <div class="content-card">
                    <h3 class="text-lg font-semibold text-primary mb-4">Settings</h3>

                    <div class="space-y-4">
                        <div class="flex items-center">
                            <input type="checkbox"
                                   id="is_active"
                                   name="is_active"
                                   value="1"
                                   class="form-checkbox"
                                   {{ old('is_active', $healthQuestionnaire->is_active) ? 'checked' : '' }}>
                            <label for="is_active" class="ml-2 text-sm text-secondary">
                                Active
                            </label>
                        </div>

                        <div>
                            <button type="submit" class="btn-primary w-full">
                                <i class="fas fa-save mr-2"></i>Update Questionnaire
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Question Template -->
<template id="question-template">
    <div class="question-item content-card border-l-4 border-blue-500">
        <div class="flex items-start justify-between mb-4">
            <h4 class="text-lg font-semibold text-primary">Question <span class="question-number">1</span></h4>
            <button type="button" class="btn-danger btn-sm" onclick="removeQuestion(this)">
                <i class="fas fa-trash"></i>
            </button>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div class="md:col-span-1">
                <label class="block text-sm font-medium text-secondary mb-2">Question Text</label>
                <input type="text"
                       class="form-input"
                       name="questions[0][question]"
                       placeholder="Enter your question..."
                       required>
            </div>
            <div class="md:col-span-1">
                <label class="block text-sm font-medium text-secondary mb-2">Question Type</label>
                <select class="form-input" name="questions[0][type]" onchange="handleTypeChange(this)" required>
                    <option value="">Select Type</option>
                    <option value="multiple_choice">Multiple Choice</option>
                    <option value="rating_scale">Rating Scale</option>
                    <option value="yes_no">Yes/No</option>
                    <option value="text_input">Text Input</option>
                </select>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
            <div>
                <label class="block text-sm font-medium text-secondary mb-2">Risk Weight (0-10)</label>
                <input type="number"
                       class="form-input"
                       name="questions[0][risk_weight]"
                       min="0"
                       max="10"
                       value="0"
                       placeholder="0">
            </div>
            <div class="flex items-center pt-6">
                <input type="checkbox"
                       class="form-checkbox"
                       name="questions[0][required]"
                       value="1"
                       checked>
                <label class="ml-2 text-sm text-secondary">
                    Required
                </label>
            </div>
        </div>

        <div class="options-container" style="display: none;">
            <label class="block text-sm font-medium text-secondary mb-2">Options</label>
            <div class="options-list space-y-2">
                <!-- Options will be added here -->
            </div>
            <button type="button" class="btn-secondary btn-sm mt-2" onclick="addOption(this)">
                <i class="fas fa-plus mr-2"></i>Add Option
            </button>
        </div>
    </div>
</template>
@endsection

<script>
    let questionIndex = 0;
    const existingQuestions = @json(old('questions', $healthQuestionnaire->questions ?? []));

    function addQuestion(questionData = null) {
        const template = document.getElementById('question-template');
        const container = document.getElementById('questions-container');
        const questionElement = template.content.cloneNode(true);

        // Update question number
        questionElement.querySelector('.question-number').textContent = questionIndex + 1;

        // Update field names
        const inputs = questionElement.querySelectorAll('input, select');
        inputs.forEach(input => {
            if (input.name) {
                input.name = input.name.replace('[0]', `[${questionIndex}]`);
            }
        });

        // Pre-fill with existing data if editing
        if (questionData) {
            questionElement.querySelector('input[name$="[question]"]').value = questionData.question || '';
            questionElement.querySelector('select[name$="[type]"]').value = questionData.type || '';
            questionElement.querySelector('input[name$="[risk_weight]"]').value = questionData.risk_weight || 0;
            questionElement.querySelector('input[name$="[required]"]').checked = questionData.required || false;

            // Handle options for multiple choice questions
            if (questionData.type === 'multiple_choice' && questionData.options) {
                const optionsContainer = questionElement.querySelector('.options-container');
                optionsContainer.style.display = 'block';
                const optionsList = optionsContainer.querySelector('.options-list');

                questionData.options.forEach((option, optionIndex) => {
                    const optionHtml = `
                        <div class="option-item flex items-center space-x-2">
                            <input type="text" class="form-input flex-1" name="questions[${questionIndex}][options][${optionIndex}]" value="${option}" required>
                            <button type="button" class="btn-danger btn-sm" onclick="removeOption(this)">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    `;
                    optionsList.insertAdjacentHTML('beforeend', optionHtml);
                });
            }
        }

        container.appendChild(questionElement);
        questionIndex++;
    }

    function removeQuestion(button) {
        if (document.querySelectorAll('.question-item').length > 1) {
            button.closest('.question-item').remove();
            updateQuestionNumbers();
        } else {
            alert('At least one question is required.');
        }
    }

    function updateQuestionNumbers() {
        const questions = document.querySelectorAll('.question-item');
        questions.forEach((question, index) => {
            question.querySelector('.question-number').textContent = index + 1;

            // Update field names
            const inputs = question.querySelectorAll('input, select');
            inputs.forEach(input => {
                if (input.name) {
                    input.name = input.name.replace(/\[\d+\]/, `[${index}]`);
                }
            });
        });
    }

    function handleTypeChange(select) {
        const optionsContainer = select.closest('.question-item').querySelector('.options-container');
        const value = select.value;

        if (value === 'multiple_choice') {
            optionsContainer.style.display = 'block';
            // Add default options if none exist
            if (optionsContainer.querySelector('.options-list').children.length === 0) {
                addOption(optionsContainer.querySelector('button'));
                addOption(optionsContainer.querySelector('button'));
            }
        } else {
            optionsContainer.style.display = 'none';
        }
    }

    function addOption(button) {
        const optionsList = button.previousElementSibling;
        const questionItem = button.closest('.question-item');
        const questionIndex = Array.from(questionItem.parentNode.children).indexOf(questionItem);
        const optionIndex = optionsList.children.length;

        const optionHtml = `
            <div class="option-item flex items-center space-x-2">
                <input type="text" class="form-input flex-1" name="questions[${questionIndex}][options][${optionIndex}]" placeholder="Option ${optionIndex + 1}" required>
                <button type="button" class="btn-danger btn-sm" onclick="removeOption(this)">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;

        optionsList.insertAdjacentHTML('beforeend', optionHtml);
    }

    function removeOption(button) {
        const optionsList = button.closest('.options-list');
        if (optionsList.children.length > 1) {
            button.closest('.option-item').remove();
        } else {
            alert('At least one option is required for multiple choice questions.');
        }
    }

    // Load existing questions when page loads
    document.addEventListener('DOMContentLoaded', function() {
        if (existingQuestions && existingQuestions.length > 0) {
            existingQuestions.forEach(question => {
                addQuestion(question);
            });
        } else {
            addQuestion(); // Add one empty question if no existing questions
        }
    });
</script>