@props([
    'id' => '',
    'label' => '',
    'name' => '',
    'options' => [],
    'selected' => null,
    'useFilter' => true,
    'canClear' => false,
    'multiple' => false,
    'container' => null,
    'placeholder' => __('general.select'),
])
<div class="mb-2">
    <div class="form-floating">
        <select {{ $attributes->class(['form-select']) }} id="{{ $id }}" @if(!empty($name)) name="{{ $name }}" @endif @if(!$useFilter) data-minimum-results-for-search="Infinity" @endif style="width: 100%;" {{ $multiple ? 'multiple' : '' }}>
            @if($canClear)
                <option></option>
            @endif
            @foreach($options as $key => $value)
                <option value="{{ $key }}" @selected($key == $selected) >{{ $value }}</option>
            @endforeach
        </select>
        @if(!empty($label))
            <label class="form-label" for="">{{ $label }}
                @if($attributes['required'])
                    <span class="text-danger">*</span>
                @endif
            </label>
        @endif
    </div>
</div>

@push('scripts')
    <script type="module">
        const dropdownParent = @json($container);

        $(document).ready(function () {
            $('#{{ $id }}').select2({
                placeholder: '{{ $placeholder }}',
                allowClear: @json($canClear),
                dropdownParent: dropdownParent || $(document.body),
            })
        });
    </script>
@endpush