@props(['placeholder' => 'Select', 'id'])

<div wire:ignore>
	<select {{ $attributes }} id="{{ $id }}" data-placeholder="{{ $placeholder }}" style="width: 100%;">
		{{ $slot }}
	</select>
</div>

@once
	@push('scripts')
		<script src="/app-assets/js/select2.js"></script>
	@endpush
	
	@push('styles')
	<link rel="stylesheet" type="text/css" href="/app-assets/css/select2.css">
	@endpush
@endonce

@push('scripts')
	<script>
        $(function() {
            $('#{{ $id }}').select2().on('change', function (e) {
		        @this.set('{{ $attributes['wire:model'] }}', $(this).val());
            });
        })
	</script>
@endpush