// mui
import { 
  Container, 
  Grid, 
  Stack,
  Typography,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Button,
  Box,
  TableSortLabel,
  Avatar } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// section
import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
// react
import { useNavigate, useParams } from 'react-router-dom';
import ButtonBack from '../../components/ButtonBack';
import { useEffect, useState, useContext } from 'react';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { format } from 'date-fns';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import { fCurrency } from '../../utils/formatNumber';

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

export default function DetailHistory() {
  const navigate = useNavigate();
  const { themeStretch } = useSettings();
  const [data, setData] = useState();

  const { corporateValue } = useContext(UserCurrentCorporateContext);
  const { id } = useParams();

  useEffect(() => {
    axios
      .get(corporateValue + '/claim-report/detail-history/' + id)
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        console.error(error);
      });

  }, []);

  return (
    <Page title="Detail">
      <Container maxWidth={themeStretch ? false : 'xl'}>
        <Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
          <ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
          <Typography variant="h5" sx={{marginLeft:2}}>History</Typography>
        </Stack>
        {data ? (
        <Grid container spacing={3}>
          <Grid item xs={12} md={12}>
            <Stack direction="row" sx={{marginBottom:2}}>
            	<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Name</Typography>
            	<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.name}</Typography>
            </Stack>
            <Stack direction="row" sx={{marginBottom:2}}>
            	<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Member ID</Typography>
            	<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.member_id}</Typography>
            </Stack>
            <Stack direction="row" sx={{marginBottom:2}}>
            	<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Claim Code</Typography>
            	<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.code}</Typography>
            </Stack>
          </Grid>
          <Grid item xs={12} md={12}>
          	<TableContainer>
	            <Table aria-label="collapsible table" size="small">
	              {/* Table Header */}
	              <TableHead>
			        <TableRow>
			              <TableCell
			              	align= 'left'
                			sx={{ padding: 2 }}
                			width= '5%'
			              >
			              	<Typography variant="body2" sx={{color:'#637381'}}>No</Typography>
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			sx={{ padding: 2 }}
                			width= '15%'
			              >
			              	<Typography variant="body2" sx={{color:'#637381'}}>Date</Typography>
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			sx={{ padding: 2 }}
                			width= '20%'
			              >
			              	<Typography variant="body2" sx={{color:'#637381'}}>Requirment</Typography>
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			sx={{ padding: 2 }}
                			width= '20%'
			              >
			              	<Typography variant="body2" sx={{color:'#637381'}}>Request Claim</Typography>
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			sx={{ padding: 2 }}
                			width= '20%'
			              >
			              	<Typography variant="body2" sx={{color:'#637381'}}>Approval Claim</Typography>
			              </TableCell>
			        </TableRow>
			      </TableHead>
	              {/* End Table Header */}
	              {/* Table Body */}
	              <TableBody>
	              {data?.data?.claim_item?.length === 0 ? (
					  <TableRow>
					    <TableCell colSpan={5} align="center">
					      <Typography variant="body2">No data available</Typography>
					    </TableCell>
					  </TableRow>
					) : (
					  data.data.claim_item?.map((dataItem, index) => (
					    <TableRow key={index}>
					      <TableCell align="left">
					        <Typography variant="body2">{parseInt(index)+1}</Typography>
					      </TableCell>
					      <TableCell align="center">
					        <Typography
					          sx={{
					            backgroundColor: '#919EAB29',
					            color: '#637381',
					            borderRadius: '4px',
					            width: '70%',
					          }}
					          variant="body2"
					        >
					          {format(new Date(dataItem.submission_date), "d MMM yyyy")}
					        </Typography>
					      </TableCell>
					      <TableCell align="left">
					        {dataItem.description}
					      </TableCell>
					      <TableCell align="left">
					        {fCurrency(dataItem.nominal_ditagihkan)}
					      </TableCell>
					      <TableCell align="left">
					        {fCurrency(dataItem.nominal_dicover)}
					      </TableCell>
					    </TableRow>
					  ))
					)}

	              </TableBody>
	              {/* End Table Body */}
	            </Table>
	          </TableContainer>
          </Grid>
          {data.data.tot_claim_item ? (
          <Grid item xs={12} md={12}>
          	<TableContainer>
	            <Table aria-label="collapsible table" size="small">
	              {/* Table Body */}
	              <TableBody>
               		<TableRow sx={{ borderBottom: 0 }}>
		              <TableCell
		              	align= 'left'
            			width= '5%'
		              >
		              	
		              </TableCell>
		              <TableCell
		              	align= 'left'
            			width= '15%'
		              >
		              	
		              </TableCell>
		              <TableCell
		              	align= 'left'
            			width= '20%'
		              >
		              	
		              </TableCell>
		              <TableCell
		              	align= 'left'
            			width= '20%'
		              >
		              	<Typography variant="body2" sx={{color:'#637381'}}>Request Claim</Typography>
		              </TableCell>
		              <TableCell
		              	align= 'left'
            			width= '20%'
		              >
		              	<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.tot_claim_item.nominal_ditagihkan ? fCurrency(data.data.tot_claim_item.nominal_ditagihkan) : '-'}</Typography>
		              </TableCell>
					</TableRow>
			        <TableRow sx={{ borderBottom: 0 }}>
			              <TableCell
			              	align= 'left'
                			width= '5%'
			              >
			              	
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			width= '15%'
			              >
			              	
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			width= '20%'
			              >
			              	
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			width= '20%'
			              >
			              	<Typography variant="body2" sx={{color:'#637381'}}>Approval Claim</Typography>
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			width= '20%'
			              >
			              	<Typography variant="body2" sx={{fontWeight: 'bold', color: '#FF4842'}}>{data.data.tot_claim_item.nominal_dicover ? fCurrency(data.data.tot_claim_item.nominal_dicover) : '-'}</Typography>
			              </TableCell>
			        </TableRow>
			        <TableRow sx={{ borderBottom: 0 }}>
			              <TableCell
			              	align= 'left'
                			width= '5%'
			              >
			              	
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			width= '15%'
			              >
			              	
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			width= '20%'
			              >
			              	
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			width= '20%'
			              >
			              	<Typography variant="body2" sx={{fontWeight: 'bold'}}>Difference</Typography>
			              </TableCell>
			              <TableCell
			              	align= 'left'
                			width= '20%'
			              >
			              	<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.tot_claim_item.difference ? fCurrency(data.data.tot_claim_item.difference) : '-'}</Typography>
			              </TableCell>
			        </TableRow>
	              </TableBody>
	              {/* End Table Body */}
	            </Table>
	        </TableContainer>
	        <Stack
		      direction="row"
		      justifyContent="flex-end"
		      alignItems="flex-end"
		      sx={{ marginTop: 15, padding: 2 }}
		      spacing={1}
		    >
		      <Typography variant="body2" sx={{ fontStyle: 'italic', color: '#637381' }}>Note : Apabila terdapat perbedaan nominal silahkan hubungi kami </Typography>
		      <img alt="Gmail Icon" sx={{ height: 32, width: 30 }} src="/images/gmail.png" />
		    </Stack>
          </Grid>
          ) : ''}
        </Grid>
        ) : ''}
      </Container>
    </Page>
  );
}