// mui
import {
  Box,
  Tabs,
  Tab,
  Grid,
  Card,
  Stack,
  Typography,
  TableHead,
  TableCell,
  TableBody,
  Table,
  TableRow,
  MenuItem,
  Skeleton,
  List,
  ListSubheader,
  ListItem,
  ListItemText,
  ListItemButton,
  Divider,
} 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';
// 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';

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;
  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;
      bodyTemperature: string;
      sistole: string;
      diastole: string;
      respirationRate: string;
      analysis: string;
      complaints: string;
      plans: {
        type: number;
        plan: string;
      }[];
    }>
  >;
  laboratoriumResults: Record<
    string,
    Array<{
      code: string;
      date: string;
      examination: string;
      location: string;
    }>
  >;
};

export default function ServiceMonitoring() {
  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();

  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);
        }
      } catch (error: any) {
        console.error('Error fetching data:', error.message);
      } finally {
        setLoading(false);
      }
    })();

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

  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 xs={12}>
                <Typography component={'h6'} fontWeight={700} fontSize={18}>
                  {loading ? <Skeleton animation="wave" width={175} /> : 'Employee Profile'}
                </Typography>
              </Grid>
              <Grid item xs={12} container spacing={3}>
                <Grid item container xs={12} md={6} spacing={1.5}>
                  <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>
                <Grid item container xs={12} md={6} spacing={1.5}>
                  <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>
                <Grid item container xs={12} md={6} spacing={1.5}>
                  <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>
                <Grid item container xs={12} md={6} spacing={1.5}>
                  <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>
                <Grid item container xs={12} md={6} spacing={1.5}>
                  <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>
                <Grid item container xs={12} md={6} spacing={1.5}>
                  <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>
            </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>
              </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>
                  <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 : Rp. {fSplit(benefitValue.description)}
                                  </Typography>
                                </ListItemText>
                              </ListItem>
                            </List>
                          ))
                        ) : (
                          <Typography variant="subtitle1" color={'grey.800'}>
                            -
                          </Typography>
                        )}
                      </Grid>
                    </Grid>
                  </Grid>
                  <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> */}
        <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="Laboratorium Result" {...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
                                              ? dailyMonitoring.subject
                                              : '-'}
                                          </Typography>
                                        </Stack>
                                      </Grid>
                                      <Grid item xs={12} lg={12} md={12}>
                                        <Stack spacing={1}>
                                          <Typography variant="h6" sx={{ paddingBottom: 2 }}>
                                            Objektif
                                          </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
                                                  ? dailyMonitoring.bodyTemperature
                                                  : '-'}
                                              </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
                                                  ? dailyMonitoring.sistole
                                                  : '-'}
                                              </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
                                                  ? dailyMonitoring.diastole
                                                  : '-'}
                                              </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
                                                  ? dailyMonitoring.respirationRate
                                                  : '-'}
                                              </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
                                                  ? dailyMonitoring.analysis
                                                  : '-'}
                                              </Typography>
                                            </Stack>
                                          </Grid>
                                        </Stack>
                                        <Stack spacing={1}>
                                          <Typography variant="h6" sx={{ paddingTop: 2 }}>
                                            Perencanaan
                                          </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) => (
                                                      <li key={planIndex}>{plan.plan}</li>
                                                    ))}
                                                </ul>
                                              ) : (
                                                '-'
                                              )}
                                            </Stack>
                                          </Grid>
                                        </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.dailyMonitorings).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 ? laboratoriumResult.code : '-'}
                                </Label>
                                <Table sx={{ marginY: 2 }}>
                                  <TableHead>
                                    <TableRow>
                                      <TableCell>Date</TableCell>
                                      <TableCell>Examination</TableCell>
                                      <TableCell>Location</TableCell>
                                      {/* <TableCell /> */}
                                    </TableRow>
                                  </TableHead>
                                  <TableBody>
                                    <TableRow>
                                      <TableCell>
                                        <Label>
                                          {laboratoriumResult.date ? laboratoriumResult.date : '-'}
                                        </Label>
                                      </TableCell>
                                      <TableCell>
                                        {laboratoriumResult.examination
                                          ? laboratoriumResult.examination
                                          : '-'}
                                      </TableCell>
                                      <TableCell>
                                        {laboratoriumResult.location
                                          ? laboratoriumResult.location
                                          : '-'}
                                      </TableCell>
                                      {/* <TableMoreMenu
                                        actions={
                                          <>
                                            <MenuItem
                                              onClick={() => handleDownloadClick(laboratoriumResult.file)}
                                            >
                                              <DownloadIcon />
                                              Download
                                            </MenuItem>
                                          </>
                                        }
                                      /> */}
                                    </TableRow>
                                  </TableBody>
                                </Table>
                              </Card>
                            )
                          )}
                        </Stack>
                      </Card>
                    ))
                  ) : (
                    <Typography padding={3} variant="subtitle1" textAlign={'center'}>
                      No Data Found
                    </Typography>
                  )}
                </Grid>
              </TabPanel>
            </Card>
          )}
        </Grid>
      </Grid>
    </Page>
  );
}