import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import { handleSweetAlert } from "@/components/Modal/SweetAlertConfirm";
import { useAuth } from "@/src/contexts/authContext";
import { formatarValor, FormatFields, GetForm } from "@/utils";
import { Info } from "lucide-react";
import { useEffect } from "react";
import QuadroDeCustos from "./ResultCustos";

const ResultadoPrecificacao = ({
  // valorAplicacaoComissao,
  resultadoPrecificacao,
  // form,
  setParametrosPrecificacao,
  valorAjusteTotal,
}: any) => {
  // const { isMobile } = useScreenContext();
  const { usuario, perfil } = useAuth();
  const formResultado = GetForm();

  // const maxAcrescimoPercent =
  //   parseFloat(String(usuario?.max_acrescimo_usuario || "0")) || 0;
  // const maxDescontoPercent =
  //   parseFloat(String(usuario?.max_desconto_usuario || "0")) || 0;

  const formatarNumero = FormatFields.formatarNumero;
  const desformatarNumeros = FormatFields.desformatarNumeros;
  // const valorPropostaPrecificacao =
  //   +FormatFields.desformatarNumeros(form?.getValues("valorFinalProposta")) ||
  //   resultadoPrecificacao.preco_venda_sem_comissao;
  // const [editandoComissoes, setEditandoComissoes] = useState<{
  //   [key: string]: { percentual: number; valor: number };
  // }>({});

  // const [edicaoTemporaria, setEdicaoTemporaria] = useState<{
  //   [key: string]: string;
  // }>({});

  // const [baseCalculoAtual, setBaseCalculoAtual] = useState<number>(0);

  const shouldBlurValue = (cargoRequerido: string) => {
    const temPermissaoGeral =
      usuario?.visualiza_comissoes_proposta_usuario == "1";
    const temCargoEspecifico = perfil?.cargo_perfil == cargoRequerido;
    return !temPermissaoGeral && !temCargoEspecifico;
  };

  const canShowCustosExtrasPrecificacao =
    usuario?.visualiza_custos_extras_proposta_usuario == "1";

  const canShowDetalhesPrecificacao =
    usuario?.visualiza_pecificacao_proposta_usuario == "1" &&
    usuario?.visualiza_custo_kit_usuario;

  // const getComissaoValue = (
  //   tipo: string,
  //   percentualOriginal: number,
  //   valorOriginal: number
  // ) => {
  //   if (editandoComissoes[tipo]) {
  //     return editandoComissoes[tipo];
  //   }
  //   return { percentual: percentualOriginal, valor: valorOriginal };
  // };

  // const getValorTemporario = (
  //   tipo: string,
  //   campo: "percentual" | "valor",
  //   valorOriginal: number
  // ) => {
  //   if (campo === "percentual" && edicaoTemporaria[tipo]) {
  //     return edicaoTemporaria[tipo];
  //   }
  //   if (editandoComissoes[tipo]) {
  //     return editandoComissoes[tipo][campo].toFixed(2);
  //   }
  //   return valorOriginal.toFixed(2);
  // };

  // const handleTemporaryPercentualChange = (tipo: string, value: string) => {
  //   setEdicaoTemporaria({
  //     ...edicaoTemporaria,
  //     [tipo]: value,
  //   });
  // };

  // const handlePercentualBlur = (tipo: string) => {
  //   const valorTemp = edicaoTemporaria[tipo];
  //   if (!valorTemp) return;

  //   // Regra: a nova comissão não pode ser maior que a comissão padrão (default)
  //   const getDefaultPercentualMax = (tipoCheck: string): number => {
  //     switch (tipoCheck) {
  //       case "vendedor":
  //         return (pVendedor || 0) * 100;
  //       case "preVendedor":
  //         return (c_pre_vendedor || 0) * 100;
  //       case "gerente":
  //         return (c_gerente || 0) * 100;
  //       case "supervisor":
  //         return (c_supervisor || 0) * 100;
  //       case "indicacao":
  //         return (c_indicacao || 0) * 100;
  //       default:
  //         return Number.POSITIVE_INFINITY;
  //     }
  //   };

  //   // Usar baseCalculoAtual se foi definido, senão usar valorFinalProposta do form, senão preco_venda_sem_comissao
  //   const valorFinalPropostaForm = form?.getValues("valorFinalProposta");
  //   const baseCalculo =
  //     baseCalculoAtual > 0
  //       ? baseCalculoAtual
  //       : valorFinalPropostaForm
  //         ? +FormatFields.desformatarNumeros(valorFinalPropostaForm)
  //         : preco_venda_sem_comissao;

  //   // Aceitar vírgula como separador decimal (pt-BR)
  //   const novoPercentual =
  //     parseFloat(String(FormatFields.desformatarNumeros(valorTemp))) || 0;

  //   const maxPermitido = getDefaultPercentualMax(tipo);
  //   if (novoPercentual > maxPermitido) {
  //     toast.error(
  //       `Comissão acima do padrão. Máximo permitido: ${formatarNumero(maxPermitido)}%`
  //     );
  //     const novaEdicaoTemporaria: { [key: string]: string } = {
  //       ...edicaoTemporaria,
  //     };
  //     delete novaEdicaoTemporaria[tipo];
  //     setEdicaoTemporaria(novaEdicaoTemporaria);
  //     return;
  //   }
  //   const novoValor = baseCalculo * (novoPercentual / 100);

  //   setEditandoComissoes({
  //     ...editandoComissoes,
  //     [tipo]: { percentual: novoPercentual, valor: novoValor },
  //   });

  //   // Limpar TODA a edição temporária (percentual E valor) para forçar re-render
  //   const novaEdicaoTemporaria: { [key: string]: string } = {
  //     ...edicaoTemporaria,
  //   };
  //   delete novaEdicaoTemporaria[tipo];
  //   setEdicaoTemporaria(novaEdicaoTemporaria);

  //   if (form) {
  //     atualizarResultadoPrecificacao(tipo, novoPercentual, novoValor);
  //   }
  // };

  // const calcularNovoTotalComissoes = (
  //   tipoAlterado: string,
  //   novoValorAlterado: number
  // ) => {
  //   let total = 0;

  //   // Usar baseCalculoAtual se foi definido, senão usar valorFinalProposta do form, senão preco_venda_sem_comissao
  //   const valorFinalPropostaForm = form?.getValues("valorFinalProposta");
  //   const baseCalculo =
  //     baseCalculoAtual > 0
  //       ? baseCalculoAtual
  //       : valorFinalPropostaForm
  //         ? +FormatFields.desformatarNumeros(valorFinalPropostaForm)
  //         : preco_venda_sem_comissao;

  //   const tipos = [
  //     "vendedor",
  //     "preVendedor",
  //     "gerente",
  //     "supervisor",
  //     "indicacao",
  //   ];

  //   tipos.forEach((tipo) => {
  //     if (tipo === tipoAlterado) {
  //       total += novoValorAlterado;
  //     } else if (tipo === "vendedor") {
  //       const vendedorValue = getComissaoValue(
  //         "vendedor",
  //         c_vendedor * 100,
  //         baseCalculo * c_vendedor
  //       );
  //       total += vendedorValue.valor;
  //     } else if (tipo === "preVendedor" && comissao_preVendedor_loja == "1") {
  //       const preVendedorValue = getComissaoValue(
  //         "preVendedor",
  //         c_pre_vendedor_final * 100,
  //         baseCalculo * c_pre_vendedor_final
  //       );
  //       total += preVendedorValue.valor;
  //     } else if (tipo === "gerente" && comissao_gerente_loja == "1") {
  //       const gerenteValue = getComissaoValue(
  //         "gerente",
  //         c_gerente_final * 100,
  //         baseCalculo * c_gerente_final
  //       );
  //       total += gerenteValue.valor;
  //     } else if (tipo === "supervisor" && comissao_supervisor_loja == "1") {
  //       const supervisorValue = getComissaoValue(
  //         "supervisor",
  //         c_supervisor_final * 100,
  //         baseCalculo * c_supervisor_final
  //       );
  //       total += supervisorValue.valor;
  //     } else if (tipo === "indicacao" && comissao_indicacao_loja == "1") {
  //       const indicacaoValue = getComissaoValue(
  //         "indicacao",
  //         c_indicacao_final * 100,
  //         baseCalculo * c_indicacao_final
  //       );
  //       total += indicacaoValue.valor;
  //     }
  //   });

  //   // Adicionar indicação bruto
  //   if (comissao_indicacao_loja == "1") {
  //     total += c_indicacao_bruto;
  //   }

  //   return total;
  // };

  // const calcularTotalComissoes = () => {
  //   let total = 0;

  //   // Usar baseCalculoAtual se foi definido, senão usar valorFinalProposta do form, senão preco_venda_sem_comissao
  //   const valorFinalPropostaForm = form?.getValues("valorFinalProposta");
  //   const baseCalculo =
  //     baseCalculoAtual > 0
  //       ? baseCalculoAtual
  //       : valorFinalPropostaForm
  //         ? +FormatFields.desformatarNumeros(valorFinalPropostaForm)
  //         : preco_venda_sem_comissao;

  //   // Vendedor
  //   const vendedorValue = getComissaoValue(
  //     "vendedor",
  //     c_vendedor * 100,
  //     baseCalculo * c_vendedor
  //   );
  //   total += vendedorValue.valor;

  //   // Pré-Vendedor
  //   if (comissao_preVendedor_loja == "1") {
  //     const preVendedorValue = getComissaoValue(
  //       "preVendedor",
  //       c_pre_vendedor_final * 100,
  //       baseCalculo * c_pre_vendedor_final
  //     );
  //     total += preVendedorValue.valor;
  //   }

  //   // Gerente
  //   if (comissao_gerente_loja == "1") {
  //     const gerenteValue = getComissaoValue(
  //       "gerente",
  //       c_gerente_final * 100,
  //       baseCalculo * c_gerente_final
  //     );
  //     total += gerenteValue.valor;
  //   }

  //   // Supervisor
  //   if (comissao_supervisor_loja == "1") {
  //     const supervisorValue = getComissaoValue(
  //       "supervisor",
  //       c_supervisor_final * 100,
  //       baseCalculo * c_supervisor_final
  //     );
  //     total += supervisorValue.valor;
  //   }

  //   // Indicação
  //   if (comissao_indicacao_loja == "1") {
  //     const indicacaoValue = getComissaoValue(
  //       "indicacao",
  //       c_indicacao_final * 100,
  //       baseCalculo * c_indicacao_final
  //     );
  //     total += indicacaoValue.valor;
  //     total += c_indicacao_bruto;
  //   }

  //   return total;
  // };

  const {
    valor_kit,
    potencia_inversor,
    //
    porcentagem_sobre_kit,
    valor_sobre_total_kit,
    porcentagem_lucro_produto,
    porcentagem_encargos_produto,
    porcentagem_lucro_encargos_produto,
    markup_produto,
    valor_produto,
    valor_total_produto,
    //
    valor_fixo_servico,
    obra_por_placa_servico,
    qtd_modulos,
    qtd_ucs,
    valor_obra_por_placa,
    potencia_sistema,
    obra_por_potencia_servico,
    valor_obra_por_potencia,
    valor_obra_servico,
    porcentagem_servico,
    valor_incluindo_porcentagem_servico,
    lucro_servico,
    encargos_servico,
    porcentagem_lucro_encargos_servico,
    markup_servico,
    valor_servico,
    valor_total_servico,
    //
    custos_extras,
    valor_extra,
    valor_total_extra,
    //
    valor_total_produto_servico_extra,
    porcentagem_total,
    valor_total_incluindo_porcentagem,
    lucro_total,
    encargos_total,
    porcentagem_lucro_encargos_total,
    markup_total,
    valor_total,
    preco_venda_sem_comissao,
    preco_venda_final_sem_comissao,
    //
    // preco_venda: precoVendaComing,
    preco_venda,
    //
    // c_vendedor: pVendedor,
    c_vendedor,
    c_pre_vendedor,
    c_gerente,
    c_supervisor,
    c_indicacao,
    c_indicacao_bruto,
    valor_comissao,
    // valor_comissao: vComissaoComing,
    //
    valor_minimo_venda,
    //
    comissao_indicacao_loja,
    comissao_preVendedor_loja,
    comissao_gerente_loja,
    comissao_supervisor_loja,
    id_politica_comissao,
    id_preco_politica,
    porcentagem_imposto,
    valor_imposto,
    valor_total_apos_imposto,
    calcular_imposto_projeto_politica,
    calcular_comissao_por_loja,
  } = resultadoPrecificacao;

  // Modo "2" (Calcular pelo Total Final) compõe comissão sobre comissão: a base de
  // cada comissão passa a ser o preço já com comissão embutida (preco_venda), não o
  // preço de venda aplicando só a política de preço (preco_venda_final_sem_comissao).
  const baseComissao =
    String(calcular_comissao_por_loja) === "2"
      ? preco_venda
      : preco_venda_final_sem_comissao;

  useEffect(() => {
    formResultado?.setValue("c_vendedor", formatarNumero(c_vendedor * 100));
    formResultado?.setValue(
      "c_pre_vendedor",
      formatarNumero(c_pre_vendedor * 100)
    );
    formResultado?.setValue("c_gerente", formatarNumero(c_gerente * 100));
    formResultado?.setValue("c_supervisor", formatarNumero(c_supervisor * 100));
    formResultado?.setValue("c_indicacao", formatarNumero(c_indicacao * 100));
  }, [resultadoPrecificacao]);

  if (Object.values(resultadoPrecificacao).includes(NaN)) {
    return <></>;
  }

  // // Buscar valores editados do form, se existirem
  // const comissaoVendedorForm = form?.getValues("comissaoVendedorPercentual");
  // const comissaoPreVendedorForm = form?.getValues(
  //   "comissaoPreVendedorPercentual"
  // );
  // const comissaoGerenteForm = form?.getValues("comissaoGerentePercentual");
  // const comissaoSupervisorForm = form?.getValues(
  //   "comissaoSupervisorPercentual"
  // );
  // const comissaoIndicacaoForm = form?.getValues("comissaoIndicacaoPercentual");

  // // Usar valores do form se existirem, senão usar valores do resultadoPrecificacao
  // let c_vendedor =
  //   comissaoVendedorForm !== undefined ? comissaoVendedorForm / 100 : pVendedor;
  // let c_pre_vendedor_final =
  //   comissaoPreVendedorForm !== undefined
  //     ? comissaoPreVendedorForm / 100
  //     : c_pre_vendedor;
  // let c_gerente_final =
  //   comissaoGerenteForm !== undefined ? comissaoGerenteForm / 100 : c_gerente;
  // let c_supervisor_final =
  //   comissaoSupervisorForm !== undefined
  //     ? comissaoSupervisorForm / 100
  //     : c_supervisor;
  // let c_indicacao_final =
  //   comissaoIndicacaoForm !== undefined
  //     ? comissaoIndicacaoForm / 100
  //     : c_indicacao;

  // if (valorAplicacaoComissao?.percent) {
  //   c_vendedor = valorAplicacaoComissao?.percent;
  // }

  // // Obter base de cálculo atualizada
  // const valorFinalPropostaForm = FormatFields.desformatarNumeros(
  //   form?.getValues("valorFinalProposta")
  // );
  // const baseCalculoParaExibicao =
  //   baseCalculoAtual > 0
  //     ? baseCalculoAtual
  //     : valorFinalPropostaForm
  //       ? +FormatFields.desformatarNumeros(valorFinalPropostaForm)
  //       : preco_venda_sem_comissao;

  // // Calcular valores dinâmicos de comissão considerando edições
  // const vendedorComissaoAtual = getComissaoValue(
  //   "vendedor",
  //   c_vendedor * 100,
  //   baseCalculoParaExibicao * c_vendedor
  // );
  // const valor_comissao_calculado = calcularTotalComissoes();

  // let valor_comissao = vComissaoComing.toFixed(2);

  // if (valorAplicacaoComissao?.valor) {
  //   valor_comissao = valorAplicacaoComissao?.valor.toFixed(2);
  // } else {
  //   // Usar o valor calculado dinamicamente se não houver valor da aplicação de comissão
  //   valor_comissao = valor_comissao_calculado.toFixed(2);
  // }

  // const comissaoValo = vendedorComissaoAtual.valor;
  // const minimo_venda = isNaN(valorAplicacaoComissao?.comissaoValor)
  //   ? baseCalculoParaExibicao + +valor_comissao - comissaoValo
  //   : baseCalculoParaExibicao +
  //     +valor_comissao -
  //     valorAplicacaoComissao?.comissaoValor;

  // form?.setValue(
  //   "preco_venda_aplicando_comissao",
  //   valorPropostaPrecificacao + valor_comissao_calculado
  // );
  // const preco_venda = isNaN(valorAplicacaoComissao?.comissaoValor)
  //   ? baseCalculoParaExibicao + vendedorComissaoAtual.valor
  //   : baseCalculoParaExibicao + valorAplicacaoComissao?.comissaoValor;

  // const atualizarResultadoPrecificacao = (
  //   tipo: string,
  //   novoPercentual: number,
  //   novoValor: number
  // ) => {
  //   switch (tipo) {
  //     case "vendedor":
  //       form.setValue("comissaoVendedorPercentual", novoPercentual);
  //       form.setValue("comissaoVendedorValor", novoValor);
  //       break;
  //     case "preVendedor":
  //       form.setValue("comissaoPreVendedorPercentual", novoPercentual);
  //       form.setValue("comissaoPreVendedorValor", novoValor);
  //       break;
  //     case "gerente":
  //       form.setValue("comissaoGerentePercentual", novoPercentual);
  //       form.setValue("comissaoGerenteValor", novoValor);
  //       break;
  //     case "supervisor":
  //       form.setValue("comissaoSupervisorPercentual", novoPercentual);
  //       form.setValue("comissaoSupervisorValor", novoValor);
  //       break;
  //     case "indicacao":
  //       form.setValue("comissaoIndicacaoPercentual", novoPercentual);
  //       form.setValue("comissaoIndicacaoValor", novoValor);
  //       break;
  //   }

  //   const novoTotalComissoes = calcularNovoTotalComissoes(tipo, novoValor);
  //   form.setValue("valorTotalComissoes", novoTotalComissoes);
  //   form.setValue(
  //     "preco_venda_aplicando_comissao",
  //     valorPropostaPrecificacao + valor_comissao_calculado
  //   );
  // };

  const dadosCustos = {
    custos: [
      {
        descricao: "Custo do Kit",
        class: "custoASomar",
        valor: parseFloat(valor_kit).toFixed(2),
        percentual: "54,25",
      },
      {
        descricao: "Total Custos sobre o PRODUTO",
        valor: parseFloat(valor_produto).toFixed(2),
        percentual: "0,00",
      },
      {
        descricao: "Total Custos sobre o SERVIÇO",
        valor: parseFloat(valor_servico).toFixed(2),
        percentual: "6,22",
      },
      {
        descricao: "Total Custos EXTRAS",
        class: "custoASomar",
        valor: parseFloat(valor_extra).toFixed(2),
        percentual: "8,78",
      },
      {
        descricao: "Total Custos sobre o TOTAL",
        valor: parseFloat(valor_total).toFixed(2),
        percentual: "25,27",
      },
      {
        descricao: "Total Custos COMISSÃO",
        class: "custoASomar",
        valor: parseFloat(valor_comissao).toFixed(2),
        percentual: "5,48",
      },
    ],
    kit: [
      {
        sobre: "% Sobre Kit",
        percent: formatarNumero(porcentagem_sobre_kit * 100),
        valor: parseFloat(valor_sobre_total_kit).toFixed(2),
      },
      {
        title: "LUCRO NO PRODUTO",
        class: "lucroASomar",
        valor: (
          (valor_kit + valor_produto) *
          porcentagem_lucro_produto
        ).toFixed(2),
        percent: formatarNumero(porcentagem_lucro_produto * 100),
      },
      {
        title: "TOTAL DE ENCARGOS",
        valor: (
          (valor_kit + valor_produto) *
          porcentagem_encargos_produto
        ).toFixed(2),
        percent: formatarNumero(porcentagem_encargos_produto * 100),
      },
    ],
    servico: [
      {
        sobre: "% Sobre o Serviço",
        percent: formatarNumero(porcentagem_servico * 100),
        valor: parseFloat(valor_incluindo_porcentagem_servico).toFixed(2),
      },
      {
        title: "TOTAL DO SERVIÇO",
        valor: parseFloat(valor_obra_servico).toFixed(2),
        percent: formatarValor(
          valor_servico * lucro_servico + valor_servico * encargos_servico
        ),
      },
      {
        title: "LUCRO NO SERVIÇO",
        class: "lucroASomar",
        valor: String(parseFloat((valor_servico * lucro_servico).toFixed(2))),
        percent: formatarNumero(lucro_servico * 100),
      },
      {
        title: "TOTAL DE ENCARGOS",
        valor: String(
          parseFloat((valor_servico * encargos_servico).toFixed(2))
        ),
        percent: formatarNumero(encargos_servico * 100),
      },
    ],
    total: [
      {
        sobre: "% Sobre o total",
        percent: formatarNumero(porcentagem_total * 100),
        valor: parseFloat(valor_total_incluindo_porcentagem).toFixed(2),
      },
      {
        title: "LUCRO NO TOTAL",
        class: "lucroASomar",
        valor: String(
          parseFloat((preco_venda_sem_comissao * lucro_total).toFixed(2))
        ),
        percent: formatarNumero(lucro_total * 100),
      },
      {
        title: "TOTAL DE ENCARGOS",
        valor: String(
          parseFloat((preco_venda_sem_comissao * encargos_total).toFixed(2))
        ),
        percent: formatarNumero(encargos_total * 100),
      },
      ...(valorAjusteTotal
        ? [
            {
              title: "AJUSTE APLICADO",
              class: valorAjusteTotal > 0 ? "lucroASomar" : undefined,
              valor: String(parseFloat(Number(valorAjusteTotal).toFixed(2))),
              percent: formatarNumero(
                (Number(valorAjusteTotal) / (preco_venda || 1)) * 100
              ),
            },
          ]
        : []),
    ],
    ...(calcular_imposto_projeto_politica &&
    calcular_imposto_projeto_politica !== "0"
      ? {
          baseImposto: {
            valorBase:
              calcular_imposto_projeto_politica === "2"
                ? Math.max(Number(preco_venda || 0) - Number(valor_kit || 0), 0)
                : Number(preco_venda || 0),
            percentual: porcentagem_imposto,
            valorImposto: valor_imposto,
          },
        }
      : {}),
  };

  return Object.values(resultadoPrecificacao).includes(NaN) ? (
    <></>
  ) : (
    <div className=" flex-row flex-wrap gap-3 italic font-medium pt-2 justify-center grid">
      <div className="flex flex-col gap-3 border-2 border-meta-1/90 p-2 rounded items-center w-full">
        {(id_politica_comissao || id_preco_politica) && (
          <div className="w-full bg-gradient-to-r from-blue-100 to-indigo-100 dark:from-blue-800/40 dark:to-indigo-800/40 border-4 border-blue-500 dark:border-blue-400 rounded-xl p-6 shadow-lg">
            <div className="text-center mb-4">
              <h3 className="text-lg font-bold text-blue-900 dark:text-blue-100 uppercase tracking-wide">
                Id das Políticas Utilizadas no Cálculo
              </h3>
            </div>
            <div className="grid grid-cols-2 gap-6 text-center">
              {id_preco_politica && (
                <div className="bg-white/60 dark:bg-gray-900/40 rounded-lg p-4 shadow-md">
                  <div className="text-base font-bold text-blue-700 dark:text-blue-300 mb-2 uppercase tracking-wide">
                    ID Política de Preço
                  </div>
                  <div className="text-3xl font-extrabold text-blue-900 dark:text-blue-50">
                    {id_preco_politica}
                  </div>
                </div>
              )}
              {id_politica_comissao && (
                <div className="bg-white/60 dark:bg-gray-900/40 rounded-lg p-4 shadow-md">
                  <div className="text-base font-bold text-indigo-700 dark:text-indigo-300 mb-2 uppercase tracking-wide">
                    ID Política de Comissão
                  </div>
                  <div className="text-3xl font-extrabold text-indigo-900 dark:text-indigo-50">
                    {id_politica_comissao}
                  </div>
                </div>
              )}
            </div>
          </div>
        )}
        {(canShowDetalhesPrecificacao || canShowCustosExtrasPrecificacao) && (
          <div className="flex-1 flex flex-row flex-wrap justify-center gap-3 italic font-medium">
            <div className="flex flex-col items-center p-1 border-2 border-meta-6/70 rounded">
              <div className="flex flex-row gap-2 flex-wrap">
                {canShowDetalhesPrecificacao && (
                  <>
                    <div className="flex-1 flex flex-col items-center p-2 border-2 bg-meta-5/10 border-meta-5/70 min-w-[350px] rounded relative">
                      <div className="font-bold max-sm:text-sm text-lg">
                        PRODUTO
                      </div>

                      <table className="text-end max-sm:text-sm">
                        <tbody>
                          {/* <tr className="flex flex-row justify-between gap-3"> */}
                          <tr className="">
                            <td className="px-2 py-1 border-t border-meta-5/70">
                              <div>
                                {/* {visualizarValores ? "Valor" : "Porcentagem"}{" "} */}
                                % Sobre Kit
                              </div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {/* {visualizarValores
                  ? formatarValor(valor_sobre_total_kit)
                  : `${formatarNumero(porcentagem_sobre_kit * 100)}%`} */}
                                {`${formatarNumero(porcentagem_sobre_kit * 100)}%`}
                              </span>
                            </td>
                            <td className="border-t border-meta-5/70"></td>
                            <td className="px-2 py-1 border-t border-meta-5/70">
                              <div>
                                {/* {visualizarValores ? "Valor" : "Porcentagem"}{" "} */}
                                Valor Sobre Kit
                              </div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {/* {visualizarValores
                  ? formatarValor(valor_sobre_total_kit)
                  : `${formatarNumero(porcentagem_sobre_kit * 100)}%`} */}
                                {formatarValor(valor_sobre_total_kit)}
                              </span>
                            </td>
                          </tr>
                          {/* <tr>
                      <td className="px-2 py-1">
                        <div>% Lucro</div>
                        <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                          {formatarNumero(porcentagem_lucro_produto * 100)}%
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td className="px-2 py-1">
                        <div>% Encargos</div>
                        <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                          {formatarNumero(porcentagem_encargos_produto * 100)}%
                        </span>
                      </td>
                    </tr> */}
                          <tr>
                            <td className="px-2 py-1 border-b border-b-meta-5/70">
                              <div>% Markup</div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarNumero(
                                  porcentagem_lucro_encargos_produto * 100
                                )}
                                %
                              </span>
                            </td>
                            <td className="border-b border-b-meta-5/70">
                              <Button
                                type="button"
                                className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                                onClick={(e: any) => {
                                  e.stopPropagation();
                                  handleSweetAlert({
                                    icon: "info",
                                    // title: "Cálculo Markup",
                                    showDenyButton: false,
                                    confirmButtonText: "Ok",
                                    html: `
                                    <div class="flex flex-col gap-2">
                                      <div>
                                        <div class="font-bold">
                                          Fórmula do % Markup
                                        </div>
                                        <div class="italic text-meta-1">
                                          (100% - %Lucro - %Encargos) = % Markup
                                        </div>
                                        <div class="italic">
                                          (100% - ${formatarNumero(porcentagem_lucro_produto * 100)}% - ${formatarNumero(
                                            porcentagem_encargos_produto * 100
                                          )}%) = ${formatarNumero(porcentagem_lucro_encargos_produto * 100)}%
                                        </div>
                                      </div>
                                    </div>
                                  `,
                                  });
                                }}
                              >
                                <Info />
                              </Button>
                            </td>
                            <td className="px-2 py-1 border-b border-b-meta-5/70">
                              <div>Valor Markup</div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarValor(markup_produto)}
                              </span>
                            </td>
                            <td>
                              <Button
                                type="button"
                                className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                                onClick={(e: any) => {
                                  e.stopPropagation();
                                  handleSweetAlert({
                                    icon: "info",
                                    // title: "Cálculo Markup",
                                    showDenyButton: false,
                                    confirmButtonText: "Ok",
                                    html: `
                                    <div class="flex flex-col gap-2">
                                      <div>
                                        <div class="font-bold">
                                          Fórmula do Valor do Markup
                                        </div>
                                        <div class="italic text-meta-1">
                                          ((Custo do Kit + Valor sobre o Kit) / %Markup) - (Custo do Kit + Valor sobre o Kit) = Valor do Markup
                                        </div>
                                        <div class="italic">
                                          ((${formatarValor(valor_kit)} + ${formatarValor(valor_sobre_total_kit)}) / ${formatarNumero(
                                            porcentagem_lucro_encargos_produto *
                                              100
                                          )}%) - (${formatarValor(valor_kit)} + ${formatarValor(valor_sobre_total_kit)}) = ${formatarValor(markup_produto)}
                                        </div>
                                      </div>
                                    </div>
                                  `,
                                  });
                                }}
                              >
                                <Info />
                              </Button>
                            </td>
                          </tr>
                          <tr>
                            <td className="px-2 py-1">
                              <div>Total Custos</div>
                              <div>Sobre Produto</div>
                            </td>
                            <td></td>
                            <td className="px-2 py-1">
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarValor(valor_produto)}
                              </span>
                            </td>
                          </tr>
                          {usuario.visualiza_custo_kit_usuario == "1" && (
                            <tr>
                              <td className="px-2 py-1 font-bold">
                                <div>Custo do Kit + Total</div>
                                <div>Custos Sobre Produto</div>
                              </td>
                              <td></td>
                              <td className="px-2 py-1">
                                <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                  {formatarValor(valor_total_produto)}
                                </span>
                              </td>
                            </tr>
                          )}
                        </tbody>
                      </table>
                    </div>

                    <div className="flex-1 flex flex-col items-center p-2 border-2 bg-meta-1/10 border-meta-1/70 min-w-[350px] rounded relative">
                      <div className="font-bold max-sm:text-sm text-lg">
                        SERVIÇOS
                      </div>

                      <table className="text-end max-sm:text-sm">
                        <tbody>
                          <tr>
                            <td className="px-2 py-1 border-t border-meta-1/70"></td>
                            <td className="px-2 py-1 border-t border-meta-1/70"></td>
                            <td className="px-2 py-1 border-t border-meta-1/70">
                              <div>Valor Fixo</div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarValor(valor_fixo_servico)}
                              </span>
                            </td>
                          </tr>
                          <tr>
                            <td className="px-2 py-1">
                              <div>Valor Mão de Obra por Placa</div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {`${formatarValor(obra_por_placa_servico)} * ${qtd_modulos}`}
                              </span>
                            </td>
                            <td></td>
                            <td className="px-2 py-1">
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarValor(valor_obra_por_placa)}
                              </span>
                            </td>
                          </tr>
                          <tr>
                            <td className="px-2 py-1">
                              <div>Valor Mão de Obra por Potência</div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {`${formatarValor(obra_por_potencia_servico)} * ${formatarNumero(potencia_sistema)}kWp`}
                              </span>
                            </td>
                            <td></td>
                            <td className="px-2 py-1">
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarValor(valor_obra_por_potencia)}
                              </span>
                            </td>
                          </tr>
                          <tr>
                            <td className="px-2 py-1">
                              <div>Total do Serviço</div>
                              {/* <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                          Valor Fixo + Obra por Placa + Obra por Potência
                        </span> */}
                            </td>
                            <td>
                              <Button
                                type="button"
                                className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                                onClick={(e: any) => {
                                  e.stopPropagation();
                                  handleSweetAlert({
                                    icon: "info",
                                    // title: "Cálculo Markup",
                                    showDenyButton: false,
                                    confirmButtonText: "Ok",
                                    html: `
                                    <div class="flex flex-col gap-2">
                                      <div>
                                        <div class="font-bold">
                                          Fórmula do Total do Serviço
                                        </div>
                                        <div class="italic text-meta-1">
                                          Valor Fixo + Obra por Placa + Obra por Potência = Total do Serviço
                                        </div>
                                        <div class="italic">
                                          ${formatarValor(
                                            valor_fixo_servico
                                          )} + ${formatarValor(
                                            valor_obra_por_placa
                                          )} + ${formatarValor(
                                            valor_obra_por_potencia
                                          )} = ${formatarValor(valor_obra_servico)}
                                        </div>
                                      </div>
                                    </div>
                                  `,
                                  });
                                }}
                              >
                                <Info />
                              </Button>
                            </td>
                            <td className="px-2 py-1">
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarValor(valor_obra_servico)}
                              </span>
                            </td>
                          </tr>
                          <tr>
                            <td className="px-2 py-1">
                              <div>% Sobre o Serviço</div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded">
                                {`${formatarNumero(porcentagem_servico * 100)}%`}
                              </span>
                            </td>
                            <td>
                              <Button
                                type="button"
                                className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                                onClick={(e: any) => {
                                  e.stopPropagation();
                                  handleSweetAlert({
                                    icon: "info",
                                    // title: "Cálculo Markup",
                                    showDenyButton: false,
                                    confirmButtonText: "Ok",
                                    html: `
                                    <div class="flex flex-col gap-2">
                                      <div>
                                        <div class="font-bold">
                                          Fórmula do Valor Sobre o Serviço
                                        </div>
                                        <div class="italic text-meta-1">
                                          Total do serviço * %Sobre o Serviço = Valor Sobre o Serviço
                                        </div>
                                        <div class="italic">
                                          ${formatarValor(
                                            valor_obra_servico
                                          )} * ${formatarNumero(
                                            porcentagem_servico * 100
                                          )}% = ${formatarValor(
                                            valor_incluindo_porcentagem_servico
                                          )}
                                        </div>
                                      </div>
                                    </div>
                                  `,
                                  });
                                }}
                              >
                                <Info />
                              </Button>
                            </td>
                            <td className="px-2 py-1">
                              <div>Valor sobre Serviço</div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded">
                                {formatarValor(
                                  valor_incluindo_porcentagem_servico
                                )}
                              </span>
                            </td>
                          </tr>
                          {/* <tr>
                      <td className="px-2 py-1">
                        <div>% Lucro</div>
                        <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                          {formatarNumero(lucro_servico * 100)}%
                        </span>
                      </td>
                    </tr>
                    <tr>
                      <td className="px-2 py-1">
                        <div>% Encargos</div>
                        <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                          {formatarNumero(encargos_servico * 100)}%
                        </span>
                      </td>
                    </tr> */}
                          <tr>
                            <td className="px-2 py-1 border-b border-meta-1/70">
                              <div>% Markup</div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarNumero(
                                  porcentagem_lucro_encargos_servico * 100
                                )}
                                %
                              </span>
                            </td>
                            <td className="border-b border-meta-1/70">
                              <Button
                                type="button"
                                className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                                onClick={(e: any) => {
                                  e.stopPropagation();
                                  handleSweetAlert({
                                    icon: "info",
                                    // title: "Cálculo Markup",
                                    showDenyButton: false,
                                    confirmButtonText: "Ok",
                                    html: `
                                    <div class="flex flex-col gap-2">
                                      <div>
                                        <div class="font-bold">
                                          Fórmula do % Markup
                                        </div>
                                        <div class="italic text-meta-1">
                                          (100% - %Lucro - %Encargos) = % Markup
                                        </div>
                                        <div class="italic">
                                          (100% - ${formatarNumero(lucro_servico * 100)}% - ${formatarNumero(
                                            encargos_servico * 100
                                          )}%) = ${formatarNumero(porcentagem_lucro_encargos_servico * 100)}%
                                        </div>
                                      </div>
                                    </div>
                                  `,
                                  });
                                }}
                              >
                                <Info />
                              </Button>
                            </td>
                            <td className="px-2 py-1 border-b border-meta-1/70">
                              <div>Valor Markup</div>
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarValor(markup_servico)}
                              </span>
                            </td>
                            <td>
                              <Button
                                type="button"
                                className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                                onClick={(e: any) => {
                                  e.stopPropagation();
                                  handleSweetAlert({
                                    icon: "info",
                                    // title: "Cálculo Markup",
                                    showDenyButton: false,
                                    confirmButtonText: "Ok",
                                    html: `
                                    <div class="flex flex-col gap-2">
                                      <div>
                                        <div class="font-bold">
                                          Fórmula do Valor do Markup
                                        </div>
                                        <div class="italic text-meta-1">
                                          (Total do Serviço + Valor sobre o Serviço) / %Markup) - (Total do Serviço + Valor sobre o Serviço) = Valor do Markup
                                        </div>
                                        <div class="italic">
                                          ((${formatarValor(valor_obra_servico)} + ${formatarValor(valor_incluindo_porcentagem_servico)}) / ${formatarNumero(
                                            porcentagem_lucro_encargos_servico *
                                              100
                                          )}%) - (${formatarValor(valor_obra_servico)} + ${formatarValor(valor_incluindo_porcentagem_servico)}) = ${formatarValor(markup_servico)}
                                        </div>
                                      </div>
                                    </div>
                                  `,
                                  });
                                }}
                              >
                                <Info />
                              </Button>
                            </td>
                          </tr>
                          <tr>
                            <td className="px-2 py-1">
                              <div>Total Custos</div>
                              <div>Sobre Serviço</div>
                            </td>
                            <td></td>
                            <td className="px-2 py-1">
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarValor(valor_servico)}
                              </span>
                            </td>
                          </tr>
                          {usuario.visualiza_custo_kit_usuario == "1" && (
                            <tr>
                              <td className="px-2 py-1 font-bold">
                                <div>Custo do Kit + Total</div>
                                <div>Custos Sobre Serviço</div>
                              </td>
                              <td></td>
                              <td className="px-2 py-1">
                                <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                  {formatarValor(valor_total_servico)}
                                </span>
                              </td>
                            </tr>
                          )}
                        </tbody>
                      </table>
                    </div>
                  </>
                )}

                {canShowCustosExtrasPrecificacao && (
                  <div className="flex-1 flex flex-col items-center p-2 border-2 border-meta-3/70 bg-meta-3/10 min-w-[350px] rounded">
                    <div className="font-bold max-sm:text-sm text-lg">
                      EXTRA
                    </div>
                    <table className="text-end max-sm:text-sm">
                      <tbody>
                        {/* <tr>
                          <td className="px-2 py-1 border-t border-meta-3/70">
                            <div>Valores Extra</div>
                            <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                              {formatarValor(valor_extra)}
                            </span>
                          </td>
                        </tr> */}
                        <tr>
                          <td className="p-0 border-t border-meta-3/70 h-0"></td>
                          <td className="p-0 border-t border-meta-3/70 h-0"></td>
                          <td className="p-0 border-t border-meta-3/70 h-0"></td>
                        </tr>
                        {custos_extras?.map(
                          (
                            {
                              descricaoProposta_custo_extra,
                              formula_custo_extra,
                              isChecked,
                              label_custo_extra,
                              // loja,
                              modulosDia_loja,
                              instaladoresDia_loja,
                              metodo_custo_extra,
                              percentualDe_custo_extra,
                              qtd_custo_extra,
                              tabelaPrecos,
                              tipo_custo_extra,
                              value_digitado,
                              value,
                              ...rest
                            }: any,
                            indexCustoExtra: number
                          ) =>
                            isChecked && (
                              <tr key={indexCustoExtra}>
                                <td className="px-2 py-1">
                                  <div>{descricaoProposta_custo_extra}</div>
                                  {["1", "4", "5"].includes(
                                    metodo_custo_extra
                                  ) && (
                                    <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                      {`${
                                        metodo_custo_extra == "1"
                                          ? `${formatarValor(Number(tabelaPrecos?.qtd_custo_extra_tabela))}`
                                          : metodo_custo_extra == "4"
                                            ? formula_custo_extra == "1"
                                              ? `${formatarNumero(value_digitado)}${label_custo_extra} * ${formatarValor(qtd_custo_extra)}`
                                              : formula_custo_extra == "2"
                                                ? `Fórmula Multiplicação da Média de Dias`
                                                : formula_custo_extra == "3"
                                                  ? `${label_custo_extra && label_custo_extra != "R$" ? `${formatarNumero(value_digitado)}${label_custo_extra}` : formatarValor(value_digitado)} * ${qtd_modulos}`
                                                  : formula_custo_extra == "4"
                                                    ? `${label_custo_extra && label_custo_extra != "R$" ? `${formatarNumero(value_digitado)}${label_custo_extra}` : formatarValor(value_digitado)} * ${formatarNumero(potencia_sistema)}kWp`
                                                    : formula_custo_extra == "5"
                                                      ? `${label_custo_extra && label_custo_extra != "R$" ? `${formatarNumero(value_digitado)}${label_custo_extra}` : formatarValor(value_digitado)} * ${qtd_ucs}`
                                                      : "Fórmula Inválida"
                                            : metodo_custo_extra == "5"
                                              ? percentualDe_custo_extra == "1"
                                                ? `${value_digitado}% * ${formatarValor(valor_kit)}`
                                                : percentualDe_custo_extra ==
                                                    "2"
                                                  ? `${value_digitado}% * ${formatarValor(valor_produto)}`
                                                  : percentualDe_custo_extra ==
                                                      3
                                                    ? `${value_digitado}% * ${formatarValor(valor_servico)}`
                                                    : "Percentual Inválido"
                                              : "Método Inválido"
                                      }`}
                                    </span>
                                  )}
                                </td>
                                <td>
                                  {["1", "2", "4", "5"].includes(
                                    metodo_custo_extra
                                  ) && (
                                    <Button
                                      type="button"
                                      className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                                      onClick={(e: any) => {
                                        e.stopPropagation();
                                        handleSweetAlert({
                                          icon: "info",
                                          // title: "Cálculo Markup",
                                          showDenyButton: false,
                                          confirmButtonText: "Ok",
                                          html: `
                                              <div class="flex flex-col gap-2">
                                                <div>
                                                  <div class="font-bold">
                                                    ${
                                                      metodo_custo_extra == "1"
                                                        ? "Tabela de Módulos"
                                                        : metodo_custo_extra ==
                                                            "2"
                                                          ? "Tabela de Potência"
                                                          : metodo_custo_extra ==
                                                              "4"
                                                            ? formula_custo_extra ==
                                                              "1"
                                                              ? "Fórmula Multiplicação da Entrada"
                                                              : formula_custo_extra ==
                                                                  "2"
                                                                ? `Fórmula Multiplicação da Média de Dias
                                                                    <div class="absolute top-2 left-2 p-2 text-left w-[40%]">
                                                                      <div>Observação: </div>
                                                                      <div class="text-sm">"⌈<span class="italic">x</span>⌉": Teto de <span class="italic">x</span></div>
                                                                      <div class="text-sm">Representa o menor inteiro maior ou igual a <span class="italic">x</span></div>
                                                                    </div>
                                                                  `
                                                                : formula_custo_extra ==
                                                                    "3"
                                                                  ? `Fórmula Multiplicação Qtd Módulos`
                                                                  : formula_custo_extra ==
                                                                      "4"
                                                                    ? `Fórmula Multiplicação Potência Sistema`
                                                                    : formula_custo_extra ==
                                                                        "5"
                                                                      ? "Fórmula Multiplicação Qtd UCs"
                                                                      : "Fórmula Inválida"
                                                            : metodo_custo_extra ==
                                                                "5"
                                                              ? percentualDe_custo_extra ==
                                                                "1"
                                                                ? `Percentual do Custo do Kit`
                                                                : percentualDe_custo_extra ==
                                                                    "2"
                                                                  ? `Percentual do Custo do Produto`
                                                                  : percentualDe_custo_extra ==
                                                                      3
                                                                    ? `Percentual do Custo do Serviço`
                                                                    : "Percentual Inválido"
                                                              : "Método Inválido"
                                                    }
                                                  </div>
                                                  <div class="italic text-meta-1">
                                                    ${
                                                      metodo_custo_extra == "1"
                                                        ? `Quantidade de Módulos = Preço Tabelado de Módulos`
                                                        : metodo_custo_extra ==
                                                            "2"
                                                          ? "Potência do Inversor = Preço Tabelado de Potência"
                                                          : metodo_custo_extra ==
                                                              "4"
                                                            ? formula_custo_extra ==
                                                              "1"
                                                              ? `Valor Digitado ${label_custo_extra} * Valor Configurado = ${descricaoProposta_custo_extra}`
                                                              : formula_custo_extra ==
                                                                  "2"
                                                                ? `⌈ (Quantidade de Módulos / (Módulos Instalados por Dia / Quantidade Instaladores) ⌉ * Valor Fixo${tipo_custo_extra == "1" ? ` * Valor Digitado(${label_custo_extra})` : ``} = ${descricaoProposta_custo_extra}`
                                                                : formula_custo_extra ==
                                                                    "3"
                                                                  ? `${tipo_custo_extra == "1" ? `Valor informado em ${label_custo_extra}` : "Valor Fixo"} * Quantidade de Módulos = ${descricaoProposta_custo_extra}`
                                                                  : formula_custo_extra ==
                                                                      "4"
                                                                    ? `${tipo_custo_extra == "1" ? `Valor informado em ${label_custo_extra}` : "Valor Fixo"} * Potência do Sistema kWp = ${descricaoProposta_custo_extra}`
                                                                    : formula_custo_extra ==
                                                                        "5"
                                                                      ? `${tipo_custo_extra == "1" ? `Valor informado em ${label_custo_extra}` : "Valor Fixo"} * Quantidade de UCs = ${descricaoProposta_custo_extra}`
                                                                      : "Fórmula Inválida"
                                                            : metodo_custo_extra ==
                                                                "5"
                                                              ? percentualDe_custo_extra ==
                                                                "1"
                                                                ? `% ${tipo_custo_extra == "1" ? `De ${label_custo_extra}` : "Valor Fixo"} * Valor do Kit} = ${descricaoProposta_custo_extra}`
                                                                : percentualDe_custo_extra ==
                                                                    "2"
                                                                  ? `% ${tipo_custo_extra == "1" ? `De ${label_custo_extra}` : "Valor Fixo"} * Total Custos Sobre Produto = ${descricaoProposta_custo_extra}`
                                                                  : percentualDe_custo_extra ==
                                                                      3
                                                                    ? `% ${tipo_custo_extra == "1" ? `De ${label_custo_extra}` : "Valor Fixo"} * Total Custos Sobre Serviço = ${descricaoProposta_custo_extra}`
                                                                    : "Percentual Inválido"
                                                              : "Método Inválido"
                                                    }
                                                    
                                                  </div>
                                                  <div class="italic">
                                                    ${
                                                      metodo_custo_extra == "1"
                                                        ? `${qtd_modulos} = ${formatarValor(Number(tabelaPrecos?.qtd_custo_extra_tabela)) || formatarValor(value)}`
                                                        : metodo_custo_extra ==
                                                            "2"
                                                          ? `${potencia_inversor.toFixed(2)}kW = ${formatarValor(Number(tabelaPrecos?.qtd_custo_extra_tabela))}`
                                                          : metodo_custo_extra ==
                                                              "4"
                                                            ? formula_custo_extra ==
                                                              "1"
                                                              ? `${formatarNumero(value_digitado)} ${label_custo_extra} * ${formatarValor(qtd_custo_extra)} = ${formatarValor(value)}`
                                                              : formula_custo_extra ==
                                                                  "2"
                                                                ? `⌈ ${qtd_modulos} / (${Number(modulosDia_loja || rest.loja?.modulosDia_loja || 0)} / ${Number(
                                                                    instaladoresDia_loja ||
                                                                      rest.loja
                                                                        ?.instaladoresDia_loja ||
                                                                      0
                                                                  )}) ⌉ * ${formatarValor(qtd_custo_extra)} ${tipo_custo_extra == "1" ? ` * ${formatarNumero(value_digitado)} ${label_custo_extra}` : ``} = ${formatarValor(value)}`
                                                                : formula_custo_extra ==
                                                                    "3"
                                                                  ? `${label_custo_extra && label_custo_extra != "R$" ? `${formatarNumero(value_digitado)}${label_custo_extra}` : formatarValor(value_digitado)} * ${qtd_modulos} = ${formatarValor(value)}`
                                                                  : formula_custo_extra ==
                                                                      "4"
                                                                    ? `${label_custo_extra && label_custo_extra != "R$" ? `${formatarNumero(value_digitado)}${label_custo_extra}` : formatarValor(value_digitado)} * ${formatarNumero(potencia_sistema)}kWp = ${formatarValor(value)}`
                                                                    : formula_custo_extra ==
                                                                        "5"
                                                                      ? `${label_custo_extra && label_custo_extra != "R$" ? `${formatarNumero(value_digitado)}${label_custo_extra}` : formatarValor(value_digitado)} * ${qtd_ucs} = ${formatarValor(value)}`
                                                                      : "Fórmula Inválida"
                                                            : metodo_custo_extra ==
                                                                "5"
                                                              ? percentualDe_custo_extra ==
                                                                "1"
                                                                ? `${value_digitado}% * ${formatarValor(valor_kit)} = ${formatarValor(value)}`
                                                                : percentualDe_custo_extra ==
                                                                    "2"
                                                                  ? `${value_digitado}% * ${formatarValor(valor_produto)} = ${formatarValor(value)}`
                                                                  : percentualDe_custo_extra ==
                                                                      3
                                                                    ? `${value_digitado}% * ${formatarValor(valor_servico)} = ${formatarValor(value)}`
                                                                    : "Percentual Inválido"
                                                              : "Método Inválido"
                                                    }
                                                  </div>
                                                </div>
                                              </div>
                                            `,
                                        });
                                      }}
                                    >
                                      <Info />
                                    </Button>
                                  )}
                                </td>
                                <td className="px-2 py-1">
                                  <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                    {formatarValor(value)}
                                  </span>
                                </td>
                              </tr>
                            )
                        )}
                        <tr>
                          <td className="px-2 py-1 border-t border-meta-3/70">
                            <div>Total Custos Extra</div>
                          </td>
                          <td className="px-2 py-1 border-t border-meta-3/70"></td>
                          <td className="px-2 py-1 border-t border-meta-3/70">
                            <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                              {formatarValor(valor_extra)}
                            </span>
                          </td>
                        </tr>
                        {usuario.visualiza_custo_kit_usuario == "1" && (
                          <tr>
                            <td className="px-2 py-1 font-bold">
                              <div>Custo do Kit + Total</div>
                              <div>Custos Extras</div>
                            </td>
                            <td></td>
                            <td className="px-2 py-1">
                              <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                                {formatarValor(valor_total_extra)}
                              </span>
                            </td>
                          </tr>
                        )}
                      </tbody>
                    </table>
                  </div>
                )}
              </div>

              {canShowDetalhesPrecificacao && (
                <div className="p-2">
                  <div className="font-bold flex flex-row gap-2">
                    <div>Custo do Kit + Custos Adicionais</div>
                    <Button
                      type="button"
                      className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                      onClick={(e: any) => {
                        e.stopPropagation();
                        handleSweetAlert({
                          icon: "info",
                          // title: "Cálculo Markup",
                          showDenyButton: false,
                          confirmButtonText: "Ok",
                          html: `
                            <div class="flex flex-col gap-2">
                              <div>
                                <div class="font-bold">
                                  Fórmula do Custo do Kit + Custos Adicionais
                                </div>
                                <div class="italic text-meta-1">
                                  Custo do Kit + (Total Custos Sobre Produto + Total Custos Sobre Serviço + Total Custos Extras)
                                </div>
                                <div class="italic">
                                  ${formatarValor(valor_kit)} + (${formatarValor(valor_produto)} + ${formatarValor(valor_servico)} + ${formatarValor(valor_extra)})
                                </div>
                              </div>
                            </div>
                          `,
                        });
                      }}
                    >
                      <Info />
                    </Button>
                  </div>
                  <div>{formatarValor(valor_total_produto_servico_extra)}</div>
                </div>
              )}
            </div>

            {canShowDetalhesPrecificacao && (
              <div className="flex-1 flex flex-col items-center p-2 border-2 border-meta-3/70 bg-meta-3/10 rounded relative">
                <div className="font-bold max-sm:text-sm text-lg">TOTAL</div>

                <table className="text-end max-sm:text-sm">
                  <tbody>
                    <tr>
                      <td className="px-2 py-1 border-t border-meta-3/70">
                        <div>% Sobre Total</div>
                        <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                          {`${formatarNumero(porcentagem_total * 100)}%`}
                        </span>
                      </td>
                      <td className="border-t border-meta-3/70">
                        <Button
                          type="button"
                          className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                          onClick={(e: any) => {
                            e.stopPropagation();
                            handleSweetAlert({
                              icon: "info",
                              // title: "Cálculo Markup",
                              showDenyButton: false,
                              confirmButtonText: "Ok",
                              html: `
                                <div class="flex flex-col gap-2">
                                  <div>
                                    <div class="font-bold">
                                      Fórmula do Valor Sobre o Total
                                    </div>
                                    <div class="italic text-meta-1">
                                      (Custo do Kit  + Custos Adicionais) * % Sobre Total = Valor sobre o Total
                                    </div>
                                    <div class="italic">
                                      ${formatarValor(
                                        valor_total_produto_servico_extra
                                      )} * ${formatarNumero(
                                        porcentagem_total * 100
                                      )}% = ${formatarValor(
                                        valor_total_incluindo_porcentagem
                                      )}
                                    </div>
                                  </div>
                                </div>
                              `,
                            });
                          }}
                        >
                          <Info />
                        </Button>
                      </td>
                      <td className="px-2 py-1 border-t border-meta-3/70">
                        <div>Valor sobre Total</div>
                        <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                          {formatarValor(valor_total_incluindo_porcentagem)}
                        </span>
                      </td>
                    </tr>
                    {/* <tr>
                  <td className="px-2 py-1">
                    <div>% Lucro</div>
                    <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                      {formatarNumero(lucro_total * 100)}%
                    </span>
                  </td>
                </tr>
                <tr>
                  <td className="px-2 py-1">
                    <div>% Encargos</div>
                    <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                      {formatarNumero(encargos_total * 100)}%
                    </span>
                  </td>
                </tr> */}
                    <tr>
                      <td className="px-2 py-1 border-b border-meta-3/70">
                        <div>% Markup</div>
                        <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                          {formatarNumero(
                            porcentagem_lucro_encargos_total * 100
                          )}
                          %
                        </span>
                      </td>
                      <td className="border-b border-meta-3/70">
                        <Button
                          type="button"
                          className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                          onClick={(e: any) => {
                            e.stopPropagation();
                            handleSweetAlert({
                              icon: "info",
                              // title: "Cálculo Markup",
                              showDenyButton: false,
                              confirmButtonText: "Ok",
                              html: `
                                <div class="flex flex-col gap-2">
                                  <div>
                                    <div class="font-bold">
                                      Fórmula do % Markup
                                    </div>
                                    <div class="italic text-meta-1">
                                      (100% - %Lucro - %Encargos) = % Markup
                                    </div>
                                    <div class="italic">
                                      (100% - ${formatarNumero(lucro_total * 100)}% - ${formatarNumero(
                                        encargos_total * 100
                                      )}%) = ${formatarNumero(porcentagem_lucro_encargos_total * 100)}%
                                    </div>
                                  </div>
                                </div>
                              `,
                            });
                          }}
                        >
                          <Info />
                        </Button>
                      </td>
                      <td className="px-2 py-1 border-b border-meta-3/70">
                        <div>Valor Markup</div>
                        <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                          {formatarValor(markup_total)}
                        </span>
                      </td>
                      <td>
                        <Button
                          type="button"
                          className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                          onClick={(e: any) => {
                            e.stopPropagation();
                            handleSweetAlert({
                              icon: "info",
                              // title: "Cálculo Markup",
                              showDenyButton: false,
                              confirmButtonText: "Ok",
                              html: `
                                <div class="flex flex-col gap-2">
                                  <div>
                                    <div class="font-bold">
                                      Fórmula do Valor do Markup
                                    </div>
                                    <div class="italic text-meta-1">
                                      ((Custo do Kit + Custos Adicionais) + Valor Sobre sobre Total) / % Markup) -
                                      ((Custo do Kit + Custos Adicionais) + Valor Sobre sobre Total) = Valor do Markup
                                    </div>
                                    <div class="italic">
                                      (${formatarValor(valor_total_produto_servico_extra)} + ${formatarValor(valor_total_incluindo_porcentagem)}) / ${formatarNumero(porcentagem_lucro_encargos_total * 100)}%) -
                                      (${formatarValor(valor_total_produto_servico_extra)} + ${formatarValor(valor_total_incluindo_porcentagem)}) = ${formatarValor(markup_total)}
                                    </div>
                                  </div>
                                </div>
                              `,
                            });
                          }}
                        >
                          <Info />
                        </Button>
                      </td>
                    </tr>
                    <tr>
                      <td className="px-2 py-1">
                        <div>Total Custos</div>
                        <div>Sobre Total</div>
                      </td>
                      <td></td>
                      <td className="px-2 py-1">
                        <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                          {formatarValor(valor_total)}
                        </span>
                      </td>
                    </tr>
                    {usuario.visualiza_custo_kit_usuario == "1" && (
                      <tr>
                        <td className="px-2 py-1 font-bold">
                          <div>Custo do Kit + Total</div>
                          <div>Custos Sobre Total</div>
                        </td>
                        <td></td>
                        <td className="px-2 py-1">
                          <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal">
                            {formatarValor(valor_kit + valor_total)}
                          </span>
                        </td>
                      </tr>
                    )}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        )}
        {usuario?.visualiza_valor_base_proposta_usuario == "1" && (
          <div className="p-2 bg-success max-sm:text-sm text-white rounded">
            <div className="font-bold">
              PREÇO DE VENDA APLICANDO A POLÍTICA DE PREÇO
            </div>
            <div className="flex flex-col items-center">
              {/* {formatarValor(
                +valorFinalPropostaForm || preco_venda_final_sem_comissao
              )} */}
              {formatarValor(preco_venda_final_sem_comissao)}
            </div>
          </div>
        )}
      </div>
      <div>
        {(
          <div className="flex-1 flex flex-col items-center p-2 border-2 border-meta-8/70 bg-meta-8/10 rounded">
            <div className="font-bold max-sm:text-sm text-lg">COMISSÕES</div>
            <table className="text-end max-sm:text-sm">
              <tbody>
                {/* 
                  Lógica de exibição das comissões com blur:
                  - Todas as comissões são sempre exibidas
                  - Se o usuário tem permissão geral (visualiza_comissoes_proposta_usuario == "1"), mostra todos os valores sem blur
                  - Se não tem permissão geral, mas tem cargo específico, mostra os valores do seu cargo sem blur e os outros com blur:
                    * Cargo "2" (Vendedor): vê comissão de vendedor sem blur, demais com blur
                    * Cargo "3" (Gerente): vê comissão de gerente sem blur, demais com blur
                    * Cargo "5" (Supervisor): vê comissão de supervisor sem blur, demais com blur
                    * Cargo "6" (Pré-vendedor): vê comissão de pré-vendedor sem blur, demais com blur
                  - Comissão de indicação sempre fica com blur se não tiver permissão geral (não há cargo específico)
                  - Botões de informação ficam desabilitados para valores com blur
                */}
                <>
                  <tr>
                    <td className="px-2 py-1 border-t border-meta-8/70">
                      <div>% Vendedor</div>
                      {shouldBlurValue("2") ? (
                        <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal blur-sm select-none">
                          {/* {`${formatarNumero(
                            getComissaoValue(
                              "vendedor",
                              c_vendedor * 100,
                              (+valorFinalPropostaForm ||
                                preco_venda_final_sem_comissao) * c_vendedor
                            ).percentual
                          )}%`} */}
                          {`${formatarNumero(c_vendedor * 100)}%`}
                        </span>
                      ) : (
                        <Input
                          name="c_vendedor"
                          formulario={formResultado}
                          // type="number"
                          mascara="numero"
                          step="0.01"
                          className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal w-20 text-center flex-none"
                          containerClassName="w-full items-center justify-end"
                          defaultValue={String(c_vendedor * 100)}
                          onBlur={(e: any) => {
                            setParametrosPrecificacao({
                              c_vendedor_ajuste:
                                +desformatarNumeros(e?.target?.value) || 0,
                            });
                          }}
                          disabled={!setParametrosPrecificacao}
                          // value={getValorTemporario(
                          //   "vendedor",
                          //   "percentual",
                          //   getComissaoValue(
                          //     "vendedor",
                          //     c_vendedor * 100,
                          //     (+valorFinalPropostaForm ||
                          //       preco_venda_final_sem_comissao) * c_vendedor
                          //   ).percentual
                          // )}
                          // onChange={(e) =>
                          //   handleTemporaryPercentualChange(
                          //     "vendedor",
                          //     e.target.value
                          //   )
                          // }
                          // onBlur={() => handlePercentualBlur("vendedor")}
                        />
                      )}
                    </td>
                    <td className="px-2 py-1 border-t border-meta-8/70">
                      <div>Valor Comissão Vendedor</div>
                      <span
                        className={`bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal ${shouldBlurValue("2") ? "blur-sm select-none" : ""}`}
                      >
                        {/* {formatarValor(
                          getComissaoValue(
                            "vendedor",
                            c_vendedor * 100,
                            (+valorFinalPropostaForm ||
                              preco_venda_final_sem_comissao) * c_vendedor
                          ).valor
                        )} */}
                        {formatarValor(baseComissao * c_vendedor)}
                      </span>
                    </td>
                    <td>
                      <Button
                        type="button"
                        className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                        onClick={(e: any) => {
                          e.stopPropagation();
                          // const comissaoAtual = getComissaoValue(
                          //   "vendedor",
                          //   c_vendedor * 100,
                          //   (+valorFinalPropostaForm ||
                          //     preco_venda_final_sem_comissao) * c_vendedor
                          // );
                          handleSweetAlert({
                            icon: "info",
                            // title: "Cálculo Markup",
                            showDenyButton: false,
                            confirmButtonText: "Ok",
                            html: `
                                <div class="flex flex-col gap-2">
                                  <div>
                                    <div class="font-bold">
                                      Fórmula Comissão Vendedor
                                    </div>
                                    <div class="italic text-meta-1">
                                      % Comissao Vendedor * Preço de Venda = Valor Comissão Vendedor
                                    </div>
                                    <div class="italic">
                                      ${formatarNumero(
                                        c_vendedor * 100
                                      )}% * ${formatarValor(
                                        baseComissao
                                      )} = ${formatarValor(baseComissao * c_vendedor)}
                                    </div>
                                  </div>
                                </div>
                              `,
                          });
                        }}
                      >
                        <Info />
                      </Button>
                    </td>
                  </tr>
                  {comissao_preVendedor_loja == "1" && (
                    <tr>
                      <td className="px-2 py-1">
                        <div>% Pre-Vendedor</div>
                        {shouldBlurValue("3") ? (
                          <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal blur-sm select-none">
                            {/* {`${formatarNumero(
                              getComissaoValue(
                                "preVendedor",
                                c_pre_vendedor_final * 100,
                                (+valorFinalPropostaForm ||
                                  preco_venda_final_sem_comissao) *
                                  c_pre_vendedor_final
                              ).percentual
                            )}%`} */}
                            {`${formatarNumero(c_pre_vendedor * 100)}%`}
                          </span>
                        ) : (
                          <Input
                            name="c_pre_vendedor"
                            formulario={formResultado}
                            // type="number"
                            mascara="numero"
                            step="0.01"
                            className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal w-20 text-center justify-normal flex-none"
                            containerClassName="w-full items-center justify-end"
                            defaultValue={String(c_vendedor * 100)}
                            onBlur={(e: any) =>
                              setParametrosPrecificacao({
                                c_pre_vendedor_ajuste:
                                  +desformatarNumeros(e?.target?.value) || 0,
                              })
                            }
                            disabled={!setParametrosPrecificacao}
                            // value={getValorTemporario(
                            //   "preVendedor",
                            //   "percentual",
                            //   getComissaoValue(
                            //     "preVendedor",
                            //     c_pre_vendedor_final * 100,
                            //     (+valorFinalPropostaForm ||
                            //       preco_venda_final_sem_comissao) *
                            //       c_pre_vendedor_final
                            //   ).percentual
                            // )}
                            // onChange={(e) =>
                            //   handleTemporaryPercentualChange(
                            //     "preVendedor",
                            //     e.target.value
                            //   )
                            // }
                            // onBlur={() => handlePercentualBlur("preVendedor")}
                          />
                        )}
                      </td>
                      <td className="px-2 py-1">
                        <div>Valor Comissão Pré-Vendedor</div>
                        <span
                          className={`bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal ${shouldBlurValue("3") ? "blur-sm select-none" : ""}`}
                        >
                          {/* {formatarValor(
                            getComissaoValue(
                              "preVendedor",
                              c_pre_vendedor_final * 100,
                              (+valorFinalPropostaForm ||
                                preco_venda_final_sem_comissao) *
                                c_pre_vendedor_final
                            ).valor
                          )} */}
                          {formatarValor(baseComissao * c_pre_vendedor)}
                        </span>
                      </td>
                      <td>
                        <Button
                          type="button"
                          className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                          disabled={shouldBlurValue("3")}
                          onClick={(e: any) => {
                            if (shouldBlurValue("3")) return;
                            e.stopPropagation();
                            // const comissaoAtual = getComissaoValue(
                            //   "preVendedor",
                            //   c_pre_vendedor * 100,
                            //   (+valorFinalPropostaForm ||
                            //     preco_venda_final_sem_comissao) * c_pre_vendedor
                            // );
                            handleSweetAlert({
                              icon: "info",
                              // title: "Cálculo Markup",
                              showDenyButton: false,
                              confirmButtonText: "Ok",
                              html: `
                                  <div class="flex flex-col gap-2">
                                    <div>
                                      <div class="font-bold">
                                        Fórmula Comissão Pré-Vendedor
                                      </div>
                                      <div class="italic text-meta-1">
                                        % Comissao Pré-Vendedor * Preço de Venda = Valor Comissão Pré-Vendedor
                                      </div>
                                      <div class="italic">
                                        ${formatarNumero(
                                          c_pre_vendedor * 100
                                        )}% * ${formatarValor(
                                          baseComissao
                                        )} = ${formatarValor(baseComissao * c_pre_vendedor)}
                                      </div>
                                    </div>
                                  </div>
                                `,
                            });
                          }}
                        >
                          <Info />
                        </Button>
                      </td>
                    </tr>
                  )}
                  {comissao_gerente_loja == "1" && (
                    <tr>
                      <td className="px-2 py-1">
                        <div>% Gerente</div>
                        {shouldBlurValue("4") ? (
                          <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal blur-sm select-none">
                            {/* {`${formatarNumero(
                              getComissaoValue(
                                "gerente",
                                c_gerente_final * 100,
                                (+valorFinalPropostaForm ||
                                  preco_venda_final_sem_comissao) *
                                  c_gerente_final
                              ).percentual
                            )}%`} */}
                            {`${formatarNumero(c_gerente * 100)}%`}
                          </span>
                        ) : (
                          <Input
                            name="c_gerente"
                            formulario={formResultado}
                            // type="number"
                            mascara="numero"
                            step="0.01"
                            className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal w-20 text-center flex-none"
                            containerClassName="w-full items-center justify-end"
                            defaultValue={String(c_vendedor * 100)}
                            onBlur={(e: any) =>
                              setParametrosPrecificacao({
                                c_gerente_ajuste:
                                  +desformatarNumeros(e?.target?.value) || 0,
                              })
                            }
                            disabled={!setParametrosPrecificacao}
                            // value={getValorTemporario(
                            //   "gerente",
                            //   "percentual",
                            //   getComissaoValue(
                            //     "gerente",
                            //     c_gerente_final * 100,
                            //     (+valorFinalPropostaForm ||
                            //       preco_venda_final_sem_comissao) *
                            //       c_gerente_final
                            //   ).percentual
                            // )}
                            // onChange={(e) =>
                            //   handleTemporaryPercentualChange(
                            //     "gerente",
                            //     e.target.value
                            //   )
                            // }
                            // onBlur={() => handlePercentualBlur("gerente")}
                          />
                        )}
                      </td>
                      <td className="px-2 py-1">
                        <div>Valor Comissão Gerente</div>
                        <span
                          className={`bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal ${shouldBlurValue("4") ? "blur-sm select-none" : ""}`}
                        >
                          {/* {formatarValor(
                            getComissaoValue(
                              "gerente",
                              c_gerente_final * 100,
                              (+valorFinalPropostaForm ||
                                preco_venda_final_sem_comissao) *
                                c_gerente_final
                            ).valor
                          )} */}
                          {formatarValor(baseComissao * c_gerente)}
                        </span>
                      </td>
                      <td>
                        <Button
                          type="button"
                          className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                          disabled={shouldBlurValue("4")}
                          onClick={(e: any) => {
                            if (shouldBlurValue("4")) return;
                            e.stopPropagation();
                            // const comissaoAtual = getComissaoValue(
                            //   "gerente",
                            //   c_gerente_final * 100,
                            //   (+valorFinalPropostaForm ||
                            //     preco_venda_final_sem_comissao) *
                            //     c_gerente_final
                            // );
                            handleSweetAlert({
                              icon: "info",
                              // title: "Cálculo Markup",
                              showDenyButton: false,
                              confirmButtonText: "Ok",
                              html: `
                                  <div class="flex flex-col gap-2">
                                    <div>
                                      <div class="font-bold">
                                        Fórmula Comissão Gerente
                                      </div>
                                      <div class="italic text-meta-1">
                                        % Comissao Gerente * Preço de Venda = Valor Comissão Gerente
                                      </div>
                                      <div class="italic">
                                        ${formatarNumero(
                                          c_gerente * 100
                                        )}% * ${formatarValor(
                                          baseComissao
                                        )} = ${formatarValor(baseComissao * c_gerente)}
                                      </div>
                                    </div>
                                  </div>
                                `,
                            });
                          }}
                        >
                          <Info />
                        </Button>
                      </td>
                    </tr>
                  )}
                  {comissao_supervisor_loja == "1" && (
                    <tr>
                      <td className="px-2 py-1">
                        <div>% Supervisor</div>
                        {shouldBlurValue("7") ? (
                          <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal blur-sm select-none">
                            {/* {`${formatarNumero(
                              getComissaoValue(
                                "supervisor",
                                c_supervisor_final * 100,
                                (+valorFinalPropostaForm ||
                                  preco_venda_final_sem_comissao) *
                                  c_supervisor_final
                              ).percentual
                            )}%`} */}
                            {`${formatarNumero(c_supervisor * 100)}%`}
                          </span>
                        ) : (
                          <Input
                            name="c_supervisor"
                            formulario={formResultado}
                            // type="number"
                            mascara="numero"
                            step="0.01"
                            className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal w-20 text-center justify-normal flex-none"
                            containerClassName="w-full items-center justify-end"
                            defaultValue={String(c_vendedor * 100)}
                            onBlur={(e: any) =>
                              setParametrosPrecificacao({
                                c_supervisor_ajuste:
                                  +desformatarNumeros(e?.target?.value) || 0,
                              })
                            }
                            disabled={!setParametrosPrecificacao}
                            // value={getValorTemporario(
                            //   "supervisor",
                            //   "percentual",
                            //   getComissaoValue(
                            //     "supervisor",
                            //     c_supervisor_final * 100,
                            //     (+valorFinalPropostaForm ||
                            //       preco_venda_final_sem_comissao) *
                            //       c_supervisor_final
                            //   ).percentual
                            // )}
                            // onChange={(e) =>
                            //   handleTemporaryPercentualChange(
                            //     "supervisor",
                            //     e.target.value
                            //   )
                            // }
                            // onBlur={() => handlePercentualBlur("supervisor")}
                          />
                        )}
                      </td>
                      <td className="px-2 py-1">
                        <div>Valor Comissão Supervisor</div>
                        <span
                          className={`bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal ${shouldBlurValue("7") ? "blur-sm select-none" : ""}`}
                        >
                          {/* {formatarValor(
                            getComissaoValue(
                              "supervisor",
                              c_supervisor_final * 100,
                              (+valorFinalPropostaForm ||
                                preco_venda_final_sem_comissao) *
                                c_supervisor_final
                            ).valor
                          )} */}
                          {formatarValor(baseComissao * c_supervisor)}
                        </span>
                      </td>
                      <td>
                        <Button
                          type="button"
                          className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                          disabled={shouldBlurValue("7")}
                          onClick={(e: any) => {
                            if (shouldBlurValue("7")) return;
                            e.stopPropagation();
                            // const comissaoAtual = getComissaoValue(
                            //   "supervisor",
                            //   c_supervisor_final * 100,
                            //   (+valorFinalPropostaForm ||
                            //     preco_venda_final_sem_comissao) *
                            //     c_supervisor_final
                            // );
                            handleSweetAlert({
                              icon: "info",
                              // title: "Cálculo Markup",
                              showDenyButton: false,
                              confirmButtonText: "Ok",
                              html: `
                                  <div class="flex flex-col gap-2">
                                    <div>
                                      <div class="font-bold">
                                        Fórmula Comissão Supervisor
                                      </div>
                                      <div class="italic text-meta-1">
                                        % Comissao Supervisor * Preço de Venda = Valor Comissão Supervisor
                                      </div>
                                      <div class="italic">
                                        ${formatarNumero(
                                          c_supervisor * 100
                                        )}% * ${formatarValor(
                                          baseComissao
                                        )} = ${formatarValor(baseComissao * c_supervisor)}
                                      </div>
                                    </div>
                                  </div>
                                `,
                            });
                          }}
                        >
                          <Info />
                        </Button>
                      </td>
                    </tr>
                  )}
                  {comissao_indicacao_loja == "1" && (
                    <>
                      <tr>
                        <td className="px-2 py-1">
                          <div>% Indicação</div>
                          {usuario?.visualiza_comissoes_proposta_usuario !=
                          "1" ? (
                            <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal blur-sm select-none">
                              {/* {`${formatarNumero(
                                getComissaoValue(
                                  "indicacao",
                                  c_indicacao_final * 100,
                                  (+valorFinalPropostaForm ||
                                    preco_venda_final_sem_comissao) *
                                    c_indicacao_final
                                ).percentual
                              )}%`} */}
                              {`${formatarNumero(c_indicacao * 100)}%`}
                            </span>
                          ) : (
                            <Input
                              name="c_indicacao"
                              formulario={formResultado}
                              // type="number"
                              mascara="numero"
                              step="0.01"
                              className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal w-20 text-center justify-normal flex-none"
                              containerClassName="w-full items-center justify-end"
                              defaultValue={String(c_vendedor * 100)}
                              onBlur={(e: any) =>
                                setParametrosPrecificacao({
                                  c_indicacao_ajuste:
                                    +desformatarNumeros(e?.target?.value) || 0,
                                })
                              }
                              disabled={!setParametrosPrecificacao}
                              // value={getValorTemporario(
                              //   "indicacao",
                              //   "percentual",
                              //   getComissaoValue(
                              //     "indicacao",
                              //     c_indicacao_final * 100,
                              //     (+valorFinalPropostaForm ||
                              //       preco_venda_final_sem_comissao) *
                              //       c_indicacao_final
                              //   ).percentual
                              // )}
                              // onChange={(e) =>
                              //   handleTemporaryPercentualChange(
                              //     "indicacao",
                              //     e.target.value
                              //   )
                              // }
                              // onBlur={() => handlePercentualBlur("indicacao")}
                            />
                          )}
                        </td>
                        <td className="px-2 py-1">
                          <div>Valor Comissão Indicação</div>
                          <span
                            className={`bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal ${usuario?.visualiza_comissoes_proposta_usuario != "1" ? "blur-sm select-none" : ""}`}
                          >
                            {/* {formatarValor(
                              getComissaoValue(
                                "indicacao",
                                c_indicacao_final * 100,
                                (+valorFinalPropostaForm ||
                                  preco_venda_final_sem_comissao) *
                                  c_indicacao_final
                              ).valor
                            )} */}
                            {formatarValor(baseComissao * c_indicacao)}
                          </span>
                        </td>
                        <td>
                          <Button
                            type="button"
                            className={` bg-primary flex flex-row gap-2 rounded-full p-0`}
                            disabled={
                              usuario?.visualiza_comissoes_proposta_usuario !=
                              "1"
                            }
                            onClick={(e: any) => {
                              if (
                                usuario?.visualiza_comissoes_proposta_usuario !=
                                "1"
                              )
                                return;
                              e.stopPropagation();
                              // const comissaoAtual = getComissaoValue(
                              //   "indicacao",
                              //   c_indicacao_final * 100,
                              //   (+valorFinalPropostaForm ||
                              //     preco_venda_final_sem_comissao) *
                              //     c_indicacao_final
                              // );
                              handleSweetAlert({
                                icon: "info",
                                // title: "Cálculo Markup",
                                showDenyButton: false,
                                confirmButtonText: "Ok",
                                html: `
                                    <div class="flex flex-col gap-2">
                                      <div>
                                        <div class="font-bold">
                                          Fórmula Comissão Indicação
                                        </div>
                                        <div class="italic text-meta-1">
                                          % Comissao Indicação * Preço de Venda = Valor Comissão Indicação
                                        </div>
                                        <div class="italic">
                                          ${formatarNumero(
                                            c_indicacao * 100
                                          )}% * ${formatarValor(
                                            baseComissao
                                          )} = ${formatarValor(baseComissao * c_indicacao)}
                                        </div>
                                      </div>
                                    </div>
                                  `,
                              });
                            }}
                          >
                            <Info />
                          </Button>
                        </td>
                      </tr>
                      <tr>
                        <td className="px-2 py-1"></td>
                        <td className="px-2 py-1">
                          <div>Valor Indicação Fixo</div>
                          <span
                            className={`bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal ${
                              usuario?.visualiza_comissoes_proposta_usuario !=
                              "1"
                                ? "blur-sm select-none"
                                : ""
                            }`}
                          >
                            {formatarValor(c_indicacao_bruto)}
                          </span>
                        </td>
                      </tr>
                    </>
                  )}
                </>
                <tr>
                  <td className="px-2 py-1 border-t border-meta-8/70">
                    <div>Total Custos Comissão</div>
                  </td>
                  <td className="px-2 py-1 border-t border-meta-8/70">
                    <span
                      className={`bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal ${
                        usuario?.visualiza_comissoes_proposta_usuario != "1"
                          ? "blur-sm select-none"
                          : ""
                      }`}
                    >
                      {/* {formatarValor(valor_comissao_calculado)} */}
                      {formatarValor(valor_comissao)}
                    </span>
                  </td>
                </tr>

                <tr className="  text-white p-2 bg-success rounded">
                  <td className="px-2 py-1 font-bold max-sm:text-sm">
                    <div>TOTAL MÍNIMO PARA A VENDA</div>
                  </td>
                  <td className="px-2 py-1 max-sm:text-sm">
                    {/* <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal"> */}
                    {formatarValor(valor_minimo_venda)}
                    {/* </span> */}
                  </td>
                </tr>
                <tr className="p-2 bg-success   text-white rounded">
                  <td className="px-2 py-1 font-bold max-sm:text-sm">
                    <div>VALOR DA COMISSÃO DO VENDEDOR</div>
                  </td>
                  <td
                    className={`px-2 py-1 max-sm:text-sm ${
                      shouldBlurValue("2") ? "blur-sm select-none" : ""
                    }`}
                  >
                    {/* {formatarValor(vendedorComissaoAtual.valor)} */}
                    {formatarValor(baseComissao * c_vendedor)}
                  </td>
                </tr>
                <tr className=" p-2 bg-success  text-white rounded-sm">
                  <td className="px-2 py-1 font-bold max-sm:text-sm">
                    <div>PREÇO DE VENDA APLICANDO A POLÍTICA DE COMISSÃO</div>
                  </td>
                  <td
                    className={`px-2 py-1 max-sm:text-sm ${
                      usuario?.visualiza_comissoes_proposta_usuario != "1"
                        ? "blur-sm select-none"
                        : ""
                    }`}
                  >
                    {/* <span className="bg-white/70 dark:bg-white/10 p-1 px-2 rounded font-normal"> */}
                    {/* {formatarValor(
                      valorPropostaPrecificacao + valor_comissao_calculado
                    )} */}
                    {formatarValor(preco_venda)}
                    {/* </span> */}
                  </td>
                </tr>
                {calcular_imposto_projeto_politica &&
                  calcular_imposto_projeto_politica !== "0" && (
                    <>
                      <tr className="p-2 bg-warning/20 rounded-sm">
                        <td className="px-2 py-1 font-bold max-sm:text-sm">
                          <div>% DO IMPOSTO</div>
                        </td>
                        <td className="px-2 py-1 max-sm:text-sm">
                          {formatarNumero(Number(porcentagem_imposto || 0))}%
                        </td>
                      </tr>
                      <tr className="p-2 bg-warning/20 rounded-sm">
                        <td className="px-2 py-1 font-bold max-sm:text-sm">
                          <div>VALOR DO IMPOSTO</div>
                        </td>
                        <td className="px-2 py-1 max-sm:text-sm">
                          {formatarValor(Number(valor_imposto || 0))}
                        </td>
                      </tr>
                      <tr className="p-2 bg-warning text-white rounded-sm">
                        <td className="px-2 py-1 font-bold max-sm:text-sm">
                          <div>VALOR TOTAL APÓS IMPOSTO</div>
                        </td>
                        <td className="px-2 py-1 max-sm:text-sm">
                          {formatarValor(
                            Number(
                              valor_total_apos_imposto || preco_venda || 0
                            )
                          )}
                        </td>
                      </tr>
                    </>
                  )}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {usuario?.visualiza_lucro_custos_usuario == "1" && (
        <div className=" bg-meta-5/10 border-meta-5/70 max-sm:text-sm rounded-md border-2">
          <QuadroDeCustos
            // form={form}
            valorProjeto={preco_venda}
            data={dadosCustos}
          />
        </div>
      )}
    </div>
  );
};

export default ResultadoPrecificacao;