@props([
    'name', 
    'label', 
    'options' => [], 
    'selected' => null, 
    'required' => false,
    'icon' => null,
    'search' => true, // Nuevo: Opción para activar/desactivar búsqueda
    'multiple' => false // Nuevo: Soporte para selección múltiple
])

@php
    // Generamos un ID único si no se proporciona uno, para inicializar Select2 sin conflictos
    $id = $attributes->get('id') ?? $name . '_' . uniqid();
    
    // Clase especial para identificar si usamos Select2 o un select normal
    $selectClass = $search ? 'select2-init' : 'form-control';
@endphp

<div class="form-group">
    {{-- Label Estilizado --}}
    <label for="{{ $id }}" 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>

    <div class="@if($icon) input-group @endif shadow-sm" style="flex-wrap: wrap;">
        
        {{-- Ícono (Opcional) --}}
        @if($icon)
            <div class="input-group-prepend">
                <span class="input-group-text bg-white text-secondary border-right-0" style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
                    <i class="{{ $icon }}"></i>
                </span>
            </div>
        @endif

        {{-- Select --}}
        <select 
            name="{{ $name . ($multiple ? '[]' : '') }}" 
            id="{{ $id }}" 
            {{ $multiple ? 'multiple' : '' }}
            {{-- Merge de clases: Importante 'w-100' para Select2 dentro de forms --}}
            {{ $attributes->merge([
                'class' => "form-control $selectClass " . ($icon ? 'border-left-0' : '') . ($errors->has($name) ? ' is-invalid' : '')
            ]) }}
            style="width: 100%;" {{-- Forza el ancho para evitar el bug de Select2 colapsado --}}
            data-placeholder="-- Seleccione --"
        >
            {{-- Opción vacía para el placeholder (solo si no es múltiple) --}}
            @if(!$multiple)
                <option value=""></option>
            @endif
            
            {{-- Renderizamos las opciones pasadas por el array --}}
            @foreach($options as $key => $text)
                <option value="{{ $key }}" 
                    {{-- Lógica de selección robusta (soporta arrays para múltiple y valores simples) --}}
                    @if($multiple)
                        {{ in_array($key, old($name, $selected ?? [])) ? 'selected' : '' }}
                    @else
                        {{ (string)$key === (string)old($name, $selected) ? 'selected' : '' }}
                    @endif
                >
                    {{ $text }}
                </option>
            @endforeach

            {{-- Slot para opciones manuales --}}
            {{ $slot }}
        </select>

        {{-- Mensaje de Error (Dentro del input-group con w-100 para forzar el salto de línea) --}}
        @error($name)
            <div class="invalid-feedback d-block w-100 mt-1" role="alert" style="font-size: 80%;">
                <i class="fas fa-exclamation-circle mr-1"></i> <strong>{{ $message }}</strong>
            </div>
        @enderror
    </div>
</div>

{{-- SCRIPT DE INICIALIZACIÓN (Se ejecuta solo una vez) --}}
{{-- ... (Tu HTML del select se mantiene igual) ... --}}

{{-- SCRIPT DE INICIALIZACIÓN --}}
@once
    @push('js')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Verificamos si jQuery está cargado para evitar errores
            if (typeof $ === 'undefined') {
                console.error('Error: jQuery no está cargado. Select2 requiere jQuery.');
                return;
            }

            // Inicialización General
            $('.select2-init').each(function() {
                if (typeof $(this).select2 !== 'function') {
                    console.warn('Select2 no está disponible para el elemento:', this.id);
                    return;
                }
                $(this).select2({
                    theme: 'bootstrap4', // Usa el tema que instalamos
                    width: '100%',       // Forza el ancho al 100% del padre
                    language: 'es',      // Español
                    placeholder: $(this).data('placeholder'),
                    allowClear: Boolean($(this).data('allow-clear')), // Permite borrar si se configura
                });

                // TRUCO PARA x-model: Disparar evento nativo cuando Select2 cambia
                // Escuchamos select2:select y select2:unselect para actualizar Alpine
                $(this).on('select2:select select2:unselect', function (e) {
                    // Disparar 'input' y 'change' para que x-model de Alpine detecte el cambio
                    // No hay bucle porque ya no estamos escuchando 'change' en este handler de jQuery
                    this.dispatchEvent(new Event('input', { bubbles: true }));
                    this.dispatchEvent(new Event('change', { bubbles: true }));
                });
            });
        });
    </script>

    {{-- ESTILOS CORRECTIVOS PARA INPUT GROUP --}}
    <style>
        /* Ajuste altura para igualar a los inputs de texto de AdminLTE */
        .select2-container .select2-selection--single {
            height: calc(2.25rem + 2px) !important;
        }
        .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
            line-height: 2.25rem !important;
            padding-left: 0.75rem;
            color: #495057;
        }
        .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
            line-height: 2.25rem !important;
        }
        
        /* Fusión con el ícono (Input Group) */
        .input-group > .select2-container--bootstrap4 {
            flex: 1 1 auto;
            width: 1% !important; /* Truco para que flexbox funcione bien */
        }
        .input-group > .select2-container--bootstrap4 .select2-selection,
        .input-group > .select2-container--bootstrap4 .select2-selection--single {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
            border-left: 0 !important;
        }
        
        .input-group > .input-group-prepend > .input-group-text {
            border-top-left-radius: 10px !important;
            border-bottom-left-radius: 10px !important;
        }
    </style>
    @endpush
@endonce


{{-- Como se usa:

<x-form.select name="categoria_id" label="Categoría" :options="$categorias" required="true" />

Con Ícono y Selección Múltiple:
<x-form.select 
    name="ingredientes" 
    label="Ingredientes Extra" 
    :options="$ingredientes" 
    icon="fas fa-utensils" 
    multiple="true" 
/>


<x-form.select 
    name="activo" 
    label="Estado" 
    :options="['1'=>'Activo', '0'=>'Inactivo']" 
    search="false" 
/> --}}