Otimização JS e HTML

Apartir desse JS abaixo, preciso que crie um HTML com CS moderno, também preciso que otimize esse JS, para ficar mais enxuto. Não posso perder nenhum funcionalidade, só quero que ele fique enxuto e funcional. Utilizo ele com Flask em ptyhon. Então só preciso do HTML, css e esse JS otimizado.

document.addEventListener("DOMContentLoaded", () => {
    const tabela = document.querySelector("#pedidoGrid tbody");
    const botaoAdicionar = document.querySelector("#adicionarLinha");
    const boletaFinalizadaCheckbox = document.querySelector("#boleta_finalizada");

    // Modais e botões
    const botaoLupa = document.getElementById("botao-lupa");
    const modalBuscarCliente = document.getElementById("modal-buscar-cliente");
    const botaoBuscarCliente = document.getElementById("botao-buscar");
    const campoNome = document.getElementById("campo-nome");
    const campoCPF = document.getElementById("campo-cpf");
    const campoCNPJ = document.getElementById("campo-cnpj");
    const resultadoBusca = document.getElementById("resultado-busca");
    const campoCliente = document.querySelector("#campo-cliente");

    // Exemplo de clientes para busca (simulação, substitua pelos seus dados reais)
    const clientes = [
        { id: 1, nome: "Cliente A", cpf: "123.456.789-00", cnpj: "" },
        { id: 2, nome: "Cliente B", cpf: "", cnpj: "12.345.678/0001-99" },
        { id: 3, nome: "Cliente C", cpf: "234.567.890-11", cnpj: "" },
        { id: 4, nome: "Empresa D", cpf: "", cnpj: "98.765.432/0001-88" },
    ];

    // Função para abrir modal
    const abrirModal = () => {
        modalBuscarCliente.style.display = "block";
        campoNome.focus();
    };

    // Função para fechar modal
    const fecharModal = () => {
        modalBuscarCliente.style.display = "none";
    };

    // Abrir modal ao clicar na lupa
    botaoLupa.addEventListener("click", () => {
        limparCamposModal();
        abrirModal();
    });

    // Fechar modal ao clicar no botão de fechar (X)
    document
        .querySelector("#modal-buscar-cliente .close-button")
        .addEventListener("click", fecharModal);

    // Fechar modal ao pressionar a tecla ESC
    document.addEventListener("keydown", (event) => {
        if (event.key === "Escape") {
            fecharModal();
        }
    });

    // Limpar campos do modal
    function limparCamposModal() {
        campoNome.value = "";
        campoCPF.value = "";
        campoCNPJ.value = "";
        resultadoBusca.innerHTML = "";
    }

    // Máscara para CPF
    campoCPF.addEventListener("input", (event) => {
        let valor = event.target.value.replace(/\D/g, "");
        valor = valor.replace(/(\d{3})(\d)/, "$1.$2");
        valor = valor.replace(/(\d{3})(\d)/, "$1.$2");
        valor = valor.replace(/(\d{3})(\d{1,2})$/, "$1-$2");
        event.target.value = valor;
    });

    // Máscara para CNPJ
    campoCNPJ.addEventListener("input", (event) => {
        let valor = event.target.value.replace(/\D/g, "");
        valor = valor.replace(/^(\d{2})(\d)/, "$1.$2");
        valor = valor.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3");
        valor = valor.replace(/\.(\d{3})(\d)/, ".$1/$2");
        valor = valor.replace(/(\d{4})(\d{1,2})$/, "$1-$2");
        event.target.value = valor;
    });

    let idClienteAtual = null;
    let pedidosData = {}; // Objeto para armazenar detalhes dos pedidos


    // Função para limpar a boleta (tabela)
    function limparBoleta() {
        // Seleciona a primeira linha da tabela
        const primeiraLinha = tabela.querySelector("tr");

        // Limpa o conteúdo da primeira linha em vez de remover a linha
        if (primeiraLinha) {
            // Limpa os campos específicos da linha, mantendo o combo
            const comboPedidos = primeiraLinha.querySelector(".combo-pedidos");
            if (comboPedidos) {
                comboPedidos.innerHTML = "<option value=''>Selecione o Pedido</option>"; // Reseta as opções, mas deixa o combo acessível
            }

            primeiraLinha.children[1].textContent = ""; // Filial
            primeiraLinha.children[2].textContent = ""; // Valor Pedido
            primeiraLinha.children[3].textContent = ""; // Valor Frete
            primeiraLinha.children[4].textContent = ""; // Valor Desconto
            primeiraLinha.children[5].textContent = ""; // DS (Campo Editável)
            primeiraLinha.children[6].textContent = ""; // Valor Final
            primeiraLinha.children[7].textContent = ""; // Condição Pagamento
            primeiraLinha.children[8].textContent = ""; // NSU
            primeiraLinha.children[9].textContent = ""; // OBS

            // Adiciona apenas a data na última coluna
            const dataAtual = new Date();
            const dataFormatada = dataAtual.toLocaleDateString(); // Apenas a data
            primeiraLinha.children[10].textContent = dataFormatada; // Atualiza a última coluna com a data
        }

        // Remove quaisquer outras linhas que estejam na tabela
        const outrasLinhas = tabela.querySelectorAll("tr:not(:first-child)");
        outrasLinhas.forEach((linha) => linha.remove());
    }

    // Função para buscar clientes
    function buscarClientes() {
        // Converter valores dos campos para uppercase antes de enviar (Nome)
        const nome = campoNome.value.toUpperCase().trim();

        // Manter a máscara dos campos CPF e CNPJ
        const cpf = campoCPF.value.toUpperCase().trim();
        const cnpj = campoCNPJ.value.toUpperCase().trim();

        // Garantir que pelo menos um campo seja preenchido
        if (!nome && !cpf && !cnpj) {
            resultadoBusca.innerHTML =
                "<p style='color: red;'>Preencha pelo menos um dos campos para buscar.</p>";
            return;
        }

        // Indicar que está carregando
        resultadoBusca.innerHTML =
            "<p style='color: blue;'>Buscando clientes, por favor aguarde...</p>";

        // Construir a URL da API com base nos parâmetros de busca
        let url = `/buscar_clientes?`;
        if (nome) {
            url += `nome=${nome}&`;
        }
        if (cpf) {
            url += `cpf=${cpf}&`;
        }
        if (cnpj) {
            url += `cnpj=${cnpj}&`;
        }
        url = url.slice(0, -1); // Remover o último '&'

        // Fazer a chamada AJAX para a rota /buscar_clientes do Flask
        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`Erro na requisição: ${response.status}`);
                }
                return response.json();
            })
            .then((clientes) => {
                // Limpar o conteúdo anterior
                resultadoBusca.innerHTML = "";

                if (clientes.length > 0) {
                    clientes.forEach((cliente) => {
                        const item = document.createElement("div");
                        item.textContent = `${cliente.nome} ${cliente.cpf ? `- CPF: ${cliente.cpf}` : `- CNPJ: ${cliente.cnpj}`
                            }`;
                        item.style.cursor = "pointer";
                        item.style.padding = "8px";
                        item.style.borderBottom = "1px solid #ccc";
                        item.addEventListener("click", () => selecionarCliente(cliente));
                        resultadoBusca.appendChild(item);
                    });
                } else {
                    resultadoBusca.innerHTML =
                        "<p style='color: red;'>Nenhum cliente encontrado.</p>";
                }
            })
            .catch((error) => {
                console.error("Erro ao buscar clientes:", error);
                resultadoBusca.innerHTML =
                    "<p style='color: red;'>Erro ao consultar clientes. Tente novamente mais tarde.</p>";
            });
    }

    // Executar busca ao clicar no botão ou pressionar Enter
    botaoBuscarCliente.addEventListener("click", buscarClientes);
    [campoNome, campoCPF, campoCNPJ].forEach((campo) => {
        campo.addEventListener("keypress", (event) => {
            if (event.key === "Enter") {
                event.preventDefault(); // Evita o comportamento padrão do Enter
                buscarClientes();
            }
        });
    });

    // Função para selecionar o cliente
    function selecionarCliente(cliente) {
        const campoCliente = document.querySelector("#campo-cliente");
        campoCliente.value = `${cliente.nome} ${cliente.cpf ? `- CPF: ${cliente.cpf}` : `- CNPJ: ${cliente.cnpj}`}`;

        idClienteAtual = cliente.cliente; // Garante que está pegando o campo correto

        limparBoleta(); // Limpa a tabela antes de prosseguir
        fecharModal();
        buscarPedidosDoCliente(idClienteAtual);

        console.log("ID do cliente selecionado:", idClienteAtual); // Adicionado log para depuração
    }

    function buscarPedidosDoCliente(idCliente) {
        const comboPedidos = document.querySelector("#combo-pedidos");
        comboPedidos.innerHTML = "<option value=''>Carregando...</option>";

        const url = `/buscar_pedidos_cliente?id_cliente=${idCliente}`;

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`Erro na requisição: ${response.status}`);
                }
                return response.json();
            })
            .then((data) => {
                pedidosData = {}; // Limpa os dados antigos

                comboPedidos.innerHTML = "<option value=''>Selecione o Pedido</option>";

                if (data.length === 0) {
                    comboPedidos.innerHTML = "<option value=''>Nenhum pedido encontrado</option>";
                    return;
                }

                // Imprime a resposta do backend no console
                console.log("Resposta do backend:", data);

                data.forEach((pedido) => {
                    pedidosData[pedido.pedido_venda] = pedido; // Armazena detalhes do pedido usando `pedido_venda` como chave

                    const option = document.createElement("option");
                    option.value = pedido.pedido_venda; // Define o valor do select
                    option.textContent = pedido.pedido_venda; // Exibe o texto do pedido
                    comboPedidos.appendChild(option);
                });
            })
            .catch((error) => {
                console.error("Erro ao buscar pedidos:", error);
                comboPedidos.innerHTML = "<option value=''>Erro ao carregar os pedidos</option>";
            });
    }

    document.querySelector("#combo-pedidos").addEventListener("change", function () {
        const pedidoSelecionado = this.value;

        // Verifica se o pedido foi selecionado
        if (!pedidoSelecionado || !pedidosData[pedidoSelecionado]) {
            return;
        }

        const pedidoDetalhes = pedidosData[pedidoSelecionado]; // Obtém os detalhes do pedido
        const linhaTabela = document.querySelector("#pedidoGrid tbody tr"); // Seleciona a linha da tabela

        // Preenche as colunas com os valores do pedido
        linhaTabela.children[1].textContent = pedidoDetalhes.filial || "N/A"; // Filial
        linhaTabela.children[2].textContent = `R$ ${pedidoDetalhes.valor_pedido.toFixed(2)}`;
        linhaTabela.children[3].textContent = `R$ ${pedidoDetalhes.frete.toFixed(2)}`;
        linhaTabela.children[4].textContent = `R$ ${pedidoDetalhes.desconto.toFixed(2)}`;
        linhaTabela.children[7].textContent = pedidoDetalhes.cond_pgto || "N/A"; // Preenche a condição de pagamento

        // Calcula o valor final
        const valorFinal = pedidoDetalhes.valor_pedido + pedidoDetalhes.frete + pedidoDetalhes.desconto;
        linhaTabela.children[6].textContent = `R$ ${valorFinal.toFixed(2)}`;

        console.log("Detalhes do pedido selecionado:", pedidoDetalhes);
    });

    // Função para formatar o valor como moeda no padrão brasileiro
    function formatarMoeda(valor) {
        valor = valor.replace(/[^\d,]/g, "");
        valor = valor.replace(",", ".");
        let numero = parseFloat(valor);
        return isNaN(numero)
            ? "0,00"
            : numero.toLocaleString("pt-BR", {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
            });
    }

    // Função para validar entrada (aceitar apenas números e vírgula)
    function validarEntradaNumerica(event) {
        if (
            !/[0-9,]/.test(event.key) &&
            !["Backspace", "Delete", "Enter", "Tab", "."].includes(event.key)
        ) {
            event.preventDefault();
        }
    }

    // Função para limpar o combo de pedidos
    function limparPedidos() {
        const comboPedidos = document.querySelector("#combo-pedidos");
        comboPedidos.innerHTML = "<option value=''>Selecione o Pedido</option>";
    }

    // Adiciona comportamentos aos campos numéricos
    function configurarCamposNumericos(linha) {
        const camposNumericos = [1, 2, 3, 4].map((indice) => linha.children[indice]);
        camposNumericos.forEach((campo) => {
            campo.textContent = "";
            campo.addEventListener("keydown", validarEntradaNumerica);
            campo.addEventListener("blur", () => (campo.textContent = formatarMoeda(campo.textContent)));
            campo.addEventListener("keypress", (event) => {
                if (event.key === "Enter") {
                    event.preventDefault();
                    campo.blur();
                }
            });
        });
    }

    // Função para limitar o número de caracteres
    function limitarInput(event, maxLength) {
        const target = event.target;
        if (target.textContent.length > maxLength) {
            target.textContent = target.textContent.slice(0, maxLength);
            const range = document.createRange();
            range.selectNodeContents(target);
            range.collapse(false);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }

    // Adicionar nova linha à tabela
    botaoAdicionar.addEventListener("click", () => adicionarLinha());

    function adicionarLinha() {
        const novaLinha = document.createElement("tr");
        const index = tabela.children.length; // Gera um índice único baseado no número de linhas
        novaLinha.setAttribute("data-index", index);

        novaLinha.innerHTML = `
        <td>
            <select class="combo-pedidos" data-index="${index}">
                <option value="">Selecione o Pedido</option>
            </select>
        </td>
        <td contenteditable="false"></td>
        <td contenteditable="false"></td>
        <td contenteditable="false"></td>
        <td contenteditable="false"></td>
        <td contenteditable="true"></td>
        <td contenteditable="false"></td>
        <td contenteditable="false"></td>
        <td contenteditable="true" class="editable" data-maxlength="30"></td>
        <td contenteditable="true" class="editable" data-maxlength="300"></td>
        <td>${new Date().toLocaleDateString()}</td>`;
        tabela.appendChild(novaLinha);

        // Recupera o combo específico da linha
        const comboPedidos = novaLinha.querySelector(".combo-pedidos");

        comboPedidos.addEventListener("change", (event) => {
            const linha = comboPedidos.closest("tr"); // Encontra a linha correspondente
            preencherDadosPedidoNaLinha(event, linha); // Passa a linha para preenchimento
        });

        buscarPedidosDoClienteEspecifico(idClienteAtual, comboPedidos); // Carrega os pedidos
        atualizarVisibilidadeLixeiras();

        // Adiciona event listeners para os campos NSU e OBS da nova linha
        const nsuCell = novaLinha.querySelector('td[contenteditable="true"][data-maxlength="30"]');
        const obsCell = novaLinha.querySelector('td[contenteditable="true"][data-maxlength="300"]');

        nsuCell.addEventListener('input', limitarConteudo);
        obsCell.addEventListener('input', limitarConteudo);
    }

    function limitarConteudo(event) {
        const target = event.target;
        const maxLength = parseInt(target.dataset.maxlength, 10);

        if (isNaN(maxLength)) {
            return; // Se o atributo não estiver definido, não faz nada
        }

        if (target.textContent.length > maxLength) {
            target.textContent = target.textContent.slice(0, maxLength);

            // Move o cursor para o final do texto truncado
            const range = document.createRange();
            range.selectNodeContents(target);
            range.collapse(false);
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);
        }
    }

    // Adicione event listeners para os campos NSU e OBS existentes
    document.querySelectorAll('td[data-maxlength]').forEach(function (cell) {
        cell.addEventListener('input', limitarConteudo);
    });

    function buscarPedidosDoClienteEspecifico(idCliente, comboPedidos) {
        comboPedidos.innerHTML = "<option value=''>Carregando...</option>";

        const url = `/buscar_pedidos_cliente?id_cliente=${idCliente}`;

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`Erro na requisição: ${response.status}`);
                }
                return response.json();
            })
            .then((data) => {
                pedidosData = {}; // Limpa os dados antigos

                comboPedidos.innerHTML = "<option value=''>Selecione o Pedido</option>";

                if (data.length === 0) {
                    comboPedidos.innerHTML = "<option value=''>Nenhum pedido encontrado</option>";
                    return;
                }

                data.forEach((pedido) => {
                    pedidosData[pedido.pedido_venda] = pedido; // Armazena detalhes do pedido usando `pedido_venda` como chave

                    const option = document.createElement("option");
                    option.value = pedido.pedido_venda; // Define o valor do select
                    option.textContent = pedido.pedido_venda; // Exibe o texto do pedido
                    comboPedidos.appendChild(option);
                });
            })
            .catch((error) => {
                console.error("Erro ao buscar pedidos:", error);
                comboPedidos.innerHTML = "<option value=''>Erro ao carregar os pedidos</option>";
            });
    }

    function preencherDadosPedidoNaLinha(event, linha) {
        const pedidoSelecionado = event.target.value;
        const pedidoDetalhes = pedidosData[pedidoSelecionado];

        if (!pedidoDetalhes) return;

        // Preenche os campos da linha com os valores do pedido
        linha.children[1].textContent = pedidoDetalhes.filial || "N/A"; // Filial
        linha.children[2].textContent = `R$ ${pedidoDetalhes.valor_pedido.toFixed(2)}`; // Valor Pedido
        linha.children[3].textContent = `R$ ${pedidoDetalhes.frete.toFixed(2)}`; // Valor Frete
        linha.children[4].textContent = `R$ ${pedidoDetalhes.desconto.toFixed(2)}`; // Valor Desconto
        linha.children[7].textContent = pedidoDetalhes.cond_pgto || "N/A"; // Condição Pagamento

        // Atualiza o Valor Final automaticamente
        atualizarValorFinal(linha);
    }

    function atualizarValorFinal(linha) {
        const valorPedido = parseFloat(linha.children[2].textContent.replace("R$", "").replace(",", ".")) || 0;
        const valorFrete = parseFloat(linha.children[3].textContent.replace("R$", "").replace(",", ".")) || 0;
        const valorDesconto = parseFloat(linha.children[4].textContent.replace("R$", "").replace(",", ".")) || 0;
        const ds = parseFloat(linha.children[5].textContent.replace(",", ".")) || 0;

        // Calcula o valor final
        const valorFinal = valorPedido + valorFrete - valorDesconto - ds;

        // Atualiza o campo Valor Final da linha
        linha.children[6].textContent = `R$ ${valorFinal.toFixed(2)}`;
    }

    function atualizarCalculos(linha) {
        const camposEditaveis = linha.querySelectorAll(".editable");
        const valorFinalCell = linha.children[6];

        camposEditaveis.forEach((campo, index) => {
            campo.removeEventListener("click", () => (campo.textContent = ""));
            campo.addEventListener("keydown", (event) => {
                if (event.key === "Enter") {
                    event.preventDefault();
                    const proximoCampo =
                        camposEditaveis[index + 1] || camposEditaveis[0];
                    proximoCampo.focus();
                }
            });
            campo.addEventListener("input", () => calcularValorFinal(linha, valorFinalCell));
        });
    }

    function calcularValorFinal(linha, valorFinalCell) {
        const valorPedido =
            parseFloat(linha.children[1].textContent.replace(/\./g, "").replace(",", ".")) || 0;
        const valorFrete =
            parseFloat(linha.children[2].textContent.replace(/\./g, "").replace(",", ".")) || 0;
        const valorDesconto =
            parseFloat(linha.children[3].textContent.replace(/\./g, "").replace(",", ".")) || 0;
        const ds =
            parseFloat(linha.children[4].textContent.replace(/\./g, "").replace(",", ".")) || 0;
        const valorFinal = valorPedido + valorFrete - valorDesconto - ds;
        valorFinalCell.textContent = valorFinal.toLocaleString("pt-BR", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
        });
    }

    function adicionarLixeira(linha) {
        const celulaLixeira = document.createElement("td");
        celulaLixeira.innerHTML = '<i class="fas fa-trash lixeira" style="cursor: pointer;"></i>';
        linha.appendChild(celulaLixeira);

        // Adiciona evento de clique na lixeira para remover a linha
        celulaLixeira.addEventListener("click", () => {
            removerLinha(linha);
        });
    }

    function removerLinha(linha) {
        tabela.removeChild(linha);
        atualizarVisibilidadeLixeiras();
    }

    function atualizarVisibilidadeLixeiras() {
        const linhas = tabela.querySelectorAll("tr"); // Seleciona todas as linhas
        const tabelaHeader = tabela.closest("table").querySelector("thead tr"); // Cabeçalho da tabela

        // Verifica ou adiciona a coluna de lixeira no cabeçalho
        let thLixeira = tabelaHeader.querySelector(".lixeira");
        if (linhas.length > 1) {
            if (!thLixeira) {
                thLixeira = document.createElement("th");
                thLixeira.classList.add("lixeira");
                thLixeira.style.width = "50px"; // Ajuste opcional
                tabelaHeader.appendChild(thLixeira);
            }

            // Adiciona lixeira a todas as linhas
            linhas.forEach((linha) => {
                let celulaLixeira = linha.querySelector("td.lixeira");
                if (!celulaLixeira) {
                    celulaLixeira = document.createElement("td");
                    celulaLixeira.classList.add("lixeira");
                    celulaLixeira.innerHTML = `<i class="fas fa-trash" style="cursor: pointer; color: red;"></i>`;

                    // Evento para remoção da linha
                    celulaLixeira.querySelector("i").addEventListener("click", () => {
                        removerLinha(linha);
                    });

                    linha.appendChild(celulaLixeira); // Adiciona a lixeira na linha
                }
            });
        } else {
            // Remove a coluna e as lixeiras, pois só há uma linha
            if (thLixeira) {
                thLixeira.remove();
            }
            linhas.forEach((linha) => {
                const celulaLixeira = linha.querySelector("td.lixeira");
                if (celulaLixeira) {
                    celulaLixeira.remove();
                }
            });
        }
    }

    tabela.addEventListener("click", (event) => {
        if (event.target.classList.contains("lixeira")) {
            const linha = event.target.closest("tr");
            linha.remove();
            atualizarVisibilidadeLixeiras();
        }
    });

    // Função para limpar o combo de pedidos
    function limparPedidos() {
        const comboPedidos = document.querySelector("#combo-pedidos");
        comboPedidos.innerHTML = "<option value=''>Selecione o Pedido</option>";
    }

    // Inicialização
    //  atualizarVisibilidadeLixeiras();

    // Evento do botão toggle "Boleta Finalizada"
    boletaFinalizadaCheckbox.addEventListener("change", function () {
        if (boletaFinalizadaCheckbox.checked) {
            console.log("Boleta Finalizada: true");
        } else {
            console.log("Boleta Finalizada: false");
        }
    });

    // Inicializa o Listener para o combo de pedidos, após a criação da linha
    const comboPedidosInicial = document.querySelector("#combo-pedidos");
    if (comboPedidosInicial) {
        buscarPedidosDoClienteEspecifico(idClienteAtual, comboPedidosInicial);
        comboPedidosInicial.addEventListener("change", preencherDadosPedidoNaLinha);
    }

    document.getElementById("limparBoleta").addEventListener("click", function (event) {
        event.preventDefault(); // Evita que a página seja atualizada imediatamente

        if (confirm("Tem certeza que deseja limpar todas as informações da boleta?")) {
            location.reload(); // Limpa a boleta
        }
    });
});

document.addEventListener("DOMContentLoaded", () => {
    const tabela = document.querySelector("#pedidoGrid tbody");
    // const botaoAdicionar = document.querySelector("#adicionarLinha");

    // Adiciona os eventos necessários à tabela
    tabela.addEventListener("input", (event) => {
        const target = event.target;

        // Se a célula editada for a coluna "DS (R$)"
        if (target && target.cellIndex === 5) { // Índice 4 corresponde ao "DS (R$)"
            formatarComoMoeda(target); // Formata como moeda
            recalcularLinha(target.closest("tr")); // Recalcula o valor final da linha
        }
    });

    // Função para formatar uma célula como moeda
    function formatarComoMoeda(celula) {
        celula.textContent = celula.textContent.replace(/[^\d,.\-]/g, ''); // Remove caracteres não numéricos
    }

    // Função para recalcular o valor final da linha
    function recalcularLinha(linha) {
        const valorPedido = parseFloat(obterNumeroDaCelula(linha.cells[2])); // Valor Pedido (R$)
        const valorFrete = parseFloat(obterNumeroDaCelula(linha.cells[3])); // Valor Frete (R$)
        const valorDesconto = parseFloat(obterNumeroDaCelula(linha.cells[4])); // Valor Desconto (R$)
        const valorDS = parseFloat(obterNumeroDaCelula(linha.cells[5])); // DS (R$)

        // Calcula o valor final
        const valorFinal = valorPedido + valorFrete - valorDesconto - valorDS;

        // Atualiza a coluna "Valor Final (R$)"
        linha.cells[6].textContent = valorFinal.toLocaleString("pt-BR", {
            style: "currency",
            currency: "BRL",
        });
    }

    // Função para obter o número de uma célula (removendo formatação)
    function obterNumeroDaCelula(celula) {
        if (!celula) return 0;
        const valor = celula.textContent.replace(/[^\d,.-]/g, "").replace(",", ".");
        return parseFloat(valor) || 0;
    }

});