import { useEffect, useState } from "react";

// material-ui
import { useTheme } from "@mui/material/styles";
import {
  Box,
  Button,
  FormLabel,
  Grid,
  InputLabel,
  MenuItem,
  Select,
  Stack,
  TextField,
  Typography,
  Autocomplete,
} from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

// project import
import Avatar from "components/@extended/Avatar";
import MainCard from "components/MainCard";
import { ThemeMode } from "config";
import axios from "axios";
// assets

import { usePlacesWidget } from "react-google-autocomplete";
import Geocode from "react-geocode";
import Loader from "components/Loader";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
import dayjs from "dayjs";

const Createrider = () => {
  const theme = useTheme();

  const [mobilenumber, setMobilenumber] = useState("");
  const [emailaddress, setEmailaddress] = useState("");
  const [city, setCity] = useState("");
  const [zipcode, setZipcode] = useState("");
  const [address, setAddress] = useState("");
  const [state, setState] = useState("");
  const [suburb, setSuburb] = useState("");
  const [firstname, setFirstname] = useState("");
  const [lastname, setLastname] = useState("");
  const [idno, setIdno] = useState("");
  const [basefare, setBasefare] = useState("");
  const [additionalkms, setAdditionalkms] = useState("");
  const [othercharges, setOthercharges] = useState("");
  const [account, setAccount] = useState({});
  const [accountname, setAccountname] = useState("");
  const [accountno, setAccountno] = useState("");
  const [bankname, setBankname] = useState("");
  const [ifsc, setIfsc] = useState("");
  const [branch, setBranch] = useState("");
  const [vehicle, setVehicle] = useState({});
  const [vehicleno, setVehicleno] = useState("");
  const [Modelyear, setModelyear] = useState("");
  const [vehiclecolor, setVehiclecolor] = useState("");
  const [licenseno, setLicenseno] = useState("");
  const [insuranceno, setInsuranceno] = useState("");
  const [expirydate, setExpirydate] = useState("");
  const [partner, setPartner] = useState({});
  const [vehiclelist, setVehiclelist] = useState([]);
  const [accountlist, setAccountlist] = useState([]);
  const [partnerlist, setPartnerlist] = useState([]);
  const [shiftlist, setShiftlist] = useState([]);
  const [shift, setShift] = useState({});
  const navigate = useNavigate();

  Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
  // Geocode.setApiKey('AIzaSyCF4KatYCI3vqz1_H3kiHeyS3yCMfYToh8');

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    fetchpartnerlist();
  }, []);

  useEffect(() => {
    if (partner.applocationid) {
      fetchridershifts(partner.applocationid);
    }
  }, [partner.applocationid]);

  const opentoast = (message) => {
    enqueueSnackbar(message, {
      variant: "error",
      anchorOrigin: { vertical: "top", horizontal: "right" },
      autoHideDuration: 2000,
    });
  };

  const fetchvehicle = async () => {
    setLoading(true);
    await axios
      .get(`${process.env.REACT_APP_URL}/utils/getapptypes?tag=vehicle`)
      .then((res) => {
        console.log("fetchvehicle", res.data.details);
        setVehiclelist(res.data.details);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };
  useEffect(() => {
    fetchvehicle();
  }, []);

  const fetchaccounttype = async () => {
    setLoading(true);
    await axios
      .get(`${process.env.REACT_APP_URL}/utils/getapptypes?tag=accounttype`)
      .then((res) => {
        console.log("fetchaccounttype", res.data.details);
        setAccountlist(res.data.details);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };
  useEffect(() => {
    fetchaccounttype();
  }, []);

  const fetchpartnerlist = async () => {
    setLoading(true);
    await axios
      .get(`${process.env.REACT_APP_URL}/partners/getpartners`)
      .then((res) => {
        console.log(res);
        // if (res.data.status) {
        let arr = [];
        res.data.details.map((val) => {
          arr.push({
            ...val,
            label: val.partnername,
          });
        });
        setPartnerlist([...arr]);
        console.log(arr);
        // }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };

  const fetchridershifts = async (pid) => {
    console.log("pid", pid);
    setLoading(true);
    await axios
      .get(
        `${process.env.REACT_APP_URL}/partners/getridershifts/?applocationid=${pid}`
      )
      .then((res) => {
        console.log(res);
        // if (res.data.status) {
        let arr = [];
        res.data.details.map((val) => {
          arr.push({
            ...val,
            label: val.shiftname,
          });
        });
        setShiftlist([...arr]);
        console.log(arr);
        // }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };

  const { ref: materialRef } = usePlacesWidget({
    apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
    onPlaceSelected: (place) => {
      console.log("place", place);
      setAddress(place.formatted_address);
      let city1, zipcode1, state1, suburb1;
      for (let i = 0; i < place.address_components.length; i++) {
        for (let j = 0; j < place.address_components[i].types.length; j++) {
          switch (place.address_components[i].types[j]) {
            case "locality":
              city1 = place.address_components[i].long_name;
              break;
            case "administrative_area_level_1":
              state1 = place.address_components[i].long_name;
              break;
            case "postal_code":
              zipcode1 = place.address_components[i].long_name;
              break;
            case "sublocality":
              suburb1 = place.address_components[i].long_name;
              break;
          }
        }
      }
      setCity(city1 || "");
      setState(state1 || "");
      setZipcode(zipcode1 || "");
      setSuburb(suburb1 || "");
    },
    options: {
      types: ["address" || "geocode"],
    },
  });
  // ======================================================= || createriderobj || =======================================================
  const createriderobj = async () => {
    if (!firstname) {
      opentoast("Fill First name");
    } else if (!mobilenumber) {
      opentoast("Fill Mobile Number");
    } else if (!lastname) {
      opentoast("Fill Lastname");
    } else if (!address) {
      opentoast("Fill Address");
    } else if (!city) {
      opentoast("Fill City");
    } else if (!suburb) {
      opentoast("Fill Location");
    } else if (!partner.partnerid) {
      opentoast("Choose Partner");
    } else if (!idno) {
      opentoast("Fill Identificationno");
    } else if (!basefare) {
      opentoast("Choose Shift Type");
    } else if (!accountno) {
      opentoast("Fill Accountno");
    } else if (!accountname) {
      opentoast("Fill Account Name");
    } else if (!account.typename) {
      opentoast("Choose Account Type");
    } else if (!bankname) {
      opentoast("Fill Bankname");
    } else if (!ifsc) {
      opentoast("Fill Ifsc");
    } else if (!branch) {
      opentoast("Fill Branch");
    } else if (!vehicle.typename) {
      opentoast("Choose Vehicle Name");
    } else if (!vehicleno) {
      opentoast("Fill Vehicle No");
    } else if (!Modelyear) {
      opentoast("Fill Model Year");
    } else if (!vehiclecolor) {
      opentoast("Fill Vehicle Color");
    } else if (!licenseno) {
      opentoast("Fill License No");
    } else if (!insuranceno) {
      opentoast("Fill Insurance No");
    } else if (!expirydate) {
      opentoast("Choose Expiry Date");
    } else {
      let obj = {
        userid: 0,
        configid: 6,
        contactno: mobilenumber,
        firstname: firstname,
        lastname: lastname,
        email: emailaddress,
        address: address,
        suburb: suburb,
        city: city,
        state: state,
        partnerid: partner.partnerid,
        applocationid: partner.applocationid,
        ridersettings: {
          riderid: 0,
          userid: 0,
          partnerid: partner.partnerid,
          shiftid: shift.shiftid,
          identificationno: idno,
          basefare: parseFloat(parseFloat(basefare).toFixed(2)),
          additionalkm: parseFloat(parseFloat(additionalkms).toFixed(2)),
          othercharges: parseFloat(parseFloat(othercharges).toFixed(2)),
          accountno: accountno,
          accountname: accountname,
          accounttypeid: account.apptypeid,
          accounttpye: account.typename,
          bankname: bankname,
          ifsccode: ifsc,
          Branch: branch,
          vehicleid: vehicle.apptypeid,
          vehiclename: vehicle.typename,
          vehicleno: vehicleno,
          model: Modelyear,
          color: vehiclecolor,
          licenseno: licenseno,
          insuranceno: insuranceno,
          insurancedate: dayjs(expirydate).format("YYYY-MM-DD HH:mm:ss"),
        },
      };

      console.log(obj);

      setLoading(true);
      try {
        await axios
          .post(`${process.env.REACT_APP_URL}/partners/createrider`, obj)
          .then((res) => {
            console.log(res);
            if (res.data.status) {
              enqueueSnackbar(" Created Successfully ", {
                variant: "success",
                anchorOrigin: { vertical: "top", horizontal: "right" },
                autoHideDuration: 2000,
              });
              navigate("/riders");
            } else {
              enqueueSnackbar(res.data.message, {
                variant: "error",
                anchorOrigin: { vertical: "top", horizontal: "right" },
                autoHideDuration: 2000,
              });
            }

            setLoading(false);
          })
          .catch((err) => {
            console.log(err);

            setLoading(false);
            enqueueSnackbar(err.message, {
              variant: "error",
              anchorOrigin: { vertical: "top", horizontal: "right" },
              autoHideDuration: 2000,
            });
          });
      } catch (err) {
        console.log(err);
        setLoading(false);
      }
    }
  };
  return (
    <>
      {loading && <Loader />}

      <Grid item xs={12} sx={{ mb: 2 }}>
        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems="center"
        >
          <Typography variant="h3">Create Rider</Typography>
        </Stack>
      </Grid>
      <MainCard>
        <Grid container spacing={3}>
          <Grid
            item
            xs={12}
            //  sm={8}
          >
            <MainCard title="Contact Information" sx={{ height: "100%" }}>
              <Grid container spacing={3}>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-last-name">
                      First Name
                    </InputLabel>
                    <TextField
                      fullWidth
                      id="personal-last-name"
                      placeholder="Name"
                      onChange={(e) => setFirstname(e.target.value)}
                      value={firstname}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-last-name">
                      Last Name
                    </InputLabel>
                    <TextField
                      fullWidth
                      id="personal-last-name"
                      placeholder="Name"
                      onChange={(e) => setLastname(e.target.value)}
                      value={lastname}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>

                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-phone">
                      Phone Number
                    </InputLabel>
                    <Stack
                      direction="row"
                      justifyContent="space-between"
                      alignItems="center"
                      spacing={2}
                    >
                      <Select
                        defaultValue="+1"
                        disabled
                        sx={{ cursor: "not-allowed" }}
                      >
                        <MenuItem value="+1">+91</MenuItem>
                      </Select>
                      <TextField
                        type="number"
                        id="personal-phone"
                        fullWidth
                        placeholder="Phone Number"
                        onChange={(e) => {
                          if (e.target.value.toString().length <= 10) {
                            setMobilenumber(e.target.value);
                          }
                        }}
                        value={mobilenumber}
                        autoComplete="off"
                        // disabled
                        sx={{ cursor: "not-allowed" }}
                      />
                    </Stack>
                  </Stack>
                </Grid>

                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-email">
                      Email Address
                    </InputLabel>
                    <TextField
                      type="email"
                      fullWidth
                      // defaultValue="stebin.ben@gmail.com"
                      id="personal-email"
                      placeholder="Email Address"
                      onChange={(e) => setEmailaddress(e.target.value)}
                      value={emailaddress}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>

                <Grid item xs={12}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-address">Address</InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="Street 110-B Kalians Bag, Dewan, M.P. New York"
                      id="personal-address"
                      placeholder="Address"
                      value={address}
                      onChange={(e) => setAddress(e.target.value)}
                      inputRef={materialRef}
                    />
                  </Stack>
                </Grid>

                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Location
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Location"
                      onChange={(e) => setSuburb(e.target.value)}
                      value={suburb}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-zipcode">City</InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="956754"
                      // type='number'
                      id="personal-zipcode"
                      placeholder="City"
                      onChange={(e) => setCity(e.target.value)}
                      value={city}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>

                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">State</InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="State"
                      onChange={(e) => setState(e.target.value)}
                      value={state}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Identification No
                    </InputLabel>
                    <TextField
                      fullWidth
                      id="personal-location"
                      placeholder="Identification No"
                      onChange={(e) => setIdno(e.target.value)}
                      value={idno}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>

                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Choose Partner
                    </InputLabel>

                    <Autocomplete
                      renderInput={(params) => (
                        <TextField {...params} label="Choose" />
                      )}
                      // disabled
                      options={partnerlist}
                      // value={clientdetail}
                      onChange={(e, val) => {
                        if (val) {
                          setPartner(val);
                        } else {
                          setPartner({});
                        }
                      }}
                      freeSolo
                    />
                  </Stack>
                </Grid>
              </Grid>
            </MainCard>
          </Grid>
          <Grid
            item
            xs={12}
            //  sm={8}
          >
            <MainCard title="Charges">
              <Grid container spacing={3}>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Shift Type
                    </InputLabel>

                    <Autocomplete
                      renderInput={(params) => (
                        <TextField {...params} label="Choose" />
                      )}
                      // disabled
                      options={shiftlist}
                      // value={clientdetail}
                      onChange={(e, val) => {
                        if (val) {
                          setBasefare(val.basefare);
                          setAdditionalkms(val.additionalkm);
                          setOthercharges(val.additionalcharges);
                          setShift(val);
                        } else {
                          setBasefare("");
                          setAdditionalkms("");
                          setOthercharges("");
                          setShift({});
                        }
                      }}
                      freeSolo
                    />
                  </Stack>
                </Grid>

                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Base Fare
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Base Fare"
                      onChange={(e) => setBasefare(e.target.value)}
                      value={basefare}
                      autoComplete="off"
                      disabled
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Additional Kms
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Additional Kms"
                      onChange={(e) => setAdditionalkms(e.target.value)}
                      value={additionalkms}
                      autoComplete="off"
                      disabled
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Other Charges
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Other Charges"
                      onChange={(e) => setOthercharges(e.target.value)}
                      value={othercharges}
                      autoComplete="off"
                      disabled
                    />
                  </Stack>
                </Grid>
              </Grid>
            </MainCard>
          </Grid>
          <Grid
            item
            xs={12}
            //  sm={8}
          >
            <MainCard title="Bank Details">
              <Grid container spacing={3}>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Account No
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Account No"
                      onChange={(e) => setAccountno(e.target.value)}
                      value={accountno}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Account Name
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Account Name"
                      onChange={(e) => setAccountname(e.target.value)}
                      value={accountname}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Account Type
                    </InputLabel>

                    <Autocomplete
                      renderInput={(params) => (
                        <TextField {...params} label="Choose" />
                      )}
                      options={accountlist}
                      getOptionLabel={(option) => `${option.typename}` || ""}
                      onChange={(e, val) => {
                        if (val) {
                          setAccount(val);
                          // fetchroles(val.tenantid);
                        } else {
                          setAccount({});
                        }
                      }}
                      freeSolo
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Bank Name
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Bank Name"
                      onChange={(e) => setBankname(e.target.value)}
                      value={bankname}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      IFSC Code
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="IFSC Code"
                      onChange={(e) => setIfsc(e.target.value)}
                      value={ifsc}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">Branch</InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Branch"
                      onChange={(e) => setBranch(e.target.value)}
                      value={branch}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
              </Grid>
            </MainCard>
          </Grid>
          <Grid
            item
            xs={12}
            //  sm={8}
          >
            <MainCard title="Vehicle Details">
              <Grid container spacing={3}>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Vehicle Name
                    </InputLabel>

                    <Autocomplete
                      options={vehiclelist}
                      getOptionLabel={(option) => `${option.typename}` || ""}
                      renderInput={(params) => (
                        <TextField {...params} label="Choose" />
                      )}
                      onChange={(e, val) => {
                        if (val) {
                          setVehicle(val);
                        } else {
                          setVehicle({});
                        }
                      }}
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Vehicle No
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Vehicle No"
                      onChange={(e) => setVehicleno(e.target.value)}
                      value={vehicleno}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Model Year
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Model Year"
                      onChange={(e) => setModelyear(e.target.value)}
                      value={Modelyear}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Vehicle Color
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Vehicle Color"
                      onChange={(e) => setVehiclecolor(e.target.value)}
                      value={vehiclecolor}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      License No
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="License No"
                      onChange={(e) => setLicenseno(e.target.value)}
                      value={licenseno}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Insurance No
                    </InputLabel>
                    <TextField
                      fullWidth
                      // defaultValue="New York"
                      id="personal-location"
                      placeholder="Insurance No"
                      onChange={(e) => setInsuranceno(e.target.value)}
                      value={insuranceno}
                      autoComplete="off"
                    />
                  </Stack>
                </Grid>
                <Grid item xs={12} sm={6}>
                  <Stack spacing={1.25}>
                    <InputLabel htmlFor="personal-location">
                      Insurance Expiry Date
                    </InputLabel>
                    <LocalizationProvider
                      dateAdapter={AdapterDayjs}
                      //  sx={{ width: '100%' }}
                    >
                      <DatePicker
                        // label={dayjs(startdate).format('MM-DD-YYYY')}
                        label="Date"
                        onChange={(e) => {
                          setExpirydate(dayjs(e.$d).format("YYYY-MM-DD"));
                        }}
                        // value={dayjs(startdate)}
                        sx={{ width: "100%" }}
                        // disablePast
                        // minDate={dayjs().add(1, 'day')}
                      />
                    </LocalizationProvider>
                  </Stack>
                </Grid>
              </Grid>
            </MainCard>
          </Grid>

          {/* </Grid> */}

          {/*  */}
          {/* </Grid> */}
          <Grid item xs={12}>
            <Stack
              direction="row"
              justifyContent="flex-end"
              alignItems="center"
              spacing={2}
            >
              <Button
                variant="contained"
                onClick={() => {
                  createriderobj();
                }}
              >
                Create
              </Button>
            </Stack>
          </Grid>
        </Grid>
      </MainCard>
    </>
  );
};

export default Createrider;
