{{-- Buscador de cliente: se escribe nombre, apellido, cédula o teléfono y aparecen sugerencias (ReservationController@customerSearch).
     No carga la lista completa de clientes. El cliente elegido va en el campo oculto name="customer_id" (#{{ $id ?? 'customer_id' }}).
     $selected: Customer elegido de antemano (o null). $new: muestra "Cliente nuevo" (abre la ventana #new-customer). --}}
@php $pid = $id ?? 'customer_id'; @endphp
<div class="cust-picker" data-url="{{ route('reservations.customer-search') }}" data-target="#{{ $pid }}">
    <div class="cust-picker-box">
        <i class="fa fa-search"></i>
        <input type="text" class="form-control cust-picker-input" autocomplete="off" placeholder="{{ $placeholder ?? 'Escribe nombre, apellido, cédula o teléfono…' }}"
            value="{{ $selected ? $selected->name . (($selected->tax_no ?: $selected->ruc) ? ' (' . ($selected->tax_no ?: $selected->ruc) . ')' : '') : '' }}" aria-label="Buscar cliente" aria-autocomplete="list">
        <button type="button" class="cust-picker-clear" aria-label="Quitar cliente" @if(!$selected) hidden @endif>&times;</button>
    </div>
    <input type="hidden" name="customer_id" id="{{ $pid }}" value="{{ $selected->id ?? '' }}">
    <div class="cust-picker-list" role="listbox" hidden></div>
    @if($new ?? true)<a href="#" class="cust-picker-new" data-toggle="modal" data-target="#new-customer"><i class="fa fa-user-plus"></i> Cliente nuevo</a>@endif
</div>
@once
<style>
    .cust-picker { position: relative; }
    .cust-picker-box { position: relative; }
    .cust-picker-box > .fa-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted, #6b7280); pointer-events: none; }
    .cust-picker-input { padding-left: 34px !important; padding-right: 34px !important; }
    .cust-picker-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; font-size: 20px; line-height: 1; color: var(--text-muted, #6b7280); padding: 4px 8px; }
    .cust-picker-list { position: absolute; z-index: 1060; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow: auto; background: var(--surface, #fff);
        border: 1px solid var(--border, #e5e7eb); border-radius: 12px; box-shadow: 0 14px 30px -10px rgba(16,24,40,.25); padding: 4px; }
    .cust-picker-list button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; color: var(--text, #111827); font-size: 14px; }
    .cust-picker-list button small { display: block; color: var(--text-muted, #6b7280); font-size: 12px; }
    .cust-picker-list button:hover, .cust-picker-list button.is-hover { background: var(--brand-softer, #eef2ff); }
    .cust-picker-list .cust-picker-empty { padding: 10px; color: var(--text-muted, #6b7280); font-size: 13px; }
    .cust-picker-new { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; }
</style>
<script>
// Buscador de cliente (ver reservation/_customer_picker). window.custPickerSet(picker, cliente) lo usa la ventana "Cliente nuevo".
(function ($) {
    window.custPickerSet = function (picker, c) {
        picker = $(picker);
        picker.find('.cust-picker-input').val(c.name + (c.tax_no ? ' (' + c.tax_no + ')' : ''));
        $(picker.data('target')).val(c.id).trigger('change');
        picker.find('.cust-picker-clear').prop('hidden', false);
        picker.find('.cust-picker-list').prop('hidden', true).empty();
    };
    $(document).on('input', '.cust-picker-input', function () {
        var input = $(this), picker = input.closest('.cust-picker'), list = picker.find('.cust-picker-list'), q = $.trim(input.val());
        $(picker.data('target')).val('').trigger('change');
        picker.find('.cust-picker-clear').prop('hidden', !q);
        clearTimeout(picker.data('timer'));
        if (q.length < 2) { list.prop('hidden', true).empty(); return; }
        picker.data('timer', setTimeout(function () {
            var req = picker.data('req'); if (req) req.abort();
            picker.data('req', $.getJSON(picker.data('url'), { q: q }, function (rows) {
                list.empty();
                if (!rows.length) list.append($('<div class="cust-picker-empty">').text('No hay clientes con "' + q + '". Usa «Cliente nuevo».'));
                rows.forEach(function (c) {
                    list.append($('<button type="button" role="option">').data('c', c).text(c.name)
                        .append($('<small>').text([c.tax_no, c.phone].filter(Boolean).join(' · '))));
                });
                list.prop('hidden', false);
            }));
        }, 250));
    }).on('keydown', '.cust-picker-input', function (e) {
        var list = $(this).closest('.cust-picker').find('.cust-picker-list'), items = list.find('button'), cur = items.index(items.filter('.is-hover'));
        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
            e.preventDefault(); if (!items.length) return;
            cur = e.key === 'ArrowDown' ? Math.min(cur + 1, items.length - 1) : Math.max(cur - 1, 0);
            items.removeClass('is-hover').eq(cur).addClass('is-hover')[0].scrollIntoView({ block: 'nearest' });
        } else if (e.key === 'Enter' && !list.prop('hidden')) {
            e.preventDefault(); (cur >= 0 ? items.eq(cur) : items.first()).trigger('click');
        } else if (e.key === 'Escape') list.prop('hidden', true);
    }).on('click', '.cust-picker-list button', function () {
        custPickerSet($(this).closest('.cust-picker'), $(this).data('c'));
    }).on('click', '.cust-picker-clear', function () {
        var picker = $(this).closest('.cust-picker');
        picker.find('.cust-picker-input').val('').trigger('focus');
        $(picker.data('target')).val('').trigger('change');
        $(this).prop('hidden', true); picker.find('.cust-picker-list').prop('hidden', true).empty();
    }).on('click', function (e) {
        if (!$(e.target).closest('.cust-picker').length) $('.cust-picker-list').prop('hidden', true);
    });
})(jQuery);
</script>
@endonce