{{-- Ventana emergente "Cliente nuevo" (como en el POS): guarda el cliente sin salir de la página (ReservationController@quickCustomer)
     y lo deja elegido en el buscador de cliente que la abrió (reservation/_customer_picker). --}}
<div id="new-customer" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="new-customer-form">
                <div class="modal-header"><h5 class="modal-title">Cliente nuevo</h5><button type="button" class="close" data-dismiss="modal">&times;</button></div>
                <div class="modal-body">
                    <div class="alert alert-danger d-none" id="new-customer-error"></div>
                    <div class="form-group"><label><strong>Nombre completo *</strong></label><input name="name" required maxlength="191" class="form-control"></div>
                    <div class="form-row">
                        <div class="form-group col-5"><label><strong>Tipo *</strong></label>
                            <select name="tipo_identificacion" class="form-control"><option value="05">Cédula</option><option value="04">RUC</option><option value="06">Pasaporte</option></select></div>
                        <div class="form-group col-7"><label><strong>Número *</strong></label><input name="tax_no" required maxlength="20" class="form-control"></div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-6"><label><strong>Teléfono *</strong></label><input name="phone_number" required maxlength="20" class="form-control" placeholder="09..."></div>
                        <div class="form-group col-6"><label>Correo</label><input name="email" type="email" maxlength="191" class="form-control"></div>
                    </div>
                    <div class="form-group"><label>Dirección</label><input name="address" maxlength="191" class="form-control"></div>
                    <small>Si la cédula ya está registrada, se usa ese cliente (no se crea otro).</small>
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Guardar cliente</button></div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    var newCustomerPicker = null;
    $(document).on('click', '[data-target="#new-customer"]', function () { newCustomerPicker = $(this).closest('.cust-picker'); if (!newCustomerPicker.length) newCustomerPicker = null; });
    // Lo escrito en el buscador pasa al nombre del cliente nuevo.
    $('#new-customer').on('show.bs.modal', function (e) {
        // Bootstrap indica qué enlace abrió la ventana (relatedTarget): su buscador recibe el cliente nuevo.
        if (e.relatedTarget) { var opener = $(e.relatedTarget).closest('.cust-picker'); newCustomerPicker = opener.length ? opener : null; }
        $('.cust-picker-list').prop('hidden', true);
        var typed = newCustomerPicker ? $.trim(newCustomerPicker.find('.cust-picker-input').val()) : '';
        var name = $(this).find('input[name=name]');
        if (typed && !name.val() && !/\d/.test(typed)) name.val(typed);
        if (typed && /^\d+$/.test(typed)) $(this).find('input[name=tax_no]').val(typed);
    }).on('shown.bs.modal', function () { $(this).find('input[name=name]').trigger('focus'); });
    $('#new-customer-form').on('submit', function(e) {
        e.preventDefault();
        var form = $(this), btn = form.find('button[type=submit]');
        btn.prop('disabled', true);
        $('#new-customer-error').addClass('d-none');
        $.ajax({
            url: "{{ route('reservations.quick-customer') }}", method: 'POST',
            data: form.serialize() + '&_token={{ csrf_token() }}',
            success: function(c) {
                // Se elige en el buscador que abrió la ventana; la página no se recarga.
                custPickerSet(newCustomerPicker || $('.cust-picker').first(), c);
                $('#new-customer').modal('hide');
                form[0].reset();
                if (c.existing) alert('Ese cliente ya estaba registrado: se seleccionó "' + c.name + '".');
            },
            error: function(xhr) {
                var r = xhr.responseJSON || {}, msg = r.message || 'No se pudo guardar el cliente.';
                if (r.errors) msg = Object.values(r.errors).map(function(v) { return v[0]; }).join(' ');
                $('#new-customer-error').text(msg).removeClass('d-none');
            },
            complete: function() { btn.prop('disabled', false); }
        });
    });
</script>