@props([
    'name' => '',
    'label' => '',
    'nullable' => false,
    'disable' => false,
    'tooltip' => null,
    'showError' => true,
    'options' => [],
])
<div {{$attributes->merge(['class' =>  "flex z-0 relative group"])}}>
    <select id="{{$name}}"
            wire:model.live.debounce.100ms="{{$name}}"
            @if($disable) disabled @endif
            class="block disabled:bg-gray-300 px-1 text-center w-full text-sm border rounded-lg pt-2
                   border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600 h-form-input peer
                   @error($name) border-red-500 @enderror "
    >
        @foreach($options as $index=> $option)
            <option value="{{$index}}">{{$option}}</option>
        @endforeach
    </select>
    @if($label)
        <label for="{{$name}}"
               class="peer-focus:font-medium ml-2 absolute text-sm text-gray-500 duration-300 transform -translate-y-4 scale-75 top-4 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4">
            {{$label}}
            @if(!$nullable)<span class="text-red-500 text-xs">*</span>@endif
        </label>
    @endif
    @if ($showError)
        @error($name) <span class="absolute text-red-500 text-xs translate-y-12">{{ $message }}</span> @enderror
    @endif
</div>
@if($tooltip)
    <div id="tooltip{{$name}}" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip">
        {{$tooltip}}
        <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
@endif