PNSPS-frontend-MaterialUI/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js

// material-ui
import {
    FormControl,
    Button,
    Grid,
    Typography, FormLabel,
    TextField,
    OutlinedInput,
    Stack,
    Dialog, DialogTitle, DialogContent, DialogActions, InputAdornment, Autocomplete
} from '@mui/material';
import { isGranted, delBugMode, getPaymentMethod} from "auth/utils";
const MainCard = Loadable(lazy(() => import('components/MainCard')));
import { useForm } from "react-hook-form";
import {
    useEffect,
    useState,
    lazy
} from "react";

import Loadable from 'components/Loadable';
import * as ComboData from "utils/ComboData";

const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
import * as HttpUtils from "utils/HttpUtils"
import * as DateUtils from "utils/DateUtils"
import { CHECK_CREATE_PROOF, UPDATE_GLDREMARKS, APPLICATION_UPDATE_PAYMENT_MEANS} from "utils/ApiPathConst"
import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";

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 ReplayIcon from '@mui/icons-material/Replay';
import { notifyDownloadSuccess } from 'utils/CommonFunction';
import { isGrantedAny } from "auth/utils";
import { useIntl } from "react-intl";

// ==============================|| DASHBOARD - DEFAULT ||============================== //
const ApplicationDetailCard = (
    { applicationDetailData,
        setStatus,
        setUploadStatus
    }
) => {

    const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({});
    const [companyName, setCompanyName] = useState({});
    const [orgDetail, setOrgDetail] = useState({});
    const [verified, setVerified] = useState(null);
    const [fileDetail, setfileDetail] = useState({});
    const [proofId, setProofId] = useState(null);
    const [onReady, setOnReady] = useState(false);
    const [showPaymentMeans, setShowPaymentMeans] = useState(false);
    const [paymentMeans, setPaymentMeans] = useState(ComboData.paymentMeans[0]);
    const [oldPaymentMeans, setOldPaymentMeans] = useState("");
    const [isPaymentMeansPopUp, setIsPaymentMeansPopUp] = useState(false);

    const { register, handleSubmit } = useForm()
    const intl = useIntl();

    const [isWarningPopUp, setIsWarningPopUp] = useState(false);
    const [warningText, setWarningText] = useState("");

    const [remarksPopUp, setRemarksPopUp] = useState(false);
    const [onDownload, setOnDownload] = useState(false);

    useEffect(() => {
        //if user data from parent are not null
        // console.log(applicationDetailData)
        if (Object.keys(applicationDetailData).length > 0) {
            loadApplicationDetail()
        }
    }, [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 loadApplicationDetail = () => {
        setCurrentApplicationDetailData(applicationDetailData.data);
        setOrgDetail(applicationDetailData.orgDetail?.data);
        setCompanyName(applicationDetailData.companyName);
        setVerified(applicationDetailData.userData.verifiedBy ? true : false)
        setfileDetail(applicationDetailData.fileDetail);
        setProofId(applicationDetailData.proofId);
        if (applicationDetailData.data.status == 'submitted'||applicationDetailData.data.status == 'reviewed'||applicationDetailData.data.status == 'confirmed'){
            setShowPaymentMeans(true)
            if (applicationDetailData.data.paymentMethod!=null){
                setOldPaymentMeans(applicationDetailData.data.paymentMethod)
            }
        }
        // setReload(false)
    }

    const doPaymentMeans = () => {
        setIsPaymentMeansPopUp(false);
        console.log(oldPaymentMeans)
        console.log(paymentMeans.type)
        if(paymentMeans?.type!=oldPaymentMeans){
            HttpUtils.post({
                url: APPLICATION_UPDATE_PAYMENT_MEANS + "/" + currentApplicationDetailData.id,
                params: {
                    paymentMeans: paymentMeans.type
                },
                onSuccess: function () {
                    location.reload();
                }
            });
        }
    }

    const onDownloadClick = () => () => {
        setOnDownload(true)
        HttpUtils.fileDownload({
            fileId: fileDetail?.id,
            skey: fileDetail?.skey,
            filename: fileDetail?.filename,
            onResponse:()=>{
                setOnDownload(false)
                notifyDownloadSuccess()
            },
            onError:()=>{
                setOnDownload(false)
            }
        });
        setUploadStatus(true)
    };


    const reSubmitClick = () => () => {
        setStatus("resubmit")
    };

    const notAcceptedClick = () => () => {
        setStatus("notAccepted")
    };

    const paidClick = () => () => {
        setStatus("paid")
    };


    const setCompleteDisable = () => {
        if (delBugMode) return false;
        return (new Date()).getTime() < DateUtils.convertToDate(applicationDetailData.gazetteIssueDetail.issueDate).getTime();
    }

    const complatedClick = () => () => {
        let issueDate = DateUtils.convertToDate(applicationDetailData.gazetteIssueDetail.issueDate);
        let current = new Date();
        if (delBugMode) {
            setStatus("complete")
        } else if (current.getTime() >= issueDate.getTime()) {
            setStatus("complete")
        }
    };

    const withdrawnClick = () => () => {
        setStatus("withdraw")
    };

    const doPublish = () => () => {
        setStatus("publish")
    }

    const revokeClick = () => () => {
        setStatus("revoke")
    };

    const onProofClick = () => {
        if (applicationDetailData.data.groupNo) {
            HttpUtils.get({
                url: CHECK_CREATE_PROOF + "/" + currentApplicationDetailData.id,
                onSuccess: function (responeData) {
                    if (responeData.success == true) {
                        window.open("/proof/create/" + currentApplicationDetailData.id, "_blank", "noreferrer");
                        window.addEventListener("focus", onFocus)
                    } else {
                        let msg = responeData.msg;
                        if (msg === "haveActiveProof") {
                            msg = "Action Failed: There is already a pending payment and proofreading record for client review."
                        } else if (msg === "haveProofed") {
                            msg = "Action Failed: Already proofed."
                        }
                        setWarningText(msg);
                        setIsWarningPopUp(true);
                    }
                }
            });
        } else {
            setWarningText("Please generate Gazette Code before Create Proof.");
            setIsWarningPopUp(true);
        }

    }

    const onFocus = () => {
        location.reload();
        window.removeEventListener("focus", onFocus)
    }

    const onSubmit = (data) => {
        // console.log(data)
        const gldRemarks = data.makeRemarks
        if (gldRemarks != null && gldRemarks != currentApplicationDetailData.gldRemarks) {
            HttpUtils.post({
                url: UPDATE_GLDREMARKS + "/" + currentApplicationDetailData.id,
                params: {
                    gldRemarks: gldRemarks
                },
                onSuccess: function () {
                    location.reload();
                },
                onError: (error) => {
                    alert(error)
                }
            });
        } else {
            setRemarksPopUp(false)
        }

    };

    return (
        !onReady ?
            <LoadingComponent />
            :
            <MainCard elevation={0}
                border={false}
                content={false}
            >
                {verified && currentApplicationDetailData.status !== "notAccepted" ?
                    isGrantedAny("MAINTAIN_APPLICATION") ?
                        <Grid container spacing={4} direction="row">
                            <Grid item xs={12} md={4} >
                                <Stack
                                    direction="row"
                                    justifyContent="flex-start"
                                    alignItems="center"
                                    spacing={2}
                                    mb={2}
                                >
                                    {currentApplicationDetailData.status === "reviewed" && isGranted("MAINTAIN_PROOF") ?
                                        <Button
                                            // size="large"
                                            variant="contained"
                                            onClick={() => { onProofClick() }}
                                            sx={{
                                                textTransform: 'capitalize',
                                                alignItems: 'end'
                                            }}>
                                            <EditNoteIcon />
                                            <Typography ml={1} variant="h5"> Create Proof</Typography>
                                        </Button> :
                                        null
                                    }
                                </Stack>
                            </Grid>
                            <Grid item xs={12} md={8} >
                                <Stack
                                    direction="row"
                                    justifyContent="flex-start"
                                    alignItems="center"
                                    spacing={2}
                                    mb={2}
                                >
                                    {
                                        !(orgDetail?.creditor) && currentApplicationDetailData.creditor && currentApplicationDetailData.status === "published" ?
                                            <>
                                                <Button
                                                    variant="contained"
                                                    onClick={paidClick()}
                                                    sx={{
                                                        textTransform: 'capitalize',
                                                        alignItems: 'end',
                                                    }}>
                                                    <DoneIcon />
                                                    <Typography ml={1} variant="h5">Paid</Typography>
                                                </Button>
                                            </>
                                            :
                                            <></>
                                    }
                                    {currentApplicationDetailData.status === "submitted" || currentApplicationDetailData.status == "reviewed" ?
                                        <>
                                            <Button
                                                // size="large"
                                                variant="contained"
                                                onClick={reSubmitClick()}
                                                color="orange"
                                            >
                                                <ReplayIcon />
                                                <Typography ml={1} variant="h5"> Re-Submit</Typography>
                                            </Button>
                                            {
                                                proofId == null || proofId == 0?
                                                    <Button
                                                        // size="large"
                                                        variant="contained"
                                                        onClick={notAcceptedClick()}
                                                        color="error"
                                                        sx={{
                                                            textTransform: 'capitalize',
                                                            alignItems: 'end',
                                                        }}>
                                                        <CloseIcon />
                                                        <Typography ml={1} variant="h5">Not Accept</Typography>
                                                    </Button>
                                                : 
                                                    null
                                            }
                                        </> :
                                        (currentApplicationDetailData.status == "confirmed" && currentApplicationDetailData.creditor == 1) ?
                                            <>
                                                <Button
                                                    // size="large"
                                                    variant="contained"
                                                    onClick={doPublish()}
                                                    disabled={setCompleteDisable()}
                                                    sx={{
                                                        textTransform: 'capitalize',
                                                        alignItems: 'end',
                                                        backgroundColor: '#52b202'
                                                    }}>
                                                    <DoneIcon />
                                                    <Typography ml={1} variant="h5">Publish</Typography>
                                                </Button>
                                                <Button
                                                    // size="large"
                                                    variant="contained"
                                                    onClick={withdrawnClick()}
                                                    sx={{
                                                        textTransform: 'capitalize',
                                                        alignItems: 'end',
                                                        backgroundColor: '#ffa733'
                                                    }}>
                                                    <CloseIcon />
                                                    <Typography ml={1} variant="h5">Withdraw</Typography>
                                                </Button>
                                            </>
                                            :
                                            (currentApplicationDetailData.status == "confirmed" && currentApplicationDetailData.creditor == 0) ?
                                                <>
                                                    <Button
                                                        // size="large"
                                                        variant="contained"
                                                        onClick={withdrawnClick()}
                                                        sx={{
                                                            textTransform: 'capitalize',
                                                            alignItems: 'end',
                                                            backgroundColor: '#ffa733'
                                                        }}>
                                                        <CloseIcon />
                                                        <Typography ml={1} variant="h5">Withdraw</Typography>
                                                    </Button>
                                                </>
                                                :
                                                (
                                                    (currentApplicationDetailData.status == "paid" && currentApplicationDetailData.creditor == 0) ?
                                                        <>
                                                            <Button
                                                                // size="large"
                                                                variant="contained"
                                                                onClick={revokeClick()}
                                                                disabled={currentApplicationDetailData.paymentMethod == "online" || currentApplicationDetailData.paymentMethod == null}
                                                                sx={{
                                                                    textTransform: 'capitalize',
                                                                    alignItems: 'end',
                                                                    backgroundColor: '#ffa733'
                                                                }}>

                                                                <ReplayIcon />
                                                                <Typography ml={1} variant="h5">Revoke Payment</Typography>
                                                            </Button>
                                                            <Button
                                                                // size="large"
                                                                variant="contained"
                                                                onClick={complatedClick()}
                                                                disabled={setCompleteDisable()}
                                                                sx={{
                                                                    textTransform: 'capitalize',
                                                                    alignItems: 'end',
                                                                    backgroundColor: '#52b202'
                                                                }}>

                                                                <DoneIcon />
                                                                <Typography ml={1} variant="h5">Publish</Typography>
                                                            </Button>
                                                            <Button
                                                                // size="large"
                                                                variant="contained"
                                                                onClick={withdrawnClick()}
                                                                sx={{
                                                                    textTransform: 'capitalize',
                                                                    alignItems: 'end',
                                                                    backgroundColor: '#ffa733'
                                                                }}>
                                                                <CloseIcon />
                                                                <Typography ml={1} variant="h5">Withdraw</Typography>
                                                            </Button>
                                                        </> : null
                                                )

                                    }
                                </Stack>
                            </Grid>
                        </Grid> 
                    : null 
                    : null
                }
                <Typography variant="h4" xs={12} md={12} sx={{ mb: 2, borderBottom: "1px solid black" }}>
                    Application Details
                </Typography>
                <form>
                    <Grid container direction="column">
                        <Grid item xs={12} md={12}>
                            <Grid container direction="row" justifyContent="flex-start"
                                alignItems="center">
                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={4} lg={4}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="h5">Application No:</Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={8} lg={8}>
                                            <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={5.5} lg={5} sx={{ mb: 1, ml: { md: 1, lg: 3 } }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={4} lg={4}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="h5">Status:</Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={8} lg={8}>
                                            <FormControl variant="outlined">
                                                {StatusUtils.getStatusByTextEng(currentApplicationDetailData.status, currentApplicationDetailData.creditor)}
                                            </FormControl>
                                        </Grid>
                                    </Grid>
                                    {
                                        currentApplicationDetailData.reason ?
                                            <Grid item xs={12} md={12} lg={12}>
                                                <Grid container alignItems={"center"} direction="row" >

                                                    <Grid item xs={12} md={4} lg={4}>
                                                        <FormLabel><Typography variant="h5">Reason:</Typography></FormLabel>
                                                    </Grid>
                                                    <Grid item xs={12} md={8} lg={8}>
                                                        <FormLabel>
                                                            <Typography id='reason' variant="pnspsFormParagraph">
                                                                {currentApplicationDetailData.reason}
                                                            </Typography>
                                                        </FormLabel>
                                                    </Grid>

                                                </Grid>
                                            </Grid>
                                            : ""
                                    }
                                </Grid>
                            </Grid>
                            <Grid container direction="row" justifyContent="flex-start"
                                alignItems="center">
                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={4} lg={4}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="h5">Applicant:</Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={8} lg={8}>
                                            <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",
                                                            },
                                                        }}
                                                    /> :
                                                    companyName.enCompanyName=="GLD"?
                                                        <OutlinedInput
                                                            fullWidth
                                                            size="small"
                                                            {...register("custName",
                                                                {
                                                                    value: "GLD: "+currentApplicationDetailData.custName,
                                                                })}
                                                            id='custName'
                                                            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} md={5.5} lg={5.5} sx={{ mb: 1, ml: { md: 1, lg: 3 } }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={4} lg={4}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="h5">Contact Phone:</Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={8} lg={8}>
                                            <Stack direction="row">
                                                <FormControl variant="outlined" sx={{ width: '25%', minWidth: 100, }} disabled >
                                                    <OutlinedInput
                                                        size="small"
                                                        {...register("contactTelNo.countryCode",
                                                            {
                                                                value: currentApplicationDetailData.contactTelNo.countryCode,
                                                            })}
                                                        id='countryCode'
                                                        sx={{
                                                            "& .MuiInputBase-input.Mui-disabled": {
                                                                WebkitTextFillColor: "#000000",
                                                                background: "#f8f8f8",
                                                            },
                                                            mr: 1
                                                        }}
                                                        inputProps={{
                                                            maxLength: 3,
                                                        }}
                                                        endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                    />
                                                </FormControl>
                                                <FormControl variant="outlined" sx={{ width: '75%' }} disabled >
                                                    <OutlinedInput
                                                        size="small"
                                                        type="tel"
                                                        {...register("contactTelNo.phoneNumber",
                                                            {
                                                                value: currentApplicationDetailData.contactTelNo.phoneNumber,
                                                            })}
                                                        id='phoneNumber'
                                                        sx={{
                                                            "& .MuiInputBase-input.Mui-disabled": {
                                                                WebkitTextFillColor: "#000000",
                                                                background: "#f8f8f8",
                                                            },
                                                        }}
                                                        inputProps={{
                                                            maxLength: 11,
                                                        }}
                                                    />
                                                </FormControl>
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid container direction="row" justifyContent="flex-start"
                                alignItems="center">
                                <Grid item xs={12} md={6} lg={6} sx={{ mb: 1 }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={4} lg={4}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="h5">Contact Person:</Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={8} lg={8}>
                                            <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} md={5.5} lg={5.5} sx={{ mb: 1, ml: { md: 1, lg: 3 } }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={4} lg={4}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="h5">Contact Fax:</Typography></FormLabel>
                                        </Grid>

                                        <Grid item xs={12} md={8} lg={8}>
                                            <Stack direction="row">
                                                <FormControl variant="outlined" sx={{ width: '25%', minWidth: 100, }} disabled>
                                                    <OutlinedInput
                                                        size="small"
                                                        {...register("contactFaxNo.countryCode",
                                                            {
                                                                value: currentApplicationDetailData.contactFaxNo.countryCode,
                                                            })}
                                                        id='countryCode'
                                                        sx={{
                                                            "& .MuiInputBase-input.Mui-disabled": {
                                                                WebkitTextFillColor: "#000000",
                                                                background: "#f8f8f8",
                                                            },
                                                            mr: 1,
                                                        }}
                                                        inputProps={{
                                                            maxLength: 3,
                                                            type: "tel"
                                                        }}
                                                        endAdornment={<InputAdornment position="end">-</InputAdornment>}
                                                    />
                                                </FormControl>
                                                <FormControl variant="outlined" sx={{ width: '75%' }} disabled>
                                                    <OutlinedInput
                                                        size="small"
                                                        type="tel"
                                                        {...register("contactFaxNo.faxNumber",
                                                            {
                                                                value: currentApplicationDetailData.contactFaxNo.faxNumber,
                                                            })}
                                                        id='faxNumber'
                                                        sx={{
                                                            "& .MuiInputBase-input.Mui-disabled": {
                                                                WebkitTextFillColor: "#000000",
                                                                background: "#f8f8f8",
                                                            },
                                                        }}
                                                        inputProps={{
                                                            maxLength: 8,
                                                        }}
                                                    />
                                                </FormControl>
                                            </Stack>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            <Grid container direction="row" justifyContent="flex-start"
                                alignItems="center">
                                <Grid item xs={12} md={12} lg={12} mt={1} mb={2}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={12} lg={12}>
                                            <Grid container direction="row">
                                                <Grid item xs={12} md={2} lg={2}
                                                    sx={{ display: 'flex', alignItems: 'center' }}>
                                                    <FormLabel><Typography variant="h5" >Manuscript File:</Typography></FormLabel>
                                                </Grid>
                                                <Grid item xs={12} md={8} lg={8} sx={{ display: 'flex', alignItems: 'center' }}>
                                                    <Grid container direction="row" justifyContent="flex-start">
                                                        <Grid item xs={10} md={8} lg={8} sx={{ display: 'flex', alignItems: 'center' }}>
                                                            <FormControl variant="outlined" fullWidth  >
                                                                <Typography
                                                                    // fullWidth
                                                                    id='fileName'
                                                                    variant="h5"
                                                                    sx={{ wordBreak: 'break-word' }}
                                                                >
                                                                    {fileDetail?.filename}
                                                                </Typography>
                                                            </FormControl>
                                                        </Grid>
                                                        <Grid item md={2} lg={2}>
                                                            <Button
                                                                size="small"
                                                                variant="contained"
                                                                onClick={onDownloadClick()}
                                                                disabled={!fileDetail?.filename||onDownload}
                                                                sx={{
                                                                    textTransform: 'capitalize',
                                                                    alignItems: 'end',
                                                                }}>
                                                                <DownloadIcon />
                                                            </Button>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                            </Grid>
                            {showPaymentMeans?
                                <Grid container direction="row" justifyContent="flex-start"
                                alignItems="center">
                                    <Grid item xs={12} md={12} lg={12} mt={1} mb={2}>
                                        <Grid container alignItems={"center"}>
                                            <Grid item xs={12} md={12} lg={12}>
                                                <Grid container direction="row">
                                                    <Grid item xs={12} md={2} lg={2}
                                                        sx={{ display: 'flex', alignItems: 'center' }}>
                                                        <FormLabel><Typography variant="h5" >Payment Means:</Typography></FormLabel>
                                                    </Grid>
                                                    <Grid item xs={12} md={8} lg={8} sx={{ display: 'flex', alignItems: 'center' }}>
                                                        <Grid container direction="row" justifyContent="flex-start">
                                                            <Grid item xs={10} md={5} lg={5} sx={{ display: 'flex', alignItems: 'center' }}>
                                                                <FormControl variant="outlined" fullWidth  >
                                                                    <Typography
                                                                        // fullWidth
                                                                        id='paymentMethod'
                                                                        variant="h5"
                                                                    >
                                                                        {currentApplicationDetailData.paymentMethod!=null?intl.formatMessage({ id: getPaymentMethod(currentApplicationDetailData.paymentMethod)}):""}
                                                                    </Typography>
                                                                </FormControl>
                                                            </Grid>
                                                            <Grid item md={3} lg={3}>
                                                                <Button
                                                                    size="small"
                                                                    variant="contained"
                                                                    onClick={() =>{setIsPaymentMeansPopUp(true)}}
                                                                    sx={{
                                                                        textTransform: 'capitalize',
                                                                        alignItems: 'end',
                                                                    }}>
                                                                    Change
                                                                </Button>
                                                            </Grid>
                                                        </Grid>
                                                    </Grid>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Grid>
                                </Grid>
                                :null
                            }
                            <Grid container direction="row" justifyContent="space-start" alignItems="center">
                                <Grid item xs={12} md={12} lg={12} sx={{ mb: 1, }}>
                                    <Grid container alignItems={"center"}>
                                        <Grid item xs={12} md={2} lg={2}
                                            sx={{ display: 'flex', alignItems: 'center' }}>
                                            <FormLabel><Typography variant="h5">Remarks:</Typography></FormLabel>
                                        </Grid>

                                        
                                            <Grid item xs={12} md={10} lg={10}>
                                                <Grid container direction="row" >
                                                    <Grid item xs={12} md={9} lg={9} >
                                                        <FormControl variant="outlined" fullWidth disabled >
                                                            <OutlinedInput
                                                                fullWidth
                                                                size="small"
                                                                {...register("gldRemarks",
                                                                    {
                                                                        value: currentApplicationDetailData.gldRemarks,
                                                                    })}
                                                                id='appNo'
                                                                sx={{
                                                                    "& .MuiInputBase-input.Mui-disabled": {
                                                                        WebkitTextFillColor: "#000000",
                                                                        background: "#f8f8f8",
                                                                    },
                                                                }}
                                                            />
                                                        </FormControl>
                                                    </Grid>
                                                    {isGrantedAny(["MAINTAIN_APPLICATION","MAINTAIN_PAYMENT"]) ?
                                                        <Grid item xs={12} ml={1} md={2} lg={2}>
                                                            <Button
                                                                // size="large"
                                                                variant="contained"
                                                                onClick={() => setRemarksPopUp(true)}
                                                                sx={{
                                                                    textTransform: 'capitalize',
                                                                    alignItems: 'end',

                                                                }}>
                                                                <EditNoteIcon />
                                                                <Typography ml={1} variant="h5"> Edit</Typography>
                                                            </Button>
                                                        </Grid>
                                                        :null
                                                    }
                                                </Grid>
                                            </Grid>

                                    </Grid>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                </form>
                <div>
                    <Dialog
                        open={isWarningPopUp}
                        onClose={() => setIsWarningPopUp(false)}
                        PaperProps={{
                            sx: {
                                minWidth: '40vw',
                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                            }
                        }}
                    >
                        <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>
                        <DialogContent style={{ display: 'flex', }}>
                            <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">OK</Typography></Button>
                        </DialogActions>
                    </Dialog>
                </div>
                <div>
                    <Dialog
                        open={remarksPopUp}
                        onClose={() => setRemarksPopUp(false)}
                        PaperProps={{
                            sx: {
                                minWidth: '40vw',
                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                            }
                        }}
                    >
                        <form onSubmit={handleSubmit(onSubmit)}>
                            <DialogTitle><Typography variant="h3">Remarks</Typography></DialogTitle>
                            <DialogContent style={{ display: 'flex', }}>
                                <Grid container direction="column">
                                    <Grid item sx={{ padding: '16px' }}>
                                        <TextField
                                            fullWidth
                                            {...register("makeRemarks")}
                                            id='makeRemarks'
                                            // label="Remarks"
                                            defaultValue={currentApplicationDetailData.gldRemarks != null ? currentApplicationDetailData.gldRemarks : ""}
                                            InputLabelProps={{
                                                shrink: true
                                            }}
                                        />
                                    </Grid>
                                </Grid>

                            </DialogContent>
                            <DialogActions>
                                <Stack direction="row" justifyContent="space-between">
                                    <Button onClick={() => setRemarksPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                                    <Button type="submit"><Typography variant="h5">Save</Typography></Button>
                                    {/* <Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button> */}
                                </Stack>
                            </DialogActions>
                        </form>
                    </Dialog>
                </div>
                <div>
                    <Dialog
                        open={isPaymentMeansPopUp}
                        onClose={() => setIsPaymentMeansPopUp(false)}
                        PaperProps={{
                            sx: {
                                minWidth: '40vw',
                                maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },
                                maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }
                            }
                        }}
                    >
                        <DialogTitle>Payment Means</DialogTitle>
                        <DialogContent style={{ display: 'flex', }}>
                            <Grid container direction="row">
                                <Grid item xs={12} md={12}>
                                    <Autocomplete
                                        disablePortal={false}
                                        size="small"
                                        id="paymentMeans"
                                        filterOptions={(options) => options}
                                        options={ComboData.paymentMeans}
                                        value={paymentMeans}
                                        getOptionLabel={(option) => option.label}
                                        inputValue={paymentMeans?.label ? paymentMeans?.label : ""}
                                        onChange={(event, newValue) => {
                                            setPaymentMeans(newValue);
                                        }}
                                        renderInput={(params) => (
                                            <TextField {...params}
                                                label=""
                                            />
                                        )}
                                        InputLabelProps={{
                                            shrink: true,
                                        }}
                                        disableClearable={true}
                                    />
                                </Grid> 
                            </Grid>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={() => setIsPaymentMeansPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                            <Button onClick={() => doPaymentMeans()}><Typography variant="h5">Confirm</Typography></Button>
                        </DialogActions>
                    </Dialog>
                </div>
            </MainCard>
    );
};

export default ApplicationDetailCard;