import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputSelectComponent from "@/components/Forms/InputSelect";
import { useCamposPersonalizados } from "@/hooks/useCamposPersonalizados";
import { cadastrarPreApuracao } from "@/requests/CRUD/Apuracoes/cadastroPreApuracao";
import { addConclusaoPendencia } from "@/requests/CRUD/ConclusaoPendencia/conclusaoPendencia";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { formatarValor } from "@/utils";
import { Tooltip } from "@mui/material";
import { Info } from "lucide-react";
import { FieldValues } from "react-hook-form";
import { FaUserLock } from "react-icons/fa";

const PreApuracaoComissao = ({
  handleSubmitPreApuracao,
  setActiveStepAtual,
  setIsSubmitting,
  propostaAtiva,
  indicadores,
  usuariosResponsaveis,
  dadosCard,
  valorProposta,
  valorComissaoGerente,
  valorComissaoSupervisor,
  valorComissaoIndicador,
  activeStep,
  valorComissaoPreVendedor,
  valorComissaoVendedor,
  isSubmitting,
  getAprovalIndex,
  totalComissao,
  formPreApuracao,
  setOpenPreapuracao,
  setPreApuracaoValues,
  formPre,
  calcularComissao,
}: any) => {
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const { listarDadosKanban } = useKanbanContext();
  const { renderCamposPersonalizados, filterCamposPersonalizados } = useCamposPersonalizados(dadosCard.id_coleta_cliente, dadosCard.id)
  const onSubmitPreApuracao = (data: FieldValues) => {
    // Validação para impedir avanço se valor com comissões for maior que valor total da proposta
    const valorTotalComComissoes = totalComissao.toFixed(2);
    const valorTotalProposta = +propostaAtiva[0]?.valorTotal_proposta;
    const permiteComissaoMaior =
      dadosCard?.permite_comissao_maior_que_proposta_loja_coleta === "1" ||
      dadosCard?.permite_comissao_maior_que_proposta_loja_coleta === 1;


    filterCamposPersonalizados(data, 12);
    // if (valorTotalComComissoes > valorTotalProposta + 1 && !permiteComissaoMaior) {
    //   alert(
    //     "ATENÇÃO!! O Valor Total Com Comissões é maior que o Valor Total da Proposta, Não é permitido, favor acertar."
    //   );
    //   return;
    // }

    setIsSubmitting(true);
    const msgLog: any = [];

    if (
      data.cod_indicador_pre_apuracao !=
      propostaAtiva[0]?.cod_indicador_comissao_proposta
    ) {
      msgLog.push(
        `Indicador alterada de ${indicadores.find(
          (e: any) =>
            e.id_indicador ==
            propostaAtiva[0]?.cod_indicador_comissao_proposta,
        )?.nome_indicador || "Nulo"
        } para ${indicadores.find(
          (e: any) => e.id_indicador == data.cod_indicador_pre_apuracao,
        )?.nome_indicador || "Nulo"
        }`,
      );
    }
    if (
      data.comissao_indicador_pre_apuracao !=
      propostaAtiva[0]?.percentual_comissao_indicador_proposta
    ) {
      msgLog.push(
        `Comissão Indicador alterada de ${propostaAtiva[0]?.percentual_comissao_indicador_proposta || 0} para ${data.comissao_indicador_pre_apuracao || 0}`,
      );
    }
    if (
      data.cod_preVendedor_pre_apuracao !=
      propostaAtiva[0]?.cod_pre_vendedor_comissao_proposta
    ) {
      msgLog.push(
        `Pré-Vendedor alterada de ${usuariosResponsaveis.find(
          (e: any) =>
            e.id_usuario ==
            propostaAtiva[0]?.cod_pre_vendedor_comissao_proposta,
        )?.nome_usuario || "Nulo"
        } para ${usuariosResponsaveis.find(
          (e: any) => e.id_usuario == data.cod_preVendedor_pre_apuracao,
        )?.nome_usuario || "Nulo"
        }`,
      );
    }
    if (
      data.comissao_preVendedor_pre_apuracao !=
      propostaAtiva[0]?.percentual_comissao_pre_vendedor_proposta
    ) {
      msgLog.push(
        `Comissão Pré-Vendedor alterada de ${propostaAtiva[0]?.percentual_comissao_pre_vendedor_proposta || 0} para ${data.comissao_preVendedor_pre_apuracao || 0}`,
      );
    }
    if (
      data.cod_vendedor_pre_apuracao !=
      propostaAtiva[0]?.cod_vendedor_comissao_proposta
    ) {
      msgLog.push(
        `Vendedor alterado de ${usuariosResponsaveis.find(
          (e: any) =>
            e.id_usuario == propostaAtiva[0]?.cod_vendedor_comissao_proposta,
        )?.nome_usuario || "Nulo"
        } para ${usuariosResponsaveis.find(
          (e: any) => e.id_usuario == data.cod_vendedor_pre_apuracao,
        )?.nome_usuario || "Nulo"
        }`,
      );
    }
    if (
      data.comissao_vendedor_pre_apuracao !=
      propostaAtiva[0]?.percentual_comissao_vendedor_proposta
    ) {
      msgLog.push(
        `Comissão Vendedor alterada de ${propostaAtiva[0]?.percentual_comissao_vendedor_proposta || 0} para ${data.comissao_vendedor_pre_apuracao}`,
      );
    }
    if (
      data.cod_gerente_pre_apuracao !=
      propostaAtiva[0]?.cod_gerente_comissao_proposta
    ) {
      msgLog.push(
        `Gerente alterado de ${usuariosResponsaveis.find(
          (e: any) =>
            e.id_usuario == propostaAtiva[0]?.cod_gerente_comissao_proposta,
        )?.nome_usuario || "Nulo"
        } para ${usuariosResponsaveis.find(
          (e: any) => e.id_usuario == data.cod_gerente_pre_apuracao,
        )?.nome_usuario || "Nulo"
        }`,
      );
    }
    if (
      data.comissao_gerente_pre_apuracao !=
      propostaAtiva[0]?.percentual_comissao_gerente_proposta
    ) {
      msgLog.push(
        `Comissão Gerente alterada de ${propostaAtiva[0]?.percentual_comissao_gerente_proposta} para ${data.comissao_gerente_pre_apuracao}`,
      );
    }
    if (
      data.cod_supervisor_pre_apuracao !=
      propostaAtiva[0]?.cod_supervisor_comissao_proposta
    ) {
      msgLog.push(
        `Supervisor alterado de ${usuariosResponsaveis.find(
          (e: any) =>
            e.id_usuario ==
            propostaAtiva[0]?.cod_supervisor_comissao_proposta,
        )?.nome_usuario || "Nulo"
        } para ${usuariosResponsaveis.find(
          (e: any) => e.id_usuario == data.cod_supervisor_pre_apuracao,
        )?.nome_usuario || "Nulo"
        }`,
      );
    }
    if (
      data.comissao_supervisor_pre_apuracao !=
      propostaAtiva[0]?.percentual_comissao_supervisor_proposta
    ) {
      msgLog.push(
        `Comissão Supervisor alterada de ${propostaAtiva[0]?.percentual_comissao_supervisor_proposta} para ${data.comissao_supervisor_pre_apuracao}`,
      );
    }

    if (msgLog.length === 0) {
      msgLog.push("Nenhuma alteração foi feita.");
    }

    // Log especial para quando valor com comissões é maior que valor da proposta
    if (
      valorTotalComComissoes > valorTotalProposta + 1 &&
      permiteComissaoMaior
    ) {
      msgLog.push(
        `Valor total com comissões (${formatarValor(valorTotalComComissoes)}) é MAIOR que valor total da proposta (${formatarValor(valorTotalProposta)}). Esta operação foi permitida devido à configuração da loja. Responsável: ${session.nome_usuario || session.id_usuario}`,
      );
    }

    const logData = {
      tipo_apuracao_log: session.id_usuario,
      cod_apuracao_log: dadosCard?.id_apuracao_coleta,
      usuario_apuracao_log: session.id_usuario,
      modificacao_apuracao_log: msgLog.join("\n"),
      data_apuracao_log: new Date(),
    };
    data = {
      ...data,
      valor_propostaComissoes_apuracao:
        valorProposta +
        valorComissaoVendedor +
        valorComissaoPreVendedor +
        valorComissaoGerente +
        valorComissaoIndicador +
        +propostaAtiva[0]?.valor_comissao_indicador_proposta || 0,
      valor_proposta_apuracao: valorProposta,
      valor_indicador_pre_apuracao:
        +propostaAtiva[0]?.valor_comissao_indicador_proposta || 0,
      cod_negocio_pre_apuracao: dadosCard?.id_coleta_cliente,
      cod_usuario_pre_apuracao: session.id_usuario,
      idPreApuracao:
        getAprovalIndex(dadosCard?.pre_apuracao_comissao_loja) == activeStep
          ? dadosCard?.pre_apuracao_comissao_loja
          : dadosCard?.pre_apuracao_comissao_loja_coleta,
      datahora_pre_apuracao: new Date(),
      status_apuracao: 0,
      logData: logData,
      id_card: dadosCard?.id,
    };
    setPreApuracaoValues(data);
    cadastrarPreApuracao(data)
      .then(() => {
        addConclusaoPendencia({
          id_coleta: dadosCard?.id_coleta_cliente,
          id_etapa: dadosCard?.id_lista,
          id_pendencia: "12",
        }).then((res) => { });

        // listarDadosKanban();
        setOpenPreapuracao(false);
        setActiveStepAtual(activeStep + 1);
      })
      .finally(() => setIsSubmitting(false));
  };
  return (
    <form
      onSubmit={handleSubmitPreApuracao(onSubmitPreApuracao)}
      key={formPreApuracao.key}
    >
      <div className="relative">
        <div className="grid grid-cols-2 gap-2">
          <div className="text-center mb-5 bg-white rounded-lg p-5">
            <div className="font-bold text-lg ">Pré Apuração de Comissão</div>
            <div>{`Cliente: ${dadosCard?.nome_cliente}`}</div>
          </div>
          <div className="rounded-lg mb-5 bg-white p-5">
            <div className="font-bold text-md ">
              Valor Total Sem Comissões:{" "}
              <span className="text-success text-md">
                {formatarValor(valorProposta)}
              </span>
            </div>
            <div className="font-bold text-md ">
              Valor Total Proposta : {""}
              <span className="text-success text-md">
                {formatarValor(+propostaAtiva[0]?.valorTotal_proposta)}
              </span>
            </div>
            <div className="flex font-bold text-md  items-center">
              Valor Total Com Comissões:{" "}
              <span
                className={`${totalComissao.toFixed(2) >
                  +propostaAtiva[0]?.valorTotal_proposta + 1
                  ? dadosCard?.permite_comissao_maior_que_proposta_loja_coleta ===
                    "1" ||
                    dadosCard?.permite_comissao_maior_que_proposta_loja_coleta ===
                    1
                    ? "text-warning"
                    : "text-danger"
                  : +totalComissao.toFixed(2) <
                    +propostaAtiva[0]?.valorTotal_proposta
                    ? "text-secondaryMenu"
                    : "text-success"
                  } text-md`}
              >
                {formatarValor(
                  valorProposta +
                  valorComissaoGerente +
                  valorComissaoIndicador +
                  valorComissaoPreVendedor +
                  valorComissaoVendedor +
                  valorComissaoSupervisor +
                  +propostaAtiva[0]?.valor_comissao_indicador_proposta || 0,
                )}
              </span>
              <Tooltip
                title={
                  totalComissao.toFixed(2) >
                    +propostaAtiva[0]?.valorTotal_proposta + 1
                    ? dadosCard?.permite_comissao_maior_que_proposta_loja_coleta ===
                      "1" ||
                      dadosCard?.permite_comissao_maior_que_proposta_loja_coleta ===
                      1
                      ? "Valor Com Comissões é maior que Valor Total da Proposta. Esta configuração está permitida pela loja."
                      : "O Valor Total Com Comissões é maior que o Valor Total da Proposta, Não é permitido, favor acertar."
                    : ""
                }
                arrow={true}
              >
                <div>
                  {totalComissao.toFixed(2) >
                    +propostaAtiva[0]?.valorTotal_proposta && (
                      <Info
                        size={18}
                        className={`${dadosCard?.permite_comissao_maior_que_proposta_loja_coleta ===
                          "1" ||
                          dadosCard?.permite_comissao_maior_que_proposta_loja_coleta ===
                          1
                          ? "text-warning"
                          : "text-danger"
                          } ml-2`}
                      />
                    )}
                </div>
              </Tooltip>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 bg-white rounded-lg p-5 w-full">
          {/* Resumo das Comissões */}
          <div className="flex flex-col border border-primary rounded-lg p-4">
            <div className="font-bold text-center mb-4 text-lg">
              Resumo das Comissões
            </div>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span>Vendedor:</span>
                <span className="font-semibold text-primary">
                  {formatarValor(valorComissaoVendedor) || "R$ 0,00"}
                </span>
              </div>
              {dadosCard?.comissao_preVendedor_loja_coleta == 1 &&
                dadosCard?.responsaveis["Pré-Vendedor"] && (
                  <div className="flex justify-between">
                    <span>Pré-Vendedor:</span>
                    <span className="font-semibold text-primary">
                      {formatarValor(valorComissaoPreVendedor) || "R$ 0,00"}
                    </span>
                  </div>
                )}
              {dadosCard?.comissao_gerente_loja_coleta == 1 &&
                dadosCard?.responsaveis["Gerente"] && (
                  <div className="flex justify-between">
                    <span>Gerente:</span>
                    <span className="font-semibold text-primary">
                      {formatarValor(valorComissaoGerente) || "R$ 0,00"}
                    </span>
                  </div>
                )}
              {dadosCard?.comissao_supervisor_loja_coleta == 1 &&
                dadosCard?.responsaveis["Supervisor"] && (
                  <div className="flex justify-between">
                    <span>Supervisor:</span>
                    <span className="font-semibold text-primary">
                      {formatarValor(valorComissaoSupervisor) || "R$ 0,00"}
                    </span>
                  </div>
                )}
              {dadosCard?.comissao_indicacao_loja_coleta == 1 &&
                dadosCard?.codIndicador_coleta && (
                  <div className="flex justify-between">
                    <span>Indicador (%):</span>
                    <span className="font-semibold text-primary">
                      {formatarValor(valorComissaoIndicador) || "R$ 0,00"}
                    </span>
                  </div>
                )}
              {dadosCard?.comissao_indicacao_loja_coleta == 1 &&
                dadosCard?.codIndicador_coleta && (
                  <div className="flex justify-between">
                    <span>Indicador (Fixo):</span>
                    <span className="font-semibold text-primary">
                      {formatarValor(
                        propostaAtiva[0]?.valor_comissao_indicador_proposta,
                      ) || "R$ 0,00"}
                    </span>
                  </div>
                )}
              <hr className="border-gray-300" />
              <div className="flex justify-between font-bold text-lg">
                <span>Total Comissões:</span>
                <span className="text-success">
                  {formatarValor(
                    valorComissaoVendedor +
                    valorComissaoPreVendedor +
                    valorComissaoGerente +
                    valorComissaoSupervisor +
                    valorComissaoIndicador +
                    (+propostaAtiva[0]?.valor_comissao_indicador_proposta ||
                      0),
                  )}
                </span>
              </div>
              <div className="flex justify-between text-sm text-gray-600">
                <span>Valor Sem Comissões:</span>
                <span>{formatarValor(valorProposta)}</span>
              </div>
              <div className="flex justify-between font-bold text-lg border-t pt-2">
                <span>Total Final:</span>
                <span
                  className={`${totalComissao.toFixed(2) >
                    +propostaAtiva[0]?.valorTotal_proposta
                    ? dadosCard?.permite_comissao_maior_que_proposta_loja_coleta ===
                      "1" ||
                      dadosCard?.permite_comissao_maior_que_proposta_loja_coleta ===
                      1
                      ? "text-warning"
                      : "text-danger"
                    : "text-success"
                    }`}
                >
                  {formatarValor(
                    valorProposta +
                    valorComissaoVendedor +
                    valorComissaoPreVendedor +
                    valorComissaoGerente +
                    valorComissaoSupervisor +
                    valorComissaoIndicador +
                    (+propostaAtiva[0]?.valor_comissao_indicador_proposta ||
                      0),
                  )}
                </span>
              </div>
            </div>
          </div>

          {/* Vendedor */}
          <div className="flex flex-col border border-primary rounded-lg p-4">
            <div className="font-bold text-center mb-2">Vendedor</div>
            <div className="flex">
              <div className="w-1/2 pr-2">
                <Input
                  formulario={formPre}
                  name="comissao_vendedor_pre_apuracao"
                  label="Comissão Vendedor"
                  prefix={"% "}
                  defaultValue={
                    propostaAtiva[0]?.percentual_comissao_vendedor_proposta
                  }
                  onChange={calcularComissao}
                  mascara="numero"
                  required
                  error="Preencha a comissão!"
                />
              </div>
              <div className="w-1/2 pl-2">
                <InputSelectComponent
                  formulario={formPre}
                  name="cod_vendedor_pre_apuracao"
                  label="Vendedor"
                  options={usuariosResponsaveis
                    ?.filter((user: any) =>
                      propostaAtiva[0]?.cod_vendedor_comissao_proposta == null
                        ? user.comissionado == "1"
                        : user.status_usuario == "1",
                    )
                    ?.map((user: any) => ({
                      label: user.nome_usuario,
                      value: user.id_usuario,
                    }))}
                  defaultValue={
                    propostaAtiva[0]?.cod_vendedor_comissao_proposta
                  }
                  required
                  error="Selecione o vendedor!"
                />
              </div>
            </div>
            <div className="text-center mt-2">
              Valor: {formatarValor(valorComissaoVendedor) || "R$ 0,00"}
            </div>
          </div>

          {/* Demais comissões em grid 2x2 */}
          {dadosCard?.comissao_preVendedor_loja_coleta == 1 &&
            (usuariosResponsaveis?.filter(
              (user: any) => user.cargo_perfil == "3",
            ).length > 0 && dadosCard?.responsaveis["Pré-Vendedor"] ? (
              <div className="flex flex-col border border-primary rounded-lg p-4">
                <div className="font-bold text-center mb-2">Pré-Vendedor</div>
                <div className="flex">
                  <div className="w-1/2 pr-2">
                    <Input
                      formulario={formPre}
                      name="comissao_preVendedor_pre_apuracao"
                      label="Comissão Pré-Vendedor"
                      prefix={"% "}
                      labelSize={"text-sm"}
                      defaultValue={
                        propostaAtiva[0]
                          ?.percentual_comissao_pre_vendedor_proposta
                      }
                      onChange={calcularComissao}
                      mascara="numero"
                      required
                      error="Preencha a Comissão!"
                    />
                  </div>
                  <div className="w-1/2 pl-2">
                    <InputSelectComponent
                      formulario={formPre}
                      name="cod_preVendedor_pre_apuracao"
                      label="Pré Vendedor"
                      options={usuariosResponsaveis
                        ?.filter((user: any) => user.cargo_perfil == "3")
                        ?.map((user: any) => ({
                          label: user.nome_usuario,
                          value: user.id_usuario,
                        }))}
                      defaultValue={
                        propostaAtiva[0]?.cod_pre_vendedor_comissao_proposta ||
                        dadosCard?.responsaveis["Pré-Vendedor"]
                      }
                      required
                      error="Selecione o Pré Vendedor!"
                    />
                  </div>
                </div>
                <div className="text-center mt-2">
                  Valor: {formatarValor(valorComissaoPreVendedor) || "R$ 0,00"}
                </div>
              </div>
            ) : (
              <div className="relative flex flex-col border border-primary rounded-lg p-4 bg-white/50 backdrop-blur-sm">
                <div className="font-bold text-center mb-2">Pré-Vendedor</div>
                <div className="flex">
                  <div className="w-1/2 pr-2">
                    <Input
                      prefix={"% "}
                      label="Comissão Pré-Vendedor"
                      type="number"
                      disabled
                    />
                  </div>
                  <div className="w-1/2 pl-2">
                    <InputSelectComponent
                      label="Pré Vendedor"
                      options={usuariosResponsaveis
                        ?.filter((user: any) => user.cargo_perfil == "3")
                        ?.map((user: any) => ({
                          label: user.nome_usuario,
                          value: user.id_usuario,
                        }))}
                      disabled
                    />
                  </div>
                </div>
                <Tooltip
                  title="Pré-Vendedor não informado no negócio"
                  arrow={true}
                >
                  <div className="absolute inset-0 flex items-center justify-center bg-gray-300/80 backdrop-blur-xl rounded-lg">
                    <div className="absolute top-0 right-0 m-2">
                      <FaUserLock size={24} />
                    </div>
                  </div>
                </Tooltip>
              </div>
            ))}
          {dadosCard?.comissao_gerente_loja_coleta == 1 &&
            (usuariosResponsaveis?.filter(
              (user: any) =>
                user.cargo_perfil == "1" || user.cargo_perfil == "4",
            ).length > 0 && dadosCard?.responsaveis["Gerente"] ? (
              <div className="flex flex-col border border-primary rounded-lg p-4">
                <div className="font-bold text-center mb-2">Gerente</div>
                <div className="flex">
                  <div className="w-1/2 pr-2">
                    <Input
                      formulario={formPre}
                      name="comissao_gerente_pre_apuracao"
                      label="Comissão Gerente"
                      prefix={"% "}
                      defaultValue={
                        propostaAtiva[0]?.percentual_comissao_gerente_proposta
                      }
                      onChange={calcularComissao}
                      mascara="numero"
                      required
                      error="Preencha a Comissão!"
                    />
                  </div>
                  <div className="w-1/2 pl-2">
                    <InputSelectComponent
                      formulario={formPre}
                      name="cod_gerente_pre_apuracao"
                      label="Gerente"
                      options={usuariosResponsaveis
                        ?.filter(
                          (user: any) =>
                            user.cargo_perfil == "1" ||
                            user.cargo_perfil == "4",
                        )
                        ?.map((user: any) => ({
                          label: user.nome_usuario,
                          value: user.id_usuario,
                        }))}
                      defaultValue={
                        propostaAtiva[0]?.cod_gerente_comissao_proposta ||
                        dadosCard?.responsaveis["Gerente"]
                      }
                      required
                      error="Selecione o Gerente!"
                    />
                  </div>
                </div>
                <div className="text-center mt-2">
                  Valor: {formatarValor(valorComissaoGerente) || "R$ 0,00"}
                </div>
              </div>
            ) : (
              <div className="relative flex flex-col border border-primary rounded-lg p-4 bg-white/50 backdrop-blur-sm">
                <div className="font-bold text-center mb-2">Gerente</div>
                <div className="flex">
                  <div className="w-1/2 pr-2">
                    <Input
                      name="comissao_gerente_pre_apuracao"
                      label="Comissão Gerente"
                      prefix={"% "}
                      type="number"
                      disabled
                    />
                  </div>
                  <div className="w-1/2 pl-2">
                    <InputSelectComponent
                      name="cod_gerente_apuracao"
                      label="Gerente"
                      options={usuariosResponsaveis
                        ?.filter(
                          (user: any) =>
                            user.cargo_perfil == "1" ||
                            user.cargo_perfil == "4",
                        )
                        ?.map((user: any) => ({
                          label: user.nome_usuario,
                          value: user.id_usuario,
                        }))}
                      disabled
                    />
                  </div>
                </div>
                <Tooltip title="Gerente não informado no negócio" arrow={true}>
                  <div className="absolute inset-0 flex items-center justify-center bg-gray-300/80 backdrop-blur-xl rounded-lg">
                    <div className="absolute top-0 right-0 m-2 cursor-pointer">
                      <FaUserLock size={24} />
                    </div>
                  </div>
                </Tooltip>
              </div>
            ))}
          {dadosCard?.comissao_indicacao_loja_coleta == 1 &&
            (indicadores.length > 0 && dadosCard?.codIndicador_coleta ? (
              <div className="flex flex-col border border-primary rounded-lg p-4">
                <div className="font-bold text-center mb-2">Indicador</div>
                <div className="flex">
                  <div className="w-1/2 pr-2">
                    <Input
                      formulario={formPre}
                      name="comissao_indicador_pre_apuracao"
                      label="Comissão Indicação"
                      prefix={"% "}
                      defaultValue={
                        propostaAtiva[0]?.percentual_comissao_indicador_proposta
                      }
                      onChange={calcularComissao}
                      mascara="numero"
                      required
                      error="Preencha a Comissão!"
                    />
                  </div>
                  <div className="w-1/2 pl-2">
                    <InputSelectComponent
                      formulario={formPre}
                      name="cod_indicador_pre_apuracao"
                      label="Indicador"
                      options={indicadores.map((user: any) => ({
                        label: user.nome_indicador,
                        value: user.id_indicador,
                      }))}
                      defaultValue={
                        propostaAtiva[0]?.cod_indicador_comissao_proposta ||
                        dadosCard?.codIndicador_coleta
                      }
                      required
                      error="Selecione o Indicador!"
                    />
                  </div>
                </div>
                <div className="text-center mt-2">
                  Valor: {formatarValor(valorComissaoIndicador) || "R$ 0,00"} +{" "}
                  <Tooltip title="Comissão Fixa Indicador" arrow={true}>
                    <span className="text-primary cursor-help">
                      {formatarValor(
                        propostaAtiva[0]?.valor_comissao_indicador_proposta,
                      ) || "R$ 0,00"}{" "}
                    </span>
                  </Tooltip>
                  ={" "}
                  {formatarValor(
                    valorComissaoIndicador +
                    +propostaAtiva[0]?.valor_comissao_indicador_proposta,
                  ) || "R$ 0,00"}
                </div>
              </div>
            ) : (
              <div className="relative flex flex-col border border-primary rounded-lg p-4 bg-white/50 backdrop-blur-sm">
                <div className="font-bold text-center mb-2">Indicador</div>
                <div className="flex">
                  <div className="w-1/2 pr-2">
                    <Input
                      prefix={"% "}
                      label="Comissão Indicação"
                      type="number"
                      disabled
                    />
                  </div>
                  <div className="w-1/2 pl-2">
                    <InputSelectComponent
                      label="Indicador"
                      options={indicadores.map((user: any) => ({
                        label: user.nome_indicador,
                        value: user.id_indicador,
                      }))}
                      disabled
                    />
                  </div>
                </div>
                <Tooltip
                  title="Indicador não informado no negócio"
                  arrow={true}
                >
                  <div className="absolute inset-0 flex items-center justify-center bg-gray-300/80 backdrop-blur-xl rounded-lg">
                    <div className="absolute top-0 right-0 m-2">
                      <FaUserLock size={24} />
                    </div>
                  </div>
                </Tooltip>
              </div>
            ))}
          {dadosCard?.comissao_supervisor_loja_coleta == 1 ? (
            dadosCard?.responsaveis["Supervisor"] ? (
              <div className="flex flex-col border border-primary rounded-lg p-4">
                <div className="font-bold text-center mb-2">Supervisor</div>
                <div className="flex">
                  <div className="w-1/2 pr-2">
                    <Input
                      formulario={formPre}
                      name="comissao_supervisor_pre_apuracao"
                      label="Comissão Supervisor"
                      prefix={"% "}
                      defaultValue={
                        propostaAtiva[0]
                          ?.percentual_comissao_supervisor_proposta
                      }
                      onChange={calcularComissao}
                      mascara="numero"
                      required
                      error="Preencha a Comissão!"
                    />
                  </div>
                  <div className="w-1/2 pl-2">
                    <InputSelectComponent
                      formulario={formPre}
                      name="cod_supervisor_pre_apuracao"
                      label="Supervisor"
                      options={usuariosResponsaveis
                        ?.filter((user: any) => user.cargo_perfil == "7")
                        ?.map((user: any) => ({
                          label: user.nome_usuario,
                          value: user.id_usuario,
                        }))}
                      defaultValue={
                        propostaAtiva[0]?.cod_supervisor_comissao_proposta ||
                        dadosCard?.responsaveis["Supervisor"]
                      }
                      required
                      error="Selecione o Supervisor!"
                    />
                  </div>
                </div>
                <div className="text-center mt-2">
                  Valor: {formatarValor(valorComissaoSupervisor) || "R$ 0,00"}
                </div>
              </div>
            ) : (
              <div className="relative flex flex-col border border-primary rounded-lg p-4 bg-white/50 backdrop-blur-sm">
                <div className="font-bold text-center mb-2">Supervisor</div>
                <div className="flex">
                  <div className="w-1/2 pr-2">
                    <Input
                      prefix={"% "}
                      label="Comissão Supervisor"
                      type="number"
                      disabled
                    />
                  </div>
                  <div className="w-1/2 pl-2">
                    <InputSelectComponent
                      label="Supervisor"
                      options={usuariosResponsaveis
                        ?.filter((user: any) => user.cargo_perfil == "5")
                        ?.map((user: any) => ({
                          label: user.nome_usuario,
                          value: user.id_usuario,
                        }))}
                      disabled
                    />
                  </div>
                </div>
                <Tooltip
                  title="Supervisor não informado no negócio"
                  arrow={true}
                >
                  <div className="absolute inset-0 flex items-center justify-center bg-gray-300/80 backdrop-blur-xl rounded-lg">
                    <div className="absolute top-0 right-0 m-2">
                      <FaUserLock size={24} />
                    </div>
                  </div>
                </Tooltip>
              </div>
            )
          ) : null}
        </div>
        {renderCamposPersonalizados("5", formPre, "12", dadosCard)}

        <div className="sticky flex justify-end mt-2">
          {(() => {
            //validação comissão maior que proposta
            const valorTotalComComissoes = totalComissao.toFixed(2);
            const valorTotalProposta = +propostaAtiva[0]?.valorTotal_proposta;
            const permiteComissaoMaior =
              dadosCard?.permite_comissao_maior_que_proposta_loja_coleta ===
              "1" ||
              dadosCard?.permite_comissao_maior_que_proposta_loja_coleta === 1;
            const naoPermiteAvancar =
              valorTotalComComissoes > valorTotalProposta + 1 &&
              !permiteComissaoMaior;

            return (
              <Tooltip
                title={
                  naoPermiteAvancar
                    ? "ATENÇÃO!! O Valor Total Com Comissões é maior que o Valor Total da Proposta, Não é permitido, favor acertar."
                    : valorTotalComComissoes > valorTotalProposta + 1 &&
                      permiteComissaoMaior
                      ? "Salvando com valor de comissão maior que valor da proposta (permitido pela configuração da loja)"
                      : "Salvar pré-apuração de comissão"
                }
                arrow={true}
              >
                <span className="inline-block">
                  <Button
                    loading={isSubmitting}
                    type="submit"
                    disabled={naoPermiteAvancar}
                    className={
                      naoPermiteAvancar ? "opacity-50 cursor-not-allowed" : ""
                    }
                  >
                    Salvar
                  </Button>
                </span>
              </Tooltip>
            );
          })()}
        </div>
      </div>
    </form>
  );
};

export default PreApuracaoComissao;