@props([
    'name', 
    'label' => null, 
    'options' => [], 
    'selected' => null, 
    'multiple' => false, 
    'required' => false, 
    'id' => null,
    'placeholder' => 'Seleccione una opción...'
])

@php
    $id = $id ?? $name;
    // Manejo de valores seleccionados (old > selected prop > null)
    $selectedValue = old($name, $selected);
@endphp

<div class="form-group">
    @if($label)
        <label for="{{ $id }}" class="font-weight-bold">
            {{ $label }} 
            @if($required) <span class="text-danger">*</span> @endif
        </label>
    @endif

    <select 
        name="{{ $name }}{{ $multiple ? '[]' : '' }}" 
        id="{{ $id }}" 
        class="form-control select2 @error($name) is-invalid @enderror" 
        {{ $multiple ? 'multiple' : '' }}
        {{ $required ? 'required' : '' }}
        style="width: 100%;"
    >
        @if(!$multiple)
            <option></option> {{-- Placeholder vacío para Select2 --}}
        @endif

        @foreach($options as $key => $optionLabel)
            @php
                $isSelected = false;
                if ($multiple) {
                    if (is_array($selectedValue) && in_array($key, $selectedValue)) $isSelected = true;
                    // Caso Collection de IDs
                    elseif ($selectedValue instanceof \Illuminate\Support\Collection && $selectedValue->contains($key)) $isSelected = true;
                } else {
                    if ($selectedValue == $key) $isSelected = true;
                }
            @endphp
            <option value="{{ $key }}" {{ $isSelected ? 'selected' : '' }}>
                {{ $optionLabel }}
            </option>
        @endforeach
    </select>

    @error($name) 
        <span class="invalid-feedback d-block font-weight-bold">
            <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
        </span> 
    @enderror
</div>

@push('js')
<script>
    $(document).ready(function() {
        $('#{{ $id }}').select2({
            theme: 'bootstrap4',
            placeholder: "{{ $placeholder }}",
            allowClear: true,
            width: '100%',
            language: "es" 
        });
    });
</script>
@endpush