@php
    $related_model = '\\App\\Models\\' . Str::studly(Str::singular($column_params['exists'][0]));
    $relation = Str::before($column_name, '_id');
    $required = $column_params['required'] ?? false;
    $field = 'id';
@endphp

@if(
    ! isset($column_params['select_label']) &&
    ! (new $related_model)->hasAppended('select_label') &&
    ! in_array('name', array_keys($related_model::fields()))
)
  <div class="alert alert-danger alert-border-left alert-dismissible fade shadow show mb-xl-0"
      role="alert">
      <i class="ri-error-warning-line me-3 align-middle fs-16"></i>
      <strong>Error</strong>
      - "relations.{{ $column_params['exists'][0] }}" show component not found
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
@else
    @php
        if(isset($column_params['select_label'])) {
            $field = $column_params['select_label'];
        } elseif( (new $related_model)->hasAppended('select_label') ) {
            $field = 'select_label';
        } elseif ( in_array('name', array_keys($related_model::fields()))) {
            $field = 'name';
        }
    @endphp

    <select class="form-control @error($name) is-invalid @enderror"
        form="{{ $formId }}"
        name="{{ $name }}"
        @if( $disabled ) disabled @endif
    >
        @if(!$required)
        <option value="">
            {{ transIf( $lang['column.enum.null'], $model . '.column.' . $column_name . '.null' ) }}
        </option>
        @endif
        @foreach ( $elements ?? [] as $element)
        @dump($element)
            <option value="{{ $element->id }}"
                @if ($value ? $value == $element->id : false) selected @endif
            >
                {{ $element->$field }}
            </option>
        @endforeach
    </select>

    @push('scripts')
        <script>
            function update_dropdown_{{ $formId }}_{{ $name }}( value = '', selected = false ) {
                $.ajax({
                    url: '{{ route('admin.' . $column_params['exists'][0] . '.search') }}',
                    type: 'POST',
                    dataType: 'json',
                    data: { 'term': value, 'limit': 100 },
                    success: function( response ) {
                        let items = [];

                        @if(!$required)
                        /*
                        items.push({
                                value: 0,
                                label: 'Válassz',
                                selected: selected ? value == null : false,
                                customProperties: {'item': null},
                        });
                        */
                        @endif

                        $.each(
                            response.data.sort((m1, m2) => (m1.{{ $field }} > m2.{{ $field }}) ?
                            1 :
                            (m1.{{ $field }} < m2.{{ $field }}) ?
                                -1 :
                                0
                        ), function( key, item ) {
                            console.log({key, item: item.id })
                            items.push({
                                value: item.id,
                                label: item.{{ $field }},
                                selected: selected ? item.id == '{{ $value }}' : false,
                                customProperties: item,
                            });
                        });

                        select_{{ $formId }}_{{ $name }}.setChoices(
                            items,
                            'value',
                            'label',
                            true,
                        );
                    }
                });
            }

            let select_{{ $formId }}_{{ $name }} = new Choices('[form="{{ $formId }}"][name="{{ $name }}"]', {
                itemSelectText: 'Válassz',
                silent: true,
                searchResultLimit: 100,
            });

            @if($readonly)
            select_{{ $formId }}_{{ $name }}.disable();
            @endif

            select_{{ $formId }}_{{ $name }}.passedElement.element.addEventListener(
                'search',
                function(event) {
                    update_dropdown_{{ $formId }}_{{ $name }}(event.detail.value);
                },
                false,
            );

            update_dropdown_{{ $formId }}_{{ $name }}('', true);
        </script>
    @endpush
@endif