// material-ui
import {
    FormControl,
    Button,
    Grid,
    // InputAdornment, 
    Typography, FormLabel,
    OutlinedInput,
    Stack,
    Dialog, DialogTitle, DialogContent, DialogActions
} from '@mui/material';
// import MainCard from "../../components/MainCard";
const MainCard = Loadable(lazy(() => import('components/MainCard')));
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import {
    useEffect,
    useState,
    lazy
} from "react";
// import Checkbox from "@mui/material/Checkbox";
import Loadable from 'components/Loadable';

const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
// import {useParams} from "react-router-dom";
import * as HttpUtils from "utils/HttpUtils"
import * as UrlUtils from "utils/ApiPathConst"
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
import * as DateUtils from "utils/DateUtils";
import * as FormatUtils from "utils/FormatUtils";
import {
    isORGLoggedIn,
} from "utils/Utils";

// import BorderColorOutlinedIcon from '@mui/icons-material/BorderColorOutlined';
// import DoneIcon from '@mui/icons-material/Done';
import CloseIcon from '@mui/icons-material/Close';
import EditNoteIcon from '@mui/icons-material/EditNote';
import DownloadIcon from '@mui/icons-material/Download';
import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
import { ThemeProvider } from "@emotion/react";
import { FormattedMessage, useIntl } from "react-intl";
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = (
    { applicationDetailData,
        setStatus,
        fee
    }
) => {
    const [isPopUp, setIsPopUp] = useState(false);
    const [errorText, setErrorText] = useState("");
    const [errorPopUp, setErrorPopUp] = useState(false);
    const [paymentHoldedErrText, setPaymentHoldedErrText] = useState("");
    const [paymentHoldedErr, setPaymentHoldedErr] = useState(false);
    // const params = useParams();
    const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
    const [companyName, setCompanyName] = useState({});
    const [fileDetail, setfileDetail] = useState({});
    const [onReady, setOnReady] = useState(false);
    const [issueNum, setIssueNum] = useState("");
    const [issueDate, setIssueDate] = useState("");
    const { register,
        // getValues
    } = useForm();
    const navigate = useNavigate();
    const intl = useIntl();

    useEffect(() => {
        //if user data from parent are not null
        // console.log(applicationDetailData)
        if (Object.keys(applicationDetailData)?.length > 0 && applicationDetailData.data !== null) {
            setCurrentApplicationDetailData(applicationDetailData.data);
            setCompanyName(applicationDetailData.companyName);
            setfileDetail(applicationDetailData.fileDetail);
            setIssueNum(applicationDetailData.gazetteIssueDetail.volume + "/" + applicationDetailData.gazetteIssueDetail.issueYear
                + " No. " + applicationDetailData.gazetteIssueDetail.issueNo);
            setIssueDate(DateUtils.dateFormat(applicationDetailData.gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
        }
    }, [applicationDetailData]);

    useEffect(() => {
        //if state data are ready and assign to different field
        // console.log(currentApplicationDetailData)
        if (Object.keys(currentApplicationDetailData)?.length > 0) {
            setOnReady(true);
        }
    }, [currentApplicationDetailData]);

    const onDownloadClick = () => () => {
        HttpUtils.fileDownload({
            fileId: fileDetail?.id,
            skey: fileDetail?.skey,
            filename: fileDetail?.filename,
        });
    };

    const cancelledClick = () => () => {
        setStatus("cancel")
    };

    const checkExprityDate = () => {
        HttpUtils.post({
            url: UrlUtils.POST_CHECK_APP_EXPRITY_DATE,
            params: {
                ids: [currentApplicationDetailData.id]
            },
            onSuccess: (responData) => {
                if (responData.success == true) {
                    let appIdList = [currentApplicationDetailData.id]
                    handlePaymentCheck(appIdList)
                    return;
                }
                setErrorText(intl.formatMessage({ id: "MSG.expiredApp" }));
                setErrorPopUp(true);
            }
        });
    };


    function doPayment() {
        setIsPopUp(false);
        let appIdList = [currentApplicationDetailData.id]
        navigate('/paymentPage', { state: { amount: fee, appIdList: appIdList } });
    }

    const handlePaymentCheck = (appIdList) => {
        HttpUtils.post({
            url: UrlUtils.PAYMENT_CHECK,
            params: {
                appIds: appIdList
            },
            onSuccess: (responseData) => {
                const latestData = {};

                responseData.forEach(item => {
                    const { appId, timeDiff } = item;
                    if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) {
                        latestData[appId] = item;
                    }
                });
                const latestDataObjects = Object.values(latestData);

                const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR");
                const filteredAppIds = filteredData.map(item => item.appId);

                const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId));
                const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds];

                const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId));
                if (readyToPayment) {
                    setIsPopUp(true);
                    return;
                } else {
                    const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId));
                    const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId));
                    const resultString = HoldingApplication.map(item => item.appNo).join(' , ');
                    setPaymentHoldedErrText(resultString);
                    // setPaymentHoldedErrText(intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: record.appNo }));
                    setPaymentHoldedErr(true);
                }
            }
        });
    };

    return (
        !onReady ?
            <LoadingComponent />
            :
            <MainCard elevation={0}
                border={false}
                content={false}
            >
                <Grid container spacing={1} direction="row">
                    <Grid item xs={12}>
                        <Stack
                            direction="row"
                            justifyContent="space-between"
                            alignItems="center"
                            spacing={2}
                            mb={2}
                        >
                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                {
                                    currentApplicationDetailData.status == "confirmed" ?
                                        <Button
                                            variant="contained"
                                            color="create"
                                            onClick={() => { checkExprityDate(true) }}
                                            disabled={currentApplicationDetailData.status == "rejected"
                                                || currentApplicationDetailData.status == "cancelled"
                                                || currentApplicationDetailData.status == "paid"
                                                || currentApplicationDetailData.creditor}
                                            startIcon={<EditNoteIcon />}
                                            aria-label={intl.formatMessage({ id: 'payFor' })}
                                        >
                                            <FormattedMessage id="payFor" />
                                        </Button>
                                        : null
                                }
                                <Button
                                    variant="contained"
                                    onClick={cancelledClick()}
                                    color="edit"
                                    disabled={currentApplicationDetailData.status == "rejected"
                                        || currentApplicationDetailData.status == "cancelled"
                                        || currentApplicationDetailData.status == "withdrawn"
                                        || currentApplicationDetailData.status == "completed"
                                        || currentApplicationDetailData.status == "notAccepted"
                                        || currentApplicationDetailData.status == "resubmit"
                                        || (!currentApplicationDetailData.creditor
                                            && currentApplicationDetailData.status == "paid")
                                        || (currentApplicationDetailData.creditor
                                            && currentApplicationDetailData.status == "confirmed")
                                        || (currentApplicationDetailData.creditor
                                            && currentApplicationDetailData.status == "published")
                                    }
                                    title={intl.formatMessage({ id: 'cancel' })}
                                    startIcon={<CloseIcon />}
                                    aria-label={intl.formatMessage({ id: 'cancel' })}
                                >
                                    <FormattedMessage id="cancel" />
                                </Button>
                            </ThemeProvider>
                        </Stack>
                    </Grid>
                </Grid>
                <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>
                    <FormattedMessage id="publicNoticeDetailTitle" />
                </Typography>
                <form>
                    <Grid container direction="column">
                        <Grid item xs={12} md={12}>
                            <Grid container direction="row" justifyContent="space-between"
                                alignItems="center">
                                <Grid item xs={12} sm={12} md={9} lg={6} sx={{ mb: 1 }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={3} lg={3}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                <FormattedMessage id="applicationId" />:
                                            </Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <FormControl variant="outlined" fullWidth disabled>
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    {...register("appNo",
                                                        {
                                                            value: currentApplicationDetailData.appNo,
                                                        })}
                                                    id='appNo'
                                                    sx={{
                                                        "& .MuiInputBase-input.Mui-disabled": {
                                                            WebkitTextFillColor: "#000000",
                                                            background: "#f8f8f8",
                                                        },
                                                    }}
                                                />
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1}}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={3} lg={3}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                <FormattedMessage id="applyStatus" />:
                                            </Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <FormControl variant="outlined">
                                                {currentApplicationDetailData.status ? StatusUtils.getStatusByTextIntl(currentApplicationDetailData.status, currentApplicationDetailData.creditor, intl) : ""}
                                            </FormControl>
                                        </Grid>

                                    </Grid>
                                    {
                                        currentApplicationDetailData.reason ?
                                            <Grid item xs={12} md={12} lg={12}>
                                                <Grid container alignItems={"center"} direction="row" >

                                                    <Grid item xs={12} md={3} lg={3}>
                                                        <FormLabel><Typography variant="pnspsFormParagraph"><FormattedMessage id="reason" />:</Typography></FormLabel>
                                                    </Grid>
                                                    <Grid item xs={12} md={9} lg={9}>
                                                        <FormLabel>
                                                            <Typography id='reason' variant="pnspsFormParagraph">
                                                                {currentApplicationDetailData.reason}
                                                            </Typography>
                                                        </FormLabel>
                                                    </Grid>

                                                </Grid>
                                            </Grid>
                                            : ""
                                    }
                                </Grid>
                            </Grid>
                            <Grid container direction="row" justifyContent="space-between"
                                alignItems="center">
                                <Grid item xs={12} sm={12} md={9} lg={6} sx={{ mb: 1 }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={3} lg={3}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                <FormattedMessage id="applyPerson" />:
                                            </Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <FormControl variant="outlined" fullWidth disabled >
                                                {currentApplicationDetailData.orgId === null ?
                                                    <OutlinedInput
                                                        fullWidth
                                                        size="small"
                                                        {...register("contactPerson",
                                                            {
                                                                value: currentApplicationDetailData.contactPerson,
                                                            })}
                                                        id='contactPerson'
                                                        sx={{
                                                            "& .MuiInputBase-input.Mui-disabled": {
                                                                WebkitTextFillColor: "#000000",
                                                                background: "#f8f8f8",
                                                            },
                                                        }}
                                                    /> :
                                                    <OutlinedInput
                                                        fullWidth
                                                        size="small"
                                                        {...register("companyName",
                                                            {
                                                                value: companyName.enCompanyName,
                                                            })}
                                                        id='companyName'
                                                        sx={{
                                                            "& .MuiInputBase-input.Mui-disabled": {
                                                                WebkitTextFillColor: "#000000",
                                                                background: "#f8f8f8",
                                                            },
                                                        }}
                                                    />
                                                }
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: { lg: 1 } }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={3} lg={3}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                <FormattedMessage id="gazetteCount" />:
                                            </Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <Stack direction="row">
                                                <FormControl variant="outlined" fullWidth disabled>
                                                    <OutlinedInput
                                                        size="small"
                                                        {...register("issueNum",
                                                            {
                                                                value: issueNum,
                                                            })}
                                                        id='issueNum'
                                                        sx={{
                                                            "& .MuiInputBase-input.Mui-disabled": {
                                                                WebkitTextFillColor: "#000000",
                                                                background: "#f8f8f8",
                                                            },
                                                        }}
                                                    />
                                                </FormControl>
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid container direction="row" justifyContent="space-between"
                                alignItems="center">
                                <Grid item xs={12} sm={12} md={9} lg={6} sx={{ mb: 1 }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={3} lg={3}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                <FormattedMessage id="contactPerson" />:
                                            </Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <FormControl variant="outlined" fullWidth disabled>
                                                <OutlinedInput
                                                    fullWidth
                                                    size="small"
                                                    {...register("contactPerson",
                                                        {
                                                            value: currentApplicationDetailData.contactPerson,
                                                        })}
                                                    id='contactPerson'
                                                    sx={{
                                                        "& .MuiInputBase-input.Mui-disabled": {
                                                            WebkitTextFillColor: "#000000",
                                                            background: "#f8f8f8",
                                                        },
                                                    }}
                                                />
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: { lg: 1 } }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={3} lg={3}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                <FormattedMessage id="publishDate" />:
                                            </Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <Stack direction="row">
                                                <FormControl variant="outlined" fullWidth disabled>
                                                    <OutlinedInput
                                                        size="small"
                                                        {...register("issueDate",
                                                            {
                                                                value: issueDate,
                                                            })}
                                                        id='issueDate'
                                                        sx={{
                                                            "& .MuiInputBase-input.Mui-disabled": {
                                                                WebkitTextFillColor: "#000000",
                                                                background: "#f8f8f8",
                                                            },
                                                        }}
                                                    />
                                                </FormControl>
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>

                            <Grid container direction="row" justifyContent="space-between"
                                alignItems="center">
                                <Grid item xs={12} sm={12} md={9} lg={6} sx={{ mb: 1, }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={3} lg={3}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="pnspsFormParagraph">
                                                <FormattedMessage id="userContactNumber" />:
                                            </Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={9} lg={9}>
                                            <Stack direction="row">
                                                <FormControl variant="outlined" sx={{ width: '25%' }} disabled>
                                                    <OutlinedInput
                                                        size="small"
                                                        {...register("countryCode",
                                                            {
                                                                value: currentApplicationDetailData.contactTelNo.countryCode,
                                                            })}
                                                        id='countryCode'
                                                        sx={{
                                                            "& .MuiInputBase-input.Mui-disabled": {
                                                                WebkitTextFillColor: "#000000",
                                                                background: "#f8f8f8",
                                                            },
                                                        }}
                                                    />
                                                </FormControl>
                                                <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                                    <OutlinedInput
                                                        size="small"
                                                        {...register("phoneNumber",
                                                            {
                                                                value: currentApplicationDetailData.contactTelNo.phoneNumber,
                                                            })}
                                                        id='phoneNumber'
                                                        sx={{
                                                            "& .MuiInputBase-input.Mui-disabled": {
                                                                WebkitTextFillColor: "#000000",
                                                                background: "#f8f8f8",
                                                            },
                                                        }}
                                                    />
                                                </FormControl>
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                {
                                    fee > 0 ?
                                        <Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, }}>
                                            <Grid container alignItems={"center"}>
                                                <Grid item xs={12} md={3} lg={3}
                                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                                    <FormLabel><Typography variant="pnspsFormParagraph">
                                                        <FormattedMessage id="currencyAmount" />(HK$):
                                                    </Typography></FormLabel>
                                                </Grid>

                                                <Grid item xs={12} md={9} lg={9}>
                                                    <FormControl variant="outlined" fullWidth disabled>
                                                        <OutlinedInput
                                                            size="small"
                                                            value={FormatUtils.currencyFormat(fee)}
                                                            sx={{
                                                                "& .MuiInputBase-input.Mui-disabled": {
                                                                    WebkitTextFillColor: "#000000",
                                                                    background: "#f8f8f8",
                                                                },
                                                            }}
                                                        />
                                                    </FormControl>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                        :
                                        <></>
                                }

                            </Grid>
                            <Grid item xs={12} sm={12} md={9} lg={6} sx={{ mb: 1, }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                            <FormattedMessage id="userFaxNumber" />:
                                        </Typography></FormLabel>
                                    </Grid>

                                    <Grid item xs={12} sm={12} md={9} lg={9}>
                                        <Stack direction="row">
                                            <FormControl variant="outlined" sx={{ width: '25%' }} disabled>
                                                <OutlinedInput
                                                    size="small"
                                                    {...register("countryCode",
                                                        {
                                                            value: currentApplicationDetailData.contactFaxNo.countryCode,
                                                        })}
                                                    id='countryCode'
                                                    sx={{
                                                        "& .MuiInputBase-input.Mui-disabled": {
                                                            WebkitTextFillColor: "#000000",
                                                            background: "#f8f8f8",
                                                        },
                                                    }}
                                                />
                                            </FormControl>
                                            <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                                <OutlinedInput
                                                    size="small"
                                                    {...register("faxNumber",
                                                        {
                                                            value: currentApplicationDetailData.contactFaxNo.faxNumber,
                                                        })}
                                                    id='faxNumber'
                                                    sx={{
                                                        "& .MuiInputBase-input.Mui-disabled": {
                                                            WebkitTextFillColor: "#000000",
                                                            background: "#f8f8f8",
                                                        },
                                                    }}
                                                />
                                            </FormControl>
                                        </Stack>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid container direction="row" justifyContent="space-between"
                                alignItems="center">
                                <Grid item xs={12} sm={12} md={11} lg={11} mt={1}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} sm={12} md={12} lg={12}>
                                            <Grid container direction="row">
                                                <Grid item xs={12} sm={12} md={2.5} lg={1.6}
                                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                                    <FormLabel><Typography variant="pnspsFormParagraph">
                                                        <FormattedMessage id="draftFile" />:
                                                    </Typography></FormLabel>
                                                </Grid>
                                                <Grid item xs={12} sm={12} md={9} lg={9} >
                                                    <Grid container direction="row" alignItems="center" justifyContent="flex-start">
                                                        <Grid item xs={12} sm={12} md={12} lg={12} sx={{ wordBreak: 'break-word', }}>
                                                            <Typography
                                                                fullWidth
                                                                id='fileName'
                                                                variant="pnspsFormParagraph"
                                                            >
                                                                {fileDetail?.filename}
                                                            </Typography>
                                                            <ThemeProvider theme={PNSPS_BUTTON_THEME}>
                                                                <Button
                                                                    sx={{ ml: 3 }}
                                                                    variant="contained"
                                                                    onClick={onDownloadClick()}
                                                                    aria-label={intl.formatMessage({ id: 'download' })}
                                                                    title={intl.formatMessage({ id: 'download' })}
                                                                    color="save"
                                                                    disabled={!fileDetail?.filename}
                                                                    startIcon={<DownloadIcon sx={{ alignItems: "center" }} />}
                                                                >
                                                                    <FormattedMessage id="download" />
                                                                </Button>
                                                            </ThemeProvider>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            {isORGLoggedIn() ?
                                <Grid item xs={12} md={9} lg={6} sx={{ mb: 1, paddingTop: 2 }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={3} lg={3}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="pnspsFormParagraph"><FormattedMessage id="careOf" />:</Typography></FormLabel>
                                        </Grid>
                                        <Grid item xs={12} md={9} lg={9}>
                                            <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                                <OutlinedInput
                                                    size="small"
                                                    value={currentApplicationDetailData.careOf}
                                                    sx={{
                                                        "& .MuiInputBase-input.Mui-disabled": {
                                                            WebkitTextFillColor: "#000000",
                                                            background: "#f8f8f8",
                                                        },
                                                    }}
                                                />
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                </Grid> : null
                            }
                            <Grid item xs={12} md={9} lg={6} sx={{ mb: 1, paddingTop: 2 }}>
                                <Grid container alignItems={"center"}>
                                    <Grid item xs={12} md={3} lg={3}
                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                        <FormLabel><Typography variant="pnspsFormParagraph">
                                            <FormattedMessage id="extraMark" />:
                                        </Typography></FormLabel>
                                    </Grid>
                                    <Grid item xs={12} md={9} lg={9}>
                                        <FormControl variant="outlined" sx={{ width: '100%' }} disabled>
                                            <OutlinedInput
                                                size="small"
                                                value={currentApplicationDetailData.remarks}
                                                sx={{
                                                    "& .MuiInputBase-input.Mui-disabled": {
                                                        WebkitTextFillColor: "#000000",
                                                        background: "#f8f8f8",
                                                    },
                                                }}
                                            />
                                        </FormControl>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <div>
                        <Dialog
                            open={isPopUp}
                            onClose={() => setIsPopUp(false)}
                            PaperProps={{
                                sx: {
                                    minWidth: '40vw',
                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' },
                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' }
                                }
                            }}
                        >
                            <DialogTitle>
                                <Typography variant="h3" >
                                    <FormattedMessage id="payConfirm" />
                                </Typography>
                            </DialogTitle>
                            <DialogContent style={{ display: 'flex', }}>
                                <Stack direction="column" justifyContent="space-between">
                                    <Typography variant="h4">
                                        <FormattedMessage id="totalAmount" /> (HK$): {FormatUtils.currencyFormat(fee)}
                                    </Typography>
                                </Stack>
                            </DialogContent>
                            <DialogActions>
                                <Button
                                    onClick={() => setIsPopUp(false)}
                                    aria-label={intl.formatMessage({ id: 'close' })}
                                >
                                    <Typography variant="pnspsFormParagraph">
                                        <FormattedMessage id="close" />
                                    </Typography></Button>
                                <Button
                                    onClick={() => doPayment()}
                                    aria-label={intl.formatMessage({ id: 'confirm' })}
                                >
                                    <Typography variant="pnspsFormParagraph">
                                        <FormattedMessage id="confirm" />
                                    </Typography></Button>
                            </DialogActions>
                        </Dialog>
                    </div>
                    <div>
                        <Dialog
                            open={errorPopUp}
                            onClose={() => setErrorPopUp(false)}
                            PaperProps={{
                                sx: {
                                    minWidth: '40vw',
                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                                }
                            }}
                        >
                            <DialogTitle></DialogTitle>
                            <Typography variant="h2" style={{ padding: '16px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
                            <DialogContent style={{ display: 'flex', }}>
                                <Stack direction="column" justifyContent="space-between">
                                    {
                                        errorText
                                    }
                                </Stack>
                            </DialogContent>
                            <DialogActions>
                                <Button
                                    onClick={() => setErrorPopUp(false)}
                                    aria-label={intl.formatMessage({ id: 'close' })}
                                >
                                    <Typography variant="pnspsFormParagraph">
                                        <FormattedMessage id="close" />
                                    </Typography></Button>
                            </DialogActions>
                        </Dialog>
                    </div>
                    <div>
                        <Dialog
                            open={paymentHoldedErr}
                            onClose={() => setPaymentHoldedErr(false)}
                            PaperProps={{
                                sx: {
                                    minWidth: '40vw',
                                    maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                                    maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                                }
                            }}
                        >
                            <DialogTitle></DialogTitle>
                            <Typography variant="h4" style={{ paddingLeft: '24px' }}><FormattedMessage id="MSG.actionFail" /></Typography>
                            <DialogContent style={{ display: 'flex', }}>
                                <Stack direction="column" justifyContent="space-between">
                                    <div dangerouslySetInnerHTML={{ __html: intl.formatMessage({ id: 'MSG.paymentHolded' }, { appNo: paymentHoldedErrText }) }} />
                                </Stack>
                            </DialogContent>
                            <DialogActions>
                                <Button onClick={() => setPaymentHoldedErr(false)} aria-label={intl.formatMessage({ id: 'close' })}>
                                    <Typography variant="h5">
                                        <FormattedMessage id="close" />
                                    </Typography></Button>
                            </DialogActions>
                        </Dialog>
                    </div>
                </form>
            </MainCard >
    );
};

export default ApplicationDetailCard;