import Input from "@/components/Forms/Input";
import InputGroup from "@/components/Forms/InputGroup";
import InputSelectComponent from "@/components/Forms/InputSelect";

import { listarUsuario } from "@/requests/CRM/agenda";
import { listarPerfis } from "@/requests/CRUD/Perfil/listarPerfis";
import { useAuth } from "@/src/contexts/authContext";
import {
  GetForm,
  validaCPFCNPJ,
  validarCNPJ,
  validarCPF,
  validarDataNascimento,
} from "@/utils";
import router from "next/router";
import { useEffect, useState } from "react";
import * as yup from "yup";

import { listarCamposPersonalizados } from "@/requests/CRUD/CamposPersonalizados/listarCamposPersonalizados";
import { cadastrarNovoContato } from "@/requests/CRUD/Cliente/cadastroCliente";
import { listarNegocios } from "@/requests/CRUD/ColetaDados/cadastroColetaDados";
import { listarOrigens } from "@/requests/CRUD/Origens/listarOrigens";
import { listarPropostaAprovada } from "@/requests/CRUD/Propostas/listarPropostas";
import { Tooltip } from "@mui/material";
import { FieldValues } from "react-hook-form";
import { toast } from "react-toastify";
import Swal from "sweetalert2";
import { buscaCep } from "../../services/buscaCep";

const NewContactScheduler = ({
  onSubmitFunction,
  defaultValues,
  disabledFields,
  children,
  hasGerarProposta,
  hasDataNegocio = false,
  dadosExtras = true,
  ...rest
}: any) => {
  const [yupSchema, setYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [camposPersonalizados, setCamposPersonalizados] = useState([]);
  const { handleSubmit, ...form } = GetForm(yupSchema, setYupSchema);

  const [cnpj, setCnpj] = useState(
    defaultValues && defaultValues["tipoPessoa_cliente"] == "J" ? true : false
  );
  const [dadosBanco1, setDadosBanco1] = useState<any>(false);
  const [dadosBanco2, setDadosBanco2] = useState<any>(false);

  const [origemCliente, setOrigemCliente] = useState<any[]>([]);
  const [usuario, setUsuario] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const { valuesSession } = useAuth();
  const { session } = valuesSession();
  const id_usuario = session.id_usuario;
  const [representanteDesabilitado, setRepresentanteDesabilitado] =
    useState(false);
  const [negociosCliente, setNegociosCliente] = useState<any[]>([]);

  const [cep, setCep] = useState<string>(
    defaultValues["cepEmpresa_cliente"] || defaultValues["cep_cliente"]
  );
  const [bairro, setBairro] = useState<string>(
    defaultValues["bairroEmpresa_cliente"] || defaultValues["bairro_cliente"]
  );
  const [logradouro, setLogradouro] = useState<string>(
    defaultValues["logradouroEmpresa_cliente"] || defaultValues["rua_cliente"]
  );
  const [estadoSelecionado, setEstadoSelecionado] = useState<string>(
    defaultValues["ufEmpresa_cliente"] || defaultValues["estado_cliente"]
  );
  const [cidadeSelecionada, setCidadeSelecionada] = useState<any>(
    defaultValues["cidadeEmpresa_cliente"] || defaultValues["cidade_cliente"]
  );
  const [negociosComPropostasAprovadas, setNegociosComPropostasAprovadas] =
    useState<any[]>([]);

  useEffect(() => {
    listarOrigens().then((response) => {
      setOrigemCliente(response);
    });
    listarNegocios().then((response) => {
      const filtred = response.filter(
        (element: any) => element.cliente_coleta == defaultValues?.id_cliente
      );
      const idsColetas = filtred.map((e: any) => e.id_coleta);
      listarPropostaAprovada(idsColetas.join(",")).then((res) => {
        setNegociosComPropostasAprovadas(res);
      });
      setNegociosCliente(filtred);
    });
  }, [defaultValues]);

  const handleGerarProposta = (data: FieldValues) => {
    setIsLoading(true);

    cadastrarNovoContato(data)
      .then((res: any) => {
        const queryParamsObj = {
          id_cliente: data.id_cliente,
          nome_cliente: data.nome_cliente,
          telefone1_cliente: data.telefone1_cliente,
          cidade_estado_cliente: `${data.cidade_cliente} - ${data.estado_cliente}`,
        };
        localStorage.setItem("NovoContato", JSON.stringify(queryParamsObj));
        router.push(`/CXESCRM005`);
      })
      .finally(() => setIsLoading(false));
  };

  useEffect(() => {
    const buscarUsuario = async () => {
      await listarUsuario().then(async (res) => {
        await listarPerfis().then((resPerfil) => {
          setRepresentanteDesabilitado(
            res
              .filter((element: any) => element.id_usuario == id_usuario)
              .some((rep: any) => {
                return resPerfil
                  .filter(
                    (element: any) =>
                      element.visualiza_todos_contatos_perfi == 1
                  )
                  .some((perfil: any) => {
                    return perfil.id_perfil === rep.perfil_usuario;
                  });
              })
          );
        });
        setUsuario(
          res.map((usuario: any) => ({
            value: usuario.id_usuario,
            label: usuario.nome_usuario,
          }))
        );
      });
    };
    buscarUsuario();
  }, []);
  const [loadingCep, setLoadingCep] = useState(false);

  const handleCEPChange = async (event: any) => {
    const cep = event;
    setCep(cep);

    if (cep && cep.length === 9) {
      setLoadingCep(true);

      const formataCep = cep.replace("-", "");
      const enderecoInfo = await buscaCep(formataCep);

      form.setValue("bairroEmpresa_cliente", enderecoInfo!.bairro);
      form.setValue("logradouroEmpresa_cliente", enderecoInfo!.rua);
      form.setValue("ufEmpresa_cliente", enderecoInfo!.estado);
      form.setValue("cidadeEmpresa_cliente", enderecoInfo!.cidade);

      form.setValue("bairro_cliente", enderecoInfo!.bairro);
      form.setValue("rua_cliente", enderecoInfo!.rua);
      form.setValue("estado_cliente", enderecoInfo!.estado);
      form.setValue("cidade_cliente", enderecoInfo!.cidade);

      setLoadingCep(false);

      setBairro(enderecoInfo!.bairro || "");
      setLogradouro(enderecoInfo!.rua || "");
      setCidadeSelecionada(enderecoInfo!.cidade);
      setEstadoSelecionado(enderecoInfo!.estado);
    }
  };

  const handleSubmitFunction = (data: FieldValues) => {
    if (data.tipoPessoa_cliente == "F" && data.cpfcnpj_cliente) {
      if (!validarCPF(data.cpfcnpj_cliente)) {
        return Swal.fire({
          title: "Erro ao validar o CPF",
        });
      }
    } else if (data.cpfcnpj_cliente) {
      if (!validarCNPJ(data.cpfcnpj_cliente)) {
        return Swal.fire({
          title: "Erro ao validar o CNPJ",
        });
      }
    }
    if (data.cpfResponsavel_cliente) {
      if (!validarCPF(data.cpfResponsavel_cliente)) {
        return Swal.fire({
          title: "Erro ao validar o CPF do responsável",
        });
      }
    }
    if (data["telefone1_cliente"].length < 10) {
      toast.error("O telefone deve conter ao menos 10 dígitos.");
      return;
    }
    if (data["telefone2_cliente"] && data["telefone2_cliente"].length < 10) {
      toast.error("O telefone deve conter ao menos 10 dígitos.");
      return;
    }
    onSubmitFunction(data);
  };
  useEffect(() => {
    listarCamposPersonalizados().then((campos) => {
      setCamposPersonalizados(
        campos.filter((a: any) => a.status_campo_personalizado == "1")
      );
    });
  }, []);
  return (
    <>
      <form
        onSubmit={handleSubmit(handleSubmitFunction)}
        {...rest}
        className="g-5 bg-white"
      >
        <div className="flex flex-col gap-3 p-3">
          {negociosCliente.length > 0 && (
            <div className="relative border-[1px] m-3 border-stroke border-opacity-100 rounded-md p-6">
              <span className="absolute top-0 left-0 max-sm:text-sm transform translate-x-[10%]  text-black -translate-y-1/2 px-3 py-1 bg-white dark:bg-boxdark text-lg font-bold">
                Negócios ({negociosCliente.length})
              </span>

              <div className="flex flex-wrap gap-4 mt-6 max-sm:text-sm">
                {negociosCliente.map((res: any, index: any) => {
                  const temPropostaAprovada =
                    negociosComPropostasAprovadas.some(
                      (proposta: any) => proposta.id_coleta === res.id_coleta
                    );
                  return (
                    <div
                      key={index}
                      className={`flex-1 min-w-[200px] flex justify-between items-center p-4 border rounded-lg shadow-md ${temPropostaAprovada
                          ? "bg-green-50 dark:bg-green-900 border-green-300 dark:border-green-700"
                          : "bg-white dark:bg-boxdark border-stroke"
                        }`}
                    >
                      <div className="flex items-center space-x-3 flex-1">
                        <span className="font-bold">Nome:</span>
                        <span className="whitespace-nowrap">
                          {res.nome_negocio_coleta}
                        </span>
                      </div>
                      {temPropostaAprovada && (
                        <div className="ml-2 px-3 py-1 bg-green-500 text-white text-xs font-bold rounded-full whitespace-nowrap">
                          ✓ Proposta Aprovada
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          )}
          <div
            className={`relative border-[1px]  m-3 border-stroke border-opacity-100 rounded-md p-8`}
          >
            <span
              className={`absolute top-0 left-0 max-sm:text-sm transform translate-x-[20%] text-black -translate-y-1/2 px-1 bg-white dark:bg-boxdark text-2xl `}
            >
              <strong>Dados para Proposta</strong>
            </span>
            <InputGroup>
              {hasDataNegocio && (
                <>
                  <Input
                    formulario={form}
                    label="Nome negócio"
                    name="nome_negocio"
                    error={"Preencha o Nome do negócio!"}
                    required
                    autoComplete="off"
                    defaultValue={
                      defaultValues && defaultValues["nome_negocio_coleta"]
                    }
                  />
                </>
              )}

              <Input
                formulario={form}
                label={`${cnpj ? "Razão Social" : "Nome"}`}
                name="nome_cliente"
                type="text"
                required
                error={"Preencha o nome!"}
                defaultValue={defaultValues && defaultValues["nome_cliente"]}
              />

              <InputSelectComponent
                formulario={form}
                label="Vendedor"
                name="responsavel_cliente"
                options={usuario}
                required
                error={"Preencha o Vendedor!"}
                defaultValue={
                  defaultValues && defaultValues["responsavel_cliente"]
                }
              />
              <Input
                formulario={form}
                label="Telefone"
                name="telefone1_cliente"
                mascara="telefone"
                required
                type="text"
                error={"Preencha o Telefone!"}
                defaultValue={
                  defaultValues && defaultValues["telefone1_cliente"]
                }
              />

              <Tooltip
                title="O campo Origem está bloqueado pois já existe um negócio com uma proposta gerada!"
                arrow
                open={negociosComPropostasAprovadas.length > 0 ? true : false}
              >
                <div className="w-[80%]">
                  <InputSelectComponent
                    formulario={form}
                    label="Origem"
                    name="origem_cliente"
                    options={origemCliente.map((res: any) => ({
                      label: `${res.nome_origem_cliente}`,
                      value: `${res.id_origem_cliente}`,
                    }))}
                    required
                    error={"Preencha o Campo!"}
                    disabled={
                      negociosComPropostasAprovadas.length > 0 ? true : false
                    }
                    defaultValue={
                      defaultValues && defaultValues["origem_cliente"]
                    }
                  />
                </div>
              </Tooltip>
            </InputGroup>
          </div>

          {dadosExtras && (
            <>
              <div
                className={`relative border-[1px]  m-3 border-stroke border-opacity-100 rounded-md p-8`}
              >
                <span
                  className={`absolute top-0 max-sm:text-sm left-0 transform translate-x-[20%] text-black -translate-y-1/2 px-1 bg-white dark:bg-boxdark text-2xl `}
                >
                  <strong>Dados para Contrato</strong>
                </span>
                <InputGroup className="flex justify-center items-center">
                  <InputSelectComponent
                    formulario={form}
                    label="Tipo"
                    width="xl:w-1/3"
                    name="tipoPessoa_cliente"
                    options={[
                      { value: "F", label: "Física" },
                      { value: "J", label: "Jurídica" },
                    ]}
                    skipEffect
                    onChange={(e: any) => {
                      const juridica = e.value == "J";

                      const formData = { ...form?.control?._formValues };
                      if (cnpj != juridica) {
                        if (juridica) {
                          form.setValue(
                            "cepEmpresa_cliente",
                            formData["cep_cliente"]
                          );
                          form.setValue(
                            "logradouroEmpresa_cliente",
                            formData["rua_cliente"]
                          );
                          form.setValue(
                            "numeroEmpresa",
                            formData["nro_cliente"]
                          );
                          form.setValue(
                            "bairroEmpresa_cliente",
                            formData["bairro_cliente"]
                          );
                          form.setValue(
                            "complementoEmpresa_cliente",
                            formData["comp_cliente"]
                          );
                          form.setValue(
                            "cidadeEmpresa_cliente",
                            formData["cidade_cliente"]
                          );
                          form.setValue(
                            "ufEmpresa_cliente",
                            formData["estado_cliente"]
                          );
                        } else {
                          form.setValue(
                            "cep_cliente",
                            formData["cepEmpresa_cliente"]
                          );
                          form.setValue(
                            "rua_cliente",
                            formData["logradouroEmpresa_cliente"]
                          );
                          form.setValue(
                            "nro_cliente",
                            formData["numeroEmpresa"]
                          );
                          form.setValue(
                            "bairro_cliente",
                            formData["bairroEmpresa_cliente"]
                          );
                          form.setValue(
                            "comp_cliente",
                            formData["complementoEmpresa_cliente"]
                          );
                          form.setValue(
                            "cidade_cliente",
                            formData["cidadeEmpresa_cliente"]
                          );
                          form.setValue(
                            "estado_cliente",
                            formData["ufEmpresa_cliente"]
                          );
                        }

                        form.setValue("cpfcnpj_cliente" as never, "" as never);
                        setCnpj(juridica);
                      }
                    }}
                    defaultValue={
                      (defaultValues && defaultValues["tipoPessoa_cliente"]) ||
                      "F"
                    }
                  />
                </InputGroup>
                {cnpj && (
                  <>
                    <InputGroup>
                      <Input
                        formulario={form}
                        label="Razão Social"
                        name="nomeEmpresa_cliente"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["nomeEmpresa_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="CNPJ"
                        name="cpfcnpj_cliente"
                        mascara="cnpj"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["cpfcnpj_cliente"]
                        }
                        onBlur={(e) => {
                          if (
                            e.target.value.length === 14 ||
                            e.target.value.length === 18
                          ) {
                            const validated = validaCPFCNPJ(e.target.value);
                            if (!validated) {
                              form.setError("cpfcnpj_cliente" as never, {
                                type: "manual",
                                message: "CPF/CNPJ inválido",
                              });
                              form.setValue("cpfcnpj_cliente", "");
                            } else {
                              form.clearErrors("cpfcnpj_cliente");
                            }
                          } else {
                            if (
                              e.target.value.length > 14 ||
                              (e.target.value.length < 14 &&
                                e.target.value.length > 18)
                            ) {
                              form.setError("cpfcnpj_cliente" as never, {
                                type: "manual",
                                message: "CPF/CNPJ inválido",
                              });
                              form.setValue("cpfcnpj_cliente", "");
                            } else {
                              form.setValue("cpfcnpj_cliente", "");
                            }
                          }
                          // if (e.target.value.length == 0) {
                          //   form.clearErrors("cpfcnpj_cliente");
                          // }
                        }}
                      />
                      <Input
                        formulario={form}
                        label="IE"
                        name="ie_cliente"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["ie_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="Data Abertura"
                        name="data_aberturaEmpresa_cliente"
                        type="date"
                        defaultValue={
                          defaultValues &&
                          defaultValues["data_aberturaEmpresa_cliente"]
                        }
                      />
                    </InputGroup>
                    <hr />
                    <span className="flex w-full justify-center items-center p-2 text-black text-[22px]">
                      <strong>Dados Responsável Legal</strong>
                    </span>
                    <InputGroup>
                      <Input
                        formulario={form}
                        label="Responsável Legal"
                        name="nomeResponsavelFisico_cliente"
                        type="text"
                        defaultValue={
                          defaultValues &&
                          defaultValues["nomeResponsavelFisico_cliente"]
                        }
                      />
                      {/* //data nascimento responsável */}
                      <Input
                        formulario={form}
                        label="Data Nascimento"
                        name="dataNascimentoResponsavel_cliente"
                        type="date"
                        defaultValue={
                          defaultValues &&
                          defaultValues["dataNascimentoResponsavel_cliente"]
                        }
                        onBlur={(e) => {
                          if (e.target.value.length == 10) {
                            const validated = validarDataNascimento(
                              e.target.value
                            );
                            if (!validated) {
                              form.setError(
                                "dataNascimentoResponsavel_cliente" as never,
                                {
                                  type: "manual",
                                  message:
                                    "Data Nascimento Inválida, deve ser maior de 18 anos!",
                                }
                              );
                              form.setValue(
                                "dataNascimentoResponsavel_cliente",
                                ""
                              );
                            } else {
                              form.setValue(
                                "dataNascimentoResponsavel_cliente",
                                e.target.value
                              );
                              form.clearErrors(
                                "dataNascimentoResponsavel_cliente"
                              );
                            }
                          } else {
                            form.setValue(
                              "dataNascimentoResponsavel_cliente",
                              ""
                            );
                          }
                        }}
                      />
                      <Input
                        formulario={form}
                        label="CPF"
                        name="cpfResponsavel_cliente"
                        mascara="cpf"
                        type="text"
                        defaultValue={
                          defaultValues &&
                          defaultValues["cpfResponsavel_cliente"]
                        }
                        onBlur={(e) => {
                          if (
                            e.target.value.length === 14 ||
                            e.target.value.length === 18
                          ) {
                            const validated = validaCPFCNPJ(e.target.value);
                            if (!validated) {
                              form.setError("cpfResponsavel_cliente" as never, {
                                type: "manual",
                                message: "CPF/CNPJ inválido",
                              });
                              form.setValue("cpfResponsavel_cliente", "");
                            } else {
                              form.clearErrors("cpfResponsavel_cliente");
                            }
                          } else {
                            if (
                              e.target.value.length > 14 ||
                              (e.target.value.length < 14 &&
                                e.target.value.length > 18)
                            ) {
                              form.setError("cpfResponsavel_cliente" as never, {
                                type: "manual",
                                message: "CPF/CNPJ inválido",
                              });
                              form.setValue("cpfResponsavel_cliente", "");
                            } else {
                              form.setValue("cpfResponsavel_cliente", "");
                            }
                          }
                          if (e.target.value.length == 0) {
                            form.clearErrors("cpfResponsavel_cliente");
                          }
                        }}
                      />
                    </InputGroup>
                    <hr />
                    <span className="flex w-full max-sm:text-sm justify-center items-center p-2 text-black text-[22px]">
                      <strong>Dados Endereço</strong>
                    </span>
                    <InputGroup>
                      {loadingCep && (
                        <span className="text-xs text-gray-500 mt-1 block">
                          Buscando endereço...
                        </span>
                      )}

                      <Input
                        formulario={form}
                        label="CEP"
                        name="cepEmpresa_cliente"
                        onChange={(e) => handleCEPChange(e.target.value)}
                        mascara="cep"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["cepEmpresa_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="Logradouro"
                        name="logradouroEmpresa_cliente"
                        type="text"
                        disabled={cep != "" && cep != "0" && logradouro != ""}
                        defaultValue={
                          defaultValues &&
                          defaultValues["logradouroEmpresa_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="Número"
                        name="numeroEmpresa"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["numeroEmpresa"]
                        }
                      />
                    </InputGroup>
                    <InputGroup>
                      <Input
                        formulario={form}
                        label="Bairro"
                        name="bairroEmpresa_cliente"
                        disabled={cep != "" && cep != "0" && bairro != ""}
                        type="text"
                        defaultValue={
                          defaultValues &&
                          defaultValues["bairroEmpresa_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="Complemento"
                        name="complementoEmpresa_cliente"
                        type="text"
                        defaultValue={
                          defaultValues &&
                          defaultValues["complementoEmpresa_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="Cidade"
                        name="cidadeEmpresa_cliente"
                        type="text"
                        disabled={
                          cep != "" && cep != "0" && cidadeSelecionada != ""
                        }
                        defaultValue={
                          defaultValues &&
                          defaultValues["cidadeEmpresa_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="UF"
                        name="ufEmpresa_cliente"
                        type="text"
                        disabled={
                          cep != "" && cep != "0" && estadoSelecionado != ""
                        }
                        defaultValue={
                          defaultValues && defaultValues["ufEmpresa_cliente"]
                        }
                      />
                    </InputGroup>
                  </>
                )}
                {!cnpj && (
                  <>
                    <InputGroup>
                      <Input
                        formulario={form}
                        label="CPF"
                        mascara="cpf"
                        name="cpfcnpj_cliente"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["cpfcnpj_cliente"]
                        }
                        onBlur={(e) => {
                          if (
                            e.target.value.length === 14 ||
                            e.target.value.length === 18
                          ) {
                            const validated = validaCPFCNPJ(e.target.value);
                            if (!validated) {
                              form.setError("cpfcnpj_cliente" as never, {
                                type: "manual",
                                message: "CPF/CNPJ inválido",
                              });
                              form.setValue("cpfcnpj_cliente", "");
                            } else {
                              form.clearErrors("cpfcnpj_cliente");
                            }
                          } else {
                            if (
                              e.target.value.length > 14 ||
                              (e.target.value.length < 14 &&
                                e.target.value.length > 18)
                            ) {
                              form.setError("cpfcnpj_cliente" as never, {
                                type: "manual",
                                message: "CPF/CNPJ inválido",
                              });
                              form.setValue("cpfcnpj_cliente", "");
                            } else {
                              form.setValue("cpfcnpj_cliente", "");
                            }
                          }
                          if (e.target.value.length == 0) {
                            form.clearErrors("cpfcnpj_cliente");
                          }
                        }}
                        onChange={(e) => {
                          if (
                            e.target.value.length === 14 ||
                            e.target.value.length === 18
                          ) {
                            const validated = validaCPFCNPJ(e.target.value);
                            if (!validated) {
                              form.setError("cpfcnpj_cliente" as never, {
                                type: "manual",
                                message: "CPF/CNPJ inválido",
                              });
                              form.setValue("cpfcnpj_cliente", "");
                            } else {
                              form.setValue("cpfcnpj_cliente", e.target.value);
                              form.clearErrors("cpfcnpj_cliente");
                            }
                          }
                        }}
                      />
                      <Input
                        formulario={form}
                        label="RG"
                        name="rg_cliente"
                        mascara="rg"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["rg_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="Data Nascimento"
                        name="dataNascimento_cliente"
                        type="date"
                        defaultValue={
                          defaultValues &&
                          defaultValues["dataNascimento_cliente"]
                        }
                        onBlur={(e) => {
                          if (e.target.value.length == 10) {
                            const validated = validarDataNascimento(
                              e.target.value
                            );
                            if (!validated) {
                              form.setError("dataNascimento_cliente" as never, {
                                type: "manual",
                                message:
                                  "Data Nascimento Inválida, deve ser maior de 18 anos!",
                              });
                              form.setValue("dataNascimento_cliente", "");
                            } else {
                              form.setValue(
                                "dataNascimento_cliente",
                                e.target.value
                              );
                              form.clearErrors("dataNascimento_cliente");
                            }
                          } else {
                            form.setValue("dataNascimento_cliente", "");
                          }
                        }}
                      />
                      <InputSelectComponent
                        formulario={form}
                        label="Estado Civil"
                        name="estadoCivil_cliente"
                        options={[
                          { value: "Solteiro", label: "Solteiro" },
                          { value: "Casado", label: "Casado" },
                          { value: "Divorciado", label: "Divorciado" },
                          { value: "Viúvo", label: "Viúvo" },
                        ]}
                        defaultValue={
                          defaultValues && defaultValues["estadoCivil_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="Profissão"
                        name="profissao_cliente"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["profissao_cliente"]
                        }
                      />
                    </InputGroup>
                    <hr />
                    <span className="flex w-full max-sm:text-sm justify-center items-center p-2 text-black text-[22px]">
                      <strong>Dados De Endereço</strong>
                    </span>
                    <InputGroup>
                      {loadingCep && (
                        <span className="text-xs text-gray-500 mt-1 block">
                          Buscando endereço...
                        </span>
                      )}

                      <Input
                        formulario={form}
                        label="CEP"
                        name="cep_cliente"
                        onChange={(e) => handleCEPChange(e.target.value)}
                        mascara="cep"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["cep_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="Logradouro"
                        name="rua_cliente"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["rua_cliente"]
                        }
                        disabled={cep != "" && cep != "0" && logradouro != ""}
                      />
                      <Input
                        formulario={form}
                        label="Número"
                        name="nro_cliente"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["nro_cliente"]
                        }
                      />
                    </InputGroup>
                    <InputGroup>
                      <Input
                        formulario={form}
                        label="Bairro"
                        name="bairro_cliente"
                        type="text"
                        disabled={cep != "" && cep != "0" && bairro != ""}
                        defaultValue={
                          defaultValues && defaultValues["bairro_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="Complemento"
                        name="comp_cliente"
                        type="text"
                        defaultValue={
                          defaultValues && defaultValues["comp_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="Cidade"
                        name="cidade_cliente"
                        type="text"
                        disabled={
                          cep != "" && cep != "0" && cidadeSelecionada != ""
                        }
                        defaultValue={
                          defaultValues && defaultValues["cidade_cliente"]
                        }
                      />
                      <Input
                        formulario={form}
                        label="UF"
                        name="estado_cliente"
                        type="text"
                        disabled={
                          cep != "" && cep != "0" && estadoSelecionado != ""
                        }
                        defaultValue={
                          defaultValues && defaultValues["estado_cliente"]
                        }
                      />
                    </InputGroup>
                  </>
                )}
              </div>

              <div
                className={`relative border-[1px]  m-3 border-stroke border-opacity-100 rounded-md p-8`}
              >
                <span
                  className={`absolute top-0 max-sm:text-sm left-0 transform translate-x-[20%] text-black -translate-y-1/2 px-1 bg-white dark:bg-boxdark text-2xl `}
                >
                  <strong>Informações adicionais</strong>
                </span>
                <InputGroup>
                  <Input
                    formulario={form}
                    label="E-mail"
                    name="email_cliente"
                    type="email"
                    // required
                    error={"Preencha o E-mail!"}
                    autoComplete="off"
                    defaultValue={
                      defaultValues && defaultValues["email_cliente"]
                    }
                  />

                  <Input
                    formulario={form}
                    mascara="telefone"
                    label="Telefone 2"
                    name="telefone2_cliente"
                    type="text"
                    defaultValue={
                      defaultValues && defaultValues["telefone2_cliente"]
                    }
                  />
                </InputGroup>
              </div>

              <div className="container mx-auto p-10 bg-white shadow-md rounded-lg">
                <div className="text-center max-sm:text-sm w-full text-lg font-bold mb-4 text-black-2">
                  <h1>Renda</h1>
                </div>
                <div className="flex flex-row justify-center items-center -mx-3 mb-6 gap-5">
                  <Input
                    formulario={form}
                    label="Valor do Patrimônio"
                    width={"xl:w-1/3"}
                    mascara="numero"
                    name="patrimonio_cliente"
                    type="text"
                    defaultValue={
                      defaultValues && defaultValues["patrimonio_cliente"]
                    }
                  />

                  <Input
                    formulario={form}
                    width={"xl:w-1/3"}
                    label="Renda Mensal"
                    mascara="numero"
                    name="renda_cliente"
                    type="text"
                    defaultValue={
                      defaultValues && defaultValues["renda_cliente"]
                    }
                  />
                </div>

                <div className="text-center max-sm:text-sm w-full text-lg font-bold mb-4 text-black-2">
                  <h1>Instituição Financeira 1</h1>
                </div>
                <div className="flex flex-wrap -mx-3 mb-6">
                  <div className="w-full md:w-1/3 px-3 mb-6 md:mb-0">
                    <Input
                      formulario={form}
                      label="Nome da Instituição Financeira"
                      name="nome_banco1_cliente"
                      type="text"
                      onChange={(e) =>
                        e.target.value != ""
                          ? setDadosBanco1(true)
                          : setDadosBanco1(false)
                      }
                      defaultValue={
                        defaultValues && defaultValues["nome_banco1_cliente"]
                      }
                      required={dadosBanco1}
                      error="Preencha o Nome da Instituição Financeira!"
                    />
                  </div>
                  <div className="w-full md:w-1/3 px-3 mb-6 md:mb-0">
                    <Input
                      formulario={form}
                      label="Agência"
                      name="agencia_banco1_cliente"
                      type="text"
                      defaultValue={
                        defaultValues && defaultValues["agencia_banco1_cliente"]
                      }
                      required={dadosBanco1}
                      error="Preencha a Agência!"
                      disabled={!dadosBanco1}
                    />
                  </div>
                  <div className="w-full md:w-1/3 px-3">
                    <Input
                      formulario={form}
                      label="Conta"
                      name="conta_banco1_cliente"
                      type="text"
                      defaultValue={
                        defaultValues && defaultValues["conta_banco1_cliente"]
                      }
                      required={dadosBanco1}
                      error="Preencha a Conta!"
                      disabled={!dadosBanco1}
                    />
                  </div>
                </div>

                <div className="text-center max-sm:text-sm w-full text-lg font-bold mb-4 text-black-2">
                  <h1>Instituição Financeira 2</h1>
                </div>
                <div className="flex flex-wrap -mx-3 mb-6">
                  <div className="w-full md:w-1/3 px-3 mb-6 md:mb-0">
                    <Input
                      formulario={form}
                      label="Nome da Instituição Financeira"
                      name="nome_banco2_cliente_cliente"
                      onChange={(e) => setDadosBanco2(true)}
                      type="text"
                      defaultValue={
                        defaultValues &&
                        defaultValues["nome_banco2_cliente_cliente"]
                      }
                      required={dadosBanco2}
                    />
                  </div>
                  <div className="w-full md:w-1/3 px-3 mb-6 md:mb-0">
                    <Input
                      formulario={form}
                      label="Agência"
                      name="agencia_banco2_cliente"
                      type="text"
                      defaultValue={
                        defaultValues && defaultValues["agencia_banco2_cliente"]
                      }
                      required={dadosBanco2}
                      disabled={!dadosBanco2}
                    />
                  </div>
                  <div className="w-full md:w-1/3 px-3">
                    <Input
                      formulario={form}
                      label="Conta"
                      name="conta_banco2_cliente"
                      type="text"
                      defaultValue={
                        defaultValues && defaultValues["conta_banco2_cliente"]
                      }
                      required={dadosBanco2}
                      disabled={!dadosBanco2}
                    />
                  </div>
                </div>
              </div>
            </>
          )}
        </div>

        {/* <div className="flex flex-row justify-end gap-2"> */}
        {/* {hasGerarProposta && (
            <Button
              loading={isLoading}
              type="button"
              className="bg-[#2933fe] text-sm px-6 rounded-lg "
              onClick={handleSubmit(handleGerarProposta)}
            >
              Gerar Proposta
            </Button>
          )} */}
        {/* </div> */}
        {children}
      </form>
    </>
  );
};

export default NewContactScheduler;