@props([
    'name' => '',
    'filterCol' => '',
    'label' => '',
    'required' => true,
    'disabled' => false,
    'warning' => '',
    'showError' => true,
    'isError' => false,
    'tooltip' => '',
    'type' => 'text',
    'result' => '',
    'resultPosition' => 'under',
    'func' => '',
    'autocomplete' => 'off',
    'max' => 255,
    'maxWidth' => 8,
    'nameLength' => 20,
    'wireModelType' => \App\Enums\ELivewireModelType::BLUR,
    'focusSkip' => false,
])
@error($name)
@php
    $isError = true;
@endphp
@enderror

<div {{$attributes->merge(['class' => "flex z-0 relative group bg-red h-form-input"])}}>
    <div class="relative flex w-full ">
        <x-forms.text-field :id="$name"
                            :x-ref="last(explode('.', $name))"
                            type="{{$type}}"
                            name="{{$name}}"
                            maxlength="{{$max}}"
                            {{ $attributes->merge([$wireModelType->attribute() => $name])->only([$wireModelType->attribute()]) }}
                            @blur.debounce="{{  $func ? '$wire.' . $func : '' }}"
                            wire:keydown.f5.prevent.stop="openSelectionModal('{{$name}}')"
                            @class([
                                "pt-4" => $label
                            ])
                            placeholder="{{ str_contains($filterCol, 'name') ? '全一致' : '　' }}"
                            autocomplete="{{$autocomplete}}"
                            :required="$required"
                            :disabled="$disabled"
                            :focus-skip="$focusSkip"
                            :is-error="$isError"
                            :is-warning="!empty($warning)"
        />
        @if($label)
            <label for="{{$name}}"
                   class="peer-focus:font-medium ml-2 cursor-text absolute text-sm text-gray-400 duration-300 transform
                          left-0 -translate-y-3 scale-75 self-center 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-3">
                {{$label}}
                @if($required)
                    <span class="text-red-500 text-xs">*</span>
                @endif
            </label>
        @endif
        <div
            @class([
                "absolute  right-0 self-center px-2 rounded font-medium text-sm",
                "text-gray-500" => $disabled,
                "text-primary-600 hover:text-neutral-900 hover:bg-neutral-100 cursor-pointer" => !$disabled,
            ])
            @if(!$disabled) wire:click="openSelectionModal('{{$name}}')" @endif
        >
            <i class="fa fa-list" wire:loading.remove wire:target="openSelectionModal('{{$name}}')"></i>
            <x-others.indicator class="hidden" wire:loading wire:target="openSelectionModal('{{$name}}')" />
        </div>
    @error($name)
    @else
        <div
            class="text-xs pl-1  @if($resultPosition == 'under') absolute translate-y-9 @else flex items-center @endif">
            {{limitString($result, $nameLength)}}
        </div>
        @enderror
        @if($tooltip)
            <i class="fa fa-circle-info text-gray-400 cursor-pointer absolute right-2 top-4"
               data-tooltip-target="tooltip{{$name}}"></i>
        @endif
        @error($name)
            @if($showError)
                <span class="absolute text-red-500 text-xs block bg-gray-50 translate-y-8">{{ $message }}</span>
            @endif
        @elseif($warning)
                <div class="absolute z-10 text-yellow-700 font-bold text-xs block bg-red-300 px-1 bg-opacity-50 rounded -bottom-1">{{ $warning }}</div>
        @enderror

    </div>
</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