// mui
import {
  Box,
  Tabs,
  Tab,
  Grid,
  Card,
  Stack,
  Typography,
  TableHead,
  TableCell,
  TableBody,
  Table,
  TableRow,
  MenuItem,
  Skeleton,
  List,
  ListSubheader,
  ListItem,
  ListItemText,
  ListItemButton,
  Divider,
  CardContent,
  LinearProgress
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { Download as DownloadIcon, Circle as CircleIcon, TableView } from '@mui/icons-material';
// components
import Page from '../../components/Page';
import { fCurrency } from '../../utils/formatNumber';
// utils
import { useState, SyntheticEvent, useContext, useEffect } from 'react';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { useNavigate, useParams } from 'react-router-dom';
import axios from '../../utils/axios';
import { fDateBirth, fDateSuffix, fDateTime } from '../../utils/formatTime';

import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
import {
  Timeline,
  TimelineConnector,
  TimelineContent,
  TimelineDot,
  TimelineSeparator,
} from '@mui/lab';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import Label from '../../components/Label';
import { fSplit } from '../../utils/formatNumber';

import useAuth from '../../hooks/useAuth';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function TabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && children}
    </div>
  );
}

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

interface StyledTabsProps {
  children?: React.ReactNode;
  value: number;
  onChange: (event: React.SyntheticEvent, newValue: number) => void;
}

const StyledTabs = styled((props: StyledTabsProps) => <Tabs {...props} />)({
  '& .MuiTabs-indicator': {
    display: 'flex',
    justifyContent: 'center',
    backgroundColor: '19BBBB',
  },
  '& .MuiTabs-indicatorSpan': {
    maxWidth: 40,
    width: '100%',
    backgroundColor: '#635ee7',
  },
});

interface StyledTabProps {
  label: string;
  icon?: string | React.ReactElement;
}

const StyledTab = styled((props: StyledTabProps) => <Tab disableRipple {...props} />)(
  ({ theme }) => ({
    fontWeight: 600,
    fontSize: '14px',
    color: theme.palette.grey[600],
    maxWidth: '15%',
    flex: 1,
    margin: '0 !important',
    '&.Mui-selected': {
      color: theme.palette.grey[900],
    },
    '&:hover': {
      color: theme.palette.grey[900],
      opacity: 1,
    },
  })
);

type ServiceMonitoringProps = {
  companyName: string;
  serviceCode: string;
  memberId: string;
  fullName: string;
  dateOfBirth: string;
  phoneNumber: string;
  email: string;
  symptoms: string;
  sign: string;
  mainDiagnose: string;
  comparativeDiagnosis: string;
  serviceName: string;
  files: {
    result: {
      type: string;
      original_name: string;
      url: string;
    }[];
    diagnosis: {
      type: string;
      original_name: string;
      url: string;
    }[];
    kondisi: {
      type: string;
      original_name: string;
      url: string;
    }[];
  };
  benefits: {
    amountIncurred: number;
    amountApproved: number;
    amountNotAprroved: number;
    excessPaid: number;
    description: string;
    name: string;
  }[];
  benefitTotal: {
    totalIncurred: number;
    totalApprove: number;
    totalNotApprove: number;
    totalExcess: number;
  };
  hospital: string;
  admissionDate: string;
  dischargeDate: string;
  dailyMonitorings: Record<
    string,
    Array<{
      time: string;
      status: string;
      subject: string;
      object: string;
      bodyTemperature: number;
      sistole: number;
      diastole: number;
      respirationRate: number;
      analysis: string;
      complaints: string;
      plans: {
        type: number;
        plan: string;
      }[];
      files: {
        type: string;
        name: string;
        original_name: string;
        path: string;
      }[];
    }>
  >;
  laboratoriumResults: Record<
    string,
    Array<{
      code: string;
      date: string;
      examination: string;
      location: string;
      files: {
        type: string;
        name: string;
        original_name: string;
        path: string;
      }[];
    }>
  >;
  keterangan: string;
  catatan: string;
};

export default function ServiceMonitoring() {
  const {user} = useAuth();
  const checkIfNameExists = (name) => {
        return user.user.permissions.some(item => item.name === name);
    };

  const nameToCheck = 'service-monitoring-limit-client-portal';
  const fileBillingCheck = 'file-billing-client-portal';
  const fileDiagnosisCheck = 'file-diagnosis-client-portal';
  const filePendukungCheck = 'file-pendukung-medis-client-portal';
  const benefitCheck = 'benefit-client-portal';

  const doesNameExist = checkIfNameExists(nameToCheck);
  const viewfileBilling = checkIfNameExists(fileBillingCheck);
  const viewfileDiagnosis = checkIfNameExists(fileDiagnosisCheck);
  const viewfilePendukungCheck = checkIfNameExists(filePendukungCheck);
  const viewBenefitCheck = checkIfNameExists(benefitCheck);
  const navigate = useNavigate();
  const controller = new AbortController();

  const [value, setValue] = useState(0);
  const [loading, setLoading] = useState(false);
  const handleChange = (event: SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  const [data, setData] = useState<ServiceMonitoringProps | null>(null);

  const { corporateValue } = useContext(UserCurrentCorporateContext);
  const { memberId, requestLogId } = useParams();
  const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0 });
  useEffect(() => {
    (async () => {
      try {
        setLoading(true);

        const response = await axios.get(`${corporateValue}/service-monitoring/${requestLogId}`, {
          signal: controller.signal,
        });

        setData(response.data.data);

        if (response.data.data.serviceCode !== 'IP') {
          setValue(1);
        }

        var member_id = response.data.data.member_id;
        const fetchDepositData = async () => {
            try {
                const response = await axios.get(`${corporateValue}/get-limits/${member_id}`);
                setDepositData(response.data);
            } catch (error) {
                console.error('Failed to fetch deposit data:', error);
            }
        };

        fetchDepositData();
      } catch (error: any) {
        console.error('Error fetching data:', error.message);
      } finally {
        setLoading(false);
      }
    })();

    return () => {
      controller.abort();
    };
  }, [corporateValue]);


  const renderHTML = (data:string) => {
      return (
          <div style={{marginLeft: 20}}
              dangerouslySetInnerHTML={{__html: data}}
          />
      );
  }
  const formatNumber = (number) => {
    return new Intl.NumberFormat('id-ID').format(number);
  };

  console.log(viewfileBilling, 'test')
  const LimitPlanCard = ({ title, current, total }) => (
    <Card variant="outlined" sx={{ minWidth: 200, m: 1 }}>
      <CardContent>
        <Typography variant="h6" component="div">
          {title}
        </Typography>
        <Typography variant="subtitle2" color="text.secondary">
          Yearly Limits
        </Typography>
        <Typography variant="subtitle1">
          {formatNumber(current)} / {formatNumber(total)}
        </Typography>
        <LinearProgress variant="determinate" value={(current / total) * 100} />
      </CardContent>
    </Card>
  );

  const plans = [
    { title: 'Outpatient', current: 200000, total: 1000000 },
    { title: 'Inpatient', current: 1000000, total: 5000000 },
    { title: 'Dental', current: 250000, total: 1000000 },
    { title: 'Maternity', current: 0, total: 3000000 },
  ];

  return (
    <Page title="Service Monitoring">
      <Grid container spacing={3} paddingX={2} sx={{ marginBottom: 5, marginTop: 1 }}>
        <Grid item xs={12} paddingX="24px">
          <Stack direction="row" alignItems="center" gap={3} marginLeft={1.5}>
            <ArrowBackIosIcon
              onClick={() => navigate(`/alarm-center/member/${memberId}}`)}
              sx={{ cursor: 'pointer' }}
            />
            <Typography variant="h5" sx={{ flexGrow: 1 }}>
              Service Monitoring
            </Typography>
          </Stack>
        </Grid>

        {/* Item 1 */}
        <Grid item xs={12}>
          <Card sx={{ borderRadius: 2, padding: 3 }}>
            <Grid container spacing={5}>
              <Grid item container spacing={3}>
                <Grid item container xs={12} md={6} spacing={1.5}>
                    <Grid item xs={12}>
                    <Typography component={'h6'} fontWeight={700} fontSize={18}>
                    {loading ? <Skeleton animation="wave" width={175} /> : 'Employee Profile'}
                    </Typography>
                  </Grid>
                    <Grid item xs={12}>
                    <Typography variant="subtitle2" color={'grey.600'}>
                      {loading ? <Skeleton animation={'wave'} width={200} /> : 'Company Name'}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle1" color={'grey.800'}>
                      {loading ? (
                        <Skeleton animation={'wave'} width={300} />
                      ) : data && data.companyName ? (
                        data.companyName
                      ) : (
                        '-'
                      )}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle2" color={'grey.600'}>
                      {loading ? <Skeleton animation={'wave'} width={200} /> : 'Member ID'}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle1" color={'grey.800'}>
                      {loading ? (
                        <Skeleton animation={'wave'} width={300} />
                      ) : data && data.memberId ? (
                        data.memberId
                      ) : (
                        '-'
                      )}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle2" color={'grey.600'}>
                      {loading ? <Skeleton animation={'wave'} width={200} /> : 'Full Name'}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle1" color={'grey.800'}>
                      {loading ? (
                        <Skeleton animation={'wave'} width={300} />
                      ) : data && data.fullName ? (
                        data.fullName
                      ) : (
                        '-'
                      )}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle2" color={'grey.600'}>
                      {loading ? <Skeleton animation={'wave'} width={200} /> : 'Date of Birth'}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle1" color={'grey.800'}>
                      {loading ? (
                        <Skeleton animation={'wave'} width={300} />
                      ) : data && data.dateOfBirth ? (
                        fDateBirth(data.dateOfBirth)
                      ) : (
                        '-'
                      )}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle2" color={'grey.600'}>
                      {loading ? <Skeleton animation={'wave'} width={200} /> : 'Phone Number'}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle1" color={'grey.800'}>
                      {loading ? (
                        <Skeleton animation={'wave'} width={300} />
                      ) : data && data.phoneNumber ? (
                        data.phoneNumber
                      ) : (
                        '-'
                      )}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle2" color={'grey.600'}>
                      {loading ? <Skeleton animation={'wave'} width={200} /> : 'Email'}
                    </Typography>
                  </Grid>
                  <Grid item xs={12}>
                    <Typography variant="subtitle1" color={'grey.800'}>
                      {loading ? (
                        <Skeleton animation={'wave'} width={300} />
                      ) : data && data.email ? (
                        data.email
                      ) : (
                        '-'
                      )}
                    </Typography>
                  </Grid>
                </Grid>
                <Grid item container xs={12} md={6} spacing={1.5}>
                    {doesNameExist ? (
                        <Stack direction="column" style={{width:'100%'}}>
                            <Box  flexWrap="wrap" justifyContent="left">
                                <Card variant="outlined" sx={{ minWidth: 200, marginBottom: 1, borderRadius: 2, padding: 0 }}>
                                    <CardContent>
                                        <Typography variant="h6" component="div">
                                        Total Limit
                                        </Typography>
                                        <Typography variant="subtitle2" color="text.secondary">
                                        Yearly Limits
                                        </Typography>
                                        <Typography variant="subtitle1">
                                        {formatNumber(depositData.usage)} / {formatNumber(depositData.deposit)}
                                        </Typography>
                                        <LinearProgress variant="determinate" value={(depositData.usage / depositData.deposit) * 100} />
                                    </CardContent>
                                </Card>
                            </Box>
                            <Card sx={{ borderRadius: 2, padding: 3 }}>
                                <Typography component={'h6'} fontWeight={700} fontSize={18}>
                                    Limit Plan
                                </Typography>
                                <Box display="flex" flexWrap="wrap" justifyContent="left">
                                    {depositData.services?.map((plan) => (
                                        <LimitPlanCard
                                        key={plan.title}
                                        title={plan.title}
                                        current={plan.current}
                                        total={plan.total}
                                        />
                                    ))}
                                </Box>
                            </Card>
                        </Stack>
                    ) : ''}
                </Grid>
              </Grid>
              <Grid item xs={12} paddingY={2}>
                <Typography component={'h6'} fontWeight={700} fontSize={18}>
                  {loading ? <Skeleton animation="wave" width={175} /> : 'Detail Letter Of Guarante'}
                </Typography>
              </Grid>

            </Grid>
          </Card>

        </Grid>
        <Grid item container xs={12} spacing={5}>
          <Grid item container xs={12} md={6}>
            <Card sx={{ borderRadius: 2, padding: 3 }}>
              <Grid container spacing={5}>
                <Grid item xs={12}>
                  <Typography component={'h6'} fontWeight={700} fontSize={18}>
                    {loading ? <Skeleton animation="wave" width={175} /> : 'Diagnose Summary'}
                  </Typography>
                </Grid>
                <Grid item xs={12} container spacing={3}>
                  {/* <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Symptoms'}
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={300} />
                        ) : data && data.symptoms ? (
                          data.symptoms
                        ) : (
                          '-'
                        )}
                      </Typography>
                    </Grid>
                  </Grid> */}
                  {/* <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Sign'}
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={300} />
                        ) : data && data.sign ? (
                          data.sign
                        ) : (
                          '-'
                        )}
                      </Typography>
                    </Grid>
                  </Grid> */}
                  <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Main Diagnose'}
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={300} />
                        ) : data && data.mainDiagnose ? (
                          data.mainDiagnose
                        ) : (
                          '-'
                        )}
                      </Typography>
                    </Grid>
                  </Grid>
                  {/* <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={200} />
                        ) : (
                          'Comparative Diagnosis'
                        )}
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={300} />
                        ) : data && data.comparativeDiagnosis ? (
                          data.comparativeDiagnosis
                        ) : (
                          '-'
                        )}
                      </Typography>
                    </Grid>
                  </Grid> */}
                  <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={200} />
                        ) : (
                          'Files Documentation'
                        )}
                      </Typography>
                    </Grid>
                    <Grid item>
                        {loading ? (
                          <Skeleton animation="wave" width={300} />
                        ) : data && data.files && data.files.result.length > 0 ?
                        (
                          data.files.result.map((file, index) =>
                          (
                            file.type == 'final-log-result' &&  viewfilePendukungCheck ?
                              (
                                <Stack direction="column" spacing={2} key={index}>
                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
                                    <a
                                        href={file.url}
                                        download={file.original_name ? file.original_name : 'test'}
                                        style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
                                        target="_blank"
                                    >
                                        <Typography variant="body2" gutterBottom>{file.original_name ? file.original_name : '-'}</Typography>
                                    </a>
                                    </Stack>
                                </Stack>
                              ) :
                            file.type == 'final-log-diagnosis' &&  viewfileDiagnosis ?
                              (
                                <Stack direction="column" spacing={2} key={index}>
                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
                                    <a
                                        href={file.url}
                                        download={file.original_name ? file.original_name : 'test'}
                                        style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
                                        target="_blank"
                                    >
                                        <Typography variant="body2" gutterBottom>{file.original_name ? file.original_name : '-'}</Typography>
                                    </a>
                                    </Stack>
                                </Stack>
                              ) :
                            file.type == 'final-log-kondisi' &&  viewfileBilling ?
                              (
                                <Stack direction="column" spacing={2} key={index}>
                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
                                    <a
                                        href={file.url}
                                        download={file.original_name ? file.original_name : 'test'}
                                        style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
                                        target="_blank"
                                    >
                                        <Typography variant="body2" gutterBottom>{file.original_name ? file.original_name : '-'}</Typography>
                                    </a>
                                    </Stack>
                                </Stack>
                              )
                              : ''
                          )
                        )
                        ) : (
                          <Typography variant="subtitle1" color={'grey.800'}>
                            -
                          </Typography>
                        )}
                    </Grid>
                    {/* <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={200} />
                        ) : (
                          'Files Diagnosis'
                        )}
                      </Typography>
                    </Grid>
                    <Grid item>
                        {loading ? (
                          <Skeleton animation="wave" width={300} />
                        ) : data && data.files && data.files.diagnosis.length > 0 ?
                        (
                          data.files.diagnosis.map((file, index) =>
                          (
                              (
                                <Stack direction="column" spacing={2} key={index}>
                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
                                    <a
                                        href={file.url}
                                        download={file.original_name ? file.original_name : 'test'}
                                        style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
                                        target="_blank"
                                    >
                                        <Typography variant="body2" gutterBottom>{file.original_name ? file.original_name : '-'}</Typography>
                                    </a>
                                    </Stack>
                                </Stack>
                              )
                          )
                        )
                        ) : (
                          <Typography variant="subtitle1" color={'grey.800'}>
                            -
                          </Typography>
                        )}
                    </Grid> */}
                    {/* <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={200} />
                        ) : (
                          'Files Kondisi'
                        )}
                      </Typography>
                    </Grid> */}
                    {/* <Grid item>
                        {loading ? (
                          <Skeleton animation="wave" width={300} />
                        ) : data && data.files && data.files.kondisi.length > 0 ?
                        (
                          data.files.kondisi.map((file, index) =>
                          (
                              (
                                <Stack direction="column" spacing={2} key={index}>
                                    <Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
                                    <a
                                        href={file.url}
                                        style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
                                        target="_blank"
                                    >
                                        <Typography variant="body2" gutterBottom>{file.original_name ? file.original_name : '-'}</Typography>
                                    </a>
                                    </Stack>
                                </Stack>
                              )
                          )
                        )
                        ) : (
                          <Typography variant="subtitle1" color={'grey.800'}>
                            -
                          </Typography>
                        )}
                    </Grid> */}
                  </Grid>
                  {/* Keterangan */}
                  <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Keterangan'}
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={300} />
                        ) : data && data.keterangan ? (
                          data.keterangan
                        ) : (
                          '-'
                        )}
                      </Typography>
                    </Grid>
                  </Grid>
                  {/* Catatan */}
                  <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Catatan'}
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={300} />
                        ) : data && data.catatan ? (
                          data.catatan
                        ) : (
                          '-'
                        )}
                      </Typography>
                    </Grid>
                  </Grid>

                </Grid>
              </Grid>
            </Card>
          </Grid>
          <Grid item container xs={12} md={6}>
            <Card sx={{ borderRadius: 2, padding: 3 }}>
              <Grid container spacing={5}>
                <Grid item xs={12}>
                  <Typography component={'h6'} fontWeight={700} fontSize={18}>
                    {loading ? <Skeleton animation="wave" width={175} /> : 'Services'}
                  </Typography>
                </Grid>
                <Grid item xs={12} container spacing={3}>
                  <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Service Name'}
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={300} />
                        ) : data && data.serviceName ? (
                          data.serviceName
                        ) : (
                          '-'
                        )}
                      </Typography>
                    </Grid>
                  </Grid>
                  {viewBenefitCheck ? (
                    <Grid item container spacing={1.5}>
                      <Grid item>
                        <Typography variant="subtitle2" color={'grey.600'}>
                          {loading ? <Skeleton animation={'wave'} width={200} /> : 'Benefits'}
                        </Typography>
                      </Grid>
                      <Grid item container>
                        <Grid item>
                          {loading ? (
                            <Skeleton animation="wave" width={300} />
                          ) : data && data.benefits && data.benefits.length > 0 ? (
                            data.benefits.map((benefitValue, benefitIndex) => (
                              <List
                                subheader={
                                  <ListSubheader>
                                    <Typography variant="subtitle2" color={'grey.700'}>
                                      {benefitIndex + 1 + `. ` + benefitValue.name}
                                    </Typography>
                                  </ListSubheader>
                                }
                                key={benefitIndex}
                              >
                                <ListItem sx={{ paddingLeft: 4 }}>
                                  <ListItemText>
                                    <Typography
                                      variant="subtitle2"
                                      color={'grey.900'}
                                      component={'div'}
                                      display="flex"
                                      alignItems={'center'}
                                      gap={1}
                                    >
                                      <CircleIcon sx={{ width: 8 }} />
                                      Amount Incurred : Rp {fSplit(benefitValue.amountApproved)}
                                    </Typography>
                                  </ListItemText>
                                </ListItem>
                                <ListItem sx={{ paddingLeft: 4 }}>
                                  <ListItemText>
                                    <Typography
                                      variant="subtitle2"
                                      color={'grey.900'}
                                      component={'div'}
                                      display="flex"
                                      alignItems={'center'}
                                      gap={1}
                                    >
                                      <CircleIcon sx={{ width: 8 }} />
                                      Amount Approved : Rp {fSplit(benefitValue.amountApproved)}
                                    </Typography>
                                  </ListItemText>
                                </ListItem>
                                <ListItem sx={{ paddingLeft: 4 }}>
                                  <ListItemText>
                                    <Typography
                                      variant="subtitle2"
                                      color={'grey.900'}
                                      component={'div'}
                                      display="flex"
                                      alignItems={'center'}
                                      gap={1}
                                    >
                                      <CircleIcon sx={{ width: 8 }} />
                                      Amount Not Approved : Rp {fSplit(benefitValue.amountNotAprroved)}
                                    </Typography>
                                  </ListItemText>
                                </ListItem>
                                <ListItem sx={{ paddingLeft: 4 }}>
                                  <ListItemText>
                                    <Typography
                                      variant="subtitle2"
                                      color={'grey.900'}
                                      component={'div'}
                                      display="flex"
                                      alignItems={'center'}
                                      gap={1}
                                    >
                                      <CircleIcon sx={{ width: 8 }} />
                                      Excess Paid : Rp {fSplit(benefitValue.excessPaid)}
                                    </Typography>
                                  </ListItemText>
                                </ListItem>
                                <ListItem sx={{ paddingLeft: 4 }}>
                                  <ListItemText>
                                    <Typography
                                      variant="subtitle2"
                                      color={'grey.900'}
                                      component={'div'}
                                      display="flex"
                                      alignItems={'center'}
                                      gap={1}
                                    >
                                      <CircleIcon sx={{ width: 8 }} />
                                      Description : {benefitValue.description}
                                    </Typography>
                                  </ListItemText>
                                </ListItem>
                              </List>
                            ))
                          ) : (
                            <Typography variant="subtitle1" color={'grey.800'}>
                              -
                            </Typography>
                          )}
                        </Grid>
                      </Grid>
                    </Grid>
                    
                  ) : ('')
                  }
                  
                  {viewBenefitCheck ? (
                      <Grid item container spacing={1.5}>
                      <Grid item>
                        <Typography variant="subtitle2" color={'grey.600'}>
                          {loading ? <Skeleton animation={'wave'} width={200} /> : 'Benefits Total'}
                        </Typography>
                      </Grid>
                      <Grid item xs={12}>
                        <Typography variant="subtitle1" color={'grey.800'}>
                          {loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Incurred : Rp. '}
                          {loading ? (
                            <Skeleton animation={'wave'} width={300} />
                          ) : data && data.benefitTotal ? (
                              fSplit(data.benefitTotal.totalIncurred)
                          ) : (
                            '-'
                          )}
                        </Typography>
                        <Typography variant="subtitle1" color={'grey.800'}>
                          {loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Approve : Rp. '}
                          {loading ? (
                            <Skeleton animation={'wave'} width={300} />
                          ) : data && data.benefitTotal ? (
                              fSplit(data.benefitTotal.totalApprove)
                          ) : (
                            '-'
                          )}
                        </Typography>
                        <Typography variant="subtitle1" color={'grey.800'}>
                          {loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Not Approve : Rp.'}
                          {loading ? (
                            <Skeleton animation={'wave'} width={300} />
                          ) : data && data.benefitTotal ? (
                              fSplit(data.benefitTotal.totalNotApprove)
                          ) : (
                            '-'
                          )}
                        </Typography>
                        <Typography variant="subtitle1" color={'grey.800'}>
                          {loading ? <Skeleton animation={'wave'} width={200} /> : 'Total Excess : Rp.'}
                          {loading ? (
                            <Skeleton animation={'wave'} width={300} />
                          ) : data && data.benefitTotal ? (
                              fSplit(data.benefitTotal.totalExcess)
                          ) : (
                            '-'
                          )}
                        </Typography>
                      </Grid>
                    </Grid>
                  ) : ('')}
                 
                    <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Hospital'}
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={300} />
                        ) : data && data.hospital ? (
                          data.hospital
                        ) : (
                          '-'
                        )}
                      </Typography>
                    </Grid>
                  </Grid>
                  <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Admission Date'}
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={300} />
                        ) : data && data.admissionDate ? (
                          fDateSuffix(data.admissionDate)
                        ) : (
                          '-'
                        )}
                      </Typography>
                    </Grid>
                  </Grid>
                  <Grid item container xs={12} spacing={1.5}>
                    <Grid item xs={12}>
                      <Typography variant="subtitle2" color={'grey.600'}>
                        {loading ? <Skeleton animation={'wave'} width={200} /> : 'Discharge Date'}
                      </Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Typography variant="subtitle1" color={'grey.800'}>
                        {loading ? (
                          <Skeleton animation={'wave'} width={300} />
                        ) : data && data.dischargeDate ? (
                          fDateSuffix(data.dischargeDate)
                        ) : (
                          '-'
                        )}
                      </Typography>
                    </Grid>
                  </Grid>
                </Grid>
              </Grid>
            </Card>
          </Grid>
        </Grid>
        {/* <Grid item xs={12} lg={12} md={12}>
          <Card sx={{ borderRadius: '16px', padding: '24px' }}>
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
              <Typography>Benefit Item</Typography>
            </Box>
          </Card>

        </Grid> */}
        {data?.serviceCode === 'IP' ? (
          <Grid item xs={12} lg={12} md={12}>
            {loading ? (
              <Card sx={{ borderRadius: '16px', padding: '24px' }}>
                <Grid container>
                  <Grid item xs={2}>
                    <Skeleton animation="wave" sx={{ width: 'calc(100% - 24px)' }} />
                  </Grid>
                  <Grid item xs={2}>
                    <Skeleton animation="wave" sx={{ width: 'calc(100% - 24px)' }} />
                  </Grid>
                  <Grid item xs={12} paddingTop={2}>
                    <Skeleton animation="wave" sx={{ width: 'calc(100% - 24px)' }} />
                  </Grid>
                </Grid>
              </Card>
            ) : (
              <Card sx={{ borderRadius: '16px', padding: '24px' }}>
                <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                  <StyledTabs value={value} onChange={handleChange} aria-label="basic tabs example">
                    <StyledTab label="Daily Monitoring" {...a11yProps(0)} />
                    <StyledTab label="Pemeriksaan Penunjang" {...a11yProps(1)} />
                  </StyledTabs>
                </Box>
                <TabPanel value={value} index={0}>
                  <Grid item xs={12} md={12} padding={data && data.dailyMonitorings ? 0 : 3}>
                    {data && data.dailyMonitorings ? (
                      <Timeline
                        sx={{
                          gap: 2,
                          paddingY: 2,
                          paddingX: 1.5,
                          [`& .${timelineItemClasses.root}:before`]: {
                            flex: 0,
                            padding: 0,
                          },
                        }}
                      >
                        {data &&
                          data.dailyMonitorings &&
                          Object.keys(data.dailyMonitorings).length > 0 &&
                          Object.keys(data.dailyMonitorings).map((date, dateIndex) => (
                            <TimelineItem key={dateIndex}>
                              <TimelineSeparator>
                                <TimelineDot />
                                <TimelineConnector />
                              </TimelineSeparator>
                              <TimelineContent
                                sx={{
                                  '&.MuiTimelineContent-root': {
                                    paddingX: 2,
                                  },
                                }}
                              >
                                <Typography variant="subtitle1" marginBottom={2}>
                                  {date ? date : '-'}
                                </Typography>
                                {data.dailyMonitorings[date].map(
                                  (dailyMonitoring, dailyMonitoringIndex) => (
                                    <Card
                                      key={dailyMonitoringIndex}
                                      sx={{
                                        padding: 3,
                                        marginBottom:
                                          dailyMonitoringIndex !==
                                          data.dailyMonitorings[date].length - 1
                                            ? 2
                                            : 0,
                                      }}
                                    >
                                      <Stack
                                        direction={'row'}
                                        sx={{
                                          alignItems: 'center',
                                          justifyContent: 'space-between',
                                        }}
                                      >
                                        <Label>
                                          {dailyMonitoring.time ? dailyMonitoring.time : '-'}
                                        </Label>
                                        <Label color="success" sx={{ marginRight: 0 }}>
                                          {dailyMonitoring.status ? dailyMonitoring.status : '-'}
                                        </Label>
                                      </Stack>
                                      <Divider sx={{ marginY: 2 }} />
                                      <Stack spacing={3} sx={{ paddingY: 1, paddingX: 3 }}>
                                        <Grid item xs={12} lg={12} md={12}>
                                          <Stack spacing={1}>
                                            <Typography variant="h6">Subject</Typography>
                                            <Typography variant="inherit">
                                              {dailyMonitoring.subject
                                                ? renderHTML(dailyMonitoring.subject)
                                                : '-'}
                                            </Typography>
                                          </Stack>
                                        </Grid>
                                        <Grid item xs={12} lg={12} md={12}>
                                          <Stack spacing={1} sx={{ paddingBottom: 2 }}>
                                            <Typography variant="h6">
                                              Objektif
                                            </Typography>
                                            <Typography variant="inherit">
                                              {dailyMonitoring.object
                                                ? renderHTML(dailyMonitoring.object)
                                                : '-'}
                                            </Typography>
                                          </Stack>
                                          <Stack direction={'row'} sx={{ paddingY: 1 }} spacing={2}>
                                            <Grid item xs={6} lg={6} md={6}>
                                              <Stack>
                                                <Typography variant="inherit">
                                                  Body Temperature
                                                </Typography>
                                              </Stack>
                                            </Grid>
                                            <Grid item xs={6} lg={6} md={6}>
                                              <Stack>
                                                <Typography variant="subtitle1">
                                                  {dailyMonitoring.bodyTemperature > 0
                                                    ? dailyMonitoring.bodyTemperature + ' Cel'
                                                    : '-'}
                                                </Typography>
                                              </Stack>
                                            </Grid>
                                          </Stack>
                                          <Stack direction={'row'} sx={{ paddingY: 1 }} spacing={2}>
                                            <Grid item xs={6} lg={6} md={6}>
                                              <Stack>
                                                <Typography variant="inherit">Sistole</Typography>
                                              </Stack>
                                            </Grid>
                                            <Grid item xs={6} lg={6} md={6}>
                                              <Stack>
                                                <Typography variant="subtitle1">
                                                  {dailyMonitoring.sistole > 0
                                                    ? dailyMonitoring.sistole + ' mm[Hg]'
                                                    : '-'}
                                                </Typography>
                                              </Stack>
                                            </Grid>
                                          </Stack>
                                          <Stack direction={'row'} sx={{ paddingY: 1 }} spacing={2}>
                                            <Grid item xs={6} lg={6} md={6}>
                                              <Stack>
                                                <Typography variant="inherit">Diastole</Typography>
                                              </Stack>
                                            </Grid>
                                            <Grid item xs={6} lg={6} md={6}>
                                              <Stack>
                                                <Typography variant="subtitle1">
                                                  {dailyMonitoring.diastole > 0
                                                    ? dailyMonitoring.diastole + ' mm[Hg]'
                                                    : '-'}
                                                </Typography>
                                              </Stack>
                                            </Grid>
                                          </Stack>
                                          <Stack direction={'row'} sx={{ paddingY: 1 }} spacing={2}>
                                            <Grid item xs={6} lg={6} md={6}>
                                              <Stack>
                                                <Typography variant="inherit">
                                                  Respiration Rate
                                                </Typography>
                                              </Stack>
                                            </Grid>
                                            <Grid item xs={6} lg={6} md={6}>
                                              <Stack>
                                                <Typography variant="subtitle1">
                                                  {dailyMonitoring.respirationRate > 0
                                                    ? dailyMonitoring.respirationRate  + '  / min'
                                                    : '-'}
                                                </Typography>
                                              </Stack>
                                            </Grid>
                                          </Stack>
                                          {/* <Stack direction={'row'} sx={{ paddingY: 1 }} spacing={2}>
                                            <Grid item xs={6} lg={6} md={6}>
                                              <Stack>
                                                <Typography variant="inherit">Complaints</Typography>
                                              </Stack>
                                            </Grid>
                                            <Grid item xs={6} lg={6} md={6}>
                                              <Stack>
                                                <Typography variant="subtitle1">
                                                  {dailyMonitoring.complaints
                                                    ? dailyMonitoring.complaints
                                                    : '-'}
                                                </Typography>
                                              </Stack>
                                            </Grid>
                                          </Stack> */}
                                          <Stack spacing={1}>
                                            <Typography variant="h6" sx={{ paddingTop: 2 }}>
                                              Analysis
                                            </Typography>
                                          </Stack>
                                          <Stack direction={'row'} sx={{ paddingY: 2 }} spacing={2}>
                                            <Grid item xs={12} lg={12} md={12}>
                                              <Stack>
                                                <Typography variant="inherit">
                                                  {dailyMonitoring.analysis
                                                    ? renderHTML(dailyMonitoring.analysis)
                                                    : '-'}
                                                </Typography>
                                              </Stack>
                                            </Grid>
                                          </Stack>
                                          <Stack spacing={1}>
                                            <Typography variant="h6" sx={{ paddingTop: 2 }}>
                                              Medical Plan :
                                            </Typography>
                                          </Stack>
                                          <Stack direction={'row'} spacing={2}>
                                            <Grid item xs={12} lg={12} md={12}>
                                            <Stack marginLeft={5}>
                                              {data.dailyMonitorings ? (
                                                <ul style={{ listStyleType: 'disc' }}>
                                                  {dailyMonitoring.plans.length > 0 ? (
                                                    dailyMonitoring.plans.map((plan, planIndex) =>
                                                      plan.type === 1 ? (
                                                        <li key={planIndex}>{renderHTML(plan.plan)}</li>
                                                      ) : null
                                                    )
                                                  ) : (
                                                    <li>No plans available</li>
                                                  )}
                                                </ul>
                                              ) : (
                                                '-'
                                              )}
                                            </Stack>

                                            </Grid>
                                          </Stack>
                                          <Stack spacing={1}>
                                            <Typography variant="h6" sx={{ paddingTop: 2 }}>
                                              Non Medikamentosa Plan :
                                            </Typography>
                                          </Stack>
                                          <Stack direction={'row'} spacing={2}>
                                            <Grid item xs={12} lg={12} md={12}>
                                            <Stack marginLeft={5}>
                                              {data.dailyMonitorings ? (
                                                <ul style={{ listStyleType: 'disc' }}>
                                                  {dailyMonitoring.plans.length > 0 ? (
                                                    dailyMonitoring.plans.map((plan, planIndex) =>
                                                      plan.type === 2 ? (
                                                        <li key={planIndex}>{renderHTML(plan.plan)}</li>
                                                      ) : null
                                                    )
                                                  ) : (
                                                    <li>No plans available</li>
                                                  )}
                                                </ul>
                                              ) : (
                                                '-'
                                              )}
                                            </Stack>

                                            </Grid>
                                          </Stack>

                                          <Stack spacing={1}>
                                            <Typography variant="h6" sx={{ paddingTop: 2 }}>
                                              File Documentation :
                                            </Typography>
                                          </Stack>
                                          <Stack direction={'row'} spacing={2}>
                                          <Stack marginLeft={5}>
                                            {data.dailyMonitorings ? (
                                              <ul style={{ listStyleType: 'disc' }}>
                                                {dailyMonitoring.files.length > 0 ? (
                                                  dailyMonitoring.files.map((file, fileIndex) =>
                                                    (
                                                      <li key={fileIndex}>
                                                        <a
                                                            href={file.path}
                                                            download={file.original_name ? file.original_name : 'test'}
                                                            style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
                                                            target="_blank"
                                                        >
                                                            {file.original_name}
                                                        </a>
                                                      </li>
                                                    )
                                                  )
                                                ) : (
                                                  <li>-</li>
                                                )}
                                              </ul>
                                            ) : (
                                              <span>-</span>
                                            )}
                                          </Stack>
                                        </Stack>
                                        </Grid>
                                      </Stack>
                                    </Card>
                                  )
                                )}
                              </TimelineContent>
                            </TimelineItem>
                          ))}
                      </Timeline>
                    ) : (
                      <Typography variant="subtitle1" textAlign={'center'}>
                        No Data Found
                      </Typography>
                    )}
                  </Grid>
                </TabPanel>

                <TabPanel value={value} index={1}>
                  <Grid item xs={12}  padding={data && data.laboratoriumResults ? 0 : 3}>
                    {data &&
                    data.laboratoriumResults &&
                    Object.keys(data.laboratoriumResults).length > 0 ? (
                      Object.keys(data.laboratoriumResults).map((date, dateIndex) => (
                        <Card
                          sx={{
                            padding: 3,
                            border: '1px solid #919EAB52',
                            boxShadow: 'none',
                            marginTop: 5,
                          }}
                          key={dateIndex}
                        >
                          <Stack>
                              <Typography variant="subtitle1">{date ? date : '-'}</Typography>
                              {data.laboratoriumResults[date]?.map((laboratoriumResult, laboratoriumResultIndex) => (
                                  <Card key={laboratoriumResultIndex} sx={{ marginTop: 3, paddingX: 2.5, paddingY: 2 }}>
                                      <Label>{laboratoriumResult.code || '-'}</Label>
                                      <Table sx={{ marginY: 2 }}>
                                          <TableHead>
                                              <TableRow>
                                                  <TableCell>Date</TableCell>
                                                  <TableCell>Examination</TableCell>
                                                  <TableCell>Location</TableCell>
                                              </TableRow>
                                          </TableHead>
                                          <TableBody>
                                              <TableRow>
                                                  <TableCell><Label>{laboratoriumResult.date || '-'}</Label></TableCell>
                                                  <TableCell>{laboratoriumResult.examination || '-'}</TableCell>
                                                  <TableCell>{laboratoriumResult.location || '-'}</TableCell>
                                              </TableRow>
                                              <TableRow>
                                                <TableCell>
                                                {data.dailyMonitorings ? (
                                                  <ul style={{ listStyleType: 'disc' }}>
                                                    {laboratoriumResult.files.length > 0 ? (
                                                      laboratoriumResult.files.map((file, fileIndex) =>
                                                        (
                                                          <li key={fileIndex}>
                                                            <a
                                                                href={file.path}
                                                                download={file.original_name ? file.original_name : 'test'}
                                                                style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
                                                                target="_blank"
                                                            >
                                                                {file.original_name}
                                                            </a>
                                                          </li>
                                                        )
                                                      )
                                                    ) : (
                                                      <li>-</li>
                                                    )}
                                                  </ul>
                                                ) : (
                                                  <span>-</span>
                                                )}
                                                </TableCell>
                                              </TableRow>
                                          </TableBody>
                                      </Table>
                                  </Card>
                              ))}
                          </Stack>
                        </Card>
                      ))
                    ) : (
                      <Typography padding={3} variant="subtitle1" textAlign={'center'}>
                        No Data Found
                      </Typography>
                    )}
                  </Grid>
                </TabPanel>
              </Card>
            )}
          </Grid>
        ) : null}
      </Grid>
    </Page>
  );
}