<select wire:ignore {{ $attributes->merge(['class' => 'select2 form-control select2-multiple']) }} multiple="multiple"
    data-placeholder="Choose categories ...">
    {{ $slot }}
</select>

@push('styles')
    <link href="{{ asset('backend/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .select2 {
            width: 100% !important;
        }

    </style>
@endpush

@push('scripts')
    <script src="{{ asset('backend/libs/select2/js/select2.min.js') }}"></script>
    <script>
        $('#category_ids').select2();
        $('#category_ids').on('change', function(e) {
            var data = $('#category_ids').select2("val");
            @this.set('category_ids', data);
        });
        window.addEventListener('categoryEvent', event => {
            var data = $('#category_ids').select2("val");
            if(data.length){
                $('#category_ids').val(event.detail.category_ids).trigger('change');
            }
        })
    </script>
@endpush