var Clientes = Object.assign({}, TablaGenerica);

Clientes.configPersonalizado = {
    title: 'Clientes',
    icon: 'fa-users',
    idSingular: 'Cliente',
    idField: 'id_cliente',
    endpoint: '/clientes',
    sortDefault: 'cod_cliente',
    limite: 50,
    searchPlaceholder: 'Buscar razón social, RUC o código...',
    filtroEstado: true,
    showEstado: true,
    showAcciones: true,
    exportFileName: 'Clientes',
    elementId: 'pageClientes',
    estadoOpciones: [
        { value: '1', text: 'Activos' },
        { value: '0', text: 'Inactivos' },
        { value: '', text: 'Todos' }
    ],
    columns: [
        { field: 'cod_cliente', label: 'Código', sortable: true, filterable: false, width: '60px', className: 'col-codigo' },
        { field: 'razon_social', label: 'Razón Social', sortable: true, filterable: true, className: 'col-razon' },
        { field: 'num_documento', label: 'Documento', sortable: true, filterable: false, width: '130px', className: 'col-doc',
            render: function(r) { return r.num_documento || ''; } },
        { field: 'contacto_nombre', label: 'Contacto', sortable: true, filterable: true, width: '130px', className: 'col-contacto',
            render: function(r) { return r.contacto_nombre || ''; } },
        { field: 'telefono', label: 'Teléfono', sortable: true, filterable: true, width: '120px',
            render: function(r) { return r.telefono || r.celular || ''; } },
        { field: 'vendedor_nombre', label: 'Vendedor', sortable: true, filterable: true, width: '120px', className: 'col-vendedor' },
        { field: 'estado', label: 'Estado', sortable: true, filterable: true, width: '90px',
            render: function(r) {
                return r.estado
                    ? '<span class="cli-badge cli-badge-activo"><span class="cli-badge-dot"></span>Activo</span>'
                    : '<span class="cli-badge cli-badge-inactivo"><span class="cli-badge-dot"></span>Inactivo</span>';
            }
        }
    ],
    columnFilters: {
        razon_social: 'texto',
        contacto_nombre: 'texto',
        telefono: 'texto',
        vendedor: 'vendedor',
        estado: 'estado'
    },
    renderFormulario: function() {
        return '<form id="cliForm" novalidate>' +
            '<div class="cli-form">' +
                '<div class="cli-field"><label>Tipo Documento <span class="requerido">*</span></label>' +
                    '<select id="cliTipoDoc" name="tipo_documento"></select></div>' +
                '<div class="cli-field"><label>N\u00b0 Documento</label>' +
                    '<div class="cli-input-group">' +
                        '<input type="text" id="cliNumDoc" name="num_documento" maxlength="20" placeholder="Ingrese n\u00famero">' +
                        '<button type="button" class="btn-cli-sunat" id="cliBtnSunat" title="Consultar SUNAT"><i class="fas fa-cloud-sun"></i></button>' +
                    '</div>' +
                    '<span class="cli-error-text" id="cliNumDocError"></span></div>' +
                '<div class="cli-field-full"><label>Razón Social <span class="requerido">*</span></label>' +
                    '<input type="text" id="cliRazonSocial" name="razon_social" maxlength="200" placeholder="Ingrese razón social" required>' +
                    '<span class="cli-error-text" id="cliRazonSocialError"></span></div>' +
                '<div class="cli-field-full"><label>Dirección</label>' +
                    '<input type="text" id="cliDireccion" name="direccion" maxlength="200" placeholder="Dirección completa"></div>' +
                '<div class="cli-field-full">' +
                    '<label>Ubigeo</label>' +
                    '<div class="cli-ubigeo-search">' +
                        '<input type="text" id="cliUbigeoSearch" placeholder="Busque distrito, provincia o departamento..." autocomplete="off">' +
                        '<div class="cli-ubigeo-dropdown" id="cliUbigeoDropdown"></div>' +
                    '</div>' +
                '</div>' +
                '<div class="cli-field"><label>Teléfono</label>' +
                    '<input type="text" id="cliTelefono" name="telefono" maxlength="20" placeholder="Fijo"></div>' +
                '<div class="cli-field"><label>Celular</label>' +
                    '<input type="text" id="cliCelular" name="celular" maxlength="20" placeholder="Móvil"></div>' +
                '<div class="cli-field"><label>Email</label>' +
                    '<input type="email" id="cliEmail" name="email" maxlength="100" placeholder="correo@ejemplo.com"></div>' +
                '<div class="cli-field"><label>Persona de Contacto</label>' +
                    '<input type="text" id="cliContacto" name="contacto_nombre" maxlength="100" placeholder="Nombre"></div>' +
                '<div class="cli-field"><label>Condición de Pago</label>' +
                    '<select id="cliCondicionPago"><option value="">Seleccione...</option></select></div>' +
                '<div class="cli-field"><label>Vendedor</label>' +
                    '<select id="cliVendedor"><option value="">Seleccione...</option></select></div>' +
                '<div class="cli-field"><label>Estado</label>' +
                    '<select id="cliEstado" name="estado">' +
                        '<option value="1">Activo</option>' +
                        '<option value="0">Inactivo</option>' +
                    '</select></div>' +
                '<div class="cli-field"><label>Moneda Crédito</label>' +
                    '<select id="cliMonedaCredito">' +
                        '<option value="MN">MN (Soles)</option>' +
                        '<option value="ME">ME (Dólares)</option>' +
                    '</select></div>' +
                '<div class="cli-separador"><span>Límites de Crédito</span></div>' +
                '<div class="cli-field cli-tercio"><label>Límite Crédito</label>' +
                    '<input type="number" id="cliLimCredito" name="lim_credito" step="0.01" min="0" placeholder="0.00"></div>' +
                '<div class="cli-field cli-tercio"><label>Días Límite</label>' +
                    '<input type="number" id="cliLimDias" name="lim_dias" min="0" placeholder="0"></div>' +
                '<div class="cli-field cli-tercio"><label>Documentos Límite</label>' +
                    '<input type="number" id="cliLimDocs" name="lim_docs" min="0" placeholder="0"></div>' +
                '<div class="cli-separador"><span>Datos Tributarios</span></div>' +
                '<div class="cli-field-full">' +
                    '<div class="prov-toggle-row">' +
                        '<div class="prov-toggle-item"><label class="prov-switch"><input type="checkbox" id="cliRetencion"><span class="slider"></span></label><label for="cliRetencion">Retención</label></div>' +
                        '<div class="prov-toggle-item"><label class="prov-switch"><input type="checkbox" id="cliPercepcion"><span class="slider"></span></label><label for="cliPercepcion">Percepción</label></div>' +
                    '</div></div>' +
                '<div class="cli-field-dos"><label>Notas / Observaciones</label><textarea id="cliNotas" maxlength="500" placeholder="Información adicional del cliente..." rows="2"></textarea></div>' +
            '</div>' +
            '<button type="submit" style="display:none" id="cliBtnGuardar">Guardar</button>' +
            '<input type="hidden" id="cliId" value="">' +
            '<input type="hidden" id="cliCodUbigeo" value="">' +
            '<input type="hidden" id="cliCreadoPor" value="">' +
            '<input type="hidden" id="cliIdEmpresa" value="">' +
        '</form>';
    }
};

Clientes.init(Clientes.configPersonalizado);

Clientes.abrirModal = async function(idCliente) {
    var self = this;
    var esNuevo = !idCliente;
    var titulo = esNuevo ? 'Nuevo Cliente' : 'Editar Cliente';

    var contenido = '<div class="cli-modal-form">';
    contenido += this.renderFormulario(null);
    contenido += '</div>';

    Modal.abrir({
        titulo: titulo,
        ancho: '900px',
        contenido: contenido,
        onAbierto: function() {
            document.getElementById('cliId').value = idCliente || '';
            document.getElementById('cliCreadoPor').value = self.sesion ? self.sesion.id_usuario : '';
            document.getElementById('cliIdEmpresa').value = self.sesion ? self.sesion.id_empresa : '';

            self.cargarTiposDocumento('6');
            self.cargarCondicionesPago(null);
            self.cargarVendedores(null);
            self.enlazarEventosFormulario(esNuevo);

            if (!esNuevo) self.cargarDatosCliente(idCliente);
        },
        botones: [
            { texto: 'Cancelar', tipo: 'secundario', accion: function() { Modal.cerrar(); } },
            { texto: 'Guardar', tipo: 'primario', accion: function() { self.guardarCliente(); } }
        ]
    });
};

Clientes.cargarDatosCliente = async function(idCliente) {
    try {
        var res = await fetch(this.API_URL + '/clientes/' + idCliente + '?id_empresa=' + (this.sesion ? this.sesion.id_empresa : ''));
        var data = await res.json();
        if (!data.ok) { Mensaje.error({ titulo: 'Error', texto: data.mensaje }); return; }
        var c = data.data;

        document.getElementById('cliId').value = c.id_cliente || '';
        document.getElementById('cliNumDoc').value = c.num_documento || '';
        document.getElementById('cliRazonSocial').value = c.razon_social || '';
        document.getElementById('cliDireccion').value = c.direccion || '';
        document.getElementById('cliTelefono').value = c.telefono || '';
        document.getElementById('cliCelular').value = c.celular || '';
        document.getElementById('cliEmail').value = c.email || '';
        document.getElementById('cliContacto').value = c.contacto_nombre || '';
        document.getElementById('cliEstado').value = c.estado ? '1' : '0';
        document.getElementById('cliCodUbigeo').value = c.cod_ubigeo || '';
        document.getElementById('cliLimCredito').value = c.lim_credito || '';
        document.getElementById('cliLimDias').value = c.lim_dias || '';
        document.getElementById('cliLimDocs').value = c.lim_docs || '';
        document.getElementById('cliMonedaCredito').value = c.moneda_credito || 'MN';
        document.getElementById('cliNotas').value = c.notas || '';

        document.getElementById('cliRetencion').checked = !!c.retencion;
        document.getElementById('cliPercepcion').checked = !!c.percepcion;
        document.querySelectorAll('.prov-toggle-item').forEach(function(item) {
            var cb = item.querySelector('input[type="checkbox"]');
            if (cb) item.classList.toggle('activo', cb.checked);
        });

        this.cargarTiposDocumento(c.tipo_documento);
        this.cargarCondicionesPago(c.id_condicion);
        this.cargarVendedores(c.id_vendedor);
        this.cargarUbigeoPorCodigo(c.cod_ubigeo);
    } catch (error) {
        Mensaje.error({ titulo: 'Error', texto: 'No se pudo cargar el cliente' });
    }
};

Clientes.guardarCliente = function() {
    var id = document.getElementById('cliId').value;
    var body = {
        id_cliente: id || null,
        id_empresa: parseInt(document.getElementById('cliIdEmpresa').value),
        id_sucursal: this.sesion ? this.sesion.id_sucursal || null : null,
        tipo_documento: document.getElementById('cliTipoDoc').value,
        num_documento: document.getElementById('cliNumDoc').value.trim(),
        razon_social: document.getElementById('cliRazonSocial').value.trim().toUpperCase(),
        direccion: document.getElementById('cliDireccion').value.trim().toUpperCase(),
        cod_ubigeo: document.getElementById('cliCodUbigeo').value,
        telefono: document.getElementById('cliTelefono').value.trim(),
        celular: document.getElementById('cliCelular').value.trim(),
        email: document.getElementById('cliEmail').value.trim(),
        contacto_nombre: document.getElementById('cliContacto').value.trim().toUpperCase(),
        estado: document.getElementById('cliEstado').value === '1',
        id_condicion: document.getElementById('cliCondicionPago').value || null,
        id_vendedor: document.getElementById('cliVendedor').value || null,
        lim_credito: parseFloat(document.getElementById('cliLimCredito').value) || 0,
        lim_dias: parseInt(document.getElementById('cliLimDias').value) || 0,
        lim_docs: parseInt(document.getElementById('cliLimDocs').value) || 0,
        moneda_credito: document.getElementById('cliMonedaCredito').value,
        retencion: document.getElementById('cliRetencion').checked,
        percepcion: document.getElementById('cliPercepcion').checked,
        notas: document.getElementById('cliNotas').value.trim().toUpperCase(),
        creado_por: parseInt(document.getElementById('cliCreadoPor').value),
        modificado_por: id ? parseInt(document.getElementById('cliCreadoPor').value) : null
    };

    if (!body.razon_social) {
        Mensaje.error({ titulo: 'Validación', texto: 'La razón social es requerida' });
        return;
    }

    var metodo = id ? 'PUT' : 'POST';
    var url = this.API_URL + '/clientes';

    fetch(url, {
        method: metodo,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
    })
    .then(function(r) { return r.json(); })
    .then(function(res) {
        if (res.ok) {
            Mensaje.exito({ titulo: 'Guardado', texto: res.mensaje });
            Modal.cerrar();
            this.paginaActual = 1;
            this.cargarTabla();
        } else {
            Mensaje.error({ titulo: 'Error', texto: res.mensaje });
        }
    }.bind(this))
    .catch(function() {
        Mensaje.error({ titulo: 'Error', texto: 'Error al guardar cliente' });
    });
};

// ========== MÉTODOS AUXILIARES DEL FORMULARIO ==========

Clientes.enlazarEventosFormulario = function(esNuevo) {
    var self = this;
    var form = document.getElementById('cliForm');
    var tipoDoc = document.getElementById('cliTipoDoc');
    var numDoc = document.getElementById('cliNumDoc');
    var ubigeoSearch = document.getElementById('cliUbigeoSearch');

    if (tipoDoc) {
        tipoDoc.addEventListener('change', function() {
            var longitud = parseInt(this.options[this.selectedIndex].dataset.longitud) || 0;
            numDoc.maxLength = longitud > 0 ? longitud : 20;
            numDoc.placeholder = longitud > 0 ? 'Ingrese ' + longitud + ' dígitos' : 'Ingrese número';
            numDoc.value = '';
            numDoc.classList.remove('error');
            var err = document.getElementById('cliNumDocError');
            if (err) err.textContent = '';
        });
    }

    if (numDoc) {
        numDoc.addEventListener('input', function() {
            var err = document.getElementById('cliNumDocError');
            if (err) err.textContent = '';
        });
    }

    var btnSunat = document.getElementById('cliBtnSunat');
    if (btnSunat) {
        btnSunat.addEventListener('click', function() {
            var tipoDoc = document.getElementById('cliTipoDoc');
            var numDoc = document.getElementById('cliNumDoc');
            var num = numDoc.value.replace(/\D/g, '');
            var tipo = tipoDoc ? tipoDoc.value : '6';

            if (tipo === '6') {
                if (num.length !== 11) {
                    Mensaje.error({ titulo: 'Validación', texto: 'Ingrese un RUC de 11 dígitos para consultar SUNAT' });
                    return;
                }
                if (!self.validarRuc(num)) {
                    Mensaje.error({ titulo: 'Validación', texto: 'El RUC ingresado no es válido (dígito verificador incorrecto)' });
                    return;
                }
                self.consultarSunat(num);
            } else if (tipo === '1') {
                if (num.length !== 8) {
                    Mensaje.error({ titulo: 'Validación', texto: 'Ingrese un DNI de 8 dígitos para consultar' });
                    return;
                }
                self.consultarDni(num);
            } else {
                Mensaje.error({ titulo: 'Validación', texto: 'Seleccione RUC o DNI para consultar' });
            }
        });
    }

    if (ubigeoSearch) {
        var ubigeoTimer = null;
        ubigeoSearch.addEventListener('input', function() {
            clearTimeout(ubigeoTimer);
            var val = this.value.trim();
            if (val.length < 2) {
                document.getElementById('cliUbigeoDropdown').classList.remove('visible');
                document.getElementById('cliCodUbigeo').value = '';
                return;
            }
            ubigeoTimer = setTimeout(function() { self.buscarUbigeo(val); }, 300);
        });
        ubigeoSearch.addEventListener('blur', function() {
            setTimeout(function() { document.getElementById('cliUbigeoDropdown').classList.remove('visible'); }, 200);
        });
        ubigeoSearch.addEventListener('focus', function() {
            var dd = document.getElementById('cliUbigeoDropdown');
            if (dd && dd.children.length > 0) dd.classList.add('visible');
        });
    }

    var toggles = document.querySelectorAll('.prov-switch input[type="checkbox"]');
    toggles.forEach(function(cb) {
        cb.addEventListener('change', function() {
            var item = this.closest('.prov-toggle-item');
            if (item) item.classList.toggle('activo', this.checked);
        });
    });

    // Mayúsculas automáticas en campos de texto
    var upperInputs = document.querySelectorAll('#cliForm input[type="text"], #cliForm input[type="email"], #cliForm textarea');
    upperInputs.forEach(function(inp) {
        inp.addEventListener('blur', function() {
            if (this.value) this.value = this.value.toUpperCase();
        });
        inp.addEventListener('input', function() {
            var start = this.selectionStart;
            var end = this.selectionEnd;
            if (this.value) this.value = this.value.toUpperCase();
            this.setSelectionRange(start, end);
        });
    });

    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            self.guardarCliente();
        });
    }
};

Clientes.cargarTiposDocumento = async function(valorActual) {
    var select = document.getElementById('cliTipoDoc');
    if (!select) return;
    try {
        var res = await fetch(this.API_URL + '/tipos-documento?id_empresa=' + (this.sesion ? this.sesion.id_empresa : '') + (this.sesion && this.sesion.id_sucursal ? '&id_sucursal=' + this.sesion.id_sucursal : ''));
        var data = await res.json();
        if (!data.ok) return;
        var html = '';
        data.data.forEach(function(tipo) {
            var sel = tipo.codigo == valorActual ? ' selected' : '';
            html += '<option value="' + tipo.codigo + '"' + sel + ' data-longitud="' + tipo.longitud + '">' + tipo.descripcion + '</option>';
        });
        select.innerHTML = html;
    } catch (error) { console.error('[CLIENTES] Error tipos doc:', error); }
};

Clientes.cargarCondicionesPago = async function(valorActual) {
    var select = document.getElementById('cliCondicionPago');
    if (!select) return;
    try {
        var res = await fetch(this.API_URL + '/condiciones-pago?id_empresa=' + (this.sesion ? this.sesion.id_empresa : '') + '&estado=1' + (this.sesion && this.sesion.id_sucursal ? '&id_sucursal=' + this.sesion.id_sucursal : ''));
        var data = await res.json();
        if (!data.ok) return;
        var html = '<option value="">Seleccione...</option>';
        data.data.forEach(function(c) {
            var sel = c.id_condicion == valorActual ? ' selected' : '';
            html += '<option value="' + c.id_condicion + '"' + sel + '>' + c.nombre + '</option>';
        });
        select.innerHTML = html;
    } catch (error) { console.error('[CLIENTES] Error condiciones:', error); }
};

Clientes.cargarVendedores = async function(valorActual) {
    var select = document.getElementById('cliVendedor');
    if (!select) return;
    try {
        var res = await fetch(this.API_URL + '/vendedores?id_empresa=' + (this.sesion ? this.sesion.id_empresa : '') + '&estado=1' + (this.sesion && this.sesion.id_sucursal ? '&id_sucursal=' + this.sesion.id_sucursal : ''));
        var data = await res.json();
        if (!data.ok) return;
        var html = '<option value="">Seleccione...</option>';
        data.data.forEach(function(v) {
            var sel = v.id_vendedor == valorActual ? ' selected' : '';
            html += '<option value="' + v.id_vendedor + '"' + sel + '>' + v.nombre + '</option>';
        });
        select.innerHTML = html;
    } catch (error) { console.error('[CLIENTES] Error vendedores:', error); }
};

Clientes.buscarUbigeo = async function(q) {
    var dd = document.getElementById('cliUbigeoDropdown');
    if (!dd) return;
    try {
        var res = await fetch(this.API_URL + '/ubigeo/buscar?q=' + encodeURIComponent(q));
        var data = await res.json();
        if (!data.ok) { dd.innerHTML = '<div class="cli-ubigeo-dd-empty">Error: ' + (data.mensaje || 'sin respuesta') + '</div>'; dd.classList.add('visible'); return; }
        if (data.data.length === 0) { dd.innerHTML = '<div class="cli-ubigeo-dd-empty">Sin resultados</div>'; dd.classList.add('visible'); return; }
        var html = '';
        data.data.forEach(function(u) {
            var label = u.departamento + ' / ' + u.provincia + ' / ' + u.distrito;
            html += '<div class="cli-ubigeo-dd-item" data-codigo="' + u.cod_ubigeo + '" data-label="' + label.replace(/"/g, '&quot;') + '">' + label + '</div>';
        });
        dd.innerHTML = html;
        dd.classList.add('visible');
        dd.querySelectorAll('.cli-ubigeo-dd-item').forEach(function(item) {
            item.addEventListener('click', function() {
                var search = document.getElementById('cliUbigeoSearch');
                search.value = this.dataset.label;
                document.getElementById('cliCodUbigeo').value = this.dataset.codigo;
                dd.classList.remove('visible');
            });
        });
    } catch (error) { dd.innerHTML = '<div class="cli-ubigeo-dd-empty">Error de conexión</div>'; dd.classList.add('visible'); }
};

Clientes.cargarUbigeoPorCodigo = async function(codigo) {
    if (!codigo || !String(codigo).trim()) return;
    try {
        var res = await fetch(this.API_URL + '/ubigeo/resolver/' + codigo);
        var data = await res.json();
        if (data.ok && data.data) {
            var search = document.getElementById('cliUbigeoSearch');
            if (search) search.value = data.data.departamento + ' / ' + data.data.provincia + ' / ' + data.data.distrito;
        }
    } catch (error) {}
};

Clientes.validarRuc = function(ruc) {
    if (!ruc || ruc.length !== 11 || !/^\d+$/.test(ruc)) return false;
    var suma = 0, x = 6;
    for (var i = 0; i < 10; i++) {
        if (i === 4) x = 8;
        var digito = parseInt(ruc.charAt(i));
        x--;
        suma += digito * x;
    }
    var resto = (11 - (suma % 11)) % 10;
    return resto === parseInt(ruc.charAt(10));
};

Clientes.consultarSunat = async function(ruc) {
    try {
        var res = await fetch(this.API_URL + '/sunat/consultar-ruc/' + ruc);
        var data = await res.json();
        if (data.ok && data.data) {
            if (data.data.razon_social) document.getElementById('cliRazonSocial').value = data.data.razon_social;
            if (data.data.direccion) document.getElementById('cliDireccion').value = data.data.direccion;
            if (data.data.cod_ubigeo) {
                document.getElementById('cliCodUbigeo').value = data.data.cod_ubigeo;
                this.cargarUbigeoPorCodigo(data.data.cod_ubigeo);
            }
            Mensaje.exito({ titulo: 'SUNAT', texto: 'Datos obtenidos correctamente' });
        } else {
            Mensaje.error({ titulo: 'SUNAT', texto: data.mensaje || 'No se encontraron datos' });
        }
    } catch (error) {
        Mensaje.error({ titulo: 'SUNAT', texto: 'Error al consultar SUNAT' });
    }
};

Clientes.consultarDni = async function(dni) {
    try {
        var res = await fetch(this.API_URL + '/sunat/consultar-dni/' + dni);
        var data = await res.json();
        if (data.ok && data.data) {
            if (data.data.razon_social) document.getElementById('cliRazonSocial').value = data.data.razon_social;
            Mensaje.exito({ titulo: 'Consulta DNI', texto: 'Nombre obtenido correctamente' });
        } else {
            Mensaje.error({ titulo: 'Consulta DNI', texto: data.mensaje || 'No se encontraron datos' });
        }
    } catch (error) {
        Mensaje.error({ titulo: 'Consulta DNI', texto: 'Error al consultar DNI' });
    }
};

Clientes.verDetalle = async function(idCliente) {
    try {
        var response = await fetch(this.API_URL + '/clientes/' + idCliente + '?id_empresa=' + (this.sesion ? this.sesion.id_empresa : ''));
        var res = await response.json();
        if (!res.ok) { Mensaje.error({ titulo: 'Error', texto: res.mensaje }); return; }
        var c = res.data;

        var s = function(v) { return v || '-'; };
        var sn = function(v) { return v ? 'Sí' : 'No'; };
        var moneda = c.moneda_credito === 'ME' ? 'Dólares' : 'Soles';

        var html = '<div class="cli-detalle">' +
            '<div class="cli-detalle-grid">' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Código</span><span class="cli-detalle-valor">' + s(c.cod_cliente) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Razón Social</span><span class="cli-detalle-valor">' + s(c.razon_social) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Tipo Documento</span><span class="cli-detalle-valor">' + (c.tipo_documento === '6' ? 'RUC' : c.tipo_documento === '1' ? 'DNI' : s(c.tipo_documento)) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">N° Documento</span><span class="cli-detalle-valor">' + s(c.num_documento) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Dirección</span><span class="cli-detalle-valor">' + s(c.direccion) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Teléfono</span><span class="cli-detalle-valor">' + s(c.telefono) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Celular</span><span class="cli-detalle-valor">' + s(c.celular) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Email</span><span class="cli-detalle-valor">' + s(c.email) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Contacto</span><span class="cli-detalle-valor">' + s(c.contacto_nombre) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Condición de Pago</span><span class="cli-detalle-valor">' + s(c.condicion_nombre) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Vendedor</span><span class="cli-detalle-valor">' + s(c.vendedor_nombre) + '</span></div>' +
            '</div>' +
            '<div class="cli-detalle-separador"><span>Límites de Crédito</span></div>' +
            '<div class="cli-detalle-grid">' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Límite Crédito</span><span class="cli-detalle-valor">' + s(c.lim_credito !== null ? c.lim_credito.toFixed(2) : '0.00') + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Días Límite</span><span class="cli-detalle-valor">' + s(c.lim_dias) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Documentos Límite</span><span class="cli-detalle-valor">' + s(c.lim_docs) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Moneda Crédito</span><span class="cli-detalle-valor">' + moneda + '</span></div>' +
            '</div>' +
            '<div class="cli-detalle-separador"><span>Datos Tributarios</span></div>' +
            '<div class="cli-detalle-grid">' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Retención</span><span class="cli-detalle-valor">' + sn(c.retencion) + '</span></div>' +
                '<div class="cli-detalle-campo"><span class="cli-detalle-label">Percepción</span><span class="cli-detalle-valor">' + sn(c.percepcion) + '</span></div>' +
            '</div>' +
            '<div class="cli-detalle-separador"><span>Notas</span></div>' +
            '<div class="cli-detalle-grid">' +
                '<div class="cli-detalle-campo cli-detalle-campo-full"><span class="cli-detalle-valor">' + s(c.notas) + '</span></div>' +
            '</div>' +
        '</div>';

        Modal.abrir({
            titulo: 'Detalle del Cliente',
            ancho: '800px',
            contenido: html,
            botones: [
                {
                    texto: 'Imprimir', tipo: 'secundario', accion: function() {
                        var empresa = Clientes.sesion && Clientes.sesion.empresa_razon ? Clientes.sesion.empresa_razon : '';
                        var ahora = new Date();
                        var fechaHora = ahora.toLocaleDateString('es-PE', { day: '2-digit', month: '2-digit', year: 'numeric' }) + ' ' + ahora.toLocaleTimeString('es-PE', { hour: '2-digit', minute: '2-digit' });
                        var lineas =
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Código</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.cod_cliente) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Razón Social</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.razon_social) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Documento</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + (c.tipo_documento === '6' ? 'RUC' : c.tipo_documento === '1' ? 'DNI' : s(c.tipo_documento)) + ': ' + s(c.num_documento) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Dirección</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.direccion) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Teléfono</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.telefono) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Celular</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.celular) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Email</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.email) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Contacto</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.contacto_nombre) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Condición Pago</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.condicion_nombre) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Vendedor</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.vendedor_nombre) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Lím. Crédito</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + (c.lim_credito !== null ? c.lim_credito.toFixed(2) : '0.00') + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Días Límite</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.lim_dias) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Docs. Límite</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.lim_docs) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Moneda Créd.</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + moneda + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Retención</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + sn(c.retencion) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Percepción</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + sn(c.percepcion) + '</td></tr>' +
                            '<tr><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#475569;width:160px;font-size:0.75rem">Notas</td><td style="padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#1E293B;font-size:0.78rem">' + s(c.notas) + '</td></tr>';
                        var fullHtml = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Cliente</title>' +
                            '<link rel="preconnect" href="https://fonts.googleapis.com"><link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">' +
                            '<style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Plus Jakarta Sans",sans-serif;padding:30px 40px;color:#1E293B}.header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #1A4480}.empresa{font-size:0.65rem;font-weight:600;color:#475569;margin-top:2px}.titulo{font-size:1.2rem;font-weight:800;color:#1A4480;text-transform:uppercase;letter-spacing:0.5px}.fecha{font-size:0.65rem;color:#64748B;text-align:right;margin-bottom:4px}table{width:100%;border-collapse:collapse;margin-top:12px}.footer{text-align:center;font-size:0.65rem;color:#94A3B8;margin-top:20px;border-top:1px solid #E2E8F0;padding-top:8px}@page{margin:12mm}</style></head><body>' +
                            '<div class="header"><div class="header-left"><div class="titulo">Cliente</div>' + (empresa ? '<div class="empresa">' + empresa + '</div>' : '') + '</div><div class="fecha">' + fechaHora + '</div></div>' +
                            '<table>' + lineas + '</table>' +
                            '<div class="footer">NexusERP</div></body></html>';
                        var oldFrame = document.getElementById('cli-print-frame');
                        if (oldFrame) document.body.removeChild(oldFrame);
                        var iframe = document.createElement('iframe');
                        iframe.id = 'cli-print-frame';
                        iframe.style.cssText = 'position:absolute;width:1px;height:1px;opacity:0.01;top:-9999px;left:-9999px';
                        iframe.srcdoc = fullHtml;
                        document.body.appendChild(iframe);
                        iframe.onload = function() {
                            setTimeout(function() {
                                try { iframe.contentWindow.print(); } catch(e) {}
                            }, 1500);
                        };
                    }
                },
                { texto: 'Cerrar', tipo: 'primario', accion: function() { Modal.cerrar(); } }
            ]
        });
    } catch (error) {
        Mensaje.error({ titulo: 'Error', texto: 'No se pudo obtener el detalle' });
    }
};
