import React, { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { Inertia } from "@inertiajs/inertia";
import { usePage } from "@inertiajs/inertia-react";
import { Form, message, Upload, Select, Button as AntButton } from "antd";
import Layout from "../../../Layout/Index";
import BackArrow from "./../../../Components/Common/BackArrow";
import Card from "./../../../Components/Common/Card";
import useCountries from "../../../hooks/useCountries";
import profilePic from "../../../../assets/profilepic.png";
import ArrowDownSM from "../../../../assets/icons/arrow-down.png";
import Button from "../../../Components/Common/Button";
import moment from "moment";
import {
    isRequired,
    isEmailRule,
    isEnglishLangRule,
} from "../../../Constants/validationRules";
import {
    COLLEGE_NAME,
    COLLEGE_NAME_RULE,
    GENDER_OPTIONS,
    YES_NO_OPTIONS,
} from "../../../Constants/enums";
import {
    Input,
    InputSelect,
    InputDatePicker,
    InputSelectCountries,
    InputRadioGroup,
    InputTextArea,
    InputDragger,
} from "../../../Components/Common/Form";
import { formatErrors } from "../../../Constants/globals";

const Update = () => {
    // props
    const {
        student = {},
        application = {},
        required_docs = [],
        exam_center_name = [],
        high_school_type = [],
        college_name = "",
        last_qualification = [],
        files = [],
        major_course = [],
        exam_countries = [],
        locale,
    } = usePage().props;

    // states
    const [previewImg, setPreviewImg] = useState(null);
    const [loading, setLoading] = useState(false);
    const [isEnglish, setIsEnglish] = useState(
        String(application?.english_first_language ?? 0)
    );
    const [isEmployee, setIsEmployee] = useState(
        String(application?.is_employee ?? 0)
    );
    const [isMajor, setIsMajor] = useState("major");
    const [marketingDiscount, setMarketingDiscount] = useState(
        String(application.marketing_discount ?? 0)
    );
    const [tuitionFeeDiscount, setTuitionFeeDiscount] = useState(
        String(application.tuition_fee_discount ?? 0)
    );

    const [form] = Form.useForm();
    const { t } = useTranslation();
    const { countries } = useCountries();

    // upload profile photo
    const beforeUpload = (file) => {
        const isJpgOrPng =
            file.type === "image/jpeg" ||
            file.type === "image/png" ||
            file.type === "image/jpg";
        if (!isJpgOrPng) {
            message.error("You can only upload jpeg,png,jpg file!");
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error("Image must smaller than 2MB!");
        } else {
            setPreviewImg(URL?.createObjectURL(file));
        }

        return isJpgOrPng && isLt2M;
    };

    // handle image change
    const handleChange = (info) =>
        setPreviewImg(URL.createObjectURL(info.file.originFileObj));

    // handle english competence
    const handleChangeIsEnglish = ({ target }) => setIsEnglish(target.value);

    // handle is_employee
    const handleChangeIsEmployee = ({ target }) => setIsEmployee(target.value);

    // handle courses majors
    const handleCoursesMajors = (values, target) => {
        setIsMajor(target.value);

        Inertia.get(
            route("admin.application.getMajorCourses"),
            {
                values,
            },
            {
                preserveState: true,
            }
        );
    };

    // handle exam centers
    const handleExamsCenter = (values) => {
        Inertia.get(
            "",
            {
                country: values,
            },
            {
                preserveState: true,
            }
        );
    };

    // handle countries list
    const countriesList = useMemo(() => {
        if (college_name === "ar") return countries;
        switch (locale) {
            case "ur":
                return { ...countries, "Saudi Arabia": "سعودی عرب" };
            case "fr":
                return { ...countries, "Saudi Arabia": "Arabie saoudite" };
            case "pa":
                return { ...countries, "Saudi Arabia": "سعودي عربستان" };
            default:
                return { ...countries, "Saudi Arabia": "Saudi Arabia" };
        }
    }, [countries, locale]);

    // handle change market discount
    const handleChangeMarketingDiscount = ({ target }) =>
        setMarketingDiscount(target.value);

    // handle change tuition fee
    const handleChangeTuitionFeeDiscount = ({ target }) =>
        setTuitionFeeDiscount(target.value);

    // handle cancel
    const handleCancel = () => {
        window.history.back();
    };

    // handle form values change
    const onValuesChange = (changedValues) => {
        if (changedValues?.exam_country) {
            form.setFieldValue("exam_center", "");
        }
    };

    // handle submit
    const handleUpdate = (values) => {
        // check for gender is male then profile image is required
        if (
            values.gender == 0 &&
            !(values?.imageFile?.file.originFileObj ?? student?.image)
        ) {
            form.setFields([
                {
                    name: "imageFile",
                    errors: [t("Profile Image is required")],
                },
            ]);

            return;
        }

        let formValues = {
            ...values,
            dob: values?.dob?.format("YYYY-MM-DD"),
            imageFile: values?.imageFile?.file.originFileObj ?? student?.image,
            graduation_year: values?.graduation_year?.format("YYYY-MM-DD"),
            qualification_date:
                values?.qualification_date?.format("YYYY-MM-DD"),
            userId: application?.user_id,
            college: college_name,
            applicationId: application?.id,
            files: [],
        };

        // to add required docs in array,
        // as on backend we are accepting them in array format
        required_docs.forEach((doc) => {
            if (values.hasOwnProperty(doc.documents_value)) {
                if (
                    typeof values[doc.documents_value] === "object" &&
                    values[doc.documents_value] !== null
                ) {
                    formValues.files.push(
                        values[doc.documents_value]?.file?.originFileObj
                    );
                } else {
                    formValues.files.push(
                        application.files[doc.documents_value]?.file_path
                    );
                }
            }
        });

        const filesObject = required_docs.reduce((result, doc, index) => {
            result[doc.documents_value] = formValues.files[index];
            return result;
        }, {});

        formValues.files = [];

        formValues = {
            ...formValues,
            files: filesObject,
        };

        Inertia.post(
            route("admin.applications.update", [application?.id]),
            formValues,
            {
                onStart: () => {
                    setLoading(true);
                },
                onSuccess: () => {
                    message.success(`${t("Application Updated Successfully")}`);
                },
                onError: (errors) => {
                    errors?.error_message
                        ? message.error(errors.error_message)
                        : form.setFields(formatErrors(errors));
                },
                onFinish: () => {
                    setLoading(false);
                },
            }
        );
    };

    return (
        <Layout current="applications">
            <BackArrow URL={route("admin.applications.index")} />

            <div className="application-details-wrapper">
                <div className="d-flex align-items-center justify-content-between mt-24 mb-16">
                    <h1 className="f-18 fw-500 mb-0 d-flex">
                        <span>{t("Application ID")} #</span>{" "}
                        <span>{application?.id}</span>
                    </h1>
                </div>

                <Form
                    initialValues={{
                        qualifications: [{}],
                        ...application,
                        gender: application.gender?.toString(),
                        dob: application.dob
                            ? moment(application.dob)
                            : moment(),
                        graduation_year: application.graduation_year
                            ? moment(application.graduation_year)
                            : moment(),
                        qualification_date:
                            application.qualification_date &&
                            moment(application.qualification_date),
                        is_employee: application.is_employee
                            ? String(application.is_employee)
                            : "0",
                        marketing_discount: application.marketing_discount
                            ? String(application.marketing_discount)
                            : "0",
                        tuition_fee_discount: application.tuition_fee_discount
                            ? String(application.tuition_fee_discount)
                            : "0",
                        english_first_language:
                            application.english_first_language
                                ? String(application.english_first_language)
                                : "0",
                        have_computer: application.have_computer
                            ? String(application.have_computer)
                            : "0",
                    }}
                    form={form}
                    scrollToFirstError
                    onFinish={handleUpdate}
                    onValuesChange={onValuesChange}
                >
                    {/* Personal Information */}
                    <Card minHeight={190} className="mb-16">
                        <h2 className="mb-20">
                            {t("Update Personal Information")}
                        </h2>

                        <div className="row">
                            <div className="col-12">
                                <div className="d-flex">
                                    <div>
                                        <div className="logoInput text-center">
                                            <div className="logo-img">
                                                {previewImg && (
                                                    <img
                                                        src={previewImg}
                                                        alt="student-profile"
                                                    />
                                                )}
                                                {!previewImg &&
                                                    student?.image && (
                                                        <img
                                                            src={student?.image}
                                                            alt="student-profile"
                                                        />
                                                    )}
                                                {!previewImg &&
                                                    !student?.image &&
                                                    profilePic && (
                                                        <img
                                                            src={profilePic}
                                                            alt="student-profile"
                                                        />
                                                    )}
                                            </div>
                                            <Form.Item name="imageFile">
                                                <Upload
                                                    showUploadList={false}
                                                    maxCount={1}
                                                    accept={"image/*"}
                                                    beforeUpload={beforeUpload}
                                                    onChange={handleChange}
                                                    customRequest={({
                                                        file,
                                                        onSuccess,
                                                    }) => {
                                                        setTimeout(() => {
                                                            onSuccess("ok");
                                                        }, 0);
                                                    }}
                                                >
                                                    <AntButton
                                                        type="link"
                                                        className="f-12 mt-2"
                                                        style={{
                                                            color: "#079751",
                                                        }}
                                                    >
                                                        {t("Upload Picture")}
                                                    </AntButton>
                                                </Upload>
                                            </Form.Item>
                                        </div>
                                    </div>
                                    <div className=" d-flex align-items-center">
                                        <p className="f-12 fw-400 text-danger ml-28 mb-70">
                                            {t("Note:")} <br />
                                            {t(
                                                "Picture is mandatory for male students"
                                            )}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="row">
                            {!(college_name === "en") && (
                                <h5 className="f-15 fw-400 mb-14">
                                    {`${t("Student Name in ")} ${
                                        COLLEGE_NAME[college_name]
                                    } (Matching Identity)`}
                                </h5>
                            )}

                            {!(college_name === "en") && (
                                <>
                                    <div className="col mb-16">
                                        <div className="d-flex flex-column">
                                            <div className="row">
                                                <div className="col">
                                                    <Input
                                                        name="first_name_tr"
                                                        label={t("First name")}
                                                        rules={[
                                                            COLLEGE_NAME_RULE[
                                                                college_name
                                                            ],
                                                        ]}
                                                    />
                                                </div>
                                                <div className="col">
                                                    <Input
                                                        name="father_name_tr"
                                                        label={t("Father name")}
                                                        rules={[
                                                            COLLEGE_NAME_RULE[
                                                                college_name
                                                            ],
                                                        ]}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="col">
                                        <div className="d-flex flex-column">
                                            <div className="row">
                                                <div className="col">
                                                    <Input
                                                        name="grandfather_name_tr"
                                                        label={t(
                                                            "Grand Father name"
                                                        )}
                                                        rules={[
                                                            COLLEGE_NAME_RULE[
                                                                college_name
                                                            ],
                                                        ]}
                                                    />
                                                </div>
                                                <div className="col">
                                                    <Input
                                                        name="family_name_tr"
                                                        label={t("Family name")}
                                                        rules={[
                                                            COLLEGE_NAME_RULE[
                                                                college_name
                                                            ],
                                                        ]}
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </>
                            )}

                            <h5 className="f-15 fw-400 mb-14">
                                {t(
                                    "Student Name in English (Matching Identity)"
                                )}
                            </h5>

                            <div className="col">
                                <div className="d-flex flex-column">
                                    <div className="row">
                                        <div className="col">
                                            <Input
                                                name="first_name"
                                                label={t("First name")}
                                                rules={[isEnglishLangRule]}
                                            />
                                        </div>
                                        <div className="col">
                                            <Input
                                                name="father_name"
                                                label={t("Father name")}
                                                rules={
                                                    college_name !== "en"
                                                        ? [isEnglishLangRule]
                                                        : []
                                                }
                                            />
                                        </div>
                                    </div>

                                    <div className="row mb-24">
                                        <div className="col">
                                            <InputSelect
                                                name="gender"
                                                label={t("Gender")}
                                                width="50%"
                                                options={GENDER_OPTIONS}
                                            />
                                        </div>
                                        <div className="col">
                                            <InputDatePicker
                                                name="dob"
                                                label={t("DOB")}
                                                width="50%"
                                            />
                                        </div>
                                    </div>

                                    <div className="row">
                                        <div className="col">
                                            <Input
                                                name="id_number"
                                                label={t("ID number")}
                                            />
                                        </div>
                                        <div className="col">
                                            <Input
                                                name="passport_number"
                                                label={t("Passport")}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="col">
                                <div className="d-flex flex-column">
                                    <div className="row">
                                        <div className="col">
                                            <Input
                                                name="grandfather_name"
                                                label={t("Grand Father name")}
                                                rules={
                                                    college_name !== "en"
                                                        ? [isEnglishLangRule]
                                                        : []
                                                }
                                            />
                                        </div>
                                        <div className="col">
                                            <Input
                                                name="family_name"
                                                label={t("Family name")}
                                                rules={[isEnglishLangRule]}
                                            />
                                        </div>
                                    </div>

                                    <div className="row">
                                        <div className="col">
                                            <InputSelectCountries
                                                name="native_country"
                                                label={t("Native country")}
                                                width="321px"
                                            />
                                        </div>
                                        <div className="col">
                                            <InputSelectCountries
                                                name="nationality"
                                                label={t("Nationality")}
                                                width="321px"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Card>

                    {/*Contact Information*/}
                    <Card minHeight={190} className="mb-16">
                        <h2 className="mb-20">
                            {t("Update Contact Information")}
                        </h2>

                        <div className="row">
                            <div className="col">
                                <div className="d-flex flex-column">
                                    <div className="row">
                                        <div className="col">
                                            <Input
                                                name="email"
                                                label={t("Email address")}
                                                rules={[
                                                    isEmailRule(
                                                        "Email",
                                                        t(
                                                            "The input is not valid E-mail!"
                                                        )
                                                    ),
                                                    isRequired(
                                                        t(
                                                            "Email address is required"
                                                        )
                                                    ),
                                                ]}
                                            />
                                        </div>
                                        <div className="col">
                                            <Input
                                                name="mobile_number"
                                                label={t("Mobile number")}
                                            />
                                        </div>
                                    </div>
                                    <div className="row">
                                        <div className="col">
                                            <InputSelectCountries
                                                name="country_of_residence"
                                                label={t(
                                                    "Country of residence"
                                                )}
                                                width="321px"
                                            />
                                        </div>
                                        <div className="col">
                                            <Input
                                                name="residence_city"
                                                label={t("Residence city")}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="col">
                                <div className="d-flex flex-column">
                                    <div className="row">
                                        <div className="col">
                                            <Input
                                                name="phone_number"
                                                label={t("Phone number")}
                                                rules={[
                                                    {
                                                        required: false,
                                                    },
                                                ]}
                                            />
                                        </div>
                                        <div className="col">
                                            <Input
                                                name="fax_number"
                                                label={t("Fax number")}
                                                rules={[
                                                    {
                                                        required: false,
                                                    },
                                                ]}
                                            />
                                        </div>
                                    </div>

                                    <div className="row">
                                        <div className="col">
                                            <Input
                                                name="address"
                                                label={t("Address")}
                                                rules={[
                                                    {
                                                        required: false,
                                                    },
                                                ]}
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Card>

                    {/*Educational Information*/}
                    <Card minHeight={190} className="mb-16">
                        <h2 className="mb-20">
                            {t("Update Educational Information")}
                        </h2>

                        <div className="row">
                            <div className="col">
                                <div className="d-flex flex-column">
                                    <div className="row">
                                        <div className="col">
                                            <InputSelect
                                                width="321px"
                                                name="last_qualification"
                                                label={t("Last qualification")}
                                                options={last_qualification}
                                            />
                                        </div>
                                        <div className="col">
                                            <InputSelect
                                                width="321px"
                                                name="high_school_type"
                                                label={t("High School type")}
                                                options={high_school_type}
                                            />
                                        </div>
                                    </div>

                                    <div className="row mt-24">
                                        <div className="col">
                                            <Input
                                                name="name_of_institute"
                                                label={t("Name of Institute")}
                                            />
                                        </div>
                                        <div className="col">
                                            <InputDatePicker
                                                name="graduation_year"
                                                label={t("Graduation year")}
                                                width="50%"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div className="col">
                                <div className="d-flex flex-column">
                                    <div className="row">
                                        <div className="col">
                                            <InputSelectCountries
                                                name="country_of_certificate"
                                                label={t(
                                                    "Country Of Certificate"
                                                )}
                                                width="100%"
                                            />
                                        </div>
                                        <div className="col">
                                            <Input
                                                name="school_grades"
                                                label={t("School grades")}
                                                width="100%"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </Card>

                    {/*English Competence*/}
                    {college_name === "en" && (
                        <Card minHeight={190} className="mb-16">
                            <h2 className="mb-20">
                                {t("Update English Competence")}
                            </h2>

                            <div className="row">
                                <div className="col-6">
                                    <div className="d-flex flex-column">
                                        <InputRadioGroup
                                            name="english_first_language"
                                            label={t(
                                                "Is English your first language?"
                                            )}
                                            options={YES_NO_OPTIONS}
                                            formItemStyle={{ margin: 0 }}
                                            formItemClassName={{
                                                noBorder: true,
                                            }}
                                            onRadioChange={
                                                handleChangeIsEnglish
                                            }
                                        />

                                        {/* dynamic english competence list */}
                                        {isEnglish === "1" && (
                                            <div className="row mt-20">
                                                <div className="col-4">
                                                    <Input
                                                        name="english_qualification"
                                                        label={t(
                                                            "English Qualification"
                                                        )}
                                                    />
                                                </div>

                                                <div className="col-4">
                                                    <InputDatePicker
                                                        name="qualification_date"
                                                        label={t(
                                                            "Qualification Date"
                                                        )}
                                                        width="50%"
                                                    />
                                                </div>

                                                <div className="col-4">
                                                    <Input
                                                        name="result_obtained"
                                                        label={t(
                                                            "Result Obtained"
                                                        )}
                                                    />
                                                </div>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </Card>
                    )}

                    {/*Business Information*/}
                    <Card minHeight={190} className="mb-16">
                        <h2 className="mb-20">
                            {t("Update Business Information")}
                        </h2>

                        <div className="row">
                            <div className="col">
                                <div className="d-flex flex-column">
                                    <InputRadioGroup
                                        name="is_employee"
                                        label={t("Are you an employee")}
                                        options={YES_NO_OPTIONS}
                                        formItemClassName={{ noBorder: true }}
                                        onRadioChange={handleChangeIsEmployee}
                                    />
                                    {isEmployee === "1" && (
                                        <div className="row">
                                            <div className="col-4">
                                                <Input
                                                    name="working_sector"
                                                    label={t("Working sector")}
                                                />
                                            </div>
                                            <div className="col-4">
                                                <Input
                                                    name="type_of_work"
                                                    label={t("Type of work")}
                                                />
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>

                            <div className="col">
                                <InputRadioGroup
                                    name="have_computer"
                                    label={t("Do you own a computer ?")}
                                    options={YES_NO_OPTIONS}
                                    formItemClassName={{ noBorder: true }}
                                />
                            </div>
                        </div>
                    </Card>

                    {/*Personal Statement*/}
                    <Card minHeight={190} className="mb-16">
                        <h2 className="mb-20">
                            {t("Update Personal Statement")}
                        </h2>

                        <InputTextArea
                            name="personal_statement"
                            label={t(
                                "Please complete this section. Your statement will be assessed as part of the admissions process."
                            )}
                            height={180}
                        />
                    </Card>

                    {/*Required Documents*/}
                    <Card minHeight={190} className="mb-16">
                        <h2 className="mb-20">
                            {t("Update Required Documents")}
                        </h2>
                        <p className={"f-14 fw-500 mb-14 text-muted"}>
                            {t(
                                "Allowed files types are jpeg,png,jpg and max size is 2MB"
                            )}
                        </p>

                        <div className="row">
                            {required_docs.map((doc) => (
                                <div className="col" key={doc?.id}>
                                    <InputDragger
                                        rules={
                                            files[doc.documents_value]
                                                ?.file_path
                                                ? [
                                                      {
                                                          required: false,
                                                      },
                                                  ]
                                                : null
                                        }
                                        name={doc.documents_value}
                                        label={t(doc.documents_value)}
                                        imageURL={
                                            files[doc.documents_value]
                                                ?.file_path
                                        }
                                    />
                                </div>
                            ))}
                        </div>
                    </Card>

                    {/*Choose Program*/}
                    <Card minHeight={190} className="mb-16">
                        <h2 className="mb-20">{t("Update Choose Program")}</h2>

                        <div className="row">
                            <div className="col-6">
                                <div className="d-flex align-items-center justify-content-between">
                                    <InputSelect
                                        width="321px"
                                        name="apply_for"
                                        label={t("Apply for")}
                                        options={[
                                            {
                                                value: "major",
                                                label: t("Major"),
                                            },
                                            // { value: "course", label: t("Course") },
                                        ]}
                                        onChange={handleCoursesMajors}
                                    />

                                    {isMajor == "major" ? (
                                        <InputSelect
                                            width={320}
                                            name="major"
                                            label={t("Select major")}
                                            options={major_course}
                                            rules={[]}
                                        />
                                    ) : (
                                        <InputSelect
                                            width={320}
                                            name="course"
                                            label={t("Select course")}
                                            options={major_course}
                                            rules={[]}
                                        />
                                    )}
                                </div>
                            </div>
                        </div>
                    </Card>

                    {/*Exam Center*/}
                    <Card minHeight={190} className="mb-16">
                        <h2 className="mb-20">{t("Update Exam Center")}</h2>

                        <div className="row">
                            <div className="col-6">
                                <div className="d-flex align-items-center justify-content-between">
                                    <Form.Item
                                        name="exam_country"
                                        label={t("Exam country")}
                                        style={{
                                            marginBottom: 0,
                                        }}
                                    >
                                        {/* ! it will only work on alpha_2 keys, e,g: code: PK */}
                                        <Select
                                            style={{
                                                width: "320px",
                                            }}
                                            onChange={handleExamsCenter}
                                            className="primary-select"
                                            suffixIcon={
                                                <img src={ArrowDownSM} alt="" />
                                            }
                                            bordered={true}
                                            showSearch
                                            dropdownMatchSelectWidth
                                        >
                                            {exam_countries?.map((option) => (
                                                <Option
                                                    key={
                                                        option?.key ||
                                                        option?.value
                                                    }
                                                    value={option?.value}
                                                >
                                                    {t(
                                                        countriesList[
                                                            option?.value
                                                        ]
                                                    )}
                                                </Option>
                                            ))}
                                        </Select>
                                    </Form.Item>

                                    <InputSelect
                                        width={320}
                                        name="exam_center"
                                        label={t("Exam center")}
                                        options={exam_center_name}
                                    />
                                </div>
                            </div>
                        </div>
                    </Card>

                    {/*Exam Center*/}
                    <Card minHeight={190} className="mb-16">
                        <h2 className="mb-20">{t("Update Discounts")}</h2>

                        <div className="row">
                            <div className="col-6">
                                <div className="d-flex flex-column align-items-start">
                                    <InputRadioGroup
                                        name="marketing_discount"
                                        label={t(
                                            "Do you have marketing discount?"
                                        )}
                                        options={YES_NO_OPTIONS}
                                        formItemClassName={{ noBorder: true }}
                                        onRadioChange={
                                            handleChangeMarketingDiscount
                                        }
                                    />
                                    {marketingDiscount === "1" && (
                                        <Input
                                            name="reference_id"
                                            label={t("Reference Id")}
                                            formItemStyle={{ margin: 0 }}
                                        />
                                    )}
                                </div>
                            </div>

                            <div className="col-6">
                                <div className="d-flex flex-column align-items-start">
                                    <InputRadioGroup
                                        name="tuition_fee_discount"
                                        label={t("Tuition fee discount")}
                                        options={YES_NO_OPTIONS}
                                        formItemClassName={{ noBorder: true }}
                                        onRadioChange={
                                            handleChangeTuitionFeeDiscount
                                        }
                                    />
                                    {tuitionFeeDiscount === "1" && (
                                        <Input
                                            name="discount_cause"
                                            label={t("Discount cause")}
                                            formItemStyle={{ margin: 0 }}
                                        />
                                    )}
                                </div>
                            </div>
                        </div>
                    </Card>

                    <div className="d-flex justify-content-end mt-12">
                        <Button
                            htmlType={"button"}
                            className="mr-16"
                            title={"Cancel"}
                            handler={handleCancel}
                        />
                        <Button
                            background="#089752"
                            color="#FFFFFF"
                            borderWidth={0}
                            title={t("Update")}
                            loading={loading}
                            htmlType={"submit"}
                        />
                    </div>
                </Form>
            </div>
        </Layout>
    );
};
export default Update;