// material-ui
import {
    Button,
    FormControlLabel,
    Grid, InputAdornment, Switch, TextField, Typography
} from '@mui/material';
import MainCard from "../../components/MainCard";
import * as React from "react";
import {useForm} from "react-hook-form";
import {useContext, useEffect, useState} from "react";
import LoadingComponent from "../extra-pages/LoadingComponent";
import {useLocation, useNavigate, useParams} from "react-router-dom";
import {
    GeneralConfirmWindow,
    getComboValueByIdList,
    getComboValueByLabel,
    getDateString,
    getDeletedRecordWithRefList,
    getIdList,
    getNewRecordWithRefList, isOptionEqualToValue, isStringEmptyAfterTrim, notifyDeleteError, notifyDeleteSuccess,
    notifySaveSuccess, trimDataBeforePost,
} from "../../utils/CommonFunction";
import Autocomplete from "@mui/material/Autocomplete";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {
    CHECK_EVENT_DUPLICATE, //GET_EVENT_NOTIFICATION_OVERTIME,
    GET_EVENT_PATH,
    GET_SUB_DIVISION_COMBO_LIST,
    POST_EVENT_PATH
} from "../../utils/ApiPathConst";
import {LIONER_BUTTON_THEME, LIONER_LONG_BUTTON_THEME, GENERAL_RED_COLOR} from "../../themes/colorConst";
import {eventFrequencyCombo, EVENT_REGION_COMBO, EVENT_TYPE_COMBO} from "../../utils/ComboConst";
import {DatePicker} from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";
import {DemoItem} from "@mui/x-date-pickers/internals/demo";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import {ThemeProvider} from "@emotion/react";
import UploadContext from "../../components/UploadProvider";
import {isObjEmpty} from "../../utils/Utils";
import AbilityContext from "../../components/AbilityProvider";
import {CARD_MAX_WIDTH} from "../../themes/themeConst";

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const EventForm = ({   refEventDetail,
                       isNewRecord,
                       refSubDivisionList,
                       getEventDetail,
                       applicationList,
                       refReminderInterval,
                       refReminderBefore,
                       refReminderLimit,
                       refReminderLimitMax
}) => {
    const [overtimeWarning, setOvertimeWarning] = useState("");
    const [reminderInterval, setReminderInterval] = useState(null);
    const [reminderBefore, setReminderBefore] = useState(null);
    const [reminderLimit, setReminderLimit] = useState(null);
    const [reminderLimitMax, setReminderLimitMax] = useState(0);
    const location = useLocation();
    const queryParams = new URLSearchParams(location.search);
    const refId = queryParams.get("refId");
    const [isFirstInit, setIsFirstInit] = useState(true);

    const params = useParams();
    const navigate = useNavigate();
    const ability = useContext(AbilityContext);
    const [onReady, setOnReady] = useState(false);
    const [errors, setErrors] = useState({});
    const [eventDetail, setEventDetail] = useState({});
    const [isCollectData, setIsCollectData] = useState(false);
    const [userConfirm, setUserConfirm] = useState(false);
    const [isEditing, setIsEditing] = useState(false);
    const { setIsUploading } = useContext(UploadContext);
    const [refEvent, setRefEvent] = useState({});

    //form data
    const {register, getValues, setValue} = useForm();
    const [eventDate, setEventDate] = useState(null);
    const [awardDate, setAwardDate] = useState(null);
    const [deadlineDate, setDeadlineDate] = useState(null);
    const [announceDate, setAnnounceDate] = useState(null);
    const [selectedRegion, setSelectedRegion] = useState(null);
    const [selectedType, setSelectedType] = useState(null);
    const [selectedSubDivision, setSelectedSubDivision] = useState([]);
    const [fromDate, setFromDate] = useState(null);
    const [toDate, setToDate] = useState(null);
    const [reminderFlag, setReminderFlag] = useState(false);
    const [isFlagFetched, setIsFlagFetched] = useState(false);

    //reminder option
    const [selectedFrequency, setSelectedFrequency] = useState(null);
    const [nextApplicationDate, setNextApplicationDate] = useState(null);

    //combo list
    const [subDivisionList, setSubDivisionList] = useState([]);

    const [eventDateError, setEventDateError] = React.useState(null);
    const [awardDateError, setAwardDateError] = React.useState(null);
    const [deadlineDateError, setDeadlineDateError] = React.useState(null);
    const [announceDateError, setAnnounceDateError] = React.useState(null);
    const [fromError, setFromError] = React.useState(null);
    const [toError, setToError] = React.useState(null);
    const [nextApplicationDateError, setNextApplicationDateError] = React.useState(null);

    const eventDateErrorMessage = React.useMemo(() => {
        switch (eventDateError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [eventDateError]);

    const awardDateErrorMessage = React.useMemo(() => {
        switch (awardDateError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [awardDateError]);

    const deadlineDateErrorMessage = React.useMemo(() => {
        switch (deadlineDateError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [deadlineDateError]);

    const announceDateErrorMessage = React.useMemo(() => {
        switch (announceDateError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [announceDateError]);

    const fromErrorMessage = React.useMemo(() => {
        switch (fromError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [fromError]);

    const toErrorMessage = React.useMemo(() => {
        switch (toError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [toError]);

    const nextApplicationDateErrorMessage = React.useMemo(() => {
        switch (nextApplicationDateError) {
            case 'invalidDate': {
                return "Invalid date";
            }
        }
    }, [nextApplicationDateError]);
// ==============================|| DELETE WINDOW RELATED ||============================== //
    const [isWindowOpen, setIsWindowOpen] = React.useState(false);

    const handleClose = () => {
        setIsWindowOpen(false);
    };

    const handleDeleteClick = () => {
        setIsWindowOpen(true);
    };

    const copyEventAsNew = () => {
        navigate(`/event/maintain/-1?refId=${params.id}`);
    }

    useEffect(()=>{
        if(applicationList.length===0){
            validateReminder();
        }
    },[eventDate, nextApplicationDate, deadlineDate]);

    const validateReminder = () =>{
        const values = getValues();
        let firstIssueDate = null;
        let reminderDates = [];
        if (eventDate !== null &&
            nextApplicationDate !== null &&
            values.reminderThreshold !== null &&
            values.reminderInterval !== null &&
            values.reminderLimit !== null
        ) {
            //have value
            if(applicationList.length <=0){
                firstIssueDate = eventDate.add(-values.reminderThreshold,'days');
            }
            else{
                firstIssueDate = nextApplicationDate.add(-values.reminderThreshold, 'days');
            }

            reminderDates.push(firstIssueDate);
            for(let i=1; i < parseInt(values.reminderLimit)+1 ; i++){
                reminderDates.push(firstIssueDate.add(i*values.reminderInterval,'days'))
            }

            for(let j=0; j < reminderDates.length ; j++){
                if(reminderDates[j]-deadlineDate > 0){
                    setOvertimeWarning(`Estimated reminder exceeds the application deadline, the last reminder will be generated on ${reminderDates[j>1?j-1:0].format('DD/MM/YYYY')}.`);
                    return false;
                }
            }

            setOvertimeWarning("");
            return true;
        }
        return true;
    }

    function updateData(){
        if(applicationList.length >0){
            notifyDeleteError("Delete restricted. Application exist in this event");
            setIsWindowOpen(false);
        }
        else{
            axios.delete(`${apiPath}${GET_EVENT_PATH}/${params.id}`,
            )
                .then((response) => {
                    if (response.status === 204) {
                        notifyDeleteSuccess();
                        setIsWindowOpen(false);
                        returnSearchPage();
                    }
                })
                .catch(error => {
                    console.log(error);
                    return false;
                });
        }

    }
// ==============================|| DELETE WINDOW RELATED ||============================== //

    const validateReminderLimit = (value) => {
        const maxValue = reminderLimitMax; // Set the maximum value here
        if (/^[0-9]\d*$/.test(value) || value === '') {
            if (parseInt(value) > maxValue) {
                //console.log(value);
                setValue("reminderLimit", maxValue)
            }
        }
        else{
            setValue("reminderLimit", '');
        }
    };

    const handleReminderIntervalChange = (event) => {
        const inputValue = event.target.value;
        if (/^[0-9]\d*$/.test(inputValue) || inputValue === '') {
            setValue("reminderInterval", inputValue);
        }
        else{
            setValue("reminderInterval", '');
        }
    };

    const handleReminderThresholdChange = (event) => {
        const inputValue = event.target.value;
        if (/^[0-9]\d*$/.test(inputValue) || inputValue === '') {
            setValue("reminderThreshold", inputValue);
        }
        else{
            setValue("reminderThreshold", '');
        }
    };

    useEffect(()=>{
        //if combo list ready
        if (subDivisionList.length >0) {
            setRefEvent(refEventDetail);
        }
    },[subDivisionList]);

    useEffect(()=>{
        if(!isObjEmpty(refEvent)){
            setIsFlagFetched(true);
        }
    },[reminderFlag,refEvent]);

    useEffect(()=>{
        if(isFlagFetched){
            if(!reminderFlag){
                setReminderInterval(null);
                setReminderBefore(null);
                setReminderLimit(null);
                setValue("reminderThreshold",null);
                setValue("reminderLimit",null);
                setValue("reminderInterval",null);
            }
        }
    },[isFlagFetched, refEvent, reminderFlag]);

    useEffect(()=>{
        setReminderLimitMax(refReminderLimitMax);
        if(!isObjEmpty(refEvent) ) {
            if(reminderFlag){
                setReminderInterval(refReminderInterval);
                setReminderBefore(refReminderBefore);
                setReminderLimit(refReminderLimit);
            }
        }
    },[reminderFlag, refReminderLimit,refReminderInterval,refReminderLimitMax,refReminderBefore,refEvent]);

    useEffect(()=>{
        //if ref data ready
        if (!isObjEmpty(refEvent)) {
            //checkOvertime();
            if(refId !== null){
                setValue("name", refEvent.name);
                setValue("nameCht", refEvent.nameCht);
                setValue("description", refEvent.description);
                setValue("organization", refEvent.organization);
                setValue("series", refEvent.series);
            }
            setSelectedSubDivision(getComboValueByIdList(subDivisionList,refSubDivisionList));
            setSelectedRegion(getComboValueByLabel(EVENT_REGION_COMBO, refEvent.region));
            setSelectedType(getComboValueByLabel(EVENT_TYPE_COMBO, refEvent.eventType));
            setReminderFlag(refEvent.reminderFlag);
            setSelectedFrequency(getComboValueByLabel(eventFrequencyCombo, refEvent.frequency));
            setEventDate(dayjs(getDateString(refEvent.startDate)));
            setAwardDate(
                refEvent.awardDate === null ? null : dayjs(getDateString(refEvent.awardDate))
            );
            setNextApplicationDate(
                refEvent.nextApplicationDate === null ? null : dayjs(getDateString(refEvent.nextApplicationDate))
            );
            setAnnounceDate(
                refEvent.announcementDate === null ? null : dayjs(getDateString(refEvent.announcementDate))
            );
            setFromDate(
                refEvent.eventFrom === null ? null : dayjs(getDateString(refEvent.eventFrom))
            );
            setToDate(
                refEvent.eventTo === null ? null : dayjs(getDateString(refEvent.eventTo))
            );
            setDeadlineDate(dayjs(getDateString(refEvent.applicationDeadline)));
        }
    },[refEvent]);

    useEffect(()=>{
        if(
            !isObjEmpty(refEvent) &&
            selectedSubDivision.length > 0 &&
            !isObjEmpty(selectedRegion) &&
            !isObjEmpty(selectedType) &&
            !isObjEmpty(eventDate) &&
            !isObjEmpty(deadlineDate)
        ){
            setOnReady(true);
        }
        else if(isNewRecord){
            setOnReady(true);
            setIsEditing(true);
        }
    },[refEvent,selectedSubDivision,selectedRegion,selectedType, eventDate,deadlineDate]);

    useEffect(()=>{
        if(selectedFrequency !== null){
            if(selectedFrequency.key === 5 && isNewRecord){
                setReminderBefore(0);
                setReminderInterval(0);
                setReminderLimit(0);
                setValue("reminderThreshold",null);
                setValue("reminderLimit",null);
                setValue("reminderInterval",null);
            }
            else if (isFirstInit && refId !== null){
                setValue("reminderThreshold",refEvent.reminderThreshold);
                setValue("reminderLimit",refEvent.reminderLimit);
                setValue("reminderInterval",refEvent.reminderInterval);
                setIsFirstInit(false);
            }
            else if(isNewRecord){
                setValue("reminderThreshold",refReminderBefore);
                setValue("reminderLimit",refReminderLimit);
                setValue("reminderInterval",refReminderInterval);
                setReminderInterval(refReminderInterval);
                setReminderBefore(refReminderBefore);
                setReminderLimit(refReminderLimit);
            }

            if (isEditing){
                if (eventDate !== null){
                    switch(selectedFrequency.key){
                        case 1:
                            setNextApplicationDate(eventDate.add(1,'month'));
                            break;
                        case 2:
                            setNextApplicationDate(eventDate.add(3,'month'));
                            break;
                        case 3:
                            setNextApplicationDate(eventDate.add(1,'year'));
                            break;
                        case 4:
                            setNextApplicationDate(eventDate.add(6,'month'));
                            break;
                        default:
                            setNextApplicationDate(nextApplicationDate);
                            break;
                    }
                }
            }
        }
    },[selectedFrequency,eventDate]);

    useEffect(() => {
        //if state data are ready and assign to different field
        axios.get(`${apiPath}${GET_SUB_DIVISION_COMBO_LIST}`)
            .then((response) => {
                if (response.status === 200) {
                    setSubDivisionList(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }, []);

    useEffect(() => {
        //upload latest data to parent
        if(isCollectData){
            const values = getValues();
            const formErrors = {};

            if (isStringEmptyAfterTrim(values.name)) {
                formErrors.name = 'Event Name is required';
            }


            if (selectedRegion === null ) {
                formErrors.region = 'Event Region is required';
            }

            if (isStringEmptyAfterTrim(values.organization)) {
                formErrors.organization = 'Event Organization is required';
            }

            if (selectedType === null) {
                formErrors.type = 'Event Type is required';
            }

            if (eventDate === null) {
                formErrors.eventDate = 'Event Date is required';
            }

            if (deadlineDate === null) {
                formErrors.deadlineDate = 'Deadline Date is required';
            }

            if (awardDate === null) {
                formErrors.awardDate = 'Award Date is required';
            }

            if (selectedSubDivision.length <= 0){
                formErrors.subDivision = 'Sub-Division is required';
            }

            if(reminderFlag){
                if (selectedFrequency === null){
                    formErrors.frequency = 'Frequency is required';
                }

                if (!values.reminderThreshold){
                    formErrors.threshold = 'Threshold is required';
                }

                if (!values.reminderInterval){
                    formErrors.interval = 'Interval is required';
                }

                if (!values.reminderLimit){
                    formErrors.limit = 'Limit is required';
                }


                if(applicationList.length===0){
                    if(!validateReminder()){
                        formErrors.calError = "calError";
                    }
                }

            }

            setErrors(formErrors);
            if (Object.keys(formErrors).length === 0 &&
                !eventDateError && !awardDateError &&
                !deadlineDateError && !announceDateError &&
                !fromError && !toError && !nextApplicationDateError
            ) {
                axios.get(`${apiPath}${CHECK_EVENT_DUPLICATE}`,
                    {
                        params: {
                            "name": values.name.trim(),
                            "id": params.id,
                        },
                    })
                    .then((response) => {
                        if (response.status === 200) {
                            const formErrors = {};
                            if(response.data.isTaken){
                                formErrors.name = 'Event name must be unique.';
                                setErrors(formErrors);
                                setIsCollectData(false);
                                setUserConfirm(false);
                            }
                            else if(!response.data.isTaken){
                                if (Object.keys(formErrors).length === 0) {
                                    let data = {};
                                    data["id"]  = isNewRecord ? params.id : refEventDetail.id;
                                    data["description"]  = values.description;
                                    data["name"]  = values.name;
                                    data["nameCht"] = values.nameCht;
                                    data["organization"]  = values.organization;
                                    data["reminderThreshold"]  = values.reminderThreshold;
                                    data["reminderInterval"]  = values.reminderInterval;
                                    data["reminderLimit"]  = values.reminderLimit;
                                    data["series"]  = values.series;
                                    data["region"]  = selectedRegion === null ? null : selectedRegion.label;
                                    data["eventType"]  = selectedType === null ? null : selectedType.label;
                                    data["frequency"]  = selectedFrequency === null ? null : selectedFrequency.label;
                                    data["reminderFlag"]  = reminderFlag;
                                    data["startDate"]  = eventDate === null ? null : dayjs(eventDate).format('YYYY-MM-DD');
                                    data["eventFrom"]  = fromDate === null ? null : dayjs(fromDate).format('YYYY-MM-DD');
                                    data["eventTo"]  = toDate === null ? null : dayjs(toDate).format('YYYY-MM-DD');
                                    data["applicationDeadline"]  = deadlineDate === null ? null : dayjs(deadlineDate).format('YYYY-MM-DD');
                                    data["nextApplicationDate"]  = nextApplicationDate === null ? null : dayjs(nextApplicationDate).format('YYYY-MM-DD');
                                    data["announcementDate"]  = announceDate === null ? null : dayjs(announceDate).format('YYYY-MM-DD');
                                    data["awardDate"]  = awardDate === null ? null : dayjs(awardDate).format('YYYY-MM-DD');
                                    data["subDivisionIds"] = isNewRecord ? getIdList(selectedSubDivision) : getNewRecordWithRefList(refSubDivisionList, getIdList(selectedSubDivision));
                                    data["subDivisionRemoveIds"] = isNewRecord ? [] : getDeletedRecordWithRefList(refSubDivisionList, getIdList(selectedSubDivision));
                                    setEventDetail(data);
                                }
                            }
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        return true;
                    });
            }
            else if(isCollectData){
                setUserConfirm(false);
                setIsCollectData(false);
            }
        }
    }, [isCollectData]);

    function returnSearchPage(){
        navigate('/event');
    }

    function createNewApplication(){
        navigate('/application/maintain/-1/'+ params.id);
    }

    useEffect(() => {
        if (userConfirm) {
            postEvent();
        }
        setUserConfirm(false);
    }, [eventDetail]);


    const submitData = () => {
        setIsCollectData(!isCollectData);
        setUserConfirm(true);
    }

    const updateIsEdit = () => {
        setIsEditing(!isEditing);
    }

    function postEvent(){
        setIsUploading(true);
        const temp = trimDataBeforePost(eventDetail);
        axios.post(`${apiPath}${POST_EVENT_PATH}`,
            temp,
        )
            .then((response) => {
                if (response.status === 200) {
                    notifySaveSuccess();
                    if(isNewRecord){
                        setIsUploading(false);
                        navigate('/event')
                    }
                    else{
                        setIsUploading(false);
                        getEventDetail(params.id);
                        //checkOvertime();
                        setIsEditing(!isEditing);
                    }
                    setIsCollectData(!isCollectData);

                }
            })
            .catch(error => {
                if (error.response.status === 422){
                    const formErrors = {};
                    formErrors.subDivision = error.response.data.error;
                    setErrors(formErrors);
                }
                console.log(error);
                setIsUploading(false);
                return false;
            });
    }


    return (
        !onReady ?
            <LoadingComponent/>
            :
            <MainCard
                      content={false}
                      sx={{width:CARD_MAX_WIDTH}}
            >
                <Typography variant="h5" sx={{mt: 3, ml: 3, mb: 1}}>
                    Information
                </Typography>

                <form>
                    <Grid container>
                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{mt:1, ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3,mt:1, display: 'flex', alignItems: 'flex-start'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Event Name:
                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <TextField
                                        fullWidth
                                        {...register("name",
                                            {
                                                value: refEvent.name,
                                            })}
                                        id='eventName'
                                        required
                                        inputProps={{maxLength: 255, style: {fontSize: '1.1rem'}}}
                                        InputProps={{
                                            style: { minHeight:'42.5px', maxHeight: '50vh' },
                                        }}
                                        multiline
                                        maxRows={3}
                                        error={!!errors.name}
                                        helperText={errors.name}
                                        disabled={!isEditing}
                                        autoComplete="off"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{mt:1, ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3,mt:1, display: 'flex', alignItems: 'flex-start'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Event Name Chinese:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6.5}>
                                    <TextField
                                        fullWidth
                                        {...register("nameCht",
                                            {
                                                value: refEvent.nameCht,
                                            })}
                                        id='eventName'
                                        required
                                        inputProps={{maxLength: 255, style: {fontSize: '1.1rem'}}}
                                        InputProps={{
                                            style: { minHeight:'42.5px', maxHeight: '50vh' },
                                        }}
                                        multiline
                                        maxRows={3}
                                        disabled={!isEditing}
                                        autoComplete="off"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Event Region: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <Autocomplete
                                        disablePortal
                                        id="region-combo"
                                        size="small"
                                        value={selectedRegion === null? null : selectedRegion}
                                        options={EVENT_REGION_COMBO}
                                        onChange={(event, newValue) => {
                                            setSelectedRegion(newValue);
                                        }}
                                        renderInput={(params) => <TextField
                                            {...params}
                                            label=""
                                            error={!!errors.region}
                                            helperText={errors.region}
                                        />}
                                        disabled={!isEditing}
                                        isOptionEqualToValue={isOptionEqualToValue}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Event Organization: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6.5}>
                                    <TextField
                                        fullWidth
                                        size="small"
                                        inputProps={{maxLength: 255}}
                                        {...register("organization",
                                            {
                                                value: refEvent.organization,
                                            })}
                                        id="organization"
                                        error={!!errors.organization}
                                        helperText={errors.organization}
                                        disabled={!isEditing}
                                        autoComplete="off"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Event Type:
                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <Autocomplete
                                        disablePortal
                                        id="event-type-combo"
                                        size="small"
                                        value={selectedType === null? null : selectedType}
                                        options={EVENT_TYPE_COMBO}
                                        onChange={(event, newValue) => {
                                            setSelectedType(newValue);
                                        }}
                                        renderInput={(params) =>
                                            <TextField
                                                {...params}
                                                label=""
                                                error={!!errors.type}
                                                helperText={errors.type}
                                            />}
                                        disabled={!isEditing}
                                        isOptionEqualToValue={isOptionEqualToValue}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Event Period:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6.5}>
                                    <Grid container>
                                        <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
                                            <LocalizationProvider dateAdapter={AdapterDayjs}>
                                                <DemoItem  components={['DatePicker']}>
                                                    <DatePicker
                                                        format="DD/MM/YYYY"
                                                        onError={(newError) => setFromError(newError)}
                                                        slotProps={{
                                                            field: { clearable: true },
                                                            textField: {
                                                                helperText: fromErrorMessage,
                                                            },
                                                        }}
                                                        id="fromDate"
                                                        value={fromDate === null ? null : dayjs(fromDate)}
                                                        onChange={(newValue) => setFromDate(newValue)}
                                                        disabled={!isEditing}
                                                    />
                                                </DemoItem >
                                            </LocalizationProvider>
                                        </Grid>

                                        <Grid item xs={1.5} s={1.5} md={1.5} lg={1} sx={{mt:1.3,display: 'flex', justifyContent:"center", alignItems: 'flex-start'}}>
                                            To
                                        </Grid>

                                        <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
                                            <LocalizationProvider dateAdapter={AdapterDayjs}>
                                                <DemoItem  components={['DatePicker']}>
                                                    <DatePicker
                                                        format="DD/MM/YYYY"
                                                        onError={(newError) => setToError(newError)}
                                                        slotProps={{
                                                            field: { clearable: true },
                                                            textField: {
                                                                helperText: toErrorMessage,
                                                            },
                                                        }}
                                                        id="toDate"
                                                        //label="To Date"
                                                        value={toDate === null ? null : dayjs(toDate)}
                                                        onChange={(newValue) => setToDate(newValue)}
                                                        disabled={!isEditing}
                                                    />
                                                </DemoItem >
                                            </LocalizationProvider>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Application Date: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                                        <DemoItem  components={['DatePicker']}>
                                            <DatePicker
                                                id="eventDate"
                                                size="small"
                                                value={eventDate === null ? null : dayjs(eventDate)}
                                                onChange={(newValue) => setEventDate(newValue)}
                                                format="DD/MM/YYYY"
                                                onError={(newError) => setEventDateError(newError)}
                                                slotProps={{
                                                    field: { clearable: true },
                                                    textField: {
                                                        error: !!errors.eventDate || eventDateError,
                                                        helperText: eventDateError ? eventDateErrorMessage : errors.eventDate,
                                                    },
                                                }}
                                                disabled={!isEditing}
                                            />
                                        </DemoItem >
                                    </LocalizationProvider>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                    Series:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6.5}>
                                    <TextField
                                        fullWidth
                                        inputProps={{maxLength: 50}}
                                        size="small"
                                        {...register("series",
                                            {
                                                value: refEvent.series,
                                            })}
                                        id='series'
                                        disabled={!isEditing}
                                        autoComplete="off"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Application Deadline: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                                        <DemoItem  components={['DatePicker']}>
                                            <DatePicker
                                                id="deadline"
                                                size="small"
                                                value={deadlineDate === null ? null : dayjs(deadlineDate)}
                                                onChange={(newValue) => setDeadlineDate(newValue)}
                                                format="DD/MM/YYYY"
                                                onError={(newError) => setDeadlineDateError(newError)}
                                                slotProps={{
                                                    field: { clearable: true },
                                                    textField: {
                                                        error: !!errors.deadlineDate || deadlineDateError,
                                                        helperText: deadlineDateError ? deadlineDateErrorMessage : errors.deadlineDate,
                                                    },
                                                }}
                                                disabled={!isEditing}
                                            />
                                        </DemoItem >
                                    </LocalizationProvider>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Award Date: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6.5}>
                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                                        <DemoItem  components={['DatePicker']}>
                                            <DatePicker
                                                id="awardDate"
                                                size="small"
                                                value={awardDate === null ? null : dayjs(awardDate)}
                                                onChange={(newValue) => setAwardDate(newValue)}
                                                format="DD/MM/YYYY"
                                                onError={(newError) => setAwardDateError(newError)}
                                                slotProps={{
                                                    field: { clearable: true },
                                                    textField: {
                                                        error: !!errors.awardDate || awardDateError,
                                                        helperText: awardDateError ? awardDateErrorMessage : errors.awardDate,
                                                    },
                                                }}
                                                disabled={!isEditing}
                                            />
                                        </DemoItem >
                                    </LocalizationProvider>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Sub-Divisions: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <Autocomplete
                                        multiple
                                        id="sub-division-demo"
                                        disablePortal
                                        size="small"
                                        options={subDivisionList}
                                        value={selectedSubDivision === null? null : selectedSubDivision}
                                        getOptionLabel={(option) => option.label}
                                        onChange={(event, newValue) => {
                                            setSelectedSubDivision(newValue);
                                        }}
                                        renderInput={(params) => (
                                            <TextField
                                                error={!!errors.subDivision}
                                                helperText={
                                                    errors.subDivision ? (
                                                        <Typography component="div" color="error">
                                                            {errors.subDivision.split("\n").map((line, index) => {
                                                                return (
                                                                    <Typography key={index} >
                                                                        {line}
                                                                    </Typography>
                                                                )
                                                            })}
                                                        </Typography>
                                                    ) : null
                                                }
                                                {...params}
                                                placeholder=""
                                            />
                                        )}
                                        disabled={!isEditing}
                                        isOptionEqualToValue={isOptionEqualToValue}
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                            <Grid container alignItems={"center"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Announcement Date:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={6.5}>
                                    <LocalizationProvider dateAdapter={AdapterDayjs}>
                                        <DemoItem  components={['DatePicker']}>
                                            <DatePicker
                                                id="announceDate"
                                                size="small"
                                                value={announceDate === null ? null : dayjs(announceDate)}
                                                onChange={(newValue) => setAnnounceDate(newValue)}
                                                format="DD/MM/YYYY"
                                                onError={(newError) => setAnnounceDateError(newError)}
                                                slotProps={{
                                                    field: { clearable: true },
                                                    textField: {
                                                        helperText: announceDateErrorMessage,
                                                    },
                                                }}
                                                disabled={!isEditing}
                                            />
                                        </DemoItem >
                                    </LocalizationProvider>
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3, mt:1}}>
                            <Grid container alignItems={"flex-start"}>
                                <Grid item xs={4} s={4} md={4} lg={4}
                                      sx={{ml: 3, mr: 3, mt:1, display: 'flex', alignItems: 'flex-start'}}>
                                    <Typography variant="lionerSize" component="span">
                                        Event Description:
                                    </Typography>
                                </Grid>

                                <Grid item xs={7} s={7} md={7} lg={7}>
                                    <TextField
                                        fullWidth
                                        {...register("description",
                                            {
                                                value: refEvent.description,
                                            })}
                                        id='eventDesc'
                                        required
                                        disabled={!isEditing}
                                        inputProps={{maxLength: 500, style: {fontSize: '1.1rem'}}}
                                        InputProps={{
                                            style: { minHeight:'42.5px', maxHeight: '50vh' },
                                        }}
                                        multiline
                                        maxRows={10}
                                        autoComplete="off"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>

                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 1.5, mr: 1.5}}>
                            <Grid container justifyContent="space-between" alignItems="center">
                                <Grid item>
                                    <Typography variant="lionerBold" sx={{ml: 1}}>
                                        Reminder Options
                                    </Typography>
                                    {
                                        overtimeWarning.length >0 && reminderFlag?
                                            <Typography sx={{ color: GENERAL_RED_COLOR, ml:1 }} component="span">{overtimeWarning}</Typography>
                                            :
                                            undefined
                                    }
                                </Grid>

                                <Grid item xs={11} s={11} md={3} lg={3}  sx={{ display: 'flex', justifyContent: 'flex-end' , mr: 3 }}>
                                    <FormControlLabel
                                        labelPlacement="start"
                                        sx={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}
                                        control={
                                            <Switch
                                                onChange={(event, newValue) => {
                                                    setReminderFlag(newValue);
                                                }}
                                                checked={reminderFlag}
                                                disabled={!isEditing}
                                            />
                                        }
                                        label="Reminder Enable/Disable:"
                                    />
                                </Grid>
                            </Grid>
                        </Grid>
                        <Grid item xs={12} s={12} md={12} lg={12} sx={{ml: 1.5, mr: 1.5, mb: 3}}>
                            <MainCard>
                                <Grid container>
                                    <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 2, mr: {lg:2}, mb: 2}}>
                                        <Grid container alignItems={"center"}>
                                            <Grid item xs={4} s={4} md={4} lg={3.8}
                                                  sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                                <Typography variant="lionerSize" component="span">
                                                    Frequency:
                                                    <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                                </Typography>
                                            </Grid>

                                            <Grid item xs={7} s={7} md={7} lg={7.25}>
                                                <Autocomplete
                                                    id="event-frequency-demo"
                                                    disablePortal
                                                    size="small"
                                                    type="number"
                                                    disabled={!reminderFlag || !isEditing}
                                                    options={eventFrequencyCombo}
                                                    value={selectedFrequency === null? null : selectedFrequency}
                                                    getOptionLabel={(option) => option.label}
                                                    onChange={(event, newValue) => {
                                                        setSelectedFrequency(newValue);
                                                    }}
                                                    renderInput={(params) => (
                                                        <TextField
                                                            {...params}
                                                            placeholder=""
                                                            error={!!errors.frequency}
                                                            helperText={errors.frequency}
                                                        />
                                                    )}
                                                    isOptionEqualToValue={isOptionEqualToValue}
                                                />
                                            </Grid>
                                        </Grid>
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={6} sx={{ml: 2, mb: 2}}>
                                        <Grid container alignItems={"center"}>
                                            <Grid item xs={4} s={4} md={4} lg={4.2}
                                                  sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                                <Typography variant="lionerSize" component="span">
                                                    Next Application Date:
                                                </Typography>
                                            </Grid>

                                            <Grid item xs={7} s={7} md={7} lg={6.15}>
                                                <LocalizationProvider dateAdapter={AdapterDayjs}>
                                                    <DemoItem  components={['DatePicker']}>
                                                        <DatePicker
                                                            id="announceDate"
                                                            size="small"
                                                            disabled={!reminderFlag || !isEditing}
                                                            value={nextApplicationDate === null ? null : dayjs(nextApplicationDate)}
                                                            onChange={(newValue) => setNextApplicationDate(newValue)}
                                                            format="DD/MM/YYYY"
                                                            onError={(newError) => setNextApplicationDateError(newError)}
                                                            slotProps={{
                                                                field: { clearable: true },
                                                                textField: {
                                                                    error: !!errors.reminderDate || nextApplicationDateError ,
                                                                    helperText: nextApplicationDateError ? nextApplicationDateErrorMessage : errors.reminderDate,
                                                                },
                                                            }}
                                                        />
                                                    </DemoItem >
                                                </LocalizationProvider>
                                            </Grid>
                                        </Grid>
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 2, mr: {lg:2}, mb: 2}}>
                                        <Grid container alignItems={"center"}>
                                            <Grid item xs={4} s={4} md={4} lg={3.8}
                                                  sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                                <Typography variant="lionerSize" component="span">
                                                    Reminder Before:
                                                    <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                                </Typography>
                                            </Grid>

                                            <Grid item xs={7} s={7} md={7} lg={7.25}>
                                                <TextField
                                                    fullWidth
                                                    {...register("reminderThreshold",
                                                        {
                                                            min: 0,
                                                            value: !isNewRecord ? refEvent.reminderThreshold : refEvent.reminderThreshold>0 ? reminderBefore : 0 ,
                                                        })}
                                                    InputProps={{
                                                        inputProps: { min: 0 },
                                                        endAdornment: <InputAdornment position="start">days</InputAdornment>,
                                                    }}
                                                    id='remindBefore'
                                                    required
                                                    type="number"
                                                    onChange={handleReminderThresholdChange}
                                                    disabled={!reminderFlag || !isEditing}
                                                    error={!!errors.threshold}
                                                    helperText={errors.threshold}
                                                    autoComplete="off"
                                                />
                                            </Grid>
                                        </Grid>
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={6} sx={{ml: 2, mb: 2}}>
                                        <Grid container alignItems={"center"}>
                                            <Grid item xs={4} s={4} md={4} lg={4.2}
                                                  sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                                <Typography variant="lionerSize" component="span">
                                                    Reminder Interval:
                                                    <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                                </Typography>
                                            </Grid>

                                            <Grid item xs={7} s={7} md={7} lg={6.15}>
                                                <TextField
                                                    fullWidth
                                                    {...register("reminderInterval",
                                                        {
                                                            min: 0,
                                                            value: !isNewRecord ? refEvent.reminderInterval :  refEvent.reminderInterval>0 ? reminderInterval : 0,
                                                        })}
                                                    InputProps={{
                                                        inputProps: { min: 0 },
                                                        endAdornment: <InputAdornment position="start">days</InputAdornment>,
                                                    }}
                                                    id='reminderInterval'
                                                    required
                                                    type="number"
                                                    onChange={handleReminderIntervalChange}
                                                    disabled={!reminderFlag || !isEditing}
                                                    error={!!errors.interval}
                                                    helperText={errors.interval}
                                                    autoComplete="off"
                                                />
                                            </Grid>
                                        </Grid>
                                    </Grid>

                                    <Grid item xs={12} s={12} md={12} lg={5.5} sx={{ml: 2, mr: {lg:2}, mb: 2}}>
                                        <Grid container alignItems={"center"}>
                                            <Grid item xs={4} s={4} md={4} lg={3.8}
                                                  sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                                <Typography variant="lionerSize" component="span">
                                                    Reminder Limit:
                                                    <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                                </Typography>
                                            </Grid>

                                            <Grid item xs={7} s={7} md={7} lg={7.25}>
                                                <TextField
                                                    fullWidth
                                                    {...register("reminderLimit",
                                                        {
                                                            value: !isNewRecord ? refEvent.reminderLimit : refEvent.reminderLimit>0 ? reminderLimit : 0,
                                                            max: reminderLimitMax,
                                                            pattern: /^[1-9]\d*$/, // Regular expression to accept positive integers
                                                            min: 0,
                                                            //validate: validateReminderLimit
                                                        })}
                                                    InputProps={{
                                                        inputProps: { min: 0 }
                                                    }}
                                                    id='remindLimit'
                                                    required
                                                    type="number"
                                                    onChange={(e) => validateReminderLimit(e.target.value)}
                                                    disabled={!reminderFlag || !isEditing}
                                                    error={!!errors.limit}
                                                    helperText={errors.limit}
                                                    /*InputProps={{
                                                        inputProps: { min: 0, max: reminderLimitMax, maxLength: 2 }
                                                         // Set the maximum value here
                                                    }}*/
                                                    autoComplete="off"
                                                />
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </MainCard>

                            {/*row 2*/}
                            {
                                (isEditing ) ?
                                    <Grid container maxWidth justifyContent="space-between">
                                        <ThemeProvider theme={LIONER_BUTTON_THEME}>
                                            <Grid item>
                                                <Grid container>
                                                    <Grid item sx={{ml:{xs:1.5,md:1.5,lg:1.5}, mr:1.5, mb:1, mt:2}}>
                                                        <Button
                                                            variant="contained"
                                                            color="save"
                                                            onClick={submitData}
                                                        >
                                                            Save
                                                        </Button>
                                                    </Grid>
                                                    <Grid item sx={{ml:1.5, mr:1.5, mb:1, mt:2}}>
                                                        <Button
                                                            variant="contained"
                                                            color="cancel"
                                                            onClick={returnSearchPage}
                                                        >
                                                            Cancel
                                                        </Button>

                                                    </Grid>
                                                    <Grid item sx={{ml:{xs:1.5,md:1.5,lg:1.5}, mr:3, mb:1, mt:2}}>
                                                        <Button
                                                            variant="contained"
                                                            color="delete"
                                                            disabled={isNewRecord || !ability.can('DELETE','EVENT')}
                                                            onClick={handleDeleteClick}
                                                        >
                                                            Delete
                                                        </Button>
                                                        <GeneralConfirmWindow
                                                            isWindowOpen={isWindowOpen}
                                                            title={"Attention"}
                                                            //content={`Confirm to delete Event "${eventDetail.name}" ?`}
                                                            content={`Are you sure to delete this event?`}
                                                            onNormalClose={handleClose}
                                                            onConfirmClose={updateData}
                                                        />
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                            <Grid item>
                                                <Grid container>
                                                    <ThemeProvider theme={LIONER_LONG_BUTTON_THEME}>

                                                    <Grid item sx={{ml:{xs:1.5,md:1.5,lg:3}, mb:1, mt:2}}>
                                                        <Button
                                                            variant="contained"
                                                            color="saveAs"
                                                            onClick={copyEventAsNew}
                                                            disabled={isNewRecord}
                                                        >
                                                            Copy as new
                                                        </Button>
                                                    </Grid>

                                                    <Grid item sx={{ml:{xs:1.5,md:1.5,lg:3}, mb:1, mt:2}}>
                                                        <Button
                                                            variant="contained"
                                                            color="create"
                                                            onClick={createNewApplication}
                                                            disabled={isNewRecord}
                                                        >
                                                            New Application
                                                        </Button>
                                                    </Grid>
                                                    </ThemeProvider>
                                                </Grid>
                                            </Grid>
                                        </ThemeProvider>
                                    </Grid>
                                    :
                                    <Grid container maxWidth justifyContent="space-between" sx={{ml:2, mr:2}}>
                                        <ThemeProvider theme={LIONER_BUTTON_THEME}>
                                            <Grid item>
                                                <Grid container>
                                                    <Grid item sx={{ml:1, mr:3, mb:1, mt:2}}>
                                                        <Button
                                                            variant="contained"
                                                            color="save"
                                                            onClick={updateIsEdit}
                                                            disabled={ability.can('EDIT','ALL_RECORD')? false : !ability.can('EDIT','EVENT')}
                                                        >
                                                            Edit
                                                        </Button>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                            <Grid item>
                                            </Grid>
                                        </ThemeProvider>
                                    </Grid>
                            }

                        </Grid>
                    </Grid>
                </form>
            </MainCard>
    );
};

export default EventForm;
