@props([
    'name' => '',
    'label' => '',
    'required' => true,
    'disabled' => false,
    'tooltip' => '',
    'type' => 'text',
    'mask' => null,
    'func' => '',
    'autocomplete' => 'off',
    'max' => 255,
    'maxNumber' => null,
    'minNumber' => null,
    'warning' => '',
    'showError' => true,
    'isError' => false,
    'keydownEnter' => '',
    'class' => '',
    'showsMinusMark' => false,
    'wireModelType' => \App\Enums\ELivewireModelType::LAZY,
    'focusSkip' => false,
    'can_display' => true,
])
@error($name)
@php
    $isError = true;
@endphp
@enderror

{{--項目表示制御--}}
@if($can_display)

    <div {{$attributes->merge(['class' =>  "flex relative group ".$class])}} >
        <div class="absolute h-full pl-2 text-md text-red-500 pt-2 {{ $showsMinusMark ? "opacity-100" : "opacity-0" }}">
            △
        </div>
        <x-forms.text-field :id="$name"
                            :x-ref="last(explode('.', $name))"
                            name="{{$name}}"
                            type="{{$type}}"
                            maxlength="{{$max}}"
                            min="{{$minNumber}}"
                            max="{{$maxNumber}}"
                            {{ $attributes->merge([$wireModelType->attribute() => $name])->only([$wireModelType->attribute()]) }}
                            @blur.debounce="{{ $func = $func ? '$wire.' . $func : '' }}"
                            autocomplete="{{$autocomplete}}"
                            @class([
                               $class,
                                "pt-4" => $label
                            ])
                            placeholder="　"
                            :required="$required"
                            :disabled="$disabled"
                            :focus-skip="$focusSkip"
                            :is-error="$isError"
                            :is-warning="!empty($warning)"
                            :mask="$mask"
                            @keydown.enter="{{$keydownEnter}}"
        />
        @if($label)
            <label for="{{$name}}"
                   class="peer-focus:font-medium ml-2 cursor-text absolute text-sm text-gray-400 duration-300 transform -translate-y-3 scale-75 top-3 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

        @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-9 min-w-52">{{ $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>
    @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

@endif