@props([
    'disabled' => false,
    'title' => '',
    'name' => $attributes->wire('model')->value() ?? '',
    'id' => '',
    'hint' => '',
    'type' => 'text',
    'placeholder' => '',
    'isrequired' => false,
    'mb' => 'mb-3',
    'titleActionLabel' => '',
    'titleActionClick' => '',
    'titleActionClass' => '',
])
@php
    $isDateType = $type === 'date';
    $inputClasses = 'kt-input '.($errors->has($name) ? 'border-danger ' : '').($isDateType ? 'kt-input-date' : '');
    $titleActionClasses = trim('inline-flex !w-auto shrink-0 cursor-pointer items-center whitespace-nowrap border-0 bg-transparent p-0 text-[12px] leading-none font-semibold text-primary underline underline-offset-2 hover:text-primary/80 '.$titleActionClass);
@endphp
<div class="kt-form-item {{$mb}} @error($name) has_error @enderror">
    @if(isset($title) && $title != '')
        <div class="flex w-full items-center justify-between gap-2">
            <label class="{{$attributes->has('required') || $isrequired ? 'required' : ''}} kt-form-label !mb-0 !w-auto">{{$title}}</label>
            @if($titleActionLabel !== '')
                <button
                    type="button"
                    class="{{$titleActionClasses}}"
                    @if($titleActionClick !== '')
                        wire:click="{{$titleActionClick}}"
                    @endif
                >
                    {{$titleActionLabel}}
                </button>
            @endif
        </div>
    @endif
    <div class="kt-form-control relative">
        <input
            @if($type == 'date') data="has_date_picker" type="date" @else type="{{$type ?: 'text'}}" @endif
            @if($isrequired) required @endif
            {{ $disabled ? 'disabled' : '' }}
            @error($name)
                aria-invalid="true"
            @enderror
            {!! $attributes->merge(['class' => $inputClasses]) !!}
            name="{{$name}}"
            id="{{$id ?: $name}}"
            value="{{old($name, isset($value) ? $value : null)}}"
            placeholder="{{$placeholder ?: $title}}"
        />
        @if($isDateType)
            <span class="pointer-events-none absolute end-3 top-1/2 -translate-y-1/2 text-muted-foreground">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="4" width="18" height="18" rx="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                </svg>
            </span>
        @endif
        {{ $slot ?? '' }}
    </div>
    @if($hint)
        <div class="kt-form-description">{{$hint}}</div>
    @endif
    @error($name)
        <div class="kt-form-message JS_error has-error">
            {{ $message }}
        </div>
    @enderror
    <span class="JS_error text-danger has-error"></span>
</div>