@php
    $field['options'] = $field['options'] ?? \App\Models\Patient::all()->pluck('name', 'id')->toArray();
    $field['value'] = old($field['name'].'_id') ?? ($field['value'] ?? null);
@endphp

<div class="form-group col-sm-12">
    <label>{!! $field['label'] !!}</label>

    <select
        id="{{ $field['name'] }}_select"
        name="{{ $field['name'] }}_id"
        data-init-function="bpFieldInitPatientSelectOrText"
        class="form-control "
        style="width:100%;"
    >
        <option value="">-- Select existing or type new --</option>
        @foreach($field['options'] as $key => $option)
            <option value="{{ $key }}" {{ $field['value'] == $key ? 'selected' : '' }}>
                {{ $option }}
            </option>
        @endforeach
    </select>

    {{-- <input
        type="hidden"
        name="{{ $field['name'] }}_new"
        id="{{ $field['name'] }}_new"
        value="{{ old($field['name'].'_new') }}"
    />
    <input
        type="hidden"
        name="{{ $field['name'] }}_is_new"
        id="{{ $field['name'] }}_is_new"
        value="{{ old($field['name'].'_is_new') }}"
    /> --}}

    {{-- Display validation error --}}
    @if ($errors->has($field['name'].'_id') || $errors->has($field['name'].'_new'))
        <span class="text-danger">
            {{ $errors->first($field['name'].'_id') ?? $errors->first($field['name'].'_new') }}
        </span>
    @endif
</div>

{{-- Initialize TomSelect --}}
@push('crud_fields_scripts')
<script>
    function bpFieldInitPatientSelectOrText(element) {
        // element might come wrapped by jQuery, unwrap it
        if (typeof element === 'undefined') return;
        if (element instanceof jQuery) element = element[0];

        if (!element || element.classList.contains("tomselected")) return;

         var ts = new TomSelect(element, {
            create: true,
            persist: false,
            onOptionAdd: function(value, data) {
                var newInput = document.getElementById(element.name.replace('_id','_new'));
                if (newInput) newInput.value = value;
                element.value = '';
            },
            // onChange: function(value) {
            //     console.log("tomselect onchange: " +  value);
            //     var newInput = document.getElementById(element.name.replace('_id','_new'));
            //     var isNewInput = document.getElementById(element.name.replace('_id','_is_new'));
            //     console.log(newInput.name);
            //     if (newInput && value) newInput.value = value;

            //     // Check if option existed in the original select
            //     var isExisting = ts.options[value] && ts.options[value].$option?.dataset?.create === undefined;
            //     if (isExisting) {
            //         console.log("Selected existing option:", value);
            //         isNewInput.value = "false";
            //     } else {
            //         console.log("Created new value:", value);
            //         isNewInput.value = "true";
            //     }

                
            // }
        });
    }
</script>
@endpush