@props([
'label',
'name',
'options' => [],
'required' => false,
'tooltip' => null,
])

<div class="form-group" wire:ignore>
    <label class="form-label" for="{{ $name }}">
        {{ $label }}
        @if($required)
        <span class="text-red">*</span>
        @endif
    </label>

    <select id="{{ $name }}" name="{{ $name }}[]" class="form-control select2 @error($name) is-invalid @enderror"
        multiple wire:model="{{ $name }}">
        @foreach($options as $key => $option)
        <option value="{{ $key }}">{{ $option }}</option>
        @endforeach
    </select>

    @error($name)
    <span class="invalid-feedback">{{ $message }}</span>
    @enderror
</div>

@push('scripts')
<script>
document.addEventListener('livewire:navigated', function() {

    // Initialize all select2
    $('.select2').select2();

    // On change → update livewire
    $('.select2').on('change', function() {
        let model = $(this).attr('wire:model');
        @this.set(model, $(this).val());
    });

    // Livewire → update Select2 (edit mode)
    Livewire.hook('message.processed', (message, component) => {
        $('.select2').each(function() {
            let model = $(this).attr('wire:model');
            let selected = @this.get(model);
            $(this).val(selected).trigger('change');
        });
    });

});
</script>
@endpush