import {
    Box,
    Button,
    Checkbox,
    FormControlLabel,
    Grid,
    TextField,
    ToggleButton,
    ToggleButtonGroup,
} from "@mui/material";
import SelectBox from "@/core/components/SelectBox";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import { useTranslations } from "next-intl";
import useLimitedProvince from "@/lib/app/hooks/useLimitedProvince";
import useCities from "@/lib/app/hooks/useCities";
import { useFormik } from "formik";
import * as Yup from "yup";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import { SEND_LOAN_REQUEST_NAVGAN } from "@/core/data/apiRoutes";
import { useRequest, useUser } from "@witel/webapp-builder";
import { useRouter } from "next/router";
import PlateNumber from "@/core/components/PlateNumber";
import * as React from "react";
import UseEducations from "@/lib/app/hooks/useEducations";
import useOccupations from "@/lib/app/hooks/useOccupations";
import useActivityType from "@/lib/app/hooks/useActivityType";
import useProjectTitle from "@/lib/app/hooks/useProjectTitle";
import PriceField from "@/core/components/PriceField";
import { useState } from "react";

const vehicle_amount = {
    اتوبوس: parseInt(process.env.NEXT_PUBLIC_BUS_AMOUNT),
    "مینی بوس": parseInt(process.env.NEXT_PUBLIC_MINIBUS_AMOUNT),
};
const RealPersonForm = ({ setFinishLoanRequest }) => {
    const t = useTranslations();
    const [vehicleType, setVehicleType] = useState("");
    const { provinceList, isLoadingProvinceList, errorProvinceList } = useLimitedProvince();
    const { cityTextField, cityList, setProvinceID, isLoadingCityList } = useCities();
    const { educationsList, isLoadingEducationsList, errorEducationsList } = UseEducations();
    const { occupationsList, isLoadingOccupationsList, errorOccupationsList } = useOccupations();
    const { activityType, isLoadingActivityType, errorActivityType } = useActivityType();
    const { projectTitle, isLoadingProjectTitle, errorProjectTitle } = useProjectTitle();
    const requestServer = useRequest();
    const { getUser, changeUser } = useUser();
    const router = useRouter();

    const initialValues = {
        person_type: "real",
        vehicle_type: "",
        telephone_number: "",
        activity_type: "",
        navgan_plan_id: "",
        investment: "",
        requested_facilities: "",
        applicant_payment: "",
        user_existing_employment: "",
        user_committed_employment: "",
        father_name: "",
        gender: "",
        first_name: "",
        last_name: "",
        city_id: "",
        province_id: "",
        education_id: "",
        occupation_id: "",
        navgan_id: "",
        national_code: "",
        national_serial_number: "",
        national_card_tracking_code: "",
        national_serial_number_or_tracking_code: "national_serial_number",
        postal_code: "",
        address: "",
        plate_part1: "",
        plate_part2: "ع",
        plate_part3: "",
        plate_part4: "",
        birthday: "",
        checkedBox: false,
        history_facilities: false,
    };

    const validationSchema = Yup.object().shape({
        telephone_number: Yup.mixed()
            .test("max", `${t("LoanRequest.tel_number_max")}`, (value) => {
                const stringValue = String(value);
                return stringValue.length === 11;
            })
            .required(t("LoanRequest.error_message_tel_number")),
        vehicle_type: Yup.string().required(t("LoanRequest.error_message_vehicle_type")),
        requested_facilities: Yup.mixed()
            .test(
                "max-amount",
                `${t("LoanRequest.max_amount", {
                    value: parseInt(vehicle_amount[vehicleType]).toLocaleString("en"),
                })}`,
                (value) => value <= vehicle_amount[vehicleType]
            )
            .required(t("LoanRequest.error_message_requested_facilities")),
        investment: Yup.string().required(t("LoanRequest.error_message_investment")),
        user_committed_employment: Yup.string().required(t("LoanRequest.error_message_user_committed_employment")),
        user_existing_employment: Yup.string().required(t("LoanRequest.error_message_user_existing_employment")),
        activity_type: Yup.string().required(t("LoanRequest.error_message_activity_type")),
        navgan_plan_id: Yup.string().required(t("LoanRequest.error_message_navgan_plan_id")),
        gender: Yup.string().required(t("LoanRequest.error_message_gender")),
        father_name: Yup.string().required(t("LoanRequest.error_message_father_name")),
        occupation_id: Yup.string().required(t("LoanRequest.error_message_occupation_id")),
        education_id: Yup.string().required(t("LoanRequest.error_message_education_id")),
        address: Yup.string().required(t("LoanRequest.error_message_address")),
        birthday: Yup.string().required(t("LoanRequest.error_message_date_of_birth")),
        postal_code: Yup.mixed()
            .test("max", `${t("LoanRequest.postal_code_max")}`, (value) => value.toString().length === 10)
            .required(t("LoanRequest.error_message_postal_code")),
        navgan_id: Yup.mixed().required(t("LoanRequest.error_message_navgan_id")),
        province_id: Yup.string().required(t("LoanRequest.error_message_province_id")),
        city_id: Yup.string().required(t("LoanRequest.error_message_city_id")),
        first_name: Yup.string().required(t("LoanRequest.error_message_first_name")),
        last_name: Yup.string().required(t("LoanRequest.error_message_last_name")),
        plate_part1: Yup.mixed()
            .test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 2)
            .required(t("LoanRequest.error_message_plate_number")),
        plate_part2: Yup.mixed().required(t("LoanRequest.error_message_plate_number")),
        plate_part3: Yup.mixed()
            .test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 3)
            .required(t("LoanRequest.error_message_plate_number")),
        plate_part4: Yup.mixed()
            .test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 2)
            .required(t("LoanRequest.error_message_plate_number")),
        national_code: Yup.mixed()
            .test("is-number", `${t("LoanRequest.national_code_number")}`, (value) => !isNaN(value))
            .test("positive", `${t("LoanRequest.national_code_positive")}`, (value) => value >= 0)
            .test("max", `${t("LoanRequest.national_code_max")}`, (value) => value.toString().length === 10)
            .required(t("LoanRequest.error_message_national_id")),
        national_serial_number: Yup.string().when(
            "national_serial_number_or_tracking_code",
            ([national_serial_number_or_tracking_code], schema) => {
                return national_serial_number_or_tracking_code === "national_serial_number"
                    ? schema
                          .test(
                              "max",
                              `${t("LoanRequest.national_serial_number_max")}`,
                              (value) => value && value.toString().length === 10
                          )
                          .required(t("LoanRequest.error_message_shenasname_serial"))
                    : schema;
            }
        ),
        national_card_tracking_code: Yup.string().when(
            "national_serial_number_or_tracking_code",
            ([national_serial_number_or_tracking_code], schema) => {
                return national_serial_number_or_tracking_code === "national_card_tracking_code"
                    ? schema
                          .test(
                              "max",
                              `${t("LoanRequest.national_tracking_code_max")}`,
                              (value) => value && value.toString().length === 10
                          )
                          .required(t("LoanRequest.error_message_tracking_code"))
                    : schema;
            }
        ),
    });

    const handleSubmit = async (values, props) => {
        props.setSubmitting(true);
        const _national_card =
            values.national_serial_number_or_tracking_code === "national_serial_number"
                ? {
                      national_serial_number: values.national_serial_number,
                  }
                : {
                      national_tracking_code: values.national_card_tracking_code,
                  };

        let _data = {
            is_legal_person: 0,
            telephone_number: values.telephone_number,
            national_id: values.national_code,
            vehicle_type: values.vehicle_type,
            province_id: values.province_id,
            city_id: values.city_id,
            first_name: values.first_name,
            last_name: values.last_name,
            navgan_id: values.navgan_id,
            postal_code: values.postal_code,
            navgan_type: "عمومی",
            gender: values.gender,
            requested_facility_amount: Number(values.requested_facilities),
            investment_amount: Number(values.investment),
            person_share: Number(values.applicant_payment),
            user_committed_employment: Number(values.user_committed_employment),
            user_existing_employment: Number(values.user_existing_employment),
            address: values.address,
            education_id: values.education_id,
            occupation_id: values.occupation_id,
            activity_type_id: values.activity_type,
            navgan_plan_id: values.navgan_plan_id,
            plate_part1: values.plate_part1,
            plate_part2: values.plate_part2,
            plate_part3: values.plate_part3,
            plate_part4: values.plate_part4,
            father_name: values.father_name,
            facility_usage_history: values.history_facilities === true ? 1 : 0,
            birthday: values.birthday.locale("en").format("YYYY-MM-DD"),
            ..._national_card,
        };

        await requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {
            auth: true,
            notification: true,
            data: _data,
        })
            .then(() => {
                router.replace("/dashboard/followUp-loan");
                getUser((data) => {
                    changeUser(data);
                });
            })
            .catch(() => {})
            .finally(() => {
                props.setSubmitting(false);
            });
    };

    const formik = useFormik({
        initialValues,
        validationSchema,
        onSubmit: handleSubmit,
    });
    const handleAmountChange = (event) => {
        if (!isNaN(event.target.value)) {
            formik.setFieldValue("requested_facilities", event.target.value).then(() => {
                formik.setFieldTouched("applicant_payment", false, false);
                formik.setFieldValue("applicant_payment", Math.floor(event.target.value * 0.2));
            });
        } else {
            formik.setFieldValue("requested_facilities", formik.values.requested_facilities);
        }
    };
    return (
        <>
            <Grid container spacing={2} sx={{ p: 2 }}>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="navgan_plan_id"
                        label={t("LoanRequest.text_field_navgan_plan_id")}
                        size="small"
                        selectType="navgan_plan_id"
                        isLoading={isLoadingProjectTitle}
                        errorEcured={errorProjectTitle}
                        selectors={projectTitle}
                        schema={{ value: "value", name: "name" }}
                        select={formik.values.navgan_plan_id}
                        value={formik.values.navgan_plan_id}
                        handleChange={(event) => {
                            formik.setFieldValue("navgan_plan_id", event.target.value);
                        }}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.navgan_plan_id && Boolean(formik.errors.navgan_plan_id)}
                        helperText={formik.touched.navgan_plan_id && formik.errors.navgan_plan_id}
                        onBlur={formik.handleBlur("navgan_plan_id")}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="activity_type"
                        label={t("LoanRequest.text_field_activity_type")}
                        size="small"
                        selectType="activity_type"
                        isLoading={isLoadingActivityType}
                        errorEcured={errorActivityType}
                        selectors={activityType}
                        schema={{ value: "value", name: "name" }}
                        select={formik.values.activity_type}
                        value={formik.values.activity_type}
                        handleChange={(event) => {
                            formik.setFieldValue("activity_type", event.target.value);
                        }}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.activity_type && Boolean(formik.errors.activity_type)}
                        helperText={formik.touched.activity_type && formik.errors.activity_type}
                        onBlur={formik.handleBlur("activity_type")}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{ padding: 2 }}>
                <Grid item xs={12} sm={4}>
                    <ToggleButtonGroup
                        color="primary"
                        fullWidth
                        size={"small"}
                        value={formik.values.national_serial_number_or_tracking_code}
                        exclusive
                        onChange={(e, value) => {
                            if (value === null) return;
                            formik.handleChange({
                                target: {
                                    name: "national_serial_number_or_tracking_code",
                                    value: value,
                                },
                            });
                        }}
                    >
                        <ToggleButton value="national_serial_number">
                            {t("LoanRequest.text_field_shenasname_serial")}
                        </ToggleButton>
                        <ToggleButton value="national_card_tracking_code">
                            {t("LoanRequest.text_field_national_trackin_code")}
                        </ToggleButton>
                    </ToggleButtonGroup>
                </Grid>
                {formik.values.national_serial_number_or_tracking_code === "national_serial_number" ? (
                    <Grid item xs={12} sm={4}>
                        <TextField
                            sx={{ width: "100%" }}
                            name="national_serial_number"
                            variant="outlined"
                            size="small"
                            value={formik.values.national_serial_number}
                            label={t("LoanRequest.text_field_shenasname_serial")}
                            placeholder={t("LoanRequest.text_field_enter_your_shenasname_serial")}
                            fullWidth
                            onChange={(e) => {
                                const inputValue = e.target.value;
                                const regex = /^[A-Za-z0-9]*$/;
                                if (regex.test(inputValue)) {
                                    formik.setFieldValue("national_serial_number", inputValue);
                                }
                            }}
                            onBlur={formik.handleBlur("national_serial_number")}
                            error={
                                formik.touched.national_serial_number && Boolean(formik.errors.national_serial_number)
                            }
                            helperText={formik.touched.national_serial_number && formik.errors.national_serial_number}
                        />
                    </Grid>
                ) : (
                    <Grid item xs={12} sm={4}>
                        <TextField
                            sx={{ width: "100%" }}
                            name="national_card_tracking_code"
                            variant="outlined"
                            size="small"
                            inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
                            type={"tel"}
                            value={formik.values.national_card_tracking_code}
                            label={t("LoanRequest.text_field_national_trackin_code")}
                            placeholder={t("LoanRequest.text_field_enter_your_trackin_code")}
                            fullWidth
                            onChange={(event) => {
                                const inputValue = event.target.value;
                                if (isNaN(Number(inputValue))) {
                                    return;
                                }
                                formik.handleChange({
                                    target: {
                                        name: "national_card_tracking_code",
                                        value: inputValue,
                                    },
                                });
                            }}
                            onBlur={formik.handleBlur("national_card_tracking_code")}
                            error={
                                formik.touched.national_card_tracking_code &&
                                Boolean(formik.errors.national_card_tracking_code)
                            }
                            helperText={
                                formik.touched.national_card_tracking_code && formik.errors.national_card_tracking_code
                            }
                        />
                    </Grid>
                )}
                <Grid item xs={12} sm={4}>
                    <TextField
                        sx={{ width: "100%" }}
                        name="national_code"
                        variant="outlined"
                        size="small"
                        value={formik.values.national_code}
                        inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
                        type={"tel"}
                        onChange={(event) => {
                            const inputValue = event.target.value;
                            if (isNaN(Number(inputValue))) {
                                return;
                            }
                            formik.handleChange({
                                target: {
                                    name: "national_code",
                                    value: inputValue,
                                },
                            });
                        }}
                        label={t("LoanRequest.text_field_national_code")}
                        placeholder={t("LoanRequest.text_field_enter_your_national_code")}
                        onBlur={formik.handleBlur("national_code")}
                        error={formik.touched.national_code && Boolean(formik.errors.national_code)}
                        helperText={formik.touched.national_code && formik.errors.national_code}
                        fullWidth
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{ padding: 2 }}>
                <Grid item xs={12} sm={6}>
                    <TextField
                        sx={{ width: "100%" }}
                        name="first_name"
                        variant="outlined"
                        size="small"
                        value={formik.values.first_name}
                        label={t("LoanRequest.text_field_first_name")}
                        placeholder={t("LoanRequest.text_field_enter_your_first_name")}
                        fullWidth
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur("first_name")}
                        error={formik.touched.first_name && Boolean(formik.errors.first_name)}
                        helperText={formik.touched.first_name && formik.errors.first_name}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <TextField
                        sx={{ width: "100%" }}
                        name="last_name"
                        variant="outlined"
                        size="small"
                        value={formik.values.last_name}
                        label={t("LoanRequest.text_field_last_name")}
                        placeholder={t("LoanRequest.text_field_enter_your_last_name")}
                        fullWidth
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur("last_name")}
                        error={formik.touched.last_name && Boolean(formik.errors.last_name)}
                        helperText={formik.touched.last_name && formik.errors.last_name}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{ padding: 2 }}>
                <Grid item xs={12} sm={4}>
                    <TextField
                        sx={{ width: "100%" }}
                        name="father_name"
                        variant="outlined"
                        value={formik.values.father_name}
                        onChange={formik.handleChange}
                        size="small"
                        label={t("LoanRequest.text_field_father_name")}
                        placeholder={t("LoanRequest.text_field_enter_your_father_name")}
                        onBlur={formik.handleBlur("father_name")}
                        error={formik.touched.father_name && Boolean(formik.errors.father_name)}
                        helperText={formik.touched.father_name && formik.errors.father_name}
                        fullWidth
                    />
                </Grid>
                <Grid item xs={12} sm={4}>
                    <SelectBox
                        name="gender"
                        label={t("LoanRequest.text_field_gender")}
                        size="small"
                        value={formik.values.gender}
                        selectType="gender"
                        selectors={[
                            {
                                id: 1,
                                value: 0,
                                name: "زن",
                            },
                            {
                                id: 2,
                                value: 1,
                                name: "مرد",
                            },
                        ]}
                        schema={{ value: "value", name: "name" }}
                        select={formik.values.gender}
                        handleChange={(event) => {
                            formik.setFieldValue("gender", event.target.value);
                        }}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.gender && Boolean(formik.errors.gender)}
                        helperText={formik.touched.gender && formik.errors.gender}
                        onBlur={formik.handleBlur("gender")}
                    />
                </Grid>
                <Grid item xs={12} sm={4}>
                    <MuiDatePicker
                        formik={formik}
                        error={formik.touched.birthday && Boolean(formik.errors.birthday)}
                        helperText={formik.touched.birthday && formik.errors.birthday}
                        onBlur={formik.handleBlur("birthday")}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{ padding: 2 }}>
                <Grid item xs={12} sm={4}>
                    <TextField
                        sx={{ width: "100%" }}
                        name="navgan_id"
                        variant="outlined"
                        inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
                        type={"tel"}
                        value={formik.values.navgan_id}
                        onChange={formik.handleChange}
                        size="small"
                        label={t("LoanRequest.text_field_navgan_id")}
                        placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
                        fullWidth
                        onBlur={formik.handleBlur("navgan_id")}
                        error={formik.touched.navgan_id && Boolean(formik.errors.navgan_id)}
                        helperText={formik.touched.navgan_id && formik.errors.navgan_id}
                    />
                </Grid>
                <Grid item xs={12} sm={4}>
                    <TextField
                        sx={{ width: "100%" }}
                        name="postal_code"
                        variant="outlined"
                        value={formik.values.postal_code}
                        inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
                        type={"tel"}
                        onChange={(event) => {
                            const inputValue = event.target.value;
                            if (isNaN(Number(inputValue))) {
                                return;
                            }
                            formik.handleChange({
                                target: {
                                    name: "postal_code",
                                    value: inputValue,
                                },
                            });
                        }}
                        size="small"
                        label={t("LoanRequest.text_field_postal_code")}
                        placeholder={t("LoanRequest.text_field_enter_your_postal_code")}
                        fullWidth
                        onBlur={formik.handleBlur("postal_code")}
                        error={formik.touched.postal_code && Boolean(formik.errors.postal_code)}
                        helperText={formik.touched.postal_code && formik.errors.postal_code}
                    />
                </Grid>
                <Grid item xs={12} sm={4}>
                    <TextField
                        sx={{ width: "100%" }}
                        name="telephone_number"
                        variant="outlined"
                        value={formik.values.telephone_number}
                        inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }}
                        type={"tel"}
                        size="small"
                        onChange={(event) => {
                            const inputValue = event.target.value;
                            if (isNaN(Number(inputValue))) {
                                return;
                            }
                            formik.handleChange({
                                target: {
                                    name: "telephone_number",
                                    value: inputValue,
                                },
                            });
                        }}
                        label={t("LoanRequest.text_field_tel_number")}
                        placeholder={t("LoanRequest.text_field_enter_your_tel_number")}
                        fullWidth
                        onBlur={formik.handleBlur("telephone_number")}
                        error={formik.touched.telephone_number && Boolean(formik.errors.telephone_number)}
                        helperText={formik.touched.telephone_number && formik.errors.telephone_number}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{ padding: 2 }}>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="province_id"
                        label={t("LoanRequest.text_field_province_id")}
                        size="small"
                        selectType="province_id"
                        isLoading={isLoadingProvinceList}
                        errorEcured={errorProvinceList}
                        selectors={provinceList}
                        schema={{ value: "value", name: "name" }}
                        select={formik.values.province_id}
                        value={formik.values.province_id}
                        handleChange={(event) => {
                            formik.setFieldValue("province_id", event.target.value);
                            setProvinceID(event.target.value);
                            formik.setFieldTouched("city_id", false, false);
                            formik.setFieldValue("city_id", "");
                        }}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.province_id && Boolean(formik.errors.province_id)}
                        helperText={formik.touched.province_id && formik.errors.province_id}
                        onBlur={formik.handleBlur("province_id")}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="city_id"
                        label={
                            isLoadingCityList
                                ? `${t("LoanRequest.enter_province")}`
                                : cityList.length === 0
                                  ? `${t("LoanRequest.cityList_empty")}`
                                  : cityTextField
                        }
                        size="small"
                        selectType="city_id"
                        schema={{ value: "value", name: "name" }}
                        disabled={cityList.length === 0}
                        selectors={cityList}
                        select={formik.values.city_id}
                        value={formik.values.city_id}
                        handleChange={(event) => formik.setFieldValue("city_id", event.target.value)}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.city_id && Boolean(formik.errors.city_id)}
                        helperText={formik.touched.city_id && formik.errors.city_id}
                        onBlur={formik.handleBlur("city_id")}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{ padding: 2 }}>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="vehicle_type"
                        label={t("LoanRequest.text_field_vehicle_type")}
                        size="small"
                        value={formik.values.vehicle_type}
                        schema={{ value: "value", name: "name" }}
                        selectType="vehicle_type"
                        selectors={[
                            {
                                id: 0,
                                value: "اتوبوس",
                                name: "اتوبوس",
                            },
                            {
                                id: 1,
                                value: "مینی بوس",
                                name: "مینی بوس",
                            },
                        ]}
                        select={formik.values.vehicle_type}
                        handleChange={(event) => {
                            setVehicleType(event.target.value);
                            formik.setFieldValue("vehicle_type", event.target.value);
                        }}
                        error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
                        helperText={formik.touched.vehicle_type && formik.errors.vehicle_type}
                        onBlur={formik.handleBlur("vehicle_type")}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <PlateNumber formik={formik} />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{ padding: 2 }}>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="education_id"
                        label={t("LoanRequest.text_field_education_id")}
                        size="small"
                        isLoading={isLoadingEducationsList}
                        errorEcured={errorEducationsList}
                        selectType="education_id"
                        selectors={educationsList}
                        select={formik.values.education_id}
                        value={formik.values.education_id}
                        schema={{ value: "id", name: "title" }}
                        handleChange={(event) => {
                            formik.setFieldValue("education_id", event.target.value);
                        }}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.education_id && Boolean(formik.errors.education_id)}
                        helperText={formik.touched.education_id && formik.errors.education_id}
                        onBlur={formik.handleBlur("education_id")}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <SelectBox
                        name="occupation_id"
                        label={t("LoanRequest.text_field_occupation_id")}
                        size="small"
                        isLoading={isLoadingOccupationsList}
                        errorEcured={errorOccupationsList}
                        selectType="occupation_id"
                        schema={{ value: "id", name: "title" }}
                        selectors={occupationsList}
                        select={formik.values.occupation_id}
                        value={formik.values.occupation_id}
                        handleChange={(event) => {
                            formik.setFieldValue("occupation_id", event.target.value);
                        }}
                        setFieldTouched={formik.setFieldTouched}
                        error={formik.touched.occupation_id && Boolean(formik.errors.occupation_id)}
                        helperText={formik.touched.occupation_id && formik.errors.occupation_id}
                        onBlur={formik.handleBlur("occupation_id")}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{ p: 2 }}>
                <Grid item xs={12} sm={6}>
                    <TextField
                        rows={4}
                        sx={{ width: "100%" }}
                        name="user_committed_employment"
                        variant="outlined"
                        value={formik.values.user_committed_employment}
                        size="small"
                        type={"tel"}
                        label={t("ShowLoan.user_committed_employment")}
                        error={!!(formik.touched.user_committed_employment && formik.errors.user_committed_employment)}
                        onChange={(event) => {
                            const inputValue = event.target.value;
                            if (isNaN(Number(inputValue))) {
                                return;
                            }
                            formik.handleChange({
                                target: {
                                    name: "user_committed_employment",
                                    value: inputValue,
                                },
                            });
                        }}
                        fullWidth
                        helperText={
                            formik.touched.user_committed_employment ? formik.errors.user_committed_employment : null
                        }
                        onBlur={formik.handleBlur("user_committed_employment")}
                    />
                </Grid>
                <Grid item xs={12} sm={6}>
                    <TextField
                        rows={4}
                        sx={{ width: "100%" }}
                        name="user_existing_employment"
                        variant="outlined"
                        type={"tel"}
                        value={formik.values.user_existing_employment}
                        size="small"
                        label={t("ShowLoan.user_existing_employment")}
                        error={!!(formik.touched.user_existing_employment && formik.errors.user_existing_employment)}
                        onChange={(event) => {
                            const inputValue = event.target.value;
                            if (isNaN(Number(inputValue))) {
                                return;
                            }
                            formik.handleChange({
                                target: {
                                    name: "user_existing_employment",
                                    value: inputValue,
                                },
                            });
                        }}
                        fullWidth
                        helperText={
                            formik.touched.user_existing_employment ? formik.errors.user_existing_employment : null
                        }
                        onBlur={formik.handleBlur("user_existing_employment")}
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{ padding: 2 }}>
                <Grid item xs={12} sm={4}>
                    <PriceField
                        name="investment"
                        label={t("LoanRequest.text_field_investment")}
                        type="text"
                        size="small"
                        inputProps={{
                            inputMode: "number",
                            min: 0,
                            pattern: "[0-9]*",
                        }}
                        variant="outlined"
                        value={formik.values.investment}
                        onChange={(event) => {
                            const inputValue = event.target.value;
                            if (isNaN(Number(inputValue))) {
                                return;
                            }
                            formik.setFieldValue("investment", event.target.value);
                        }}
                        onBlur={formik.handleBlur("investment")}
                        error={formik.touched.investment && Boolean(formik.errors.investment)}
                        helperText={formik.touched.investment && formik.errors.investment}
                        fullWidth
                    />
                </Grid>
                <Grid item xs={12} sm={4}>
                    <PriceField
                        name="requested_facilities"
                        label={
                            formik.values.vehicle_type === ""
                                ? t("LoanRequest.enter_vehicle_type")
                                : t("LoanRequest.text_field_requested_facilities")
                        }
                        type="text"
                        size="small"
                        inputProps={{
                            inputMode: "number",
                            min: 0,
                            pattern: "[0-9]*",
                        }}
                        variant="outlined"
                        value={formik.values.requested_facilities}
                        onChange={handleAmountChange}
                        disabled={formik.values.vehicle_type === ""}
                        onBlur={formik.handleBlur("requested_facilities")}
                        error={formik.touched.requested_facilities && Boolean(formik.errors.requested_facilities)}
                        helperText={formik.touched.requested_facilities && formik.errors.requested_facilities}
                        fullWidth
                    />
                </Grid>
                <Grid item xs={12} sm={4}>
                    <PriceField
                        name="applicant_payment"
                        label={t("LoanRequest.text_field_applicant_payment")}
                        type="text"
                        size="small"
                        inputProps={{
                            inputMode: "number",
                            min: 0,
                            pattern: "[0-9]*",
                        }}
                        variant="outlined"
                        value={formik.values.applicant_payment}
                        disabled
                        fullWidth
                    />
                </Grid>
            </Grid>
            <Grid container spacing={2} sx={{ padding: 2 }}>
                <Grid item xs={12}>
                    <TextField
                        multiline
                        rows={4}
                        sx={{ width: "100%" }}
                        name="address"
                        variant="outlined"
                        size="small"
                        label={t("LoanRequest.text_field_address")}
                        placeholder={t("LoanRequest.text_field_enter_your_address")}
                        fullWidth
                        value={formik.values.address}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur("address")}
                        error={formik.touched.address && Boolean(formik.errors.address)}
                        helperText={formik.touched.address && formik.errors.address}
                    />
                </Grid>
            </Grid>
            <Grid container sx={{ padding: 2 }}>
                <Grid item xs={12}>
                    <FormControlLabel
                        color={"error.main"}
                        control={
                            <Checkbox
                                checked={formik.values.history_facilities}
                                onChange={(event) => {
                                    formik.setFieldValue("history_facilities", event.target.checked);
                                }}
                            />
                        }
                        label={`${t("LoanRequest.history_facilities")}`}
                    />
                </Grid>
            </Grid>
            <Grid container sx={{ px: 2 }}>
                <Grid item xs={12}>
                    <FormControlLabel
                        color={"error.main"}
                        control={
                            <Checkbox
                                checked={formik.values.checkedBox}
                                onChange={(event) => {
                                    formik.setFieldValue("checkedBox", event.target.checked);
                                }}
                            />
                        }
                        label={`${t("LoanRequest.checkbox")}`}
                    />
                </Grid>
            </Grid>
            <Box
                sx={{
                    display: "flex",
                    flexDirection: { xs: "column", sm: "row" },
                    alignItems: "center",
                    mx: "auto",
                    width: { xs: "100%", sm: "30%", md: "25%" },
                }}
            >
                <Button
                    fullWidth
                    onClick={formik.handleSubmit}
                    type="submit"
                    variant="contained"
                    size="large"
                    sx={{ my: 4 }}
                    endIcon={<DataSaverOnIcon />}
                    disabled={formik.values.checkedBox ? formik.isSubmitting || !formik.dirty || !formik.isValid : true}
                >
                    {formik.isSubmitting ? t("LoanRequest.button_while_submit") : t("LoanRequest.button_submit")}
                </Button>
            </Box>
        </>
    );
};
export default RealPersonForm;