// mui
import { 
    Container, 
    Grid, 
    Stack, 
    Typography, 
    Card, 
    TextField, 
    Divider, 
    ButtonBase, 
    Box, 
    IconButton,
    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 } 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';

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

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 { 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);
        })
        .catch((error) => {
            console.error(error);
        });
        getService();

    }, []);

    function toTitleCase(str) {
        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' });
        })
    }
    //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('');
    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' });
        }) 
    }

    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}}>
                        <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}}>
                        <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'}}>
                                <Typography variant="button" display="block">History</Typography>
                            </Button>
                        </Stack>
                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
                        </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>Diagnostic History</Typography>
                        </Stack>
                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
                        </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>
                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}}>
                                <Typography variant="button" display="block">Diagnosis</Typography>
                            </Button>
                        </Stack>
                        <Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
                        </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>Service</Typography>
                            {!serviceData ? (
                            <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => handleAddService()}>
                                <Typography variant="button" display="block">Service</Typography>
                            </Button>
                            ) : (
                                <Stack sx={{marginLeft: 'auto'}}>
                                    <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}
                                            fullWidth
                                            label="Service Type"
                                            error={!!valServiceTypeError}
                                            onChange={(e) => {
                                                setValServiceType(e.target.value);
                                                setValServiceTypeError(e.target.value === '' ? 'This field is required' : '');
                                            }}
                                            
                                        >
                                        {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}>
                        <>
                            <Button variant="outlined" sx={{color: '#FF4842', borderColor: '#FF4842', marginLeft: 'auto'}} >Decline</Button>
                            <Button sx={{backgroundColor: '#19BBBB', marginLeft: 1}} variant="contained" onClick={()=> setOpenDialogSubmit(true)}>Submit</Button>
                        </>
                    </Stack>
                </Grid>
            </Grid>
        </Container>
        </Page>
    );
}