import {Grid, TextField,Typography} from "@mui/material";
import * as React from "react";
import {useEffect, useState} from "react";
import Autocomplete from "@mui/material/Autocomplete";
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
import {DemoItem} from "@mui/x-date-pickers/internals/demo";
import {DatePicker} from "@mui/x-date-pickers/DatePicker";
import dayjs from "dayjs";
import axios from "axios";
import {apiPath} from "../../auth/utils";
import {
    GET_CATEGORY_COMBO_LIST,
    GET_DIVISION_COMBO_LIST, GET_LDAP_USER_LIST,
    GET_PROMOTION_CHANNEL_COMBO_LIST,
    GET_SUB_DIVISION_COMBO_LIST, GET_TAG_COMBO_LIST
} from "../../utils/ApiPathConst";
import Qs from "qs";
import {
    convertXmlToObject,
    getComboValueByIdList,
    getComboValueByLabel,
    getIdList,
    isOptionEqualToValue
} from "../../utils/CommonFunction";
import {useParams} from "react-router-dom";
import LoadingComponent from "../extra-pages/LoadingComponent";
import {parseString} from "xml2js";
import {isObjEmpty} from "../../utils/Utils";

export default function AwardTemplateForm({setValue,setIsReset, refTemplateData,
                                              isReset, isCollectData, applyTemplateValue,
                                              register, setIsCollectData}) {
    const params = useParams();
    const [onReady, setOnReady] = useState(false);

    //value
    const [selectedTag, setSelectedTag] = useState([]);
    const [selectedChannels, setSelectedChannels] = useState([]);
    const [selectedOfficer, setSelectedOfficer] = useState(null);
    const [selectedSubDivisions, setSelectedSubDivisions] = useState([]);
    const [selectedDivisions, setSelectedDivisions] = useState([]);
    const [selectedCategories, setSelectedCategories] = useState([]);
    const [fromDate, setFromDate] = useState(null);
    const [toDate, setToDate] = useState(null);
    const [refAward, setRefAward] = useState({});
    const [awardFromDate, setAwardFromDate] = useState(null);
    const [awardToDate, setAwardToDate] = useState(null);

    //combo list
    const [tagList, setTagList] = useState([]);
    const [channelList, setChannelList] = useState([]);
    const [categoryList, setCategoryList] = useState([]);
    const [subDivisionList, setSubDivisionList] = useState([]);
    const [divisionList, setDivisionList] = useState([]);

    const [eventFromError, setEventFromError] = React.useState(null);
    const [eventToError, setEventToError] = React.useState(null);

    const eventFromErrorMessage = React.useMemo(() => {
        switch (eventFromError) {
            case 'invalidDate': {
                return "Please input a valid date";
            }
        }
    }, [eventFromError]);

    const eventToErrorMessage = React.useMemo(() => {
        switch (eventToError) {
            case 'invalidDate': {
                return "Please input a valid date";
            }
        }
    }, [eventToError]);

    const [awardFromError, setAwardFromError] = React.useState(null);
    const [awardToError, setAwardToError] = React.useState(null);

    const awardFromErrorMessage = React.useMemo(() => {
        switch (awardFromError) {
            case 'invalidDate': {
                return "Please input a valid date";
            }
        }
    }, [awardFromError]);

    const awardToErrorMessage = React.useMemo(() => {
        switch (awardToError) {
            case 'invalidDate': {
                return "Please input a valid date";
            }
        }
    }, [awardToError]);

    const [lotusNoteUserList, setLotusNoteUserList] = useState([])
    const handleLocationCodeChange = (event, value) => {
        setSelectedOfficer({
            label: value,
        });
        if (value.length >2 && !value.includes("(")) {
            fetchLotusUserList(value,false);
        } else {
            setLotusNoteUserList(lotusNoteUserList);
        }
    };

    // Function to fetch user name options based on locationCode
    const fetchLotusUserList = async (input, isInit) => {
        try {
            axios.get(`${apiPath}${GET_LDAP_USER_LIST}`,{
                params:{
                    "EMSDlotus": input,
                }
            })
                .then((response) => {
                    if (response.status === 200) {
                        let xml = response.data;
                        parseString(xml, function (err, result) {
                            if(!isObjEmpty(refTemplateData) && isInit){
                                setSelectedOfficer(
                                    getComboValueByLabel(convertXmlToObject(result.RECORDS.RECORD),
                                        refTemplateData.selectedOfficer));
                            }
                            setLotusNoteUserList(convertXmlToObject(result.RECORDS.RECORD));
                        });

                    }
                })
                .catch(error => {
                    console.log(error);
                    return false;
                });
        } catch (error) {
            console.error('Error fetching user name options:', error);
        }
    };

    useEffect(() => {
        getTagCombo();
        getDivisionCombo();
        getCategoryCombo();
        getChannelCombo();
        getSubDivisionCombo(null);
    }, []);

    useEffect(() => {
        if(isReset){
            setValue('eventName', "" );
            setValue('applicationName', "" );
            setValue('awardName', "" );
            setValue('storageLocation', "" );
            setValue('physicalAward', "" );
            setSelectedSubDivisions([]);
            setSelectedDivisions([]);
            setSelectedTag([]);
            setSelectedCategories([]);
            setSelectedOfficer("");
            setFromDate(null);
            setToDate(null);
            setAwardFromDate(null);
            setAwardToDate(null);
            setSelectedChannels([])
            setIsReset(false)
        }
    }, [isReset]);

    useEffect(()=>{
        if(channelList.length >0 &&
           subDivisionList.length >0 &&
           categoryList.length >0
        ){
            setRefAward(refTemplateData);
        }
    },[channelList,subDivisionList,categoryList]);

    useEffect(() => {
        if (Object.keys(refAward).length > 0
            && params.id > 0
        ) {
            if(refTemplateData.selectedOfficer !== null){
                //const locationCode = refTemplateData.selectedOfficer.split('(')[1].replace(')','');
                fetchLotusUserList(refTemplateData.selectedOfficer,true);
            }
            setSelectedTag(getComboValueByIdList(tagList,refAward.selectedTag));
            setSelectedCategories(getComboValueByIdList(categoryList,refAward.selectedCategories));
            setSelectedDivisions(getComboValueByIdList(divisionList,refAward.selectedDivisions));
            setSelectedSubDivisions(getComboValueByIdList(subDivisionList,refAward.selectedSubDivisions));
            setSelectedChannels(getComboValueByIdList(channelList,refAward.selectedChannels));
            setFromDate(
                refAward.fromDate === null ? null : dayjs(refAward.fromDate)
            );
            setToDate(
                refAward.toDate === null ? null : dayjs(refAward.toDate)
            )
            setAwardFromDate(
                refAward.awardFromDate === null ? null : dayjs(refAward.awardFromDate)
            );
            setAwardToDate(
                refAward.awardToDate === null ? null : dayjs(refAward.awardToDate)
            )
            setOnReady(true);
        }
        else if ( params.id < 0){
            setOnReady(true);
        }
    }, [refAward]);

    useEffect(() => {
        if(isCollectData){
            if(!eventFromError && !eventToError && !awardFromError && !awardToError) {
                let data = {
                    selectedTag: selectedTag.length <1 ? [] : getIdList(selectedTag),
                    selectedChannels: getIdList(selectedChannels),
                    selectedOfficer: selectedOfficer === null ? null : selectedOfficer.label,
                    selectedDivisions: selectedDivisions.length <1 ? [] : getIdList(selectedDivisions),
                    selectedSubDivisions: selectedSubDivisions.length <1 ? [] : getIdList(selectedSubDivisions),
                    selectedCategories: selectedCategories.length <1 ? [] : getIdList(selectedCategories),
                    fromDate: fromDate === null ? null : dayjs(fromDate).format('YYYY-MM-DD'),
                    toDate: toDate === null ? null : dayjs(toDate).format('YYYY-MM-DD'),
                    awardFromDate: awardFromDate === null ? null : dayjs(awardFromDate).format('YYYY-MM-DD'),
                    awardToDate: awardToDate === null ? null : dayjs(awardToDate).format('YYYY-MM-DD'),
                };
                applyTemplateValue(data);
            }
            else{
                setIsCollectData(false);
            }

        }
    }, [isCollectData]);

    function getSubDivisionCombo(divisionIds){
        axios.get(`${apiPath}${GET_SUB_DIVISION_COMBO_LIST}`,
            {
                params: {
                    "divisionIds": divisionIds
                },
                paramsSerializer: function (params) {
                    return Qs.stringify(params, { arrayFormat: 'repeat' });
                },
            })
            .then((response) => {
                if (response.status === 200) {
                    setSubDivisionList(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    // useEffect(() => {
    //     if(selectedDivisions !== null && selectedDivisions !== undefined){
    //         const temp = selectedDivisions.length > 0 ? getIdList(selectedDivisions) : [];
    //         getSubDivisionCombo(temp);
    //     }
    //     if(selectedDivisions.length <=0){
    //         setSelectedSubDivisions([]);
    //     }
    // }, [selectedDivisions]);

    // useEffect(() => {
    //     removeInvalidSubDivision(getIdList(selectedDivisions));
    // }, [subDivisionList]);

    // function removeInvalidSubDivision (divisionIdList){
    //     let temp = selectedSubDivisions;
    //     let output = [];
    //     for(let i=0 ; i<temp.length; i++){
    //         for(let j=0 ; j<temp.length; j++){
    //             if(temp[i].divisionId === divisionIdList[j]){
    //                 output.push(temp[i]);
    //             }
    //         }
    //     }
    //     setSelectedSubDivisions(
    //         getComboValueByIdList(
    //             subDivisionList,
    //             getIdList(output),
    //         ));
    // }

    function getDivisionCombo(){
        axios.get(`${apiPath}${GET_DIVISION_COMBO_LIST}`)
            .then((response) => {
                if (response.status === 200) {
                    setDivisionList(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    function getChannelCombo(){
        axios.get(`${apiPath}${GET_PROMOTION_CHANNEL_COMBO_LIST}`)
            .then((response) => {
                if (response.status === 200) {
                    setChannelList(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    function getCategoryCombo(){
        axios.get(`${apiPath}${GET_CATEGORY_COMBO_LIST}`)
            .then((response) => {
                if (response.status === 200) {
                    setCategoryList(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    function getTagCombo(){
        axios.get(`${apiPath}${GET_TAG_COMBO_LIST}`)
            .then((response) => {
                if (response.status === 200) {
                    setTagList(response.data.records);
                }
            })
            .catch(error => {
                console.log(error);
                return false;
            });
    }

    return !onReady ?
        <LoadingComponent/>
        :
        <Grid container>
            <Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3, mr:3, mb:3}}>
                <Grid container >
                    <Grid item xs={12} s={12} md={12} lg={2} sx={{display: 'flex', alignItems: 'center'}}>
                        <Typography variant="lionerSize" component="span">
                            Event Name:
                        </Typography>
                    </Grid>

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <TextField
                            fullWidth
                            {...register("eventName",{
                                value:  refAward === null ? null : refAward.eventName,
                            })}
                            inputProps={{maxLength: 255}}
                            id='eventName'
                            autoComplete="off"
                        />
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <TextField
                            fullWidth
                            {...register("applicationName",{
                                value:  refAward === null ? null : refAward.applicationName,
                            })}
                            inputProps={{maxLength: 255}}
                            id="applicationName"
                            autoComplete="off"
                        />
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <TextField
                            fullWidth
                            inputProps={{maxLength: 255}}
                            {...register("awardName",{
                                value: refAward === null ? null : refAward.awardName,
                            })}
                            id="awardName"
                            autoComplete="off"
                        />
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={6} md={5} lg={6}>
                        <Grid container>
                            <Grid item xs={5.25} s={5.25} md={5.25} lg={5.25}>
                                <LocalizationProvider dateAdapter={AdapterDayjs}>
                                    <DemoItem  components={['DatePicker']}>
                                        <DatePicker
                                            id="fromDate"
                                            format="DD/MM/YYYY"
                                            onError={(newError) => setEventFromError(newError)}
                                            slotProps={{
                                                field: { clearable: true },
                                                textField: {
                                                    helperText: eventFromErrorMessage,
                                                },
                                            }}
                                            value={fromDate === null ? null : dayjs(fromDate)}
                                            onChange={(newValue) => setFromDate(newValue)}
                                        />
                                    </DemoItem >
                                </LocalizationProvider>
                            </Grid>

                            <Grid item xs={1.5} s={1.5} md={1.5} lg={1.5} 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.25}>
                                <LocalizationProvider dateAdapter={AdapterDayjs}>
                                    <DemoItem  components={['DatePicker']}>
                                        <DatePicker
                                            id="toDate"
                                            format="DD/MM/YYYY"
                                            onError={(newError) => setEventToError(newError)}
                                            slotProps={{
                                                field: { clearable: true },
                                                textField: {
                                                    helperText: eventToErrorMessage,
                                                },
                                            }}
                                            value={toDate === null ? null : dayjs(toDate)}
                                            onChange={(newValue) => setToDate(newValue)}
                                        />
                                    </DemoItem >
                                </LocalizationProvider>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={6} md={5} lg={6}>
                        <Grid container>
                            <Grid item xs={5.25} s={5.25} md={5.25} lg={5.25}>
                                <LocalizationProvider dateAdapter={AdapterDayjs}>
                                    <DemoItem  components={['DatePicker']}>
                                        <DatePicker
                                            id="awardFromDate"
                                            onError={(newError) => setAwardFromError(newError)}
                                            slotProps={{
                                                field: { clearable: true },
                                                textField: {
                                                    helperText: awardFromErrorMessage,
                                                },
                                            }}
                                            format="DD/MM/YYYY"
                                            value={awardFromDate === null ? null : dayjs(awardFromDate)}
                                            onChange={(newValue) => setAwardFromDate(newValue)}
                                        />
                                    </DemoItem >
                                </LocalizationProvider>
                            </Grid>

                            <Grid item xs={1.5} s={1.5} md={1.5} lg={1.5} 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.25}>
                                <LocalizationProvider dateAdapter={AdapterDayjs}>
                                    <DemoItem  components={['DatePicker']}>
                                        <DatePicker
                                            id="awardToDate"
                                            onError={(newError) => setAwardToError(newError)}
                                            slotProps={{
                                                field: { clearable: true },
                                                textField: {
                                                    helperText: awardToErrorMessage,
                                                },
                                            }}
                                            format="DD/MM/YYYY"
                                            //label="To Date"
                                            value={awardToDate === null ? null : dayjs(awardToDate)}
                                            onChange={(newValue) => setAwardToDate(newValue)}
                                        />
                                    </DemoItem >
                                </LocalizationProvider>
                            </Grid>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>


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

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <Autocomplete
                            multiple
                            disablePortal
                            id="category-combo"
                            size="small"
                            value={selectedCategories === null? null : selectedCategories}
                            options={categoryList}
                            onChange={(event, newValue) => {
                                setSelectedCategories(newValue);
                            }}
                            renderInput={(params) => <TextField {...params} />}
                            isOptionEqualToValue={isOptionEqualToValue}
                        />
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <Autocomplete
                            multiple
                            disablePortal
                            id="tag-combo"
                            size="small"
                            value={selectedTag === null? null : selectedTag}
                            options={tagList}
                            onChange={(event, newValue) => {
                                setSelectedTag(newValue);
                            }}
                            renderInput={(params) => <TextField {...params} />}
                            isOptionEqualToValue={isOptionEqualToValue}
                        />
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <Autocomplete
                            multiple
                            disablePortal
                            id="division-combo"
                            size="small"
                            value={selectedDivisions === null? null : selectedDivisions}
                            options={divisionList}
                            onChange={(event, newValue) => {
                                setSelectedDivisions(newValue);
                            }}
                            isOptionEqualToValue={isOptionEqualToValue}
                            renderInput={(params) => <TextField {...params} />}
                        />
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <Autocomplete
                            multiple
                            disablePortal
                            id="sub-division-combo"
                            size="small"
                            value={selectedSubDivisions === null? null : selectedSubDivisions}
                            options={subDivisionList}
                            //disabled={selectedDivisions.length<=0}
                            onChange={(event, newValue) => {
                                setSelectedSubDivisions(newValue);
                            }}
                            isOptionEqualToValue={isOptionEqualToValue}
                            renderInput={(params) => <TextField {...params} />}
                        />
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <Autocomplete
                            disablePortal
                            id="lotus-note-combo"
                            value={selectedOfficer === null ? null : selectedOfficer}
                            options={lotusNoteUserList}
                            size="small"
                            freeSolo
                            onInputChange={handleLocationCodeChange}
                            onChange={(event, newValue) => {
                                setSelectedOfficer(newValue);
                            }}
                            isOptionEqualToValue={isOptionEqualToValue}
                            renderInput={(params) => <TextField
                                {...params}
                                InputProps={{
                                    ...params.InputProps,
                                    inputProps: {
                                        ...params.inputProps,
                                        maxLength: 100
                                    }
                                }}
                            />}
                        />
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <Autocomplete
                            multiple
                            disablePortal
                            id="promo-channel-combo"
                            size="small"
                            value={selectedChannels === null? null : selectedChannels}
                            options={channelList}
                            onChange={(event, newValue) => {
                                setSelectedChannels(newValue);
                            }}
                            renderInput={(params) => <TextField {...params} />}
                            isOptionEqualToValue={isOptionEqualToValue}
                        />
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <TextField
                            fullWidth
                            inputProps={{maxLength: 255}}
                            {...register("storageLocation",{
                                value:  refAward === null ? null : refAward.storageLocation,
                            })}
                            id="storageLocation"
                            autoComplete="off"
                        />
                    </Grid>
                </Grid>
            </Grid>

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

                    <Grid item xs={12} s={12} md={12} lg={6} justifyContent="space-between" alignItems="right">
                        <TextField
                            fullWidth
                            inputProps={{maxLength: 100}}
                            {...register("physicalAward",{
                                value:  refAward === null ? null : refAward.physicalAward,
                            })}
                            id="physicalAward"
                            autoComplete="off"
                        />
                    </Grid>
                </Grid>
            </Grid>

        </Grid>

}