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

Articulos.init({
    title: 'Artículos',
    icon: 'fa-box',
    idSingular: 'Artículo',
    idField: 'id_articulo',
    endpoint: '/articulos',
    sortDefault: 'nombre',
    limite: 50,
    searchPlaceholder: 'Buscar por código, nombre, código de venta, familia o proveedor...',
    filtroEstado: true,
    showEstado: true,
    exportFileName: 'Articulos',
    elementId: 'pageArticulos',
    menuPage: 'Articulos',
    columnFilters: {},
    columns: [
        { field: 'cod_articulo', label: 'Código', sortable: true, filterable: true, width: '90px' },
        { field: 'nombre', label: 'Nombre', sortable: true, filterable: true, width: '160px' },
        { field: 'cod_vta', label: 'Cód. Venta', sortable: true, filterable: true, width: '100px' },
        { field: 'familia_nombre', label: 'Familia', sortable: true, filterable: true, width: '180px' },
        { field: 'proveedor_razon_social', label: 'Proveedor', sortable: true, filterable: true, width: '260px' },
        { field: 'precio_venta', label: 'Precio Vta.', align: 'right', sortable: true, filterable: false, width: '110px',
            render: function(row) { return 'S/ ' + Number(row.precio_venta || 0).toFixed(2); }
        },
        { field: 'stock_actual', label: 'Stock', align: 'right', sortable: true, filterable: false, width: '90px',
            render: function(row) { return Number(row.stock_actual || 0).toFixed(2); }
        },
        { field: 'estado', label: 'Estado', sortable: true, filterable: true, width: '100px',
            render: function(row) {
                return row.estado
                    ? '<span class="prov-badge prov-badge-activo"><span class="prov-badge-dot"></span>Activo</span>'
                    : '<span class="prov-badge prov-badge-inactivo"><span class="prov-badge-dot"></span>Inactivo</span>';
            }
        }
    ],
    renderFormulario: function(data) {
        var html = '';

        // SECCION 1: Informacion General
        html += '<div class="art-section"><div class="art-section-title"><i class="fas fa-info-circle"></i> Informacion General</div>';
        html += '<div class="art-grid">';
        html += '<div class="prov-field"><label>Codigo</label><input type="text" id="artFormCod" class="prov-input" readonly style="background:#f3f4f6;color:#6b7280"></div>';
        html += '<div class="prov-field"><label>Codigo de Venta</label><input type="text" id="artFormCodVta" class="prov-input" maxlength="12" placeholder="Opcional"></div>';
        html += '<div class="prov-field"><label>Nombre <span class="req">*</span></label><input type="text" id="artFormNombre" class="prov-input" maxlength="200" required></div>';
        html += '<div class="prov-field"><label>Nombre Alterno</label><input type="text" id="artFormNombreAlt" class="prov-input" maxlength="200" placeholder="Nombre secundario"></div>';
        html += '<div class="prov-field" style="grid-column:1/3"><label>Descripcion</label><textarea id="artFormDesc" class="prov-input" maxlength="500" rows="1" placeholder="Descripcion del articulo"></textarea></div>';
        html += '</div></div>';

        // SECCION 2: Clasificacion
        html += '<div class="art-section"><div class="art-section-title"><i class="fas fa-tags"></i> Clasificacion</div>';
        html += '<div class="art-grid">';
        html += '<div class="prov-field"><label>Familia</label><select id="artFormFamilia" class="prov-input"><option value="">-- Seleccione --</option></select></div>';
        html += '<div class="prov-field"><label>Subfamilia</label><select id="artFormSubfamilia" class="prov-input"><option value="">-- Seleccione --</option></select></div>';
        html += '<div class="prov-field"><label>Proveedor</label><input type="text" id="artFormProveedor" class="prov-input" autocomplete="off" placeholder="Escriba para buscar..."><input type="hidden" id="artFormIdProveedor"></div>';
        html += '<div class="prov-field"><label>Unidad de Medida</label><select id="artFormUnidad" class="prov-input"><option value="">-- Seleccione --</option></select></div>';
        html += '<div class="prov-field"><label>Moneda</label><select id="artFormMoneda" class="prov-input"><option value="PEN">SOLES (PEN)</option><option value="USD">DOLARES (USD)</option></select></div>';
        html += '<div class="prov-field"><label>Peso (kg)</label><input type="number" id="artFormPeso" class="prov-input" step="0.001" min="0" placeholder="0.000"></div>';
        html += '</div></div>';

        // SECCION 3: Precios
        html += '<div class="art-section"><div class="art-section-title"><i class="fas fa-dollar-sign"></i> Precios</div>';
        html += '<div class="art-grid art-grid-3">';
        html += '<div class="prov-field"><label>Precio de Venta</label><input type="number" id="artFormPrecioVenta" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Precio de Compra</label><input type="number" id="artFormPrecioCompra" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Precio Nivel 2</label><input type="number" id="artFormPrecioN02" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Precio Nivel 3</label><input type="number" id="artFormPrecioN03" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Precio Nivel 4</label><input type="number" id="artFormPrecioN04" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Precio Nivel 5</label><input type="number" id="artFormPrecioN05" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '</div></div>';

        // SECCION 4: Stock
        html += '<div class="art-section"><div class="art-section-title"><i class="fas fa-warehouse"></i> Stock</div>';
        html += '<div class="art-grid art-grid-3">';
        html += '<div class="prov-field"><label>Stock Actual</label><input type="number" id="artFormStockActual" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Stock Minimo</label><input type="number" id="artFormStockMinimo" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Stock Maximo</label><input type="number" id="artFormStockMaximo" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '</div></div>';

        // SECCION 5: Estado (compacto)
        html += '<div class="art-section" style="padding:12px 16px"><div class="art-section-title" style="margin-bottom:0;border:none"><i class="fas fa-toggle-on"></i> Estado</div>';
        html += '<div style="display:flex;align-items:center;gap:12px"><select id="artFormEstado" class="prov-input" style="width:auto;min-width:140px"><option value="1">Activo</option><option value="0">Inactivo</option></select></div></div>';

        return html;
    },
    onCargarFormulario: function(data) {
        var self = this;
        var selFamilia = document.getElementById('artFormFamilia');
        var selSubfamilia = document.getElementById('artFormSubfamilia');
        var inpProveedor = document.getElementById('artFormProveedor');
        var selUnidad = document.getElementById('artFormUnidad');

        function cargarSubfamilias(idFamilia, selectedId) {
            var url = self.API_URL + '/subfamilias?limit=0&estado=1&id_empresa=' + (self.sesion ? self.sesion.id_empresa : '');
            if (idFamilia) url += '&id_familia=' + idFamilia;
            fetch(url)
                .then(function(r) { return r.json(); })
                .then(function(res) {
                    if (!res.ok) return;
                    var html = '<option value="">-- Seleccione --</option>';
                    res.data.forEach(function(s) {
                        var sel = (selectedId && s.id_subfamilia === selectedId) ? ' selected' : '';
                        html += '<option value="' + s.id_subfamilia + '"' + sel + '>' + s.cod_subfamilia + ' - ' + s.nombre + '</option>';
                    });
                    selSubfamilia.innerHTML = html;
                });
        }

        fetch(self.API_URL + '/familias?limit=0&estado=1&id_empresa=' + (self.sesion ? self.sesion.id_empresa : ''))
            .then(function(r) { return r.json(); })
            .then(function(res) {
                if (!res.ok) return;
                var html = '<option value="">-- Seleccione --</option>';
                res.data.forEach(function(f) {
                    var sel = (data && f.id_familia === data.id_familia) ? ' selected' : '';
                    html += '<option value="' + f.id_familia + '"' + sel + '>' + f.cod_familia + ' - ' + f.nombre + '</option>';
                });
                selFamilia.innerHTML = html;
                if (data && data.id_familia) cargarSubfamilias(data.id_familia, data.id_subfamilia);
            });

        (function(inputId, hiddenId, apiUrl, empId, editData) {
            var input = document.getElementById(inputId);
            if (!input || input.dataset._autoProvOk) return;
            input.dataset._autoProvOk = '1';
            var dd = document.createElement('div');
            dd.style.cssText = 'position:fixed;z-index:9999;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.1);max-height:220px;overflow-y:auto;display:none';
            document.body.appendChild(dd);
            var timer;
            function ocultar() { dd.style.display = 'none'; dd.innerHTML = ''; }
            function posicionar() {
                var r = input.getBoundingClientRect();
                dd.style.top = r.bottom + 'px';
                dd.style.left = r.left + 'px';
                dd.style.width = Math.max(r.width, 420) + 'px';
            }
            input.addEventListener('input', function() {
                clearTimeout(timer);
                var v = this.value.trim();
                if (v.length < 1) { ocultar(); return; }
                timer = setTimeout(function() {
                    var url = apiUrl + '/proveedores?buscar=' + encodeURIComponent(v) + '&limit=20&estado=1&id_empresa=' + empId;
                    fetch(url).then(function(r) { return r.json(); }).then(function(res) {
                        posicionar();
                        if (!res.ok || !res.data || res.data.length === 0) {
                            dd.innerHTML = '<div style="padding:10px;color:#94a3b8;font-size:13px;text-align:center">Sin resultados</div>';
                            dd.style.display = 'block'; return;
                        }
                        var html = '';
                        res.data.forEach(function(item) {
                            html += '<div class="prov-ubigeo-dd-item prov-autocomplete-item" style="cursor:pointer" data-id="' + item.id_proveedor + '" data-nombre="' + (item.razon_social || '').replace(/"/g, '&quot;') + '">' + item.cod_proveedor + ' - ' + (item.razon_social || '') + '</div>';
                        });
                        dd.innerHTML = html;
                        dd.style.display = 'block';
                        dd.querySelectorAll('.prov-autocomplete-item').forEach(function(el) {
                            el.addEventListener('click', function() {
                                input.value = this.dataset.nombre;
                                document.getElementById(hiddenId).value = this.dataset.id;
                                ocultar();
                            });
                        });
                    }).catch(function() { ocultar(); });
                }, 250);
            });
            input.addEventListener('blur', function() { setTimeout(ocultar, 200); });
            input.addEventListener('focus', function() { if (dd.children.length > 0 && this.value) { posicionar(); dd.style.display = 'block'; } });
            input.addEventListener('keydown', function(e) {
                var items = dd.querySelectorAll('.prov-autocomplete-item');
                if (items.length === 0) return;
                var active = dd.querySelector('.hover');
                var idx = active ? Array.prototype.indexOf.call(items, active) : -1;
                if (e.key === 'ArrowDown') { e.preventDefault(); if (active) active.classList.remove('hover'); items[(idx + 1) % items.length].classList.add('hover'); }
                else if (e.key === 'ArrowUp') { e.preventDefault(); if (active) active.classList.remove('hover'); items[(idx - 1 + items.length) % items.length].classList.add('hover'); }
                else if (e.key === 'Enter' && active) { e.preventDefault(); active.click(); }
                else if (e.key === 'Escape') { ocultar(); }
            });
            if (editData && editData.proveedor_razon_social) {
                input.value = editData.proveedor_razon_social;
                document.getElementById(hiddenId).value = editData.id_proveedor || '';
            }
        })('artFormProveedor', 'artFormIdProveedor', self.API_URL, self.sesion ? self.sesion.id_empresa : '', data);

        fetch(self.API_URL + '/unidades-medida?limit=0&estado=1&id_empresa=' + (self.sesion ? self.sesion.id_empresa : ''))
            .then(function(r) { return r.json(); })
            .then(function(res) {
                if (!res.ok) return;
                var html = '<option value="">-- Seleccione --</option>';
                res.data.forEach(function(u) {
                    var sel = (data && u.id_unidad === data.id_unidad) ? ' selected' : '';
                    html += '<option value="' + u.id_unidad + '"' + sel + '>' + u.cod_sunat + ' - ' + u.nombre + '</option>';
                });
                selUnidad.innerHTML = html;
            });

        // Cambio de familia -> recargar subfamilias
        selFamilia.addEventListener('change', function() {
            cargarSubfamilias(this.value, null);
        });

        if (!data) {
            document.getElementById('artFormCod').value = 'Auto-generado';
            document.getElementById('artFormNombre').value = '';
            document.getElementById('artFormNombreAlt').value = '';
            document.getElementById('artFormCodVta').value = '';
            document.getElementById('artFormDesc').value = '';
            document.getElementById('artFormPrecioVenta').value = '';
            document.getElementById('artFormPrecioCompra').value = '';
            document.getElementById('artFormPrecioN02').value = '';
            document.getElementById('artFormPrecioN03').value = '';
            document.getElementById('artFormPrecioN04').value = '';
            document.getElementById('artFormPrecioN05').value = '';
            document.getElementById('artFormStockActual').value = '';
            document.getElementById('artFormStockMinimo').value = '';
            document.getElementById('artFormStockMaximo').value = '';
            document.getElementById('artFormPeso').value = '';
            document.getElementById('artFormMoneda').value = 'PEN';
            document.getElementById('artFormEstado').value = '1';
            return;
        }

        document.getElementById('artFormCod').value = data.cod_articulo || '';
        document.getElementById('artFormNombre').value = data.nombre || '';
        document.getElementById('artFormNombreAlt').value = data.nombre_alterno || '';
        document.getElementById('artFormCodVta').value = data.cod_vta || '';
        document.getElementById('artFormDesc').value = data.descripcion || '';
        document.getElementById('artFormPrecioVenta').value = data.precio_venta || '';
        document.getElementById('artFormPrecioCompra').value = data.precio_compra || '';
        document.getElementById('artFormPrecioN02').value = data.precio_n02 || '';
        document.getElementById('artFormPrecioN03').value = data.precio_n03 || '';
        document.getElementById('artFormPrecioN04').value = data.precio_n04 || '';
        document.getElementById('artFormPrecioN05').value = data.precio_n05 || '';
        document.getElementById('artFormStockActual').value = data.stock_actual || '';
        document.getElementById('artFormStockMinimo').value = data.stock_minimo || '';
        document.getElementById('artFormStockMaximo').value = data.stock_maximo || '';
        document.getElementById('artFormPeso').value = data.peso || '';
        document.getElementById('artFormMoneda').value = data.moneda || 'PEN';
        document.getElementById('artFormEstado').value = data.estado ? '1' : '0';
    },
    onGuardar: function() {
        var id = document.getElementById('pageArticulosFormId')?.value;
        var nombre = document.getElementById('artFormNombre').value.trim().toUpperCase();
        var nombreAlt = document.getElementById('artFormNombreAlt').value.trim().toUpperCase();
        var codVta = document.getElementById('artFormCodVta').value.trim().toUpperCase();
        var desc = document.getElementById('artFormDesc').value.trim().toUpperCase();
        var idFamilia = document.getElementById('artFormFamilia').value;
        var idSubfamilia = document.getElementById('artFormSubfamilia').value;
        var idProveedor = document.getElementById('artFormIdProveedor').value;
        var idUnidad = document.getElementById('artFormUnidad').value;
        var precioVenta = parseFloat(document.getElementById('artFormPrecioVenta').value) || 0;
        var precioCompra = parseFloat(document.getElementById('artFormPrecioCompra').value) || 0;
        var precioN02 = parseFloat(document.getElementById('artFormPrecioN02').value) || 0;
        var precioN03 = parseFloat(document.getElementById('artFormPrecioN03').value) || 0;
        var precioN04 = parseFloat(document.getElementById('artFormPrecioN04').value) || 0;
        var precioN05 = parseFloat(document.getElementById('artFormPrecioN05').value) || 0;
        var stockActual = parseFloat(document.getElementById('artFormStockActual').value) || 0;
        var stockMinimo = parseFloat(document.getElementById('artFormStockMinimo').value) || 0;
        var stockMaximo = parseFloat(document.getElementById('artFormStockMaximo').value) || 0;
        var peso = parseFloat(document.getElementById('artFormPeso').value) || 0;
        var moneda = document.getElementById('artFormMoneda').value;
        var est = document.getElementById('artFormEstado').value === '1';

        if (!nombre) { Mensaje.error({ titulo: 'Validacion', texto: 'El nombre del articulo es requerido' }); return; }
        if (!this.sesion || !this.sesion.id_empresa) { Mensaje.error({ titulo: 'Error', texto: 'Sesion no disponible' }); return; }

        var body = {
            id_empresa: this.sesion.id_empresa,
            id_sucursal: this.sesion.id_sucursal || null,
            nombre: nombre,
            nombre_alterno: nombreAlt,
            cod_vta: codVta,
            descripcion: desc,
            id_familia: idFamilia || null,
            id_subfamilia: idSubfamilia || null,
            id_proveedor: idProveedor || null,
            id_unidad: idUnidad || null,
            precio_venta: precioVenta,
            precio_compra: precioCompra,
            precio_n02: precioN02,
            precio_n03: precioN03,
            precio_n04: precioN04,
            precio_n05: precioN05,
            stock_actual: stockActual,
            stock_minimo: stockMinimo,
            stock_maximo: stockMaximo,
            peso: peso,
            moneda: moneda,
            estado: est
        };

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

        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 articulo' });
        });
    },
    abrirModal: function(id) {
        var self = this;
        var titulo = id ? 'Editar ' + this.idSingular : 'Nuevo ' + this.idSingular;
        var esNuevo = !id;

        var contenido = '<div class="prov-modal-form" id="' + this.elementId + 'Form">';
        contenido += '<input type="hidden" id="' + this.elementId + 'FormId" value="' + (id || '') + '">';
        contenido += this.renderFormulario(null);
        contenido += '</div>';

        Modal.abrir({
            titulo: titulo,
            ancho: '960px',
            contenido: contenido,
            botones: [
                { texto: 'Cancelar', tipo: 'secundario', accion: function() { Modal.cerrar(); } },
                { texto: 'Guardar', tipo: 'primario', accion: function() { self.onGuardar(); } }
            ]
        });

        if (esNuevo) {
            this.onCargarFormulario(null);
        } else {
            this.cargarDatos(id);
        }
    }
});

// ============================================================
// LISTA PRECIOS
// ============================================================
var ListaPrecios = Object.assign({}, TablaGenerica);

ListaPrecios.init({
    title: 'Lista Precios',
    icon: 'fa-dollar-sign',
    idSingular: 'Precio',
    idField: 'id_articulo',
    endpoint: '/articulos',
    sortDefault: 'nombre',
    limite: 50,
    searchPlaceholder: 'Buscar por codigo o nombre...',
    filtroEstado: true,
    showEstado: true,
    showCrear: false,
    exportFileName: 'ListaPrecios',
    elementId: 'pageListaPrecios',
    menuPage: 'ListaPrecios',
    columnFilters: {},
    columns: [
        { field: 'cod_articulo', label: 'Codigo', sortable: true, filterable: true, width: '90px' },
        { field: 'nombre', label: 'Nombre', sortable: true, filterable: true, width: '160px' },
        { field: 'familia_nombre', label: 'Familia', sortable: true, filterable: true, width: '140px' },
        { field: 'proveedor_razon_social', label: 'Proveedor', sortable: true, filterable: true, width: '180px' },
        { field: 'precio_venta', label: 'Venta', align: 'right', sortable: true, filterable: false, width: '100px',
            render: function(row) { return 'S/ ' + Number(row.precio_venta || 0).toFixed(2); }
        },
        { field: 'precio_compra', label: 'Compra', align: 'right', sortable: true, filterable: false, width: '100px',
            render: function(row) { return 'S/ ' + Number(row.precio_compra || 0).toFixed(2); }
        },
        { field: 'precio_n02', label: 'Nivel 2', align: 'right', sortable: true, filterable: false, width: '90px',
            render: function(row) { return 'S/ ' + Number(row.precio_n02 || 0).toFixed(2); }
        },
        { field: 'precio_n03', label: 'Nivel 3', align: 'right', sortable: true, filterable: false, width: '90px',
            render: function(row) { return 'S/ ' + Number(row.precio_n03 || 0).toFixed(2); }
        },
        { field: 'precio_n04', label: 'Nivel 4', align: 'right', sortable: true, filterable: false, width: '90px',
            render: function(row) { return 'S/ ' + Number(row.precio_n04 || 0).toFixed(2); }
        },
        { field: 'precio_n05', label: 'Nivel 5', align: 'right', sortable: true, filterable: false, width: '90px',
            render: function(row) { return 'S/ ' + Number(row.precio_n05 || 0).toFixed(2); }
        },
        { field: 'stock_actual', label: 'Stock', align: 'right', sortable: true, filterable: false, width: '80px',
            render: function(row) { return Number(row.stock_actual || 0).toFixed(2); }
        },
        { field: 'estado', label: 'Estado', sortable: true, filterable: true, width: '90px',
            render: function(row) {
                return row.estado
                    ? '<span class="prov-badge prov-badge-activo"><span class="prov-badge-dot"></span>Activo</span>'
                    : '<span class="prov-badge prov-badge-inactivo"><span class="prov-badge-dot"></span>Inactivo</span>';
            }
        }
    ],
    renderFormulario: function(data) {
        var html = '<div class="lp-section">';
        html += '<div class="lp-grid">';
        html += '<div class="prov-field"><label>Codigo</label><input type="text" id="lpFormCod" class="prov-input" readonly style="background:#f3f4f6;color:#6b7280"></div>';
        html += '<div class="prov-field"><label>Nombre</label><input type="text" id="lpFormNombre" class="prov-input" readonly style="background:#f3f4f6;color:#6b7280"></div>';
        html += '<div class="prov-field"><label>Precio Venta <span class="req">*</span></label><input type="number" id="lpFormVenta" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Precio Compra</label><input type="number" id="lpFormCompra" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Precio Nivel 2</label><input type="number" id="lpFormN02" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Precio Nivel 3</label><input type="number" id="lpFormN03" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Precio Nivel 4</label><input type="number" id="lpFormN04" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Precio Nivel 5</label><input type="number" id="lpFormN05" class="prov-input" step="0.01" min="0" placeholder="0.00"></div>';
        html += '<div class="prov-field"><label>Stock Actual</label><input type="text" id="lpFormStock" class="prov-input" readonly style="background:#f3f4f6;color:#6b7280"></div>';
        html += '<div class="prov-field"><label>Moneda</label><input type="text" id="lpFormMoneda" class="prov-input" readonly style="background:#f3f4f6;color:#6b7280"></div>';
        html += '</div></div>';
        return html;
    },
    onCargarFormulario: function(data) {
        if (!data) {
            document.getElementById('lpFormCod').value = '';
            document.getElementById('lpFormNombre').value = '';
            document.getElementById('lpFormVenta').value = '';
            document.getElementById('lpFormCompra').value = '';
            document.getElementById('lpFormN02').value = '';
            document.getElementById('lpFormN03').value = '';
            document.getElementById('lpFormN04').value = '';
            document.getElementById('lpFormN05').value = '';
            document.getElementById('lpFormStock').value = '';
            document.getElementById('lpFormMoneda').value = '';
            return;
        }
        document.getElementById('lpFormCod').value = data.cod_articulo || '';
        document.getElementById('lpFormNombre').value = data.nombre || '';
        document.getElementById('lpFormVenta').value = data.precio_venta || '';
        document.getElementById('lpFormCompra').value = data.precio_compra || '';
        document.getElementById('lpFormN02').value = data.precio_n02 || '';
        document.getElementById('lpFormN03').value = data.precio_n03 || '';
        document.getElementById('lpFormN04').value = data.precio_n04 || '';
        document.getElementById('lpFormN05').value = data.precio_n05 || '';
        document.getElementById('lpFormStock').value = data.stock_actual || '';
        document.getElementById('lpFormMoneda').value = data.moneda || 'PEN';
    },
    onGuardar: function() {
        var id = document.getElementById('pageListaPreciosFormId')?.value;
        var precioVenta = parseFloat(document.getElementById('lpFormVenta').value) || 0;
        var precioCompra = parseFloat(document.getElementById('lpFormCompra').value) || 0;
        var precioN02 = parseFloat(document.getElementById('lpFormN02').value) || 0;
        var precioN03 = parseFloat(document.getElementById('lpFormN03').value) || 0;
        var precioN04 = parseFloat(document.getElementById('lpFormN04').value) || 0;
        var precioN05 = parseFloat(document.getElementById('lpFormN05').value) || 0;

        if (!id) { Mensaje.error({ titulo: 'Error', texto: 'ID no disponible' }); return; }

        fetch(this.API_URL + '/lista-precios/' + id, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                precio_venta: precioVenta,
                precio_compra: precioCompra,
                precio_n02: precioN02,
                precio_n03: precioN03,
                precio_n04: precioN04,
                precio_n05: precioN05
            })
        })
        .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' });
        });
    },
    abrirModal: function(id) {
        var self = this;
        var titulo = id ? 'Editar Precios' : 'Nuevos Precios';
        var esNuevo = !id;

        var contenido = '<div class="prov-modal-form" id="' + this.elementId + 'Form">';
        contenido += '<input type="hidden" id="' + this.elementId + 'FormId" value="' + (id || '') + '">';
        contenido += this.renderFormulario(null);
        contenido += '</div>';

        Modal.abrir({
            titulo: titulo,
            ancho: '500px',
            contenido: contenido,
            botones: [
                { texto: 'Cancelar', tipo: 'secundario', accion: function() { Modal.cerrar(); } },
                { texto: 'Guardar', tipo: 'primario', accion: function() { self.onGuardar(); } }
            ]
        });

        if (esNuevo) {
            this.onCargarFormulario(null);
        } else {
            this.cargarDatos(id);
        }
    }
});
