import LoaderSun from "@/components/common/Loader/LoaderSun";
import Button from "@/components/Forms/Button";
import ModalComponente from "@/components/Modal/ModalComponente";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import FormFinanciador from "@/pages/Financiadores/FormFinanciador";
import { listaFinanciadorContrato } from "@/requests/CRM/Contrato/listaFinanciadorContrato";
import { listarContratosPorColeta } from "@/requests/CRM/Contrato/listarContrato";
import {
  adicionarFinanciador,
  cadastrarFinanciador,
} from "@/requests/CRUD/Cliente/cadastroCliente";
import { listarFinanciador } from "@/requests/CRUD/Cliente/listarClientes";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { CardFooter } from "@material-tailwind/react";
import clsx from "clsx";
import { motion } from "framer-motion";
import { Plus } from "lucide-react";
import { useEffect, useState } from "react";
import Swal from "sweetalert2";

const ContatoCard = ({
  dadosCard,
  dadosCliente,
  closeModal,
  blockEditCard = false,
  // propostas,
  // buscaPropostas,
}: any) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [financiadorSelected, setFinanciadorSelected] = useState<any>({});
  const [editFinanciadorData, setEditFinanciadorData] = useState<any>({});
  const [financiadores, setFinanciadores] = useState<any>([]);

  const [financiadorContrato, setFinanciadorContrato] = useState<any>([]);
  const [contratoAssinado, setContratoAssinado] = useState(false);
  const { listarDadosKanban } = useKanbanContext();
  // const [financiadoresWithColeta, setFinanciadoresWithColeta] = useState([]);
  const [openModalNewFinanciador, setOpenModalNewFinanciador] = useState(false);
  const [openModalEditFinanciador, setOpenModalEditFinanciador] =
    useState(false);
  const { isMobile } = useScreenContext();

  useEffect(() => {
    listarContratosPorColeta(dadosCard.id_coleta_cliente).then((res) => {
      const possuiContratoAtivo = res.some((contato: any) => {
        if (contato.status_contrato == "1" || contato.status_contrato == "0") {
          listaFinanciadorContrato(contato.id_contrato).then((res) => {
            setFinanciadorContrato(res);
          });
        }
        return contato.status_contrato == "1" || contato.status_contrato == "0";
      });
      listarFinanciador()
        .then((res) => {
          const perClient = res.filter(
            (item: any) => item.id_cliente == dadosCliente.id_cliente
          );
          setFinanciadores(perClient);
          if (!possuiContratoAtivo) {
            const filtered = res.find((item: any) =>
              item.coletas?.split(",").includes(dadosCard.id_coleta_cliente)
            );
            setFinanciadorSelected(filtered);
          }
        })
        .finally(() => setIsLoaded(true));

      setContratoAssinado(possuiContratoAtivo);
    });
  }, [dadosCard]);

  const gravarFinanciador = async (data: any) => {
    return adicionarFinanciador(data).then(() => {
      listarFinanciador().then((res) =>
        setFinanciadores(
          res.filter(
            (financiador: any) =>
              financiador.id_cliente == dadosCliente.id_cliente
          )
        )
      );
      listarDadosKanban();
    });
  };

  const handleFinanciadorClick = (financiador: any) => {
    if (blockEditCard) return;
    if (contratoAssinado) {
      Swal.fire({
        title: "Atenção!",
        text: "Este cliente possui um contrato gerado!",
        icon: "warning",
      });
      return;
    }

    Swal.fire({
      title: "Atenção!",
      text:
        financiadorSelected?.id_financiador === financiador.id_financiador
          ? "Deseja retirar o financiador deste negócio?"
          : "Deseja realmente alterar o financiador deste cliente?",
      icon: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Sim",
      cancelButtonText: "Cancelar",
    }).then((result) => {
      if (result.isConfirmed) {
        const data = {
          id_coleta: dadosCard.id_coleta_cliente,
          id_financiador:
            financiadorSelected?.id_financiador === financiador.id_financiador
              ? null
              : financiador.id_financiador,
        };
        setFinanciadorSelected(
          financiadorSelected?.id_financiador === financiador.id_financiador
            ? []
            : financiador
        );
        gravarFinanciador(data);
      }
    });
  };

  // useEffect(() => {
  //   const fetchColetas = async () => {
  //     const updatedFinanciadores: any = await Promise.all(
  //       financiadores.map(async (financiador: any) => {
  //         const coletas = await listarColetaFinanciador(
  //           financiador.id_financiador
  //         );
  //         return { ...financiador, coletas };
  //       })
  //     );
  //     setFinanciadoresWithColeta(updatedFinanciadores);
  //   };

  //   fetchColetas();
  // }, [financiadores]);

  const NewFinanciator = async (data: any) => {
    setIsLoading(true);
    data["id_cliente"] = dadosCliente.id_cliente;
    return cadastrarFinanciador(data)
      .then(() => {
        listarFinanciador().then((res) => {
          const perClient = res.filter(
            (item: any) => item.id_cliente == dadosCliente.id_cliente
          );
          setFinanciadores(perClient);
          setOpenModalNewFinanciador(false);
        });
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

  const editarFinanciador = async (data: any) => {
    setIsLoading(true);
    return cadastrarFinanciador({ ...editFinanciadorData, ...data })
      .then(() => {
        listarFinanciador().then((res) => {
          const perClient = res.filter(
            (item: any) => item.id_cliente == dadosCliente.id_cliente
          );
          setFinanciadores(perClient);
          setOpenModalEditFinanciador(false);

          const selectedClient = perClient.find(
            (financiador: any) =>
              financiador.id_financiador == editFinanciadorData.id_financiador
          );
          setFinanciadorSelected(selectedClient);
        });
      })
      .finally(() => {
        setIsLoading(false);
      });
  };

  return isMobile ? (
    <div className="flex justify-center relative z-1 rounded w-full">
      <div className="flex justify-center w-full">
        {isLoaded ? (
          <div className="grid w-full">
            <div className="bg-white dark:bg-form-input p-6 rounded-lg shadow-lg">
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div className="border border-gray-300 rounded-lg p-4">
                  <h1 className="text-sm  font-semibold text-center mb-3">
                    Dados do Contato
                    <span className="text-black block mt-1">
                      {dadosCliente.nome_cliente}
                    </span>
                  </h1>
                  <div className="text-xs space-y-2 mt-10 font-normal overflow-x-auto">
                    <div>
                      <span className="font-medium">Nome:</span>
                      <span className="ml-2">{dadosCliente.nome_cliente}</span>
                    </div>
                    <div>
                      <span className="font-medium">Telefone:</span>
                      <span className="ml-2">
                        {dadosCliente.telefone1_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Email:</span>
                      <span className="ml-2">{dadosCliente.email_cliente}</span>
                    </div>
                    <div>
                      <span className="font-medium">Cpf/Cnpj:</span>
                      <span className="ml-2">
                        {dadosCliente.cpfcnpj_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Cep:</span>
                      <span className="ml-2">
                        {dadosCliente.cep_cliente ||
                          dadosCliente.cepEmpresa_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Complemento:</span>
                      <span className="ml-2">
                        {dadosCliente.complemento_cliente ||
                          dadosCliente.complementoEmpresa_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Rua:</span>
                      <span className="ml-2">
                        {dadosCliente.rua_cliente ||
                          dadosCliente.logradouroEmpresa_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Numero:</span>
                      <span className="ml-2">
                        {dadosCliente.nro_cliente || dadosCliente.numeroEmpresa}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Bairro:</span>
                      <span className="ml-2">
                        {dadosCliente.bairro_cliente ||
                          dadosCliente.bairroEmpresa_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Cidade:</span>
                      <span className="ml-2">
                        {dadosCliente.cidade_cliente ||
                          dadosCliente.cidadeEmpresa_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Estado:</span>
                      <span className="ml-2">
                        {dadosCliente.estado_cliente ||
                          dadosCliente.ufEmpresa_cliente}
                      </span>
                    </div>
                  </div>
                </div>

                <div>
                  {financiadores.length > 0 && (
                    <h1 className="text-lg  max-sm:text-xs font-semibold text-center mb-4">
                      Selecione um Responsável Financeiro
                    </h1>
                  )}
                  {financiadores.length > 0 ? (
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
                      {financiadores.map((financiador: any) => (
                        <div key={financiador.id_financiador}>
                          <Card
                            onClick={() => {
                              if (blockEditCard) return;
                              if (contratoAssinado) {
                                Swal.fire({
                                  title: "Atenção!",
                                  text: "Este cliente possui um contrato gerado!",
                                  icon: "warning",
                                });
                              } else {
                                Swal.fire({
                                  title: "Atenção!",
                                  text: `${financiadorSelected?.id_financiador == financiador.id_financiador ? "Deseja retirar o financiador deste negócio?" : "Deseja realmente alterar o financiador deste cliente?"}`,
                                  icon: "warning",
                                  showCancelButton: true,
                                  confirmButtonColor: "#3085d6",
                                  cancelButtonColor: "#d33",
                                  confirmButtonText: "Sim",
                                  cancelButtonText: "Cancelar",
                                }).then((result) => {
                                  if (result.isConfirmed) {
                                    if (
                                      financiadorSelected?.id_financiador ==
                                      financiador.id_financiador
                                    ) {
                                      const data = {
                                        id_coleta: dadosCard.id_coleta_cliente,
                                        id_financiador: null,
                                      };
                                      gravarFinanciador(data);
                                      return;
                                    } else {
                                      const data = {
                                        id_coleta: dadosCard.id_coleta_cliente,
                                        id_financiador:
                                          financiador.id_financiador,
                                      };
                                      gravarFinanciador(data);
                                    }
                                  }
                                });
                              }
                            }}
                            className={`cursor-pointer max-w-xs ${
                              financiador.id_coleta ==
                              dadosCard.id_coleta_cliente
                                ? "hover:bg-danger shadow-lg bg-success bg-opacity-20"
                                : "hover:bg-success"
                            } hover:bg-opacity-30 hover:shadow-lg `}
                          >
                            <CardHeader>
                              <CardTitle>
                                {financiador.nome_financiador.split(" ")[0]}
                                {financiador.id_coleta ===
                                  dadosCard.id_coleta_cliente && (
                                  <span className="text-xs text-gray-400 block absolute">
                                    Responsável Atual
                                  </span>
                                )}
                              </CardTitle>
                            </CardHeader>
                            <CardContent className="flex flex-col gap-2 ">
                              <p className="text-[12px] leading-tight">
                                Nome: {financiador.nome_financiador}
                              </p>
                              {/* Outros campos */}
                            </CardContent>
                            <CardFooter>
                              <p className="text-[12px] leading-tight">
                                Negócios:{" "}
                                {financiador.coletas?.split(",").join(", ")}
                              </p>
                            </CardFooter>
                          </Card>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="flex justify-center items-center w-full h-full">
                      <h1 className="text-sm  max-sm:text-xs font-semibold text-center mb-4">
                        Este cliente aiunda não possui nenhum responsável
                        financeiro
                      </h1>
                    </div>
                  )}
                </div>

                <div className="border border-gray-300 rounded-lg p-4">
                  {financiadorContrato?.id_financiador_contrato ||
                  financiadorSelected?.id_financiador ? (
                    <>
                      <h1 className="text-sm font-semibold text-center mb-4">
                        Dados do responsável financeiro
                        <span className="text-black block mt-2">
                          {financiadorContrato?.nome_financiador_contrato ||
                            financiadorSelected?.nome_financiador}
                        </span>
                      </h1>
                      <div className="text-md space-y-2 mt-10">
                        <div>
                          <span className="font-medium">Nome:</span>
                          <span className="ml-2">
                            {financiadorSelected?.nome_financiador ||
                              financiadorContrato?.nome_financiador_contrato}
                          </span>
                        </div>
                        <div>
                          <span className="font-medium">Telefone:</span>
                          <span className="ml-2">
                            {financiadorSelected?.telefone1_financiador ||
                              financiadorContrato?.telefone1_financiador_contrato}
                          </span>
                        </div>
                      </div>
                    </>
                  ) : (
                    <div className="flex justify-center items-center w-full h-full">
                      <h1 className="text-sm  max-sm:text-xs font-semibold text-center mb-4">
                        Nenhum financiador selecionado
                      </h1>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        ) : (
          <div className="w-full h-[400px] flex flex-col justify-center items-center">
            <LoaderSun />
          </div>
        )}
      </div>
    </div>
  ) : (
    <div className="flex justify-center relative z-1 rounded w-ful">
      <div className="flex justify-center w-full">
        {isLoaded ? (
          <div className="grid w-full">
            <div className="bg-white dark:bg-form-input p-6 rounded-lg shadow-lg">
              <div className="grid grid-cols-3 gap-6">
                <div className="border border-gray-300 rounded-lg p-4">
                  <h1 className="text-sm font-semibold text-center mb-4">
                    Dados do Contato
                    <span className="text-black block mt-2">
                      {dadosCliente.nome_cliente}
                    </span>
                  </h1>
                  <div className="text-xs space-y-2 mt-10">
                    <div>
                      <span className="font-medium">Nome:</span>
                      <span className="ml-2">{dadosCliente.nome_cliente}</span>
                    </div>
                    <div>
                      <span className="font-medium">Telefone:</span>
                      <span className="ml-2">
                        {dadosCliente.telefone1_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Email:</span>
                      <span className="ml-2">{dadosCliente.email_cliente}</span>
                    </div>
                    <div>
                      <span className="font-medium">Cpf/Cnpj:</span>
                      <span className="ml-2">
                        {dadosCliente.cpfcnpj_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Cep:</span>
                      <span className="ml-2">
                        {dadosCliente.cep_cliente ||
                          dadosCliente.cepEmpresa_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Complemento:</span>
                      <span className="ml-2">
                        {dadosCliente.complemento_cliente ||
                          dadosCliente.complementoEmpresa_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Rua:</span>
                      <span className="ml-2">
                        {dadosCliente.rua_cliente ||
                          dadosCliente.logradouroEmpresa_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Numero:</span>
                      <span className="ml-2">
                        {dadosCliente.nro_cliente || dadosCliente.numeroEmpresa}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Bairro:</span>
                      <span className="ml-2">
                        {dadosCliente.bairro_cliente ||
                          dadosCliente.bairroEmpresa_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Cidade:</span>
                      <span className="ml-2">
                        {dadosCliente.cidade_cliente ||
                          dadosCliente.cidadeEmpresa_cliente}
                      </span>
                    </div>
                    <div>
                      <span className="font-medium">Estado:</span>
                      <span className="ml-2">
                        {dadosCliente.estado_cliente ||
                          dadosCliente.ufEmpresa_cliente}
                      </span>
                    </div>
                  </div>
                </div>
                <div className="w-full">
                  {financiadores.length > 0 ? (
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                      {financiadores.map((financiador: any) => (
                        <motion.div
                          key={financiador.id_financiador}
                          initial={{ opacity: 0, y: -10 }}
                          animate={{ opacity: 1, y: 0 }}
                          transition={{ duration: 0.3 }}
                        >
                          <Card
                            className={`hover:shadow-lg transition-all ${
                              financiadorSelected?.id_financiador ==
                              financiador.id_financiador
                                ? "border-dashed border-success bg-success/5"
                                : "bg-transparent"
                            }`}
                          >
                            <CardHeader>
                              <CardTitle className="relative">
                                {
                                  (financiador.tipoPessoa_financiador == "F"
                                    ? financiador?.nome_financiador
                                    : financiador?.nomeResponsavelFisico_financiador
                                  )?.split(" ")[0]
                                }
                                {financiador.id_coleta ===
                                  dadosCard.id_coleta_cliente && (
                                  <span className="text-xs text-gray-400 block absolute">
                                    Responsável Atual
                                  </span>
                                )}
                              </CardTitle>
                            </CardHeader>
                            <CardContent className="flex flex-col gap-2">
                              <p className="text-sm">
                                {financiador.tipoPessoa_financiador == "F"
                                  ? `Nome: ${financiador?.nome_financiador}`
                                  : `Razão social: ${financiador?.nomeEmpresa_financiador}`}
                              </p>
                              <p className="text-sm">
                                {financiador.tipoPessoa_financiador == "F"
                                  ? `CPF`
                                  : `CNPJ`}
                                : {financiador.cpfcnpj_financiador}
                              </p>
                              <p className="text-sm">
                                Telefone: {financiador.telefone1_financiador}
                              </p>
                            </CardContent>
                            <CardFooter>
                              {!blockEditCard && (
                              <div className="flex flex-col gap-2">
                                <p className="text-sm">
                                  Negócios:{" "}
                                  {financiador.coletas?.split(",").join(", ")}
                                </p>
                                <button
                                  type="button"
                                  onClick={() =>
                                    handleFinanciadorClick(financiador)
                                  }
                                  className={clsx(
                                    "cursor-pointer max-w-xs hover:shadow-lg transition-all text-white bg-opacity-70 font-semibold rounded-sm px-3 py-1 text-sm",
                                    financiadorSelected?.id_financiador ==
                                      financiador.id_financiador
                                      ? "bg-success hover:bg-danger"
                                      : "bg-primary hover:bg-opacity-90"
                                  )}
                                >
                                  <div>
                                    {financiadorSelected?.id_financiador ==
                                    financiador.id_financiador
                                      ? "Retirar "
                                      : "Selecionar "}
                                  </div>
                                  <div>Financiador</div>
                                </button>
                                <button
                                  type="button"
                                  className="cursor-pointer max-w-xs hover:shadow-lg transition-all text-white bg-opacity-70 font-semibold rounded-sm px-3 py-1 text-sm bg-meta-5 hover:bg-opacit"
                                  onClick={() => {
                                    setOpenModalEditFinanciador(true);
                                    setEditFinanciadorData(financiador);
                                  }}
                                >
                                  Editar Financiador
                                </button>
                              </div>
                              )}
                            </CardFooter>
                          </Card>
                        </motion.div>
                      ))}

                      {!blockEditCard && (
                      <motion.div
                        initial={{ opacity: 0, scale: 0.9 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ duration: 0.3 }}
                      >
                        <button
                          onClick={() => setOpenModalNewFinanciador(true)}
                          className="flex flex-col justify-center items-center w-full h-full 
                          bg-stroke hover:bg-[#2b961f] transition-all 
                          text-black font-semibold p-4 rounded-lg shadow-lg hover:text-white"
                        >
                          <Plus size={32} />
                          <span className="mt-2 text-sm">
                            Adicionar Financiador
                          </span>
                        </button>
                      </motion.div>
                      )}
                    </div>
                  ) : (
                    <div className="flex flex-col justify-center items-center w-full h-full text-center">
                      <h1 className="text-sm font-semibold mb-4">
                        Este Cliente Ainda Não Possui Nenhum Responsável
                        Financeiro
                      </h1>
                      {!blockEditCard && (
                      <Button
                        className="text-sm"
                        onClick={() => setOpenModalNewFinanciador(true)}
                      >
                        Adicionar Financiador
                      </Button>
                      )}
                    </div>
                  )}
                </div>
                <div className="border border-gray-300 rounded-lg p-4">
                  {financiadorContrato?.id_financiador_contrato ||
                  financiadorSelected?.id_financiador ? (
                    <>
                      <h1 className="text-lg font-semibold text-center mb-4">
                        Dados do Responsável Financeiro
                        <span className="text-black block mt-2">
                          {financiadorContrato?.nome_financiador_contrato ||
                            financiadorSelected?.nome_financiador ||
                            financiadorSelected?.nomeEmpresa_financiador}
                        </span>
                      </h1>
                      <div className="text-md space-y-2 mt-10">
                        {financiadorSelected.tipoPessoa_financiador == "F" ? (
                          <>
                            <div>
                              <span className="font-medium">Nome:</span>
                              <span className="ml-2">
                                {financiadorSelected?.nome_financiador ||
                                  financiadorContrato?.nome_financiador_contrato}
                              </span>
                            </div>
                            <div>
                              <span className="font-medium">Cpf:</span>
                              <span className="ml-2">
                                {financiadorSelected?.cpfcnpj_financiador ||
                                  financiadorContrato?.cpfcnpj_financiador_contrato}
                              </span>
                            </div>
                          </>
                        ) : (
                          <>
                            <div>
                              <span className="font-medium">Razão Social:</span>
                              <span className="ml-2">
                                {financiadorSelected?.nomeEmpresa_financiador}
                              </span>
                            </div>
                            <div>
                              <span className="font-medium">Cnpj:</span>
                              <span className="ml-2">
                                {financiadorSelected?.cpfcnpj_financiador ||
                                  financiadorContrato?.cpfcnpj_financiador_contrato}
                              </span>
                            </div>
                          </>
                        )}
                        <div>
                          <span className="font-medium">Telefone:</span>
                          <span className="ml-2">
                            {financiadorSelected?.telefone1_financiador ||
                              financiadorContrato?.telefone1_financiador_contrato}
                          </span>
                        </div>
                        <div>
                          <span className="font-medium">Email:</span>
                          <span className="ml-2">
                            {financiadorSelected?.email_financiador ||
                              financiadorContrato?.email_financiador_contrato}
                          </span>
                        </div>
                        <div>
                          <span className="font-medium">Cep:</span>
                          <span className="ml-2">
                            {financiadorSelected?.cep_financiador ||
                              financiadorSelected?.cepEmpresa_financiador ||
                              financiadorContrato?.cep_financiador_contrato ||
                              financiadorContrato?.cepEmpresa_financiador_contrato}
                          </span>
                        </div>
                        <div>
                          <span className="font-medium">Rua:</span>
                          <span className="ml-2">
                            {financiadorSelected?.rua_financiador ||
                              financiadorSelected?.logradouroEmpresa_financiador ||
                              financiadorContrato?.rua_financiador_contrato ||
                              financiadorContrato?.logradouroEmpresa_financiador_contrato}
                          </span>
                        </div>
                        <div>
                          <span className="font-medium">Numero:</span>
                          <span className="ml-2">
                            {financiadorSelected?.nro_financiador ||
                              financiadorSelected?.numeroEmpresa ||
                              financiadorContrato?.nro_financiador_contrato ||
                              financiadorContrato?.numeroEmpresa}
                          </span>
                        </div>
                        <div>
                          <span className="font-medium">Complemento:</span>
                          <span className="ml-2">
                            {financiadorSelected?.comp_financiador ||
                              financiadorSelected?.complementoEmpresa_financiador ||
                              financiadorContrato?.comp_financiador_contrato ||
                              financiadorContrato?.complementoEmpresa_financiador_contrato}
                          </span>
                        </div>
                        <div>
                          <span className="font-medium">Bairro:</span>
                          <span className="ml-2">
                            {financiadorSelected?.bairro_financiador ||
                              financiadorSelected?.bairroEmpresa_financiador ||
                              financiadorContrato?.bairro_financiador_contrato ||
                              financiadorContrato?.bairroEmpresa_financiador_contrato}
                          </span>
                        </div>
                        <div>
                          <span className="font-medium">Cidade:</span>
                          <span className="ml-2">
                            {financiadorSelected?.cidade_financiador ||
                              financiadorSelected?.cidadeEmpresa_financiador ||
                              financiadorContrato?.cidade_financiador_contrato ||
                              financiadorContrato?.cidadeEmpresa_financiador_contrato}
                          </span>
                        </div>
                        <div>
                          <span className="font-medium">Estado:</span>
                          <span className="ml-2">
                            {financiadorSelected?.estado_financiador ||
                              financiadorSelected?.ufEmpresa_financiador ||
                              financiadorContrato?.estado_financiador_contrato ||
                              financiadorContrato?.ufEmpresa_financiador_contrato}
                          </span>
                        </div>
                      </div>
                    </>
                  ) : (
                    <div className="flex justify-center items-center w-full h-full">
                      <h1 className="text-sm font-semibold text-center mb-4">
                        Nenhum Financiador Selecionado{" "}
                      </h1>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        ) : (
          <div className="w-full h-[400px] flex flex-col justify-center items-center">
            <LoaderSun />
          </div>
        )}
      </div>
      <ModalComponente
        opened={openModalNewFinanciador}
        onClose={() => setOpenModalNewFinanciador(false)}
        header={`Adicionar novo financiador para o cliente ${dadosCliente.nome_cliente}`}
        hasSaveButton={false}
        hasForm={false}
      >
        <FormFinanciador onSubmitFunction={NewFinanciator}>
          <div className="flex w-full justify-end sticky left-[100%] bottom-0 p-2 bg-white dark:bg-black">
            <Button loading={isLoading} className=" bg-success rounded-md">
              Salvar
            </Button>
          </div>
        </FormFinanciador>
      </ModalComponente>
      <ModalComponente
        opened={openModalEditFinanciador}
        onClose={() => setOpenModalEditFinanciador(false)}
        header={`Editar financiador para o cliente ${dadosCliente.nome_cliente}`}
        hasSaveButton={false}
        hasForm={false}
      >
        <FormFinanciador
          onSubmitFunction={editarFinanciador}
          defaultValues={editFinanciadorData}
        ></FormFinanciador>
      </ModalComponente>
    </div>
  );
};
export default ContatoCard;