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

@push('codigoPaginaTemplateEnJQueryReady')
        CrearComponenteSujeto(
            '{{ $sAtributoIdCampoHtml }}',
            '{{ $sUrlFuenteDatos }}',
            '{{ $sIdHtmlSelectInstitucion }}',
            {{
                $nIdInstitucionUsuarioActual != null ?
                $nIdInstitucionUsuarioActual :
                "null"
            }}
        );

@endpush

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

function CrearComponenteSujeto(
    sAtributoIdCampoHtml,
    sUrlRelativaProceso,
    sIdHtmlSelectInstitucion,
    nIdInstitucionUsuarioActual
) {

    /* console.log("baseUrl: ", baseUrl);
    console.log("sUrlRelativaProveso: ", sUrlRelativaProceso); */
    var sUrlProceso = baseUrl + '/' + sUrlRelativaProceso;
    /* console.log("sUrlProceso: ", sUrlProceso); */

    $('#' + sAtributoIdCampoHtml).select2({
        placeholder: 'Seleccione nombre',
        allowClear: true,
        minimumInputLength: 4,
        ajax: {
            url: sUrlProceso,
            dataType: 'json',
            delay: 250,
            type: 'post',
            data: function (oParametros) {
                /* console.log("data - oParametros: ", oParametros); */
                var nIdInstitucionActual;
                if(nIdInstitucionUsuarioActual != null) {
                    // Usa la institucion del usuario no super admin actualmente autenticado
                    nIdInstitucionActual = nIdInstitucionUsuarioActual;
                }
                else {
                    // Obtiene institucion desde la seleccion en el campo html select de instituciones
                    // (para usuario super admin)
                    var nIdInstitucionSeleccionada = $('#' + sIdHtmlSelectInstitucion).val();
                    bExisteCampoHtmlFiltroInstitucion = (typeof nIdInstitucionSeleccionada !== 'undefined');
                    if( ! bExisteCampoHtmlFiltroInstitucion ) {
                        nIdInstitucionSeleccionada = null;
                    }

                    nIdInstitucionActual = nIdInstitucionSeleccionada;
                }

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

                return {
                    i: nIdInstitucionActual,
                    qnombre: oParametros.term,
                    page: oParametros.page
                };
            },
            processResults: function (oDatos, oParametros) {
                /* console.log("process - oDatos: ", oDatos)
                console.log("process - oParametros: ", oParametros) */

                oParametros.page = oParametros.page || 1;
                bEsUltimaPagina = (oParametros.page * oDatos.per_page) >= oDatos.total;

                oDatos.data = $.map(oDatos.data, function (oItem) {
                    if(oItem.id == 0) { // Si no viene id, asigna text como id
                        oItem.id = oItem.text;
                    }

                    return oItem;
                });

                return {
                    results: oDatos.data,
                    pagination: {
                        more: ! bEsUltimaPagina
                    }
                };
            },
            cache: true
        }
    });
}

</script>
    @endpush
@endonce

<div>
    <select
        class="form-control"
        name="{{ $sAtributoNameCampoHtml }}"
        id="{{ $sAtributoIdCampoHtml }}"
        {{ $sAtributoDisabledMenuDesplegable }}
        {{ $attributes }}
    >
@if($aItemSeleccionado !== null)
    @foreach($aItemSeleccionado as $nIdUsuario => $sNombreUsuario)
        <option value=" {{ $nIdUsuario }}">{{ $sNombreUsuario }}</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--default .select2-selection--single .select2-selection__rendered {
        line-height:36px !important;
    }
</style>