import PropTypes from "prop-types";
import { React, useState, useEffect, useRef } from "react";
import TitleCard from "pages/titleCard";
import axios from "axios";
import { useQuery } from "@tanstack/react-query";
import { fetchRidersSummary, fetchLocations } from "pages/api/api";
import TaskAltIcon from "@mui/icons-material/TaskAlt";
import HighlightOffIcon from "@mui/icons-material/HighlightOff";
import { Empty } from "antd";

// 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,
  TextField,
  Collapse,
} from "@mui/material";
import ClearIcon from "@mui/icons-material/Clear";
import { SearchOutlined, MoreOutlined } from "@ant-design/icons";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { useTheme } from "@mui/material/styles";

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, CheckOutlined } from "@mui/icons-material";

// project imports
import MainCard from "components/MainCard";
import {
  CSVExport,
  TableRowSelection,
} from "components/third-party/ReactTable";
import { theme } from "antd";
import Loader from "components/Loader";

// table filter
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);
}
// table header
const headCells = [
  {
    id: "s.no",
    numeric: false,
    disablePadding: true,
    label: "#",
  },
  {
    id: "rider",
    numeric: false,
    disablePadding: false,
    label: "Rider",
  },
  {
    id: "deliveries",
    numeric: false,
    disablePadding: false,
    label: "Ordered",
  },

  {
    id: "assingned",
    numeric: false,
    disablePadding: false,
    label: "Assingned",
  },
  {
    id: "accepted",
    numeric: false,
    disablePadding: false,
    label: "Accepted",
  },
  {
    id: "picked",
    numeric: false,
    disablePadding: false,
    label: "Picked",
  },
  {
    id: "delivered",
    numeric: false,
    disablePadding: false,
    label: "Delivered",
  },
  {
    id: "kms",
    numeric: "center",
    disablePadding: false,
    label: " Kms/Actual Kms",
  },
  {
    id: "pod",
    numeric: "center",
    disablePadding: false,
    label: "POD / PLA",
  },

  {
    id: "charges",
    numeric: "center",
    disablePadding: false,
    label: "Charges",
  },
  {
    id: "action",
    numeric: "center",
    disablePadding: true,
    label: "Action",
  },
];

// ==============================|| MUI TABLE - HEADER ||============================== //

function EnhancedTableHead({
  onSelectAllClick,
  order,
  orderBy,
  numSelected,
  rowCount,
  onRequestSort,
}) {
  const createSortHandler = (property) => (event) => {
    onRequestSort(event, property);
  };

  return (
    <TableHead>
      <TableRow>
        {/* <TableCell padding="checkbox" sx={{ pl: 3 }}>
          <Checkbox
            color="primary"
            indeterminate={numSelected > 0 && numSelected < rowCount}
            checked={rowCount > 0 && numSelected === rowCount}
            onChange={onSelectAllClick}
            inputProps={{
              "aria-label": "select all desserts",
            }}
          />
        </TableCell> */}
        {headCells.map((headCell) => (
          <TableCell
            key={headCell.id}
            align={
              headCell.numeric == "center"
                ? "center"
                : "true"
                ? "left"
                : "right"
            }
            padding={headCell.disablePadding ? "none" : "normal"}
            sortDirection={orderBy === headCell.id ? order : undefined}
          >
            {/* <TableSortLabel
              active={orderBy === headCell.id}
              direction={orderBy === headCell.id ? order : "asc"}
              onClick={createSortHandler(headCell.id)}
            > */}
            {headCell.label}
            {/* {orderBy === headCell.id ? (
                <Box component="span" sx={visuallyHidden}>
                  {order === "desc" ? "sorted descending" : "sorted ascending"}
                </Box>
              ) : null}
            </TableSortLabel> */}
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}

// ==============================|| MUI TABLE - ENHANCED ||============================== //

export default function RidersSummary() {
  // const [rows, setRows] = useState([]);
  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(10);
  const [selectedValue, setSelectedValue] = useState([]);
  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 [total, settotal] = useState(0);
  const [id, setid] = useState(-1);
  const [searchword, setSearchword] = useState("");
  const [tenantData, setTenantData] = useState([]);
  const [openRow, setOpenRow] = useState(null); // Initially no row is open
  const textFieldRef = useRef(null);

  const [appId, setAppId] = useState(0);
  const [locaName, setLocoName] = useState("All");
  const [locations, setLocations] = useState("All");

  /* ============================================= || handleKeyPress (ctrl+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);
    };
  }, []);

  // ==============================|| fetchAppLocations ||============================== //
  const fetchAppLocations = async () => {
    try {
      const locationRes = await axios.get(
        `${process.env.REACT_APP_URL}/utils/getapplocations`
      );
      const updatedLocations = [
        ...locationRes.data.details,
        { locationname: "All", applocationid: 0 }, // Add your new object here
      ];
      console.log("fetchAppLocations", updatedLocations);
      setLocations(updatedLocations);
    } catch (err) {
      console.log("locationRes", err);
    }
  };
  useEffect(() => {
    fetchAppLocations();
  }, []);

  // ==============================|| fetchRidersSummary (riders summary)||============================== //

  const {
    isLoading: isLoadingReports,
    isError: isErrorReports, //true or false
    data: rows,
    error: reportsError,
  } = useQuery({
    queryKey: [appId, startdate, enddate],
    queryFn: fetchRidersSummary,
  });
  // ==============================|| calculate||============================== //

  const calculate = async () => {
    let calculatedTotal = 0;
    rows &&
      rows.forEach((row, index) => {
        console.log(index, row.Deliveryamt);
        calculatedTotal += row.Deliveryamt;
      });
    // Update the state after the calculation is done
    settotal(calculatedTotal);
    console.log("calculatedTotal", calculatedTotal);
  };
  useEffect(() => {
    calculate();
  }, [rows]);

  if (isLoadingReports) return <Loader />;
  if (isErrorReports)
    return "An error has occurred:(isErrorReports) " + reportsError.message;

  // ==============================|| fetchTenantSummary by rider (rider summary)||============================== //
  const fetchTenantSummary = async (userid) => {
    try {
      const tenantRes = await axios.get(
        `${process.env.REACT_APP_URL}/deliveries/getreportsummary/?&fromdate=${startdate}&todate=${enddate}&userid=${userid}`
      );
      console.log("tenantRes", tenantRes.data.details);
      setTenantData(tenantRes.data.details);
    } catch (error) {
      console.log("tenantRes", error);
    }
  };

  const handleRequestSort = (event, property) => {
    const isAsc = orderBy === property && order === "asc";
    setOrder(isAsc ? "desc" : "asc");
    setOrderBy(property);
  };

  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;

  return (
    <>
      <TitleCard title="Riders Summary" />{" "}
      <MainCard
        content={false}
        sx={{ mt: "10px" }}
        // ==============================|| title||============================== //

        title={
          <Stack direction="column" alignItems="flex-start" spacing={1}>
            {startdate && enddate && (
              <Stack direction="row" spacing={2}>
                <Chip
                  label={`Orders-${datestatus}`}
                  color="primary"
                  variant="light"
                  size="small"
                />
                <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>
        }
        // ==============================|| secondary, autocomplete, filter||============================== //

        secondary={
          <div style={{ display: "flex", flexDirection: "row" }}>
            <Autocomplete
              disablePortal
              id="combo-box-demo"
              options={locations}
              getOptionLabel={(option) => `${option.locationname}`}
              sx={{ width: 300 }}
              onChange={(event, value, reason) => {
                if (reason === "clear") {
                  setAppId(0);
                  setLocoName("All");
                } else {
                  console.log(value);
                  setAppId(value.applocationid);
                  setLocoName(value.locationname);
                }
              }}
              renderInput={(params) => (
                <TextField {...params} label={locaName} />
              )}
            />

            <Tooltip title="Order Filter">
              <IconButton
                // size='large'

                color="secondary"
                variant="light"
                sx={{
                  color: "text.primary",
                  bgcolor: "grey.200",
                  display: { xs: "none", md: "flex" },
                  ml: 2,
                }}
                // aria-label="open profile"
                // ref={anchorRef}
                // aria-controls={open ? 'profile-grow' : undefined}
                aria-haspopup="true"
                // onClick={handleToggle}

                onClick={() => setOpen(true)}
              >
                <FilterList />
              </IconButton>
            </Tooltip>
          </div>
        }
      >
        <TableRowSelection selected={selected.length} />
        {/* table */}
        <TableContainer
          sx={{
            overflow: "auto",
            "&::-webkit-scrollbar": {
              width: "2px", // Width of vertical scrollbar
              height: "2px", // Height of horizontal scrollbar
            },
            "&::-webkit-scrollbar-thumb": {
              backgroundColor: "#65387A", // Color of the scrollbar thumb
            },
          }}
        >
          <Table
            // sx={{ minWidth: 750 }}
            aria-labelledby="tableTitle"
            size={dense ? "small" : "medium"}
          >
            <EnhancedTableHead
              numSelected={selected.length}
              order={order}
              orderBy={orderBy}
              onSelectAllClick={handleSelectAllClick}
              onRequestSort={handleRequestSort}
              rowCount={rows.length}
            />
            {/* ============================================ || TableBody || ============================================ */}

            <TableBody>
              {rows.length === 0 && (
                <TableRow>
                  <TableCell colSpan={11}>
                    <Stack
                      width={"100%"}
                      direction={"row"}
                      justifyContent={"center"}
                    >
                      <Empty />
                    </Stack>
                  </TableCell>
                </TableRow>
              )}

              {stableSort(rows, 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}`;

                  return (
                    rows.length !== 0 && (
                      <>
                        {/* //  ============================================ || tablerow 1 || ============================================ */}
                        <TableRow
                          hover
                          onClick={(event) => handleClick(event, row.name)}
                          role="checkbox"
                          aria-checked={isItemSelected}
                          tabIndex={-1}
                          key={row.tenantname}
                          selected={isItemSelected}
                          sx={{
                            bgcolor: openRow === row.userid ? "#e1bee7" : null,
                            "&:hover": {
                              bgcolor:
                                openRow === row.userid
                                  ? "#e1bee7!important"
                                  : null,
                            },
                            cursor: openRow === row.userid ? "pointer" : null,
                          }}
                        >
                          {/* <TableCell sx={{ pl: 3 }} padding="checkbox">
                        <Checkbox
                          color="primary"
                          checked={isItemSelected}
                          inputProps={{
                            "aria-labelledby": labelId,
                          }}
                        />
                      </TableCell> */}
                          <TableCell
                            component="th"
                            id={labelId}
                            scope="row"
                            padding="none"
                          >
                            {index + 1}
                          </TableCell>
                          <TableCell align="left">
                            <Stack direction="row" sx={{ ml: -2 }}>
                              {row.firstname}{" "}
                              {row.status == "Active" ? (
                                <TaskAltIcon
                                  fontSize="small"
                                  color="success"
                                  sx={{ ml: 1 }}
                                />
                              ) : (
                                <HighlightOffIcon
                                  fontSize="small"
                                  color="error"
                                  sx={{ ml: 1 }}
                                />
                              )}{" "}
                            </Stack>
                          </TableCell>
                          <TableCell align="left">{row.deliveries}</TableCell>
                          <TableCell align="left">{row.Assigened}</TableCell>
                          <TableCell align="left">{row.Accepted}</TableCell>
                          <TableCell align="left">{row.Picked}</TableCell>
                          <TableCell align="left">{row.delivered}</TableCell>
                          <TableCell align="left">
                            <Stack direction={"row"}>
                              <Tooltip title="kms" placement="top">
                                <Chip
                                  size="small"
                                  label={row.kms}
                                  sx={{
                                    color: "#1976d2",
                                    bgcolor: "#e3f2fd",
                                    mr: 1,
                                    border: "1px solid #1976d2",
                                    cursor: "pointer",
                                    minWidth: 80,
                                  }}
                                />
                              </Tooltip>

                              <Tooltip title="Actual kms" placement="bottom">
                                <Chip
                                  size="small"
                                  label={row.actualkms}
                                  sx={{
                                    color: "#ff8f00",
                                    bgcolor: "#ffecb3",
                                    border: "1px solid #ff8f00",
                                    cursor: "pointer",
                                    minWidth: 80,
                                  }}
                                />
                              </Tooltip>
                            </Stack>
                          </TableCell>

                          <TableCell align="center">
                            <Stack direction={"row"}>
                              <Tooltip title="Pay on Delivery" placement="top">
                                <Chip
                                  size="small"
                                  label={formatNumberToRupees(
                                    row.payondelivery
                                  )}
                                  sx={{
                                    color: "#f44336",
                                    bgcolor: "#ffcdd2",
                                    border: "1px solid #f44336",
                                    cursor: "pointer",
                                    mr: 1,
                                    minWidth: 80,
                                  }}
                                />
                              </Tooltip>
                              <Tooltip title="Pay Later" placement="bottom">
                                <Chip
                                  size="small"
                                  label={formatNumberToRupees(row.Paylater)}
                                  sx={{
                                    color: "#43a047",
                                    bgcolor: "#c8e6c9",
                                    border: "1px solid #43a047",
                                    cursor: "pointer",
                                    minWidth: 80,
                                  }}
                                />
                              </Tooltip>
                            </Stack>
                          </TableCell>
                          <TableCell align="right">
                            <Tooltip title="Total Charges" placement="top">
                              <Chip
                                size="small"
                                label={formatNumberToRupees(row.Deliveryamt)}
                                sx={{
                                  color: "primary.main",
                                  bgcolor: "#e1bee7",
                                  border: "1px solid #662582 ",
                                  cursor: "pointer",
                                  minWidth: 100,
                                }}
                              />
                            </Tooltip>
                          </TableCell>
                          <TableCell align="center">
                            <IconButton
                              aria-label="expand row"
                              size="small"
                              onClick={() => {
                                fetchTenantSummary(row.userid);
                                setOpenRow(
                                  openRow === row.userid ? null : row.userid
                                );
                              }}
                              sx={{
                                bgcolor:
                                  openRow === row.userid
                                    ? "primary.main"
                                    : null,
                                color: openRow === row.userid ? "white" : null,
                                "&:hover": {
                                  bgcolor:
                                    openRow === row.userid
                                      ? "primary.main"
                                      : "#e1bee7",
                                },
                              }}
                            >
                              <Tooltip title="View Tenants" placement="top">
                                {openRow === row.userid ? (
                                  <KeyboardArrowUpIcon />
                                ) : (
                                  <KeyboardArrowDownIcon />
                                )}
                              </Tooltip>
                            </IconButton>
                          </TableCell>
                        </TableRow>

                        {/* //  ============================================ || collapsive row || ============================================ */}
                        {openRow === row.userid && (
                          <TableRow
                            sx={{
                              bgcolor:
                                openRow === row.userid ? "#f3e5f5" : null,
                              "&:hover": {
                                bgcolor:
                                  openRow === row.userid
                                    ? "#f3e5f5!important"
                                    : null,
                              },
                              cursor: openRow === row.userid ? "pointer" : null,
                            }}
                          >
                            <TableCell
                              style={{ paddingBottom: 0, paddingTop: 0 }}
                              colSpan={15}
                            >
                              <Collapse
                                // in={openRow[row.tenantname]}
                                // in={true}
                                in={openRow === row.userid}
                                timeout="auto"
                                unmountOnExit
                              >
                                <Box sx={{ margin: 1 }}>
                                  <Typography
                                    variant="h5"
                                    gutterBottom
                                    component="div"
                                  >
                                    Tenant Summary
                                  </Typography>
                                  <Table size="small" aria-label="purchases">
                                    <TableHead
                                      sx={{
                                        bgcolor: "#f3e5f5",
                                        "&:onhover": {
                                          bgcolor: "#f3e5f5!important",
                                        },
                                      }}
                                    >
                                      <TableRow>
                                        <TableCell>#</TableCell>
                                        <TableCell>Client</TableCell>
                                        <TableCell align="left">All</TableCell>
                                        <TableCell align="left">
                                          Pending
                                        </TableCell>
                                        <TableCell align="left">
                                          Completed
                                        </TableCell>
                                        <TableCell align="left">
                                          Cancelled
                                        </TableCell>
                                        <TableCell align="center">
                                          Kms/Actual Kms
                                        </TableCell>
                                        <TableCell align="center">
                                          POD / PLA
                                        </TableCell>
                                        <TableCell align="center">
                                          Amount
                                        </TableCell>
                                      </TableRow>
                                    </TableHead>
                                    <TableBody>
                                      {tenantData.map((row, index) => (
                                        <TableRow
                                          hover
                                          onClick={(event) =>
                                            handleClick(event, row.name)
                                          }
                                          role="checkbox"
                                          aria-checked={isItemSelected}
                                          tabIndex={-1}
                                          key={row.tenantname}
                                          selected={isItemSelected}
                                        >
                                          {/* <TableCell sx={{ pl: 3 }} padding="checkbox">
  <Checkbox
    color="primary"
    checked={isItemSelected}
    inputProps={{
      "aria-labelledby": labelId,
    }}
  />
</TableCell> */}
                                          <TableCell
                                            component="th"
                                            id={labelId}
                                            scope="row"
                                            padding="none"
                                          >
                                            {index + 1}
                                          </TableCell>
                                          <TableCell align="left">
                                            <Stack
                                              direction="row"
                                              sx={{ ml: -2 }}
                                            >
                                              {row.tenantname}{" "}
                                            </Stack>
                                          </TableCell>
                                          <TableCell align="left">
                                            {row.totalorders}
                                          </TableCell>
                                          <TableCell align="left">
                                            {row.deliveriespending}
                                          </TableCell>
                                          <TableCell align="left">
                                            {row.deliveriescompleted}
                                          </TableCell>
                                          <TableCell align="left">
                                            {row.deliveriescancelled}
                                          </TableCell>
                                          <TableCell align="center">
                                            <Chip
                                              size="small"
                                              label={row.kms}
                                              sx={{
                                                color: "#1976d2",
                                                bgcolor: "#e3f2fd",
                                                mr: 1,
                                                border: "1px solid #1976d2",
                                                minWidth: 80,
                                              }}
                                            />
                                            <Chip
                                              size="small"
                                              label={row.actualkms}
                                              sx={{
                                                color: "#ff8f00",
                                                bgcolor: "#ffecb3",
                                                border: "1px solid #ff8f00",
                                                minWidth: 80,
                                              }}
                                            />
                                          </TableCell>

                                          <TableCell align="center">
                                            <Chip
                                              size="small"
                                              label={formatNumberToRupees(
                                                row.payondelivery
                                              )}
                                              sx={{
                                                color: "#f44336",
                                                bgcolor: "#ffcdd2",
                                                border: "1px solid #f44336",
                                                mr: 1,
                                                minWidth: 80,
                                              }}
                                            />
                                            <Chip
                                              size="small"
                                              label={formatNumberToRupees(
                                                row.paylater
                                              )}
                                              sx={{
                                                color: "#43a047",
                                                bgcolor: "#c8e6c9",
                                                border: "1px solid #43a047",
                                                minWidth: 80,
                                              }}
                                            />
                                          </TableCell>

                                          <TableCell align="center">
                                            <Chip
                                              size="small"
                                              label={formatNumberToRupees(
                                                row.charges
                                              )}
                                              sx={{
                                                color: "primary.main",
                                                bgcolor: "#e1bee7",
                                                border: "1px solid #662582 ",
                                                minWidth: 100,
                                              }}
                                            />
                                          </TableCell>
                                        </TableRow>
                                      ))}
                                    </TableBody>
                                  </Table>
                                </Box>
                              </Collapse>
                            </TableCell>
                          </TableRow>
                        )}
                      </>
                    )
                  );
                })}
              {emptyRows > 0 && (
                <TableRow sx={{ height: (dense ? 33 : 53) * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
          </Table>
        </TableContainer>

        <Divider />
        <Stack
          direction={"row"}
          sx={{ display: "flex", justifyContent: "end", px: 1, py: 2, mr: 10 }}
        >
          <Typography variant="h5">Total :</Typography>
          <Typography variant="h5" sx={{ ml: 5, mr: 1.5 }}>
            {formatNumberToRupees(total)}
          </Typography>
        </Stack>
        {/* table pagination */}
        {/* <TablePagination
          rowsPerPageOptions={[10, 25, 50]}
          component="div"
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onPageChange={handleChangePage}
          onRowsPerPageChange={handleChangeRowsPerPage}
        /> */}
      </MainCard>
      <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>
    </>
  );
}
