@assets
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icons/7.2.1/css/flag-icons.min.css" integrity="sha512-bZBu2H0+FGFz/stDN/L0k8J0G8qVsAL0ht1qg5kTwtAheiXwiRKyCq1frwfbSFSJN3jooR5kauE0YjtPzhZtJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@endassets
@php
    $identifier = 's_'.uniqid();
@endphp


<select class="form-select" id="{{$identifier}}" data-placeholder="{{$placeholder}}">
    <option></option>
    @foreach ($options as $option)
        <option value="{{ $option[$value] }}"
        @if(!is_null($flag))
            data-flag="fi fi-{{strtolower($option[$flag])}}"
        @endif
        >{{ $option[$text] }}</option>
    @endforeach
</select>

@script
<script type="text/javascript">
    let select2Element = $('#{{$identifier}}')
    Livewire.hook('element.init', ({ component, el }) => {
        if (el.id !== '{{$identifier}') {
            return
        }

        function format (option) {
            if (!option || !option.element) { 
                return option.text;
            }

            if (!option.element.dataset) {
                return option.text;
            }

            var flag = option.element.dataset.flag; 
            var text = option.text;

            var formattedOption = '<span class="' + flag + '"></span> ' + text;
            return formattedOption;
        };

        function init(el){
            el.select2({
                theme: "bootstrap-5",
                templateResult: format,
                templateSelection: format,
                width: $( this ).data( 'width' ) ? $( this ).data( 'width' ) : $( this ).hasClass( 'w-100' ) ? '100%' : 'style',
                placeholder: $( this ).data( 'placeholder' ),
                escapeMarkup: function (m) {
                    return m;
                },
                allowClear: true
            });
        }

        setTimeout(()=>{
            init(select2Element)
        }, 1000)

        select2Element.on('select2:select', function (e) {
            var data = e.params.data;
            $wire.dispatch('change', { value: data.element.value } );
        });
        
        $wire.on('reset', () => {
            select2Element.val(null).trigger('change');
        });

        $wire.on('re-initialize', () => {
            setTimeout(()=>{
                init(select2Element);
            }, 100)
        });
    });
</script>
@endscript