@props([
    'name' => 'solicitante_id',
    'tipoName' => 'solicitante_tipo',
    'displayName' => 'ti_solicitante_nome',
    'inputId' => 'ti-solicitante-nome',
    'hiddenId' => 'ti-solicitante-id',
    'tipoId' => 'ti-solicitante-tipo',
    'suggestId' => 'ti-solicitante-sugest',
    'clearId' => 'ti-solicitante-limpar',
    'route',
    'novoClienteTarget' => '#modalNovoClienteTi',
    'value' => '',
    'tipoValue' => '',
    'label' => 'Solicitante',
    'placeholder' => 'Buscar por nome, CPF ou matrícula…',
])

{{--
    Autocomplete de solicitante para Demandas TI.
    Diferente do x-autocomplete.user genérico: a busca retorna usuários internos
    E clientes externos, então além do ID guarda o "tipo" (usuario|cliente) — exigido
    pelo backend (DemandaService) para vincular user_id ou cliente_id corretamente.
    Inclui o atalho para cadastrar um novo solicitante externo via modal.
    Inicializado por demandas.js (initTiForm → dmAutocomplete).
--}}
<div class="col-md-6" style="position:relative;">
    <label class="form-label fw-semibold">{{ __($label) }}</label>
    <div class="input-group">
        <input type="text" id="{{ $inputId }}"
            class="form-control @error($name) is-invalid @enderror"
            placeholder="{{ __($placeholder) }}"
            autocomplete="off"
            value="{{ old($displayName, $value) }}"
            data-url="{{ $route }}">
        <button type="button" class="btn btn-outline-secondary" id="{{ $clearId }}" title="{{ __('Limpar') }}">
            <i class="fa-solid fa-times"></i>
        </button>
    </div>

    <input type="hidden" name="{{ $name }}" id="{{ $hiddenId }}" value="{{ old($name, '') }}">
    <input type="hidden" name="{{ $tipoName }}" id="{{ $tipoId }}" value="{{ old($tipoName, $tipoValue) }}">

    <div id="{{ $suggestId }}" class="list-group position-absolute w-100 shadow-sm d-none"
        style="z-index:1001;top:100%;left:0;"></div>

    <button type="button" class="btn btn-sm btn-link px-0 mt-1"
        data-bs-toggle="modal" data-bs-target="{{ $novoClienteTarget }}">
        <i class="fa-solid fa-user-plus me-1"></i>{{ __('Novo solicitante externo') }}
    </button>

    @error($name)
        <div class="invalid-feedback d-block">{{ $message }}</div>
    @enderror
</div>