@php
    $optionNameCol = $attributes->get('option_col') ?? 'name';
    $selectId = $attributes->get('id') ?? 'select2_' . uniqid();
    $wireModel = $attributes->get('wire:model');
@endphp

<div wire:ignore>
    <select class="{{ $attributes->get('class') }}" id="{{ $selectId }}" {{ $attributes->except(['option_col', 'url']) }}>
        <option value="">اختر</option>
        @isset($options)
            @foreach($options as $option)
                <option value="{{ $option->id }}" 
                        @selected($wireModel && in_array($option->id, $this->{$wireModel} ?? []))>
                    {{ $option->$optionNameCol }}
                </option>
            @endforeach
        @endisset
    </select>
    @error($wireModel) <span class="text-danger">{{ $message }}</span> @enderror
</div>

@once
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
@endonce

<script>
document.addEventListener('livewire:init', () => {
    function initSelect2() {
        const select2Instance = $('#{{ $selectId }}');

        // Destroy existing instance if it exists
        if (select2Instance.hasClass('select2-hidden-accessible')) {
            select2Instance.select2('destroy');
        }

        // Initialize Select2
        select2Instance.select2({
            allowClear: true,
            width: '100%',
            @isset($url)
            ajax: {
                url: `{{ $url }}`,
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        search: params.term || '',
                        page: params.page || 1
                    };
                },
                cache: true
            }
            @endisset
        });

        // Initialize with current value if wire:model exists
        @isset($wireModel)
        const initialValue = @json($this->{$wireModel} ?? []);
        if (initialValue && initialValue.length > 0) {
            select2Instance.val(initialValue).trigger('change');
        }
        @endisset

        // Update Livewire when Select2 changes
        select2Instance.on('change', function () {
            const data = $(this).val() || [];
            @this.set('{{ $wireModel }}', data);
        });
    }

    initSelect2();

    // Refresh when Livewire updates
    Livewire.hook('commit', ({ component, succeed }) => {
        succeed(() => {
            initSelect2();
        });
    });
});
</script>