{{--
    Form Input Component
--}}
@props([
'name' => '',
'type' => 'text',
'placeholder' => '',
'value' => null,
'required' => false,
'disabled' => false,
'icon' => null,
'iconTrailing' => null,
'clearable' => false,
'darkVariant' => false,
])

@php
$control = 'block w-full rounded-lg border border-input bg-card px-3 py-2.5 text-sm text-card-foreground shadow-sm transition-colors duration-200 placeholder:text-muted-foreground focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:focus:border-primary-400 disabled:opacity-60 disabled:cursor-not-allowed';
$err = $errors->has($name) ? ' border-red-400 focus:border-red-500 focus:ring-red-500/20' : '';


if ($darkVariant) {
$control = 'block w-full rounded-[10px] border border-white/12 bg-[rgb(var(--auth-surface)_/_0.45)] px-3.5 py-2.5 text-sm text-white outline-none transition-[border-color,box-shadow] placeholder:text-white/30 focus:border-violet-300/70 focus:ring-[3px] focus:ring-violet-500/20 disabled:opacity-60 disabled:cursor-not-allowed';
}

if ($attributes->has('data-cb-search')) {
$clearable = true;
}
@endphp

<div
    class="relative"
    @if($type==='password' )
    x-data="{ show: false }"
    @password-hide.window="show = false"
    @endif>
    @if($icon)
    <span class="pointer-events-none absolute inset-y-0 left-3 flex items-center text-muted-foreground">
        <x-dynamic-component :component="$icon" class="w-4 h-4 flex-shrink-0" />
    </span>
    @endif

    <input
        @if($type==='password' )
        x-bind:type="show ? 'text' : 'password'"
        @else
        type="{{ $type }}"
        @endif
        id="{{ $name }}"
        name="{{ $name }}"
        value="{{ old($name, $value) }}"
        placeholder="{{ $placeholder }}"
        {{ $required ? 'required' : '' }}
        {{ $disabled ? 'disabled' : '' }}
        @if($clearable && !$attributes->has('x-model'))
    oninput="const btn = this.parentElement.querySelector('button[type=button]:last-child'); if(this.value.length > 0) btn?.classList.remove('hidden'); else btn?.classList.add('hidden');"
    @endif
    {{ $attributes->merge(['class' => trim($control.$err.' '.($icon ? 'pl-10 ' : '').($iconTrailing ? 'pr-10 ' : ''))]) }}
    />

    @if($type === 'password')
    <button
        type="button"
        @click="show = !show"
        class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center text-muted-foreground">
        <x-heroicon-o-eye class="w-4 h-4" x-show="show" x-cloak />
        <x-heroicon-o-eye-slash class="w-4 h-4" x-show="!show" x-cloak />
    </button>
    @endif

    @if($iconTrailing && !$clearable)
    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-muted-foreground">
        <x-dynamic-component :component="$iconTrailing" class="w-4 h-4 flex-shrink-0" />
    </span>
    @endif

    @if($clearable)
    <button
        data-cb-cross-icon
        type="button"
        @if($attributes->has('x-model'))
        x-show="String({{ $attributes->get('x-model') }} || '').length > 0"
        @click="let input = $el.parentElement.querySelector('input'); input.value = ''; input.dispatchEvent(new Event('input', { bubbles: true }));"
        x-cloak
        @else
        onclick="const input = this.parentElement.querySelector('input'); input.value = ''; input.dispatchEvent(new Event('input', { bubbles: true })); this.classList.add('hidden');"
        @endif
        class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center text-muted-foreground hover:text-foreground {{ (!$attributes->has('x-model') && empty(old($name, $value))) ? 'hidden' : '' }}">
        <x-heroicon-m-x-mark class="w-4 h-4" />
    </button>
    @endif
</div>