import * as Yup from 'yup';
// mui
import {
    Container,
    Grid,
    Stack,
    Typography,
    Card,
    TextField,
    Divider,
    ButtonBase,
    Box,
    IconButton,
    Autocomplete,
    FormControl,
    InputLabel,
    Select,
    FormHelperText,
    MenuItem } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// react
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { useEffect, useState, useRef, useMemo } from 'react';
import axios from '../../utils/axios';
// pages
import { format } from 'date-fns';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { fPostFormat } from '@/utils/formatTime';
import { fDate, fDateTime } from '../../utils/formatTime';
import ListItemText from '@mui/material/ListItemText';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import TableMoreMenu from '@/components/table/TableMoreMenu';

import { enqueueSnackbar } from 'notistack';
import BenefitConfigurationList from './components/BenefitConfigurationList';
import { map } from 'lodash';


import { FormProvider, RHFDatepicker, RHFSelect, RHFTextField } from '@/components/hook-form';
import { useFieldArray, useForm } from 'react-hook-form';
import { ClaimHistoryCare } from '@/@types/claims';
import { yupResolver } from '@hookform/resolvers/yup';
import { LoadingButton } from '@mui/lab';
import { Delete, Edit, EditOffOutlined, EditTwoTone, LoopOutlined, RefreshOutlined } from '@mui/icons-material';
import { fDateOnly, fDateTimeSuffix } from '@/utils/formatTime';
import Label from '@/components/Label';
import RHFAutocomplete from '../../components/hook-form/RHFAutocompleteV2';

// ----------------------------------------------------------------------

export default function Detail() {
    const location = useLocation();
    const queryParams = new URLSearchParams(location.search);
    const code = queryParams.get('code');

    const navigate = useNavigate();
    const { themeStretch } = useSettings();
    const [customerData, setCustomerData] = useState(null);
    const [documentData, setDocumentData] = useState(null);
    const [requestDocumentData, setRequestDocumentData] = useState(null);
    const [serviceData, setServiceData] = useState(null);
    const [serviceBenefitData, setServiceBenefitData] = useState(null);
    const [dataDialog, setDataDialog] = useState(null);

    const { id } = useParams();

    useEffect(() => {
        axios
        .get('/claims/detail/'+id)
        .then((response) => {
            setCustomerData(response.data.data.customer_data);
            setDocumentData(response.data.data.documents);
            setRequestDocumentData(response.data.data.request_documents);
            setServiceData(response.data.data.claim_services);
            setServiceBenefitData(response.data.data.claim_service_benefits);
            setDataDialog(response.data.data.dialog_submits);
        })
        .catch((error) => {
            console.error(error);
        });
        getService();

    }, []);

    function toTitleCase(str: string | null) {
        return str.replace(/\w\S*/g, function(txt) {
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
        });
    }

    const style1 = {
        color: '#919EAB',
        width: '30%'
    }
    const style2 = {
        width: '70%'
    }
    const marginBottom1 = {
        marginBottom: 1,
    }

    //Request
    const [openDialogRequest, setOpenDialogRequest] = useState(false);
    const handleCloseDialogRequest = () => {
        setOpenDialogRequest(false);
    }

    const [conditionChecked, setConditionChecked] = useState(true);
    const [diagnosisChecked, setDiagnosisChecked] = useState(false);
    const [supportingResultChecked, setSupportingResultChecked] = useState(false);

    const handleConditionChange = (event) => {
        setConditionChecked(event.target.checked);
    };

    const handleDiagnosisChange = (event) => {
        setDiagnosisChecked(event.target.checked);
    };

    const handleSupportingResultChange = (event) => {
        setSupportingResultChecked(event.target.checked);
    };

    const [noteField, setNoteField] = useState('');
    const [noteFieldError, setNoteFieldError] = useState('');
    const isRequiredFieldsFilled = () => {
        return noteField.trim() !== '';
    };

    const handelRequestDocument = () => {
        const dataForm = {
            claim_id: id,
            condition: conditionChecked,
            diagnosis: diagnosisChecked,
            result: supportingResultChecked,
            note: noteField,
        }
        axios
        .post('/claims/request-documents', dataForm)
        .then((response) => {
            enqueueSnackbar('Success Request Document', { variant: 'success' });
            setOpenDialogRequest(false);
            window.location.reload();
        })
        .catch((error) => {
            enqueueSnackbar('Something Went Wrong', { variant: 'error' });
        })
    }

    /*---------------------- Handle History Hospital Care ----------------------------*/

    interface FormValuesProps extends Partial<ClaimHistoryCare> {
        taxes: boolean;
        inStock: boolean;
    }


    /**------------- Handle History Hospital Care ---------------------*/
    const [currentClaimHistoryCare, setCurrentClaimHistoryCare] = useState(null);
    const [organization, setOrganization] = useState([]); // Untuk Hospital
    const [doctor, setDoctor] = useState([]); // Untuk Docter
    const [corporate_id, setCorporateId] = useState(null); // Untuk Corporate
    const [main_diagnosis, setMainDiagnosis] = useState([]); // Untuk Main diagnosis
    const [claimHistoryId,setClaimHistoryId] = useState<number|null>(null); // Untuk edit Claim History

    const [carehistory, setCarehistory] = useState<ClaimHistoryCare|null>(null);
    const [isEdit,setEdit] = useState(false);
    const [claim, setClaim] = useState<ClaimHistoryCare|null>([])
    const handleCloseDialogUpdate = () => {
        setOpenDialogRequest(false);
        reset()
    }

    useEffect( () => {
        axios
        .get('claims/'+id)
        .then((response) => {
            setCorporateId(response.data.data.corporate_id)
            setCurrentClaimHistoryCare(response.data.data.history_hospital_care)
            setClaim(response.data.data)
        })
    }, [])

    useEffect( () => {
        // setMainDiagnosis
        axios
        .get(`corporates/${corporate_id}/diagnosis`)
        .then((response) => {
           setMainDiagnosis(response.data.data)
        })

        // setOrganization atau hospital atau location
        axios
        .get(`corporates/${corporate_id}/hospitals`)
        .then((response) => {
            setOrganization(response.data.data)
        })

    }, [corporate_id])

   useEffect( () => {
       // setCarehistory
       if (claimHistoryId != null) {
           axios
           .get('/claims/carehistory/'+claimHistoryId)
           .then((response) => {
               reset({
                   service_code: response.data.data.service_code,
                   admission_date: response.data.data.admission_date,
                   discharge_date: response.data.data.discharge_date,
                   organization_id: response.data.data.organization_id,
                   practitioner_id: response.data.data.practitioner_id,
                   medical_record_number: response.data.data.medical_record_number,
                   symptoms: response.data.data.symptoms,
                   sign: response.data.data.sign,
                   main_diagnosis_id: response.data.data.main_diagnosis_id,
               });

               setCarehistory(response.data.data);
           })
           .catch((error) => {
               console.error(error);
           });
            // setDoctor atau practioner
            axios
            .get('/doctors?search=&organization_id='+values.organization_id)
            .then((response) => {
                setDoctor(response.data.data);
                
            })
            .catch((error) => {
                console.error(error);
            });

            // setMainDiagnosis
            axios
            .get(`corporates/${corporate_id}/diagnosis`)
            .then((response) => {
            setMainDiagnosis(response.data.data)
            })

            // setOrganization atau hospital atau location
            axios
            .get(`corporates/${corporate_id}/hospitals`)
            .then((response) => {
                setOrganization(response.data.data)
            })
       }

   }, [claimHistoryId])

   useEffect( () => {
        reset(defaultValues);
   }, [isEdit])


    const [openDialogHospitalCare, setOpenHospitalCare] = useState(false);

    const handleCloseDialogHospitalCare = () => {
        setEdit(false)
        setOpenHospitalCare(false);
        setClaimHistoryId(null)
        reset();
    }

    const [openDialogApproval, setOpenDialogApproval] = useState(false);

    const handleCloseDialogApprove = () => {
        setOpenDialogApproval(false);
        setEdit(false)
        setClaimHistoryId(null);
        reset();
    }

    /* Handle For Approve Claim */
    const handleApproveClaim = (id: number|null, claim_id: number|null) =>{
        // let data = {
        //     status: 1
        // }
        // axios.post(`/claims/carehistory/${id}/approval`, data);
        //     setOpenDialogApproval(false)
        //     enqueueSnackbar(
        //         'Claim Approve Successfully!',
        //         { variant: 'success' }
        //     );
        //     window.location.reload();

        const dataForm = {
            status: 1,
            claim_id: id 
        }
        axios
        .post(`/claims/carehistory/approval`, dataForm)
        .then((response) => {
            enqueueSnackbar('Claim Approve Successfully!', { variant: 'success' });
            setOpenDialogApproval(false);
            window.location.reload();
        })
        .catch((error) => {
            enqueueSnackbar('Something Went Wrong', { variant: 'error' });
        })

    }

    // Handle Location Change
    const handleLocationChange = (organization_id:number) => {
        // if (newValue) {
            const selectedValue = organization_id;
            setValue('organization_id', selectedValue);
            // let data = {
            //     ...values,
            //     practitioner_id: 0
            // }
            // reset(data)

            axios
                .get('/doctors?search=&organization_id=' + selectedValue)
                .then((response) => {
                    setDoctor(response.data.data);
                })
                .catch((error) => {
                    console.error(error);
                });
        // }
    }

    const handleDoctorChange = (event, newValue) => {
        if (newValue) {
            const selectedValue = newValue.id;
            setValue('practitioner_id', selectedValue);
        }
    }

    const handleMainDiagnosisChange = (event, newValue) => {
        if (newValue) {
            const selectedValue = newValue.id;
            setValue('main_diagnosis_id', selectedValue);
        }
    }

    const defaultValues = useMemo(
        () => ({
            service_code: claim?.service_code,
            secondary_diagnosis_id: [{
                value: {
                    name: "",
                    value: 0
                }
             }],
             admission_date: isEdit ? carehistory?.admission_date : '',
             discharge_date: isEdit ? carehistory?.discharge_date : '',
             organization_id: isEdit ? carehistory?.organization_id : '',
             practitioner_id: isEdit ? carehistory?.practitioner_id : '',
             medical_record_number: isEdit ? carehistory?.medical_record_number : '',
             symptoms: isEdit ? carehistory?.symptoms : '',
             sign: isEdit ? carehistory?.sign : '',
             main_diagnosis_id: isEdit ? carehistory?.main_diagnosis_id : 0,
        }),
        []
    )

    let NewClaimHistoryCareSchema = Yup.object().shape({
        service_code: Yup.string().required('Name is required'),
        // admission_date: Yup.date().required('Admisision Date is required'),
        // discharge_date: Yup.date().required('Discharge Date is required'),
        // organization_id: Yup.number().required('Location is required'),
        // practitioner_id: Yup.number().required('Doctor is required'),
        // medical_record_number: Yup.string().required('Medical Record is required'),
        // symptoms: Yup.string().required('Symptoms is required'),
        // sign: Yup.string().required('Sign is required'),
        // main_diagnosis_id: Yup.number().required('Main Diagnosis is required'),
    });

    const methods = useForm<FormValuesProps>({
        resolver: yupResolver(NewClaimHistoryCareSchema),
        defaultValues,
    });

    const {
    reset,
    watch,
    control,
    setValue,
    getValues,
    setError,
    handleSubmit,
    resetField,
    formState: { isSubmitting },
    } = methods;

    const values = watch();

    const {fields, append, remove} = useFieldArray<FormValuesProps>({name: "secondary_diagnosis_id", control})

    const onSubmit = async (data: FormValuesProps) => {
        if (isEdit){
            let newData = {
                service_code: data.service_code,
                admission_date: data.admission_date ? fDateOnly(data.admission_date) : null,
                discharge_date: data.discharge_date ? fDateOnly(data.discharge_date) : null,
                organization_id: data.organization_id,
                practitioner_id: data.practitioner_id,
                medical_record_number: data.medical_record_number,
                symptoms: data.symptoms,
                sign: data.sign,
                secondary_diagnosis_id: data.secondary_diagnosis_id ? data.secondary_diagnosis_id.map((row) => row.value.id) : null,
                main_diagnosis_id: data.main_diagnosis_id,
            }

            const response:any = await axios.post(`/claims/carehistory/${claimHistoryId}/update`, newData);
            // if (response.status == 'success'){
                setOpenHospitalCare(false)
                enqueueSnackbar(
                    'Claim Update Successfully!',
                   { variant: 'success' }
                 );
                 navigate('/claims/detail/'+id);
                 window.location.reload();

            // }
        } else {
            let newData = {
                service_code: data.service_code,
                admission_date: data.admission_date ? fDateOnly(data.admission_date) : null,
                discharge_date: data.discharge_date ? fDateOnly(data.discharge_date) : null,
                organization_id: data.organization_id,
                practitioner_id: data.practitioner_id,
                medical_record_number: data.medical_record_number,
                symptoms: data.symptoms,
                sign: data.sign,
                secondary_diagnosis_id: data.secondary_diagnosis_id ? data.secondary_diagnosis_id.map((row) => row.value.id) : null,
                main_diagnosis_id: data.main_diagnosis_id,

            }


            const response:any = await axios.post(`/claims/${id}/carehistory`, newData);
            // if (response.status == 'success'){
                setOpenHospitalCare(false)
                enqueueSnackbar(
                    'Claim Insert Successfully!',
                   { variant: 'success' }
                 );
                 navigate('/claims/detail/'+id);
                 window.location.reload();
            // }

        }

        reset();
    }

    function secondaryDiagnosisOption() {
        return fields.map((item, index) => {
            return (
            <Card key={item.id} sx={{ paddingX: 2, paddingY: 2, marginBottom: 2 }}>
               <Typography variant='subtitle1' marginBottom={2}>{`#${index+1}`}</Typography>
               <Box sx={{display: "flex", placeContent: 'space-between', placeItems: "center", gap: 2}}>
               <Box sx={{width: "100%"}}>
               <RHFAutocomplete
                name={`secondary_diagnosis_id.${index}.value`}
                options={main_diagnosis}
                disableClearable
                freeSolo
                getOptionLabel={(opt) => opt.name}
                isOptionEqualToValue={(opt, val) => opt.name === val.name}
                label='Comparative Diagnosis (ICD-X)'
               />
               </Box>
               <IconButton color='error' onClick={() => remove(index)}>
                <Delete />
               </IconButton>
               </Box>
             </Card>
            )
        })
    }

    function handleNewHospitalCare() {
        setEdit(false);
        setOpenHospitalCare(true);
        reset(defaultValues);
    }

    function handleEditHospitalCare(id: number) {
        setClaimHistoryId(id);
        setEdit(true);
        setOpenHospitalCare(true);
        // reset(defaultValues);
        console.log(defaultValues, 'debugs')
        console.log(organization, 'debugs')
    }

    function handleUpdateHospitalCare(id: number) {
        setOpenHospitalCare(false);
        setClaimHistoryId(id);
        setEdit(false);
        setOpenDialogApproval(true);
    }

    //Service
    const [openDialogService, setOpenDialogService] = useState(false);
    const handleCloseDialogService = () => {
        setOpenDialogService(false);
    }
    const handleConditionChangeService = (event) => {
        const selectedItem = event.target.value;

        if (valBenefitNames.includes(selectedItem)) {
            // Item is already selected, remove it
            setValBenefitNames(valBenefitNames.filter(item => item !== selectedItem));
        } else {
            // Item is not selected, add it
            setValBenefitNames([...valBenefitNames, selectedItem]);
        }
    };

    //Data
    const [serviceTypeData, setServiceTypeData] = useState(null);
    const [benefitNameData, setBenefitNameData] = useState(null);
    const [hospitalData, setHospitalData] = useState(null);
    //Field
    const currentDate = new Date();
    const formattedCurrentDate = format(currentDate, 'dd MMM yyyy');
    //Date Addmissions
    const [dateAd, setDateAd] = useState(currentDate);
    //Date Discharge
    const [dateDis, setDateDis] = useState(currentDate);
    //Service Type
    const [valServiceType, setValServiceType] = useState(serviceTypeData?.[0].id);
    const [valServiceTypeError, setValServiceTypeError] = useState('');
    //Benefit Name
    const [valBenefitNames, setValBenefitNames] = useState([]);
    const [valBenefitNameError, setValBenefitNameError] = useState('');
    //Hospital
    const [valHospital, setValHospital] = useState('');
    const [valHospitalError, setValHospitalError] = useState('');
    //txt name
    const [txtName, setTxtName] =  useState('Add Service');
    //flag add or edit service
    const [flagAddService, setFlagAddService] = useState('add');
    //id claim_services
    const [idService, setIdService] = useState(null);


    const isRequiredFieldsServiceType = () => {
        return dateAd !== '' && dateDis !== '' && valServiceType !== '' && valBenefitNames.length > 0 && valHospital !== '';
    };

    const getService = async () => {
        try {
            const response = await axios.get('/claims/get-services/' + id);
            setServiceTypeData(response.data.data.service_type);
            setBenefitNameData(response.data.data.benefit_name);
            setHospitalData(response.data.data.hospital);
            await Promise.all([
                setServiceTypeData(response.data.data.service_type),
                setBenefitNameData(response.data.data.benefit_name),
                setHospitalData(response.data.data.hospital),
            ]);

        } catch (error) {
        }
    }


    const handleAddService = async () => {
        setTxtName('Add Service');
        setFlagAddService('add');
        setOpenDialogService(true);
    }

    const handleEditService = async () => {
        setDateAd(serviceData.addmission_date);
        setDateDis(serviceData.discharge_date);
        setIdService(serviceData.id);

        setOpenDialogService(true);
        setTxtName('Edit Service');
        setFlagAddService('edit');

        if (serviceTypeData) {
            setValServiceType(serviceData.service_id);
            setValHospital(serviceData.hospital_id);
            setValBenefitNames(serviceBenefitData.benefit_id);
        }
    }

    const handelSaveServiceType = () => {
        const dateAdd = dateAd ? fPostFormat(dateAd, 'yyyy-MM-dd') : null;
        const dateDisc = dateDis ? fPostFormat(dateDis, 'yyyy-MM-dd') : null;
        const data = {
            flagAddService : flagAddService,
            idService: idService,
            claim_request_id: id,
            dateAdd : dateAdd,
            dateDisc : dateDisc,
            serviceType : valServiceType,
            benefitName : valBenefitNames,
            hospital : valHospital
        };
        axios
        .post('/claims/save-services', data)
        .then((response) => {
            enqueueSnackbar('Success '+(flagAddService == 'add' ? 'Add' : 'Edit')+' Service', { variant: 'success' });
            handleCloseDialogService();
            window.location.reload();
        })
        .catch((error) => {
            enqueueSnackbar('Something Went Wrong', { variant: 'error' });
        })
    }

    const [openDialogSubmit, setOpenDialogSubmit] = useState(false);
    const handleCloseDialogSubmit = () => {
        setOpenDialogSubmit(false);
    }

    const [decline, setDeclaine] = useState('');

    const handleSubmitData = () => {
        //approve or decline
        axios
        .post('claims/'+id+'/'+decline)
        .then((response) => {
            enqueueSnackbar('Success '+toTitleCase(decline)+' Claim Request', { variant: 'success' });
            setOpenDialogSubmit(false);
            window.location.reload();
            
        })
        .catch(({ response }) => {
            enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
        });

        setTimeout(() =>
        {
            window.location.reload();
        }, 5000);

    };

    const handelDownloadLog = () => {
        axios
        .get(`final-log/${id}`, {
            responseType: 'blob',
        })
        .then((response) => {
            window.open(URL.createObjectURL(response.data));
        })
        .catch((response) => {
            enqueueSnackbar(response.message, { variant: 'error' });
        });
    }

    return (
        <Page title='Detail'>
        <Container maxWidth={themeStretch ? false : 'xl'}>
            <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
            <ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
            <Typography variant="h5" sx={{marginLeft:2}}>{(customerData && customerData.code ? customerData.code : '')}</Typography>
            {customerData ? (
                <Stack direction="column" spacing={1} alignItems="center" sx={{marginLeft:'auto'}}>
                    <Stack direction="row" spacing={2}>
                        <Typography variant="body2" sx={{color: '#757575'}}>Status</Typography>
                        <Typography variant="body2" fontWeight="bold">{(customerData && customerData.status) ? toTitleCase(customerData.status) : ''}</Typography>
                    </Stack>
                    <Stack direction="row" spacing={2}>
                        <Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
                        <Typography variant="body2" fontWeight="bold">{(customerData && customerData.submission_date) ? format(new Date(customerData.submission_date), "d MMM yyyy") : ''}</Typography>
                    </Stack>
                </Stack>
            ) : ''}
            </Stack>
            <Grid container spacing={2}>
            {customerData ? (
                <Grid item xs={12} md={12}>
                <Card sx={{padding:2}}  >
                    <Typography variant='subtitle1' sx={{color: '#19BBBB', marginBottom: 4}} gutterBottom>Summary of Customer Data</Typography>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Full Name</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.name}</Typography>
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.payor_id}</Typography>
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{customerData.member_id}</Typography>
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Claim Type</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(customerData.payment_type)}</Typography>
                    </Stack>
                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                        <Typography variant='subtitle2' sx={style1} gutterBottom>Corporate Name</Typography>
                        <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(customerData.coporate_name)}</Typography>
                    </Stack>
                </Card>
                </Grid>
            ) : ''}
            {documentData ? (
                <Grid item xs={12}>
                    <Card sx={{padding: 2}}>
                        {customerData?.status === 'received' ? (
                            <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
                                <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Additional Documents</Typography>
                                <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => setOpenDialogRequest(true)}>
                                    <Typography variant="button" display="block">Request Document</Typography>
                                </Button>
                            </Stack>
                        ) : ''}
                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
                            {documentData?.map((documentType, index) => (
                                <Stack direction="column" spacing={2} key={index}>
                                    <Typography variant="Subtitle2" gutterBottom>
                                    {documentType.type === 'claim-diagnosis' ?
                                        'Diagnosis'
                                    : documentType.type === 'claim-kondisi' ?
                                        'Condition'
                                    : documentType.type === 'claim-result' ?
                                        'Supporting Result'
                                    : documentType.type === 'claim-invoice' ?
                                        'Invoice'
                                    : ''}
                                    </Typography>
                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
                                    <InsertDriveFileIcon />
                                    <a
                                        href={documentType.path}
                                        style={{ cursor: 'pointer', textDecoration: 'underline', color: '#19BBBB' }}
                                        target="_blank"
                                    >
                                        <Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
                                    </a>
                                    </Stack>
                                </Stack>
                            ))}
                        </Stack>
                        {requestDocumentData && requestDocumentData.length > 0 ? (
                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Request Documents</Typography>
                        ) : ''}
                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
                            {requestDocumentData?.map((documentType, index) => (
                                <Stack direction="column" spacing={2} key={index}>

                                    <Stack direction="row" spacing={1} sx={{color: '#637381'}}>
                                    <InsertDriveFileIcon />
                                    <Typography variant="body2" gutterBottom>
                                    {documentType.type === 'claim-diagnosis' ?
                                        'Diagnosis'
                                    : documentType.type === 'claim-kondisi' ?
                                        'Condition'
                                    : documentType.type === 'claim-result' ?
                                        'Supporting Result'
                                    : documentType.type === 'claim-invoice' ?
                                        'Invoice'
                                    : ''}
                                    </Typography>
                                    </Stack>
                                </Stack>
                            ))}
                        </Stack>
                        {/* Dialog Request Documents */}
                        <Dialog open={openDialogRequest} onClose={handleCloseDialogRequest} fullWidth={true} >
                            <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
                            <Stack direction="row" alignItems="center" justifyContent="space-between">
                                <Stack direction="row" alignItems='center' spacing={1}>
                                    <Typography variant="h6">Request Document</Typography>
                                </Stack>
                                <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogRequest}>
                                    <CloseIcon />
                                </IconButton>
                            </Stack>
                            </DialogTitle>
                            <DialogContent>
                            <Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
                                <FormGroup>
                                    <FormControlLabel
                                        control={<Checkbox checked={conditionChecked} onChange={handleConditionChange} />}
                                        label="Condition Document"
                                    />
                                    <FormControlLabel
                                        control={<Checkbox checked={diagnosisChecked} onChange={handleDiagnosisChange} />}
                                        label="Diagnosis Document"
                                    />
                                    <FormControlLabel
                                        control={<Checkbox checked={supportingResultChecked} onChange={handleSupportingResultChange} />}
                                        label="Supporting Result Document"
                                    />
                                </FormGroup>
                                <Typography variant="Subtitle1" sx={{fontWeight: 'bold'}}>
                                    Notes*
                                </Typography>
                                <TextField
                                    label="Detail Notes"
                                    value={noteField ? noteField : ''}
                                    onChange={(e) =>{
                                    setNoteField(e.target.value);
                                    setNoteFieldError(e.target.value.trim() === '' ? 'This field is required' : '');
                                    }}
                                    fullWidth
                                    inputProps={{ maxLength: 50 }}
                                    error={!!noteFieldError}
                                    helperText={noteFieldError}
                                />
                            </Stack>
                            </DialogContent>
                            <DialogActions>
                            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogRequest}>Cancel</Button>
                            <Button sx={{backgroundColor: '#19BBBB'}} variant="contained" disabled={!isRequiredFieldsFilled()} onClick={() => handelRequestDocument()}>Request</Button>
                            </DialogActions>
                        </Dialog>
                    </Card>
                </Grid>
            ): ''}
                <Grid item xs={12}>
                    <Card sx={{padding: 3}}>
                        {customerData?.status === 'received' ? (
                            <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
                                <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>History of Hospital Care</Typography>
                                <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={handleNewHospitalCare}>
                                    <Typography variant="button" display="block">History</Typography>
                                </Button>
                            </Stack>
                        ) : ''}
                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
                            {currentClaimHistoryCare?.map((claimHistoryCare, index) =>
                                claimHistoryCare.status === 0 ? (
                                    <Grid item xs={12} md={12} key={index}> {/* Tambahkan key untuk setiap elemen dalam loop */}
                                    <Card sx={{padding: 2}}>
                                        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 4}}>
                                            <Label variant="outlined" color='primary'  >
                                                <Typography variant="button" display="block">{claimHistoryCare.service_code = 'OP' ? 'Outpatient' : 'Inpatient'}</Typography>
                                            </Label>
                                            <TableMoreMenu actions={
                                                <>
                                                <MenuItem onClick={() => handleEditHospitalCare(claimHistoryCare.id)}>
                                                <EditTwoTone />Edit
                                                </MenuItem>
                                                <MenuItem onClick={() => handleUpdateHospitalCare(claimHistoryCare.id)}>
                                                <LoopOutlined />Update Status
                                                </MenuItem>
                                                </>
                                            }/>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Admission Date :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{ fDate(claimHistoryCare.admission_date)}</Typography> {/* Perbaikan typo di 'admission_date' */}
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{ fDate(claimHistoryCare.discharge_date)}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Location :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(claimHistoryCare.organization?.name)}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Doctor :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(claimHistoryCare.practitioner?.code)} - {claimHistoryCare.person?.name}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Status :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{claimHistoryCare.status == 0 ? 'Pending' : 'Approv'}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>#{index+1} {claimHistoryCare.icd?.code} - {claimHistoryCare.icd?.name}</Typography>
                                        </Stack>
                                    </Card>
                                    </Grid>
                                ) : null
                            )}
                        </Stack>

                        {/* Dialog for input and update */}
                        <Dialog open={openDialogHospitalCare} onClose={handleCloseDialogHospitalCare} fullWidth={true} maxWidth={'xl'}>
                            <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
                            <Stack direction="row" alignItems="center" justifyContent="space-between">
                                <Stack direction="row" alignItems='center' spacing={1}>
                                    <Typography variant="h6">{isEdit ? 'Update' : 'Add'} History of Hospital Care</Typography>
                                </Stack>
                                <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogHospitalCare}>
                                    <CloseIcon />
                                </IconButton>
                            </Stack>
                            </DialogTitle>
                            <DialogContent>
                            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
                                <Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
                                    <Grid container spacing={2}>
                                        <Grid item xs={12}>
                                            <Typography variant='subtitle1' marginBottom={1}>Service Code</Typography>
                                            <RHFSelect
                                                name="service_code"
                                                label="Service Code"
                                                placeholder="Service Code"
                                                disabled
                                            >
                                                <option value="" />
                                                <option value="IP">Inpatient</option>
                                                <option value="OP">Outpatient</option>
                                            </RHFSelect>
                                        </Grid>
                                        <Grid item xs={6} md={6}>
                                            <Typography variant="subtitle1" sx={{marginBottom: '10px'}}>Admission Date*</Typography>
                                            <RHFDatepicker name="admission_date" label="Admission Date" required/>
                                        </Grid>
                                        <Grid item xs={6} md={6}>
                                            <Typography variant="subtitle1" sx={{marginBottom: '10px'}}>Discharge Date*</Typography>
                                            <RHFDatepicker name="discharge_date" label="Discharge Date" required/>
                                        </Grid>
                                        {/* Location */}
                                        <Grid item xs={12}>
                                            <Typography variant='subtitle1' marginBottom={1}>Location*</Typography>
                                            <Autocomplete

                                                id="combo-box-demo"
                                                options={organization}
                                                fullWidth
                                                getOptionLabel={(option) => {
                                                    return option.name ?? false
                                                }}
                                                isOptionEqualToValue={(option, value) =>{
                                                    return option.organization_id == value.organization_id
                                                }}

                                                onChange={(e, selectedOption) => {
                                                    if (selectedOption) {
                                                        const selectedOrganizationId = selectedOption.organization_id;
                                                        handleLocationChange(selectedOrganizationId);
                                                    }
                                                  }}
                                                value={organization.find(row => row.organization_id == values.organization_id)}

                                                renderInput={(params) => (
                                                    <RHFTextField
                                                      name="organization_id"
                                                      {...params}
                                                      label="Location"
                                                      variant="outlined"
                                                      fullWidth
                                                      required
                                                    />
                                                  )}
                                            />
                                        </Grid>

                                        {/* Dokter */}
                                        <Grid item xs={12}>
                                            <Typography variant='subtitle1' marginBottom={1}>Doctor*</Typography>
                                            <Autocomplete
                                                id="combo-box-demo"
                                                options={doctor}
                                                limitTags={1}
                                                fullWidth
                                                getOptionLabel={(option) => {
                                                    return option.name ?? false
                                                }}
                                                isOptionEqualToValue={(option, value) =>{
                                                    return option.id === value.id
                                                }}

                                                value={doctor.find(row => row.id == values.practitioner_id)}

                                                onChange={handleDoctorChange}
                                                renderInput={(params) => (
                                                <RHFTextField
                                                    name='practitioner_id'
                                                    {...params}
                                                    label="Doctor"
                                                    variant="outlined"
                                                    fullWidth
                                                    required
                                                />
                                                )}
                                            />
                                        </Grid>


                                        <Grid item xs={12}>
                                            <Typography variant='subtitle1' color="#637381" marginBottom={1}>Medical Record Number*</Typography>
                                            <RHFTextField name="medical_record_number" label="Medical Record Number" required placeholder='Medical Record Number' />
                                        </Grid>
                                        <Grid item xs={12}>
                                            <Typography variant='subtitle1' color="#637381" marginBottom={1}>Symptoms*</Typography>
                                            <RHFTextField name="symptoms" label="Symptoms" placeholder='Symptoms' required/>
                                        </Grid>
                                        <Grid item xs={12}>
                                            <Typography variant='subtitle1' color="#637381" marginBottom={1}>Sign*</Typography>
                                            <RHFTextField name="sign" label="Sign" placeholder='Sign' required />
                                        </Grid>
                                        <Grid item xs={10.8}>
                                            <Typography variant='subtitle1' color="#637381">Diagnosis*</Typography>
                                        </Grid>
                                        <Grid item xs={1} justifyContent={'flex-end'}>
                                            {/* <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleAddSecondaryDiagnosis()}> */}
                                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => append({value: {name: "", value: 0}})}>
                                                <Typography variant="button" display="block">Diagnosis</Typography>
                                            </Button>
                                        </Grid>
                                        {/* Main Diagnosis */}
                                        <Grid item xs={12}>
                                        <Autocomplete
                                            id="combo-box-demo"
                                            options={main_diagnosis}
                                            limitTags={1}
                                            fullWidth
                                            getOptionLabel={(option) => {
                                                return option.name ?? false
                                            }}
                                            isOptionEqualToValue={(option, value) =>{
                                                return option.id == value.main_diagnosis_id
                                            }}
                                            value={main_diagnosis.find(row => row.id == values.main_diagnosis_id)}
                                            onChange={handleMainDiagnosisChange}
                                            renderInput={(params) => (
                                            <RHFTextField required {...params} label="Main Diagnosis (ICD-X)" variant="outlined" name='main_diagnosis_id' />
                                            )}
                                        />
                                        </Grid>

                                        <Grid item xs={12}>
                                            {secondaryDiagnosisOption()}
                                        </Grid>
                                    </Grid>
                                </Stack>

                                <Stack direction="row" spacing={2}>
                                    <Grid container item xs={12} md={12} justifyContent="flex-end">
                                    <Button variant="outlined" color='primary' onClick={handleCloseDialogHospitalCare}>Cancel</Button>
                                    <LoadingButton
                                        type="submit"
                                        variant="contained"
                                        size="medium"
                                        loading={isSubmitting}
                                        sx={{marginLeft:2}}
                                    >
                                        <Typography variant="subtitle2">{isEdit ? 'Update' : 'Save'}</Typography>
                                    </LoadingButton>
                                    </Grid>
                                </Stack>
                            </FormProvider>
                            </DialogContent>
                            <DialogActions>


                            </DialogActions>
                        </Dialog>

                        {/* Dialog for approval */}
                        <Dialog open={openDialogApproval} onClose={handleCloseDialogApprove} fullWidth={true} maxWidth={'sm'}>
                            <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
                            <Stack direction="row" alignItems="center" justifyContent="space-between">
                                <Stack direction="row" alignItems='center' spacing={1}>
                                    <Typography variant="h6">Add History of Hospital Care</Typography>
                                </Stack>
                                <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogApprove}>
                                    <CloseIcon />
                                </IconButton>
                            </Stack>
                            </DialogTitle>
                            <DialogContent>
                            <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
                                <Stack spacing={2} sx={{marginTop: 2, padding: 2}}>
                                   <Typography variant='subtitle1'> Are you sure to approve this hospital care ?</Typography>
                                </Stack>

                                <Card sx={{padding: 2}}>
                                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                                        <Typography variant='subtitle2' sx={style1} gutterBottom>Admission Date</Typography>
                                        <Typography variant='subtitle1' gutterBottom>{ carehistory ? fDate(carehistory?.admission_date) : '-'}</Typography>
                                    </Stack>
                                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                                        <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
                                        <Typography variant='subtitle1' gutterBottom>{carehistory ? fDate(carehistory.discharge_date) : '-'}</Typography>
                                    </Stack>
                                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                                        <Typography variant='subtitle2' sx={style1} gutterBottom>Location</Typography>
                                        <Typography variant='subtitle1' gutterBottom>{ carehistory ? carehistory.organization_name : '-'}</Typography>
                                    </Stack>
                                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                                        <Typography variant='subtitle2' sx={style1} gutterBottom>Doctor</Typography>
                                        <Typography variant='subtitle2' gutterBottom>{carehistory ? carehistory.practitioner_name : '-'}</Typography>
                                    </Stack>
                                    <Stack direction='row' spacing={2} sx={marginBottom1}>
                                        <Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis</Typography>
                                        <Typography variant='subtitle2' gutterBottom>{carehistory ? carehistory?.main_diagnosis_name : '-'}</Typography>
                                    </Stack>
                                </Card>

                                <Stack direction="row" spacing={1} marginTop={3}>
                                    <Grid container item xs={12} md={12} justifyContent="flex-end">
                                        <Button variant="outlined" color='inherit' onClick={handleCloseDialogApprove}>Cancel</Button>
                                        <Button variant="contained" sx={{marginLeft:1}} onClick={()=> handleApproveClaim(carehistory?.id, carehistory?.claim_id)} >
                                            <Typography variant="subtitle2">Approve</Typography>
                                        </Button>
                                    </Grid>
                                </Stack>
                            </FormProvider>
                            </DialogContent>
                            <DialogActions>


                            </DialogActions>
                        </Dialog>


                    </Card>
                </Grid>
                <Grid item xs={12}>
                    <Card sx={{padding: 3}}>
                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnostic History</Typography>
                        </Stack>
                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
                            {currentClaimHistoryCare?.map((claimHistoryCare, index) =>
                                claimHistoryCare.status === 1 ? (
                                    <Grid item xs={12} md={12} key={index}> {/* Tambahkan key untuk setiap elemen dalam loop */}
                                    <Card sx={{padding: 2}}>
                                        <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 4}}>
                                            <Label variant="outlined" color='primary'  >
                                                <Typography variant="button" display="block">{claimHistoryCare.service_code = 'OP' ? 'Outpatient' : 'Inpatient'}</Typography>
                                            </Label>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Admission Date :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{ fDate(claimHistoryCare.admission_date)}</Typography> {/* Perbaikan typo di 'admission_date' */}
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{ fDate(claimHistoryCare.discharge_date)}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Location :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(claimHistoryCare.organization?.name)}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Doctor :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{toTitleCase(claimHistoryCare.practitioner?.code)} - {claimHistoryCare.person?.name}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Status :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{claimHistoryCare.status == 0 ? 'Pending' : 'Approv'}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>#{index+1} {claimHistoryCare.icd?.code} - {claimHistoryCare.icd?.name}</Typography>
                                        </Stack>
                                    </Card>
                                    </Grid>
                                ) : null
                            )}
                        </Stack>
                    </Card>
                </Grid>
                <Grid item xs={12}>
                    <Card sx={{padding: 3}}>
                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Diagnosis Summary</Typography>
                        </Stack>
                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
                        {currentClaimHistoryCare?.map((claimHistoryCare, index) =>
                                claimHistoryCare.status === 1 ? (
                                    <Grid item xs={12} md={12} key={index}> {/* Tambahkan key untuk setiap elemen dalam loop */}
                                    <Card sx={{padding: 2}}>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Symtomps :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{ claimHistoryCare.symptoms}</Typography> {/* Perbaikan typo di 'admission_date' */}
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Sign :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{ claimHistoryCare.sign}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2} sx={marginBottom1}>
                                            <Typography variant='subtitle2' sx={style1} gutterBottom>Main Diagnosis :</Typography>
                                            <Typography variant='subtitle2' sx={style2} gutterBottom>{claimHistoryCare.icd?.name}  <Label>{claimHistoryCare.icd?.code}</Label></Typography>
                                        </Stack>

                                        {/* {claimHistoryCare.comparative_diagnosis?.map((comparativeDiagnosis, i) =>
                                            (
                                                <Stack direction='row' spacing={2} sx={marginBottom1}>
                                                    <Typography variant='subtitle2' sx={style1} gutterBottom>{i == 0 ? 'Comparative Diagnosis :' : ''}</Typography>
                                                    <Typography variant='subtitle2' sx={style2} gutterBottom>{comparativeDiagnosis.icd?.name}  <Label>{comparativeDiagnosis.icd?.code}</Label></Typography>
                                                </Stack>
                                            )
                                        )} */}

                                        {claimHistoryCare.comparative_diagnosis && claimHistoryCare.comparative_diagnosis.length > 0 && (
                                            claimHistoryCare.comparative_diagnosis.map((comparativeDiagnosis, i) => (
                                                <Stack direction='row' spacing={2} sx={marginBottom1} key={i}>
                                                <Typography variant='subtitle2' sx={style1} gutterBottom>
                                                    {i === 0 ? 'Comparative Diagnosis :' : ''}
                                                </Typography>
                                                <Typography variant='subtitle2' sx={style2} gutterBottom>
                                                    {comparativeDiagnosis.icd?.name} <Label>{comparativeDiagnosis.icd?.code}</Label>
                                                </Typography>
                                                </Stack>
                                            ))
                                        )}


                                    </Card>
                                    </Grid>
                                ) : null
                            )}
                        </Stack>
                    </Card>
                </Grid>
                <Grid item xs={12}>
                    <Card sx={{padding: 2}}>
                        <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
                            <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Service</Typography>
                            {!serviceData && customerData?.status === 'received' ? (
                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleAddService()}>
                                <Typography variant="button" display="block">Service</Typography>
                            </Button>
                            ) : (
                                <Stack sx={{marginLeft: 'auto'}}>
                                    {customerData?.status === 'received' ? (
                                    <TableMoreMenu  actions={
                                        <>
                                            <MenuItem onClick={() => handleEditService()}>
                                                <EditOutlinedIcon />
                                                Edit
                                            </MenuItem>
                                        </>
                                        }
                                    />
                                    ) : ''}
                                </Stack>
                            )}
                        </Stack>
                        {serviceData ? (
                        <>
                            <Stack direction='row' spacing={2} sx={marginBottom1}>
                                <Typography variant='subtitle2' sx={style1} gutterBottom>Admission Date</Typography>
                                <Typography variant='subtitle2' sx={style2} gutterBottom>{serviceData && serviceData.addmission_date ? fDateTime(serviceData.addmission_date) : ''}</Typography>
                            </Stack>
                            <Stack direction='row' spacing={2} sx={marginBottom1}>
                                <Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
                                <Typography variant='subtitle2' sx={style2} gutterBottom>{serviceData && serviceData.discharge_date ? fDateTime(serviceData.discharge_date) : ''}</Typography>
                            </Stack>
                            <Stack direction='row' spacing={2} sx={marginBottom1}>
                                <Typography variant='subtitle2' sx={style1} gutterBottom>Serice Type</Typography>
                                <Typography variant='subtitle2' sx={style2} gutterBottom>{serviceData && serviceData.name_services ? serviceData.name_services : ''}</Typography>
                            </Stack>
                            <Stack direction='row' spacing={2} sx={marginBottom1}>
                                <Typography variant='subtitle2' sx={style1} gutterBottom>Benefit Name</Typography>
                                <Typography variant='subtitle2' sx={style2} gutterBottom>{serviceBenefitData && serviceBenefitData.name_benefits ? serviceBenefitData.name_benefits : ''}</Typography>
                            </Stack>
                            <Stack direction='row' spacing={2} sx={marginBottom1}>
                                <Typography variant='subtitle2' sx={style1} gutterBottom>Hospital</Typography>
                                <Typography variant='subtitle2' sx={style2} gutterBottom>{serviceData && serviceData.name_hospitals ? serviceData.name_hospitals : ''}</Typography>
                            </Stack>
                        </>
                        ): ''}

                        {/* Dialog Service */}
                        <Dialog open={openDialogService} onClose={handleCloseDialogService} fullWidth={true}>
                            <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
                            <Stack direction="row" alignItems="center" justifyContent="space-between">
                                <Stack direction="row" alignItems='center' spacing={1}>
                                    <Typography variant="h6">{txtName}</Typography>
                                </Stack>
                                <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogService}>
                                    <CloseIcon />
                                </IconButton>
                            </Stack>
                            </DialogTitle>
                            <DialogContent>
                            <Stack spacing={2} sx={{marginTop: 2, padding: 2}} direction="column">
                                <Stack direction="row" spacing={2}>
                                    <Stack direction="column" spacing={2}>
                                        <Typography variant="Subtitle1" sx={{fontWeight: 'bold'}}>
                                            Admission Date*
                                        </Typography>
                                        <LocalizationProvider dateAdapter={AdapterDateFns}>
                                            <DatePicker
                                                label="Admission Date"
                                                value={dateAd}
                                                onChange={(newValue) => {
                                                    setDateAd(newValue);
                                                }}
                                                inputFormat="dd MMM yyyy"
                                                renderInput={(params) => <TextField sx={{width:'100%'}} {...params} defaultValue={formattedCurrentDate}/>}
                                            />
                                        </LocalizationProvider>
                                    </Stack>
                                    <Stack direction="column" spacing={2}>
                                        <Typography variant="Subtitle1" sx={{fontWeight: 'bold'}}>
                                            Discharge Date*
                                        </Typography>
                                        <LocalizationProvider dateAdapter={AdapterDateFns}>
                                            <DatePicker
                                                label="Discharge Date"
                                                value={dateDis}
                                                onChange={(newValue) => {
                                                    setDateDis(newValue);
                                                }}
                                                inputFormat="dd MMM yyyy"
                                                renderInput={(params) => <TextField sx={{width:'100%'}} {...params} defaultValue={formattedCurrentDate}/>}
                                            />
                                        </LocalizationProvider>
                                    </Stack>
                                </Stack>
                                <Stack direction="row" spacing={2}>
                                    <Stack spacing={2} sx={{width:'100%'}}>
                                        <Typography variant='subtitle1'>Service Type*</Typography>
                                        <FormControl>
                                        <InputLabel htmlFor="service_type">
                                            Service Type
                                        </InputLabel>
                                        <Select
                                            id="service_type"
                                            value={valServiceType ? serviceTypeData?.[0].id : ''}
                                            fullWidth
                                            label="Service Type"
                                            error={!!valServiceTypeError}
                                            onChange={(e) => {
                                                setValServiceType(e.target.value);
                                                setValServiceTypeError(e.target.value === '' ? 'This field is required' : '');
                                            }}
                                            disabled

                                        >
                                        {serviceTypeData?.map((item, index) => (
                                            <MenuItem key={index} value={item.id}>{item.name}</MenuItem>
                                        ))}
                                        </Select>
                                        <FormHelperText style={{ color: 'red' }}>{valServiceTypeError}</FormHelperText>
                                        </FormControl>
                                    </Stack>
                                </Stack>
                                <Stack direction="row" spacing={2}>
                                    <Stack spacing={2} sx={{width:'100%'}}>
                                        <Typography variant='subtitle1'>Benefit Name*</Typography>
                                        <FormControl>
                                        <InputLabel htmlFor="benefit_name">
                                            Benefit Name
                                        </InputLabel>
                                        <Select
                                            id="benefit_name"
                                            value={valBenefitNames}
                                            fullWidth
                                            label="Benefit Name"
                                            error={!!valBenefitNameError}
                                            onChange={(e) => {
                                                setValBenefitNameError(!valBenefitNames ? 'At least one item must be selected' : '');
                                            }}
                                            renderValue={(selected) => selected.map(value => {
                                                const selectedOption = benefitNameData.find(option => String(option.id) === value);
                                                return selectedOption ? selectedOption.description : '';
                                            }).join(', ')}
                                        >
                                            {benefitNameData?.map((item, index) => (
                                                <FormGroup key={index} sx={{ marginLeft: 2 }}>
                                                    <FormControlLabel
                                                        control={
                                                            <Checkbox
                                                                checked={valBenefitNames.includes(String(item.id))}
                                                                onChange={handleConditionChangeService}
                                                                value={String(item.id)}
                                                            />
                                                        }
                                                        label={item.description}
                                                    />
                                                </FormGroup>
                                            ))}
                                        </Select>
                                        <FormHelperText style={{ color: 'red' }}>{valBenefitNameError}</FormHelperText>
                                        </FormControl>
                                    </Stack>
                                </Stack>
                                <Stack direction="row" spacing={2}>
                                    <Stack spacing={2} sx={{width:'100%'}}>
                                        <Typography variant='subtitle1'>Hospital*</Typography>
                                        <FormControl>
                                        <InputLabel htmlFor="hospital">
                                            Hospital
                                        </InputLabel>
                                        <Select
                                            id="hospital"
                                            value={valHospital}
                                            fullWidth
                                            label="Hospital"
                                            error={!!valHospitalError}
                                            onChange={(e) => {
                                                setValHospital(e.target.value);
                                                setValHospitalError(e.target.value === '' ? 'This field is required' : '');
                                            }}

                                        >
                                        {hospitalData?.map((item, index) => (
                                            <MenuItem key={index} value={item.id}>{item.name}</MenuItem>
                                        ))}
                                        </Select>
                                        <FormHelperText style={{ color: 'red' }}>{valHospitalError}</FormHelperText>
                                        </FormControl>
                                    </Stack>
                                </Stack>
                            </Stack>
                            </DialogContent>
                            <DialogActions>
                            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogService}>Cancel</Button>
                            <Button sx={{backgroundColor: '#19BBBB'}} variant="contained" disabled={!isRequiredFieldsServiceType()} onClick={() => handelSaveServiceType()}>Save</Button>
                            </DialogActions>
                        </Dialog>
                    </Card>
                </Grid>
                <Grid item xs={12}>
                    <Card sx={{padding: 3}}>
                        <Grid container spacing={4}>
                            {/* title */}
                            <Grid item xs={12}>
                                <Typography variant='subtitle1' sx={{color: '#19BBBB'}}>Client Benefit Configuration</Typography>
                            </Grid>

                            {/* no benefit selected */}
                            {
                                false
                                ?
                                (
                                    <Grid item xs={12}>
                                        <Typography variant='body2' sx={{color: '#919EAB', paddingBottom: '14px', textAlign: 'center'}}>Tidak ada benefit yang dipilih</Typography>
                                    </Grid>
                                )
                                :
                                (
                                    <Grid item xs={12}>
                                        <BenefitConfigurationList />
                                    </Grid>
                                )
                            }
                        </Grid>
                    </Card>
                </Grid>
                <Grid item xs={12} md={12}>
                    <Stack direction="row" padding={4}>
                        <>
                            {(customerData && customerData.status === 'received') ? (
                                <>
                                    <Button
                                        variant="outlined"
                                        sx={{color: '#FF4842', borderColor: '#FF4842', marginLeft: 'auto'}}
                                        onClick={() => {
                                            setOpenDialogSubmit(true);
                                            setDeclaine('decline');
                                        }}
                                    >
                                        Decline
                                    </Button>
                                    <Button
                                        sx={{backgroundColor: '#19BBBB', marginLeft: 1}}
                                        variant="contained"
                                        onClick={()=> {
                                            setOpenDialogSubmit(true);
                                            setDeclaine('approve');
                                        }}
                                    >
                                        Approve
                                    </Button>
                                </>
                            ) : (
                                <>
                                    <Stack direction="row" sx={{marginLeft: 'auto'}} spacing={2}>
                                        <Button
                                            variant="outlined"
                                            sx={{color: '#212B36', borderColor: '#919EAB52', display: customerData?.status === 'declined' ? 'none' : '' }}
                                            onClick={handelDownloadLog}
                                        >
                                            Download Final LOG
                                        </Button>
                                        <Button
                                            sx={{backgroundColor: '#19BBBB', marginLeft: 1}}
                                            variant="contained"
                                            onClick={()=> {
                                                setOpenDialogSubmit(true);
                                                setDeclaine('re-open');
                                            }}
                                        >
                                            Re-Open
                                        </Button>
                                    </Stack>
                                </>
                            ) }

                        </>
                        {/* Dialog Submits */}
                        <Dialog open={openDialogSubmit} onClose={handleCloseDialogSubmit} fullWidth={true}>
                            <DialogTitle sx={{ backgroundColor: '#19BBBB', color: '#FFF', padding: 2 }}>
                            <Stack direction="row" alignItems="center" justifyContent="space-between">
                                <Stack direction="row" alignItems='center' spacing={1}>
                                    <Typography variant="h6">Confirmation</Typography>
                                </Stack>
                                <IconButton sx={{ color: '#FFF' }} onClick={handleCloseDialogSubmit}>
                                    <CloseIcon />
                                </IconButton>
                            </Stack>
                            </DialogTitle>
                            <DialogContent>
                                {dataDialog ? (
                                <Stack spacing={2} padding={2}>
                                    <Typography variant='body1'>Are you sure to {toTitleCase(decline)} this claim ?</Typography>
                                    <Card sx={{padding:2}}  >
                                        <Stack direction='row' spacing={2}>
                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Code</Typography>
                                            <Typography variant='subtitle2' sx={{width: '70%'}}>{dataDialog.code}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2}>
                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Name</Typography>
                                            <Typography variant='subtitle2' sx={{width: '70%'}}>{dataDialog.name}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2}>
                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Date Submission</Typography>
                                            <Typography variant='subtitle2' sx={{width: '70%'}}>{fDateTime(dataDialog.submission_date)}</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2}>
                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Claim Method</Typography>
                                            <Typography variant='subtitle2' sx={{width: '70%'}}>Service Type</Typography>
                                        </Stack>
                                        <Stack direction='row' spacing={2}>
                                            <Typography variant='subtitle2' sx={{color: '#919EAB', width: '30%'}}>Service Type</Typography>
                                            <Typography variant='subtitle2' sx={{width: '70%'}}>
                                                {dataDialog.service_code === 'IP' ? 'Inpatient' : 'Outpatient'}
                                            </Typography>
                                        </Stack>
                                    </Card>
                                </Stack>
                                ) : ''}
                            </DialogContent>
                            <DialogActions>
                            <Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialogSubmit}>Cancel</Button>
                            <Button sx={{backgroundColor: (decline === 'decline' ? '' : '#19BBBB'), color: (decline === 'decline' ? '#FF4842' : ''), borderColor: '#FF4842'}} onClick={handleSubmitData} variant={(decline === 'decline' ? 'outlined' : 'contained')}>{(decline === "decline" ? 'Decline' : (decline === "approve" ? 'Approve' : 'Re-Open'))}</Button>
                            </DialogActions>
                        </Dialog>
                    </Stack>
                </Grid>
            </Grid>
        </Container>
        </Page>
    );
}