import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Box,
  Button,
  Checkbox,
  Dialog,
  FormControlLabel,
  FormGroup,
  Grid,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  styled,
  TextField,
  Typography,
} from "@mui/material";
import React, { useEffect } from "react";
import {
  BTNbox,
  BusinessVerifiedouterBox,
  CancelBTN,
  CustomCheckbox,
  FromSection,
  Heading,
  PopUpAction,
  PopUpCancelBTN,
  PopupHeading,
  PopUpSaveBTN,
  PopUpSubHeading,
  SaveBTN,
  UploadBTN,
  VerifiedHeading,
  VerifiedInnerBox,
  VerifySection,
} from "./styles";
import CheckIcon from "@mui/icons-material/Check";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import UploadIcon from "@mui/icons-material/Upload";
import { Dayjs } from "dayjs";
import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { Form, Formik } from "formik";
import * as Yup from "yup";
import { apiClient } from "@/components/common/common";
import { toast } from "react-toastify";
import CloseOutlinedIcon from "@mui/icons-material/CloseOutlined";
import {
  MinisiteBtnPopup,
  MinisiteBtnPopupContent,
  PopupContentInner,
} from "@/components/CompanySettings/style";
import BusniessVerifiedSkeleton from "./BusniessVerifiedSkeleton";

const VisuallyHiddenInput = styled("input")({
  clip: "rect(0 0 0 0)",
  clipPath: "inset(50%)",
  height: 1,
  overflow: "hidden",
  position: "absolute",
  bottom: 0,
  left: 0,
  whiteSpace: "nowrap",
  width: 1,
});
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
  "& .MuiDialogContent-root": {
    padding: theme.spacing(2),
  },
  "& .MuiDialogActions-root": {
    padding: theme.spacing(1),
  },
  "& .MuiPaper-root": {
    width: "800px",
    maxWidth: "800px",
    padding: "30px 20px ",
  },
}));
export default function BusinessVerification() {
  const [value, setValue] = React.useState<Dayjs | null>(null);
  const [publishing, setPublishing] = React.useState<boolean>(false);
  const [open, setOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(true);
  const [open1, setOpen1] = React.useState(false);
  const [initialValues, setInitialValues] = React.useState({
    company_name: "",
    company_address: "",
    business_number: "",
    country_registration: "",
    business_types: ["Manufacturers"],
    back_account_number: "",
    account_holder_name: "",
    bank_name: "",
    signatory_name: "",
    date_of_incorporation: "",
    // upload_business_license: "",
    business_license_file: null,
    company_website_url: "",
    official_email_address: "",
    contact_number: "",
    registered_address: "",
    tax_identifier: "",
    agree_terms: false,
    declare_info: false,
    business_verified: false,
  });

  const handleClickOpen = () => {
    setOpen(true);
  };
  const handleClose = () => {
    setPublishing(false);
    setOpen(false);
  };

  // const initialValues = {
  //   company_name: "",
  //   company_address: "",
  //   business_number: "",
  //   country_registration: "",
  //   business_types: ["Manufacturers"],
  //   back_account_number: "",
  //   account_holder_name: "",
  //   bank_name: "",
  //   signatory_name: "",
  //   date_of_incorporation: "",
  //   upload_business_license: "",
  //   business_license_file: null,
  //   company_website_url: "",
  //   official_email_address: "",
  //   contact_number: "",
  //   registered_address: "",
  //   tax_identifier: "",
  //   agree_terms: false,
  //   declare_info: false,
  // };

  const validationSchema = Yup.object().shape({
    company_name: Yup.string().required("Company name is required"),
    company_address: Yup.string().required("Company address is required"),
    business_number: Yup.string().required("Business number is required"),
    country_registration: Yup.string().required(
      "Country of registration is required"
    ),
    business_types: Yup.array().min(
      1,
      "At least one business type is required"
    ),
    back_account_number: Yup.string().required(
      "Bank account number is required"
    ),
    account_holder_name: Yup.string().required(
      "Account holder name is required"
    ),
    bank_name: Yup.string().required("Bank name is required"),
    signatory_name: Yup.string().required("Signatory name is required"),
    date_of_incorporation: Yup.date()
      .required("Date of incorporation is required")
      .typeError("Invalid date"),
    // upload_business_license: Yup.string().required(
    //   "Bussiness license is required"
    // ),
    business_license_file: Yup.mixed()
      .nullable()
      .required("Business license file is required"),
    company_website_url: Yup.string().required("Company website is required"),
    official_email_address: Yup.string()
      .email("Invalid email address")
      .required("Official email address is required"),
    contact_number: Yup.string()
      .matches(/^\d+$/, "Only numbers are allowed")
      .required("Contact number is required"),
    registered_address: Yup.string().required("Registered address is required"),
    tax_identifier: Yup.string().required("Tax identifier is required"),
    agree_terms: Yup.boolean().oneOf([true], "You must agree to the terms."),
    declare_info: Yup.boolean().oneOf(
      [true],
      "You must confirm the declaration."
    ),
  });

  const saveData = async (values) => {
    const formData = new FormData();
    formData.append("company_name", values.company_name);
    formData.append("company_address", values.company_address);
    formData.append("business_number", values.business_number);
    formData.append("country_registration", values.country_registration);
    formData.append("business_types", values.business_types?.join(","));
    formData.append("back_account_number", values.back_account_number);
    formData.append("account_holder_name", values.account_holder_name);
    formData.append("bank_name", values.bank_name);
    formData.append("signatory_name", values.signatory_name);
    formData.append("date_of_incorporation", values.date_of_incorporation);
    if (
      values.business_license_file &&
      values.business_license_file.length > 0
    ) {
      values.business_license_file.forEach((file) => {
        formData.append("business_license_file[]", file);
      });
    }

    // formData.append("upload_business_license", values.upload_business_license);
    formData.append("company_website_url", values.company_website_url);
    formData.append("official_email_address", values.official_email_address);
    formData.append("contact_number", values.contact_number);
    formData.append("registered_address", values.registered_address);
    formData.append("tax_identifier", values.tax_identifier);

    formData.append("agree_terms", values.agree_terms ? "true" : "false");
    formData.append("declare_info", values.declare_info ? "true" : "false");
    console.log(formData, "formData");
    const response = await apiClient(
      "profile/business_details/update",
      "post",
      {
        body: formData,
      },
      true
    );
  };

  const fetchDetails = async () => {
    const response = await apiClient("profile/business_details", "get");
    const selectedBussinessType = JSON.parse(
      response?.data?.business_type
    )?.find((e) => +e.toggle === 1)?.name;
    setInitialValues({
      company_name: response?.data.company_name || "",
      company_address: response?.data.registered_address || "",
      business_number: response?.data?.registration_number || "",
      country_registration: response?.data.country_of_registration || "",
      business_types: [
        selectedBussinessType ? selectedBussinessType : "Manufacturers",
      ],
      back_account_number: response?.data.bank_account_number || "",
      account_holder_name: response?.data.account_holder_name || "",
      bank_name: response?.data.bank_name || "",
      signatory_name: response?.data.signatory_name || "",
      date_of_incorporation: response?.data.date_of_incorporation || "",
      // upload_business_license: response?.data.upload_business_license || "",
      business_license_file: null,
      company_website_url: response?.data?.official_website || "",
      official_email_address: response?.data?.company_official_email || "",
      contact_number: response?.data.company_official_phone || "",
      registered_address: response?.data?.registered_address || "",
      tax_identifier: response?.data.taxation_no || "",
      agree_terms: response?.data.agree_terms || false,
      declare_info: response?.data.declare_info || false,
      business_verified: response?.data?.business_verified || false,
    });
    setLoading(false);
  };

  useEffect(() => {
    fetchDetails();
  }, []);
  const handleClose1 = () => {
    setOpen1(false);
  };

  if (loading)
    return (
      <>
        <BusniessVerifiedSkeleton />
      </>
    );
  return (
    <>
      <BusinessVerifiedouterBox>
        <VerifiedInnerBox>
          <VerifiedHeading>
            <Heading>Business Verification Process</Heading>
          </VerifiedHeading>
          <VerifySection>
            <Grid container spacing={2}>
              <Grid item xs={12} sm={12} md={4} lg={4}>
                <Box className="Section-One">
                  <Box className="center">
                    <img src="/assets/images/pcVerified.svg" alt="" />
                  </Box>
                  <Box className="content">
                    <Typography className="subheading">
                      Why Get Verified?
                    </Typography>
                    <Typography className="subtext">
                      Getting verified is the first step to becoming a trusted
                      seller on Power Cozmo.
                    </Typography>
                    <Typography className="subheading">
                      Verified sellers get:
                    </Typography>
                    <Box>
                      <List>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="A Verified Badge on their profile and listings" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="Access to premium buyer inquiries" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="Better chances of winning high-value deal" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="Higher ranking in search and category pages" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="Eligibility for exclusive programs and promotions" />
                        </ListItem>
                      </List>
                    </Box>
                  </Box>
                </Box>
              </Grid>
              <Grid item xs={12} sm={12} md={4} lg={4}>
                <Box className="Section-Two">
                  <Box className="center">
                    <img src="/assets/images/document.svg" alt="" />
                  </Box>
                  <Box className="content">
                    <Typography className="subheading">
                      What You’ll Need to Submit
                    </Typography>
                    <Typography className="subtext">
                      To complete your verification, you’ll be asked to provide:
                    </Typography>
                    <Box className="document-section">
                      <List>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="Business registration documents (Certificate of Incorporation, PAN, CIN etc.)" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="Proof of identity (Aadhaar, PAN, ID Proof etc.)" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="Company details (name, address, contact info)" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="Bank account details (optional, for future payouts and trust verification)" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="Make sure your documents are clear, valid, and up to date." />
                        </ListItem>
                      </List>
                    </Box>
                  </Box>
                </Box>
              </Grid>
              <Grid item xs={12} sm={12} md={4} lg={4}>
                <Box className="Section-Three">
                  <Box className="center">
                    <img src="/assets/images/hour-glass.svg" alt="" />
                  </Box>
                  <Box className="content">
                    <Typography className="subheading">
                      What Happens After Submission?
                    </Typography>
                    <Typography className="subheading withoutText">
                      Once submitted:
                    </Typography>
                    <Box>
                      <List>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="Our team will review your documents within 24–48 hours" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="You’ll receive an update by email and in your dashboard" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="If approved, your Verified Seller Badge will be activated" />
                        </ListItem>
                        <ListItem disablePadding>
                          <ListItemIcon>
                            <CheckIcon />
                          </ListItemIcon>
                          <ListItemText primary="If we need more info, we’ll reach out to you directly" />
                        </ListItem>
                      </List>
                    </Box>
                  </Box>
                </Box>
              </Grid>
            </Grid>
          </VerifySection>
        </VerifiedInnerBox>
        <Formik
          initialValues={initialValues}
          validationSchema={validationSchema}
          onSubmit={(values) => {
            if (!values.business_license_file) {
              toast.error("Upload file");
              return;
            }
            if (!publishing) {
              handleClickOpen();
              setPublishing(true);
              return;
            }
            if (initialValues?.business_verified) {
              setInitialValues((prev) => ({
                ...prev,
                business_verified: false,
              }));
              setPublishing(false);
              setOpen1(true);
              return;
            }
            saveData(values);
            setOpen(false);
            setOpen1(false);
            setPublishing(false);
          }}
        >
          {({
            getFieldProps,
            errors,
            touched,
            values,
            setFieldValue,
            handleSubmit,
          }) => {
            return (
              <Form>
                <BootstrapDialog
                  onClose={handleClose1}
                  aria-labelledby="customized-dialog-title"
                  open={open1}
                >
                  <Box>
                    <Box
                      sx={{
                        display: "flex",
                        justifyContent: "flex-end",
                        padding: "15px",
                      }}
                    >
                      <Box
                        sx={{
                          height: "30px",
                          width: "30px",
                          borderRadius: "50%",
                          background: "#FFE8EC",
                          display: "flex",
                          justifyContent: "center",
                          alignItems: "center",
                          cursor: "pointer",
                          "& svg": {
                            color: "#d7282f",
                          },
                        }}
                      >
                        <CloseOutlinedIcon onClick={() => setOpen1(false)} />
                      </Box>
                    </Box>
                    <Box
                      sx={{
                        display: "flex",
                        justifyContent: "center",
                      }}
                    >
                      <Box
                        sx={{
                          height: "50px",
                          width: "50px",
                          borderRadius: "50%",
                          border: "1px solid #d7282f",
                          display: "flex",
                          justifyContent: "center",
                          alignItems: "center",
                          "& svg": {
                            color: "#d7282f",
                          },
                        }}
                      >
                        <CloseOutlinedIcon
                          sx={{
                            height: "50px",
                            width: "50px",
                          }}
                        />
                      </Box>
                    </Box>

                    <MinisiteBtnPopup
                      sx={{
                        color: "#231f20",
                        padding: "16px 25px",
                        fontSize: "23px",
                        lineHeight: "30px",
                      }}
                    >
                      Are you sure?
                    </MinisiteBtnPopup>
                  </Box>
                  <MinisiteBtnPopupContent>
                    <PopupContentInner>
                      <Typography sx={{ textAlign: "center" }}>
                        Editing your verified company details will remove your
                        Verified Seller badge. You will need to complete the
                        Business Verification Process again to regain
                        verification. <br /> Do you want to proceed?
                      </Typography>
                    </PopupContentInner>
                  </MinisiteBtnPopupContent>
                  <PopUpAction>
                    <PopUpCancelBTN onClick={() => handleSubmit()}>
                      Proceed
                    </PopUpCancelBTN>
                    {/* <PopUpSaveBTN onClick={() => router.push("/business-verification")}>
            Proceed
          </PopUpSaveBTN> */}
                  </PopUpAction>
                </BootstrapDialog>
                <FromSection>
                  <VerifiedHeading>
                    <Heading>Business Verification Form</Heading>
                  </VerifiedHeading>
                  <VerifiedInnerBox>
                    <Box py={6} className="accordion">
                      <Accordion>
                        <AccordionSummary
                          expandIcon={<ExpandMoreIcon />}
                          aria-controls="panel1-content"
                          id="panel1-header"
                        >
                          Basic Company Information
                        </AccordionSummary>
                        <AccordionDetails>
                          <Box className="accordion-inner">
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Company Official Name
                              </Typography>
                              <TextField
                                {...getFieldProps("company_name")}
                                error={Boolean(
                                  touched.company_name && errors.company_name
                                )}
                                helperText={
                                  touched.company_name && errors.company_name
                                }
                                placeholder="Enter Company Name Here"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Company Official Address
                              </Typography>
                              <TextField
                                {...getFieldProps("company_address")}
                                error={Boolean(
                                  touched?.company_address &&
                                    errors.company_address
                                )}
                                helperText={
                                  touched?.company_address &&
                                  errors.company_address
                                }
                                placeholder="Enter your Company Address here"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Business Registration Number
                              </Typography>
                              <TextField
                                {...getFieldProps("business_number")}
                                error={Boolean(
                                  touched?.business_number &&
                                    errors.business_number
                                )}
                                helperText={
                                  touched?.business_number &&
                                  errors.business_number
                                }
                                placeholder="Enter Company Registration Number here"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Country of Registration
                              </Typography>
                              <TextField
                                {...getFieldProps("country_registration")}
                                error={Boolean(
                                  touched?.country_registration &&
                                    errors.country_registration
                                )}
                                helperText={
                                  touched?.country_registration &&
                                  errors.country_registration
                                }
                                placeholder="Country of Registration"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Business Type
                              </Typography>
                              <FormGroup>
                                <FormControlLabel
                                  control={
                                    <CustomCheckbox
                                      checked={values.business_types.includes(
                                        "Manufacturers"
                                      )}
                                      onChange={(e) => {
                                        if (e.target.checked) {
                                          setFieldValue("business_types", [
                                            ...values.business_types,
                                            "Manufacturers",
                                          ]);
                                        } else {
                                          setFieldValue(
                                            "business_types",
                                            values.business_types.filter(
                                              (item) => item !== "Manufacturers"
                                            )
                                          );
                                        }
                                      }}
                                    />
                                  }
                                  label="Manufacturers "
                                />
                                <FormControlLabel
                                  control={
                                    <CustomCheckbox
                                      checked={values.business_types.includes(
                                        "Agent & Representative"
                                      )}
                                      onChange={(e) => {
                                        if (e.target.checked) {
                                          setFieldValue("business_types", [
                                            ...values.business_types,
                                            "Agent & Representative",
                                          ]);
                                        } else {
                                          setFieldValue(
                                            "business_types",
                                            values.business_types.filter(
                                              (item) =>
                                                item !==
                                                "Agent & Representative"
                                            )
                                          );
                                        }
                                      }}
                                    />
                                  }
                                  label="Agent & Representative"
                                />
                                <FormControlLabel
                                  control={
                                    <CustomCheckbox
                                      checked={values.business_types.includes(
                                        "ADistributor"
                                      )}
                                      onChange={(e) => {
                                        if (e.target.checked) {
                                          setFieldValue("business_types", [
                                            ...values.business_types,
                                            "ADistributor",
                                          ]);
                                        } else {
                                          setFieldValue(
                                            "business_types",
                                            values.business_types.filter(
                                              (item) => item !== "ADistributor"
                                            )
                                          );
                                        }
                                      }}
                                    />
                                  }
                                  label="ADistributor"
                                />
                                <FormControlLabel
                                  control={
                                    <CustomCheckbox
                                      checked={values.business_types.includes(
                                        "Wholesaler"
                                      )}
                                      onChange={(e) => {
                                        if (e.target.checked) {
                                          setFieldValue("business_types", [
                                            ...values.business_types,
                                            "Wholesaler",
                                          ]);
                                        } else {
                                          setFieldValue(
                                            "business_types",
                                            values.business_types.filter(
                                              (item) => item !== "Wholesaler"
                                            )
                                          );
                                        }
                                      }}
                                    />
                                  }
                                  label="Wholesaler"
                                />
                                <FormControlLabel
                                  control={
                                    <CustomCheckbox
                                      checked={values.business_types.includes(
                                        "Retailer"
                                      )}
                                      onChange={(e) => {
                                        if (e.target.checked) {
                                          setFieldValue("business_types", [
                                            ...values.business_types,
                                            "Retailer",
                                          ]);
                                        } else {
                                          setFieldValue(
                                            "business_types",
                                            values.business_types.filter(
                                              (item) => item !== "Retailer"
                                            )
                                          );
                                        }
                                      }}
                                    />
                                  }
                                  label="Retailer"
                                />
                                <FormControlLabel
                                  control={
                                    <CustomCheckbox
                                      checked={values.business_types.includes(
                                        "Reseller"
                                      )}
                                      onChange={(e) => {
                                        if (e.target.checked) {
                                          setFieldValue("business_types", [
                                            ...values.business_types,
                                            "Reseller",
                                          ]);
                                        } else {
                                          setFieldValue(
                                            "business_types",
                                            values.business_types.filter(
                                              (item) => item !== "Reseller"
                                            )
                                          );
                                        }
                                      }}
                                    />
                                  }
                                  label="Reseller"
                                />
                              </FormGroup>
                            </Box>
                          </Box>
                        </AccordionDetails>
                      </Accordion>
                      <Accordion>
                        <AccordionSummary
                          expandIcon={<ExpandMoreIcon />}
                          aria-controls="panel1-content"
                          id="panel1-header"
                        >
                          Contact Information
                        </AccordionSummary>
                        <AccordionDetails>
                          <Box className="accordion-inner">
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Registered Address
                              </Typography>
                              <TextField
                                {...getFieldProps("registered_address")}
                                error={Boolean(
                                  touched?.registered_address &&
                                    errors.registered_address
                                )}
                                helperText={
                                  touched?.registered_address &&
                                  errors.registered_address
                                }
                                placeholder="Registered Address"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Contact Number
                              </Typography>
                              <TextField
                                {...getFieldProps("contact_number")}
                                error={Boolean(
                                  touched?.contact_number &&
                                    errors.contact_number
                                )}
                                helperText={
                                  touched?.contact_number &&
                                  errors.contact_number
                                }
                                placeholder="Contact Number"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                                inputProps={{
                                  inputMode: "numeric",
                                  pattern: "[0-9]*",
                                }}
                                // type="tel" // or type="number"
                              />
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Official Email Address
                              </Typography>
                              <TextField
                                {...getFieldProps("official_email_address")}
                                error={Boolean(
                                  touched?.official_email_address &&
                                    errors.official_email_address
                                )}
                                helperText={
                                  touched?.official_email_address &&
                                  errors.official_email_address
                                }
                                placeholder="Official Email Address"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Company Website URL (domain)
                              </Typography>
                              <TextField
                                {...getFieldProps("company_website_url")}
                                error={Boolean(
                                  touched?.company_website_url &&
                                    errors.company_website_url
                                )}
                                helperText={
                                  touched?.company_website_url &&
                                  errors.company_website_url
                                }
                                placeholder="Company Website URL (domain)"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                          </Box>
                        </AccordionDetails>
                      </Accordion>
                      <Accordion>
                        <AccordionSummary
                          expandIcon={<ExpandMoreIcon />}
                          aria-controls="panel1-content"
                          id="panel1-header"
                        >
                          Business License
                        </AccordionSummary>
                        <AccordionDetails>
                          <Box className="accordion-inner">
                            <Box
                              sx={{
                                display: "flex",
                                alignItems: "center",
                                gap: "12px",
                                "@media screen and (max-width:1024px)": {
                                  flexDirection: "column",
                                },
                              }}
                            >
                              <Box
                                className="From-Outer-Style"
                                sx={{
                                  width: "90%",
                                  "@media screen and (max-width:1024px)": {
                                    width: "100%",
                                  },
                                }}
                              >
                                <Typography className="From-label">
                                  Upload Business license
                                </Typography>
                                <TextField
                                  // {...getFieldProps("upload_business_license")}
                                  // error={Boolean(
                                  //   touched?.upload_business_license &&
                                  //     errors.upload_business_license
                                  // )}
                                  // helperText={
                                  //   touched?.upload_business_license &&
                                  //   errors.upload_business_license
                                  // }
                                  disabled
                                  placeholder={
                                    values?.business_license_file?.length > 0
                                      ? values.business_license_file
                                          .map((el) => el.name)
                                          .join(", ")
                                      : "Upload Business license"
                                  }
                                  id="standard-basic"
                                  variant="standard"
                                  fullWidth
                                />
                                {errors?.business_license_file && (
                                  <Typography
                                    sx={{ fontSize: "10px", color: "#d7282f" }}
                                  >
                                    File upload required.
                                  </Typography>
                                )}
                              </Box>
                              <UploadBTN>
                                <UploadIcon />
                                Upload
                                <VisuallyHiddenInput
                                  type="file"
                                  multiple
                                  onChange={(event) => {
                                    const files = event.currentTarget.files;
                                    setFieldValue(
                                      "business_license_file",
                                      Array.from(files)
                                    );
                                  }}
                                />{" "}
                              </UploadBTN>
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Date of Incorporation
                              </Typography>
                              {/* <TextField
                              {...getFieldProps("date_of_incorporation")}
                              error={Boolean(
                                touched?.date_of_incorporation &&
                                  errors.date_of_incorporation
                              )}
                              helperText={
                                touched?.date_of_incorporation &&
                                errors.date_of_incorporation
                              }
                              placeholder="Date of Incorporation"
                              id="standard-basic"
                              variant="standard"
                              fullWidth
                            /> */}
                              <LocalizationProvider dateAdapter={AdapterDayjs}>
                                {/* <DemoContainer components={["DatePicker"]}> */}
                                <DatePicker
                                  value={values?.date_of_incorporation}
                                  onChange={(newValue) =>
                                    setFieldValue(
                                      "date_of_incorporation",
                                      newValue
                                    )
                                  }
                                  slotProps={{
                                    textField: {
                                      variant: "standard",
                                      error: Boolean(
                                        touched.date_of_incorporation &&
                                          errors.date_of_incorporation
                                      ),
                                      helperText:
                                        touched.date_of_incorporation &&
                                        errors.date_of_incorporation,
                                      sx: {
                                        width: "100%",
                                        "& .MuiInputBase-root": {
                                          border: "none",
                                          borderBottom: "1px dotted #000",
                                          borderRadius: 0,
                                        },
                                        "& .MuiInput-underline:before, & .MuiInput-underline:after":
                                          {
                                            display: "none",
                                          },
                                      },
                                    },
                                  }}
                                />

                                {/* </DemoContainer> */}
                              </LocalizationProvider>
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Authorized Signatory Name
                              </Typography>
                              <TextField
                                {...getFieldProps("signatory_name")}
                                error={Boolean(
                                  touched?.signatory_name &&
                                    errors.signatory_name
                                )}
                                helperText={
                                  touched?.signatory_name &&
                                  errors.signatory_name
                                }
                                placeholder="Authorized Signatory Name"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                          </Box>
                        </AccordionDetails>
                      </Accordion>
                      <Accordion>
                        <AccordionSummary
                          expandIcon={<ExpandMoreIcon />}
                          aria-controls="panel1-content"
                          id="panel1-header"
                        >
                          Banking Information
                        </AccordionSummary>
                        <AccordionDetails>
                          <Box className="accordion-inner">
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Bank Name
                              </Typography>
                              <TextField
                                {...getFieldProps("bank_name")}
                                error={Boolean(
                                  touched?.bank_name && errors.bank_name
                                )}
                                helperText={
                                  touched?.bank_name && errors.bank_name
                                }
                                placeholder="Bank Name"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Bank Account Number
                              </Typography>
                              <TextField
                                {...getFieldProps("back_account_number")}
                                error={Boolean(
                                  touched?.back_account_number &&
                                    errors.back_account_number
                                )}
                                helperText={
                                  touched?.back_account_number &&
                                  errors.back_account_number
                                }
                                placeholder="Account Number"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Account Holder Name
                              </Typography>
                              <TextField
                                {...getFieldProps("account_holder_name")}
                                error={Boolean(
                                  touched?.account_holder_name &&
                                    errors.account_holder_name
                                )}
                                helperText={
                                  touched?.account_holder_name &&
                                  errors.account_holder_name
                                }
                                placeholder="Account Holder Name"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                            <Box className="From-Outer-Style">
                              <Typography className="From-label">
                                Tax Identification Number
                              </Typography>
                              <TextField
                                {...getFieldProps("tax_identifier")}
                                error={Boolean(
                                  touched?.tax_identifier &&
                                    errors.tax_identifier
                                )}
                                helperText={
                                  touched?.tax_identifier &&
                                  errors.tax_identifier
                                }
                                placeholder="Tax Identification Number"
                                id="standard-basic"
                                variant="standard"
                                fullWidth
                              />
                            </Box>
                          </Box>
                        </AccordionDetails>
                      </Accordion>
                    </Box>

                    <Box>
                      <Box>
                        <FormControlLabel
                          className="checkbox-label"
                          value="end"
                          control={
                            <CustomCheckbox
                              checked={values.agree_terms}
                              onChange={(e) => {
                                setFieldValue("agree_terms", e.target?.checked);
                              }}
                            />
                          }
                          label="I agree to the Terms and Conditions. "
                          labelPlacement="end"
                        />
                        {errors?.agree_terms && (
                          <>
                            <Typography
                              component={"span"}
                              sx={{ fontSize: "10px", color: "#d7282f" }}
                            >
                              Please agree to the terms before submitting.
                            </Typography>
                          </>
                        )}
                      </Box>
                      <Box>
                        <FormControlLabel
                          className="checkbox-label"
                          value="end"
                          control={
                            <CustomCheckbox
                              checked={values.declare_info}
                              onChange={(e) => {
                                setFieldValue(
                                  "declare_info",
                                  e.target?.checked
                                );
                              }}
                            />
                          }
                          label="I declare that all the information provided is accurate and true to the best of my knowledge."
                          labelPlacement="end"
                        />
                        {errors?.declare_info && (
                          <Typography
                            component={"span"}
                            sx={{ fontSize: "10px", color: "#d7282f" }}
                          >
                            Please agree to the terms before submitting.
                          </Typography>
                        )}
                      </Box>
                      <BTNbox py={3} sx={{}}>
                        <CancelBTN>Cancels</CancelBTN>
                        <SaveBTN type="submit">Submit</SaveBTN>
                        <BootstrapDialog
                          onClose={handleClose}
                          aria-labelledby="customized-dialog-title"
                          open={open}
                        >
                          <PopupHeading>
                            Are you sure to want to submit the form ?
                          </PopupHeading>
                          <Box
                            sx={{
                              width: "90%",
                              margin: "20px auto",
                              "& svg": {
                                color: "#0ABB75",
                                margin: "2px 10px 0 0",
                                fontSize: "20px",
                              },
                              "& .MuiListItem-root": {
                                paddingBottom: "0px",
                              },
                            }}
                          >
                            <PopUpSubHeading>
                              Important Information Before You Proceed:
                            </PopUpSubHeading>
                            <List>
                              <ListItem>
                                <span>
                                  <CheckIcon />
                                </span>
                                <ListItemText primary="Your business details will be submitted for review by the Power Cozmo team." />
                              </ListItem>
                              <ListItem>
                                <span>
                                  <CheckIcon />
                                </span>
                                <ListItemText primary="Our team will verify your submission within 24–48 hours." />
                              </ListItem>
                            </List>
                            <PopUpSubHeading mt={2}>
                              Please Note the Following Rules:
                            </PopUpSubHeading>
                            <List>
                              <ListItem>
                                <span>
                                  <CheckIcon />
                                </span>
                                <ListItemText primary="Once verified, you cannot update your business information for the next 30 days." />
                              </ListItem>
                              <ListItem>
                                <span>
                                  <CheckIcon />
                                </span>
                                <ListItemText primary="If you update any business details after verification, your Verified Badge will be removed, and you’ll need to resubmit the full verification process." />
                              </ListItem>
                              <ListItem>
                                <span>
                                  <CheckIcon />
                                </span>
                                <ListItemText primary="You can perform this process a maximum of 3 times in a year.." />
                              </ListItem>
                            </List>
                            <PopUpSubHeading>
                              Make Sure the Information you have provided is
                              correct and true to your business
                            </PopUpSubHeading>
                            <PopUpAction>
                              <PopUpCancelBTN onClick={handleClose}>
                                Cancel
                              </PopUpCancelBTN>
                              <PopUpSaveBTN onClick={() => handleSubmit()}>
                                Publish
                              </PopUpSaveBTN>
                            </PopUpAction>
                          </Box>
                        </BootstrapDialog>
                      </BTNbox>
                    </Box>
                  </VerifiedInnerBox>
                </FromSection>
              </Form>
            );
          }}
        </Formik>
      </BusinessVerifiedouterBox>
    </>
  );
}