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";
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 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,
        address: LoanDetails.address,
        birthday: LoanDetails.birthday ? moment(LoanDetails.birthday) : "",
        navgan_id: LoanDetails.navgan_id,
        province_id: LoanDetails.province_id,
        city_id: LoanDetails.city_id,
        first_name: LoanDetails.first_name,
        last_name: LoanDetails.last_name,
        father_name: LoanDetails.father_name,
        gender: LoanDetails.gender,
        occupation_id : LoanDetails.occupation_id,
        navgan_type: LoanDetails.navgan_type,
        vehicle_type: LoanDetails.vehicle_type,
        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")),
        activity_type: Yup.string().required(t("ShowLoan.error_message_activity_type")),
        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")),
        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.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.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("navgan_plan_id", values.navgan_plan_id);
        formData.append("activity_type", values.activity_type);
        formData.append("first_name", values.first_name);
        formData.append("last_name", values.last_name);
        formData.append("father_name", values.father_name);
        formData.append("gender", values.gender);
        formData.append("province_id", LoanDetails.province_id);
        formData.append("city_id", LoanDetails.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/navgan/followUp-loan");
        }).catch(() => {
        }).finally(() => {
            props.setSubmitting(false);
        })

    };

    const formik = useFormik({
        initialValues,
        validationSchema,
        onSubmit: handleSubmit,
    });

    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}
                    />
                </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}
                    />
                </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: 1,
                                name: "زن",
                            },
                            {
                                id: 2,
                                value: 0,
                                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
                        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}
                    />
                </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}
                    />) : (<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}
                    />)}
                </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={4}>
                    <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={4}>
                    {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={4}>
                    {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={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)}
                        fullWidth
                        helperText={formik.touched.address ? formik.errors.address : null}
                    />
                </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
                        type="submit"
                        variant="contained"
                        size="large"
                        sx={{mt: 2}}
                        endIcon={<EditIcon/>}
                        disabled={formik.isSubmitting || !formik.isValid}
                    >
                        {t("ShowLoan.button_submit")}
                    </Button>
                </Box>
            )}
        </Stack>
    </>);
};

export default UpdateFormReal;