@props(['model', 'id', 'data' => []])
@php
    if (!$data) {
        $data = $model::get();
    }
@endphp

<select x-data="{
    id: '{{ $id }}'
}" x-init="$dispatch('select2', { id: id })" id="{{ $id }}" {!! $attributes->merge([
    'class' =>
        'text-sm border-gray-300 overflow-y-auto focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 shadow-sm block w-full',
]) !!}>
    <option value="0" @isset($value) {{ $value == 0 ? 'selected' : '' }} @endisset>
        {{ __('Nothing selected') }}
    </option>
    @foreach ($data as $item)
        @php
            $key = $item->id ?? $item->code;
            $name = $item->name ?? ($item->translations[0]->name ?? $item->code);
        @endphp
        <option value="{{ $key }}">{{ $name }}</option>
    @endforeach
</select>

{{-- @push('scripts') --}}
    <script>
        window.addEventListener('select2', event => {
            const {
                id
            } = event.detail;
            const el = document.getElementById(id);
// console.log(el);
            $(el).select2({
                dropdownParent: $(el).closest('div')
            }).on('change', function() {
                const value = $(this).val();
                const parentComponent = el.closest('[wire\\:id]');
                const wireId = parentComponent.getAttribute('wire:id');
                Livewire.find(wireId).set(id, value);
            });
        });
    </script>
{{-- @endpush --}}