@props([
    'name',
    'label' => 'Buscar y Seleccionar',
    'url' => null, // Endpoint de la API que retornará los resultados (null = usar data estática)
    'placeholder' => 'Escriba para buscar...',
    'required' => false,
    'multiple' => false,
    'icon' => 'fas fa-search',
    'delay' => 250, // Milisegundos de espera antes de pegarle al API buscando optimización
    'minInputLength' => 1, // Letras mínimas a escribir antes de llamar al api (0 = cargar sin tipear)
    'data' => null, // Array de opciones precargadas [{id, text}]; si se provee, no usa AJAX
])

@pushonce('css')
    <!-- Select2 CSS para Bootstrap 4 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" />
    <style>
        .select2-container--bootstrap .select2-selection {
            border: 1px solid #ced4da;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
    </style>
@endpushonce

<div class="form-group">
    @if($label)
        <label for="{{ $name }}" class="font-weight-bold text-dark small text-uppercase" style="letter-spacing: 0.5px;">
            {{ $label }}
            @if($required) <span class="text-danger" title="Campo obligatorio">*</span> @endif
        </label>
    @endif

    <div class="input-group shadow-sm">
        <div class="input-group-prepend">
            <span class="input-group-text bg-white text-muted">
                <i class="{{ $icon }}"></i>
            </span>
        </div>
        
        <select
            class="form-control select2-ajax-config w-100 @error($name) is-invalid @enderror"
            id="{{ $name }}"
            name="{{ $name }}{{ $multiple ? '[]' : '' }}"
            {{ $required ? 'required' : '' }}
            {{ $multiple ? 'multiple' : '' }}
            style="width: 100%"
            {{ $attributes }}
        >
            {{-- Aquí pueden venir opciones pre-cargadas en un 'edit' por el slot default --}}
            {{ $slot }}
        </select>
        
        @error($name)
            <span class="invalid-feedback d-block mt-1" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
</div>

@pushonce('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    {{-- Traducción de Select2 al Español via CDN --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/i18n/es.min.js"></script>
@endpushonce

@push('js')
<script>
    $(document).ready(function() {
        var $el = $('#{{ $name }}');
        var preloadedData = @json($data);
        var config = {
            theme: "bootstrap",
            language: "es",
            placeholder: "{{ $placeholder }}",
            allowClear: true,
            minimumInputLength: {{ (int) $minInputLength }}
        };

        @if($data !== null)
            // Data estática precargada (sin AJAX)
            config.data = preloadedData;
        @else
            // AJAX contra endpoint
            config.ajax = {
                url: "{{ $url }}",
                dataType: 'json',
                delay: {{ $delay }},
                data: function (params) {
                    return {
                        q: params.term,
                        page: params.page
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: true
            };
        @endif

        $el.select2(config);
    });
</script>
@endpush