@props([
    'placeholder' => null,
    'id',
    'label',
    'name',
    'options',
    'query',
    'selected',
    'hint',
    'required' => null,
    'disabled' => false,
    'default' => true,
    'class' => null,
    'selectclass' => null,
    'isSelect' => true,
    'selectedType' => 'id',
])

@php
    $id = $id ?? $name;
@endphp

<div class="dash-input-wrapper w-full {{ $class }}">
    <label for="{{ $id }}" class="form-label">
        {{ $label }}{{ $required ? '*' : '' }}
    </label>

    <div class="d-block w-100">
        <select id="{{ $id }}" name="{{ $name }}"
            class="gs-dash-nice-select xl full-width-nice @error($name) error @enderror"
            {{ $required ? 'required' : '' }} {{ $disabled ? 'disabled' : '' }}>
            @foreach ($options as $item)
                @php
                    $selectedValue = old($name, @$selected);
                    $expectedValue = $selectedType === 'id' ? $item['id'] : $item['title'];
                    $isSelectedFlag = $isSelect && $selectedValue == $expectedValue;
                @endphp

                <x-global.selectoption :value="$item['id']" :label="$item[$query]" :isSelected="$isSelectedFlag" />
            @endforeach
        </select>
    </div>

    @error($name)
        <span class="error-msg">{{ $message }}</span>
    @else
        <span class="hint-msg">{{ $hint ?? '' }}</span>
    @enderror
</div>