@php
    $answer = $questionnaire->answer ?? null;
    $selectedOptions = $questionnaire->SELECTED_OPTIONS ?? [];
    $lang = $lang ?? app('translator')->getLocale();
    $labelField = $lang === 'ar' ? 'NAME_AR' : 'NAME_EN';
    $selectedOpts = !empty($selectedOptions)
        ? \App\Models\LABCATEGORYPACKAGEQUESTIONNAIREOPTIONS::whereIn('ID', $selectedOptions)->select('ID', 'NAME_EN', 'NAME_AR')->get()
        : collect();
    // Allow callers to override the AJAX endpoint that select2 uses to load options.
    // Defaults to the operations-auth-protected endpoint; the public patient
    // questionnaire passes its own token-scoped URL via $optionsDataUrl.
    $optionsDataUrl = $optionsDataUrl ?? ('/operations/questionnaire/options/' . $questionnaire->ID);

    // DOM id must be HTML5-valid (no whitespace, see WHATWG: "The value must not
    // contain any space characters") and unique per caller's invocation so select2
    // v4 — which keys its internal `Utils.__cache` on `element.id` — does not
    // collide across tabs. Callers MAY pass `$domKey` separately from `$key` so
    // they can keep the original `$key` in the form `name=` attribute (which the
    // controller parses via `questions[$key][...]`) while still producing a unique
    // DOM id. When `$domKey` is omitted, falls back to `$key`.
    $domId = \Illuminate\Support\Str::slug(($domKey ?? $key ?? '') . '_' . $questionnaire->ID, '_');
    $displayName = $lang === 'ar' ? ($questionnaire->NAME_AR ?: $questionnaire->NAME_EN) : $questionnaire->NAME_EN;
    $dirAttr = '';
@endphp

@if (isset($fillQuestionnaireByPatient) && $fillQuestionnaireByPatient)
    <input type="hidden" name="answer_ids[{{$key}}][{{$questionnaire->ID}}]" value="{{optional($answer)->ID ?? ''}}">
@endif

@if($questionnaire->TYPE == 'SELECT' || $questionnaire->TYPE == 'MULTIPLE_SELECT')
<div class="form-group col-md-4" {{ $dirAttr }}>
    <label for="{{ $domId }}" class="text-gray">
        {{ $displayName }}
        @if(!$questionnaire->IS_OPTIONAL)
            <span style="color:red;">*</span>
        @endif
    </label>

    <select
        class="form-control questionnaire-select2"
        @if($questionnaire->TYPE == 'MULTIPLE_SELECT') multiple @endif
        name="questions[{{$key}}][{{$questionnaire->ID}}][]"
        @if(!$questionnaire->IS_OPTIONAL) data-required="true" @endif
        id="{{ $domId }}"
        data-question-id="{{$questionnaire->ID}}"
        data-url="{{ $optionsDataUrl }}"
        data-lang="{{ $lang }}"
        @if((!isset($fillQuestionnaireByPatient) || !$fillQuestionnaireByPatient) && !empty($selectedOptions)) disabled @endif
    >
        @if($questionnaire->TYPE == 'SELECT' && empty($selectedOptions))
            <option value="" disabled selected>Please select an option</option>
        @endif
        @foreach($selectedOpts as $option)
            <option value="{{$option->ID}}" selected>{{ $lang === 'ar' ? ($option->NAME_AR ?: $option->NAME_EN) : $option->NAME_EN }}</option>
        @endforeach
    </select>
</div>

@elseif($questionnaire->TYPE == 'TEXT')
    <div class="form-group col-md-4" {{ $dirAttr }}>
        <label for="{{ $domId }}" class="text-gray">{{ $displayName }} @if(!$questionnaire->IS_OPTIONAL)<span style="color:red;">*</span>@endif </label>
        <input type="text" class="form-control" id="{{ $domId }}" name="questions[{{$key}}][{{$questionnaire->ID}}]" value="{{optional($answer)->ANSWER ?? ''}}" @if(optional($answer)->ANSWER) disabled @endif @if(!$questionnaire->IS_OPTIONAL) data-required="true" @endif>
    </div>
@elseif($questionnaire->TYPE == 'DATETIME' || $questionnaire->TYPE == 'DATE')
    <div class="form-group col-md-4" {{ $dirAttr }}>
        <label for="{{ $domId }}" class="text-gray">{{ $displayName }} @if(!$questionnaire->IS_OPTIONAL)<span style="color:red;">*</span>@endif </label>
        <input type="datetime-local" class="form-control" id="{{ $domId }}" name="questions[{{$key}}][{{$questionnaire->ID}}]" value="{{optional($answer)->ANSWER ?? ''}}" @if(optional($answer)->ANSWER) disabled @endif @if(!$questionnaire->IS_OPTIONAL) data-required="true" @endif>
    </div>
@elseif($questionnaire->TYPE == 'TEXTAREA')
    <div class="form-group col-md-6" {{ $dirAttr }}>
        <label for="{{ $domId }}" class="text-gray">{{ $displayName }} @if(!$questionnaire->IS_OPTIONAL)<span style="color:red;">*</span>@endif </label>
        <textarea class="form-control" id="{{ $domId }}" name="questions[{{$key}}][{{$questionnaire->ID}}]" cols="20" rows="5" @if(optional($answer)->ANSWER) disabled @endif @if(!$questionnaire->IS_OPTIONAL) data-required="true" @endif>{{optional($answer)->ANSWER ?? ''}}</textarea>
    </div>
@elseif($questionnaire->TYPE == 'IF_YES')
    <div class="form-group col-md-4" {{ $dirAttr }}>
        <label for="{{ $domId }}" class="text-gray">
            {{ $displayName }}
            @if(!$questionnaire->IS_OPTIONAL)
                <span style="color:red;">*</span>
            @endif
        </label>

        <select
            class="form-control questionnaire-select2"
            name="questions[{{$key}}][{{$questionnaire->ID}}][]"
            @if(!$questionnaire->IS_OPTIONAL) data-required="true" @endif
            id="{{ $domId }}"
            data-question-id="{{$questionnaire->ID}}"
            data-url="{{ $optionsDataUrl }}"
            data-lang="{{ $lang }}"
            @if((!isset($fillQuestionnaireByPatient) || !$fillQuestionnaireByPatient) && !empty($selectedOptions)) disabled @endif
        >
            @if(empty($selectedOptions))
                <option value="" disabled selected>Please select an option</option>
            @endif
            @foreach($selectedOpts as $option)
                <option value="{{$option->ID}}" selected>{{ $lang === 'ar' ? ($option->NAME_AR ?: $option->NAME_EN) : $option->NAME_EN }}</option>
            @endforeach
        </select>

        <textarea
            class="form-control mt-2"
            name="questions[{{$key}}][{{$questionnaire->ID}}][description]"
            id="{{ $domId }}_description"
            cols="30"
            rows="5"
            placeholder="Description"
            @if(optional($answer)->ANSWER) disabled @endif
        >
            {{optional($answer)->DESCRIPTION ?? ''}}
        </textarea>
    </div>
@elseif($questionnaire->TYPE == 'HOP')
    <label for="{{ $domId }}" class="text-gray" {{ $dirAttr }}>{{ $displayName }} @if(!$questionnaire->IS_OPTIONAL)<span style="color:red;">*</span>@endif </label>
    <select class="form-control questionnaire-hop-select2" multiple name="questions[{{$key}}][{{$questionnaire->ID}}][]" @if(!$questionnaire->IS_OPTIONAL) data-required="true" @endif id="{{ $domId }}">
    </select>
@elseif($questionnaire->TYPE == 'FILE')
    <div class="form-group mt-2" {{ $dirAttr }}>
        <label for="{{ $domId }}" class="text-gray">{{ $displayName }} @if(!$questionnaire->IS_OPTIONAL)<span class="text-danger">*</span>@endif </label><br>
        <input type="hidden" name="questions[{{$key}}][{{$questionnaire->ID}}][]" value="">
        <input type="file" id="{{ $domId }}_files"  name="questions[{{$key}}][{{$questionnaire->ID}}][]" @if(optional($answer)->ANSWER) disabled @endif multiple/>
    </div>
@elseif($questionnaire->TYPE == 'DOWNLOAD_FILE')
    <div class="form-group mt-2 col-md-12" {{ $dirAttr }}>
        <label for="{{ $domId }}" class="text-gray">{{ $displayName }}</label><br>
        @if(!empty($questionnaire->FILE_PATH))
            @php
                $fileUrl = 'https://s3.eu-west-1.amazonaws.com/blazma.com' . $questionnaire->FILE_PATH;
                $fileExtension = strtolower(pathinfo($questionnaire->FILE_PATH, PATHINFO_EXTENSION));
            @endphp
            
            @if(in_array($fileExtension, ['pdf']))
                <iframe src="{{ $fileUrl }}" style="width: 100%; height: 600px; border: 1px solid #ddd;" frameborder="0"></iframe>
            @elseif(in_array($fileExtension, ['jpg', 'jpeg', 'png', 'gif']))
                <img src="{{ $fileUrl }}" style="max-width: 100%; height: auto; border: 1px solid #ddd;" alt="{{ $displayName }}">
            @elseif(in_array($fileExtension, ['txt']))
                <iframe src="{{ $fileUrl }}" style="width: 100%; height: 400px; border: 1px solid #ddd;" frameborder="0"></iframe>
            @else
                <div class="alert alert-info">
                    <p>Preview not available for this file type. <a href="{{ $fileUrl }}" target="_blank" class="btn btn-sm btn-primary"><i class="fa fa-download"></i> Download File</a></p>
                </div>
            @endif
        @else
            <span class="text-muted">No file available</span>
        @endif
    </div>
@else
    <div class="form-group col-md-4" {{ $dirAttr }}>
        <label for="{{ $domId }}" class="text-gray">{{ $displayName }} @if(!$questionnaire->IS_OPTIONAL)<span style="color:red;">*</span>@endif </label>
        <input type="number" class="form-control" id="{{ $domId }}" name="questions[{{$key}}][{{$questionnaire->ID}}]" value="{{optional($answer)->ANSWER ?? ''}}" @if(optional($answer)->ANSWER) disabled @endif @if(!$questionnaire->IS_OPTIONAL) data-required="true" @endif>
    </div>
@endif