@extends('crm.layouts.app')

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

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="min-w-0 flex-1">
            <nav class="flex mb-4" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ route('crm.health-questionnaires.index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"></path>
                            </svg>
                            Health Questionnaires
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                            </svg>
                            <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">Create Questionnaire</span>
                        </div>
                    </li>
                </ol>
            </nav>
            <h1 class="text-2xl font-semibold text-gray-900">Create Health Questionnaire</h1>
            <p class="mt-2 text-sm text-gray-700">Create a new health questionnaire for client screening</p>
        </div>
    </div>

    <!-- Form -->
    <form action="{{ route('crm.health-questionnaires.store') }}" method="POST" id="questionnaireForm" class="mt-8">
        @csrf

        <div class="grid grid-cols-1 gap-x-8 gap-y-8 lg:grid-cols-3">
            <div class="lg:col-span-2 space-y-8">
                <!-- Basic Information -->
                <div class="overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h2 class="text-base font-semibold text-gray-900 mb-6">Basic Information</h2>

                        <div class="space-y-6">
                            <div>
                                <label for="title" class="block text-sm font-medium text-gray-900">
                                    Questionnaire Title <span class="text-red-500">*</span>
                                </label>
                                <div class="mt-2">
                                    <input type="text"
                                           id="title"
                                           name="title"
                                           value="{{ old('title') }}"
                                           class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 placeholder:text-gray-400 shadow-xs inset-ring-1 inset-ring-gray-300 focus:inset-ring-2 focus:inset-ring-indigo-600 @error('title') inset-ring-red-300 @enderror"
                                           required>
                                    @error('title')
                                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <div>
                                <label for="description" class="block text-sm font-medium text-gray-900">Description</label>
                                <div class="mt-2">
                                    <textarea id="description"
                                              name="description"
                                              rows="3"
                                              class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 placeholder:text-gray-400 shadow-xs inset-ring-1 inset-ring-gray-300 focus:inset-ring-2 focus:inset-ring-indigo-600 @error('description') inset-ring-red-300 @enderror"
                                              placeholder="Describe the purpose of this questionnaire...">{{ old('description') }}</textarea>
                                    @error('description')
                                        <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Questions -->
                <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <div class="flex items-center justify-between mb-6">
                            <h2 class="text-base font-semibold text-gray-900">Questions</h2>
                            <button type="button" class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500" onclick="addQuestion()">
                                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                                    <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                                </svg>
                                Add Question
                            </button>
                        </div>

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

            <!-- Settings Sidebar -->
            <div class="space-y-8">
                <div class="overflow-hidden bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h2 class="text-base font-semibold text-gray-900 mb-6">Settings</h2>

                        <div class="space-y-6">
                            <div class="flex items-center gap-x-3">
                                <input type="checkbox"
                                       id="is_active"
                                       name="is_active"
                                       value="1"
                                       class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
                                       {{ old('is_active', true) ? 'checked' : '' }}>
                                <label for="is_active" class="text-sm font-medium text-gray-900">
                                    Active
                                </label>
                            </div>

                            <div class="flex gap-x-3">
                                <a href="{{ route('crm.health-questionnaires.index') }}" class="flex-1 rounded-md bg-white px-3 py-2 text-center text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                                    Cancel
                                </a>
                                <button type="submit" class="flex-1 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                                    Create
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Question Template -->
<template id="question-template">
    <div class="question-item bg-gray-50 shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg border-l-4 border-indigo-500">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-start justify-between mb-6">
                <h4 class="text-base font-semibold text-gray-900">Question <span class="question-number">1</span></h4>
                <button type="button" class="inline-flex items-center rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-red-500" onclick="removeQuestion(this)">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-4">
                        <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div class="md:col-span-1">
                    <label class="block text-sm font-medium text-gray-900 mb-2">Question Text</label>
                    <input type="text"
                           class="question-text block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 placeholder:text-gray-400 shadow-xs inset-ring-1 inset-ring-gray-300 focus:inset-ring-2 focus:inset-ring-indigo-600"
                           name="questions[0][question]"
                           placeholder="Enter your question..."
                           required>
                </div>
                <div class="md:col-span-1" x-data="{
                    open: false,
                    selected: '',
                    options: {
                        'multiple_choice': 'Multiple Choice',
                        'rating_scale': 'Rating Scale',
                        'yes_no': 'Yes/No',
                        'text_input': 'Text Input'
                    },
                    getLabel() {
                        return this.selected && this.options[this.selected] ? this.options[this.selected] : 'Select Type';
                    },
                    selectType(type) {
                        this.selected = type;
                        this.open = false;
                        handleTypeChange(this.$el.querySelector('input[type=hidden]'));
                    }
                }">
                    <label class="block text-sm font-medium text-gray-900 mb-2">Question Type</label>
                    <input type="hidden" class="question-type" name="questions[0][type]" :value="selected" required>

                    <div class="relative">
                        <button type="button"
                                @click="open = !open"
                                @click.away="open = false"
                                class="inline-flex w-full justify-between gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                            <span x-text="getLabel()" :class="{ 'text-gray-400': !selected }"></span>
                            <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="-mr-1 size-5 text-gray-400">
                                <path d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
                            </svg>
                        </button>

                        <div x-show="open"
                             x-transition:enter="transition ease-out duration-100"
                             x-transition:enter-start="transform opacity-0 scale-95"
                             x-transition:enter-end="transform opacity-100 scale-100"
                             x-transition:leave="transition ease-in duration-75"
                             x-transition:leave-start="transform opacity-100 scale-100"
                             x-transition:leave-end="transform opacity-0 scale-95"
                             class="absolute right-0 z-50 mt-2 w-full origin-top-right rounded-md bg-white shadow-lg outline-1 outline-black/5"
                             style="display: none;">
                            <div class="py-1">
                                <button type="button" @click="selectType('multiple_choice')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden" :class="{ 'bg-gray-100': selected === 'multiple_choice' }">Multiple Choice</button>
                                <button type="button" @click="selectType('rating_scale')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden" :class="{ 'bg-gray-100': selected === 'rating_scale' }">Rating Scale</button>
                                <button type="button" @click="selectType('yes_no')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden" :class="{ 'bg-gray-100': selected === 'yes_no' }">Yes/No</button>
                                <button type="button" @click="selectType('text_input')" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-hidden" :class="{ 'bg-gray-100': selected === 'text_input' }">Text Input</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <label class="block text-sm font-medium text-gray-900 mb-2">Risk Weight (0-10)</label>
                    <input type="number"
                           class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 placeholder:text-gray-400 shadow-xs inset-ring-1 inset-ring-gray-300 focus:inset-ring-2 focus:inset-ring-indigo-600"
                           name="questions[0][risk_weight]"
                           min="0"
                           max="10"
                           value="0"
                           placeholder="0">
                </div>
                <div class="flex items-center pt-8">
                    <input type="checkbox"
                           class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
                           name="questions[0][required]"
                           value="1"
                           checked>
                    <label class="ml-3 text-sm font-medium text-gray-900">
                        Required
                    </label>
                </div>
            </div>

            <div class="options-container" style="display: none;">
                <label class="block text-sm font-medium text-gray-900 mb-2">Options</label>
                <div class="options-list space-y-2">
                    <!-- Options will be added here -->
                </div>
                <button type="button" class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 mt-2" onclick="addOption(this)">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                        <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
                    </svg>
                    Add Option
                </button>
            </div>
        </div>
    </div>
</template>
@endsection

<script>
    let questionIndex = 0;

    function addQuestion() {
        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[name], select[name]');
        inputs.forEach(input => {
            if (input.name) {
                input.name = input.name.replace('[0]', `[${questionIndex}]`);
            }
        });

        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[name], select[name]');
            inputs.forEach(input => {
                if (input.name) {
                    input.name = input.name.replace(/\[\d+\]/, `[${index}]`);
                }
            });
        });
    }

    function handleTypeChange(input) {
        const optionsContainer = input.closest('.question-item').querySelector('.options-container');
        const value = input.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 gap-x-2">
                <input type="text" class="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 placeholder:text-gray-400 shadow-xs inset-ring-1 inset-ring-gray-300 focus:inset-ring-2 focus:inset-ring-indigo-600 flex-1" name="questions[${questionIndex}][options][${optionIndex}]" placeholder="Option ${optionIndex + 1}" required>
                <button type="button" class="inline-flex items-center rounded-md bg-red-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-xs hover:bg-red-500" onclick="removeOption(this)">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="size-4">
                        <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
                    </svg>
                </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.');
        }
    }

    // Add initial question when page loads
    document.addEventListener('DOMContentLoaded', function() {
        addQuestion();
    });
</script>