import { Box, Button, Chip, Divider, Grid, Stack, TextField, ToggleButton, ToggleButtonGroup } from "@mui/material";
import { useFormik } from "formik";
import { useTranslations } from "next-intl";
import * as Yup from "yup";
import SelectBox from "@/core/components/SelectBox";
import PlateNumber from "@/core/components/PlateNumber";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import moment from "jalali-moment";
import useProvince from "@/lib/app/hooks/useProvince";
import useCities from "@/lib/app/hooks/useCities";
import UseEducations from "@/lib/app/hooks/useEducations";
import useOccupations from "@/lib/app/hooks/useOccupations";
import { UPDATE_LOAN } from "@/core/data/apiRoutes";
import { useRequest } from "@witel/webapp-builder";
import { useRouter } from "next/router";
import { useEffect } from "react";
import EditIcon from "@mui/icons-material/Edit";
import * as React from "react";
import useProjectTitle from "@/lib/app/hooks/useProjectTitle";
import useActivityType from "@/lib/app/hooks/useActivityType";
import PriceField from "@/core/components/PriceField";
import useWorkYear from "@/lib/app/hooks/useWorkYear";
const vehicle_amount = {
    اتوبوس: parseInt(process.env.NEXT_PUBLIC_BUS_AMOUNT),
    "مینی بوس": parseInt(process.env.NEXT_PUBLIC_MINIBUS_AMOUNT),
};

const UpdateFormReal = ({ LoanDetails, LoanId }) => {
    const t = useTranslations();
    const provinceStates = useProvince();
    const router = useRouter();
    const citiesStates = useCities();
    const { projectTitle, isLoadingProjectTitle, errorProjectTitle } = useProjectTitle();
    const { activityType, isLoadingActivityType, errorActivityType } = useActivityType();
    const { workYear, isLoadingWorkYear, errorWorkYear } = useWorkYear();
    const educationStates = UseEducations();
    const occupationStates = useOccupations();
    const requestServer = useRequest();

    const initialValues = {
        national_serial_number_or_tracking_code: LoanDetails.national_serial_number ? "serial_number" : "tracking_code",
        national_id: LoanDetails.national_id || "",
        activity_type: LoanDetails.activity_type_id || "",
        navgan_plan_id: LoanDetails.navgan_plan_id || "",
        postal_code: LoanDetails.postal_code || "",
        user_existing_employment: LoanDetails.user_existing_employment || "",
        user_committed_employment: LoanDetails.user_committed_employment || "",
        address: LoanDetails.address || "",
        birthday: LoanDetails.birthday ? moment(LoanDetails.birthday) : "",
        navgan_id: LoanDetails.navgan_id || "",
        province_id: LoanDetails.province_id || "",
        investment: Number(LoanDetails.investment_amount) || "",
        requested_facilities: Number(LoanDetails.requested_facility_amount) || "",
        applicant_payment: Number(LoanDetails.person_share) || "",
        city_id: LoanDetails.city_id || "",
        first_name: LoanDetails.first_name || "",
        last_name: LoanDetails.last_name || "",
        father_name: LoanDetails.father_name || "",
        gender: LoanDetails.gender === null ? "" : LoanDetails.gender,
        occupation_id: LoanDetails.occupation_id || "",
        navgan_type: LoanDetails.navgan_type || "",
        vehicle_type: LoanDetails.vehicle_type || "",
        work_year: LoanDetails.work_year || "",
        telephone_number: LoanDetails.telephone_number || "",
        plate_part1: LoanDetails.plate_number.split("-")[0] || "",
        plate_part2: LoanDetails.plate_number.split("-")[1] || "",
        plate_part3: LoanDetails.plate_number.split("-")[2] || "",
        plate_part4: LoanDetails.plate_number.split("-")[3] || "",
        education_id: LoanDetails.education_id || "",
        national_serial_number: LoanDetails.national_serial_number ?? "",
        national_tracking_code: LoanDetails.national_tracking_code ?? "",
    };
    useEffect(() => {
        citiesStates.setProvinceID(LoanDetails.province_id);
    }, [LoanDetails.province_id]);

    const validationSchema = Yup.object().shape({
        postal_code: Yup.mixed()
            .test("max", `${t("ShowLoan.postal_code_max")}`, (value) => value.toString().length === 10)
            .required(t("ShowLoan.error_message_postal_code")),
        address: Yup.string().required(t("ShowLoan.error_message_address")),
        province_id: Yup.string().required(t("ShowLoan.error_message_province_id")),
        work_year: Yup.string().required(t("ShowLoan.error_message_work_year")),
        activity_type: Yup.string().required(t("ShowLoan.error_message_activity_type")),
        requested_facilities: Yup.mixed()
            .test(
                "max-amount",
                `${t("ShowLoan.max_amount", {
                    value: parseInt(vehicle_amount[LoanDetails.vehicle_type]).toLocaleString("en"),
                })}`,
                (value) => value <= vehicle_amount[LoanDetails.vehicle_type]
            )
            .required(t("ShowLoan.error_message_requested_facilities")),
        investment: Yup.string().required(t("ShowLoan.error_message_investment")),
        navgan_plan_id: Yup.string().required(t("ShowLoan.error_message_navgan_plan_id")),
        city_id: Yup.string().required(t("ShowLoan.error_message_city_id")),
        telephone_number: Yup.mixed()
            .test("max", `${t("ShowLoan.tel_number_max")}`, (value) => {
                const stringValue = String(value);
                return stringValue.length === 11;
            })
            .required(t("ShowLoan.error_message_tel_number")),
        occupation_id: Yup.string().required(t("ShowLoan.error_message_occupation_id")),
        first_name: Yup.string().required(t("ShowLoan.error_message_first_name")),
        last_name: Yup.string().required(t("ShowLoan.error_message_last_name")),
        gender: Yup.string().required(t("ShowLoan.error_message_gender")),
        user_committed_employment: Yup.string().required(t("ShowLoan.error_message_user_committed_employment")),
        user_existing_employment: Yup.string().required(t("ShowLoan.error_message_user_existing_employment")),
        father_name: Yup.string().required(t("ShowLoan.error_message_father_name")),
        education_id: Yup.string().required(t("ShowLoan.error_message_education_id")),
        birthday: Yup.string().required(t("ShowLoan.error_message_date_of_birth")),
        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 === "serial_number"
                    ? schema
                          .test(
                              "max",
                              `${t("LoanRequest.national_serial_number_max")}`,
                              (value) => value && value.toString().length === 10
                          )
                          .required(t("ShowLoan.error_message_shenasname_serial"))
                    : schema;
            }
        ),
        national_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 === "tracking_code"
                    ? schema
                          .test(
                              "max",
                              `${t("LoanRequest.national_tracking_code_max")}`,
                              (value) => value && value.toString().length === 10
                          )
                          .required(t("ShowLoan.error_message_tracking_code"))
                    : schema;
            }
        ),
    });

    const handleSubmit = async (values, props) => {
        props.setSubmitting(true);
        const formData = new FormData();
        if (values.national_serial_number_or_tracking_code === "serial_number") {
            formData.append("national_serial_number", values.national_serial_number);
        } else {
            formData.append("national_tracking_code", values.national_tracking_code);
        }
        formData.append("birthday", values.birthday.locale("en").format("YYYY-MM-DD"));
        formData.append("postal_code", values.postal_code);
        formData.append("work_year", values.work_year);
        formData.append("navgan_plan_id", values.navgan_plan_id);
        formData.append("activity_type_id", values.activity_type);
        formData.append("first_name", values.first_name);
        formData.append("requested_facility_amount", Number(values.requested_facilities));
        formData.append("investment_amount", Number(values.investment));
        formData.append("person_share", Number(values.applicant_payment));
        formData.append("user_committed_employment", values.user_committed_employment);
        formData.append("user_existing_employment", values.user_existing_employment);
        formData.append("last_name", values.last_name);
        formData.append("father_name", values.father_name);
        formData.append("gender", values.gender);
        formData.append("city_id", values.city_id);
        formData.append("telephone_number", values.telephone_number);
        formData.append("education_id", values.education_id);
        formData.append("occupation_id", values.occupation_id);
        formData.append("address", values.address);

        await requestServer(UPDATE_LOAN + LoanId, "post", {
            auth: true,
            notification: true,
            data: formData,
        })
            .then(() => {
                router.push("/dashboard/followUp-loan");
            })
            .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 (
        <>
            <Box sx={{ width: "80%", my: 2 }}>
                <Divider>
                    <Chip
                        label={
                            LoanDetails.state_id === 17
                                ? t("ShowLoan.edit_loan_page", { person_type: "شخص حقیقی", id: LoanId })
                                : t("ShowLoan.update_loan_page", { person_type: "شخص حقیقی", id: LoanId })
                        }
                    />
                </Divider>
            </Box>
            <Stack sx={{ p: 1, width: "100%" }}>
                <Grid container spacing={2} sx={{ p: 2 }}>
                    <Grid item xs={12} sm={6}>
                        <SelectBox
                            name="activity_type"
                            label={t("ShowLoan.text_field_activity_type")}
                            size="small"
                            disabled={LoanDetails.state_id !== 17}
                            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 item xs={12} sm={6}>
                        <SelectBox
                            name="navgan_plan_id"
                            label={t("ShowLoan.text_field_navgan_plan_id")}
                            size="small"
                            selectType="navgan_plan_id"
                            value={formik.values.navgan_plan_id}
                            disabled={LoanDetails.state_id !== 17}
                            variant="outlined"
                            selectors={projectTitle}
                            isLoading={isLoadingProjectTitle}
                            errorEcured={errorProjectTitle}
                            select={formik.values.navgan_plan_id}
                            schema={{ value: "value", name: "name" }}
                            handleChange={formik.handleChange}
                            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>
                <Grid container spacing={2} sx={{ padding: 2 }}>
                    <Grid item xs={12} sm={6}>
                        <TextField
                            sx={{ width: "100%" }}
                            name="first_name"
                            variant="outlined"
                            disabled={LoanDetails.state_id !== 17}
                            size="small"
                            value={formik.values.first_name}
                            label={t("ShowLoan.text_field_first_name")}
                            fullWidth
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur("first_name")}
                            error={!!(formik.touched.first_name && formik.errors.first_name)}
                            helperText={formik.touched.first_name ? formik.errors.first_name : null}
                        />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <TextField
                            sx={{ width: "100%" }}
                            name="last_name"
                            variant="outlined"
                            disabled={LoanDetails.state_id !== 17}
                            size="small"
                            value={formik.values.last_name}
                            label={t("ShowLoan.text_field_last_name")}
                            fullWidth
                            onChange={formik.handleChange}
                            onBlur={formik.handleBlur("last_name")}
                            error={!!(formik.touched.last_name && formik.errors.last_name)}
                            helperText={formik.touched.last_name ? formik.errors.last_name : null}
                        />
                    </Grid>
                </Grid>
                <Grid container spacing={2} sx={{ p: 2 }}>
                    <Grid item xs={12} sm={6}>
                        <TextField
                            sx={{ width: "100%" }}
                            name="national_id"
                            disabled
                            variant={"outlined"}
                            size="small"
                            value={formik.values.national_id}
                            label={t("ShowLoan.text_field_national_id")}
                            type={"tel"}
                            error={!!(formik.touched.national_id && formik.errors.national_id)}
                            fullWidth
                            helperText={formik.touched.national_id ? formik.errors.national_id : null}
                            onBlur={formik.handleBlur("national_id")}
                        />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <TextField
                            sx={{ width: "100%" }}
                            name="father_name"
                            disabled={LoanDetails.state_id !== 17}
                            variant={"outlined"}
                            size="small"
                            value={formik.values.father_name}
                            label={t("ShowLoan.text_field_father_name")}
                            type={"text"}
                            error={!!(formik.touched.father_name && formik.errors.father_name)}
                            fullWidth
                            helperText={formik.touched.father_name ? formik.errors.father_name : null}
                            onBlur={formik.handleBlur("father_name")}
                            onChange={formik.handleChange}
                        />
                    </Grid>
                </Grid>
                <Grid container spacing={2} sx={{ p: 2 }}>
                    <Grid item xs={12} sm={6}>
                        <SelectBox
                            name="gender"
                            label={t("ShowLoan.text_field_gender")}
                            size="small"
                            value={formik.values.gender}
                            disabled={LoanDetails.state_id !== 17}
                            variant="outlined"
                            selectType="gender"
                            selectors={[
                                {
                                    id: 1,
                                    value: 0,
                                    name: "زن",
                                },
                                {
                                    id: 2,
                                    value: 1,
                                    name: "مرد",
                                },
                            ]}
                            schema={{ value: "value", name: "name" }}
                            select={formik.values.gender}
                            handleChange={formik.handleChange}
                            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={6}>
                        <TextField
                            sx={{ width: "100%" }}
                            name="postal_code"
                            disabled={LoanDetails.state_id !== 17}
                            variant="outlined"
                            size="small"
                            label={t("ShowLoan.text_field_postal_code")}
                            placeholder={t("ShowLoan.text_field_enter_your_postal_code")}
                            value={formik.values.postal_code}
                            type={"tel"}
                            onChange={(event) => {
                                const inputValue = event.target.value;
                                if (isNaN(Number(inputValue))) {
                                    return;
                                }
                                formik.handleChange({
                                    target: {
                                        name: "postal_code",
                                        value: inputValue,
                                    },
                                });
                            }}
                            error={!!(formik.touched.postal_code && formik.errors.postal_code)}
                            fullWidth
                            onBlur={formik.handleBlur("postal_code")}
                            helperText={formik.touched.postal_code ? formik.errors.postal_code : null}
                        />
                    </Grid>
                </Grid>
                <Grid container spacing={2} sx={{ p: 2 }}>
                    <Grid item xs={12} sm={6}>
                        <TextField
                            sx={{ width: "100%" }}
                            name="navgan_id"
                            disabled
                            variant="outlined"
                            value={formik.values.navgan_id}
                            size="small"
                            label={t("ShowLoan.text_field_navgan_id")}
                            placeholder={t("ShowLoan.text_field_enter_your_navgan_id")}
                            type={"tel"}
                            error={!!(formik.touched.navgan_id && formik.errors.navgan_id)}
                            fullWidth
                            helperText={formik.touched.navgan_id ? formik.errors.navgan_id : null}
                            onBlur={formik.handleBlur("navgan_id")}
                        />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <SelectBox
                            name="navgan_type"
                            label={t("ShowLoan.text_field_navgan_type")}
                            size="small"
                            disabled
                            variant="outlined"
                            selectType="navgan_type"
                            schema={{ value: "value", name: "name" }}
                            selectors={[
                                {
                                    id: 1,
                                    value: "روستایی",
                                    name: "روستایی",
                                },
                                {
                                    id: 2,
                                    value: "عمومی",
                                    name: "عمومی",
                                },
                                {
                                    id: 3,
                                    value: "منطقه آزاد",
                                    name: "منطقه آزاد",
                                },
                            ]}
                            select={formik.values.navgan_type}
                            handleChange={(event) => {
                                formik.setFieldValue("navgan_type", event.target.value);
                            }}
                            setFieldTouched={formik.setFieldTouched}
                            error={formik.touched.navgan_type && Boolean(formik.errors.navgan_type)}
                            helperText={formik.touched.navgan_type && formik.errors.navgan_type}
                            onBlur={formik.handleBlur("navgan_type")}
                        />
                    </Grid>
                </Grid>
                <Grid container spacing={2} sx={{ p: 2 }}>
                    <Grid item xs={12} sm={6}>
                        <PlateNumber formik={formik} disabled={true} />
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        <SelectBox
                            name="vehicle_type"
                            label={t("ShowLoan.text_field_vehicle_type")}
                            size="small"
                            disabled
                            variant="outlined"
                            selectType="vehicle_type"
                            schema={{ value: "value", name: "name" }}
                            selectors={[
                                {
                                    id: 0,
                                    value: "اتوبوس",
                                    name: "اتوبوس",
                                },
                                {
                                    id: 1,
                                    value: "مینی بوس",
                                    name: "مینی بوس",
                                },
                                {
                                    id: 2,
                                    value: "سواری",
                                    name: "سواری",
                                },
                            ]}
                            select={formik.values.vehicle_type}
                            handleChange={(event) => 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>
                <Grid container spacing={2} sx={{ p: 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,
                                    },
                                });
                                value === "serial_number"
                                    ? formik.setFieldValue(
                                          "national_tracking_code",
                                          formik.initialValues.national_tracking_code,
                                          false
                                      )
                                    : formik.setFieldValue(
                                          "national_serial_number",
                                          formik.initialValues.national_serial_number,
                                          false
                                      );
                            }}
                        >
                            <ToggleButton value="serial_number">
                                {t("ShowLoan.text_field_shenasname_serial")}
                            </ToggleButton>
                            <ToggleButton value="tracking_code">
                                {t("ShowLoan.text_field_national_trackin_code")}
                            </ToggleButton>
                        </ToggleButtonGroup>
                    </Grid>
                    <Grid item xs={12} sm={4}>
                        {formik.values.national_serial_number_or_tracking_code === "serial_number" ? (
                            <TextField
                                sx={{ width: "100%" }}
                                name="national_serial_number"
                                disabled={LoanDetails.state_id !== 17}
                                size="small"
                                value={formik.values.national_serial_number}
                                variant="outlined"
                                label={t("ShowLoan.text_field_national_serial_number")}
                                placeholder={t("ShowLoan.text_field_enter_your_national_serial_number")}
                                type="text"
                                error={
                                    !!(formik.touched.national_serial_number && formik.errors.national_serial_number)
                                }
                                fullWidth
                                helperText={
                                    formik.touched.national_serial_number ? formik.errors.national_serial_number : null
                                }
                                onBlur={formik.handleBlur("national_serial_number")}
                                onChange={(e) => {
                                    const inputValue = e.target.value;
                                    const regex = /^[A-Za-z0-9]*$/;
                                    if (regex.test(inputValue)) {
                                        formik.setFieldValue("national_serial_number", inputValue);
                                    }
                                }}
                            />
                        ) : (
                            <TextField
                                sx={{ width: "100%" }}
                                disabled={LoanDetails.state_id !== 17}
                                name="national_tracking_code"
                                size="small"
                                value={formik.values.national_tracking_code}
                                variant="outlined"
                                label={t("ShowLoan.text_field_national_tracking_code")}
                                placeholder={t("ShowLoan.text_field_enter_your_national_tracking_code")}
                                type="text"
                                error={
                                    !!(formik.touched.national_tracking_code && formik.errors.national_tracking_code)
                                }
                                fullWidth
                                helperText={
                                    formik.touched.national_tracking_code ? formik.errors.national_tracking_code : null
                                }
                                onBlur={formik.handleBlur("national_tracking_code")}
                                onChange={(event) => {
                                    const inputValue = event.target.value;
                                    if (isNaN(Number(inputValue))) {
                                        return;
                                    }
                                    formik.handleChange({
                                        target: {
                                            name: "national_tracking_code",
                                            value: inputValue,
                                        },
                                    });
                                }}
                            />
                        )}
                    </Grid>
                    <Grid item xs={12} sm={4}>
                        <MuiDatePicker
                            formik={formik}
                            disabled={LoanDetails.state_id !== 17}
                            disableFuture={true}
                            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={{ p: 2 }}>
                    <Grid item xs={12} sm={6}>
                        {provinceStates.provinceList.length !== 0 ? (
                            <SelectBox
                                name="province_id"
                                label={t("ShowLoan.text_field_province_id")}
                                size="small"
                                variant="outlined"
                                disabled
                                value={formik.values.province_id}
                                selectType="province_id"
                                schema={{ value: "value", name: "name" }}
                                isLoading={provinceStates.isLoadingProvinceList}
                                errorEcured={provinceStates.errorProvinceList}
                                selectors={provinceStates.provinceList}
                                select={formik.values.province_id}
                                handleChange={(event) => {
                                    formik.setFieldValue("province_id", event.target.value);
                                    citiesStates.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")}
                            />
                        ) : (
                            <TextField
                                sx={{ width: "100%" }}
                                disabled
                                variant="outlined"
                                size="small"
                                label={t("ShowLoan.text_field_province_id")}
                                value={t("text_field_loading")}
                                type={"text"}
                            />
                        )}
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        {citiesStates.cityList.length !== 0 ? (
                            <SelectBox
                                name="city_id"
                                label={
                                    citiesStates.cityList.length === 0
                                        ? `${t("ShowLoan.cityList_empty")}`
                                        : citiesStates.cityTextField
                                }
                                size="small"
                                selectType="city_id"
                                value={formik.values.city_id}
                                disabled={LoanDetails.state_id !== 17}
                                variant="outlined"
                                selectors={citiesStates.cityList}
                                select={formik.values.city_id}
                                schema={{ value: "value", name: "name" }}
                                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")}
                            />
                        ) : (
                            <TextField
                                sx={{ width: "100%" }}
                                disabled
                                variant="outlined"
                                size="small"
                                label={t("ShowLoan.cityList_empty")}
                                value={t("text_field_loading")}
                                type={"text"}
                            />
                        )}
                    </Grid>
                </Grid>
                <Grid container spacing={2} sx={{ p: 2 }}>
                    <Grid item xs={12} sm={6}>
                        <TextField
                            sx={{ width: "100%" }}
                            name="telephone_number"
                            size="small"
                            disabled={LoanDetails.state_id !== 17}
                            variant="outlined"
                            type={"tel"}
                            value={formik.values.telephone_number}
                            onChange={(event) => {
                                const inputValue = event.target.value;
                                if (isNaN(Number(inputValue))) {
                                    return;
                                }
                                formik.handleChange({
                                    target: {
                                        name: "telephone_number",
                                        value: inputValue,
                                    },
                                });
                            }}
                            label={t("ShowLoan.text_field_tel_number")}
                            placeholder={t("ShowLoan.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 item xs={12} sm={6}>
                        <SelectBox
                            name="work_year"
                            label={t("LoanRequest.text_field_work_year")}
                            size="small"
                            value={formik.values.work_year}
                            disabled={LoanDetails.state_id !== 17}
                            selectType="work_year"
                            selectors={workYear}
                            isLoading={isLoadingWorkYear}
                            errorEcured={errorWorkYear}
                            schema={{ value: "name", name: "name" }}
                            select={formik.values.work_year}
                            handleChange={(event) => {
                                formik.setFieldValue("work_year", event.target.value);
                            }}
                            setFieldTouched={formik.setFieldTouched}
                            error={formik.touched.work_year && Boolean(formik.errors.work_year)}
                            helperText={formik.touched.work_year && formik.errors.work_year}
                            onBlur={formik.handleBlur("work_year")}
                        />
                    </Grid>
                </Grid>
                <Grid container spacing={2} sx={{ p: 2 }}>
                    <Grid item xs={12} sm={6}>
                        {educationStates.educationsList.length !== 0 ? (
                            <SelectBox
                                name="education_id"
                                label={t("ShowLoan.text_field_education_id")}
                                disabled={LoanDetails.state_id !== 17}
                                size="small"
                                variant="outlined"
                                isLoading={educationStates.isLoadingEducationsList}
                                errorEcured={educationStates.errorEducationsList}
                                selectType="education_id"
                                selectors={educationStates.educationsList}
                                select={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")}
                            />
                        ) : (
                            <TextField
                                sx={{ width: "100%" }}
                                disabled
                                size="small"
                                label={t("ShowLoan.text_field_education_id")}
                                value={t("text_field_loading")}
                                type={"text"}
                            />
                        )}
                    </Grid>
                    <Grid item xs={12} sm={6}>
                        {occupationStates.occupationsList.length !== 0 ? (
                            <SelectBox
                                name="occupation_id"
                                label={t("ShowLoan.text_field_occupation_id")}
                                size="small"
                                variant="outlined"
                                disabled={LoanDetails.state_id !== 17}
                                isLoading={occupationStates.isLoadingOccupationsList}
                                errorEcured={occupationStates.errorOccupationsList}
                                selectType="occupation_id"
                                selectors={occupationStates.occupationsList}
                                select={formik.values.occupation_id}
                                schema={{ value: "id", name: "title" }}
                                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")}
                            />
                        ) : (
                            <TextField
                                sx={{ width: "100%" }}
                                disabled
                                size="small"
                                label={t("ShowLoan.text_field_occupation_id")}
                                value={t("text_field_loading")}
                                type={"text"}
                            />
                        )}
                    </Grid>
                </Grid>
                <Grid container spacing={2} sx={{ p: 2 }}>
                    <Grid item xs={12} sm={6}>
                        <TextField
                            disabled={LoanDetails.state_id !== 17}
                            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
                            disabled={LoanDetails.state_id !== 17}
                            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("ShowLoan.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);
                            }}
                            disabled={LoanDetails.state_id !== 17}
                            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={t("ShowLoan.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 === "" || LoanDetails.state_id !== 17}
                            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("ShowLoan.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={{ p: 2 }}>
                    <Grid item xs={12} sm={12}>
                        <TextField
                            multiline
                            disabled={LoanDetails.state_id !== 17}
                            rows={4}
                            sx={{ width: "100%" }}
                            name="address"
                            variant="outlined"
                            value={formik.values.address}
                            size="small"
                            label={t("ShowLoan.text_field_address")}
                            placeholder={t("ShowLoan.text_field_enter_your_address")}
                            type={"text"}
                            error={!!(formik.touched.address && formik.errors.address)}
                            onChange={formik.handleChange}
                            fullWidth
                            helperText={formik.touched.address ? formik.errors.address : null}
                            onBlur={formik.handleBlur("address")}
                        />
                    </Grid>
                </Grid>
                {LoanDetails.state_id === 17 && (
                    <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}
                            variant="contained"
                            size="large"
                            sx={{ mt: 2 }}
                            endIcon={<EditIcon />}
                            disabled={formik.isSubmitting}
                        >
                            {t("ShowLoan.button_submit")}
                        </Button>
                    </Box>
                )}
            </Stack>
        </>
    );
};

export default UpdateFormReal;