@props([
    'label' => null,
    'name' => '',
    'options' => [],
    'selected' => null,
    'placeholder' => 'Select an option',
    'required' => false,
    'disabled' => false,
    'helper' => null,
    'multiple' => false,
    'searchable' => false
])

<div class="mb-3">
    @if($label)
    <label for="{{ $name }}" class="form-label">
        {{ $label }}
        @if($required)
        <span class="text-danger">*</span>
        @endif
    </label>
    @endif

    <select
        name="{{ $name }}{{ $multiple ? '[]' : '' }}"
        id="{{ $name }}"
        {{ $attributes->merge(['class' => 'form-select' . ($errors->has($name) ? ' is-invalid' : '') . ($searchable ? ' select2-search' : '')]) }}
        @if($required) required @endif
        @if($disabled) disabled @endif
        @if($multiple) multiple @endif
    >
        @if($placeholder && !$multiple)
        <option value="">{{ $placeholder }}</option>
        @endif

        @foreach($options as $key => $value)
            @if(is_array($value))
                <optgroup label="{{ $key }}">
                    @foreach($value as $subKey => $subValue)
                        <option value="{{ $subKey }}" @selected(old($name, $selected) == $subKey)>
                            {{ $subValue }}
                        </option>
                    @endforeach
                </optgroup>
            @else
                <option value="{{ $key }}" @selected(old($name, $selected) == $key)>
                    {{ $value }}
                </option>
            @endif
        @endforeach
    </select>

    @error($name)
    <div class="invalid-feedback">{{ $message }}</div>
    @enderror

    @if($helper)
    <div class="form-text">{{ $helper }}</div>
    @endif
</div>

@if($searchable)
@push('scripts')
<script>
    $(document).ready(function() {
        if (!$('#{{ $name }}').data('select2')) {
            $('#{{ $name }}').select2({
                placeholder: "{{ $placeholder }}",
                allowClear: true,
                width: '100%'
            });
        }
    });
</script>
@endpush
@endif