@props(['placeholder' => 'Select Options', 'id'])
<div id="{{ $id }}_content" style="display:none">{{ $slot }}</div>
<div wire:ignore>
    <select {{ $attributes }} id="{{ $id }}"  data-placeholder="{{ $placeholder }}" style="width: 100%;">
        {{ $slot }}
    </select>
</div>
    @once
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <!-- Select2 -->
        <link rel="stylesheet" href="{{ asset('assets/select2/css/select2.min.css') }}">
        <link rel="stylesheet" href="{{ asset('assets/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

        <!-- Select2 -->
        <script src="{{ asset('assets/select2/js/select2.full.min.js') }}"></script>
    @endonce

    <script>

        //

        $(function() {
            $('#{{ $id }}').select2({
                theme: 'bootstrap4',
            }).on('select2:closing',function () {
                @this.set('{{$id}}',$(this).val());
                Livewire.emit('select2_changed','{{ $id }}');
            })
        });


        // Call This Event In Livewire component (class) By $this->dispatchBrowserEvent('reset');
        /* {{--
           like ::

                in blade ::
                    <x-select-box>
                            <x-slot name="model">workplace_id</x-slot>
                            <x-slot name="change">change_dep</x-slot>
                            ....
                    <x-select-box>

                in controller ::
                    public function change_department(){
                        $this->dispatchBrowserEvent('reset');
                    }

                    --}}
        */
        window.addEventListener('reset', event => {
            $("#{{ $id }}").select2("val", " ");
            document.getElementById('{{ $id }}').innerHTML= document.getElementById('{{ $id }}_content').innerHTML;
        })
        window.addEventListener('get_model_name', event => {
            $('#{{ $id }}').select2({
                theme: 'bootstrap4',
            }).val(event.detail.model)
        })


    </script>