{{-- select2 from ajax (with state dependency) --}}
@php
    $connected_entity = new ($field['model'])();
    $connected_entity_key_name = $connected_entity->getKeyName();
    $old_value = old($field['name']) ?? ($field['value'] ?? ($field['default'] ?? false));
@endphp

<div @include('admin.panel.inc.field_wrapper_attributes')>
    <label class="form-label fw-bolder">{!! $field['label'] !!}</label>
    @include('admin.panel.fields.inc.translatable_icon')

    <select name="{{ $field['name'] }}" style="width: 100%" id="select2_ajax_{{ $field['name'] }}"
        @include('admin.panel.inc.field_attributes', ['default_class' => 'form-control'])>
        @if ($old_value)
            @php
                $item = $connected_entity->find($old_value);
                if (!$item) {
                    $item = (object) [
                        $connected_entity_key_name => $old_value,
                        $field['attribute'] => $old_value,
                    ];
                }
            @endphp
            <option value="{{ $item->{$connected_entity_key_name} }}" selected>
                {{ $item->{$field['attribute']} }}
            </option>
        @endif
    </select>

    @if (isset($field['hint']))
        <div class="form-text">{!! $field['hint'] !!}</div>
    @endif
</div>

@if ($xPanel->checkIfFieldIsFirstOfItsType($field, $fields))
    @push('crud_fields_styles')
        <link href="{{ asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css"
            rel="stylesheet" type="text/css" />
    @endpush

    @push('crud_fields_scripts')
        <script src="{{ asset('assets/plugins/select2/js/select2.js') }}"></script>
    @endpush
@endif

@push('crud_fields_scripts')
    <script>
        jQuery(document).ready(function($) {
            const $citySelect = $("#select2_ajax_{{ $field['name'] }}");
            const $stateSelect = $('[name="state"]');

            $citySelect.select2({
                theme: 'bootstrap',
                multiple: false,
                placeholder: "Please select a state first",
                minimumInputLength: {{ $field['minimum_input_length'] ?? 0 }},
                language: {
                    noResults: function() {
                        if (!$stateSelect.val()) {
                            return "Please select a state first.";
                        }
                        return "No cities found.";
                    }
                },
                escapeMarkup: function(markup) {
                    return markup;
                },
                ajax: {
                    url: "{{ $field['data_source'] }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term || '',
                            page: params.page || 1,
                            state: $stateSelect.val() || ''
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    id: item.id,
                                    text: item.text
                                };
                            })
                        };
                    },
                    cache: true
                },
                templateSelection: function(item) {
                    if (!item.id) return item.text;
                    return item.text.toUpperCase();
                }
            });

            function toggleCityField() {
                if ($stateSelect.val()) {
                    $citySelect.prop('disabled', false);
                    const container = $citySelect.data('select2')?.$container;
                    if (container) {
                        container.find('.select2-selection__placeholder').text("Select a city");
                    }
                } else {
                    $citySelect.val(null).trigger('change');
                    $citySelect.prop('disabled', true);
                    const container = $citySelect.data('select2')?.$container;
                    if (container) {
                        container.find('.select2-selection__placeholder').text("Please select a state first");
                    }
                }
            }

            toggleCityField();

            $stateSelect.on('change', function() {
                $citySelect.val(null).trigger('change');
                toggleCityField();
            });
        });
    </script>
@endpush