{{-- Select2 lo carga el layout admin vía partials.assets.legacy-scripts (plugins) --}}

@if ($bPermitirPushFuncionJsCrearComponente)
    @push('codigoPaginaTemplateEnJQueryReady')
        CrearComponenteMenuDesplegableAjax(
        '{{ $sAtributoIdCampoHtml }}',
        '{{ $sTextoPlaceholder }}',
        '{{ $sUrlFuenteDatos }}'
        );
    @endpush
@endif

@once
    @push('codigoAdicionalFinalPaginaTemplateDespuesDeJQueryReady')
        <script type="text/javascript">
            function GenerarParametrosLlamadaAjax(oParametros) {

                jsonParametros = {
                    q: oParametros.term,
                    page: oParametros.page
                };

                if ($('meta[name="csrf-token"]').attr('content')) {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                }

                return jsonParametros;
            }

            function CrearComponenteMenuDesplegableAjax(
                sAtributoIdCampoHtml,
                sTextoPlaceholder,
                sUrlRelativaProceso,
                fGenerarParametrosLlamadaAjax = null
            ) {
                if (fGenerarParametrosLlamadaAjax == null) {
                    fGenerarParametrosLlamadaAjax = GenerarParametrosLlamadaAjax;
                }
                var sUrlProceso = baseUrl + '/' + sUrlRelativaProceso;

                $('#' + sAtributoIdCampoHtml).select2({
                    placeholder: sTextoPlaceholder,
                    allowClear: true,
                    minimumInputLength: 4,
                    ajax: {
                        url: sUrlProceso,
                        dataType: 'json',
                        delay: 250,
                        type: 'post',
                        data: fGenerarParametrosLlamadaAjax,
                        // processResults: function(oDatos, oParametros) {
                        //     oParametros.page = oParametros.page || 1;
                        //     bEsUltimaPagina = (oParametros.page * oDatos.per_page) >= oDatos.total;

                        //     return {
                        //         results: oDatos.data,
                        //         pagination: {
                        //             more: !bEsUltimaPagina
                        //         }
                        //     };
                        // },
                        processResults: function(oDatos, oParametros) {
                            oParametros.page = oParametros.page || 1;

                            return {
                                results: oDatos.data,
                                pagination: {
                                    more: (oParametros.page * oDatos.per_page) < oDatos.total
                                }
                            };
                        },
                        cache: true
                    }
                });
            }
        </script>
    @endpush
@endonce

<div>
    <select
        class="form-control"
        name="{{ $sAtributoNameCampoHtml }}"
        id="{{ $sAtributoIdCampoHtml }}"
        {{ $sAtributoDisabledMenuDesplegable }}
        {{ $attributes }}
    >
@if($aItemSeleccionado !== null)
    @foreach($aItemSeleccionado as $aDatosOption)
        <option value="{{ $aDatosOption['id'] }}">{{ $aDatosOption['text'] }}</option>
    @endforeach
@else
        <option></option>{{-- Necesario para que select2 depliegue el placeholder,
                              en la carga inicial, sino ademas aparece boton clear. --}}
@endif

    </select>
</div>

<style>
    .select2-container .select2-selection--single {
        height: 38px !important;
        font-size: 1rem;
    }

    .select2-container .select2-results__option {
        font-size: 1rem;
    }

    .select2-container .select2-search--dropdown .select2-search__field {
        font-size: 1rem;
    }

    .select2-container .select2-selection__placeholder {
        font-size: 1rem;
    }

    .select2-container .select2-selection__rendered {
        font-size: 1rem;
    }
</style>