@props([
    'title' => '',
    'model' => '',
    'conditionModel' => '',
    'name' => '',
    'conditionName' => '',
    'type' => 'text',
    'placeholder' => '',
    'value' => '',
    'conditionValue' => '',
    'conditionOptions' => [],
    'hint' => '',
    'disabled' => false,
    'mb' => 'mb-3',
    'min' => null,
    'step' => null,
])

@php
    $hasError = $errors->has($name) || $errors->has($conditionName);
@endphp

<div class="kt-form-item {{ $mb }} {{ $hasError ? 'has_error' : '' }}">
    @if($title !== '')
        <label class="kt-form-label">{{ $title }}</label>
    @endif

    <div class="kt-form-control">
        <div class="flex overflow-hidden rounded-md border {{ $hasError ? 'border-danger' : 'border-input' }} bg-background">
            <input
                {{ $disabled ? 'disabled' : '' }}
                type="{{ $type ?: 'text' }}"
                @if(! is_null($min)) min="{{ $min }}" @endif
                @if(! is_null($step) && $step !== '') step="{{ $step }}" @endif
                @if($model !== '') wire:model.live="{{ $model }}" @endif
                {!! $attributes->merge(['class' => 'kt-input !mb-0 !rounded-none !border-0 flex-1']) !!}
                name="{{ $name }}"
                value="{{ old($name, $value) }}"
                placeholder="{{ $placeholder ?: $title }}"
            />

            <div class="w-36 shrink-0 border-e border-input bg-muted/70">
                <select
                    @if($conditionModel !== '') wire:model.live="{{ $conditionModel }}" @endif
                    name="{{ $conditionName }}"
                    class="kt-select kt-select-sm h-full w-full rounded-none border-0 !bg-transparent px-3 text-sm !text-foreground shadow-none focus:outline-none"
                >
                    @foreach($conditionOptions as $optionKey => $optionTitle)
                        <option value="{{ $optionKey }}" {{ (string) request()->get($conditionName, $conditionValue) === (string) $optionKey ? 'selected' : '' }}>
                            {{ $optionTitle }}
                        </option>
                    @endforeach
                </select>
            </div>
        </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

        @error($conditionName)
            <div class="kt-form-message JS_error has-error">{{ $message }}</div>
        @enderror
    </div>
</div>