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 SendIcon from '@mui/icons-material/Send';
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 {
  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, setCurrentrole] = 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, setStarttime] = useState('');
  const [endtime, setEndtime] = useState('');
  // const [orderstatus,setOrderstatus]=useStatus('');
  const [pendingtime, setPendingtime] = useState('');
  // const [processdate,setProcessdate]=useState('');
  const [orderdetailid, setOrderdetailid] = useState('');
  const [productid, setProductid] = 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 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 fetchroleslist = async (cid, starttime1, endtime1, hid, sid) => {
    let fromdate = dayjs(starttime1).subtract(59, 'minutes')
      .format('YYYY-MM-DD HH:mm:ss');
    // let todate = dayjs(endtime1).utc().format('YYYY-MM-DD HH:mm:ss');
    // let fromdate = dayjs(starttime1).utc().format('YYYY-MM-DD HH:mm:ss');
    let todate = dayjs(endtime1)
      .format('YYYY-MM-DD HH:mm:ss');
    let url1;
    if (starttime1) {
      url1 = `${process.env.REACT_APP_URL2}/staffs/pools/getstaffs/?categoryid=${cid}&headerid=${hid}&shiftid=${sid}&starttime=${fromdate}&endtime=${todate}`;
    } else {
      url1 = `${process.env.REACT_APP_URL2}/staffs/pools/getstaffs/?categoryid=${cid}&headerid=${hid}&shiftid=${sid}`
    }
    setLoading(true);
    setStafflist([])
    await axios
      // .get(`${process.env.REACT_APP_URL2}/staffs/pools/getstaffs/?categoryid=${cid}&headerid=${hid}&starttime=${fromdate}&endtime=${todate}`)
      .get(url1)
      .then((res) => {
        console.log('rolelist');
        console.log(res);
        // console.log(fromdate, todate)
        // console.log(dayjs(starttime1).format('YYYY-MM-DD HH:mm:ss'))
        // console.log(dayjs(endtime1).format('HH:mm:ss'))


        setStafflist(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)
        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 fetchassignedstaffs = async () => {

    // console.log(obj1)
    await axios.get(`${process.env.REACT_APP_URL2}/orders/getnotificationusers?orderheaderid=${orderheaderid}`)
      .then((res) => {
        if (res.data.status) {
          let arr1 = [];
          let data2;
          let tokenarr = []
          console.log(res)

          res.data.details.map((val) => {
            arr1.push({
              "notificationid": 0,
              "notificationdate": dayjs().format('YYYY-MM-DD HH:mm:ss'),
              "Title": "Staff Asigned",
              "message": `${val.staffname} has been 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": 1,
              "notifyreason": 'Staff Assigned'
              // "sound": "ring",
              // "click_action": "FLUTTER_NOTIFICATION_CLICK",
              // "firstname": val.firstname

            });
            tokenarr.push(val.userfcmtoken);

          })



          data2 = {
            "Title": "Staff Asigned",
            "message": `A Staff has been 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 assigned ${orderid}`,
              "title": "Legendary",
              "sound": "ring",
              "content_available": true,
              "click_action": "FLUTTER_NOTIFICATION_CLICK"
            }
          }
          let grpnotifyobj = {
            "notifications": arr1,
            "fcmmodel": fcmmodel
          }
          console.log("grpnotifyobj")
          console.log(grpnotifyobj)
          sendgroupnotification(grpnotifyobj)
          // notificationpush(obj2, val.userfcmtoken);
          // notificationpush(arr1,tokenarr);
          // enqueueSnackbar('Notifications 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"

      >
       <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
        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>

              }
            </>
            :

            <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 }} direction='row' justifyContent='flex-end' spacing={5}>
            {(stafflist.length > 0) &&
              <>
                <Button1 sx={{ width: '130px' }} variant='contained' onClick={assignok}>OK</Button1>
                <Button1 sx={{ width: '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: '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="row" spacing={2}
                sx={{ mt: { md: 0, xs: 2 } }}
              >

                {/* <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' }}
                      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 } }}
                      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>
                      <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;