@php
    $indexes = $indexes ?? [];
@endphp

@foreach($questions as $qIndex => $question)
    @php
        $currentIndexes = array_merge($indexes, [$qIndex]);
        $fieldConfig = is_string($question->field_config) ? json_decode($question->field_config, true) : $question->field_config;

        $namePath = function($field) use ($section, $currentIndexes) {
            $path = "sections[" . $section->title . "][questions]";
            foreach ($currentIndexes as $i) {
                $path .= "[" . $i . "][children]";
            }
            $path = preg_replace('/\[children\]$/', '', $path);
            return $path . "[" . $field . "]";
        };
    @endphp

    <div class="border p-3 mb-3 question-block"
         data-indexes='{{ json_encode($currentIndexes) }}'
         data-level="{{ count($currentIndexes) }}"
         data-question-id="{{ $question->id }}">

        <div class="d-flex justify-content-between">
            <h6>Question (Level {{ count($currentIndexes) }})</h6>
            <div>
                <button type="button"
                        class="btn btn-sm btn-success add-question-loop"
                        data-parent-id="{{ $question->id }}">
                    + Add Question
                </button>

                <button type="button"
                        class="btn btn-sm btn-danger existing-remove-question"
                        data-question-id="{{ $question->id }}"
                        data-indexes='{{ json_encode($currentIndexes) }}'>
                    Remove Question
                </button>
            </div>
        </div>

        {{-- hidden ids --}}
        <input type="hidden" name="{{ $namePath('question_id') }}" value="{{ $question->id }}">
        <input type="hidden" name="{{ $namePath('answer_id') }}" value="{{ $question->answer->id ?? '' }}">

        {{-- Question text --}}
        <div class="form-group mt-2">
            <input type="text" class="form-control"
                   name="{{ $namePath('text') }}"
                   value="{{ $question->question }}">
        </div>

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

        {{-- Dynamic fields --}}
        <div class="dynamic-fields">
            @php $ans = $question->answer ?? null; @endphp

            {{-- TOGGLE BUTTONS TYPE --}}
            @if($question->type == 'toggle-buttons')
                <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="{{ $namePath('field_config') }}[btn1_text]"
                               value="{{ $fieldConfig['btn1_text'] ?? '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="{{ $namePath('field_config') }}[btn1_inputs]"
                               value="{{ $fieldConfig['btn1_inputs'] ?? 1 }}"
                               min="1" max="5">

                        <div class="btn1-input-labels mt-2">
                            @php
                                $btn1Labels = $fieldConfig['btn1_input_labels'] ?? ['cm'];
                            @endphp
                            @foreach($btn1Labels as $idx => $label)
                                <input type="text" class="form-control {{ $idx > 0 ? 'mt-2' : '' }}"
                                       name="{{ $namePath('field_config') }}[btn1_input_labels][]"
                                       value="{{ $label }}"
                                       placeholder="Input {{ $idx+1 }} suffix">
                            @endforeach
                        </div>
                    </div>

                    {{-- Button 2 Config --}}
                    <div class="mb-3">
                        <label><strong>Button 2 Text:</strong></label>
                        <input type="text" class="form-control"
                               name="{{ $namePath('field_config') }}[btn2_text]"
                               value="{{ $fieldConfig['btn2_text'] ?? '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="{{ $namePath('field_config') }}[btn2_inputs]"
                               value="{{ $fieldConfig['btn2_inputs'] ?? 1 }}"
                               min="1" max="5">

                        <div class="btn2-input-labels mt-2">
                            @php
                                $btn2Labels = $fieldConfig['btn2_input_labels'] ?? ['feet/inches'];
                            @endphp
                            @foreach($btn2Labels as $idx => $label)
                                <input type="text" class="form-control {{ $idx > 0 ? 'mt-2' : '' }}"
                                       name="{{ $namePath('field_config') }}[btn2_input_labels][]"
                                       value="{{ $label }}"
                                       placeholder="Input {{ $idx+1 }} suffix">
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- MULTI RADIO TYPE --}}
            @elseif($question->type == 'multi-radio')
                <div class="multi-radio-config border p-3 mb-3">
                    <h6>Configure Radio Options</h6>
                    <div class="radio-options-list">
                        @php
                            $radioOptions = $fieldConfig['radio_options'] ?? [''];
                        @endphp
                        @foreach($radioOptions as $option)
                            <div class="radio-option-item mb-2 d-flex">
                                <input type="text" class="form-control"
                                       name="{{ $namePath('field_config') }}[radio_options][]"
                                       value="{{ $option }}"
                                       placeholder="Radio option text">
                                <button type="button" class="btn btn-sm btn-danger ml-2 remove-radio-option">×</button>
                            </div>
                        @endforeach
                    </div>
                    <button type="button" class="btn btn-sm btn-success add-radio-option">+ Add Radio Option</button>
                </div>

                {{-- DEFAULT (text/text+textarea) --}}
            @else
                <div class="d-flex align-items-start mb-2 answer-field">
                    <div class="flex-fill">
                        <input type="text" class="form-control answer-input"
                               name="{{ $namePath('answer') }}"
                               value="{{ $ans->answer ?? '' }}">
                    </div>
                    <select class="form-control color-select ml-2"
                            name="{{ $namePath('color') }}">
                        <option value="alert-success" {{ ($ans->color ?? '') == 'alert-success' ? 'selected' : '' }}>Success</option>
                        <option value="alert-info" {{ ($ans->color ?? '') == 'alert-info' ? 'selected' : '' }}>Info</option>
                        <option value="alert-warning" {{ ($ans->color ?? '') == 'alert-warning' ? 'selected' : '' }}>Warning</option>
                        <option value="alert-danger"{{ ($ans->color ?? '') == 'alert-danger' ? 'selected' : '' }}>Danger</option>
                        <option value="alert-primary"{{ ($ans->color ?? '') == 'alert-primary' ? 'selected' : '' }}>Primary</option>
                        <option value="alert-secondary"{{ ($ans->color ?? '') == 'alert-secondary' ? 'selected' : '' }}>Secondary</option>
                    </select>
                </div>

                <div class="">
                    <div class="form-check">
                        <input class="form-check-input" type="radio"
                               name="{{ $namePath('btn_status') }}" value="yes"
                            {{ ($ans->btn_status ?? 'yes') == 'yes' ? 'checked' : '' }}>
                        <label class="form-check-label">Yes</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio"
                               name="{{ $namePath('btn_status') }}" value="no"
                            {{ ($ans->btn_status ?? '') == 'no' ? 'checked' : '' }}>
                        <label class="form-check-label">No</label>
                    </div>
                </div>
            @endif
        </div>

        @if($question->type == 'text+textarea')
            <div class="mb-2">
                <textarea class="form-control"
                          name="{{ $namePath('notes') }}"
                          rows="3"
                          placeholder="Extra Notes">{{ $question->notes ?? '' }}</textarea>
            </div>
        @endif

        {{-- children --}}
        <div class="question-children pl-4 mt-3">
            @if($question->children->count())
                @include('admin.includes.question-tree', [
                    'questions' => $question->children,
                    'section' => $section,
                    'indexes' => $currentIndexes
                ])
            @endif
        </div>
    </div>
@endforeach