import React, { useEffect, useState } from "react";
import AlertDialog from "../components/AlertDialog";
import FormControl from "@mui/material/FormControl";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import { useSelector, useDispatch } from "react-redux";
import { Typography, TextField, Button, Grid, Card } from "@mui/material";
import { api } from "common";
import { useTranslation } from "react-i18next";
import { useNavigate, useLocation } from "react-router-dom";
import CircularLoading from "components/CircularLoading";
import { useParams } from "react-router-dom";
import { colors } from "components/Theme/WebTheme";
import { WEB_MAIN_COLOR, WEB_SECONDORY_COLOR, FONT_FAMILY } from "../common/sharedFunctions";
import { makeStyles } from "@mui/styles";
import GoBackButton from "components/GoBackButton";

const { formatNumberInput, handleVietnameseNumberInput } = api;

const useStyles = makeStyles((theme) => ({
  typography: {
    fontFamily: FONT_FAMILY,
  },
  textField: props => ({
    "& label.Mui-focused": {
      color: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: WEB_MAIN_COLOR(props?.settings?.appCat),
      },
    },
    "& input": {
      fontFamily: FONT_FAMILY,
    },
  }),
  selectField: props => ({
    color: "black",
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
  }),
  rootRtl_3: props => ({
    "& label": {
      right: 17,
      left: "auto",
      paddingRight: 12,
      fontFamily: FONT_FAMILY,
    },
    "& legend": {
      textAlign: "right",
      marginRight: 20,
      fontFamily: FONT_FAMILY,
    },
    "& label.Mui-focused": {
      color: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: WEB_MAIN_COLOR(props?.settings?.appCat),
      },
    },
    "& input": {
      fontFamily: FONT_FAMILY,
    },
  }),
  rootRtl: props => ({
    "& label": {
      right: 20,
      left: "auto",
      paddingRight: 20,
      fontFamily: FONT_FAMILY,
    },
    "& legend": {
      textAlign: "right",
      marginRight: 15,
      fontFamily: FONT_FAMILY,
    },
    "& label.Mui-focused": {
      color: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: WEB_MAIN_COLOR(props?.settings?.appCat),
      },
    },
    "& input": {
      fontFamily: FONT_FAMILY,
    },
  }),
  rootRtl_1: props => ({
    "& label": {
      right: 0,
      left: "auto",
      paddingRight: 20,
      fontFamily: FONT_FAMILY,
    },
    "& legend": {
      textAlign: "right",
      marginRight: 30,
      fontFamily: FONT_FAMILY,
    },
    "& label.Mui-focused": {
      color: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: WEB_MAIN_COLOR(props?.settings?.appCat),
      },
    },
    "& input": {
      fontFamily: FONT_FAMILY,
    },
  }),
  rootRtl_2: props => ({
    "& label": {
      right: 17,
      left: "auto",
      paddingRight: 12,
      fontFamily: FONT_FAMILY,
    },
    "& legend": {
      textAlign: "right",
      marginRight: 25,
      fontFamily: FONT_FAMILY,
    },
    "& label.Mui-focused": {
      color: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: WEB_MAIN_COLOR(props?.settings?.appCat),
      },
    },
    "& input": {
      fontFamily: FONT_FAMILY,
    },
  }),
  rootRtl_4: props => ({
    "& label": {
      right: 17,
      left: "auto",
      paddingRight: 12,
      fontFamily: FONT_FAMILY,
    },
    "& legend": {
      textAlign: "right",
      marginRight: 15,
      fontFamily: FONT_FAMILY,
    },
    "& label.Mui-focused": {
      color: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: WEB_MAIN_COLOR(props?.settings?.appCat),
      },
    },
    "& input": {
      fontFamily: FONT_FAMILY,
    },
  }),
  rootRtl_5: props => ({
    "& label": {
      right: 17,
      left: "auto",
      paddingRight: 12,
      fontFamily: FONT_FAMILY,
    },
    "& legend": {
      textAlign: "right",
      marginRight: 25,
      fontFamily: FONT_FAMILY,
    },
    "& label.Mui-focused": {
      color: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiFilledInput-underline:after": {
      borderBottomColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& .MuiOutlinedInput-root": {
      "&.Mui-focused fieldset": {
        borderColor: WEB_MAIN_COLOR(props?.settings?.appCat),
      },
    },
    "& input": {
      fontFamily: FONT_FAMILY,
    },
  }),
  selectField_rtl: props => ({
    color: "black",
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: WEB_MAIN_COLOR(props?.settings?.appCat),
    },
    "& label": {
      right: 0,
      left: "auto",
      fontFamily: FONT_FAMILY,
    },
    "& legend": {
      textAlign: "right",
      marginRight: 35,
      fontFamily: FONT_FAMILY,
    },
  }),
  right: {
    textAlign: "right",
    right: 0,
    left: "auto",
    paddingRight: 40,
    fontFamily: FONT_FAMILY,
  },
}));
const EditCarType = () => {
  const { t, i18n } = useTranslation();
  const { id } = useParams();
  const isRTL = i18n.dir();
  const settings = useSelector((state) => state.settingsdata.settings);
  const cartypes = useSelector((state) => state.cartypes);
  const carlistdata = useSelector((state) => state.carlistdata);
  const staticusers = useSelector((state) => state.usersdata.staticusers);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const [loding, setLoding] = useState(false);
  const [commonAlert, setCommonAlert] = useState({ open: false, msg: "" });
  const { editCarType, updateUserCar, editCar, convertLanguage } = api;
  const [oldData, setOldData] = useState(null);
  const [data, setData] = useState(null);
  const classes = useStyles({settings});
  const { state } = useLocation()
  const auth = useSelector((state) => state.auth);

  // Display states for Vietnamese formatted amounts
  const [displayBaseFare, setDisplayBaseFare] = useState("");
  const [displayMinFare, setDisplayMinFare] = useState("");
  const [displayRatePerHour, setDisplayRatePerHour] = useState("");
  const [displayRatePerDistance, setDisplayRatePerDistance] = useState("");
  const [displayConvenienceFees, setDisplayConvenienceFees] = useState("");
  const [displayFleetAdminFee, setDisplayFleetAdminFee] = useState("");
  const MAIN_COLOR = WEB_MAIN_COLOR(settings?.appCat);
  const SECONDORY_COLOR = WEB_SECONDORY_COLOR(settings?.appCat);

  useEffect(() => {
    if (id) {
      if (cartypes && cartypes.cars) {
        const carData = cartypes.cars.filter(
          (item) => item.id === id.toString()
        )[0];
        if (!carData) {
          navigate("/404");
        }
        setData(carData);
        setOldData(carData);

        // Initialize display values for Vietnamese formatting
        if (settings?.country === "Vietnam") {
          setDisplayBaseFare(formatNumberInput(carData.base_fare || 0, "vi-VN"));
          setDisplayMinFare(formatNumberInput(carData.min_fare || 0, "vi-VN"));
          setDisplayRatePerHour(formatNumberInput(carData.rate_per_hour || 0, "vi-VN"));
          setDisplayRatePerDistance(formatNumberInput(carData.rate_per_unit_distance || 0, "vi-VN"));
          setDisplayConvenienceFees(formatNumberInput(carData.convenience_fees || 0, "vi-VN"));
          setDisplayFleetAdminFee(formatNumberInput(carData.fleet_admin_fee || 0, "vi-VN"));
        } else {
          setDisplayBaseFare(carData.base_fare?.toString() || "0");
          setDisplayMinFare(carData.min_fare?.toString() || "0");
          setDisplayRatePerHour(carData.rate_per_hour?.toString() || "0");
          setDisplayRatePerDistance(carData.rate_per_unit_distance?.toString() || "0");
          setDisplayConvenienceFees(carData.convenience_fees?.toString() || "0");
          setDisplayFleetAdminFee(carData.fleet_admin_fee?.toString() || "0");
        }
      }
    } else {
      setData({
        name: "",
        base_fare: 0,
        convenience_fee_type: "",
        pos: "",
        convenience_fees: 0,
        rate_per_hour: 0,
        extra_info: "",
        min_fare: 0,
        rate_per_unit_distance: 0,
        fleet_admin_fee: 0,
        image: "https://cdn.pixabay.com/photo/2012/04/15/22/09/car-35502__480.png",
        category: settings?.appCat || "test",
      })

      // Initialize display values for new car type
      setDisplayBaseFare("0");
      setDisplayMinFare("0");
      setDisplayRatePerHour("0");
      setDisplayRatePerDistance("0");
      setDisplayConvenienceFees("0");
      setDisplayFleetAdminFee("0");
    }
  }, [cartypes, cartypes.cars, id, navigate, settings?.country,settings?.appCat]);

  const handleInputChange = (e) => {
    setData({ ...data, [e.target.id]: e.target.value });
  };

  const handleInputToNumberChange = (e) => {
    let value = e.target.value;
    if (value.length > 1) {
      value = value.replace(/^0+/, "");
    }
    setData({ ...data, [e.target.id]: value === "" ? "" : value });
  };

  // Vietnamese number input handlers
  const handleBaseFareChange = (e) => {
    const isVietnamese = settings?.country === "Vietnam";
    handleVietnameseNumberInput(
      e.target.value, 
      isVietnamese, 
      (numericValue) => setData({ ...data, base_fare: numericValue }),
      setDisplayBaseFare
    );
  };

  const handleMinFareChange = (e) => {
    const isVietnamese = settings?.country === "Vietnam";
    handleVietnameseNumberInput(
      e.target.value, 
      isVietnamese, 
      (numericValue) => setData({ ...data, min_fare: numericValue }),
      setDisplayMinFare
    );
  };

  const handleRatePerHourChange = (e) => {
    const isVietnamese = settings?.country === "Vietnam";
    handleVietnameseNumberInput(
      e.target.value, 
      isVietnamese, 
      (numericValue) => setData({ ...data, rate_per_hour: numericValue }),
      setDisplayRatePerHour
    );
  };

  const handleRatePerDistanceChange = (e) => {
    const isVietnamese = settings?.country === "Vietnam";
    handleVietnameseNumberInput(
      e.target.value, 
      isVietnamese, 
      (numericValue) => setData({ ...data, rate_per_unit_distance: numericValue }),
      setDisplayRatePerDistance
    );
  };

  const handleConvenienceFeesChange = (e) => {
    const isVietnamese = settings?.country === "Vietnam";
    handleVietnameseNumberInput(
      e.target.value, 
      isVietnamese, 
      (numericValue) => setData({ ...data, convenience_fees: numericValue }),
      setDisplayConvenienceFees
    );
  };

  const handleFleetAdminFeeChange = (e) => {
    const isVietnamese = settings?.country === "Vietnam";
    handleVietnameseNumberInput(
      e.target.value, 
      isVietnamese, 
      (numericValue) => setData({ ...data, fleet_admin_fee: numericValue }),
      setDisplayFleetAdminFee
    );
  };

  const handleExtraInfoChange = (e) => {
    setData({ ...data, extra_info: e.target.value });
  };

  const handleCommonAlertClose = (e) => {
    e.preventDefault();
    setCommonAlert({ open: false, msg: "" });
  };
  const handleSubmit = () => {

    if (!id) {
      if (
        !(
          data &&
          data.name &&
          data.pos &&
          data.convenience_fee_type &&
          data.base_fare &&
          data.min_fare &&
          data.rate_per_hour &&
          data.rate_per_unit_distance
        )
      ) {
        if (!(data && data.name)) {
          setCommonAlert({ open: true, msg: t("proper_input_name") });
        } else if (!data.pos) {
          setCommonAlert({ open: true, msg: t("position_required") });
        } else if (!data.base_fare) {
          setCommonAlert({ open: true, msg: t("base_fare_required") });
        } else if (!data.min_fare) {
          setCommonAlert({ open: true, msg: t("min_fare_required") });
        } else if (!data.rate_per_hour) {
          setCommonAlert({ open: true, msg: t("rate_per_hour_required") });
        } else if (!data.rate_per_unit_distance) {
          setCommonAlert({
            open: true,
            msg: t("rate_per_unit_distance_required"),
          });
        } else if (!data.convenience_fee_type) {
          setCommonAlert({ open: true, msg: t("convenience_fee_type_required") });
        }
      } else {
        settings.AllowCriticalEditsAdmin
          ? new Promise((resolve, reject) => {
            setLoding(true);
            setTimeout(async () => {
              if (data && data.name) {
                data["createdAt"] = new Date().getTime();
                await convertLanguage(data.name, auth?.profile?.lang?.langLocale ? auth.profile.lang.langLocale : null);
                dispatch(editCarType(data, "Add"));
                resolve();
                setLoding(false);
                navigate("/cartypes");
              } else {
                setCommonAlert({ open: true, msg: t("proper_input_name") });
                reject(new Error("Enter proper name"));
                setLoding(false);
              }
            }, 600);
          })
          : new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setCommonAlert({ open: true, msg: t("demo_mode") });
            }, 600);
          });
      }
    }

    else if (id) {
      if (
        !(
          data &&
          data.name &&
          data.pos &&
          data.convenience_fee_type &&
          data.base_fare &&
          data.min_fare &&
          data.rate_per_hour &&
          data.rate_per_unit_distance
        )
      ) {
        if (!(data && data.name)) {
          setCommonAlert({ open: true, msg: t("proper_input_name") });
        } else if (!data.pos) {
          setCommonAlert({ open: true, msg: t("position_required") });
        } else if (!data.base_fare) {
          setCommonAlert({ open: true, msg: t("base_fare_required") });
        } else if (!data.min_fare) {
          setCommonAlert({ open: true, msg: t("min_fare_required") });
        } else if (!data.rate_per_hour) {
          setCommonAlert({ open: true, msg: t("rate_per_hour_required") });
        } else if (!data.rate_per_unit_distance) {
          setCommonAlert({
            open: true,
            msg: t("rate_per_unit_distance_required"),
          });
        } else if (!data.convenience_fee_type) {
          setCommonAlert({ open: true, msg: t("convenience_fee_type_required") });
        }
      } else {
        settings.AllowCriticalEditsAdmin
          ? new Promise((resolve) => {
            setLoding(true);
            setTimeout(async () => {
              resolve();
              if (data !== oldData) {
                delete data.tableData;
                if (data.name !== oldData.name && staticusers) {
                  let users = staticusers && staticusers.filter(
                    (user) =>
                      user.usertype === "driver" && user.carType === oldData.name
                  );
                  for (let i = 0; i < users?.length; i++) {
                    dispatch(
                      updateUserCar(users[i].id, {
                        carType: data.name,
                      })
                    );
                  }
                  let cars = carlistdata.cars.filter(
                    (car) => car.carType === oldData.name
                  );
                  for (let i = 0; i < cars.length; i++) {
                    dispatch(
                      editCar({ ...cars[i], carType: data.name }, "Update")
                    );
                  }
                }
                await convertLanguage(data.name, auth?.profile?.lang?.langLocale ? auth.profile.lang.langLocale : null);
                dispatch(editCarType(data, "Update"));
                navigate("/cartypes", { state: { pageNo: state?.pageNo } });
                setLoding(false);
              } else {
                setLoding(false);
                setCommonAlert({ open: true, msg: t("make_changes_to_update") });
              }
            }, 600);
          })
          : new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              alert(t("demo_mode"));
            }, 600);
          });
      }
    }
  };

  const handleChangeConvenienceFeeType = (e) => {
    setData({ ...data, convenience_fee_type: e.target.value });
  };
  return loding ? (
    <CircularLoading />
  ) : (
    <div>
      <Card
        style={{
          borderRadius: "19px",
          backgroundColor: colors.WHITE,
          minHeight: 100,
          maxWidth: "75vw",
          marginTop: 20,
          marginBottom: 20,
          padding: 25,
          boxShadow: `0px 2px 5px ${SECONDORY_COLOR}`,
        }}
      >
        <Typography
          variant="h5"
          style={{
            margin: "10px 10px 0 5px",
            textAlign: isRTL === "rtl" ? "right" : "left",
            fontFamily: FONT_FAMILY,
          }}
        >
          {id ? t("update_carType_title") : t("add_carType_title")}
        </Typography>
        <GoBackButton isRTL={isRTL} onClick={() => { navigate("/cartypes", { state: { pageNo: state?.pageNo } }) }} />
        <Grid
          container
          spacing={2}
          sx={{ gridTemplateColumns: "50%", direction: isRTL === "rtl" ? "rtl" : "ltr", }}
        >
          <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
            <TextField
              InputLabelProps={{ style: { fontFamily: FONT_FAMILY } }}
              label={t("name")}
              id="name"
              value={data?.name || ""}
              fullWidth
              onChange={handleInputChange}
              className={isRTL === "rtl" ? classes.rootRtl : classes.textField}
            />
          </Grid>

          <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
            <TextField
              InputLabelProps={{ style: { fontFamily: FONT_FAMILY } }}
              label={t("base_fare")}
              id="base_fare"
              value={settings?.country === "Vietnam" ? displayBaseFare : (data?.base_fare || 0)}
              fullWidth
              type={settings?.country === "Vietnam" ? "text" : "number"}
              onChange={settings?.country === "Vietnam" ? handleBaseFareChange : handleInputToNumberChange}
              className={
                isRTL === "rtl" ? classes.rootRtl_3 : classes.textField
              }
            />
          </Grid>
          <Grid
            item
            xs={12}
            sm={12}
            md={12}
            lg={6}
            xl={6}
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <FormControl
              fullWidth
              style={{ direction: isRTL === "rtl" ? "rtl" : "ltr" }}
            >
              <InputLabel
                id="demo-simple-select-label"
                className={isRTL === "rtl" ? classes.right : ""}
                sx={{ "&.Mui-focused": { color: MAIN_COLOR } }}
              >
                {<Typography className={classes.typography}>{t("convenience_fee_type")}</Typography>}
              </InputLabel>
              <Select
                labelId="demo-simple-select-label"
                id="convenience_fee_type"
                value={data?.convenience_fee_type || ""}
                label={t("convenience_fee_type")}
                onChange={handleChangeConvenienceFeeType}
                className={
                  isRTL === "rtl"
                    ? classes.selectField_rtl
                    : classes.selectField
                }
              >
                <MenuItem
                  style={{ direction: isRTL === "rtl" ? "rtl" : "ltr" }}
                  value={"flat"}
                >
                  {<Typography className={classes.typography}>{t("flat")}</Typography>}
                </MenuItem>
                <MenuItem
                  style={{ direction: isRTL === "rtl" ? "rtl" : "ltr" }}
                  value={"percentage"}
                >
                  {<Typography className={classes.typography}>{t("percentage")}</Typography>}
                </MenuItem>
              </Select>
            </FormControl>
          </Grid>

          <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
            <TextField
              InputLabelProps={{ style: { fontFamily: FONT_FAMILY } }}
              label={t("convenience_fee")}
              id="convenience_fees"
              value={settings?.country === "Vietnam" ? displayConvenienceFees : (data?.convenience_fees || 0)}
              type={settings?.country === "Vietnam" ? "text" : "number"}
              fullWidth
              onChange={settings?.country === "Vietnam" ? handleConvenienceFeesChange : handleInputToNumberChange}
              className={
                isRTL === "rtl" ? classes.rootRtl_4 : classes.textField
              }
            />
          </Grid>
          <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
            <TextField
              InputLabelProps={{ style: { fontFamily: FONT_FAMILY } }}
              label={t("rate_per_hour")}
              id="rate_per_hour"
              value={settings?.country === "Vietnam" ? displayRatePerHour : (data?.rate_per_hour || 0)}
              type={settings?.country === "Vietnam" ? "text" : "number"}
              fullWidth
              onChange={settings?.country === "Vietnam" ? handleRatePerHourChange : handleInputToNumberChange}
              className={
                isRTL === "rtl" ? classes.rootRtl_3 : classes.textField
              }
            />
          </Grid>
          <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
            <TextField
              InputLabelProps={{ style: { fontFamily: FONT_FAMILY } }}
              label={t("min_fare")}
              id="min_fare"
              value={settings?.country === "Vietnam" ? displayMinFare : (data?.min_fare || 0)}
              type={settings?.country === "Vietnam" ? "text" : "number"}
              fullWidth
              onChange={settings?.country === "Vietnam" ? handleMinFareChange : handleInputToNumberChange}
              className={
                isRTL === "rtl" ? classes.rootRtl_2 : classes.textField
              }
            />
          </Grid>
          <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
            <TextField
              InputLabelProps={{ style: { fontFamily: FONT_FAMILY } }}
              label={t("rate_per_unit_distance")}
              id="rate_per_unit_distance"
              value={settings?.country === "Vietnam" ? displayRatePerDistance : (data?.rate_per_unit_distance || 0)}
              type={settings?.country === "Vietnam" ? "text" : "number"}
              fullWidth
              onChange={settings?.country === "Vietnam" ? handleRatePerDistanceChange : handleInputToNumberChange}
              className={
                isRTL === "rtl" ? classes.rootRtl_1 : classes.textField
              }
            />
          </Grid>
          <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
            <TextField
              InputLabelProps={{ style: { fontFamily: FONT_FAMILY } }}
              label={t("position")}
              id="pos"
              value={data?.pos || 0}
              type="number"
              fullWidth
              onChange={handleInputToNumberChange}
              className={
                isRTL === "rtl" ? classes.rootRtl_4 : classes.textField
              }
            />
          </Grid>

          <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
            <TextField
              InputLabelProps={{ style: { fontFamily: FONT_FAMILY } }}
              label={t("fleet_admin_fee")}
              id="fleet_admin_fee"
              value={settings?.country === "Vietnam" ? displayFleetAdminFee : (data?.fleet_admin_fee || 0)}
              type={settings?.country === "Vietnam" ? "text" : "number"}
              fullWidth
              onChange={settings?.country === "Vietnam" ? handleFleetAdminFeeChange : handleInputToNumberChange}
              className={
                isRTL === "rtl" ? classes.rootRtl_5 : classes.textField
              }
            />
          </Grid>

          <Grid item xs={12} sm={12} md={12} lg={6} xl={6}>
            <TextField
              InputLabelProps={{ style: { fontFamily: FONT_FAMILY } }}
              label={t("extra_info")}
              id="extra_info"
              value={data?.extra_info || ""}
              fullWidth
              onChange={handleExtraInfoChange}
              className={
                isRTL === "rtl" ? classes.rootRtl_3 : classes.textField
              }
            />
          </Grid>

          <Grid item xs={12} sm={12} md={12} lg={12} xl={12} sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
            <Button
              style={{
                borderRadius: "19px",
                backgroundColor: MAIN_COLOR,
                minHeight: 50,
                minWidth: "50%",
                textAlign: "center",
                boxShadow: `0px 2px 5px ${SECONDORY_COLOR}`,
              }}
              onClick={handleSubmit}
              variant="contained"
            >
              <Typography
                style={{
                  color: colors.WHITE,
                  textAlign: "center",
                  fontSize: 16,
                  fontWeight: "bold",
                  fontFamily: FONT_FAMILY,
                }}
              >
                {id ? t("update") : t("submit")}
              </Typography>
            </Button>
          </Grid>
        </Grid>
      </Card>
      <AlertDialog open={commonAlert.open} onClose={handleCommonAlertClose}>
        {commonAlert.msg}
      </AlertDialog>
    </div>
  );
};

export default EditCarType
