import PropTypes from 'prop-types';
import { React, useState, useEffect, useRef, forwardRef } from 'react';
import TitleCard from 'pages/nearle/titleCard';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
import { Empty } from 'antd';
import ClearIcon from '@mui/icons-material/Clear';
import { TableVirtuoso } from 'react-virtuoso';
import { useTheme } from '@mui/material/styles';

// material-ui
import {
  Box,
  Checkbox,
  Divider,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableSortLabel,
  TableRow,
  Grid,
  Dialog,
  DialogTitle,
  Typography,
  DialogContent,
  Stack,
  Button,
  IconButton,
  Tooltip,
  Chip,
  Avatar,
  Autocomplete,
  Tab,
  Tabs,
  Paper,
  FormControl,
  OutlinedInput,
  InputAdornment,
  Badge,
  TextField
} from '@mui/material';
import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import dayjs from 'dayjs';
var utc = require('dayjs/plugin/utc');
dayjs.extend(utc);
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateRangePicker } from 'mui-daterange-picker';
import {
  addDays,
  addMonths,
  addWeeks,
  // addYears,
  endOfMonth,
  endOfWeek,
  // endOfYear,
  startOfMonth,
  startOfWeek
  // startOfYear,
} from 'date-fns';
import { visuallyHidden } from '@mui/utils';
import { FilterList } from '@mui/icons-material';

// project imports
import { fetchorderdetails, fetchCount, fetchAppLocations } from '../api/api';
import MainCard from 'components/MainCard';
import { CSVExport, TableRowSelection } from 'components/third-party/ReactTable';
import Loader from 'components/Loader';

function descendingComparator(a, b, orderBy) {
  if (b[orderBy] < a[orderBy]) {
    return -1;
  }
  if (b[orderBy] > a[orderBy]) {
    return 1;
  }
  return 0;
}

function getComparator(order, orderBy) {
  return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
}

function stableSort(array, comparator) {
  const stabilizedThis = array.map((el, index) => [el, index]);
  stabilizedThis.sort((a, b) => {
    const order = comparator(a[0], b[0]);
    if (order !== 0) return order;
    return a[1] - b[1];
  });
  return stabilizedThis.map((el) => el[0]);
}
function formatNumberToRupees(value) {
  return new Intl.NumberFormat('en-IN', {
    style: 'currency',
    currency: 'INR',
    minimumFractionDigits: 2
  }).format(value);
}
const headCells = [
  {
    id: 'sno',
    disablePadding: false,
    label: '#'
  },
  {
    id: 'tenantname',
    disablePadding: false,
    label: 'Client'
  },

  {
    id: 'Pickup loco',
    disablePadding: false,
    label: 'Pickup'
  },
  {
    id: 'Delivery loco',
    disablePadding: false,
    label: 'Drop'
  },
  {
    id: 'order status',
    disablePadding: false,
    label: 'status'
  },
  {
    id: 'assigned',
    disablePadding: false,
    label: 'assigned'
  },
  {
    id: 'Accepted',
    disablePadding: false,
    label: 'Accepted'
  },
  {
    id: 'arrived',
    disablePadding: false,
    label: 'arrived'
  },
  {
    id: 'picked',
    disablePadding: false,
    label: 'picked'
  },
  {
    id: 'Delivered',
    disablePadding: false,
    label: 'Delivered'
  },
  {
    id: 'cancelled',
    disablePadding: false,
    label: 'cancelled'
  },
  {
    id: ' notes',
    disablePadding: false,
    label: 'NOTES'
  },
  // {
  //   id: "rider",
  //   disablePadding: false,
  //   label: "rider",
  // },
  {
    id: 'kms',
    disablePadding: false,
    label: 'KMS'
  },
  {
    id: 'charges',
    disablePadding: false,
    label: 'Charges',
    numeric: true
  }
];

// ==============================|| MUI TABLE - ENHANCED ||============================== //
const tabContent = ['Delivered', 'Pending', 'Cancelled'];
export default function ordersDetails() {
  const textFieldRef = useRef(null);
  const [order, setOrder] = useState('asc');
  const [orderBy, setOrderBy] = useState('calories');
  const [selected, setSelected] = useState([]);
  const [page, setPage] = useState(0);
  const [dense] = useState(false);
  const [rowsPerPage, setRowsPerPage] = useState(20);
  const [selectedValue, setSelectedValue] = useState([]);
  const [locaName, setLocoName] = useState('All');
  const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
  const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
  const [open, setOpen] = useState(false);
  const [dateselect, setDateselect] = useState('select');
  const [tabstatus1, setTabstatus1] = useState('Today');
  const [datestatus, setDatestatus] = useState('Today');
  const [totalCharge, settotalCharge] = useState(0);
  const [totalAmount, settotalAmount] = useState(0);
  const [appId, setAppId] = useState(-1);
  const [value, setValue] = useState(0);
  const [tabvalue, setTabvalue] = useState(0);
  const [tabstatus, setTabstatus] = useState('Delivered');
  const [deliCount, setDeliCount] = useState(0);
  const [pendCount, setPendCount] = useState(0);
  const [cancelCount, setCancelCount] = useState(0);
  const [searchword, setSearchword] = useState('');
  const [count, setCount] = useState(0);
  const theme = useTheme();

  // ==============================|| textFieldRef  (cmd+k)||============================== //
  useEffect(() => {
    const handleKeyPress = (event) => {
      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
        event.preventDefault();

        textFieldRef.current.focus();
      }
      if (event.key === 'Escape' && document.activeElement === textFieldRef.current) {
        // Remove focus from the TextField
        textFieldRef.current.blur();
      }
    };

    document.addEventListener('keydown', handleKeyPress);

    return () => {
      document.removeEventListener('keydown', handleKeyPress);
    };
  }, []);

  const handleChangetab = (e, i) => {
    setTabvalue(i);
    if (i === 0) setTabstatus('Delivered');

    if (i === 1) setTabstatus('Pending');
    if (i === 2) setTabstatus('Cancelled');
    console.log(i);
  };

  // ==============================|| fetchorderdetails (orders)||============================== //

  const {
    isLoading: isLoadingOrderDetails,
    isError: isErrorOrderDetails, //true or false
    data: rows,
    error: orderDetailsError
  } = useQuery({
    queryKey: [tabvalue, appId, startdate, enddate],
    queryFn: fetchorderdetails
  });

  // ==============================|| calculate||============================== //
  const calculate = () => {
    let calculatedTotalCharge = 0;
    let calculatedTotalAmount = 0;
    rows &&
      rows.forEach((row) => {
        calculatedTotalCharge += row.deliverycharges;
      });
    settotalCharge(calculatedTotalCharge);
    rows &&
      rows.forEach((row) => {
        calculatedTotalAmount += row.deliveryamt;
      });
    console.log('calculatedTotalAmount', calculatedTotalAmount);
    settotalAmount(calculatedTotalAmount);
  };
  useEffect(() => {
    calculate();
    rows && setRowsPerPage(rows.length + 1);
    rows && setCount(rows.length);
  }, [rows]);
  // ==============================|| fetchOrdersCount (orders)||============================== //

  const {
    isLoading: isLoadingOrderCount,
    isError: isErrorOrderCount, //true or false
    data: countData,
    error: orderCountError
  } = useQuery({
    queryKey: [startdate, enddate],
    queryFn: fetchCount
  });
  useEffect(() => {
    if (countData) {
      setDeliCount(countData.deliveredCount);
      setPendCount(countData.pendingCount);
      setCancelCount(countData.cancelledCount);
    }
  }, [fetchCount, startdate, enddate]);
  // ==============================|| fetchAppLocations ||============================== //

  const {
    isLoading: isLoadingLocations,
    isError: isErrorLocations, //true or false
    data: locations,
    error: locationsError
  } = useQuery({
    queryKey: [appId],
    queryFn: fetchAppLocations
  });
  if (isLoadingOrderDetails || isLoadingLocations || isLoadingOrderCount) return <Loader />;
  if (isErrorOrderDetails) return 'An error has occurred:(isErrorOrderDetails) ' + orderDetailsError.message;
  if (isErrorOrderCount) return 'An error has occurred:(isErrorOrderCount) ' + orderCountError.message;
  if (isErrorLocations) return 'An error has occurred:(isErrorlocations) ' + locationsError.message;

  const handleRequestSort = (event, property) => {
    const isAsc = orderBy === property && order === 'asc';
    setOrder(isAsc ? 'desc' : 'asc');
    setOrderBy(property);
  };
  const filteredOrders = rows.filter((row) =>
    row.orderstatus == ''
      ? row.orderstatus.toLowerCase().includes(searchword.toLowerCase())
      : row.orderstatus.toLowerCase().includes(searchword.toLowerCase()) ||
        row.ordernotes.toLowerCase().includes(searchword.toLowerCase()) ||
        row.tenantname.toLowerCase().includes(searchword.toLowerCase()) ||
        row.orderid.toLowerCase().includes(searchword.toLowerCase()) ||
        row.pickupcustomer.toLowerCase().includes(searchword.toLowerCase()) ||
        row.pickupcontactno.toLowerCase().includes(searchword.toLowerCase()) ||
        row.pickuplocation.toLowerCase().includes(searchword.toLowerCase()) ||
        row.deliverycustomer.toLowerCase().includes(searchword.toLowerCase()) ||
        row.deliverycontactno.toLowerCase().includes(searchword.toLowerCase()) ||
        row.deliverylocation.toLowerCase().includes(searchword.toLowerCase()) ||
        row.ridername.toLowerCase().includes(searchword.toLowerCase())
  );
  // to download ex format filtered data
  const csvData = filteredOrders.map((order) => ({
    tenantname: order.tenantname,
    tenantcity: order.tenantcity,
    tenantcontactno: order.tenantcontactno,
    rider: order.rider,
    orderid: order.orderid,
    orderdate: order.orderdate,
    deliverydate: order.deliverydate,
    orderstatus: order.orderstatus,
    deliverystatus: order.deliverystatus,
    ordernotes: order.ordernotes,
    kms: order.kms,
    actualkms: order.actualkms,
    assigntime: order.assigntime,
    starttime: order.starttime,
    arrivaltime: order.arrivaltime,
    pickuptime: order.pickuptime,
    deliverytime: order.deliverytime,
    canceltime: order.canceltime,
    deliverycharge: order.deliverycharge,
    deliveryamt: order.deliveryamt,
    pickupcustomer: order.pickupcustomer,
    pickupcontactno: order.pickupcontactno,
    pickupaddress: order.pickupaddress,
    pickupsuburb: order.pickupsuburb,
    pickupcity: order.pickupcity,
    pickuplat: order.pickuplat,
    pickuplong: order.pickuplong,
    deliverycustomer: order.deliverycustomer,
    deliverycontactno: order.deliverycontactno,
    deliveryaddress: order.deliveryaddress,
    deliverysuburb: order.deliverysuburb,
    deliverylat: order.deliverylat,
    deliverylong: order.deliverylong,
    locationname: order.locationname,
    locationsuburb: order.locationsuburb,
    locationcity: order.locationcity,
    locationcontactno: order.locationcontactno
  }));

  const handleSelectAllClick = (event) => {
    if (event.target.checked) {
      const newSelectedId = rows.map((n) => n.name);
      setSelected(newSelectedId);
      return;
    }
    setSelected([]);
  };

  const handleClick = (event, name) => {
    const selectedIndex = selected.indexOf(name);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, name);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
    }
    const selectedRowData = rows.filter((row) => newSelected.includes(row.name.toString()));
    setSelectedValue(selectedRowData);
    setSelected(newSelected);
  };

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event?.target.value, 10));
    setPage(0);
  };

  const isSelected = (name) => selected.indexOf(name) !== -1;

  // Avoid a layout jump when reaching the last page with empty rows.
  const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;

  function formatDate(dateString) {
    const date = dayjs(dateString);
    const formattedDate = date.format('DD/MM/YYYY ');
    return formattedDate;
  }
  function formatTime(dateString) {
    const date = dayjs(dateString);
    const formattedDate = date.format(' hh:mm A');
    return formattedDate;
  }
  return (
    <>
      <TitleCard title="Orders Details" />

      <Paper content={false} sx={{ border: '1px solid #eeeeee', borderBottom: 'none' }}>
        <Grid container sx={{ display: 'flex', alignItems: 'center', m: 2 }}>
          <Grid item xs={4}>
            {' '}
            <Stack direction="column" alignItems="flex-start" spacing={1}>
              {startdate && enddate && (
                <Stack direction="row" spacing={2}>
                  <Badge
                    badgeContent={`${filteredOrders.length}`}
                    max={`${count}`}
                    color="primary"
                    sx={{
                      bgcolor: '#f3e5f5',
                      p: 0.2,
                      borderRadius: '3px',
                      color: '#7b1fa2'
                    }}
                  >{`Orders-${datestatus}`}</Badge>

                  <Chip
                    label={
                      <Typography noWrap color="secondary">
                        {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
                      </Typography>
                    }
                    variant="combined"
                    color="warning"
                    size="small"
                  />
                </Stack>
              )}
              {(!startdate || !enddate) && (
                <>
                  <Stack direction="row" spacing={2}>
                    <Chip label="Orders-All" color="primary" variant="light" size="small" />
                    {/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
                  </Stack>
                </>
              )}
            </Stack>
          </Grid>
          <Grid item xs={8}>
            <Stack
              sx={{
                display: 'flex',
                flexDirection: { md: 'row', xs: 'column' },
                justifyContent: 'end',
                alignItems: 'center',
                marginRight: '25px'
              }}
            >
              <FormControl sx={{ width: 250 }}>
                <OutlinedInput
                  inputRef={textFieldRef}
                  aria-describedby="header-search-text"
                  inputProps={{
                    'aria-label': 'weight'
                  }}
                  sx={{ background: 'white' }}
                  size="large"
                  id="header-search"
                  placeholder="Search (ctrl+k)"
                  value={searchword}
                  onChange={(e) => {
                    setSearchword(e.target.value);
                  }}
                  autoComplete="off"
                  startAdornment={
                    <InputAdornment position="start" sx={{ mr: -0.5 }}>
                      <SearchOutlined />
                    </InputAdornment>
                  }
                  endAdornment={
                    <Tooltip title="clear">
                      <IconButton
                        sx={{ visibility: searchword ? 'visible' : 'hidden' }}
                        onClick={() => {
                          setSearchword('');
                          // setPages(1);
                          // fetchCustomersList(1);
                        }}
                      >
                        <ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
                      </IconButton>
                    </Tooltip>
                  }
                />
              </FormControl>

              <Tooltip title="Order Filter">
                <IconButton
                  color="secondary"
                  variant="light"
                  sx={{
                    color: 'text.primary',
                    bgcolor: 'grey.200',
                    mx: 2
                  }}
                  aria-haspopup="true"
                  onClick={() => setOpen(true)}
                >
                  <FilterList />
                </IconButton>
              </Tooltip>

              <CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
            </Stack>
          </Grid>
        </Grid>
        {/* <Box sx={{ bgcolor: "#eeeeee" }}>
            <Stack
              alignItems="center"
              justifyContent="end"
              direction="row"
              sx={{
                p: 2,
                width: "100%",
              }}
            >
              <Tabs
                value={tabvalue}
                onChange={handleChangetab}
                variant="scrollable"
                scrollButtons="auto"
              >
                <Tab
                  label="Delivered"
                  icon={
                    <Chip
                      label={countData.deliveredCount}
                      color="success"
                      variant="light"
                      size="small"
                    />
                  }
                  iconPosition="end"
                />
                <Tab
                  label="Pending"
                  icon={
                    <Chip
                      label={countData.pendingCount}
                      color="warning"
                      variant="light"
                      size="small"
                    />
                  }
                  iconPosition="end"
                />

                <Tab
                  label="Cancelled"
                  icon={
                    <Chip
                      label={countData.cancelledCount}
                      color="error"
                      variant="light"
                      size="small"
                    />
                  }
                  iconPosition="end"
                />
              </Tabs>

              <FormControl
                sx={{ width: 250, display: { xs: "none", md: "flex" } }}
              >
                <OutlinedInput
                  sx={{ background: "white" }}
                  size="large"
                  id="header-search"
                  startAdornment={
                    <InputAdornment position="start" sx={{ mr: -0.5 }}>
                      <SearchOutlined />
                    </InputAdornment>
                  }
                  aria-describedby="header-search-text"
                  inputProps={{
                    "aria-label": "weight",
                  }}
                  placeholder="Search"
                  value={searchword}
                  onChange={(e) => {
                    setSearchword(e.target.value);
                  }}
                  autoComplete="off"
                />
              </FormControl>
            </Stack>
          </Box> */}
      </Paper>
      <MainCard content={false}>
        <TableContainer
          sx={{
            minHeight: 'auto',
            maxHeight: '67vh',
            overflow: 'auto',
            '&::-webkit-scrollbar': {
              width: '5px', // Width of vertical scrollbar
              height: '2px' // Height of horizontal scrollbar
            },
            '&::-webkit-scrollbar-thumb': {
              backgroundColor: '#65387A' // Color of the scrollbar thumb
            }
          }}
        >
          <Table stickyHeader aria-label="sticky table">
            <TableHead
              sx={{
                '& th': {
                  borderTop: `1px solid ${theme.palette.divider}`,
                  borderBottom: `2px solid ${theme.palette.divider} !important`
                }
              }}
            >
              <TableRow>
                {headCells.map((column) => (
                  <TableCell sx={{ position: 'sticky !important' }} key={column.id}>
                    {column.label}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredOrders.length == 0 && (
                <>
                  <TableCell colSpan={13}>
                    <Stack width={'100%'} direction={'row'} justifyContent={'center'}>
                      <Empty />
                    </Stack>
                  </TableCell>
                </>
              )}
              {stableSort(filteredOrders, getComparator(order, orderBy))
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map((row, index) => {
                  if (typeof row === 'number') return null;
                  const isItemSelected = isSelected(row.name);
                  const labelId = `enhanced-table-checkbox-${index}`;
                  console.log('rows.length', rows.length);
                  return (
                    filteredOrders.length !== 0 && (
                      <TableRow
                        hover
                        // onClick={(event) =>
                        //   handleClick(event, row.name)
                        // }
                        role="checkbox"
                        aria-checked={isItemSelected}
                        tabIndex={-1}
                        key={row.name}
                        selected={isItemSelected}
                      >
                        {/* <TableCell sx={{ pl: 3 }} padding="checkbox">
                                    <Checkbox
                                      color="primary"
                                      checked={isItemSelected}
                                      inputProps={{
                                        "aria-labelledby": labelId,
                                      }}
                                    />
                                  </TableCell> */}
                        <TableCell sx={{ width: '10px' }}>{index + 1}</TableCell>

                        <TableCell
                          sx={{
                            textAlign: 'start'
                          }}
                        >
                          {row.tenantname}
                          <Typography variant="body2" noWrap>
                            {row.orderid}
                          </Typography>
                          <Typography noWrap sx={{ fontSize: '11px' }}>
                            {dayjs(row.orderdate).utc().format('DD/MM/YYYY')}
                          </Typography>
                          <Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
                            {dayjs(row.orderdate).utc().format('hh:mm A')}
                          </Typography>
                        </TableCell>
                        <TableCell align="left">
                          <Stack direction={'row'} spacing={1}>
                            <Stack direction="column">
                              <Typography variant="caption">{row.pickupcustomer}</Typography>
                              <Typography variant="caption" color="textSecondary">
                                {row.pickupcontactno}
                              </Typography>
                              <Tooltip title={row.Pickupaddress}>
                                <Typography variant="caption" color="textSecondary" sx={{ cursor: 'pointer' }}>
                                  {row.pickupsuburb || row.pickuplocation || row.Pickupaddress.slice(0, 20)}
                                </Typography>
                              </Tooltip>
                            </Stack>
                          </Stack>
                        </TableCell>
                        <TableCell align="left">
                          <Stack direction={'row'} spacing={1}>
                            <Stack direction="column">
                              <Typography variant="caption">{row.deliverycustomer}</Typography>
                              <Typography variant="caption" color="textSecondary">
                                {row.deliverycontactno}
                              </Typography>
                              <Tooltip title={row.deliveryaddress}>
                                <Typography variant="caption" color="textSecondary" sx={{ cursor: 'pointer' }}>
                                  {/* {row.Pickupaddress.slice(0, 20)} */}
                                  {row.deliverysuburb || row.deliverylocation || row.deliveryaddress.slice(0, 20)}
                                </Typography>
                              </Tooltip>
                            </Stack>
                          </Stack>
                        </TableCell>
                        <TableCell align="left">
                          {row.orderstatus == '' ? (
                            <Stack direction="row">
                              {row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" />}
                              {row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
                              {row.orderstatus === 'accepted' && (
                                <Chip
                                  label="Accepted"
                                  size="small"
                                  sx={{
                                    bgcolor: `theme.palette.chip.accept`,
                                    color: 'white'
                                  }}
                                />
                              )}
                              {row.orderstatus === 'arrived' && (
                                <Chip
                                  label="Arrived"
                                  size="small"
                                  sx={{
                                    bgcolor: theme.palette.chip.arrive,
                                    color: 'white'
                                  }}
                                />
                              )}
                              {row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" />}
                              {row.orderstatus === 'delivered' && <Chip label="Delivered" color="success" size="small" />}

                              {row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
                            </Stack>
                          ) : (
                            <Stack direction="row">
                              {row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" />}
                              {row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
                              {row.orderstatus === 'accepted' && (
                                <Chip label="Accepted" size="small" sx={{ bgcolor: '#01579b', color: 'white' }} />
                              )}
                              {row.orderstatus === 'arrived' && (
                                <Chip label="Arrived" size="small" sx={{ bgcolor: '#009688', color: 'white' }} />
                              )}
                              {row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" />}
                              {row.orderstatus === 'delivered' && <Chip label="Delivered" color="success" size="small" />}

                              {row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
                            </Stack>
                          )}
                        </TableCell>
                        <TableCell align="left">
                          <Typography variant="h5" sx={{ fontSize: '11px' }} display="block">
                            {row.ridername}
                          </Typography>
                          <Typography noWrap sx={{ fontSize: '11px' }}>
                            {/* {dayjs(row.pending).format('DD/MM/YYYY')} */}
                            {row.assigntime === '' ? '' : formatDate(row.assigntime)}
                          </Typography>
                          <Typography noWrap sx={{ fontSize: '11px' }}>
                            {row.assigntime === '' ? '' : formatTime(row.assigntime)}
                          </Typography>
                        </TableCell>
                        <TableCell align="left">
                          {' '}
                          <Typography noWrap sx={{ fontSize: '11px' }}>
                            {row.starttime === '' ? '' : formatDate(row.starttime)}
                          </Typography>
                          <Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
                            {row.starttime === '' ? '' : formatTime(row.starttime)}
                          </Typography>
                        </TableCell>
                        <TableCell align="left">
                          {' '}
                          <Typography noWrap sx={{ fontSize: '11px' }}>
                            {row.arrivaltime === '' ? '' : formatDate(row.arrivaltime)}
                          </Typography>
                          <Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
                            {row.arrivaltime === '' ? '' : formatTime(row.arrivaltime)}
                          </Typography>
                        </TableCell>
                        <TableCell align="left">
                          {' '}
                          <Typography noWrap sx={{ fontSize: '11px' }}>
                            {row.pickuptime === '' ? '' : formatDate(row.pickuptime)}
                          </Typography>
                          <Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
                            {row.pickuptime === '' ? '' : formatTime(row.pickuptime)}
                          </Typography>
                        </TableCell>
                        <TableCell align="left">
                          {' '}
                          <Typography noWrap sx={{ fontSize: '11px' }}>
                            {row.deliverytime === '' ? '' : formatDate(row.deliverytime)}
                          </Typography>
                          <Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
                            {row.deliverytime === '' ? '' : formatTime(row.deliverytime)}
                          </Typography>
                        </TableCell>
                        <TableCell align="left">
                          {' '}
                          <Typography noWrap sx={{ fontSize: '11px' }}>
                            {row.canceltime === '' ? '' : formatDate(row.canceltime)}
                          </Typography>
                          <Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
                            {row.canceltime === '' ? '' : formatTime(row.canceltime)}
                          </Typography>
                        </TableCell>

                        <TableCell align="left">
                          <Typography variant="caption">{row.ordernotes}</Typography>
                        </TableCell>

                        <TableCell align="left">
                          <Stack direction={'column'} spacing={1}>
                            <Tooltip title=" KMS" placement="top">
                              <Chip
                                label={
                                  row.orderstatus === 'cancelled' || row.orderstatus === 'cancelled' || row.kms == ''
                                    ? parseInt(0).toFixed(1)
                                    : parseInt(row.kms).toFixed(1)
                                }
                                size="small"
                                variant="light"
                                color="error"
                              />
                            </Tooltip>
                            <Tooltip title="Actual KMS">
                              <Chip
                                label={
                                  row.orderstatus === 'cancelled' ||
                                  row.orderstatus === 'cancelled' ||
                                  row.actualkms == '' ||
                                  row.actualkms == null
                                    ? parseInt(0).toFixed(1)
                                    : parseInt(row.actualkms).toFixed(1)
                                }
                                size="small"
                                color="success"
                                variant="light"
                              />
                            </Tooltip>
                          </Stack>
                        </TableCell>
                        <TableCell align="right">
                          <Stack direction={'column'} spacing={1}>
                            <Tooltip title=" Delivery Charge" placement="top">
                              <Chip
                                label={
                                  row.orderstatus === 'cancelled' || row.deliverycharges == '' ? `₹ ${0}.00` : `₹ ${row.deliverycharges}.00`
                                }
                                size="small"
                                variant="light"
                                color="error"
                              />
                            </Tooltip>
                            <Tooltip title="Delivery Amount">
                              <Chip
                                label={row.deliveryamt == '' ? `₹ ${0}.00` : `₹ ${row.deliveryamt}.00`}
                                size="small"
                                color="success"
                                variant="light"
                              />
                            </Tooltip>
                          </Stack>
                        </TableCell>
                      </TableRow>
                    )
                  );
                })}
            </TableBody>
          </Table>
        </TableContainer>
        <Divider />
        {/* table pagination */}
        {/* <TablePagination
          rowsPerPageOptions={[10, 25, 100]}
          component="div"
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
        /> */}
      </MainCard>
      <Stack
        direction={'row'}
        sx={{
          display: 'flex',
          justifyContent: 'end',
          bgcolor: '#eeeeee'
        }}
      >
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'end',
            margin: '10px '
          }}
        >
          <Typography variant="h5">Total Charges :</Typography>
          <Tooltip title="Total Charges">
            <Chip label={formatNumberToRupees(totalCharge)} size="medium" color="error" variant="filled" sx={{ ml: 5, mr: 1.5 }} />
          </Tooltip>
          {/* <Typography variant="h5" sx={{ ml: 5, mr: 1.5 }}>
                          {formatNumberToRupees(total)}
                        </Typography> */}
        </div>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'end',
            margin: '10px '
          }}
        >
          <Typography variant="h5">Total Amount :</Typography>
          <Tooltip title="Total Charge">
            <Chip label={formatNumberToRupees(totalAmount)} size="medium" color="success" variant="filled" sx={{ ml: 5, mr: 1.5 }} />
          </Tooltip>
        </div>
      </Stack>
      <Dialog open={open}>
        <DialogTitle align="left">
          <Typography variant="h4">Select Filter Options</Typography>
        </DialogTitle>
        <DialogContent sx={{ width: '100%' }} className="datedialog">
          <DateRangePicker
            open={open}
            toggle={() => setOpen(!open)}
            id="daterange1"
            onChange={(range) => {
              if (range.label === 'All') {
                setDateselect('all');
                setStartdate('');
                setEnddate('');

                setOpen(false);
              } else {
                setDateselect('select');
                setStartdate(dayjs(range.startDate).format('YYYY-MM-DD'));
                setEnddate(dayjs(range.endDate).format('YYYY-MM-DD'));
                if (range.label) {
                  setDatestatus(range.label);
                } else {
                  setDatestatus('');
                }
              }
              console.log(range);
            }}
            definedRanges={[
              {
                label: 'Today',
                startDate: new Date(),
                endDate: new Date()
              },
              {
                label: 'Yesterday',
                startDate: addDays(new Date(), -1),
                endDate: addDays(new Date(), -1)
              },
              {
                label: 'Tomorrow',
                startDate: addDays(new Date(), +1),
                endDate: addDays(new Date(), +1)
              },
              {
                label: 'This Week',
                startDate: startOfWeek(new Date()),
                endDate: endOfWeek(new Date())
              },
              {
                label: 'Last Week',
                startDate: startOfWeek(addWeeks(new Date(), -1)),
                endDate: endOfWeek(addWeeks(new Date(), -1))
              },
              {
                label: 'Last 7 Days',
                startDate: addWeeks(new Date(), -1),
                endDate: new Date()
              },
              {
                label: 'This Month',
                startDate: startOfMonth(new Date()),
                endDate: endOfMonth(new Date())
              },
              {
                label: 'Last Month',
                startDate: startOfMonth(addMonths(new Date(), -1)),
                endDate: endOfMonth(addMonths(new Date(), -1))
              },
              {
                label: 'All',
                startDate: new Date(),
                endDate: addDays(new Date(), -1)
              }
            ]}
          />
        </DialogContent>
        <Stack direction="row" justifyContent="flex-end" sx={{ width: '100%', p: 2 }}>
          <Button variant="contained" size="small" onClick={() => setOpen(false)}>
            ok
          </Button>
        </Stack>
      </Dialog>
    </>
  );
}
