<div class="container-fluid py-5" style="background: #f8f9fa; min-height: 100vh;">

    <div class="row justify-content-center">
        <div class="col-lg-11">
            <!-- HEADER -->
            <div class="card shadow border-0 mb-5">
                <div class="card-header bg-info">
                    <h4 class="text-white mb-0 fw-bold">
                        <i class="fas fa-receipt me-2"></i>Nuevo Comprobante / Recibo Interno
                    </h4>
                </div>

                <div class="card-body">
                    <?= $this->Form->create(null, [
                        'autocomplete' => 'off'
                    ]) ?>
                    <!-- INFORMACIÓN DEL USUARIO -->
                    <div class="alert alert-info border-2 border-info mb-4">
                        <i class="fas fa-user-check me-2"></i>
                        <strong>Usuario Autenticado:</strong>
                        <span id="current-user" class="badge bg-info"><?= h($userName ?? 'No identificado') ?></span>
                        <input type="hidden" name="user_id" value="<?= (int)($userId ?? 0) ?>">
                        <input type="hidden" id="user_id_field" value="<?= (int)($userId ?? 0) ?>">
                    </div>

                    <?php if (!empty($presupuestoPrellenado)): ?>
                        <div class="alert alert-primary border-2 border-primary mb-4">
                            <i class="fas fa-file-invoice-dollar me-2"></i>
                            <strong>Generando desde Presupuesto #<?= (int) $presupuestoPrellenado->id ?></strong>
                            — Cliente: <?= h($presupuestoPrellenado->clientes_facturacion->nombre_razon_social ?? '') ?>.
                            Se prellenaron <?= count($itemsPrellenados) ?> ítem(s) con saldo pendiente por facturar.
                            <input type="hidden" name="presupuesto_id" value="<?= (int) $presupuestoPrellenado->id ?>">
                        </div>
                    <?php endif; ?>

                    <!-- SELECCIÓN DE CAJA -->
                    <?php if ($cajaSeleccionada): ?>
                        <!-- CAJA PRE-SELECCIONADA -->
                        <div class="alert alert-success border-2 border-success mb-4">
                            <i class="fas fa-cash-register me-2"></i>
                            <strong>Caja Seleccionada:</strong> 
                            <span class="badge bg-success"><?= h($cajaSeleccionada->nombre) ?> (<?= h($cajaSeleccionada->codigo) ?>)</span>
                            <input type="hidden" name="caja_id" value="<?= (int)$cajaSeleccionada->id ?>">
                        </div>
                        <div class="mb-4">
                            <label class="form-label fw-semibold">Caja</label>
                            <input type="text" class="form-control form-control-solid bg-light" value="<?= h($cajaSeleccionada->nombre) ?> (<?= h($cajaSeleccionada->codigo) ?>)" disabled>
                        </div>
                    <?php else: ?>
                        <!-- SELECTOR DE CAJAS -->
                        <div class="alert alert-warning border-2 border-warning mb-4">
                            <i class="fas fa-cash-register me-2"></i>
                            <strong>Selecciona una Caja:</strong>
                            <div class="mt-2">
                                <select name="caja_id" id="caja_id" class="form-select form-select-solid" required>
                                    <option value="">-- Selecciona una caja abierta --</option>
                                    <?php foreach ($cajasAbiertas as $caja): ?>
                                        <option value="<?= (int)$caja->id ?>">
                                            <?= h($caja->nombre) ?> (<?= h($caja->codigo) ?>) - S/ <?= number_format($caja->monto_inicial, 2) ?>
                                        </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                    <?php endif; ?>

                        <!-- SECCIÓN 1: DATOS GENERALES -->
                        <div class="card card-flush mb-4 border-0 border-top border-5 border-info">
                            <div class="card-header bg-white border-bottom">
                                <h6 class="mb-0 fw-bold text-info">
                                    <i class="fas fa-info-circle me-2"></i>Datos del Comprobante
                                </h6>
                            </div>
                            <div class="card-body pt-4 pb-4">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Empresa</label>
                                        <select name="company_id" id="company_id" class="form-select form-select-solid" required>
                                            <option value="">Seleccione una empresa</option>
                                            <?php foreach ($companies as $id => $label): ?>
                                                <option value="<?= $id ?>"><?= h($label) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Tipo Documento</label>
                                        <select name="tipo_doc" id="tipo_doc" class="form-select form-select-solid" required>
                                            <option value="RI">Recibo Interno</option>
                                            <option value="03">Boleta</option>
                                            <option value="01">Factura</option>
                                        </select>
                                    </div>

                                    <div class="col-md-6 mt-3">
                                        <label class="form-label fw-semibold">Personal Responsable</label>
                                        <select name="doctor_id" id="doctor_id" class="form-select form-select-solid">
                                            <option value="">Seleccione personal</option>
                                            <?php foreach ($personales as $id => $label): ?>
                                                <option value="<?= $id ?>"><?= h($label) ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- SECCIÓN 2: CLIENTE -->
                        <div class="card card-flush mb-4 border-0 border-top border-5 border-info">
                            <div class="card-header bg-white border-bottom">
                                <h6 class="mb-0 fw-bold text-info">
                                    <i class="fas fa-user-circle me-2"></i>Datos del Cliente
                                </h6>
                            </div>
                            <div class="card-body pt-4 pb-4">
                                <!-- Búsqueda de Cliente -->
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Buscar Cliente</label>
                                    <input type="text" id="buscarPaciente" placeholder="Ingrese nombre o documento del cliente..." class="form-control form-control-solid" autocomplete="off">
                                    <input type="hidden" name="cliente_facturacion_id" id="paciente_id">
                                    <div id="resultadosPacientes" class="list-group list-group-flush mt-2" style="max-height: 250px; overflow-y: auto;"></div>
                                </div>

                                <!-- Campos Dinámicos Boleta/Factura -->
                                <div id="boleta-fields" class="row g-3" style="display: none;">
                                <!-- NUEVO: selector tipo doc -->
                                <div class="col-md-3">
                                    <label class="form-label fw-semibold">Tipo Documento</label>
                                    <select name="boleta_tipo_doc" id="boleta_tipo_doc" class="form-select form-select-solid">
                                        <option value="1">DNI</option>
                                        <option value="4">Carnet Extranjería</option>
                                    </select>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-semibold" id="boleta_doc_label">DNI</label>
                                    <div class="input-group">
                                        <input type="text" name="boleta_dni" id="boleta_dni" 
                                            class="form-control form-control-solid" 
                                            maxlength="9" placeholder="12345678">
                                        <button type="button" class="btn btn-outline-primary" id="btn-buscar-dni">
                                            <i class="fas fa-search"></i> Buscar
                                        </button>
                                    </div>
                                    <div id="dni-help" class="form-text mt-1"></div>
                                </div>

                                <div class="col-md-5">
                                    <label class="form-label fw-semibold">Nombre</label>
                                    <input type="text" name="boleta_nombre" id="boleta_nombre" 
                                        class="form-control form-control-solid">
                                </div>
                            </div>
                                <div id="factura-fields" class="row g-3" style="display:none;">
                                    <div class="col-md-4">
                                        <label class="form-label fw-semibold">RUC</label>
                                        <div class="input-group">
                                            <input type="text" name="factura_ruc" id="factura_ruc" class="form-control form-control-solid" maxlength="11" placeholder="12345678901">
                                            <button type="button" class="btn btn-outline-primary" id="btn-buscar-ruc">
                                                <i class="fas fa-search"></i> Buscar
                                            </button>
                                        </div>
                                        <div id="ruc-help" class="form-text mt-1"></div>
                                    </div>

                                    <div class="col-md-8">
                                        <label class="form-label fw-semibold">Razón Social</label>
                                        <input type="text" name="factura_razon_social" id="factura_razon_social" class="form-control form-control-solid">
                                    </div>

                                    <div class="col-md-12">
                                        <label class="form-label fw-semibold">Dirección</label>
                                        <input type="text" name="factura_direccion" id="factura_direccion" class="form-control form-control-solid">
                                    </div>

                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">Email</label>
                                        <input type="email" name="factura_email" id="factura_email" class="form-control form-control-solid">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- SECCIÓN 3: ITEMS -->
                        <div class="card card-flush mb-4 border-0 border-top border-5 border-info">
                            <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
                                <h6 class="mb-0 fw-bold text-info">
                                    <i class="fas fa-shopping-cart me-2"></i>Items / Servicios
                                </h6>
                                <button type="button" class="btn btn-sm btn-info" id="btn-add-item">
                                    <i class="fas fa-plus me-1"></i>Agregar Item
                                </button>
                            </div>
                            <div class="card-body pt-4 pb-4">
                                <div id="items-container"></div>
                            </div>
                        </div>

                        <!-- SECCIÓN 4: PAGO HIBRIDO -->
                        <div class="card card-flush mb-4 border-0 border-top border-5 border-info">
                            <div class="card-header bg-white border-bottom">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0 fw-bold text-info">
                                        <i class="fas fa-wallet me-2"></i>Métodos de Pago (Híbrido)
                                    </h6>
                                    <button type="button" class="btn btn-sm btn-info" id="btn-add-payment-method">
                                        <i class="fas fa-plus me-1"></i>Agregar Método
                                    </button>
                                </div>
                            </div>
                            <div class="card-body pt-4 pb-4">
                                <!-- Métodos de Pago -->
                                <div id="payment-methods-container">
                                    <!-- Se agregarán dinámicamente -->
                                </div>

                                <!-- Input oculto para guardar métodos -->
                                <input type="hidden" name="payment_methods_json" id="payment_methods_json" value="[]">

                                <!-- Resumen de Pago -->
                                <div class="row mt-4">
                                    <div class="col-md-12">
                                        <div class="alert alert-info border-3 border-info mb-0" id="resumen-pago" style="background-color: #e7f3ff;">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <span class="fw-bold fs-6">Total a pagar:</span><br>
                                                    <span class="fw-bold fs-6">Total recibido:</span>
                                                </div>
                                                <div class="text-end">
                                                    <h5 class="mb-0 text-success fw-bold" id="total-invoice">S/ 0.00</h5>
                                                    <h5 class="mb-0 fw-bold" id="total-received" style="color: #0dcaf0;">S/ 0.00</h5>
                                                </div>
                                            </div>
                                            <div id="payment-alert" class="mt-2" style="display: none;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- BOTONES DE ACCIÓN -->
                        <div class="row mt-5">
                            <div class="col-12">
                                <div class="d-flex gap-3 justify-content-center pb-3">
                                    <button type="submit" class="btn btn-info px-3" id="submitButton">
                                        <i class="fas fa-save me-2"></i>Guardar Comprobante
                                    </button>

                                    <a href="<?= $this->Url->build(['action' => 'index']) ?>" class="btn btn-outline-secondary px-3">
                                        <i class="fas fa-times-circle me-2"></i>Cancelar
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?= $this->Form->end() ?>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.card-flush {
    border-radius: 0.375rem;
}

.form-select-solid,
.form-control-solid {
    border: 1px solid #dee2e6;
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    background-color: #fff;
}

.form-select-solid:focus,
.form-control-solid:focus {
    border-color: #0dcaf0;
    box-shadow: 0 0 0 0.2rem rgba(13, 202, 240, 0.25);
}

.list-group-item {
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 0.75rem 1rem;
}

.list-group-item:hover {
    background-color: #f8f9fa;
    cursor: pointer;
}

.item-row {
    border-radius: 0.375rem;
    border-left: 4px solid #0dcaf0;
    transition: all 0.3s ease;
    background-color: #fff;
}

.item-row:hover {
    box-shadow: 0 2px 8px rgba(13, 202, 240, 0.15);
}

.btn {
    font-weight: 600;
    border-radius: 0.375rem;
}

.btn-info {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
}

.btn-info:hover {
    background-color: #0ba5d4;
    border-color: #0ba5d4;
}

.card {
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e9ecef;
}

.border-top.border-5 {
    border-width: 4px !important;
}

.input-group-text {
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    // VERIFICAR QUE EL USUARIO ESTÉ AUTENTICADO
    const userIdField = document.getElementById('user_id_field');
    const userId = userIdField ? parseInt(userIdField.value) : 0;
    const currentUserBadge = document.getElementById('current-user');
    
    if (userId === 0 || !userId) {
        currentUserBadge.classList.remove('bg-info');
        currentUserBadge.classList.add('bg-danger');
        currentUserBadge.textContent = 'SIN AUTENTICAR';
        alert('⚠️ Debes estar autenticado para crear comprobantes');
        return;
    }
    // �🔗 URLs correctas con path base
    const urlBuscarPacientes = '<?= $this->Url->build(['controller' => 'ClientesFacturacion', 'action' => 'buscarCliente']) ?>';
    const urlBuscarProductos = '<?= $this->Url->build('/productos/buscar') ?>';
    const urlConsultarDni = '<?= $this->Url->build('/invoices/consultar-dni-api') ?>';
    const urlConsultarRuc = '<?= $this->Url->build('/invoices/consultar-ruc-api') ?>';
    
    const tipoDoc = document.getElementById('tipo_doc');
    const boletaFields = document.getElementById('boleta-fields');
    const facturaFields = document.getElementById('factura-fields');

    const itemsContainer = document.getElementById('items-container');
    const btnAddItem = document.getElementById('btn-add-item');

    const btnAddPaymentMethod = document.getElementById('btn-add-payment-method');
    const paymentMethodsContainer = document.getElementById('payment-methods-container');
    const paymentMethodsJson = document.getElementById('payment_methods_json');
    const resumenPago = document.getElementById('resumen-pago');
    const totalInvoice = document.getElementById('total-invoice');
    const totalReceived = document.getElementById('total-received');
    const paymentAlert = document.getElementById('payment-alert');
    
    let paymentMethods = [];
    let paymentMethodCounter = 0;

    const servicios = <?= json_encode(array_map(function ($s) {
        return [
            'id' => $s->id,
            'nombre' => $s->nombre,
            'costo' => (float)$s->costo,
            'codigo_producto' => 'SERV',
            'unidad' => 'NIU',
        ];
    }, $servicios ?? []), JSON_UNESCAPED_UNICODE) ?>;

    const productos = <?= json_encode(array_map(function ($p) {
        return [
            'id' => $p->id,
            'nombre' => $p->nombre,
            'precio' => (float)$p->precio,
            'codigo' => $p->codigo ?: 'PROD',
            'unidad' => $p->unidad ?: 'NIU',
            'stock' => (float)$p->cantidad,
        ];
    }, $productos ?? []), JSON_UNESCAPED_UNICODE) ?>;

    let itemIndex = 0;

    function toggleTipoDocumento() {
        const val = tipoDoc.value;
        boletaFields.style.display  = (val === '03' || val === 'RI') ? 'flex' : 'none';
        facturaFields.style.display = val === '01' ? 'flex' : 'none';

         // RI también puede usar cliente (opcional)
        if (val === 'RI') {
            boletaFields.style.display = 'flex'; // o un bloque general
        }
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.innerText = text ?? '';
        return div.innerHTML;
    }

    function buildServicioOptions() {
        let html = '<option value="">Seleccione</option>';
        servicios.forEach(s => {
            html += `<option value="${s.id}" data-nombre="${escapeHtml(s.nombre)}" data-precio="${s.costo}" data-codigo="${escapeHtml(s.codigo_producto)}" data-unidad="${escapeHtml(s.unidad)}">${escapeHtml(s.nombre)} - S/ ${Number(s.costo).toFixed(2)}</option>`;
        });
        return html;
    }

    function buildProductoOptions() {
        let html = '<option value="">Seleccione</option>';
        productos.forEach(p => {
            html += `<option value="${p.id}" data-nombre="${escapeHtml(p.nombre)}" data-precio="${p.precio}" data-codigo="${escapeHtml(p.codigo)}" data-unidad="${escapeHtml(p.unidad)}" data-stock="${p.stock}">${escapeHtml(p.nombre)} - S/ ${Number(p.precio).toFixed(2)} (Stock: ${Number(p.stock).toFixed(2)})</option>`;
        });
        return html;
    }

    function calcularTotalFormulario() {
    let total = 0;

    document.querySelectorAll('.item-row').forEach(row => {
        const cantidadInput  = row.querySelector('.cantidad-input');
        const precioInput    = row.querySelector('.precio-input');
        const descuentoInput = row.querySelector('.descuento-input');
        const descuentoTipo  = row.querySelector('.descuento-tipo-select');
        const helpEl         = row.querySelector('.descuento-help');

        const cantidad  = Number(cantidadInput?.value  || 0);
        const precio    = Number(precioInput?.value    || 0);
        const descuento = Number(descuentoInput?.value || 0);
        const tipo      = descuentoTipo?.value || 'porcentaje';

        let precioConDescuento = precio;
        let descuentoMonto     = 0;

        if (descuento > 0 && precio > 0) {
            if (tipo === 'porcentaje') {
                descuentoMonto     = precio * (descuento / 100);
                precioConDescuento = precio - descuentoMonto;
            } else {
                descuentoMonto     = descuento;
                precioConDescuento = precio - descuento;
            }
            precioConDescuento = Math.max(0, precioConDescuento);
        }

        const lineaTotal = cantidad * precioConDescuento;

        // ✅ Mostrar desglose visual claro
        if (helpEl) {
            if (descuento > 0 && precio > 0) {
                const tipoLabel = tipo === 'porcentaje'
                    ? `${descuento}%`
                    : `S/ ${descuentoMonto.toFixed(2)}`;
                helpEl.innerHTML = `
                    <span class="text-danger text-decoration-line-through me-1">S/ ${precio.toFixed(2)}</span>
                    <span class="text-success fw-bold">→ S/ ${precioConDescuento.toFixed(2)}</span>
                    <span class="text-muted ms-1">(−${tipoLabel})</span>
                    ${cantidad > 1 ? `<br><span class="text-primary">Línea: S/ ${lineaTotal.toFixed(2)}</span>` : ''}
                `;
            } else {
                helpEl.innerHTML = '';
            }
        }

        total += lineaTotal;
    });

    return total;
}
    function actualizarPago() {
        const total = calcularTotalFormulario();
        let totalRecibido = 0;

        paymentMethods.forEach(pm => {
            totalRecibido += parseFloat(pm.monto || 0);
        });

        totalInvoice.textContent = `S/ ${total.toFixed(2)}`;
        totalReceived.textContent = `S/ ${totalRecibido.toFixed(2)}`;

        const diferencia = Math.round((total - totalRecibido) * 100) / 100;
        paymentAlert.style.display = diferencia !== 0 ? 'block' : 'none';

        if (diferencia > 0) {
            paymentAlert.innerHTML = `<strong class="text-warning">⚠️ Falta S/ ${Math.abs(diferencia).toFixed(2)} por cobrar</strong>`;
            paymentAlert.className = 'mt-2';
        } else if (diferencia < 0) {
            paymentAlert.innerHTML = `<strong class="text-warning">⚠️ Sobra S/ ${Math.abs(diferencia).toFixed(2)}</strong>`;
            paymentAlert.className = 'mt-2';
        } else {
            paymentAlert.innerHTML = '<strong class="text-success">✓ El monto recibido coincide con el total a pagar</strong>';
            paymentAlert.className = 'mt-2';
        }

        paymentMethodsJson.value = JSON.stringify(paymentMethods);
    }

    function getPaymentTotals() {
        const total = Math.round(calcularTotalFormulario() * 100) / 100;
        const totalRecibido = Math.round(paymentMethods.reduce((sum, pm) => sum + parseFloat(pm.monto || 0), 0) * 100) / 100;

        return { total, totalRecibido };
    }

    function addPaymentMethod() {
        const pm = {
            id: paymentMethodCounter++,
            metodo: '',
            monto: 0
        };

        paymentMethods.push(pm);
        renderPaymentMethods();
        actualizarPago();
    }

    function removePaymentMethod(id) {
        paymentMethods = paymentMethods.filter(pm => pm.id !== id);
        renderPaymentMethods();
        actualizarPago();
    }

    function updatePaymentMethod(id, field, value) {
        const pm = paymentMethods.find(p => p.id === id);
        if (pm) {
            pm[field] = field === 'monto' ? parseFloat(value || 0) : value;
            actualizarPago();
        }
    }

    function renderPaymentMethods() {
        paymentMethodsContainer.innerHTML = '';

        if (paymentMethods.length === 0) {
            paymentMethodsContainer.innerHTML = '<p class="text-muted">No hay métodos de pago agregados. Haz clic en "Agregar Método".</p>';
            return;
        }

        paymentMethods.forEach(pm => {
            const div = document.createElement('div');
            div.className = 'row g-3 mb-3 p-3 border rounded bg-light';
            
            const metodosOptions = [
                { value: 'EFECTIVO', label: '💵 Efectivo' },
                { value: 'YAPE', label: '📱 Yape' },
                { value: 'TARJETA', label: '💳 Tarjeta' },
                { value: 'TRANSFERENCIA', label: '🏦 Transferencia' },
                { value: 'PLIN', label: '🧾 Plin' },
                { value: 'OTROS', label: '📦 Otros' }
            ];
            
            const selectOptions = '<option value="">-- Seleccionar método --</option>' + 
                metodosOptions.map(m => `<option value="${m.value}" ${pm.metodo === m.value ? 'selected' : ''}>${m.label}</option>`).join('');
            
            div.innerHTML = `
                <div class="col-md-5">
                    <label class="form-label fw-semibold">Método de Pago</label>
                    <select class="form-select form-select-solid" id="metodo-${pm.id}" autocomplete="off">
                        ${selectOptions}
                    </select>
                </div>
                <div class="col-md-5">
                    <label class="form-label fw-semibold">Monto</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light">S/</span>
                        <input type="number" step="0.01" min="0" class="form-control form-control-solid monto-input" 
                            id="monto-${pm.id}" 
                            placeholder="0.00" 
                            value="${pm.monto.toFixed(2)}"
                            inputmode="decimal"
                            autocomplete="off" onwheel="return false;">
                    </div>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <button type="button" class="btn btn-outline-danger btn-sm w-100" id="btn-remove-${pm.id}">
                        <i class="fas fa-trash"></i> Eliminar
                    </button>
                </div>
            `;

            paymentMethodsContainer.appendChild(div);

            // Event listeners
            const selectMethod = document.getElementById(`metodo-${pm.id}`);
            const inputMonto = document.getElementById(`monto-${pm.id}`);
            const btnRemove = document.getElementById(`btn-remove-${pm.id}`);

            selectMethod.value = pm.metodo;
            selectMethod.addEventListener('change', (e) => {
                updatePaymentMethod(pm.id, 'metodo', e.target.value);
            });
            inputMonto.addEventListener('input', (e) => {
                updatePaymentMethod(pm.id, 'monto', e.target.value);
            });
            inputMonto.addEventListener('change', (e) => {
                actualizarPago(); // Recalcular al salir del campo
            });
            btnRemove.addEventListener('click', () => removePaymentMethod(pm.id));
        });
    }

    function toggleItemType(row) {
        const tipoItem = row.querySelector('.tipo-item-select').value;
        const servicioWrap = row.querySelector('.servicio-wrap');
        const productoWrap = row.querySelector('.producto-wrap');
        const searchServicio = row.querySelector('.search-servicio');
        const searchProducto = row.querySelector('.search-producto');
        const descripcionInput = row.querySelector('.descripcion-input');
        const precioInput = row.querySelector('.precio-input');
        const codigoInput = row.querySelector('.codigo-input');
        const unidadInput = row.querySelector('.unidad-input');
        const stockHelp = row.querySelector('.stock-help');
        const resultadosServicio = row.querySelector('.resultados-servicio');
        const resultadosProducto = row.querySelector('.resultados-producto');

        if (tipoItem === 'producto') {
            servicioWrap.style.display = 'none';
            productoWrap.style.display = 'block';
            if (searchServicio) searchServicio.value = '';
            if (resultadosServicio) resultadosServicio.innerHTML = '';
            descripcionInput.value = '';
            precioInput.value = '';
            codigoInput.value = 'PROD';
            unidadInput.value = 'NIU';
            if (stockHelp) stockHelp.innerHTML = '';
        } else {
            servicioWrap.style.display = 'block';
            productoWrap.style.display = 'none';
            if (searchProducto) searchProducto.value = '';
            if (resultadosProducto) resultadosProducto.innerHTML = '';
            descripcionInput.value = '';
            precioInput.value = '';
            codigoInput.value = 'SERV';
            unidadInput.value = 'NIU';
            if (stockHelp) stockHelp.innerHTML = '';
        }
    }

    function addItemRow() {
        const html = `
            <div class="card card-flush mb-3 item-row border-start border-4" data-index="${itemIndex}" style="border-start-color: #667eea !important;">
                <div class="card-body">
                    <div class="row g-3">
                        <!-- Tipo Item -->
                        <div class="col-md-2">
                            <label class="form-label fw-semibold">Tipo</label>
                            <select name="items[${itemIndex}][tipo_item]" class="form-select form-select-solid tipo-item-select">
                                <option value="servicio">Servicio</option>
                                <option value="producto">Producto</option>
                            </select>
                        </div>

                        <!-- Búsqueda Servicio -->
                        <div class="col-md-4 servicio-wrap">
                            <label class="form-label fw-semibold">Servicio</label>
                            <input type="text" class="form-control form-control-solid search-servicio" placeholder="Buscar servicio...">
                            <div class="list-group resultados-servicio mt-2" style="max-height: 200px; overflow-y: auto;"></div>
                            <input type="hidden" name="items[${itemIndex}][servicio_id]" class="servicio-id">
                            <div class="form-text stock-help mt-1"></div>
                        </div>

                        <!-- Búsqueda Producto -->
                        <div class="col-md-4 producto-wrap" style="display: none;">
                            <label class="form-label fw-semibold">Producto</label>
                            <input type="text" class="form-control form-control-solid search-producto" placeholder="Buscar producto...">
                            <div class="list-group resultados-producto mt-2" style="max-height: 200px; overflow-y: auto;"></div>
                            <input type="hidden" name="items[${itemIndex}][producto_id]" class="producto-id">
                            <div class="form-text stock-help mt-1"></div>
                        </div>

                        <!-- Descripción -->
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">
                                Descripción interna 
                                <small class="text-muted fw-normal">(nota para uso interno)</small>
                            </label>
                            <input type="text" name="items[${itemIndex}][descripcion]" class="form-control form-control-solid descripcion-input" placeholder="Describa el servicio o producto">
                        </div>

                        <!-- Cantidad -->
                        <div class="col-md-2">
                            <label class="form-label fw-semibold">Cantidad</label>
                            <input type="number" step="0.01" min="0.01" name="items[${itemIndex}][cantidad]" value="1" class="form-control form-control-solid cantidad-input" onwheel="return false;">
                        </div>

                        <!-- Precio Unitario -->
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Precio Unit.</label>
                            <div class="input-group">
                                <span class="input-group-text bg-light">S/</span>
                                <input type="number" step="0.01" min="0" 
                                    name="items[${itemIndex}][precio_unitario]" 
                                    class="form-control form-control-solid precio-input" 
                                    placeholder="0.00" 
                                    inputmode="decimal"
                                    onwheel="return false;">
                            </div>
                        </div>

                        <!-- Descuento -->
                        <div class="col-md-3">
                            <label class="form-label fw-semibold">Descuento</label>
                            <div class="input-group">
                                <input type="number" step="0.01" min="0"
                                    name="items[${itemIndex}][descuento]"
                                    class="form-control form-control-solid descuento-input"
                                    placeholder="0"
                                    inputmode="decimal"
                                    onwheel="return false;">
                                <select class="form-select form-select-solid descuento-tipo-select" 
                                        name="items[${itemIndex}][descuento_tipo]" 
                                        style="max-width: 80px;">
                                    <option value="porcentaje">%</option>
                                    <option value="monto">S/</option>
                                </select>
                            </div>
                            <div class="form-text descuento-help text-muted mt-1"></div>
                        </div>

                        <!-- Código Producto -->
                        <div class="col-md-2">
                            <label class="form-label fw-semibold">Código</label>
                            <input type="text" name="items[${itemIndex}][codigo_producto]" value="SERV" class="form-control form-control-solid codigo-input" readonly>
                        </div>

                        <!-- Unidad -->
                        <div class="col-md-2">
                            <label class="form-label fw-semibold">Unidad</label>
                            <input type="text" name="items[${itemIndex}][unidad]" value="NIU" class="form-control form-control-solid unidad-input" readonly>
                        </div>

                        <!-- Botón Eliminar -->
                        <div class="col-md-1 d-flex align-items-end">
                            <button type="button" class="btn btn-outline-danger btn-sm w-100 btn-remove-item">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;

        itemsContainer.insertAdjacentHTML('beforeend', html);
        const row = itemsContainer.lastElementChild;

    // 🔥 IMPORTANTE: inicializar estado visual
        toggleItemType(row);
        itemIndex++;
        // attach stock-aware validation to cantidad input
        const cantidadInput = row.querySelector('.cantidad-input');
        const stockHelpEl = row.querySelector('.stock-help');
        if (cantidadInput) {
            cantidadInput.addEventListener('input', function (e) {
                const stock = parseFloat(row.dataset.stock || NaN);
                const val = parseFloat(e.target.value || 0);
                if (!isNaN(stock)) {
                    if (val > stock) {
                        e.target.classList.add('is-invalid');
                        if (stockHelpEl) stockHelpEl.innerHTML = `<span class="badge bg-danger">Cantidad (${val}) excede stock (${stock})</span>`;
                    } else {
                        e.target.classList.remove('is-invalid');
                        if (stockHelpEl) stockHelpEl.innerHTML = `<span class="text-${(stock <= 0 ? 'danger' : 'muted')}">Stock: ${stock}</span>`;
                    }
                }
                actualizarPago();
            });
        }

        actualizarPago();
    }

    itemsContainer.addEventListener('change', function (e) {
        const row = e.target.closest('.item-row');
        if (!row) return;

        if (e.target.classList.contains('tipo-item-select')) {
            toggleItemType(row);
            actualizarPago();
            return;
        }

        if (e.target.classList.contains('descuento-tipo-select')) {
            actualizarPago();
            return;
        }
        
    });

    itemsContainer.addEventListener('input', async function (e) {

    // 🔎 BUSCADOR PRODUCTO
    if (e.target.classList.contains('search-producto')) {

        const query = e.target.value.trim();
        const row = e.target.closest('.item-row');
        const resultsBox = row.querySelector('.resultados-producto');

        if (query.length < 2) {
            resultsBox.innerHTML = '';
            return;
        }

        const res = await fetch(urlBuscarProductos + '?q=' + encodeURIComponent(query));
        const data = await res.json();

        resultsBox.innerHTML = '';

        data.forEach(p => {
            const item = document.createElement('button');
            item.type = "button";
            item.className = "list-group-item list-group-item-action";
            item.innerHTML = `${p.nombre} - S/ ${p.precio} <small class="text-muted">(Stock: ${p.stock})</small>`;

            item.addEventListener('click', () => {
                row.querySelector('.search-producto').value = p.nombre;
                row.querySelector('.producto-id').value = p.id;
                row.querySelector('.descripcion-input').value = p.nombre;

                row.querySelector('.precio-input').value = p.precio;

                // Mostrar stock junto al producto y configurar límites
                const stockHelp = row.querySelector('.stock-help');
                if (stockHelp) stockHelp.innerHTML = `<span class="text-${(p.stock <= 0 ? 'danger' : 'muted')}">Stock: ${p.stock}</span>`;
                // almacenar stock en el row y aplicar máximo a cantidad
                row.dataset.stock = Number(p.stock);
                const cantidadInput = row.querySelector('.cantidad-input');
                if (cantidadInput) {
                    cantidadInput.max = Number(p.stock);
                    // marcar invalid si la cantidad actual excede stock
                    const val = parseFloat(cantidadInput.value || 0);
                    if (!isNaN(val) && val > Number(p.stock)) {
                        cantidadInput.classList.add('is-invalid');
                        if (stockHelp) stockHelp.innerHTML = `<span class="badge bg-danger">Cantidad (${val}) excede stock (${p.stock})</span>`;
                    } else {
                        cantidadInput.classList.remove('is-invalid');
                    }
                }

                resultsBox.innerHTML = '';
                actualizarPago();
            });

            resultsBox.appendChild(item);
        });

        return;
    }
     // 🔎 BUSCADOR SERVICIO
if (e.target.classList.contains('search-servicio')) {

    const query = e.target.value.trim().toLowerCase();
    const row = e.target.closest('.item-row');
    const resultsBox = row.querySelector('.resultados-servicio');

    if (query.length < 2) {
        resultsBox.innerHTML = '';
        return;
    }

    const filtrados = servicios.filter(s =>
        s.nombre.toLowerCase().includes(query)
    );

    resultsBox.innerHTML = '';

    filtrados.forEach(s => {
        const item = document.createElement('button');
        item.type = "button";
        item.className = "list-group-item list-group-item-action";
        item.innerHTML = `${s.nombre} - S/ ${s.costo}`;

        item.addEventListener('click', () => {
            row.querySelector('.search-servicio').value = s.nombre;
            row.querySelector('.servicio-id').value = s.id;
            row.querySelector('.descripcion-input').value = s.nombre;
            row.querySelector('.precio-input').value = s.costo;

            resultsBox.innerHTML = '';
            actualizarPago();
        });

        resultsBox.appendChild(item);
    });

    return;
}



    // 💰 CALCULO NORMAL
    if (
        e.target.classList.contains('cantidad-input') ||
        e.target.classList.contains('precio-input') ||
        e.target.classList.contains('descuento-input')

    ) {
        actualizarPago();
    }
});

    itemsContainer.addEventListener('click', function (e) {
        if (e.target.classList.contains('btn-remove-item')) {
            const rows = itemsContainer.querySelectorAll('.item-row');
            if (rows.length > 1) {
                e.target.closest('.item-row').remove();
                actualizarPago();
            }
        }
    });

    btnAddPaymentMethod.addEventListener('click', addPaymentMethod);
    btnAddItem.addEventListener('click', addItemRow);
    tipoDoc.addEventListener('change', toggleTipoDocumento);

    // Validación antes de enviar: actualizar JSON de métodos y permitir POST normal
    document.querySelector('form').addEventListener('submit', function(e) {
        // Actualizar el JSON con los valores actuales del formulario
        paymentMethods.forEach(pm => {
            const selectEl = document.getElementById(`metodo-${pm.id}`);
            const inputEl = document.getElementById(`monto-${pm.id}`);

            if (selectEl) pm.metodo = selectEl.value;
            if (inputEl) pm.monto = parseFloat(inputEl.value || 0);
        });

        const jsonString = JSON.stringify(paymentMethods);
        paymentMethodsJson.value = jsonString;

        // Validar cantidades vs stock antes de enviar
        let stockError = false;
        document.querySelectorAll('.item-row').forEach(row => {
            const stock = parseFloat(row.dataset.stock || NaN);
            const cantidadInput = row.querySelector('.cantidad-input');
            const stockHelp = row.querySelector('.stock-help');
            if (cantidadInput) {
                const val = parseFloat(cantidadInput.value || 0);
                if (!isNaN(stock) && val > stock) {
                    stockError = true;
                    cantidadInput.classList.add('is-invalid');
                    if (stockHelp) stockHelp.innerHTML = `<span class="badge bg-danger">Cantidad (${val}) excede stock (${stock})</span>`;
                }
            }
        });

        if (stockError) {
            alert('Hay cantidades que exceden el stock. Corrija antes de enviar.');
            e.preventDefault();
            return false;
        }

        // Validar al menos un método de pago
        const validPays = paymentMethods.filter(pm => pm.metodo && pm.monto > 0).length;
        if (validPays === 0) {
            alert('Debes agregar al menos un método de pago con monto válido.');
            e.preventDefault();
            return false;
        }

        const { total, totalRecibido } = getPaymentTotals();
        if (total !== totalRecibido) {
            alert(`El monto recibido debe ser igual al total a pagar. Total: S/ ${total.toFixed(2)} | Recibido: S/ ${totalRecibido.toFixed(2)}`);
            e.preventDefault();
            return false;
        }

        // Dejar que el envío continúe de forma tradicional (server-side),
        // el handler jQuery posterior deshabilitará el botón mientras se procesa.
    });

    <?php if (empty($itemsPrellenados)): ?>
    addItemRow();
    <?php endif; ?>
    toggleTipoDocumento();
    // NO agregar automáticamente EFECTIVO - dejar que el usuario agregue métodos según necesite
    // addPaymentMethod();
    actualizarPago();

    // Pre-seleccionar la primera empresa
    const companySelect = document.getElementById('company_id');
    if (companySelect && companySelect.options.length > 1) {
        companySelect.value = companySelect.options[1].value;
    }

    // Pre-seleccionar la primera caja abierta si no hay caja preseleccionada
    const cajaSelect = document.getElementById('caja_id');
    if (cajaSelect && cajaSelect.options.length > 1) {
        cajaSelect.value = cajaSelect.options[1].value;
    }

    // Restaurar datos previos en caso de error al guardar
    const OLD_FORM = <?= json_encode($oldFormData ?? [], JSON_UNESCAPED_UNICODE) ?>;
    if (OLD_FORM && Object.keys(OLD_FORM).length > 0) {
        try {
            // Restaurar items
            if (Array.isArray(OLD_FORM.items) && OLD_FORM.items.length > 0) {
                itemsContainer.innerHTML = '';
                itemIndex = 0;
                OLD_FORM.items.forEach(it => {
                    addItemRow();
                    const row = itemsContainer.lastElementChild;
                    if (!row) return;
                    const descripcion = row.querySelector('.descripcion-input');
                    const cantidad = row.querySelector('.cantidad-input');
                    const precio = row.querySelector('.precio-input');
                    const tipoSelect = row.querySelector('.tipo-item-select');
                    const productoId = row.querySelector('.producto-id');
                    const servicioId = row.querySelector('.servicio-id');

                    if (it.tipo_item) {
                        tipoSelect.value = it.tipo_item;
                        toggleItemType(row);
                    }
                    if (descripcion) descripcion.value = it.descripcion ?? '';
                    if (cantidad) cantidad.value = it.cantidad ?? 1;
                    if (precio) precio.value = it.precio_unitario ?? it.precio_unitario ?? 0;
                    if (productoId && it.producto_id) {
                        productoId.value = it.producto_id;
                        // Mostrar stock si conocemos el producto en la lista `productos`
                        const prod = productos.find(p => String(p.id) === String(it.producto_id));
                        const stockHelpEl = row.querySelector('.stock-help');
                        const searchProducto = row.querySelector('.search-producto');
                        if (prod) {
                            if (searchProducto) searchProducto.value = prod.nombre;
                            if (precio) precio.value = prod.precio ?? precio.value;
                            if (stockHelpEl) stockHelpEl.innerHTML = `<span class="text-${(prod.stock <= 0 ? 'danger' : 'muted')}">Stock: ${prod.stock}</span>`;
                            // set row stock and cantidad max
                            row.dataset.stock = Number(prod.stock);
                            const cantidadInputRest = row.querySelector('.cantidad-input');
                            if (cantidadInputRest) {
                                cantidadInputRest.max = Number(prod.stock);
                                const val = parseFloat(cantidadInputRest.value || 0);
                                if (!isNaN(val) && val > Number(prod.stock)) {
                                    cantidadInputRest.classList.add('is-invalid');
                                    if (stockHelpEl) stockHelpEl.innerHTML = `<span class="badge bg-danger">Cantidad (${val}) excede stock (${prod.stock})</span>`;
                                }
                            }
                        }
                    }
                    if (servicioId && it.servicio_id) servicioId.value = it.servicio_id;
                });
                actualizarPago();
            }

            // Restaurar métodos de pago
            if (OLD_FORM.payment_methods_json) {
                try {
                    const pm = JSON.parse(OLD_FORM.payment_methods_json);
                    paymentMethods = [];
                    paymentMethodCounter = 0;
                    pm.forEach(p => {
                        paymentMethods.push({ id: paymentMethodCounter++, metodo: p.metodo || '', monto: parseFloat(p.monto || 0) });
                    });
                    renderPaymentMethods();
                    actualizarPago();
                } catch (e) {
                    // ignore
                }
            }

            // Restaurar campos simples
            ['company_id','tipo_doc','doctor_id','boleta_dni','boleta_nombre','factura_ruc','factura_razon_social','factura_direccion','factura_email','cliente_facturacion_id','buscarPaciente','caja_id','boleta_tipo_doc'].forEach(k => {
                if (OLD_FORM[k] !== undefined && OLD_FORM[k] !== null) {
                    const el = document.querySelector(`[name="${k}"]`) || document.getElementById(k);
                    if (el) el.value = OLD_FORM[k];
                }
            });
            toggleTipoDocumento();
        } catch (e) {
            // no-op
        }
    }

    // 🔎 BUSCADOR PACIENTE
    const inputPaciente = document.getElementById('buscarPaciente');
    const resultadosPacientes = document.getElementById('resultadosPacientes');
    const pacienteIdInput = document.getElementById('paciente_id');

    // Guarda los datos del cliente seleccionado (vía búsqueda) para poder
    // rellenar Boleta o Factura según el tipo de documento que se elija,
    // incluso si el usuario cambia de tipo después de seleccionar el cliente.
    let clienteSeleccionado = null;

    function aplicarClienteSeleccionado() {
        if (!clienteSeleccionado) return;

        const tipoActual = tipoDoc.value;
        const boletaDniField = document.getElementById('boleta_dni');
        const boletaNombreField = document.getElementById('boleta_nombre');
        const boletaTipoDocField = document.getElementById('boleta_tipo_doc');
        const boletaDocLabelField = document.getElementById('boleta_doc_label');
        const facturaRucField = document.getElementById('factura_ruc');
        const facturaRazonSocialField = document.getElementById('factura_razon_social');
        const facturaDireccionField = document.getElementById('factura_direccion');
        const facturaEmailField = document.getElementById('factura_email');

        if (tipoActual === '01') {
            // Factura: solo tiene sentido si el cliente tiene RUC (tipo_doc = 6)
            if (clienteSeleccionado.tipo_doc === '6') {
                if (facturaRucField) facturaRucField.value = clienteSeleccionado.doc;
                if (facturaRazonSocialField) facturaRazonSocialField.value = clienteSeleccionado.nombre;
                if (facturaDireccionField) facturaDireccionField.value = clienteSeleccionado.direccion || '';
                if (facturaEmailField) facturaEmailField.value = clienteSeleccionado.email || '';
            }
        } else if (tipoActual === 'RI' || tipoActual === '03') {
            if (boletaDniField && clienteSeleccionado.doc) {
                boletaDniField.value = clienteSeleccionado.doc;
                if (clienteSeleccionado.doc.length > 8) {
                    boletaTipoDocField.value = '4';
                    boletaDocLabelField.textContent = 'Carnet Extranjería';
                    boletaDniField.maxLength = 12;
                } else {
                    boletaTipoDocField.value = '1';
                    boletaDocLabelField.textContent = 'DNI';
                    boletaDniField.maxLength = 8;
                }
            }
            if (boletaNombreField) boletaNombreField.value = clienteSeleccionado.nombre;
        }
    }

    // Si el usuario cambia el tipo de documento después de elegir un cliente
    // (ej. pasó de Boleta a Factura porque el cliente sí tiene RUC), rellenar
    // los campos correspondientes automáticamente.
    tipoDoc.addEventListener('change', aplicarClienteSeleccionado);

    // Si viene cliente preseleccionado, prellenar el formulario
    <?php if (!empty($pacientePrelleno)): ?>
    const pacienteName = '<?= h($pacientePrelleno->nombre_razon_social) ?>';
    const pacienteId = <?= (int) $pacientePrelleno->id ?>;
    const pacienteDni = '<?= h($pacientePrelleno->numero_doc ?? '') ?>';
    const pacienteEsRuc = <?= ($pacientePrelleno->tipo_doc ?? '') === '6' ? 'true' : 'false' ?>;

    pacienteIdInput.value = pacienteId;
    inputPaciente.value = pacienteName;
    resultadosPacientes.innerHTML = '';

    const boletaDniField = document.getElementById('boleta_dni');
    const boletaNombreField = document.getElementById('boleta_nombre');
    const boletaTipoDocPrellenado = document.getElementById('boleta_tipo_doc');
    const boletaDocLabelPrellenado = document.getElementById('boleta_doc_label');
    const boletaFieldsPrellenado = document.getElementById('boleta-fields');
    const tipoDocField = document.getElementById('tipo_doc');
    const facturaFieldsPrellenado = document.getElementById('factura-fields');
    const facturaRucField = document.getElementById('factura_ruc');
    const facturaRazonSocialField = document.getElementById('factura_razon_social');
    const facturaDireccionField = document.getElementById('factura_direccion');
    const facturaEmailField = document.getElementById('factura_email');

    if (pacienteEsRuc) {
        // Cliente con RUC: preseleccionar Factura y llenar los campos correspondientes
        tipoDocField.value = '01';
        toggleTipoDocumento();
        if (facturaRucField) facturaRucField.value = pacienteDni;
        if (facturaRazonSocialField) facturaRazonSocialField.value = pacienteName;
        <?php if (!empty($pacientePrelleno->direccion)): ?>
        if (facturaDireccionField) facturaDireccionField.value = '<?= h($pacientePrelleno->direccion) ?>';
        <?php endif; ?>
        <?php if (!empty($pacientePrelleno->email)): ?>
        if (facturaEmailField) facturaEmailField.value = '<?= h($pacientePrelleno->email) ?>';
        <?php endif; ?>
    } else {
        // Cliente con DNI: preseleccionar Boleta y llenar los campos correspondientes
        const currentTipoPrelleno = tipoDocField?.value || '';
        if (currentTipoPrelleno !== 'RI' && currentTipoPrelleno !== '03') {
            tipoDocField.value = '03';
            toggleTipoDocumento();
        } else {
            boletaFieldsPrellenado.style.display = 'flex';
        }

        if (pacienteDni) {
            boletaDniField.value = pacienteDni;
            boletaNombreField.value = pacienteName;

            if (pacienteDni.length > 8) {
                boletaTipoDocPrellenado.value = '4'; // Carnet Extranjería
                boletaDocLabelPrellenado.textContent = 'Carnet Extranjería';
                boletaDniField.maxLength = 12;
            } else {
                boletaTipoDocPrellenado.value = '1'; // DNI
                boletaDocLabelPrellenado.textContent = 'DNI';
                boletaDniField.maxLength = 8;
            }
        } else {
            boletaNombreField.value = pacienteName;
            boletaTipoDocPrellenado.value = '1';
            boletaDocLabelPrellenado.textContent = 'DNI';
            boletaDniField.maxLength = 8;
        }
    }
    <?php endif; ?>

    // Prellenar items pendientes desde un Presupuesto (botón "Convertir a Factura")
    <?php if (!empty($itemsPrellenados)): ?>
    const itemsPresupuesto = <?= json_encode($itemsPrellenados) ?>;
    itemsPresupuesto.forEach(function (itemPresupuesto) {
        addItemRow();
        const row = itemsContainer.lastElementChild;
        const descripcionInput = row.querySelector('.descripcion-input');
        const servicioIdInput = row.querySelector('.servicio-id');
        const searchServicioInput = row.querySelector('.search-servicio');
        const cantidadInput = row.querySelector('.cantidad-input');
        const precioInput = row.querySelector('.precio-input');
        const descuentoInput = row.querySelector('.descuento-input');
        const descuentoTipoSelect = row.querySelector('.descuento-tipo-select');

        if (servicioIdInput) servicioIdInput.value = itemPresupuesto.servicio_id;
        if (searchServicioInput) searchServicioInput.value = itemPresupuesto.nombre;
        if (descripcionInput) descripcionInput.value = itemPresupuesto.nombre;

        if (cantidadInput) cantidadInput.value = 1;

        if (itemPresupuesto.sin_facturar_antes && itemPresupuesto.descuento > 0) {
            // Nada facturado aún de esta línea: se muestra el precio original y el
            // descuento tal cual estaban en el presupuesto, para que sea visible en la factura.
            if (precioInput) precioInput.value = itemPresupuesto.precio_unitario_original.toFixed(2);
            if (descuentoInput) descuentoInput.value = itemPresupuesto.descuento;
            if (descuentoTipoSelect) descuentoTipoSelect.value = itemPresupuesto.descuento_tipo;
        } else {
            // Ya se facturó una parte de esta línea antes: el saldo pendiente no es un
            // precio unitario limpio, se deja como monto neto sin descuento adicional.
            if (precioInput) precioInput.value = itemPresupuesto.saldo.toFixed(2);
        }
    });
    if (typeof actualizarPago === 'function') {
        actualizarPago();
    }
    <?php endif; ?>

    inputPaciente.addEventListener('keyup', function() {
        let q = this.value.trim();

        if (q.length < 2) {
            resultadosPacientes.innerHTML = '';
            return;
        }

        fetch(urlBuscarPacientes + '?q=' + encodeURIComponent(q))
        .then(res => res.json())
        .then(data => {
            let html = '';

            if (!data || data.length === 0) {
                resultadosPacientes.innerHTML = '<div class="list-group-item">Sin resultados</div>';
                return;
            }

            data.forEach(p => {
                html += `
                    <a href="#" class="list-group-item list-group-item-action"
                       data-id="${p.id}"
                       data-nombre="${escapeHtml(p.nombre)}"
                       data-dni="${escapeHtml(p.doc || '')}"
                       data-tipo-doc="${escapeHtml(p.tipo_doc || '')}"
                       data-direccion="${escapeHtml(p.direccion || '')}"
                       data-email="${escapeHtml(p.email || '')}">
                        ${escapeHtml(p.nombre)}
                    </a>
                `;
            });

            resultadosPacientes.innerHTML = html;
        })
        .catch(() => {});
    });

    resultadosPacientes.addEventListener('click', function(e) {
        e.preventDefault();

        const item = e.target.closest('a');
        if (!item) return;

        const pacienteId = item.dataset.id;
        const pacienteNombre = item.dataset.nombre;
        const pacienteDni = item.dataset.dni || '';
        const pacienteTipoDoc = item.dataset.tipoDoc || '';

        document.getElementById('paciente_id').value = pacienteId;
        document.getElementById('buscarPaciente').value = pacienteNombre;

        clienteSeleccionado = {
            id: pacienteId,
            nombre: pacienteNombre,
            doc: pacienteDni,
            tipo_doc: pacienteTipoDoc,
            direccion: item.dataset.direccion || '',
            email: item.dataset.email || '',
        };

        // Si el cliente tiene RUC, lo natural es facturarle con Factura;
        // si no, se mantiene el tipo de documento actual (Boleta/RI).
        if (pacienteTipoDoc === '6' && tipoDoc.value !== '01') {
            tipoDoc.value = '01';
            toggleTipoDocumento();
        }

        aplicarClienteSeleccionado();

        resultadosPacientes.innerHTML = '';
    });

    // 🔎 DNI y RUC
    const btnBuscarDni = document.getElementById('btn-buscar-dni');
    const btnBuscarRuc = document.getElementById('btn-buscar-ruc');

    const boletaDni = document.getElementById('boleta_dni');
    const boletaNombre = document.getElementById('boleta_nombre');
    const dniHelp = document.getElementById('dni-help');
    
    // ara canerte extarnejria:
    const boletaTipoDoc  = document.getElementById('boleta_tipo_doc');
    const boletaDocLabel = document.getElementById('boleta_doc_label');

    boletaTipoDoc.addEventListener('change', function () {
        const esCE = this.value === '4';
        boletaDocLabel.textContent = esCE ? 'Carnet Extranjería' : 'DNI';
        boletaDni.maxLength        = esCE ? 12 : 8;
        boletaDni.placeholder      = esCE ? '123456789' : '12345678';
        dniHelp.innerHTML          = '';
        // NO borrar el valor al cambiar de tipo de documento
    });
    const facturaRuc = document.getElementById('factura_ruc');
    const facturaRazonSocial = document.getElementById('factura_razon_social');
    const facturaDireccion = document.getElementById('factura_direccion');
    const rucHelp = document.getElementById('ruc-help');

    // REEMPLAZAR ESTE BLOQUE COMPLETO:
    if (btnBuscarDni) {
        btnBuscarDni.addEventListener('click', async function (e) {
            e.preventDefault();

            const boletaTipoDoc = document.getElementById('boleta_tipo_doc');
            const tipo = boletaTipoDoc ? boletaTipoDoc.value : '1';
            const doc  = (boletaDni.value || '').trim();

            const validDni = tipo === '1' && /^\d{8}$/.test(doc);
            const validCE  = tipo === '4' && /^[A-Za-z0-9]{9,12}$/.test(doc);


            if (!validDni && !validCE) {
                dniHelp.innerHTML = tipo === '4'
                    ? '<span class="text-danger">Carnet Extranjería debe tener entre 9 y 12 caracteres alfanuméricos.</span>'
                    : '<span class="text-danger">DNI debe tener exactamente 8 dígitos.</span>';
                return;
            }

            if (tipo === '4') {
                // CE: solo confirmar formato, no hay API
                dniHelp.innerHTML = '<span class="text-success">Formato válido. Ingrese el nombre manualmente.</span>';
                return;
            }

            // Solo DNI llega aquí
            dniHelp.innerHTML = '<span class="text-muted">Consultando DNI...</span>';
            try {
                const res  = await fetch(urlConsultarDni + '?dni=' + encodeURIComponent(doc), {
                    headers: { 'Accept': 'application/json' }
                });
                const data = await res.json();
                if (!data.ok) {
                    dniHelp.innerHTML = `<span class="text-danger">${data.error || data.message || 'No se pudo consultar el DNI.'}</span>`;
                    return;
                }
                boletaNombre.value = data.nombre || '';
                dniHelp.innerHTML  = '<span class="text-success">DNI encontrado correctamente.</span>';
            } catch {
                dniHelp.innerHTML = '<span class="text-danger">Error al consultar DNI.</span>';
            }
        });
    }

    if (btnBuscarRuc) {
        btnBuscarRuc.addEventListener('click', async function (e) {
            e.preventDefault();

            const ruc = (facturaRuc.value || '').trim();

            if (!/^\d{11}$/.test(ruc)) {
                rucHelp.innerHTML = '<span class="text-danger">Ingrese un RUC válido de 11 dígitos.</span>';
                return;
            }

            rucHelp.innerHTML = '<span class="text-muted">Consultando RUC...</span>';

            try {
                const res = await fetch(urlConsultarRuc + '?ruc=' + encodeURIComponent(ruc), {
                    headers: { 'Accept': 'application/json' }
                });

                const data = await res.json();

                if (!data.ok) {
                    rucHelp.innerHTML = `<span class="text-danger">${data.error || data.message || 'No se pudo consultar el RUC.'}</span>`;
                    return;
                }

                facturaRazonSocial.value = data.razon_social || '';
                facturaDireccion.value = data.direccion || '';

                let extra = 'RUC encontrado correctamente.';
                if (data.estado || data.condicion) {
                    extra += ` Estado: ${data.estado || '-'} | Condición: ${data.condicion || '-'}`;
                }

                rucHelp.innerHTML = `<span class="text-success">${extra}</span>`;
            } catch (error) {
                rucHelp.innerHTML = '<span class="text-danger">Error al consultar RUC.</span>';
            }
        });
    }
});
// Aplica a todos los inputs type="number" de la página
document.querySelectorAll('input[type="number"]').forEach(input => {
    input.addEventListener('wheel', e => e.preventDefault());
});
// 🔒 Proteger campos de precio contra cambios accidentales con scroll/wheel y flechas
document.addEventListener('DOMContentLoaded', function() {
    // Deshabilitar scroll/wheel en inputs tipo number
    document.addEventListener('wheel', function(e) {
        if (document.activeElement && document.activeElement.classList.contains('precio-input')) {
            e.preventDefault();
        }
    }, { passive: false });

    // Deshabilitar cambios con flechas UP/DOWN en campos numéricos sensibles
    document.addEventListener('keydown', function(e) {
        if (document.activeElement) {
            const cls = document.activeElement.classList;
           if (cls.contains('precio-input') || cls.contains('cantidad-input') || 
                cls.contains('monto-input')  || cls.contains('descuento-input')) {
                if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
                    e.preventDefault();
                }
            }
        }
    });

    // Event delegation para nuevos inputs agregados dinámicamente
    document.addEventListener('input', function(e) {
        if (e.target.classList.contains('precio-input')) {
            // Formatear a máximo 2 decimales
            let value = e.target.value;
            if (value && !isNaN(value)) {
                // Limitar a 2 decimales automáticamente
                const parts = value.split('.');
                if (parts.length > 1 && parts[1].length > 2) {
                    e.target.value = parseFloat(value).toFixed(2);
                }
            }
        }
    });
});
</script>

<script>
    $(document).ready(function() {
            // Asegurar que si el botón quedó deshabilitado tras un POST con errores,
            // se reactive al cargar la página para permitir correcciones.
            (function ensureSubmitEnabledOnLoad() {
                const btn = $("#submitButton");
                if (btn.length && btn.prop('disabled')) {
                    const original = btn.data('original-text') || 'Guardar Comprobante';
                    btn.prop('disabled', false).text(original);
                }
            })();
        // Al enviar guardamos el texto original y deshabilitamos el botón mientras se procesa
        $(document).on("submit", "form", function(event) {
            const form = $(this)[0];
            const btnGuardar = $(this).find("#submitButton");

            if (!form.checkValidity()) {
                // Evita el envío si hay errores en el formulario
                event.preventDefault();
                // Asegurarnos que el botón esté habilitado para permitir correcciones
                btnGuardar.prop("disabled", false);
                return;
            }

            // Guardar texto original para restaurarlo luego
            if (!btnGuardar.data('original-text')) {
                btnGuardar.data('original-text', btnGuardar.text());
            }

            btnGuardar.prop("disabled", true).text("Guardando...");
        });

        // Re-habilitar el botón cuando el usuario modifica cualquier campo del formulario
        $(document).on("input change", "form :input", function() {
            const btnGuardar = $(this).closest("form").find("#submitButton");
            if (!btnGuardar.length) return;
            if (btnGuardar.prop('disabled')) {
                const original = btnGuardar.data('original-text') || 'Guardar Comprobante';
                btnGuardar.prop('disabled', false).text(original);
            }
        });

        // Detecta cambios en inputs file específicamente (mantener compatibilidad previa)
        $(document).on("change", "input[type='file']", function() {
            const btnGuardar = $(this).closest("form").find("#submitButton");
            if (this.files.length > 0) {
                const original = btnGuardar.data('original-text') || 'Guardar Comprobante';
                btnGuardar.prop("disabled", false).text(original);
            }
        });
    });
</script>