import {
  useEffect,
  useState,
  Fragment
  //  useReducer
} from 'react';
import BorderColorIcon from '@mui/icons-material/BorderColor';
import {
  // Navigate,
  // useSearchParams,
  useLocation,
  useNavigate
} from 'react-router-dom';
import axios from 'axios';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import {
  // UserOutlined,
  EnvironmentOutlined,
  EditTwoTone
  // DeleteTwoTone
} from '@ant-design/icons';
// import WomanIcon from '@mui/icons-material/Woman';
// import { Link } from 'react-router-dom';
// import SoupKitchenIcon from '@mui/icons-material/SoupKitchen';
import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
import { KeyboardArrowUp, KeyboardArrowDown } from '@mui/icons-material';

// import { PopupTransition } from 'components/@extended/Transitions';
// import { useDispatch } from 'react-redux';
// import { openSnackbar } from 'store/reducers/snackbar';
// assets
import { DeleteFilled, NotificationOutlined } from '@ant-design/icons';
var utc = require('dayjs/plugin/utc');
// import { groupBy } from "core-js/actual/array/group-by";
// import "lodash.chunk";
// var chunk = require('lodash.chunk');
import {
  Grid,
  Typography,
  Stack,
  Button as Button1,
  // Box,
  FormControl,
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableContainer,
  TableBody,
  Chip,
  Divider,
  CardActions,
  IconButton,
  Avatar,
  Dialog,
  DialogTitle,
  DialogContent,
  Checkbox,
  Tooltip,
  Button,
  Tab,
  Tabs,
  Skeleton,
  // DialogContent,
  DialogActions,
  TextField,
  CircularProgress,
  Collapse,
  Alert,
  AlertTitle,
  Link
  //  Card,
  //  CardHeader
} from '@mui/material';

import { PopupTransition } from 'components/@extended/Transitions';

// import ControlPointIcon from '@mui/icons-material/ControlPoint';
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
import MainCard from 'components/MainCard';
import Loader from 'components/Loader';
// import AlertCustomerDelete from 'sections/apps/customer/AlertCustomerDelete';
import dayjs from 'dayjs';
dayjs.extend(utc);
// import { Link as RouterLink } from 'react-router-dom';
// import PlayCircleFilled from '@mui/icons-material/PlayCircleFilled';
// import SmileFilled from '@mui/icons-material/Mood';
// import HeartFilled from '@mui/icons-material/Favorite';

import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'components/nearle_components/MobileCard';
import {
  CloseOutlined,
  WarningOutlined,
  WarningFilled
  //  PlusOutlined,
  // EyeTwoTone,
  // EditTwoTone,
  // DeleteTwoTone
} from '@ant-design/icons';
import { enqueueSnackbar } from 'notistack';

const Details = () => {
  // const [searchParams] = useSearchParams();
  const [orderarr, setOrderarr] = useState([]);
  const [loading, setLoading] = useState(true);
  const location = useLocation();
  const [orderid, setOrderid] = useState('');
  const [eventlocation, setEventlocation] = useState('');
  const [orderdate, setOrderdate] = useState('');
  const [eventname, setEventname] = useState('');
  const [open, setOpen] = useState(false);
  const [clientname, setClientname] = useState('');
  // const [duedate, setDuedate] = useState('');
  const [tenantaddress, setTenantaddress] = useState('');
  const [dialogopen, setDialogopen] = useState(false);
  const [orderstatus, setOrderstatus] = useState('');
  const [currentrole] = useState('');
  const [taxamount, setTaxamount] = useState('');
  const [subtotal, setSubtotal] = useState('');
  const [grandtotal, setGrandtotal] = useState('');
  const [venuetype, setVenuetype] = useState('');
  const [orderaddons, setOrderaddons] = useState([]);
  const [otherinstructions, setOtherinstructions] = useState('');
  const [cancelleddate, setCancelleddate] = useState('');
  const [stafflist, setStafflist] = useState([]);
  const [staffarr, setStaffarr] = useState([]);
  const [orderheaderid, setOrderheaderid] = useState('');
  const [tenantid, setTenantid] = useState('');
  const [starttime] = useState('');
  const [endtime] = useState('');
  // const [orderstatus,setOrderstatus]=useStatus('');
  const [pendingtime, setPendingtime] = useState('');
  // const [processdate,setProcessdate]=useState('');
  const [categoryarr, setcategoryarr] = useState([]);
  const [currentshiftobj, setCurrentshiftobj] = useState({
    shifts: 0,
    assigned: 0,
    remaining: 0,
    shiftid: 0,
    price: 0
  });
  const [tabstatus, setTabstatus] = useState(0);
  const { state } = useLocation();
  const [assignedpendingcount, setAssignedpendingcount] = useState('');
  // const [, forceUpdate] = useReducer(x => x + 1, 0);
  // const dispatch = useDispatch();
  const navigate = useNavigate();
  const [expandopen, setExpandopen] = useState(['', '']);
  const [startdate, setStartdate] = useState('');
  const [invoiceeligible, setInvoiceeligible] = useState(false);

  useEffect(() => {
    console.log('categoryarr');

    console.log(orderarr, eventlocation, venuetype, starttime, endtime);
    // forceUpdate();
  }, [categoryarr]);

  // const navigate = useNavigate();
  useEffect(() => {
    if (state) {
      setOrderheaderid(state.orderheaderid);
      setTenantid(state.tenantid);
    }
    console.log(state);
    // fetchroleslist(1)
    console.log(Date.now());
  }, []);
  useEffect(() => {
    if (state) {
      setOrderheaderid(state.orderheaderid);
      setTenantid(state.tenantid);
    }
    console.log(state);
    // fetchroleslist(1)
    console.log(Date.now());
  }, [state.orderheaderid, state.tenantid]);

  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));

  // const fetchorderdetails = async () => {
  //   setLoading(true);
  //   await axios
  //     .get(`${process.env.REACT_APP_URL}/orders/orderbyid/?orderheaderid=${orderheaderid}`)

  //     .then((res) => {
  //       console.log(res);

  //       setLoading(false);
  //     })
  //     .catch((err) => {
  //       console.log(err);
  //       setLoading(false);
  //     });

  // };

  const fetchorderaddons = async () => {
    setLoading(true);
    await axios
      .get(`${process.env.REACT_APP_URL2}/orders/getordersbystatus?tenantid=${tenantid}`)

      .then((res) => {
        console.log(res);
        let result = res.data.Details.find((res1) => res1.orderheaderid == orderheaderid);
        // orderheaderid
        console.log('result');

        console.log(result);
        setOrderaddons(result.orderaddons);
        setVenuetype(result.venuetype);
        setOtherinstructions(result.remarks);
        setStartdate(result.startdate);

        setClientname(result.tenantname);
        setEventlocation('');
        setTenantaddress(result.tenantaddress);
        setEventname(result.eventname);

        setOrderdate(dayjs(result.orderdate).format('MM/DD/YYYY') || '');
        setOrderid(result.orderid);
        setOrderstatus(result.orderstatus);
        setTaxamount(result.taxamount);
        setSubtotal(result.orderamount);
        setGrandtotal(result.ordervalue);
        setCancelleddate(dayjs(result.cancelled).format('MM/DD/YYYY') || '');

        // if (result.orderstatus === 'pending') {
        setPendingtime(result.pending);
        // }

        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };

  const fetchorderattires = async () => {
    setLoading(true);
    await axios
      .get(`${process.env.REACT_APP_URL2}/orders/getorderdetails?orderheaderid=${orderheaderid}`)

      .then((res) => {
        console.log('res');
        console.log(res);
        setOrderarr(res.data.Details || []);
        // let result = res.data.Details.find((res1) => res1.orderheaderid == searchParams.get('id'))
        // orderheaderid
        // console.log(result)
        // setOrderaddons(result.orderaddons);
        // setVenuetype(result.venuetype)
        // setOtherinstructions(result.remarks)
        // console.log("res");
        // let result = _.chain(res.data.Details)

        //   .groupBy("shiftid")

        //   .map((value, key) => ({shiftid:key, locationaddress: value[0].locationaddress, roles: value }))
        //   .value()

        // setcategoryarr(result);
        console.log('categoryarr');
        setcategoryarr(res.data.Details);
        console.log(res.data.Details);

        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };



  const fetchstafflist = async (odid) => {
    setLoading(true);
    try {
      // await axios.get(`${process.env.REACT_APP_URL}/orders/orderanalytics?orderdate=${chosendate}`)
      await axios
        .get(`${process.env.REACT_APP_URL2}/orders/getassignedinfo?orderdetailid=${odid}`)

        .then((res) => {
          console.log(res);
          if (res.data.status) {
            setStafflist(res.data.Details);
          }

          setLoading(false);
        })
        .catch((err) => {
          console.log(err);
          setLoading(false);
        });
    } catch (err) {
      console.log(err);
      setLoading(false);
    }
  };
  const cancelorder = async () => {
    await axios
      .put(`${process.env.REACT_APP_URL2}/orders/cancel`, {
        // "Orderheaderid": parseInt(orderheaderid),
        // "Tenantid": parseInt(tenantid),
        // "Orderstatus": "cancelled",
        // "Currentdatetime": dayjs().format('YYYY-MM-DD HH:mm:ss'),
        // "Cod": false,
        // "Remarks": "",
        orderheaderid: parseInt(orderheaderid),
        // "orderdetailid":78,
        // "shiftid":788,
        orderstatus: 'cancelled',
        cancelled: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        unserviceable: invoiceeligible ? 0 : 1
      })
      .then((res) => {
        console.log(res);
        if (res.data.status) {
          if (orderheaderid && tenantid) {
            // fetchorderdetails();
            fetchorderaddons();
            fetchorderattires();
          }
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const unassign = async (val) => {
    let obj = {
      orderheaderid: orderheaderid,
      orderprocessid: val.orderprocessid,
      orderdetailid: val.orderdetailid,
      orderstatus: 'pending',
      pending: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      // processing:0,
      // cancelled:0,
      // completed:0,
      // accepted:0,
      status: 1
    };
    console.log(obj);

    await axios
      .put(`${process.env.REACT_APP_URL2}/orders/updateprocessstatus`, obj)
      .then((res) => {
        console.log(res);
        if (res.data.message === 'Successful') {
          // if (orderheaderid && tenantid) {
          enqueueSnackbar('Role unassigned successfully', {
            variant: 'success',
            anchorOrigin: { vertical: 'top', horizontal: 'right' },
            autoHideDuration: 2000
          });
          if (currentshiftobj.assigned > currentshiftobj.shifts) {
            sendunassignnotification(val);
          }

          fetchorderaddons();
          fetchorderattires();
          setOpen(false);
          fetchassignedcount();
          dialogclose();
          setTimeout(() => {
            fetchassignedcount();
          }, 2000);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const sendunassignnotification = (val) => {
    console.log(val);
    let data2;
    let tokenarr = [val.userfcmtoken];
    let arr1 = [
      {
        notificationid: 0,
        notificationdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        Title: 'Staff Un-Asigned',
        message: `${val.firstname} has been Un-assigned to the order ${orderid}`,
        configid: 2,
        tenantid: tenantid,
        orderheaderid: orderheaderid,
        orderprocessid: val.orderprocessid,
        shiftid: val.shiftid,
        userid: val.userid,
        orderid: orderid,
        success: 0,
        orderstatus: 'assigned',
        processing: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        notifytype: 2,
        notifyreason: 'Staff Un-Assigned'
        // "sound": "ring",
        // "click_action": "FLUTTER_NOTIFICATION_CLICK",
        // "firstname": val.firstname
      }
    ];

    data2 = {
      Title: 'Staff Un-Asigned',
      message: `A Staff has been Un-assigned to the order ${orderid}`,
      tenantid: tenantid,
      orderheaderid: orderheaderid,
      orderid: orderid,
      configid: 2
      // "click_action": "FLUTTER_NOTIFICATION_CLICK"
    };
    let fcmmodel = {
      priority: 'high',
      registration_ids: tokenarr,
      data: data2,
      notification: {
        body: `An order has been Un-assigned ${orderid}`,
        title: 'Legendary',
        sound: 'ring',
        content_available: true,
        click_action: 'FLUTTER_NOTIFICATION_CLICK'
      }
    };
    let grpnotifyobj = {
      notifications: arr1,
      fcmmodel: fcmmodel
    };
    console.log('grpnotifyobj unassign');
    console.log(grpnotifyobj);
    sendgroupnotification(grpnotifyobj);
  };

  useEffect(() => {
    console.log(orderheaderid);
    if (orderheaderid && tenantid) {
      // fetchorderdetails();
      fetchorderaddons();
      fetchorderattires();
      fetchassignedcount();
      // fetchuserdetails();
      console.log(location.state || '');
      // setOrderid(location.state.orderid || '');
      // setEventlocation(location.state.eventlocation || '');
      // setEventlocation(address || []);

      // setOrderdate(dayjs(location.state.orderdate.substring(0, 10)).format('MM/DD/YYYY') || '');
      // setDuedate(dayjs(location.state.orderdate.substring(0, 10)).format('MM/DD/YYYY') || '')
      // setEventname(location.state.eventname || '');
      // setClientname(location.state.tenantname || '')
    } else {
      setLoading(false);
    }
    // fetchorderdetails();
    console.log(orderheaderid, tenantid);
  }, [orderheaderid, tenantid, assignedpendingcount]);

  const handleClose = () => {
    setOpen(false);
  };
  const dialogclose = () => {
    setDialogopen(false);
    setStaffarr([]);
    setExpandopen(['', '']);
  };
  useEffect(() => {
    console.log(currentshiftobj);
  });

  const assignok = async () => {
    let arr = [];
    let arr1 = [];
    staffarr.map((val) => {
      arr.push({
        orderprocessid: 0,
        // "processdate": `${dayjs(new Date()).format('YYYY-MM-DD')} ${dayjs(new Date()).format('HH:mm:ss')}`, //current date
        processdate: dayjs().format('YYYY-MM-DD HH:mm:ss'), //current date
        tenantid: tenantid,
        orderheaderid: orderheaderid,
        orderdetailid: val.orderdetailid, ////
        productid: val.productid, /////
        userid: val.userid,
        orderstatus: 'pending',
        pending: `${dayjs(pendingtime).format('YYYY-MM-DD')} ${dayjs(pendingtime).format('HH:mm:ss')}`, // if pending
        starttime: `${dayjs(starttime).format('YYYY-MM-DD')} ${dayjs(starttime).format('HH:mm:ss')}`,
        endtime: `${dayjs(endtime).format('YYYY-MM-DD')} ${dayjs(endtime).format('HH:mm:ss')}`,
        appuserid: parseInt(localStorage.getItem('appuserid')), //loginuserid
        shiftid: val.shiftid,
        userrate: val.userrate,
        productrate: val.productrate
      });

      staffarr.map((val) => {
        arr1.push({
          notificationid: 0,
          notificationdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
          Title: 'Staff Asigned',
          message: `A Staff has been assigned to the order ${orderid}`,
          configid: 2,
          tenantid: tenantid,
          orderheaderid: orderheaderid,
          orderprocessid: 0,
          shiftid: val.shiftid,
          userid: val.userid,
          orderid: orderid,
          sound: 'ring',
          click_action: 'FLUTTER_NOTIFICATION_CLICK',
          firstname: val.firstname
        });
      });
    });
    console.log('arr');
    console.log(arr);

    await axios
      .post(`${process.env.REACT_APP_URL2}/orders/createorderprocess`, arr)
      .then((res) => {
        console.log(res);
        if (res.data.message === 'Successfully created') {
          //   if (orderheaderid && tenantid) {
          //     fetchorderdetails();
          //     fetchorderaddons();
          //     fetchorderattires();
          //   }

          enqueueSnackbar('Roles assigned successfully', {
            variant: 'success',
            anchorOrigin: { vertical: 'top', horizontal: 'right' },
            autoHideDuration: 2000
          });
          // fetchroleslist(productid, '', '', orderheaderid,  arr1[0].shiftid);
          // console.log(productid, '', '', orderheaderid, arr1[0].shiftid);

          // arr1.map((val2) => {
          //   notificationpush(val2,val2.Title);
          // })
          setDialogopen(false);
          fetchorderattires();
          fetchassignedcount();
        }
      })
      .catch((err) => {
        console.log(err);
      });
    console.log(arr);
  };

  const notificationpush = async (val) => {
    let fcmtoken = val.userfcmtoken;
    let obj1 = {
      notificationid: 0,
      notificationdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      Title: 'Staff Asigned',
      message: `A Staff has been assigned to the order ${orderid}`,
      configid: 2,
      tenantid: tenantid,
      orderheaderid: orderheaderid,
      orderprocessid: val.orderprocessid,
      shiftid: val.shiftid,
      userid: val.userid,
      orderid: orderid,
      sound: 'ring',
      click_action: 'FLUTTER_NOTIFICATION_CLICK'
      // "firstname": val.firstname
    };
    console.log(obj1, fcmtoken);
    await axios
      .post(
        `${process.env.REACT_APP_URL2}/utils/notification/send`,
        {
          priority: 'high',
          registration_ids: [fcmtoken],
          data: obj1,
          notification: {
            body: `A Staff has been assigned to ${orderid}`,
            title: 'Legendary',
            sound: 'ring',
            content_available: true
          }
        },
        {
          headers: {
            Authorization: `Bearer ${process.env.REACT_APP_STAFF_TOKEN}`
          }
        }
      )
      .then((res) => {
        console.log(res);
        // if(res.data.status){
        enqueueSnackbar('Notification sent successfully', {
          variant: 'success',
          anchorOrigin: { vertical: 'top', horizontal: 'right' },
          autoHideDuration: 2000
        });
        // }
      })
      .catch((err) => {
        console.log(err);
      });
  };



  const sendgroupnotification = async (obj1) => {
    console.log(obj1);
    await axios
      .post(`${process.env.REACT_APP_URL2}/utils/notification/sendall`, obj1, {
        headers: {
          Authorization: `Bearer ${process.env.REACT_APP_STAFF_TOKEN}`
        }
      })
      .then((res) => {
        console.log(res);
        if (res.data.status) {
          // updateorderstatus();
          enqueueSnackbar('Notification sent successfully', {
            variant: 'success',
            anchorOrigin: { vertical: 'top', horizontal: 'right' },
            autoHideDuration: 2000
          });
          fetchorderaddons();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  // const updateorderstatus = async () => {

  //   await axios.put(`${process.env.REACT_APP_URL2}/orders/updateorderstatus`,{
  //     "orderheaderid":orderheaderid,
  //     "tenantid":tenantid,
  //     "orderstatus":"processing",
  //     "pending":"",
  //     "processing":dayjs().format('YYYY-MM-DD HH:mm:ss'),
  //     "completed":""
  //   })
  //     .then((res) => {
  //       console.log(res)
  //       fetchorderdetails();
  //       fetchorderaddons();
  //       fetchorderattires();

  //     })
  //     .catch((err) => {
  //       console.log(err)
  //       fetchorderdetails();
  //       fetchorderaddons();
  //       fetchorderattires();
  //     })

  // }

  const fetchassignedcount = async () => {
    // console.log(obj1)
    await axios
      .get(`${process.env.REACT_APP_URL2}/orders/getorderstatuscount?orderheaderid=${orderheaderid}`)
      .then((res) => {
        if (res.data.status) {
          // let arr1=[];
          console.log(res);
          setAssignedpendingcount(res.data.pendingcount);
          fetchorderaddons();
          // res.data.details.map((val) => {
          //  let val2={
          //     "notificationid": 0,
          //     "notificationdate": dayjs().format('YYYY-MM-DD HH:mm:ss'),
          //     "Title": "Staff Asigned",
          //     "message": `A Staff has been assigned to the order ${orderid}`,
          //     "configid": 2,
          //     "tenantid": tenantid,
          //     "orderheaderid": orderheaderid,
          //     "orderprocessid": val.orderprocessid,
          //     "shiftid": val.shiftid,
          //     "userid": val.userid,
          //     "orderid": orderid,
          //     "sound": "ring",
          //     "click_action": "FLUTTER_NOTIFICATION_CLICK",
          //     // "firstname": val.firstname

          //   };

          //       notificationpush(val2,val.userfcmtoken);

          // })
        } else {
          setAssignedpendingcount(res.data.pendingcount);
          fetchorderaddons();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

  function AlertCustomerDelete({
    // title,
    open,
    handleClose
  }) {
    const [deletepassword, setDeletepassword] = useState('');

    return (
      <Dialog
        open={open}
        onClose={() => handleClose(false)}
        maxWidth="xs"
        fullScreen={isMobile}
        PaperProps={{ sx: { borderRadius: { xs: 0, sm: 3 } } }}
      >
        <DialogContent sx={{ mt: 2, my: 1 }}>
          <Stack alignItems="center" spacing={3.5}>
            <Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
              <DeleteFilled />
            </Avatar>
            <Grid>
              <Chip label={orderid.slice(4)} variant="combined" color="warning" size="small" />
            </Grid>
            <Stack spacing={2}>
              {/* <Typography variant="h4" align="center">
                Are you sure you want to cancel this order?
              </Typography>  */}
              {invoiceeligible && (
                <Alert color="warning" variant="border" icon={<WarningFilled />}>
                  <AlertTitle>Order is within 24Hrs time frame. The order will be invoiced with standard pricing as agreed.</AlertTitle>
                  {/* <Typography variant="h6"> This is an warning alert.</Typography> */}
                  <Link href="https://thelegendarystaff.com/" target="_blank">
                    Terms & Condition link
                  </Link>
                </Alert>
              )}
              <Typography variant="h4" align="center">
                Please type in the order number to confirm.
              </Typography>
              <TextField
                type="text"
                onChange={(e) => {
                  console.log(e.target.value);
                  setDeletepassword(e.target.value);
                }}
                error={deletepassword !== orderid.slice(4)}
                // error={true}
                value={deletepassword}
              />
            </Stack>

            <Stack direction="row" spacing={2} sx={{ width: 1 }}>
              <Button
                fullWidth
                color="error"
                variant="contained"
                onClick={() => {
                  if (deletepassword === orderid.slice(4)) {
                    cancelorder();
                    handleClose(true);
                  }
                }}
                autoFocus
              >
                Yes, Cancel
              </Button>
              <Button fullWidth onClick={() => handleClose(false)} color="secondary" variant="outlined">
                No
              </Button>
            </Stack>
          </Stack>
        </DialogContent>
      </Dialog>
    );
  }

  return (
    <>
      {loading && <Loader />}

      <AlertCustomerDelete open={open} handleClose={handleClose} />

      <Dialog
        maxWidth={false}
        fullWidth={true}
        open={dialogopen}
        onClose={dialogclose}
        scroll={'paper'}
        fullScreen={isMobile}
        PaperProps={{ sx: { borderRadius: { xs: 0, sm: 3 } } }}
        TransitionComponent={PopupTransition}
      >
        <DialogTitle>
          <Stack direction={'row'} justifyContent={'space-between'}>
            <Stack direction={{ sm: 'row', xs: 'column' }} spacing={2} alignItems={'center'}>
              <Typography variant="h3">Assign Roles</Typography>

              <Chip label={clientname} variant="light" color="primary" />
            </Stack>
            <Chip label={orderid} variant="combined" color="warning" size={'large'} />
          </Stack>
          <Grid container sx={{ p: 1 }} spacing={2}>
            <Grid item sm={6} xs={12}>
              {/* <Chip label={currentrole} variant="combined" color="primary" size='normal' /> */}
              <Tabs
                value={tabstatus}
                //  onChange={handleChangetab}
                onChange={() => setTabstatus((e) => (e === 0 ? 1 : 0))}
                variant="scrollable"
                scrollButtons="auto"
              >
                {/* <Tab label="All" /> */}
                <Tab label={currentrole} />
              </Tabs>
            </Grid>
            <Grid item sm={6} xs={12}>
              <Stack
                direction={'row'}
                justifyContent={{ xs: 'flex-start', sm: 'flex-end' }}
                // alignItems={{xs:'flex-end',sm:'center'}}
                sx={{ height: '100%' }}
                spacing={2}
              >
                <Chip
                  sx={{ width: '130px' }}
                  label={`Required:${currentshiftobj.shifts}`}
                  variant="combined"
                  color="primary"
                  size="normal"
                />
                <Chip
                  sx={{ width: '130px' }}
                  label={`Assigned: ${currentshiftobj.assigned}`}
                  variant="combined"
                  color="success"
                  size="normal"
                />
                <Chip
                  sx={{ width: '130px' }}
                  label={`Remaining: ${currentshiftobj.remaining}`}
                  variant="combined"
                  color="error"
                  size="normal"
                />
              </Stack>
            </Grid>
          </Grid>
        </DialogTitle>
        {/* <Typography variant="h1">title</Typography> */}
        <DialogContent dividers={true}>
          {/* <Grid container sx={{ p: 1 }} spacing={2}>

            <Grid item sm={6} xs={12}>


              <Tabs
                value={tabstatus}

                onChange={() => setTabstatus((e) => (e === 0) ? 1 : 0)}
                variant="scrollable" scrollButtons="auto" >
                <Tab label="All" />
                <Tab label={currentrole} />
              </Tabs>
            </Grid>
            <Grid item sm={6} xs={12}>
              <Stack direction={{ xs: 'column', sm: 'row' }} justifyContent={'flex-end'}
                // alignItems={{xs:'flex-end',sm:'center'}}
                sx={{ height: '100%' }} spacing={2}>
                <Chip sx={{ width: '130px' }} label={`Shifts:${currentshiftobj.shifts}`} variant="combined" color='primary' size='normal' />
                <Chip sx={{ width: '130px' }} label={`Assigned: ${currentshiftobj.assigned}`} variant="combined" color='success' size='normal' />
                <Chip sx={{ width: '130px' }} label={`Remaining: ${currentshiftobj.remaining}`} variant="combined" color='error' size='normal' />

              </Stack>

            </Grid>
          </Grid> */}

          {/* </DialogTitle> */}
          {/* <MainCard> */}
          {stafflist.length === 0 ? (
            <>
              {loading ? (
                <>
                  <Stack alignItems={'center'}>
                    <CircularProgress />
                  </Stack>
                </>
              ) : (
                <Typography>No Staffs Available</Typography>
              )}
            </>
          ) : isMobile ? (
            <MobileCardList>
              {stafflist.map((val, i) => {
                const isSelected = staffarr.find((res) => res.userid == val.userid) ? true : false;
                return (
                  <MobileCard key={i} accent="#662582" selected={isSelected}>
                    <Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={1}>
                      <Stack direction="row" alignItems="center" spacing={1}>
                        <Avatar alt="" src={''} sx={{ width: 32, height: 32 }} />
                        <Stack direction="column">
                          <Typography variant="subtitle2">{val.firstname}</Typography>
                          <Typography variant="caption" color="textSecondary">
                            {val.contactno}
                          </Typography>
                        </Stack>
                      </Stack>
                      {val.orderdetailid !== orderdetailid ? (
                        <Checkbox
                          disabled={val.orderdetailid !== 0}
                          checked={isSelected}
                          onClick={(e) => {
                            console.log(currentshiftobj);
                            if (currentshiftobj.remaining >= 0) {
                              if (e.target.checked && currentshiftobj.remaining != 0) {
                                let arr = staffarr;
                                arr.push({
                                  userid: val.userid,
                                  orderdetailid,
                                  productid,
                                  shiftid: currentshiftobj.shiftid,
                                  userrate: currentshiftobj.price,
                                  productrate: val.rolecost,
                                  firstname: val.firstname
                                });
                                setStaffarr([...arr]);
                                let obj = currentshiftobj;
                                obj.assigned++;
                                obj.remaining = obj.shifts - obj.assigned;
                                setCurrentshiftobj({ ...obj });
                              } else if (
                                currentshiftobj.assigned != currentshiftobj.shifts ||
                                (currentshiftobj.remaining === 0 && !e.target.checked)
                              ) {
                                let arr = staffarr;
                                let index = arr.findIndex((val1) => val1.userid === val.userid);
                                arr.splice(index, 1);
                                setStaffarr([...arr]);
                                let obj = currentshiftobj;
                                obj.assigned--;
                                obj.remaining = obj.shifts - obj.assigned;
                                setCurrentshiftobj({ ...obj });
                              }
                              console.log(staffarr);
                            }
                          }}
                        />
                      ) : (
                        <Stack direction="row" alignItems="center">
                          <Chip label="Assigned" color="success" size="small" sx={{ mr: 1 }} />
                          <Tooltip title="Unassign">
                            <IconButton
                              color="error"
                              onClick={() => {
                                console.log(val);
                                unassign(val);
                              }}
                            >
                              <CloseOutlined />
                            </IconButton>
                          </Tooltip>
                          <Tooltip title="Send Notification">
                            <IconButton
                              color="info"
                              onClick={() => {
                                console.log(val);
                                notificationpush(val);
                              }}
                            >
                              <NotificationOutlined />
                            </IconButton>
                          </Tooltip>
                        </Stack>
                      )}
                    </Stack>
                    <MobileFieldGrid>
                      <MobileField label="Category">
                        <Stack direction="column" alignItems="flex-start" spacing={0.25}>
                          <Typography variant="caption" color="textSecondary">
                            {val.cateoryname}
                          </Typography>
                          <Chip label={val.subcategoryname} color="info" size="small" variant="light" />
                        </Stack>
                      </MobileField>
                      <MobileField label="Price" value={val.rolecost} />
                      <MobileField label="Experience" value={`${val.experience} Years`} />
                      <MobileField label="Level">
                        <Chip label={val.levelofexperience} size="small" color="primary" variant="light" />
                      </MobileField>
                      <MobileField label="City" value={val.city} />
                      {val.orderid && (
                        <MobileField label="Order">
                          <Chip label={val.orderid} color="warning" size="small" variant="light" />
                        </MobileField>
                      )}
                    </MobileFieldGrid>
                  </MobileCard>
                );
              })}
            </MobileCardList>
          ) : (
            <TableContainer>
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell>#</TableCell>
                    <TableCell>Staff</TableCell>

                    <TableCell>Category</TableCell>

                    {/* <TableCell>Gender</TableCell> */}

                    <TableCell>Price</TableCell>

                    <TableCell>Experience</TableCell>

                    <TableCell>Level</TableCell>
                    <TableCell>City</TableCell>
                    <TableCell>Action</TableCell>
                    <TableCell></TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {stafflist.map((val, i) => {
                    return (
                      <Fragment key={i}>
                        <TableRow
                          sx={{
                            backgroundColor: staffarr.find((res) => res.userid == val.userid) ? '#f5f5f5' : '',
                            ':hover': {
                              backgroundColor: staffarr.find((res) => res.userid == val.userid) ? '#f5f5f5 !important' : ''
                            }
                          }}
                        >
                          <TableCell
                            component="th"
                            //  id={labelId}
                            scope="row"
                            padding="none"
                          >
                            {i + 1}
                          </TableCell>
                          <TableCell align="left" sx={{ paddingLeft: '0px !important' }}>
                            <Stack direction="row" alignItems="center" spacing={1} justifyContent="flex-start">
                              <Avatar
                                alt=""
                                size="sm"
                                src={''}
                                sx={{
                                  width: '25px',
                                  height: '25px'
                                }}
                              >
                                {/* {row.tenantname.charAt(0)} */}
                              </Avatar>
                              <Stack direction="column">
                                <Typography variant="caption">{val.firstname}</Typography>
                                <Typography variant="caption" color="textSecondary">
                                  {val.contactno}
                                </Typography>
                              </Stack>
                            </Stack>
                          </TableCell>
                          <TableCell align="left">
                            {/* <Stack direction="column">
                          <Typography variant="caption"> {val.contactno}</Typography>
                          <Typography variant="caption" color="textSecondary">
                            some demo address
                          </Typography>
                        </Stack> */}
                            <Stack direction={'column'} alignItems={'flex-start'}>
                              <Typography variant="caption" color="textSecondary">
                                {val.cateoryname}
                              </Typography>
                              <Chip label={val.subcategoryname} color="info" size="small" variant="light" />
                              {/* <Typography>{row.category}</Typography> */}
                            </Stack>
                          </TableCell>
                          <TableCell>{val.rolecost}</TableCell>
                          {/* <TableCell align="left"> */}
                          {/* {(row.gender === 1) && <WomanIcon fontSize="small" /> } */}
                          {/* {row.gender === 0 && <ManIcon fontSize="small"/>} */}
                          {/* <WomanIcon fontSize="small" /> */}
                          {/* </TableCell> */}
                          {/* <TableCell align="left">B+</TableCell> */}
                          {/* <TableCell align="left">{row.devicetype}</TableCell> */}
                          <TableCell align="left">{val.experience} Years</TableCell>
                          <TableCell align="left">
                            <Chip label={val.levelofexperience} size="small" color="primary" variant="light" />
                          </TableCell>
                          <TableCell align="left">{val.city}</TableCell>
                          <TableCell align="left">
                            {val.orderdetailid !== orderdetailid ? (
                              <>
                                <Checkbox
                                  // disabled={(currentshiftobj.remaining == 0)}
                                  disabled={val.orderdetailid !== 0}
                                  checked={staffarr.find((res) => res.userid == val.userid) ? true : false}
                                  onClick={(e) => {
                                    console.log(currentshiftobj);
                                    if (currentshiftobj.remaining >= 0) {
                                      if (e.target.checked && currentshiftobj.remaining != 0) {
                                        let arr = staffarr;
                                        arr.push({
                                          userid: val.userid,
                                          orderdetailid,
                                          productid,
                                          shiftid: currentshiftobj.shiftid,
                                          userrate: currentshiftobj.price,
                                          productrate: val.rolecost,
                                          firstname: val.firstname
                                        });
                                        setStaffarr([...arr]);
                                        let obj = currentshiftobj;
                                        // obj.shifts--;
                                        // obj.assigned = arr.length;
                                        obj.assigned++;
                                        obj.remaining = obj.shifts - obj.assigned;
                                        setCurrentshiftobj({ ...obj });
                                      } else if (
                                        currentshiftobj.assigned != currentshiftobj.shifts ||
                                        (currentshiftobj.remaining === 0 && !e.target.checked)
                                      ) {
                                        let arr = staffarr;
                                        // let index = arr.indexOf(val.userid)
                                        let index = arr.findIndex((val1) => val1.userid === val.userid);
                                        arr.splice(index, 1);
                                        setStaffarr([...arr]);
                                        let obj = currentshiftobj;
                                        // obj.shifts++;
                                        // obj.assigned = arr.length;
                                        obj.assigned--;
                                        obj.remaining = obj.shifts - obj.assigned;
                                        setCurrentshiftobj({ ...obj });
                                      }
                                      // forceUpdate();
                                      console.log(staffarr);
                                    }
                                  }}
                                />
                              </>
                            ) : (
                              <>
                                <Chip label="Assigned" color="success" size="small" sx={{ mr: 1 }} />

                                {/* <Checkbox */}

                                {/* //   checked
                            // /> */}
                                <Tooltip title="Unassign">
                                  <IconButton
                                    color="error"
                                    onClick={() => {
                                      console.log(val);
                                      unassign(val);
                                      // sendunassignnotification(val)
                                    }}
                                  >
                                    {/* <UserOutlined /> */}
                                    <CloseOutlined />
                                  </IconButton>
                                </Tooltip>
                                <Tooltip title="Send Notification">
                                  <IconButton
                                    color="info"
                                    onClick={() => {
                                      console.log(val);
                                      // unassign(val)
                                      notificationpush(val);
                                    }}
                                  >
                                    {/* <UserOutlined /> */}
                                    <NotificationOutlined />
                                  </IconButton>
                                </Tooltip>
                              </>
                            )}
                          </TableCell>
                          <TableCell>
                            {val.orderid && (
                              <>
                                <Chip
                                  label={val.orderid}
                                  color="warning"
                                  size="small"
                                  // sx={{ mr: 1 }}
                                  variant="light"
                                />
                              </>
                            )}
                          </TableCell>
                        </TableRow>
                      </Fragment>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>
          )}
        </DialogContent>
        <DialogActions>
          <Stack
            sx={{ mt: 2, width: { xs: '100%', sm: 'auto' } }}
            direction={{ xs: 'column', sm: 'row' }}
            justifyContent="flex-end"
            spacing={{ xs: 1.5, sm: 5 }}
          >
            {stafflist.length > 0 && (
              <>
                <Button1 sx={{ width: { xs: '100%', sm: '130px' } }} variant="contained" onClick={assignok}>
                  OK
                </Button1>
                <Button1
                  sx={{ width: { xs: '100%', sm: '130px' } }}
                  color="warning"
                  variant="contained"
                  onClick={() => {
                    // dialogclose();
                    setStaffarr([]);
                    let obj = currentshiftobj;
                    // obj.shifts = row.orderqty;
                    obj.remaining = obj.shifts;
                    obj.assigned = 0;

                    setCurrentshiftobj(obj);
                  }}
                >
                  clear
                </Button1>
              </>
            )}
            <Button1
              sx={{ width: { xs: '100%', sm: '130px' } }}
              color="error"
              variant="contained"
              onClick={() => {
                dialogclose();
              }}
            >
              Close
            </Button1>
          </Stack>
        </DialogActions>
        {/* </MainCard> */}
        {/* </MainCard> */}
      </Dialog>

      <Grid container rowSpacing={2} columnSpacing={2.75}>
        {/* <Grid item xs={12}>

          <Stack direction={{ md: 'row', xs: 'column' }} justifyContent="space-between" alignItems="center" width="100%">


          </Stack>
        </Grid> */}
        {/* <Box content={false} sx={{ overflow: 'visible' }} width='100%'> */}
        {/* <Grid item xs={12}>
             <Typography variant="h3">Details</Typography>
                </Grid> */}

        <CardActions
          sx={{
            position: 'sticky',
            top: '60px',
            // top:0,
            bgcolor: theme.palette.background.default,
            zIndex: 1,
            // borderBottom: `1px solid ${theme.palette.divider}`,
            width: '100%'
          }}
        >
          <Grid item xs={12}>
            <Stack
              direction={{ md: 'row', xs: 'column' }}
              justifyContent="space-between"
              alignItems="flex-end"
              sx={{ width: '100%', p: 1 }}
            >
              <Stack direction="row" spacing={2} alignItems="center" justifyContent="flex-start" sx={{ width: { xs: '100%', md: '0' } }}>
                <IconButton
                  onClick={() => history.back()}
                  // onClick={()=>}
                >
                  <ArrowBackIcon />
                </IconButton>
                {/* <Link to="/dashboard">Test me</Link> */}
                <Stack direction="column" alignItems="flex-start">
                  <Typography variant="h3">Details</Typography>
                  <Stack direction="row" spacing={1}>
                    {/* <Typography noWrap color="secondary"></Typography> */}
                    <Chip
                      label={orderid === '' ? <Skeleton sx={{ width: '80px', bgcolor: '#fff9c4' }} animation="wave" /> : orderid}
                      variant="combined"
                      color="warning"
                      size="small"
                    />
                    {/* <Typography variant="subtitle1">Date</Typography> */}
                    {/* <Typography color="secondary">{orderdate}</Typography> */}
                    <Chip
                      label={orderdate === '' ? <Skeleton sx={{ width: '80px', bgcolor: '#b3e5fc' }} animation="wave" /> : orderdate}
                      variant="combined"
                      color="primary"
                      size="small"
                    />

                    {orderstatus === 'pending' && <Chip label="Pending" color="error" size="small" />}
                    {orderstatus === 'cancelled' && <Chip label="Cancelled" color="secondary" size="small" />}
                    {orderstatus === 'completed' && <Chip label="Completed" color="primary" size="small" />}
                    {orderstatus === 'processing' && <Chip label="Processing" color="primary" size="small" />}
                    {orderstatus === 'assigned' && <Chip label="Assigned" color="warning" size="small" />}
                    {orderstatus === 'confirmed' && <Chip label="Confirmed" color="success" size="small" />}

                    {orderstatus === 'active' && <Chip label="Active" color="info" size="small" />}
                    {orderstatus === 'closed' && <Chip label="Closed" color="info" size="small" />}

                    {orderstatus === 'modified' && <Chip label="Modified" color="secondary" size="small" variant="contained" />}
                  </Stack>
                </Stack>
              </Stack>

              <Stack
                direction={{ xs: 'column', sm: 'row' }}
                spacing={2}
                sx={{ mt: { md: 0, xs: 2 }, width: { xs: '100%', md: 'auto' } }}
              >
                {/* <Typography>{dayjs(startdate).$d.toString()}</Typography>  */}
                {/* <Typography>{startdate}</Typography> */}
                {/* <Typography>  {dayjs().$d.toString()}</Typography> */}

                {(orderstatus === 'pending' || orderstatus === 'assigned' || orderstatus === 'confirmed' || orderstatus === 'modified') && (
                  // && (dayjs(startdate).$d > dayjs().$d)
                  <Tooltip title="Edit">
                    <Button1
                      variant="outlined"
                      color="info"
                      sx={{ borderRadius: '40px', width: { xs: '100%', sm: 'auto' } }}
                      startIcon={<BorderColorIcon color="info" />}
                      onClick={(e) => {
                        e.stopPropagation();
                        // if (dayjs(startdate).$d > dayjs().$d) {
                        if (dayjs(dayjs().format('MM-DD-YYYY')).isBefore(dayjs(dayjs(startdate).format('MM-DD-YYYY')))) {
                          navigate(`/editorder`, {
                            state: {
                              orderheaderid: orderheaderid,
                              tenantid: tenantid
                            }
                          });
                        } else {
                          enqueueSnackbar(
                            'Order cannot be edited.\n Order date is not valid at this time',

                            {
                              variant: 'error',
                              anchorOrigin: { vertical: 'top', horizontal: 'right' },
                              autoHideDuration: 4000,
                              style: { whiteSpace: 'pre-line' }
                            }
                          );
                        }
                      }}
                    >
                      Edit Order
                    </Button1>
                  </Tooltip>
                )}

                {/* {(((orderstatus === 'pending')
                  || (orderstatus === 'modified'))
                  && assignedpendingcount === 0) &&
                  <>
                    <Button1
                      variant="outlined"
                      color="primary"
                      sx={{ borderRadius: '40px' }}
                      startIcon={<SendIcon />}
                      onClick={() => {
                        fetchassignedstaffs();
                      }}
                    >
                      Notify Staff
                    </Button1>
                  </>
                } */}
                {orderstatus !== 'cancelled' && orderstatus !== '' && orderstatus !== 'completed' && orderstatus !== 'closed' && (
                  <>
                    <Button1
                      variant="outlined"
                      color="error"
                      onClick={() => {
                        console.log(dayjs(startdate).diff(dayjs(), 'm') / 60);
                        if (dayjs(startdate).diff(dayjs(), 'm') / 60 > 24) {
                          setInvoiceeligible(false);
                          setOpen(true);
                        } else {
                          setInvoiceeligible(true);
                          setOpen(true);
                        }
                      }}
                      sx={{ borderRadius: '40px', mt: { xs: 2, sm: 0 }, width: { xs: '100%', sm: 'auto' } }}
                      startIcon={<CancelOutlinedIcon />}
                    >
                      Cancel Order
                    </Button1>
                  </>
                )}
                {orderstatus === 'cancelled' && (
                  <>
                    <Chip label={`Order Cancelled on ${cancelleddate}`} variant="combined" color="error" />
                  </>
                )}
                {/* {(orderstatus === 'completed') &&
                  <Button
                    variant="outlined"
                    color="error"
                    onClick={() => {
                      navigate(`/invoice/create`, {
                        state: {
                          orderheaderid: orderheaderid,
                          tenantid: tenantid
                        }
                      })

                    }
                    }
                    sx={{ borderRadius: '40px', mt: { xs: 2, sm: 0 } }}
                  >
                    Raise Invoice
                  </Button>
                } */}
              </Stack>
            </Stack>
          </Grid>
        </CardActions>

        {/* Dialog window */}

        <Grid item xs={12} sx={{ mt: -2 }}>
          <MainCard content={false} width="100%">
            {/* <h1>{(dayjs().isBefore(dayjs(startdate)))?'true':'false'}</h1> */}

            {/* <Stack spacing={2.5}> */}
            {/* <Box
                sx={{ p: 2.5, pb: 0 }}
              > */}
            {/* <Stack direction={{ xs: 'column', sm: 'row' }} justifyContent="flex-end"> */}
            {/* <Box>
                    <Stack direction="column" spacing={1}>
                      <Typography variant="h5">BEO</Typography>
                      <Chip label="Paid" variant="light" color="success" size="small" />

                    </Stack>
                  </Box> */}
            {/* <Box> */}

            {/* <Stack direction="row" spacing={1} justifyContent="flex-end">
                      <Typography sx={{ overflow: 'hidden' }} variant="subtitle1">
                        Due Date
                      </Typography>
                      <Typography color="secondary">{duedate}</Typography>
                    </Stack> */}
            {/* </Box>
                </Stack> */}
            {/* </Box> */}
            {/* </Stack> */}
            <Grid container spacing={2.5} sx={{ p: 2.5 }}>
              <Grid item xs={12} sm={6}>
                <MainCard sx={{ height: '100%' }}>
                  <Stack spacing={1}>
                    <Typography variant="h5">Client</Typography>
                    <Typography color="secondary">
                      {clientname === '' ? <Skeleton sx={{ width: '40%' }} animation="wave" /> : clientname}
                    </Typography>
                    <FormControl sx={{ width: '100%' }}>
                      {/* {eventlocation.map((val, i) => {
                                            return <Typography color="secondary" key={i} >{val}</Typography>
                                        })

                                        }
                                        <Typography color="secondary" >{eventlocation}</Typography>
                                        <Typography color="secondary">fafdf</Typography>
                                        <Typography color="secondary">dafaf</Typography>
                                        <Typography color="secondary">afdafafd</Typography> */}
                      <Typography color="secondary">
                        {tenantaddress === '' ? <Skeleton sx={{ width: '90%' }} animation="wave" /> : tenantaddress}
                      </Typography>
                    </FormControl>
                  </Stack>
                </MainCard>
              </Grid>

              <Grid item xs={12} sm={6}>
                <MainCard sx={{ height: '100%' }}>
                  <Stack spacing={1}>
                    <Typography variant="h5">Event</Typography>
                    <FormControl sx={{ width: '100%' }}>
                      <Typography color="secondary">
                        {eventname === '' ? <Skeleton sx={{ width: '40%' }} animation="wave" /> : eventname}
                      </Typography>
                      {/*
                      <Typography color="secondary">{(eventlocation === '') ? <Skeleton sx={{ width: '90%' }} animation="wave" /> : eventlocation}</Typography>

                      <Chip label={(venuetype === '') ? <Skeleton sx={{ width: '80px', bgcolor: '#b3e5fc' }} animation="wave" /> : venuetype} color="primary" variant="light" size="small" sx={{ width: 'max-content' }} />
                      */}
                    </FormControl>
                  </Stack>
                </MainCard>
              </Grid>

              {categoryarr.map((val5, j) => {
                return (
                  <Fragment key={val5.locationaddress}>
                    <Grid item xs={12}>
                      <MainCard
                        sx={{
                          opacity: val5.shiftstatus == 0 ? '' : '0.7'
                        }}
                      >
                        <Stack
                          direction={{ xs: 'column', md: 'row' }}
                          justifyContent={'space-between'}
                          alignItems={{ md: 'center', xs: 'flex-start' }}
                          spacing={2}
                          sx={{ p: 2 }}
                        >
                          <Stack direction={{ xs: 'column', md: 'row' }} spacing={2} alignItems={{ md: 'center', xs: 'flex-start' }}>
                            <Typography variant="h5">Shift {j + 1}</Typography>

                            <Typography color="secondary">
                              <EnvironmentOutlined /> {''}
                              {val5.locationaddress}
                            </Typography>
                            {val5.shiftstatus === 1 && <Chip label="Cancelled" color="secondary" />}
                          </Stack>
                          <Stack direction={'row'} spacing={1}>
                            {val5.ordercontacts.map((val11) => {
                              return (
                                <>
                                  <Tooltip title={val11.contactname}>
                                    <Avatar sx={{ bgcolor: '#2196f3', width: 30, height: 30 }} alt="A">
                                      {val11.contactname.charAt(0).toUpperCase()}
                                    </Avatar>
                                  </Tooltip>
                                </>
                              );
                            })}
                          </Stack>
                        </Stack>
                        {isMobile ? (
                          <MobileCardList>
                            {val5.orderdetails.length === 0 && (
                              <MobileCard accent="#662582">
                                <Skeleton animation="wave" />
                                <Skeleton animation="wave" />
                                <Skeleton animation="wave" />
                              </MobileCard>
                            )}
                            {val5.orderdetails.map((row, i) => (
                              <MobileCard key={i + 1} accent="#662582" sx={{ opacity: row.status == 0 ? '' : '0.7' }}>
                                <Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={1}>
                                  <Stack direction="column">
                                    <Typography sx={{ fontSize: 10, fontWeight: 800, color: '#94a3b8' }}>#{i + 1}</Typography>
                                    <Typography variant="subtitle1">{row.productname}</Typography>
                                  </Stack>
                                  <Stack direction="row" alignItems="center">
                                    <Tooltip title="Expand">
                                      <IconButton
                                        aria-label="expand row"
                                        style={{ color: theme.palette.primary.main }}
                                        onClick={() => {
                                          setStafflist([]);
                                          setExpandopen(expandopen[0] === j && expandopen[1] === i ? ['', ''] : [j, i]);
                                          fetchstafflist(row.orderdetailid);
                                        }}
                                      >
                                        {expandopen[0] === j && expandopen[1] === i ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
                                      </IconButton>
                                    </Tooltip>
                                    {orderstatus === 'cancelled' && (
                                      <IconButton sx={{ minWidth: '10px !important' }} disabled>
                                        <EditTwoTone />
                                      </IconButton>
                                    )}
                                    {row.status === 1 && (
                                      <Tooltip title="Cancelled">
                                        <IconButton sx={{ minWidth: '10px !important' }}>
                                          <CancelOutlinedIcon color="error" />
                                        </IconButton>
                                      </Tooltip>
                                    )}
                                    {row.supplyqty > row.orderqty && (
                                      <Tooltip title="Assigned count is greater than ordered count">
                                        <IconButton color="warning">
                                          <WarningOutlined />
                                        </IconButton>
                                      </Tooltip>
                                    )}
                                  </Stack>
                                </Stack>
                                <MobileFieldGrid>
                                  <MobileField label="Start Date">
                                    <Stack direction="column">
                                      <Typography variant="body2">{dayjs(row.starttime).format('MM/DD/YYYY')}</Typography>
                                      <Typography variant="caption">{dayjs(row.starttime).format('hh:mm A')}</Typography>
                                    </Stack>
                                  </MobileField>
                                  <MobileField label="End Date">
                                    <Stack direction="column">
                                      <Typography variant="body2">{dayjs(row.endtime).format('MM/DD/YYYY')}</Typography>
                                      <Typography variant="caption">{dayjs(row.endtime).format('hh:mm A')}</Typography>
                                    </Stack>
                                  </MobileField>
                                  <MobileField label="Unpaid Break" value={row.unpaidbreak || 0} />
                                  <MobileField label="Count">
                                    <Chip label={row.orderqty} color="success" variant="light" size="small" />
                                  </MobileField>
                                  <MobileField label="Assigned">
                                    <Chip
                                      label={row.supplyqty}
                                      color={row.supplyqty === 0 ? 'error' : 'warning'}
                                      variant="light"
                                      size="small"
                                    />
                                  </MobileField>
                                  <MobileField label="Price" value={`$${row.price}`} />
                                  <MobileField label="Amount" value={`$${row.landingamount}`} />
                                </MobileFieldGrid>
                                <Collapse in={expandopen[0] === j && expandopen[1] === i} timeout="auto" unmountOnExit>
                                  <Divider sx={{ my: 1.5 }} />
                                  {stafflist.length === 0 ? (
                                    loading ? (
                                      <Stack alignItems={'center'}>
                                        <CircularProgress />
                                      </Stack>
                                    ) : (
                                      <Stack sx={{ p: 1 }}>
                                        <Typography>No Staffs has been Assigned</Typography>
                                      </Stack>
                                    )
                                  ) : (
                                    <Stack spacing={1}>
                                      {stafflist.map((val, si) => (
                                        <MobileCard key={si} accent="#0ea5e9">
                                          <Stack direction="row" justifyContent="space-between" alignItems="flex-start">
                                            <Stack direction="column">
                                              <Typography variant="subtitle2">{val.staffname}</Typography>
                                              <Grid>
                                                <Chip label={val.productname} color="info" variant="light" size="small" />
                                              </Grid>
                                            </Stack>
                                            <Stack direction="row">
                                              {val.orderstatus === 'pending' && <Chip label="Pending" color="error" size="small" />}
                                              {val.orderstatus === 'cancelled' && (
                                                <Chip label="Cancelled" color="secondary" size="small" />
                                              )}
                                              {val.orderstatus === 'completed' && (
                                                <Chip label="Completed" color="primary" size="small" />
                                              )}
                                              {val.orderstatus === 'processing' && (
                                                <Chip label="Processing" color="primary" size="small" />
                                              )}
                                              {val.orderstatus === 'assigned' && <Chip label="Assigned" color="warning" size="small" />}
                                              {val.orderstatus === 'confirmed' && (
                                                <Chip label="Confirmed" color="success" size="small" />
                                              )}
                                              {val.orderstatus === 'active' && <Chip label="Active" color="info" size="small" />}
                                              {val.orderstatus === 'closed' && <Chip label="Closed" color="info" size="small" />}
                                            </Stack>
                                          </Stack>
                                          <MobileFieldGrid>
                                            <MobileField label="Start Time">
                                              <Stack direction="column">
                                                <Typography variant="body2">{dayjs(val.Starttime).format('MM/DD/YYYY')}</Typography>
                                                <Typography variant="caption">{dayjs(val.Starttime).format('hh:mm A')}</Typography>
                                              </Stack>
                                            </MobileField>
                                            <MobileField label="End Time">
                                              <Stack direction="column">
                                                <Typography variant="body2">{dayjs(val.Endtime).format('MM/DD/YYYY')}</Typography>
                                                <Typography variant="caption">{dayjs(val.Endtime).format('hh:mm A')}</Typography>
                                              </Stack>
                                            </MobileField>
                                            <MobileField label="Pay Rate" value={val.rolecost} />
                                            <MobileField label="Hours Worked" value={val.hoursworked} />
                                            <MobileField label="Clockin">
                                              <Stack spacing={0.5} alignItems="flex-start">
                                                <Chip
                                                  label={val.clockin ? dayjs(val.clockin).format('MM/DD/YYYY') : ''}
                                                  color="primary"
                                                  variant="light"
                                                  size="small"
                                                />
                                                <Chip
                                                  label={val.clockin ? dayjs(val.clockin).format('hh:mm A') : ''}
                                                  color="info"
                                                  variant="light"
                                                  size="small"
                                                />
                                              </Stack>
                                            </MobileField>
                                            <MobileField label="Clockout">
                                              <Stack spacing={0.5} alignItems="flex-start">
                                                <Chip
                                                  label={val.clockout ? dayjs(val.clockout).format('MM/DD/YYYY') : ''}
                                                  color="primary"
                                                  variant="light"
                                                  size="small"
                                                />
                                                <Chip
                                                  label={val.clockout ? dayjs(val.clockout).format('hh:mm A') : ''}
                                                  color="info"
                                                  variant="light"
                                                  size="small"
                                                />
                                              </Stack>
                                            </MobileField>
                                          </MobileFieldGrid>
                                        </MobileCard>
                                      ))}
                                    </Stack>
                                  )}
                                </Collapse>
                              </MobileCard>
                            ))}
                          </MobileCardList>
                        ) : (
                        <TableContainer>
                          <Table>
                            <TableHead>
                              <TableRow>
                                <TableCell>#</TableCell>
                                <TableCell>Role</TableCell>
                                <TableCell>Start Date</TableCell>
                                <TableCell>End Date</TableCell>
                                <TableCell>Unpaid break</TableCell>
                                <TableCell>Count</TableCell>
                                <TableCell>Assigned</TableCell>
                                <TableCell>Attire</TableCell>
                                <TableCell>Price</TableCell>
                                {/* <TableCell align="right">Tax</TableCell> */}
                                <TableCell>Amount</TableCell>
                                <TableCell>Action</TableCell>
                              </TableRow>
                            </TableHead>
                            <TableBody>
                              {val5.orderdetails.length === 0 && (
                                <>
                                  <TableRow>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                    </TableCell>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                    </TableCell>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                      <Skeleton animation="wave" />
                                    </TableCell>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                      <Skeleton animation="wave" />
                                    </TableCell>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                      {/* <Skeleton animation="wave" /> */}
                                    </TableCell>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                    </TableCell>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                    </TableCell>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                    </TableCell>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                    </TableCell>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                    </TableCell>
                                    <TableCell>
                                      <Skeleton animation="wave" />
                                    </TableCell>
                                    {/* <TableCell>
                              <Skeleton animation="wave" />

                            </TableCell> */}
                                  </TableRow>
                                  {/* </TableBody> */}
                                </>
                              )}

                              {/* <TableBody> */}
                              {val5.orderdetails.map((row, i) => (
                                <>
                                  <TableRow
                                    key={i + 1}
                                    sx={{
                                      '&:last-child td, &:last-child th': { border: 0 },
                                      opacity: row.status == 0 ? '' : '0.7'
                                    }}
                                  >
                                    <TableCell>{i + 1}</TableCell>
                                    <TableCell>{row.productname}</TableCell>
                                    {/* <TableCell>{row.productname}
                                                </TableCell> */}
                                    <TableCell>
                                      <Stack direction="column">
                                        <Typography variant="body1">{dayjs(row.starttime).format('MM/DD/YYYY')}</Typography>
                                        <Typography variant="body2">{dayjs(row.starttime).format('hh:mm A')}</Typography>
                                      </Stack>
                                    </TableCell>
                                    <TableCell>
                                      {' '}
                                      <Stack direction="column">
                                        <Typography variant="body1">{dayjs(row.endtime).format('MM/DD/YYYY')}</Typography>
                                        <Typography variant="body2">{dayjs(row.endtime).format('hh:mm A')}</Typography>
                                      </Stack>
                                    </TableCell>
                                    <TableCell>{row.unpaidbreak || 0}</TableCell>
                                    <TableCell align="center">
                                      <Chip label={row.orderqty} color="success" variant="light" size="small" />
                                    </TableCell>
                                    <TableCell align="center">
                                      <Chip
                                        label={row.supplyqty}
                                        color={row.supplyqty === 0 ? 'error' : 'warning'}
                                        variant="light"
                                        size="small"
                                      />
                                    </TableCell>
                                    <TableCell width={'100px'}>
                                      {/* < Grid container spacing={1}>
                                    {(row.orderattires || []).map((val) => {
                                      return <Fragment key={val.attirename}>
                                        <Grid item xs={12}>
                                          <Chip sx={{ fontSize: '11px' }} color="primary" label={val.attirename} size="small" />
                                        </Grid>
                                      </Fragment>
                                    })


                                    }
                                  </Grid> */}
                                    </TableCell>
                                    <TableCell>${row.price}</TableCell>
                                    {/* <TableCell align="right">{row.taxamount}</TableCell> */}
                                    <TableCell>${row.landingamount}</TableCell>
                                    <TableCell>
                                      <Stack direction={'row'}>
                                        <Tooltip title="Expand">
                                          <IconButton
                                            aria-label="expand row"
                                            style={{ color: theme.palette.primary.main }}
                                            onClick={() => {
                                              setStafflist([]);
                                              setExpandopen(expandopen[0] === j && expandopen[1] === i ? ['', ''] : [j, i]);
                                              // expanddatafetch(row.orderheaderid);

                                              // fetchroleslist(row.productid, '', '', val5.orderheaderid, row.shiftid);
                                              fetchstafflist(row.orderdetailid);
                                            }}
                                          >
                                            {expandopen[0] === j && expandopen[1] === i ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
                                          </IconButton>
                                        </Tooltip>

                                        {/* {(orderstatus !== 'cancelled') &&
                                        <>
                                          <Tooltip title='Assign Roles'>
                                            <Button1 sx={{ minWidth: '10px !important' }} onClick={() => {
                                              setExpandopen(['', ''])
                                              setCurrentrole(row.productname);
                                              setStarttime(row.starttime);
                                              console.log('row')

                                              console.log(row)
                                              setEndtime(row.endtime);
                                              setProductid(row.productid);
                                              setOrderdetailid(row.orderdetailid);
                                              if ((row.orderqty === row.supplyqty)
                                                || (row.status == 1)
                                                || (val5.shiftstatus == 1)

                                              ) {
                                                fetchroleslist(row.productid, '', '', val5.orderheaderid, row.shiftid);

                                              } else {
                                                fetchroleslist(row.productid, row.starttime, row.endtime, val5.orderheaderid, row.shiftid);

                                              }

                                              setStaffarr([]);


                                              let obj = currentshiftobj;
                                              obj.shifts = row.orderqty;

                                              obj.shiftid = row.shiftid;
                                              obj.remaining = row.orderqty - row.supplyqty;
                                              obj.assigned = row.supplyqty;
                                              obj.price = row.price;

                                              setCurrentshiftobj(obj);

                                              setDialogopen(true);
                                            }} ><EditTwoTone /></Button1>
                                          </Tooltip>


                                        </>
                                      } */}
                                        {orderstatus === 'cancelled' && (
                                          <>
                                            <IconButton sx={{ minWidth: '10px !important' }} disabled>
                                              <EditTwoTone />
                                            </IconButton>
                                          </>
                                        )}

                                        {row.status === 1 && (
                                          <Tooltip title="Cancelled">
                                            <IconButton sx={{ minWidth: '10px !important' }}>
                                              <CancelOutlinedIcon color="error" />
                                            </IconButton>
                                          </Tooltip>
                                        )}
                                        {row.supplyqty > row.orderqty && (
                                          <Tooltip title="Assigned count is greater than ordered count">
                                            <IconButton color="warning">
                                              <WarningOutlined />
                                            </IconButton>
                                          </Tooltip>
                                        )}
                                      </Stack>
                                    </TableCell>
                                  </TableRow>
                                  <TableRow sx={{ p: 2 }}>
                                    <TableCell
                                      style={{ paddingBottom: 0, paddingTop: 0, paddingLeft: 0, paddingRight: 0 }}
                                      colSpan={11}
                                      sx={{ width: '100%' }}
                                    >
                                      <Collapse in={expandopen[0] === j && expandopen[1] === i} timeout="auto" unmountOnExit>
                                        {/* <Grid container sx={{ width: '100%' }}> */}

                                        <MainCard sx={{ width: '100%' }}>
                                          {stafflist.length === 0 ? (
                                            <>
                                              {loading ? (
                                                <>
                                                  <Stack alignItems={'center'}>
                                                    <CircularProgress />
                                                  </Stack>
                                                </>
                                              ) : (
                                                <>
                                                  <Stack sx={{ p: 1 }}>
                                                    <Typography>No Staffs has been Assigned</Typography>
                                                  </Stack>
                                                </>
                                              )}
                                            </>
                                          ) : (
                                            <TableContainer>
                                              <Table>
                                                <TableHead>
                                                  <TableRow>
                                                    <TableCell>#</TableCell>
                                                    <TableCell>Staff</TableCell>
                                                    <TableCell>Start Time</TableCell>
                                                    <TableCell>End Time</TableCell>
                                                    <TableCell>Pay Rate</TableCell>

                                                    {/* <TableCell>Category</TableCell> */}
                                                    <TableCell align="center">Clockin</TableCell>
                                                    <TableCell align="center">Clockout</TableCell>

                                                    <TableCell>Hours Worked</TableCell>

                                                    {/* <TableCell>Experience</TableCell> */}

                                                    {/* <TableCell>Level</TableCell> */}
                                                    {/* <TableCell>City</TableCell> */}
                                                    <TableCell>Status</TableCell>
                                                  </TableRow>
                                                </TableHead>
                                                <TableBody>
                                                  {stafflist.map((val, i) => {
                                                    return (
                                                      <Fragment key={i}>
                                                        <TableRow
                                                          sx={
                                                            {
                                                              // backgroundColor: (staffarr.find((res) => res.userid == val.userid)) ? '#f5f5f5' : '', ':hover': {
                                                              //   backgroundColor: (staffarr.find((res) => res.userid == val.userid)) ? '#f5f5f5 !important' : ''
                                                              // }
                                                            }
                                                          }
                                                        >
                                                          <TableCell component="th" scope="row" padding="none">
                                                            {i + 1}
                                                          </TableCell>
                                                          {/*
                        <TableCell align="left" sx={{ paddingLeft: '0px !important' }}>
                          <Stack direction="row" alignItems="center" spacing={1} justifyContent="flex-start">
                            <Avatar
                              alt=""
                              size="sm"
                              src={''}
                              sx={{
                                width: '25px',
                                height: '25px'
                              }}
                            >
                            </Avatar>
                            <Stack direction="column">
                              <Typography variant="caption">{val.staffname}</Typography>
                              <Typography variant="caption" color="textSecondary">
                              </Typography>
                            </Stack>
                          </Stack>
                        </TableCell> */}
                                                          <TableCell align="left">
                                                            <Stack direction="column">
                                                              <Typography variant="caption">{val.staffname}</Typography>
                                                              <Grid>
                                                                <Chip label={val.productname} color="info" variant="light" size="small" />
                                                              </Grid>
                                                            </Stack>
                                                          </TableCell>
                                                          <TableCell>
                                                            <Stack direction="column">
                                                              <Typography variant="body2">
                                                                {dayjs(val.Starttime).format('MM/DD/YYYY')}
                                                              </Typography>
                                                              <Typography variant="caption">
                                                                {dayjs(val.Starttime).format('hh:mm A')}
                                                              </Typography>
                                                            </Stack>
                                                          </TableCell>
                                                          <TableCell>
                                                            <Stack direction="column">
                                                              <Typography variant="body2">
                                                                {dayjs(val.Endtime).format('MM/DD/YYYY')}
                                                              </Typography>
                                                              <Typography variant="caption">
                                                                {dayjs(val.Endtime).format('hh:mm A')}
                                                              </Typography>
                                                            </Stack>
                                                          </TableCell>
                                                          <TableCell>{val.rolecost}</TableCell>

                                                          {/*<TableCell align="left">
                           <Stack direction={'column'} alignItems={'flex-start'}>
                            <Typography variant="caption" color="textSecondary">{val.cateoryname}</Typography>
                            <Chip label={val.productname} color='info' size='small' variant="light" />

                          </Stack>
                        </TableCell> */}

                                                          <TableCell>
                                                            <Stack spacing={0.5} alignItems="center">
                                                              {/* <Typography variant="h5">Clock In:</Typography> */}
                                                              {/* <Typography color="secondary">Age</Typography> */}
                                                              <Chip
                                                                label={val.clockin ? dayjs(val.clockin).format('MM/DD/YYYY') : ''}
                                                                color="primary"
                                                                variant="light"
                                                                size="small"
                                                              />
                                                              <Chip
                                                                label={val.clockin ? dayjs(val.clockin).format('hh:mm A') : ''}
                                                                color="info"
                                                                variant="light"
                                                                size="small"
                                                              />
                                                            </Stack>
                                                          </TableCell>
                                                          <TableCell>
                                                            <Stack spacing={0.5} alignItems="center">
                                                              {/* <Typography variant="h5">Clock In:</Typography> */}
                                                              {/* <Typography color="secondary">Age</Typography> */}
                                                              <Chip
                                                                label={val.clockout ? dayjs(val.clockout).format('MM/DD/YYYY') : ''}
                                                                color="primary"
                                                                variant="light"
                                                                size="small"
                                                              />
                                                              <Chip
                                                                label={val.clockout ? dayjs(val.clockout).format('hh:mm A') : ''}
                                                                color="info"
                                                                variant="light"
                                                                size="small"
                                                              />
                                                            </Stack>
                                                          </TableCell>
                                                          <TableCell>{val.hoursworked}</TableCell>

                                                          {/* <TableCell align="left">


                        </TableCell>
                        <TableCell align="left" sx={{ paddingLeft: '0px !important' }} >



                                                    <Typography variant='caption'>
                                                        {val.tenantname}
                                                    </Typography>
                                                </TableCell>
                                                <TableCell align="left" >
                                                    <Stack direction='column'>
                                                        <Typography variant='caption'>
                                                            {val.orderid}
                                                        </Typography>
                                                        <Typography variant='caption' color="textSecondary">
                                                            {dayjs(val.startdate).utc().format('MM/DD/YYYY')}
                                                        </Typography>
                                                    </Stack>
                                                </TableCell>
                                                <TableCell align="left">
                                                    <Stack direction='column'>
                                                        <Typography variant="caption"  > {val.eventname}</Typography>
                                                        <Tooltip title={val.locationaddress}>
                                                            <Typography variant="caption" color="textSecondary"
                                                            > {`${val.locationaddress.slice(0, 15)}...`}</Typography>
                                                        </Tooltip>
                                                    </Stack>
                                                </TableCell> */}

                                                          <TableCell align="left">
                                                            <Stack direction="row">
                                                              {val.orderstatus === 'pending' && (
                                                                <Chip label="Pending" color="error" size="small" />
                                                              )}
                                                              {val.orderstatus === 'cancelled' && (
                                                                <Chip label="Cancelled" color="secondary" size="small" />
                                                              )}
                                                              {val.orderstatus === 'completed' && (
                                                                <Chip label="Completed" color="primary" size="small" />
                                                              )}
                                                              {val.orderstatus === 'processing' && (
                                                                <Chip label="Processing" color="primary" size="small" />
                                                              )}
                                                              {val.orderstatus === 'assigned' && (
                                                                <Chip label="Assigned" color="warning" size="small" />
                                                              )}
                                                              {val.orderstatus === 'confirmed' && (
                                                                <Chip label="Confirmed" color="success" size="small" />
                                                              )}

                                                              {val.orderstatus === 'active' && (
                                                                <Chip label="Active" color="info" size="small" />
                                                              )}
                                                              {val.orderstatus === 'closed' && (
                                                                <Chip label="Closed" color="info" size="small" />
                                                              )}
                                                            </Stack>
                                                          </TableCell>
                                                        </TableRow>
                                                      </Fragment>
                                                    );
                                                  })}
                                                </TableBody>
                                              </Table>
                                            </TableContainer>
                                          )}
                                        </MainCard>
                                      </Collapse>
                                    </TableCell>
                                  </TableRow>
                                </>
                              ))}
                            </TableBody>
                          </Table>
                        </TableContainer>
                        )}
                      </MainCard>
                    </Grid>
                  </Fragment>
                );
              })}

              <Grid item xs={12}>
                <Divider sx={{ borderWidth: 1 }} />
              </Grid>
              <Grid
                item
                xs={12}
                sm={6}
                // md={8}
              >
                <MainCard title="Order Addons" sx={{ height: '100%' }}>
                  {/* <Stack spacing={1}> */}
                  {/* <Typography variant="h5">Order Addons</Typography>
                      <Divider /> */}
                  <Grid container spacing={2}>
                    {(orderaddons || []).map((val) => {
                      return (
                        <Fragment key={val.addon}>
                          <Grid item>
                            <Chip icon={<DirectionsCarIcon />} variant="outlined" color="error" label={val.addon} />
                          </Grid>
                        </Fragment>
                      );
                    })}
                    {/* <Grid item>
                      <Chip icon={<DirectionsCarIcon />} variant='outlined' color="error" label="Parking Provided" />
                    </Grid>
                    <Grid item>
                      <Chip icon={<SoupKitchenIcon />} variant='outlined' color="error" label="Meal Provided" />
                    </Grid> */}
                    {/* <Grid item>
                      <Chip icon={<SmileFilled />} color="error" label="Like" />
                    </Grid>
                    <Grid item>
                      <Chip icon={<SmileFilled />} color="error" label="Like" />
                    </Grid>
                    <Grid item>
                      <Chip icon={<SmileFilled />} color="error" label="Like" />
                    </Grid> */}
                  </Grid>
                  {/* </Stack> */}
                </MainCard>
              </Grid>
              {/* <Grid item xs={12} sm={2}></Grid> */}
              <Grid item xs={12} sm={6}>
                {/* <Box sx={{ height: '100%',display:'flex',alignItems:'center' }} > */}
                <MainCard title="Total" sx={{ height: '100%' }}>
                  <Stack spacing={2}>
                    <Stack direction="row" justifyContent="space-between">
                      <Typography color={theme.palette.grey[500]}>Sub Total:</Typography>
                      <Typography>${subtotal === '' ? <Skeleton sx={{ width: '30px' }} /> : subtotal}</Typography>
                    </Stack>
                    {/* <Stack direction="row" justifyContent="space-between">
                      <Typography color={theme.palette.grey[500]}>Discount:</Typography>
                      <Typography variant="h6" color={theme.palette.success.main}>
                        0
                      </Typography>
                    </Stack> */}
                    <Stack direction="row" justifyContent="space-between">
                      <Typography color={theme.palette.grey[500]}>Tax:</Typography>
                      <Typography>{taxamount === '' ? <Skeleton sx={{ width: '30px' }} /> : taxamount}</Typography>
                    </Stack>
                    <Stack direction="row" justifyContent="space-between">
                      <Typography variant="subtitle1">Grand Total:</Typography>
                      <Typography variant="subtitle1">
                        {grandtotal === '' ? <Skeleton sx={{ width: '30px' }} /> : `$${grandtotal}`}
                      </Typography>
                    </Stack>
                  </Stack>
                </MainCard>
                {/* </Box> */}
              </Grid>
              <Grid item xs={12}>
                <Stack
                  direction="column"
                  sx={{ mt: 2 }}
                  // spacing={1}
                >
                  <Typography color="secondary">Other Instructions:</Typography>
                  <Typography sx={{ ml: 3 }}>{otherinstructions}</Typography>
                </Stack>
              </Grid>
              {/* <Grid item xs={12} >
                <Button color='info' variant='contained' endIcon={<SendIcon />}>Send Notifications</Button>
                </Grid> */}
            </Grid>
          </MainCard>
        </Grid>
        {/* </Box> */}

        {/* <Button onClick={() => { notificationpush() }}>notify</Button> */}
      </Grid>
    </>
  );
};

export default Details;