@foreach($questions as $child)
    @php
        $answerObj = $child->answer ?? null;
        $btnStatus = $answerObj->btn_status ?? 'yes';
        $uniqueName = "yesno_" . $child->id;
    @endphp

    <div class="question d-flex flex-column position-relative mb-3"
         data-question-id="{{ $child->id }}"
         data-answer-id="{{ $answerObj->id ?? '' }}"
         data-answer="{{ $answerObj->answer ?? '' }}"
         data-color="{{ $answerObj->color ?? '#FFFFFF' }}"
         data-btn-status="{{ strtolower(trim($btnStatus)) }}">

        <!-- Question + Buttons Row -->
        <div class="d-flex justify-content-between align-items-start w-100">
            <!-- Question text -->
            <div class="question-text mb-1" style="max-width: 70%;">
                {{ $child->question }}
            </div>

            <!-- Yes / No buttons -->
            <div class="d-flex align-items-center gap-2">
                <div class="btn-group" role="group" aria-label="Yes No Toggle">
                    <input type="radio" class="btn-check"
                           name="{{ $uniqueName }}"
                           id="yes-{{ $child->id }}"
                           autocomplete="off">
                    <label class="btn btn-outline-success yes-btn" for="yes-{{ $child->id }}">Yes</label>

                    <input type="radio" class="btn-check"
                           name="{{ $uniqueName }}"
                           id="no-{{ $child->id }}"
                           autocomplete="off">
                    <label class="btn btn-outline-success no-btn" for="no-{{ $child->id }}">No</label>
                </div>
            </div>
        </div>

        <!-- Notes under question -->
        @if($child->notes)
            <div class="notes mt-1">{!! $child->notes !!}</div>
        @endif

    </div>

    <!-- Answer Display -->
    <div class="answer-display alert p-2 mb-2"
         style="display: none; width: 100%; border-radius: 5px;">
    </div>

    <!-- Recursive Children -->
    @if($child->children->isNotEmpty())
        <div class="children-container ms-4 mt-2" style="display: none;">
            @include('front.includes.question-children', ['questions' => $child->children])
        </div>
    @endif

@endforeach