@extends('layouts.admin-layout')
@section('title') Add Categories
@endsection
@section('content')
    <style>
        .color-select {
            max-width: 150px;

        }

        .form-group input {
            font-size: 16px !important;
        }

        .question-children {
            margin-left: 30px; /* indent child questions */
            padding-left: 20px;
            border-left: 2px dashed #ccc; /* vertical line for tree */
        }

        .question-block {
            background: #f9f9f9;
            border-radius: 6px;
        }

        .question-block .question-block {
            background: #fff; /* nested levels ka background thoda different */
        }

    </style>
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <div class="card card-box-shadow mt-4">

                            <div class="card-header">

                                <h3 class="card-title">Add Categories</h3>
                                <a href="{{route('admin.category.list')}}">
                                    <button
                                            class="btn btn-primary custom_btn_sm_back custom_btn btn-sm float-right">
                                        <i class="fas fa-arrow-circle-left"></i>
                                        Back
                                    </button>
                                </a>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('admin.consultation.update', $category->id) }}" method="POST">
                                    @csrf
                                    <div id="deleted-sections"></div>
                                    <div id="deleted-question"></div>
                                    @php
                                        // Check if **any section has consultation_type_id null**
                                        $showSectionLabel = $category->sections->contains(function($section) {
                                            return is_null($section->consultation_type_id);
                                        });
                                    @endphp

                                    <div class="form-group">
                                        <label for="Name">Category Name:</label>
                                        <label class="form-check-label ml-5">
                                            <input type="checkbox" id="show-section-label-checkbox"
                                                   class="form-check-input"
                                                   value=""
                                                {{ $showSectionLabel ? 'checked' : '' }}>
                                            Show The Section Label
                                        </label>
                                        <input type="text" class="form-control" value="{{ $category->category_name }}" readonly>
                                    </div>

                                    {{-- Consultation Type Select --}}
                                    <div class="form-group" id="consultation-type-container" style="{{ $showSectionLabel ? 'display:none;' : '' }}">
                                        <label>Select Consultation Type</label>
                                        <select id="consultation-type" class="form-control">
                                            <option value="" disabled selected>-- Select Consultation Type --</option>
                                            @forelse($get_consultation_tab_types as $consultation_tab_type)
                                                <option value="{{ $consultation_tab_type->id }}" data-type="{{ strtolower($consultation_tab_type->slug) }}">
                                                    {{ $consultation_tab_type->type_name }}
                                                </option>
                                            @empty
                                                <option disabled>Consultation Type Not Available</option>
                                            @endforelse
                                        </select>
                                    </div>

                                    {{-- Section Label (Checkbox Flow) --}}
                                    <div class="form-group" id="section-label-container-direct" style="display: none;">
                                        <label for="section-label-direct">Select Section Label</label>
                                        <select id="section-label-direct" class="form-control">
                                            <option value="">-- Select Section Label --</option>
                                            <option value="Tell us about yourself">Tell us about yourself</option>
                                            <option value="About Your Symptoms">About Your Symptoms</option>
                                            <option value="Your Health Information">Your Health Information</option>
                                            <option value="Your Current Medication">Your Current Medication</option>
                                            <option value="Patient Declaration & Consent">Patient Declaration & Consent</option>
                                        </select>
                                    </div>

                                    {{-- Section Label (Consultation Type Flow) --}}
                                    <div class="form-group" id="section-label-container-consultation" style="display: none;">
                                        <label for="section-label-consultation">Select Section Label</label>
                                        <select id="section-label-consultation" class="form-control">
                                            <option value="">-- Select Section Label --</option>
                                            <option value="Tell us about yourself">Tell us about yourself</option>
                                            <option value="About Your Symptoms">About Your Symptoms</option>
                                            <option value="Your Health Information">Your Health Information</option>
                                            <option value="Your Current Medication">Your Current Medication</option>
                                            <option value="Patient Declaration & Consent">Patient Declaration & Consent</option>
                                        </select>
                                    </div>

                                    {{-- Dynamic Form Container --}}
                                    <div id="form-container">
                                        @foreach($category->sections as $section)
                                            <div class="card my-3"
                                                 id="section-{{ Str::slug($section->title) }}"
                                                 data-consultation-type="{{ $section->consultationType->slug ?? 'oral' }}">
                                                <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
                                                    <div>
                                                        <strong>{{ $section->title }}</strong>
                                                         @if(!empty($section->consultationType->type_name))
                                                        <span class="badge badge-warning ml-2">
                                                        {{ strtoupper($section->consultationType->type_name ?? '' )}}
                                                            </span>
                                                        @endif
                                                    </div>

                                                    {{-- Hidden Inputs --}}
                                                    <input type="hidden" name="sections[{{ $section->title }}][title]" value="{{ $section->title }}">
                                                    <input type="hidden" name="sections[{{ $section->title }}][section_id]" value="{{ $section->id }}">
                                                    <input type="hidden" name="sections[{{ $section->title }}][consultation_type_id]" value="{{ $section->consultation_type_id ?? '' }}">

                                                    <div>
                                                        <button type="button" class="btn btn-sm btn-light add-question-main" data-section="{{ $section->title }}">
                                                            + Add Question
                                                        </button>
                                                        <button type="button" class="btn btn-sm btn-danger remove-section" data-section-id="{{ $section->id }}" data-section="section-{{ Str::slug($section->title) }}">
                                                            Remove Section
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="card-body question-list">
                                                    @include('admin.includes.question-tree', [
                                                        'questions' => $section->questions,
                                                        'section' => $section
                                                    ])
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="text-center mt-3 mb-2">
                                        <button class="btn btn-primary custom_btn">
                                            <i class="fa-solid fa-cloud-arrow-up"></i> Submit
                                        </button>
                                    </div>
                                </form>
                            </div>

                        </div>
                        <!-- /.card-body -->
                    </div>

                </div>
            </div>
            <!-- /.col -->
        </section>
        <!-- /.row -->
    </div>

@endsection
@section('script')

    <script>
        $(document).ready(function () {

            let currentConsultationType = '';
            let currentConsultationTypeId = '';
            let showSectionLabel = false;

            // Initialize Summernote
            function initSummernote(selector = '.summernote') {
                $(selector).each(function () {
                    if (!$(this).next('.note-editor').length) {
                        $(this).summernote({
                            placeholder: 'Hello Admin',
                            tabsize: 2,
                            height: 100
                        });
                    }
                });
            }

            initSummernote('textarea[name*="notes"]');

            // Slugify Helper
            function slugify(text) {
                return text.toString().toLowerCase()
                    .replace(/\s+/g, '-')
                    .replace(/[^\w\-]+/g, '')
                    .replace(/\-\-+/g, '-')
                    .replace(/^-+/, '')
                    .replace(/-+$/, '');
            }

            // Helper → Generate name path
            function makeNamePath(section, indexes, field) {
                let path = `sections[${section}][questions]`;
                indexes.forEach(i => {
                    path += `[${i}][children]`;
                });
                path = path.replace(/\[children\]$/, '');
                return `${path}[${field}]`;
            }

            // ========================================
            // Show Section Label Checkbox Toggle
            // ========================================
            $('#show-section-label-checkbox').change(function () {
                showSectionLabel = $(this).is(':checked');

                if (showSectionLabel) {
                    $('#consultation-type-container').hide();
                    $('#section-label-container-direct').show();
                    $('#section-label-container-consultation').hide();

                    $('#consultation-type').val('');
                    currentConsultationType = '';
                    currentConsultationTypeId = '';
                } else {
                    $('#consultation-type-container').show();
                    $('#section-label-container-direct').hide();
                    $('#section-label-container-consultation').hide();

                    $('#section-label-direct').val('');
                    $('#section-label-consultation').val('');
                }
            });

            // ========================================
            // Consultation Type Change
            // ========================================
            $('#consultation-type').change(function () {
                let $selectedOption = $(this).find('option:selected');
                let consultationTypeId = $(this).val();
                let consultationType = $selectedOption.data('type');

                currentConsultationType = consultationType;
                currentConsultationTypeId = consultationTypeId;

                if (!consultationTypeId) {
                    $('#section-label-container-consultation').hide();
                    return;
                }

                $('#section-label-container-consultation').show();
            });

            // ========================================
            // Add Section - Direct
            // ========================================
            $('#section-label-direct').change(function () {
                let sectionLabel = $(this).val();
                if (!sectionLabel) return;
                addSectionCard(sectionLabel, 'direct', null);
                $(this).val('');
            });

            // ========================================
            // Add Section - Consultation Based
            // ========================================
            $('#section-label-consultation').change(function () {
                let sectionLabel = $(this).val();
                if (!sectionLabel || !currentConsultationType) return;
                addSectionCard(sectionLabel, currentConsultationType, currentConsultationTypeId);
                $(this).val('');
            });

            // ========================================
            // Add Section Card Function
            // ========================================
            function addSectionCard(sectionLabel, consultationType, consultationTypeId) {
                let sectionId = 'section-' + slugify(sectionLabel);

                // Check if section with same label AND consultation type exists
                let existingSection;
                if (consultationType === 'direct') {
                    existingSection = $(`#${sectionId}[data-consultation-type="direct"]`);
                } else {
                    existingSection = $(`[data-consultation-type="${consultationType}"]`).filter(function() {
                        return $(this).find('.card-header strong').first().text().trim() === sectionLabel;
                    });
                }

                if (existingSection.length === 0) {
                    // Create unique section ID if consultation type is provided
                    if (consultationType !== 'direct' && consultationTypeId) {
                        sectionId = sectionId + '-' + consultationType;
                    }

                    let consultationBadge = consultationType !== 'direct'
                        ? `<span class="badge badge-warning ml-2">${consultationType.toUpperCase().replace(/-/g, ' ')}</span>`
                        : '';

                    let consultationTypeInput = consultationType !== 'direct'
                        ? `<input type="hidden" name="sections[${sectionLabel}-${consultationType}][consultation_type]" value="${consultationType}">
           <input type="hidden" name="sections[${sectionLabel}-${consultationType}][consultation_type_id]" value="${consultationTypeId}">`
                        : '';

                    // Use unique section key for naming when consultation type exists
                    let sectionKey = consultationType !== 'direct' ? `${sectionLabel}-${consultationType}` : sectionLabel;

                    let newSection = $(`
<div class="card my-3" id="${sectionId}" data-consultation-type="${consultationType}">
<div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
    <div>
        <strong>${sectionLabel}</strong>
        ${consultationBadge}
    </div>
    <input type="hidden" name="sections[${sectionKey}][title]" value="${sectionLabel}">
    ${consultationTypeInput}
    <div>
        <button type="button" class="btn btn-sm btn-light add-question-main" data-section="${sectionKey}">
            + Add Question
        </button>
        <button type="button" class="btn btn-sm btn-danger remove-section" data-section="${sectionId}" data-consultation-type="${consultationType}">
            Remove Section
        </button>
    </div>
</div>
<div class="card-body question-list"></div>
</div>
    `);
                    $('#form-container').append(newSection);
                } else {
                    alert('This section already exists for the selected consultation type!');
                }
            }

            // ========================================
            // Create Question Block
            // ========================================
            function createQuestionBlock(section, indexes, level = 1, label = "Question", questionId = '') {
                return `
<div class="border p-3 mb-3 question-block"
 data-level="${level}"
 data-indexes='${JSON.stringify(indexes)}'
 ${questionId ? `data-question-id="${questionId}"` : ''}>

${questionId ? `<input type="hidden" name="${makeNamePath(section, indexes, 'question_id')}" value="${questionId}">` : ''}

<div class="d-flex justify-content-between">
<h6>${label} (Level ${level})</h6>
<div>
  <button type="button" class="btn btn-sm btn-success add-question-loop">+ Add Question</button>
  <button type="button" class="btn btn-sm btn-danger ${questionId ? 'existing-remove-question' : 'remove-question'}"
          ${questionId ? `data-question-id="${questionId}"` : ''}>
    Remove
  </button>
</div>
</div>

<div class="form-group mt-2">
<input type="text" class="form-control"
       name="${makeNamePath(section, indexes, 'text')}"
       placeholder="Enter question" required>
</div>

<div class="form-group">
<label>Question Type</label>
<select class="form-control question-type"
        name="${makeNamePath(section, indexes, 'type')}" required>
  <option value="">-- Select Type --</option>
  <option value="text">Text (Input Field)</option>
  <option value="text+textarea">Input + Textarea</option>
  <option value="toggle-buttons">Toggle Buttons + Inputs</option>
  <option value="multi-radio">Multiple Radio Options</option>
</select>
</div>

<div class="dynamic-fields"></div>
<div class="question-children pl-4 mt-3"></div>
</div>
`;
            }

            // Add Question → Section Level
            $(document).on('click', '.add-question-main', function () {
                let section = $(this).data('section');
                let sectionId = '#section-' + slugify(section);
                let questionIndex = $(sectionId + ' > .card-body > .question-block').length;
                let indexes = [questionIndex];
                $(sectionId).find('.question-list').append(
                    createQuestionBlock(section, indexes, 1, "New Question")
                );
            });

            // Add Question → Inside Loop
            $(document).on('click', '.add-question-loop', function () {
                let parentBlock = $(this).closest('.question-block');
                let parentIndexes = JSON.parse(parentBlock.attr('data-indexes'));
                let section = parentBlock.closest('.card').find('strong').first().text();
                let childCount = parentBlock.find('> .question-children > .question-block').length;
                let newIndexes = [...parentIndexes, childCount];
                let level = parseInt(parentBlock.data('level')) + 1;
                parentBlock.find('> .question-children').append(
                    createQuestionBlock(section, newIndexes, level, "Loop Question")
                );
            });

            // Remove Question
            $(document).on('click', '.remove-question', function () {
                $(this).closest('.question-block').remove();
            });

            // Remove Section
            $(document).on('click', '.remove-section', function () {
                let sectionRemove = $(this).data('section');
                let sectionId = $(this).data('section-id');

                $('#' + sectionRemove).remove();

                if (sectionId) {
                    $('#deleted-sections').append(
                        `<input type="hidden" name="deleted_sections[]" value="${sectionId}">`
                    );
                }
            });

            // Remove EXISTING question (DB)
            $(document).on('click', '.existing-remove-question', function (e) {
                e.preventDefault();
                let questionId = $(this).data('question-id');
                if (!questionId) return;

                let $questionBlock = $(this).closest('.question-block');
                $questionBlock.slideUp(200, function () {
                    $(this).remove();
                });

                if (!$('#deleted-question').length) {
                    $('form').prepend('<div id="deleted-question"></div>');
                }

                if (!$(`input[name="deleted_questions[]"][value="${questionId}"]`).length) {
                    $('#deleted-question').append(
                        `<input type="hidden" name="deleted_questions[]" value="${questionId}">`
                    );
                }
            });

            // ========================================
            // HELPER FUNCTIONS
            // ========================================

            function addInputWithColor(container, section, indexes) {
                container.append(`
<div class="d-flex align-items-start mb-2 answer-field">
<div class="flex-fill">
    <input type="text" class="form-control answer-input"
           name="${makeNamePath(section, indexes, 'answer')}"
           placeholder="Answer (Text)" required>
</div>
<select class="form-control color-select ml-2"
        name="${makeNamePath(section, indexes, 'color')}" required>
    <option value="alert-success">Success</option>
    <option value="alert-info">Info</option>
    <option value="alert-warning">Warning</option>
    <option value="alert-danger">Danger</option>
    <option value="alert-primary">Primary</option>
    <option value="alert-secondary">Secondary</option>
</select>
</div>

<div class="form-group mt-2">
<label>Answer Required?</label><br>
<label class="mr-3">
    <input type="radio" name="${makeNamePath(section, indexes, 'btn_status')}" value="yes" checked> Yes
</label>
<label>
    <input type="radio" name="${makeNamePath(section, indexes, 'btn_status')}" value="no"> No
</label>
</div>
`);
            }

            // ✅ Toggle Buttons Config
            function addToggleButtonConfig(container, section, indexes) {
                container.append(`
<div class="toggle-button-config border p-3 mb-3">
    <h6>Configure Toggle Buttons</h6>

    <!-- Button 1 Config -->
    <div class="mb-3 border-bottom pb-3">
        <label><strong>Button 1 Text:</strong></label>
        <input type="text" class="form-control"
               name="${makeNamePath(section, indexes, 'field_config')}[btn1_text]"
               value="cm"
               placeholder="Button 1 text (e.g., cm, kg)">

        <label class="mt-2">Number of Inputs for Button 1:</label>
        <input type="number" class="form-control btn1-inputs"
               name="${makeNamePath(section, indexes, 'field_config')}[btn1_inputs]"
               value="1" min="1" max="5"
               placeholder="Number of inputs">

        <div class="btn1-input-labels mt-2">
            <input type="text" class="form-control"
                   name="${makeNamePath(section, indexes, 'field_config')}[btn1_input_labels][]"
                   value="cm"
                   placeholder="Input 1 suffix">
        </div>
    </div>

    <!-- Button 2 Config -->
    <div class="mb-3">
        <label><strong>Button 2 Text:</strong></label>
        <input type="text" class="form-control"
               name="${makeNamePath(section, indexes, 'field_config')}[btn2_text]"
               value="feet/inches"
               placeholder="Button 2 text (e.g., feet/inches, stones/pounds)">

        <label class="mt-2">Number of Inputs for Button 2:</label>
        <input type="number" class="form-control btn2-inputs"
               name="${makeNamePath(section, indexes, 'field_config')}[btn2_inputs]"
               value="1" min="1" max="5"
               placeholder="Number of inputs">

        <div class="btn2-input-labels mt-2">
            <input type="text" class="form-control"
                   name="${makeNamePath(section, indexes, 'field_config')}[btn2_input_labels][]"
                   value="feet/inches"
                   placeholder="Input 1 suffix">
        </div>
    </div>
</div>
`);
            }

            // ✅ Multi Radio Config with Dynamic Options
            function addMultiRadioConfig(container, section, indexes) {
                container.append(`
<div class="multi-radio-config border p-3 mb-3">
    <h6>Configure Radio Options</h6>
    <div class="radio-options-list">
        <div class="radio-option-item mb-2 d-flex">
            <input type="text" class="form-control"
                   name="${makeNamePath(section, indexes, 'field_config')}[radio_options][]"
                   placeholder="Radio option text">
            <button type="button" class="btn btn-sm btn-danger ml-2 remove-radio-option">×</button>
        </div>
    </div>
    <button type="button" class="btn btn-sm btn-success add-radio-option">+ Add Radio Option</button>
</div>
`);
            }

            function addTextarea(container, section, indexes) {
                const newTextarea = $(`
<div class="mb-2">
<textarea class="form-control summernote"
          name="${makeNamePath(section, indexes, 'notes')}"
          rows="3" placeholder="Extra Notes"></textarea>
</div>
`);
                container.append(newTextarea);
                initSummernote(newTextarea.find('.summernote'));
            }

            // ========================================
            // Question Type Change Handler
            // ========================================
            $(document).on('change', '.question-type', function (e) {
                e.stopPropagation();

                let $this = $(this);
                let type = $this.val();
                let qBlock = $this.closest('.question-block');
                let container = qBlock.find('> .dynamic-fields');

                container.empty();

                let section = qBlock.closest('.card').find('strong').first().text();
                let indexes = JSON.parse(qBlock.attr('data-indexes'));

                if (type === "text") {
                    addInputWithColor(container, section, indexes);
                }
                else if (type === "text+textarea") {
                    addInputWithColor(container, section, indexes);
                    addTextarea(container, section, indexes);
                }
                else if (type === "toggle-buttons") {
                    addToggleButtonConfig(container, section, indexes);
                }
                else if (type === "multi-radio") {
                    addMultiRadioConfig(container, section, indexes);
                }
            });

            // ========================================
            // Dynamic Input Label Management for Toggle Buttons
            // ========================================
            $(document).on('input', '.btn1-inputs, .btn2-inputs', function() {
                let $this = $(this);
                let count = parseInt($this.val()) || 1;
                if (count > 5) count = 5; // Max limit
                if (count < 1) count = 1; // Min limit

                let $container = $this.closest('.mb-3, .border-bottom').find('.btn1-input-labels, .btn2-input-labels');
                let qBlock = $this.closest('.question-block');
                let section = qBlock.closest('.card').find('strong').first().text();
                let indexes = JSON.parse(qBlock.attr('data-indexes'));

                let isBtn1 = $this.hasClass('btn1-inputs');
                let fieldName = isBtn1 ? 'btn1_input_labels' : 'btn2_input_labels';

                $container.empty();
                for (let i = 0; i < count; i++) {
                    $container.append(`
                    <input type="text" class="form-control ${i > 0 ? 'mt-2' : ''}"
                           name="${makeNamePath(section, indexes, 'field_config')}[${fieldName}][]"
                           placeholder="Input ${i+1} suffix (e.g., cm, st, lb)">
                `);
                }
            });

            // ========================================
            // Add Radio Option
            // ========================================
            $(document).on('click', '.add-radio-option', function() {
                let $list = $(this).siblings('.radio-options-list');
                let qBlock = $(this).closest('.question-block');
                let section = qBlock.closest('.card').find('strong').first().text();
                let indexes = JSON.parse(qBlock.attr('data-indexes'));

                $list.append(`
                <div class="radio-option-item mb-2 d-flex">
                    <input type="text" class="form-control"
                           name="${makeNamePath(section, indexes, 'field_config')}[radio_options][]"
                           placeholder="Radio option text">
                    <button type="button" class="btn btn-sm btn-danger ml-2 remove-radio-option">×</button>
                </div>
            `);
            });

            // Remove Radio Option
            $(document).on('click', '.remove-radio-option', function() {
                let $list = $(this).closest('.radio-options-list');
                if ($list.find('.radio-option-item').length > 1) {
                    $(this).closest('.radio-option-item').remove();
                } else {
                    alert('At least one radio option is required!');
                }
            });

            // Change Answer Color
            $(document).on('change', '.color-select', function () {
                let selectedColor = $(this).val();
                $(this).closest('.answer-field').find('.answer-input').css('color', selectedColor);
            });

        });
    </script>

@endsection