import {
    FormControl,
    InputAdornment,
    Grid,
    Typography,
    Stack,
    Box,
    // Autocomplete,
    Button,
    // Stepper,
    // Step,
    // StepLabel,
    TextField,
    Autocomplete,
    CardActions,
    // CardActions,
    Chip,
    // AvatarGroup,
    //   RadioGroup,
    //   Radio
    Avatar,
    // List,
    // ListItem,
    // IconButton,
    // ListItemAvatar,
    // ListItemText,
    // Menu,
    // MenuItem,
    // ListItemIcon,
    // Link,
    Divider,
    Table,
    TableContainer,
    TableRow,
    TableCell,
    TableHead,
    TableBody,
    // FormLabel,
    Tooltip,
    DialogTitle,
    DialogContent,
    Checkbox,
    DialogActions,
    CircularProgress,
    ButtonGroup
    // LinkOutlined
} from '@mui/material';
import { useNavigate } from 'react-router';
import { PopupTransition } from 'components/@extended/Transitions';
// var utc = require('dayjs/plugin/utc')

import axios from 'axios';
import { useTheme } from '@mui/material/styles';
// import { usePlacesWidget } from "react-google-autocomplete";
import Geocode from "react-geocode";
// import {setApi} from "react-geocode";
import Autocomplete1 from "react-google-autocomplete";
// import logo from 'assets/images/location.png'

import {
    // EditOutlined,
    PlusOutlined,
    SearchOutlined
} from '@ant-design/icons';

import { DeleteOutlined } from '@ant-design/icons';

import MainCard from 'components/MainCard';
import {
    EnvironmentOutlined,
    // LinkOutlined, 
    // MailOutlined,
    // MoreOutlined,
    // PhoneOutlined
} from '@ant-design/icons';
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
// import VisibilityIcon from '@mui/icons-material/Visibility';
// import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled';
// import EditCalendarIcon from '@mui/icons-material/EditCalendar';
import AccessibilityNewIcon from '@mui/icons-material/AccessibilityNew';

// import { PatternFormat } from 'react-number-format';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

// import DialogTitle from '@mui/material/DialogTitle';
import Dialog from '@mui/material/Dialog';
import {
    useEffect, useState, Fragment
    //  useReducer 
} from 'react';
// import { Label } from '@mui/icons-material';
import dayjs from 'dayjs';
// import { useDispatch } from 'react-redux';
// import { openSnackbar, closeSnackbar } from 'store/reducers/snackbar';
// import {Autocompletemap} from 'pages/autocompletemap'
import { enqueueSnackbar } from 'notistack';
// import { CheckBox } from '@mui/icons-material';
// dayjs.extend(utc)




const Createorder = () => {





    const generatenumbers = (n) => {
        let arr = []
        for (let i = 1; i <= n; i++) {
            arr.push({ label: i.toString() });
        }
        return arr;
    }
    // console.log(process.env.REACT_APP_GOOGLE_MAPS_API_KEY)
    Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY)



    const navigate = useNavigate();
    const [open, setOpen] = useState({});
    const [open1, setOpen1] = useState('')
    const [open2, setOpen2] = useState(false)
    const [shift, setShift] = useState(1);
    const [clientlist, setClientlist] = useState([])
    const [clientdetail, setClientdetail] = useState([]);
    const [eventname, setEventname] = useState('');

    const [startdate, setStartdate] = useState(dayjs().add(1, 'day').format('MM-DD-YYYY'));
    const [enddate, setEnddate] = useState(dayjs().add(1, 'day').format('MM-DD-YYYY'));


    const [positionoptions] = useState(generatenumbers(25));



    const [roleoptions, setRoleoptions] = useState([]);

    const theme = useTheme();

    const [otherinstructions, setOtherinstructions] = useState('');

    const [attireslist, setAttireslist] = useState([]);
    const [serviceaddonslist, setServiceaddonslist] = useState([]);
    const [orderaddonobj, setOrderaddonobj] = useState([]);

    const [stafflist, setStafflist] = useState([]);
    const [loading2, setLoading2] = useState(false);



    const [shiftarr, setShiftarr] = useState([]);
    const [shiftarr1, setShiftarr1] = useState([]);

    const [orderarr, setOrderarr] = useState([]);


    const [alertmessage, setAlertmessage] = useState('');
    const [tabstatus, setTabstatus] = useState('')
    const [tenantinfo, setTenantinfo] = useState({})


    useEffect(() => {
        if (localStorage.getItem('tenantid')) {
            setOrderarr([{
                sno: 1,
                address: ''
            }])
        }
    }, [clientdetail])

    const fetchtenantinfo = async (tid) => {
        await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
            .then((res) => {
                console.log(res)
                if (res.data.status) {
                    setTenantinfo(res.data.details);
                }
            }).catch((err) => {
                console.log(err)
            })
    }

    const opentoast = (message) => {

        enqueueSnackbar(message, {
            variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' },
            autoHideDuration: 2000
        })
        console.log(alertmessage)


    }

    function closeAddressModal() {
        setOpen2(false);
    }
    const createsubmitobj1 = () => {


        let orderdetailtemp = []
        let orderdetailtemp1 = []

        let orderamount1 = 0;
        let ordervalue1 = 0;
        let taxamount1 = 0;
        let itemcount1 = 0;
        let shiftcount = 0;

        let datecheck = false;
        let shiftcheck = false;
        let timeupcomingcheck = false;
        let shiftcontactcheck = false;


        let loweststarttime = shiftarr1[0].details[0].starttime;


        let dateres11 = dayjs().diff(dayjs(`${dayjs(startdate).format('YYYY-MM-DD')}`), 'd');


        let temp = shiftarr1[shiftarr1.length - 1].details;

        console.log(temp.length, shiftarr1[shiftarr1.length - 1].orderattires.length)


        console.log('shiftarr1')
        console.log(shiftarr1)
        shiftarr1.map((val3) => {
            shiftcount = shiftcount + 1;

            console.log("val3");
            console.log(val3)
            if (val3.clientstaff.length === 0) {
                shiftcontactcheck = true;
            }
            val3.details.map((val1) => {
                console.log('leasttime', (val1.starttime.$d > val1.endtime.$d))
                if (val1.starttime.$d < loweststarttime.$d) {
                    loweststarttime = val1.starttime
                }
                let dateres22 = dayjs().diff(dayjs(`${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(val1.starttime).format('HH:mm:ss')}`), 'm');
                if (dateres22 > 0 || isNaN(dateres22)) {
                    timeupcomingcheck = true;

                }
                console.log('timeupcomingcheck')
                console.log(timeupcomingcheck, dateres22)

                console.log(val1)
                let dateres = dayjs(`${dayjs(enddate).format('YYYY-MM-DD')} ${dayjs(val1.endtime).format('HH:mm:ss')}`)
                    .diff(dayjs(`${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(val1.starttime).format('HH:mm:ss')}`), 'm');


                if (dateres < 240) {
                    datecheck = true;
                }
                console.log("val1")
                console.log(val1)
                console.log(shiftcheck)

                if (!val1.role || !val1.starttime || !val1.endtime || !val1.orderqty) {
                    shiftcheck = true
                }
            })

            let tempobj1 = [];
            let temptenantstaffobj1 = [];
            let tempattire1 = [];

            val3.details.map((val) => {

                orderamount1 = orderamount1 + parseFloat(val.landingamount);
                ordervalue1 = ordervalue1 + parseFloat(val.productsumprice);
                taxamount1 = taxamount1 + val.taxamount;
                itemcount1 = itemcount1 + val.orderqty;
                console.log('val.productsumprice')
                console.log(val.productsumprice)
                console.log(ordervalue1)





                let tempobj = {
                    "orderdetailid": val.orderdetailid,
                    "orderheaderid": val.orderheaderid,
                    "tenantid": val.tenantid,
                    "locationid": val.locationid,
                    "shiftid": val3.sno,
                    "locationaddress": val3.address,
                    "locationcity": val3.city,
                    "locationstate": val3.state,
                    "locationlat": val3.latitude.toString(),
                    "locationlong": val3.longitude.toString(),
                    "productid": val.productid,
                    "productname": val.productname,
                    "productdescription": val.productdescription,
                    "starttime": `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(val.starttime).format('HH:mm:ss')}`,
                    "endtime": `${dayjs(enddate).format('YYYY-MM-DD')} ${dayjs(val.endtime).format('HH:mm:ss')}`,
                    "unpaidbreak": val.unpaidbreak,
                    "orderqty": val.orderqty,
                    "price": val.price,
                    "unitid": val.unitid,
                    "unitname": val.unitname,
                    "landingamount": parseFloat(parseFloat(val.landingamount.toString()).toFixed(2)),
                    "taxamount": parseFloat(parseFloat(val.taxamount.toString()).toFixed(2)),
                    "productsumprice": parseFloat(parseFloat(val.productsumprice.toString()).toFixed(2)),
                    "workhours": parseFloat(val.workhours),
                    "orderattires": []
                }

                tempobj1.push({
                    "shiftid": 0,
                    "orderdetailid": val.orderdetailid,
                    "orderheaderid": val.orderheaderid,
                    "tenantid": clientdetail.tenantid,
                    "productid": val.productid,
                    "productname": val.productname,
                    "productdescription": val.productdescription,
                    "starttime": dayjs(`${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(val.starttime).format('HH:mm:ss')}`)
                        .format('YYYY-MM-DD HH:mm:ss'),
                    "endtime": dayjs(`${dayjs(enddate).format('YYYY-MM-DD')} ${dayjs(val.endtime).format('HH:mm:ss')}`)
                        .format('YYYY-MM-DD HH:mm:ss'),
                    "workhours": `${Math.floor(val.workhours)}.${Math.floor((val.workhours * 60) - (Math.floor(val.workhours) * 60))}`,
                    "unpaidbreak": val.unpaidbreak,
                    "price": val.price,
                    "orderqty": val.orderqty,
                    "unitid": val.unitid,
                    "unitname": val.unitname,
                    "taxpercent": 0.00,
                    "landingamount": parseFloat(parseFloat(val.landingamount.toString()).toFixed(2)),
                    "taxamount": parseFloat(parseFloat(val.taxamount.toString()).toFixed(2)),
                    "productsumprice": parseFloat(parseFloat(val.productsumprice.toString()).toFixed(2)),
                    "orderattires": []
                })



                console.log("val3")

                console.log(val3)
                val3.orderattires.map((val2) => {
                    if (val.sno === val2.ordersno) {


                        tempobj.orderattires.push({
                            "orderattireid": val2.orderattireid,
                            "orderdetailid": val2.orderdetailid,
                            "apptypeid": val2.apptypeid,
                            "attireid": val2.attireid,
                            "attirename": val2.attirename,
                            "Status": val2.Status
                        })

                        tempattire1.push({
                            "orderattireid": val2.orderattireid,
                            "orderdetailid": val2.orderdetailid,
                            "apptypeid": val2.apptypeid,
                            "attireid": val2.attireid,
                            "attirename": val2.attirename,
                            "Status": val2.Status
                        })
                    }
                })



                orderdetailtemp.push(tempobj)




            })

            val3.clientstaff.map((val11) => {
                temptenantstaffobj1.push({
                    "ordercontactid": 0,
                    "shiftid": 0,
                    "orderheaderid": 0,
                    "tenantid": clientdetail.tenantid,
                    "userid": val11.userid,
                    "tenantstaffid": 12,
                    "contactname": val11.contactname,
                    "contactno": val11.contactno,
                    "shift": val11.shift
                })

            })




            orderdetailtemp1.push({
                "shiftid": 0,
                "orderheaderid": 0,
                "tenantid": clientdetail.tenantid,
                "locationid": 0,
                "locationaddress": val3.address,
                "locationcity": val3.city,
                "locationstate": val3.state,
                "locationlat": val3.latitude.toString(),
                "locationlong": val3.longitude.toString(),
                "orderdetails": tempobj1,
                "ordercontacts": temptenantstaffobj1
            })

        })

        let addonobj = [];
        orderaddonobj.map((val) => {
            addonobj.push({
                "orderaddonid": val.orderaddonid,
                "orderheaderid": val.orderheaderid,
                "tenantid": clientdetail.tenantid,
                "addonid": val.addonid,
                "addon": val.addon,
                "status": val.status
            })



        })


        if (!clientdetail.tenantname) {
            setAlertmessage('choose client name');
            opentoast('choose client name');
        } else if (!eventname) {
            setAlertmessage('choose Event name');
            opentoast('choose Event name');
        } else if (!startdate || !enddate) {
            setAlertmessage('choose shift Date');
            opentoast('choose shift Date');
        } else if (datecheck) {
            setAlertmessage('Shift time should be greater than 4 hours');
            opentoast('Shift time should be greater than 4 hours');
        } else if (dateres11 > 0 || timeupcomingcheck) {
            setAlertmessage('choose upcoming date and time');
            opentoast('choose upcoming date and time');
        } else if (shiftarr1.length <= 0) {
            setAlertmessage('Add shift');
            opentoast('Add shift');
        }
        else if (shiftcheck) {
            setAlertmessage('choose all shift details');
            opentoast('choose all shift details');
        }
        else if (shiftcontactcheck) {
            opentoast('choose shift contacts');
        }
        else {



            let obj =
            {
                "orderheaderid": 0,
                "tenantid": clientdetail.tenantid,
                "locationid": 0,
                "customerid": 0,
                "configid": 4,
                "orderid": "",
                "orderdate": dayjs()
                    .format('YYYY-MM-DD HH:mm:ss'),
                "orderstatus": "pending",
                "pending": dayjs()
                    .format('YYYY-MM-DD HH:mm:ss'),

                "orderamount": parseFloat(parseFloat(orderamount1).toFixed(2)),
                "taxpercent": 0.0,
                "taxamount": parseFloat(parseFloat(taxamount1).toFixed(2)),
                "ordercharges": 0,
                "ordervalue": parseFloat(parseFloat(ordervalue1).toFixed(2)),
                "itemcount": itemcount1,
                "refundvalue": 0,
                "unserviceableitems": 0,
                "paymenttype": 0,
                "paymentstatus": 0,
                "startdate": `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(startdate).format('HH:mm:ss')}`,
                "enddate": `${dayjs(enddate).format('YYYY-MM-DD')} ${dayjs(enddate).format('HH:mm:ss')}`,
                "deliveryaddress": "",
                "deliverylocationid": 0,
                "deliverylat": "",
                "deliverylong": "",
                "ordernotes": eventname,
                "remarks": otherinstructions,
                "primarycontact": '',
                "primarycontactno": '',
                "seccontact": '',
                "seccontactno": '',
                "tenantuserid": clientdetail.tenantid,
                "orderdetails": orderdetailtemp,
                "orderaddons": addonobj
            }
            console.log(obj)



            let obj1 = {

                "orderheaderid": 0,
                "tenantid": clientdetail.tenantid,
                "locationid": 0,
                "customerid": 0,
                "configid": 4,
                "orderid": "",
                "orderdate": dayjs()
                    .format('YYYY-MM-DD HH:mm:ss'),
                "orderstatus": "pending",
                "pending": dayjs()
                    .format('YYYY-MM-DD HH:mm:ss'),
                "orderamount": parseFloat(parseFloat(orderamount1).toFixed(2)),
                "taxpercent": 0.0,
                "taxamount": parseFloat(parseFloat(taxamount1).toFixed(2)),
                "ordercharges": 0,
                "ordervalue": parseFloat(parseFloat(ordervalue1).toFixed(2)),
                "itemcount": shiftcount,
                "startdate": `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(loweststarttime.$d).format('HH:mm:ss')}`,
                "enddate": `${dayjs(enddate).format('YYYY-MM-DD')} ${dayjs(enddate).format('HH:mm:ss')}`,
                "ordernotes": eventname,
                "remarks": otherinstructions,
                "primarycontact": '',
                "primarycontactno": '',
                "seccontact": '',
                "seccontactno": '',
                "tenantuserid": 0,
                "ordershifts": orderdetailtemp1,
                "orderaddons": addonobj
            }
            console.log("obj1,orderdetailtemp1")
            console.log(obj1, orderdetailtemp1)






            navigate('/orders/create/review', {
                state: {
                    obj: obj, client: clientdetail,
                    obj1: obj1

                }
            })

        }

    }


    useEffect(() => {
        if (localStorage.getItem('tenantid')) {
            clientdetails(localStorage.getItem('tenantid'));
            fetchtenantinfo(localStorage.getItem('tenantid'))
        }

        // fetchattires();
        // fetchserviceaddons();
        let arr = [];
        arr.push({
            sno: arr.length + 1,
            address: "",
            starttime: "",
            endtime: "",
            latitude: '',
            longitude: '',
            state: "",
            city: "",
            orderattires: [],
            details: [{
                sno: 1,
                role: '',
                position: '',
                uniform: '',
                cost: 0,

                "orderdetailid": 0,
                "orderheaderid": 0,
                "tenantid": '',
                "locationid": 0,
                "productid": 1,
                "productname": "",
                "productdescription": "description1",
                "starttime": '',
                "endtime": '',
                "unpaidbreak": 0,
                "orderqty": 0,
                "price": 0,
                "unitid": 1,
                "unitname": "",
                "landingamount": 0,
                "taxamount": 0,
                "productsumprice": 0,
                "workhours": ''
            }],
            "clientstaff": []

        })
        setShiftarr1(arr)
        setShiftarr([])
    }, [clientdetail.tenantname])








    useEffect(() => {
        console.log('shiftarr')
        console.log(shiftarr)

    }, [shiftarr])

    const clicked1 = (e) => {
        setShift(e);
    }

    const dialogopen = (i, result) => {
        console.log(i, result)
        setOpen({ shiftsno: result.sno, sno: i.sno })
    }
    const dialogclose = () => {

        setOpen('')
    }


    const roleedit = (i, e, roleamount, result, result1) => {
        let res1 = shiftarr1[result1.sno - 1].details.find((val) => val.productid === result.serviceid)


        if (!res1) {


            let arr = shiftarr1;
            arr[result1.sno - 1].details[i.sno - 1].role = e.target.textContent;
            arr[result1.sno - 1].details[i.sno - 1].cost = roleamount;
            arr[result1.sno - 1].details[i.sno - 1].tenantid = result.tenantid;
            arr[result1.sno - 1].details[i.sno - 1].productname = result.servicename;
            arr[result1.sno - 1].details[i.sno - 1].productdescription = result.servicename;
            arr[result1.sno - 1].details[i.sno - 1].unitname = result.unitname;
            arr[result1.sno - 1].details[i.sno - 1].unitid = result.unitid;
            arr[result1.sno - 1].details[i.sno - 1].price = roleamount;
            arr[result1.sno - 1].details[i.sno - 1].taxamount = result.taxamount;
            arr[result1.sno - 1].details[i.sno - 1].productid = result.serviceid;

            console.log('result sum amount')
            console.log(result)
            console.log(shiftarr1[result1.sno - 1].details)
            if (arr[result1.sno - 1].details[i.sno - 1].orderqty && arr[result1.sno - 1].details[i.sno - 1].price) {
                arr[result1.sno - 1].details[i.sno - 1].landingamount = arr[result1.sno - 1].details[i.sno - 1].orderqty * arr[result1.sno - 1].details[i.sno - 1].price;

                if (arr[result1.sno - 1].details[i.sno - 1].starttime && arr[result1.sno - 1].details[i.sno - 1].endtime) {
                    let dateres = dayjs(arr[result1.sno - 1].details[i.sno - 1].endtime).diff(dayjs(arr[result1.sno - 1].details[i.sno - 1].starttime), 'm');

                    console.log(dateres)
                    if (dateres >= 240) {
                        console.log("dateres")
                        arr[result1.sno - 1].details[i.sno - 1].landingamount = (arr[result1.sno - 1].details[i.sno - 1].orderqty * (dateres * (arr[result1.sno - 1].details[i.sno - 1].price / 60))).toFixed(2);
                        arr[result1.sno - 1].details[i.sno - 1].workhours = (dateres / 60).toFixed(2)
                    }

                    console.log(arr[result1.sno - 1].details[i.sno - 1].orderqty * (dateres * (arr[result1.sno - 1].details[i.sno - 1].price / 60)))
                }
                arr[result1.sno - 1].details[i.sno - 1].productsumprice = arr[result1.sno - 1].details[i.sno - 1].landingamount + arr[result1.sno - 1].details[i.sno - 1].taxamount;
            }
            console.log(arr)
            setShiftarr1([...arr])
        } else {
            setAlertmessage('Selected role Already chosen');
            opentoast('Selected role Already chosen')
        }
    }
    const positionedit = (i, e, result, result1) => {


        let arr = shiftarr1;
        arr[result1.sno - 1].details[i.sno - 1].position = e.target.textContent;
        arr[result1.sno - 1].details[i.sno - 1].orderqty = parseInt(e.target.textContent);
        if (arr[result1.sno - 1].details[i.sno - 1].orderqty && arr[result1.sno - 1].details[i.sno - 1].price) {
            arr[result1.sno - 1].details[i.sno - 1].landingamount = arr[result1.sno - 1].details[i.sno - 1].orderqty * arr[result1.sno - 1].details[i.sno - 1].price;
            arr[result1.sno - 1].details[i.sno - 1].productsumprice = arr[result1.sno - 1].details[i.sno - 1].landingamount + arr[result1.sno - 1].details[i.sno - 1].taxamount;

            if (arr[result1.sno - 1].details[i.sno - 1].starttime && arr[result1.sno - 1].details[i.sno - 1].endtime) {
                let dateres = dayjs(arr[result1.sno - 1].details[i.sno - 1].endtime).diff(dayjs(arr[result1.sno - 1].details[i.sno - 1].starttime), 'm');

                console.log(dateres)
                if (dateres >= 240) {
                    console.log("dateres")
                    arr[result1.sno - 1].details[i.sno - 1].landingamount = (arr[result1.sno - 1].details[i.sno - 1].orderqty * (dateres * (arr[result1.sno - 1].details[i.sno - 1].price / 60))).toFixed(2)
                    arr[result1.sno - 1].details[i.sno - 1].workhours = (dateres / 60).toFixed(2)
                }

                console.log(arr[result1.sno - 1].details[i.sno - 1].orderqty * (dateres * (arr[result1.sno - 1].details[i.sno - 1].price / 60)))
            }
            arr[result1.sno - 1].details[i.sno - 1].productsumprice = arr[result1.sno - 1].details[i.sno - 1].landingamount + arr[result1.sno - 1].details[i.sno - 1].taxamount;
        }

        setShiftarr1([...arr])
        console.log(arr)
    }

    const unpaidbreakedit = (i, e, result1) => {


        let arr = shiftarr1;
        arr[result1.sno - 1].details[i.sno - 1].unpaidbreak = parseInt(e.target.textContent.slice(0, 2));
        console.log(parseInt(e.target.textContent.slice(0, 2)))
        setShiftarr1([...arr])

    }

    const addshiftarr1 = () => {
        let temp = shiftarr1[shiftarr1.length - 1].details;
        console.log("temp")
        console.log(temp.length, shiftarr1[shiftarr1.length - 1].orderattires.length)

        if (temp[temp.length - 1].role && temp[temp.length - 1].position &&
            temp[temp.length - 1].starttime && temp[temp.length - 1].endtime
        ) {


            let arr = shiftarr1;
            arr.push({
                sno: arr.length + 1,
                address: "",
                starttime: "",
                endtime: "",
                latitude: '',
                longitude: '',
                state: "",
                city: "",
                orderattires: [],
                details: [{
                    sno: 1,
                    role: '',
                    position: '',
                    uniform: '',
                    cost: 0,
                    "orderdetailid": 0,
                    "orderheaderid": 0,
                    "tenantid": '',
                    "locationid": 0,
                    "productid": 1,
                    "productname": "",
                    "productdescription": "description1",
                    "starttime": '',
                    "endtime": '',
                    "unpaidbreak": 0,
                    "orderqty": 0,
                    "price": 0,
                    "unitid": 1,
                    "unitname": "",
                    "landingamount": 0,
                    "taxamount": 0,
                    "productsumprice": 0,
                    "workhours": ''

                }],
                "clientstaff": []

            })
            setShiftarr1([...arr])
            console.log(arr)
        } else {

            if (!temp[temp.length - 1].role) {
                setAlertmessage('choose Previous shift role')
                opentoast('choose Previous shift role');
            } else if (!temp[temp.length - 1].position) {
                setAlertmessage('choose Previous shift Count')
                opentoast('choose Previous shift Count');
            } else if (!temp[temp.length - 1].starttime) {
                setAlertmessage('choose Previous shift Start time')
                opentoast('choose Previous shift Start time');
            } else if (!temp[temp.length - 1].endtime) {
                setAlertmessage('choose Previous shift End time')
                opentoast('choose Previous shift End time');
            }
        }


    }

    const deleteshiftarr1 = (i) => {
        let arr = shiftarr1;
        console.log(i.sno)
        if (arr.length > 1) {


            arr.splice(i.sno - 1, 1);
            arr.map((val, i) => {
                val.sno = i + 1
            })
            setShiftarr1([...arr])
        }
    }



    const addarr = (result) => {
        if (clientdetail.tenantname
            && result.details[result.details.length - 1].role
            && result.details[result.details.length - 1].position
            && result.details[result.details.length - 1].starttime
            && result.details[result.details.length - 1].endtime



        ) {



            let arr = shiftarr1;
            arr[result.sno - 1].details.push({
                sno: arr[result.sno - 1].details.length + 1,
                role: '',
                position: '',
                uniform: '',
                cost: 0,

                "orderdetailid": 0,
                "orderheaderid": 0,
                "tenantid": '',
                "locationid": 0,
                "productid": 1,
                "productname": "",
                "productdescription": "description1",

                "starttime": '',
                "endtime": '',
                "unpaidbreak": 0,
                "orderqty": 0,
                "price": 0,
                "unitid": 1,
                "unitname": "",
                "landingamount": 0,
                "taxamount": 0,
                "productsumprice": 0,
                "workhours": ''

            })
            setShiftarr1([...arr])
        } else {
            if (!clientdetail.tenantname) {
                setAlertmessage('choose client')
                opentoast('choose client')
            } else if (!result.details[result.details.length - 1].role) {
                setAlertmessage('choose Role')
                opentoast('choose Role')
            } else if (!result.details[result.details.length - 1].position) {
                setAlertmessage('choose Position')
                opentoast('choose Position')
            } else if (!result.details[result.details.length - 1].starttime) {
                setAlertmessage('choose starttime')
                opentoast('choose starttime')
            } else if (!result.details[result.details.length - 1].endtime) {
                setAlertmessage('choose endtime')
                opentoast('choose endtime')
            }
        }
        console.log(result)
    }

    const deletearr = (i, result) => {
        if (result.details.length > 1) {
            let arr = shiftarr1;
            console.log('result')
            arr[result.sno - 1].details.splice(i.sno - 1, 1);

            arr[result.sno - 1].details.map((val, i) => {
                val.sno = i + 1
            })
            let res = arr[result.sno - 1].orderattires.find((val) => val.ordersno === i.sno);
            console.log('res')
            console.log(res)
            if (res) {
                arr[result.sno - 1].orderattires.splice(res.sno - 1, 1);
                arr[result.sno - 1].orderattires.map((val, i) => {
                    val.sno = i + 1;
                    if (res.ordersno <= val.sno) {
                        val.ordersno = val.ordersno - 1;
                    }
                })
            }
            setShiftarr1([...arr]);
        } else {
            let arr = shiftarr1;
            arr[result.sno - 1].details[0] =
            {
                sno: 1,
                role: '',
                position: '',
                uniform: '',
                cost: 0,

                "orderdetailid": 0,
                "orderheaderid": 0,
                "tenantid": '',
                "locationid": 0,
                "productid": 1,
                "productname": "",
                "productdescription": "description1",

                "starttime": '',
                "endtime": '',
                "unpaidbreak": 0,
                "orderqty": 0,
                "price": 0,
                "unitid": 1,
                "unitname": "",
                "landingamount": 0,
                "taxamount": 0,
                "productsumprice": 0,
                "workhours": ''

            }
            setShiftarr1([...arr]);
        }
    }

    const editorderattire = (e, val2, val1, sno, result) => {
        let arr = shiftarr1[result.sno - 1].orderattires;
        console.log(shiftarr1, result)
        console.log("sno", sno)
        console.log("result", result)
        let arr1 = shiftarr1;
        let res2 = arr.find((val) => (val.ordersno === sno));
        let res1 = arr.find((val) => (val.apptypeid === val2.apptypeid));

        if (res2) {
            if (!res1) {
                arr.push({
                    "orderattireid": 0,
                    "orderdetailid": 0,
                    "apptypeid": val2.apptypeid,
                    "attireid": val2.attireid,
                    "attirename": val2.attirename,
                    "Status": val2.status,
                    "sno": arr.length + 1,
                    'ordersno': sno

                })
            } else {
                arr[res2.sno - 1] = {
                    "orderattireid": 0,
                    "orderdetailid": 0,
                    "apptypeid": val2.apptypeid,
                    "attireid": val2.attireid,
                    "attirename": val2.attirename,
                    "Status": val2.status,
                    "sno": res2.sno,
                    'ordersno': sno

                }
            }


        } else {
            arr.push({
                "orderattireid": 0,
                "orderdetailid": 0,
                "apptypeid": val2.apptypeid,
                "attireid": val2.attireid,
                "attirename": val2.attirename,
                "Status": val2.status,
                "sno": arr.length + 1,
                'ordersno': sno

            })
        }
        arr1[result.sno - 1].orderattires = arr;
        setShiftarr1([...arr1])


        console.log('attireobj')
        console.log(arr)
        console.log(arr1)




    }

    const editorderaddonobj = (e, val2) => {
        let arr = orderaddonobj;
        let res = arr.find((val) => (val.addon === val2.addon));
        if (!res
        ) {
            let res1 = arr.find((val) => (val.apptypeid === val2.apptypeid));
            if (!res1) {
                arr.push({
                    "orderaddonid": 0,
                    "orderheaderid": 0,
                    "tenantid": clientdetail.tenantid,
                    "addonid": val2.addonid,
                    "addon": val2.addon,
                    "status": val2.status,
                    "apptypeid": val2.apptypeid,
                    "sno": arr.length + 1
                })
                setOrderaddonobj([...arr])
            } else {
                console.log(res1)
                arr[res1.sno - 1] = {
                    "orderaddonid": 0,
                    "orderheaderid": 0,
                    "tenantid": clientdetail.tenantid,
                    "addonid": val2.addonid,
                    "addon": val2.addon,
                    "status": val2.status,
                    "apptypeid": val2.apptypeid,
                    "sno": res1.sno
                }
                setOrderaddonobj([...arr])

            }


        }


        console.log(arr)


    }

    const clientdetails = async (tid) => {

        try {

            await axios.get(`${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}`)

                .then((res) => {
                    if (res.data.status) {

                        setClientdetail(res.data.details)


                    }


                }).catch((err) => {
                    console.log(err)

                })

        } catch (err) {
            console.log(err);

        }
    }

    const fetchroles = async (tenid) => {

        try {

            await axios.get(`${process.env.REACT_APP_URL2}/tenants/getservices/?tenantid=${tenid}`)

                .then((res) => {
                    if (res.data.message === "Successful") {
                        let arr = []
                        res.data.details.map((val) => {

                            arr = [...arr, {
                                ...val, label: `${val.servicename}`
                            }];
                        })

                        setRoleoptions(arr)
                        console.log(res.data.details)

                    }

                }).catch((err) => {
                    console.log(err)

                })

        } catch (err) {
            console.log(err);

        }
    }



    const fetchtenantstaffs = async (tenid) => {
        setLoading2(true);
        try {
            await axios.get(`${process.env.REACT_APP_URL2}/tenantstaff/get?tenantid=${tenid}`)
                .then((res) => {
                    console.log(res)
                    if (res.data.message === "Successful") {

                        setStafflist(res.data.details);
                    }
                    setLoading2(false);


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

                })

        } catch (err) {
            console.log(err);
            setLoading2(false);

        }
    }

    const fetchattires = async () => {

        try {
            await axios.get(`${process.env.REACT_APP_URL2}/orders/getattires`)
                .then((res) => {
                    if (res.data.message === "Success") {

                        setAttireslist(res.data.details)

                    }

                }).catch((err) => {
                    console.log(err)

                })

        } catch (err) {
            console.log(err);

        }
    }

    const fetchserviceaddons = async () => {

        try {
            await axios.get(`${process.env.REACT_APP_URL2}/orders/getserviceaddons`)
                .then((res) => {
                    if (res.data.message === "Success") {

                        console.log(res.data)
                        setServiceaddonslist(res.data.Details)

                    }

                }).catch((err) => {
                    console.log(err)

                })

        } catch (err) {
            console.log(err);

        }
    }




    return <>
        <Grid container rowSpacing={4.5} columnSpacing={2.75}>

            <CardActions
                sx={{
                    position: 'sticky',
                    top: '60px',
                    bgcolor: theme.palette.background.default,
                    zIndex: 1000,
                    width: '100%'
                }}
            >
                <Grid item xs={12}
                >
                    <Stack direction={{ md: 'row', xs: 'column' }} sx={{ p: 1, ml: 1 }} justifyContent="space-between" alignItems="center" width="100%">
                        <Typography variant="h3">Create Order</Typography>
                    </Stack>
                </Grid>
            </CardActions>

            <Grid item xs={12} height='100%' sx={{ mt: -2 }}>
                <Box
                    sx={{ overflow: 'auto', border: 1, borderColor: 'grey.200', borderRadius: 2, backgroundColor: '#fff', p: 3 }}
                >
                    <ButtonGroup variant="outlined" >
                        <Button variant={(tabstatus == 0) ? 'contained' : 'outlined'} onClick={() => {
                            setTabstatus(0)
                            setOrderarr([{
                                sno: 1,
                                address: ''
                            }])
                        }}>Single</Button>
                        <Button variant={(tabstatus == 1) ? 'contained' : 'outlined'} onClick={() => {
                            setTabstatus(1)
                            setOrderarr([{
                                sno: 1,
                                address: ''
                            }])
                        }}>Multiple</Button>
                    </ButtonGroup>
                    <Grid container spacing={1}>







                        <Grid item xs={12}>
                            <MainCard sx={{ mt: 2 }}>
                                <Grid container spacing={1}>
                                    {/*<Grid item xs={12}>
                                        <Typography variant="h4">Event</Typography>
                                    </Grid>

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


                                        <Stack direction={'column'} sx={{ height: '100%' }}>
                                            <TextField
                                                margin="normal"
                                                fullWidth
                                                id="eventname1"
                                                label="Event Name"
                                                variant="outlined"
                                                autoComplete='off'
                                                required
                                                value={eventname}
                                                onChange={(e) => {
                                                    if (clientdetail.tenantname) {


                                                        if (e.target.value.length <= 50) {
                                                            setEventname(e.target.value);
                                                        }
                                                    } else {
                                                        setAlertmessage('choose client');
                                                        opentoast('choose client');
                                                    }
                                                }}
                                                sx={{ m: 0 }}
                                            />

                                            <Typography variant="body2" align="right">{`${eventname.length}/50`}</Typography>
                                        </Stack>
                                    </Grid> */}
                                    <Grid item xs={12} md={6} sx={{ height: '100%' }} >

                                        <Box sx={{ border: '1px solid #bdbdbd', p: 1, borderRadius: 1 }}>

                                            <Typography color="secondary" sx={{ mr: 1 }}><EnvironmentOutlined />{' '}{tenantinfo.address1 || ''}</Typography>

                                        </Box>
                                    </Grid>
                                    <Grid item xs={12} md={6} sx={{ height: '100%' }}>

                                        <LocalizationProvider dateAdapter={AdapterDayjs} sx={{ width: '100%' }}>

                                            <DatePicker

                                                label='Date'

                                                onChange={(e) => {
                                                    let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
                                                    console.log('dateres11')
                                                    console.log(dateres11)
                                                    if (dateres11 <= 0) {
                                                        setStartdate(e);
                                                        setEnddate(e);

                                                    } else {
                                                        setAlertmessage('choose Upcoming Date');
                                                        opentoast('choose Upcoming Date')
                                                        setStartdate(NaN)
                                                    }

                                                }}
                                                value={dayjs(startdate)}
                                                sx={{ width: '100%' }}
                                                disablePast
                                                minDate={dayjs().add(1, 'day')}

                                            />
                                        </LocalizationProvider>

                                    </Grid>


                                </Grid>
                            </MainCard>

                        </Grid>





                        {shiftarr1.map((result) => {

                            return <>




                                <Grid item xs={12} key={result.sno}>
                                    <MainCard sx={{ height: '100%' }}>


                                        <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} sx={{ p: 1 }}>

                                            {/* <Typography variant="h4">Shift {result.sno}</Typography> */}

                                            <Stack direction={'row'} spacing={2}>

                                                {/* <Button
                                                    sx={{ minWidth: '10px !important' }}

                                                    color="warning" onClick={() => deleteshiftarr1({ sno: result.sno })}><DeleteOutlined /></Button> */}
                                            </Stack>
                                        </Stack>

                                        <Grid container spacing={2} sx={{ mb: 2 }}>

                                            {/* <Grid item xs={12} md={6}>

                                                <Autocomplete1
                                                    className='automap'
                                                    apiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}
                                                    style={{
                                                        width: "100%", height: '40px', borderRadius: '5px',
                                                        border: '1px solid #e0e0e0', textIndent: '10px', outline: 'none',
                                                        paddingLeft: '30px',
                                                        backgroundSize: '14px'
                                                    }}
                                                    onPlaceSelected={(place) => {
                                                        let city1, state, zipcode1, suburb1;
                                                        for (let i = 0; i < place.address_components.length; i++) {
                                                            for (let j = 0; j < place.address_components[i].types.length; j++) {
                                                                switch (place.address_components[i].types[j]) {
                                                                    case "locality":
                                                                        city1 = place.address_components[i].long_name;
                                                                        break;
                                                                    case "administrative_area_level_1":
                                                                        state = place.address_components[i].long_name;
                                                                        break;
                                                                    case "postal_code":
                                                                        zipcode1 = place.address_components[i].long_name;
                                                                        break;
                                                                    case "sublocality":
                                                                        suburb1 = place.address_components[i].long_name;
                                                                        break;
                                                                }
                                                            }
                                                        }
                                                        console.log(city1, state, zipcode1, suburb1)
                                                        let arr = shiftarr1;
                                                        try {
                                                            Geocode.fromAddress(place.formatted_address).then(
                                                                (response) => {
                                                                    const { lat, lng } = response.results[0].geometry.location;
                                                                    arr[result.sno - 1].latitude = lat;
                                                                    arr[result.sno - 1].longitude = lng;

                                                                    console.log(lat, lng);
                                                                },
                                                                (error) => {
                                                                    console.error(error);
                                                                }
                                                            );
                                                        } catch (err) {
                                                            console.log(err)
                                                        }
                                                        arr[result.sno - 1].city = city1 || '';
                                                        arr[result.sno - 1].state = state || '';

                                                        arr[result.sno - 1].address = place.formatted_address;
                                                        setShiftarr1([...arr]);

                                                    }}
                                                    options={{

                                                        types: ['address' || 'geocode']

                                                    }}
                                                    placeholder='Shift Location'

                                                    onChange={() => {
                                                        if (!eventname) {
                                                            setAlertmessage('Fill Event name');
                                                            opentoast('Fill Event name');
                                                        }
                                                    }}

                                                />

                                            </Grid> */}
                                            <Grid item xs={12}
                                                // md={6}
                                                sx={{ width: '100%' }}>

                                                <Grid container justifyContent={'right'} spacing={2} alignItems={'center'}>
                                                    {/* 
                                                    <Grid item>

                                                        <Stack direction={'row'} spacing={1} alignItems={'center'}>
                                                            {result.clientstaff.map((val11) => {

                                                                return <>
                                                                    <Tooltip title={val11.firstname}>
                                                                        <Avatar sx={{ bgcolor: '#2196f3', width: 30, height: 30 }} alt="A"  >{val11.firstname.charAt(0).toUpperCase()}</Avatar>
                                                                    </Tooltip>
                                                                </>
                                                            })

                                                            }
                                                        </Stack>

                                                    </Grid> */}
                                                    <Grid item>
                                                        <Button variant="outlined" onClick={() => {
                                                            // if (clientdetail.tenantid) {
                                                            //     fetchtenantstaffs(clientdetail.tenantid)

                                                            //     setOpen1(result.sno)
                                                            // } else {
                                                            //     opentoast('choose client')
                                                            // }
                                                            setOpen2(true)

                                                        }} color="success" startIcon={<PlusOutlined />}>ADD Clients</Button>
                                                    </Grid>
                                                </Grid>





                                                <Dialog
                                                    maxWidth="sm"
                                                    open={open2}
                                                    onClose={closeAddressModal}
                                                    sx={{ '& .MuiDialog-paper': { p: 0 }, '& .MuiBackdrop-root': { opacity: '0.5 !important' } }}
                                                >
                                                    <DialogTitle>
                                                        <Stack direction="row" justifyContent="space-between" alignItems="center">
                                                            <Typography variant="h5">Select Address</Typography>
                                                            {/* <Button startIcon={<PlusOutlined />} onClick={closeAddressModal} color="primary">
            Add New
          </Button> */}
                                                        </Stack>
                                                    </DialogTitle>
                                                    <Divider />
                                                    <DialogContent sx={{ p: 2.5 }}>
                                                        {/* <FormControl sx={{ width: '100%', pb: 2 }}>
                                                            <TextField
                                                                autoFocus
                                                                id="name"
                                                                InputProps={{
                                                                    startAdornment: (
                                                                        <InputAdornment position="start">
                                                                            <SearchOutlined />
                                                                        </InputAdornment>
                                                                    )
                                                                }}
                                                                placeholder="Search"
                                                                fullWidth

                                                                
                                                            />
                                                        </FormControl> */}
                                                        <Stack spacing={2}>
                                                            {/* <Address handlerAddress={handlerAddress} /> */}

                                                            {clientdetail.map((address) => (
                                                                <Box
                                                                    // onClick={() => handlerAddress(address)}
                                                                    onClick={() => {
                                                                        if (tabstatus == 1) {
                                                                            if (orderarr[0].address == '') {
                                                                                setOrderarr([{
                                                                                    sno: 1,
                                                                                    'address': address.address
                                                                                }])
                                                                            } else {
                                                                                if (orderarr.find((val2) => val2.address == address.address)) {
                                                                                    if (orderarr.length > 1) {
                                                                                        let arr = orderarr;
                                                                                        arr.splice(address.sno - 1, 1);
                                                                                        let arr1 = []
                                                                                        arr.map((val2, k) => {
                                                                                            arr1.push({
                                                                                                sno: k + 1,
                                                                                                'address': val2.address
                                                                                            })
                                                                                        })
                                                                                        setOrderarr([...arr1])
                                                                                    } else {
                                                                                        setOrderarr([{
                                                                                            sno: 1,
                                                                                            'address': ""
                                                                                        }])
                                                                                    }
                                                                                } else {
                                                                                    console.log(clientdetail)
                                                                                    let arr = orderarr;
                                                                                    arr.push({
                                                                                        sno: arr.length + 1,
                                                                                        'address': address.address
                                                                                    })
                                                                                    setOrderarr([...arr])
                                                                                }

                                                                            }

                                                                        }

                                                                        if (tabstatus == 0) {
                                                                            setOrderarr([{
                                                                                sno: 1,
                                                                                'address': address.address
                                                                            }])
                                                                        }

                                                                    }}
                                                                    key={address.contactno}
                                                                    sx={{
                                                                        width: '100%',
                                                                        border: '1px solid',
                                                                        borderColor: 'grey.200',
                                                                        borderRadius: 1,
                                                                        cursor: 'pointer',
                                                                        p: 1.25,
                                                                        '&:hover': {
                                                                            bgcolor: theme.palette.primary.lighter,
                                                                            borderColor: theme.palette.primary.lighter
                                                                        },
                                                                        bgcolor: (orderarr.find((val2) => val2.address == address.address)) ? theme.palette.primary.lighter : ''
                                                                    }}
                                                                >
                                                                    <Typography textAlign="left" variant="subtitle1">
                                                                        {address.firstname}
                                                                    </Typography>
                                                                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
                                                                        <Typography textAlign="left" variant="body2" color="secondary">
                                                                            {address.address}
                                                                        </Typography>
                                                                        <Typography textAlign="left" variant="body2" color="secondary">
                                                                            {address.contactno}
                                                                        </Typography>
                                                                        <Typography textAlign="left" variant="body2" color="secondary">
                                                                            {/* {address.email} */}
                                                                        </Typography>
                                                                    </Stack>
                                                                </Box>
                                                            ))}



                                                        </Stack>
                                                    </DialogContent>
                                                    <Divider />
                                                    <DialogActions sx={{ p: 2.5 }}>
                                                        <Button color="error"
                                                            onClick={closeAddressModal}
                                                        >
                                                            Cancel
                                                        </Button>
                                                        <Button
                                                            onClick={closeAddressModal}
                                                            color="primary" variant="contained">
                                                            Add
                                                        </Button>
                                                    </DialogActions>
                                                </Dialog>
                                            </Grid>

                                        </Grid>


                                        <TableContainer sx={{ width: '100%', borderBottom: 1, borderColor: 'divider' }}>
                                            <Table
                                                sx={{ width: '100%' }}
                                            >
                                                <TableHead>
                                                    <TableRow>
                                                        <TableCell>#</TableCell>
                                                        {/* <TableCell sx={{ minWidth: '170px' }}>Role</TableCell> */}
                                                        {/* <TableCell>Count</TableCell> */}
                                                        <TableCell>Schedule Time</TableCell>
                                                        {/* <TableCell>End Time</TableCell> */}
                                                        {/* <TableCell>Pickup Location</TableCell> */}
                                                        {/* <TableCell>Break</TableCell> */}
                                                        <TableCell>Drop Location</TableCell>
                                                        <TableCell align='center'>Value</TableCell>
                                                        {/* <TableCell align='center'>Action</TableCell> */}

                                                    </TableRow>
                                                </TableHead>
                                                <TableBody>

                                                    {orderarr.map((val) => {
                                                        return <>

                                                            <LocalizationProvider dateAdapter={AdapterDayjs} sx={{ width: '100%' }}>
                                                                <TableRow key={val.sno} >
                                                                    <TableCell>{val.sno}</TableCell>
                                                                    {/* <TableCell><Autocomplete
                                                                        margin="normal"
                                                                        fullWidth
                                                                        id="rolechoose"
                                                                        variant="outlined"
                                                                        freeSolo
                                                                        required
                                                                        isOptionEqualToValue={(option, value) => option.serviceid === value.productid}

                                                                        options={roleoptions.sort((a, b) => -b.categoryname.localeCompare(a.categoryname))}
                                                                        groupBy={(option) => option.categoryname}
                                                                        getOptionLabel={(option) => option.subcategoryname}

                                                                        value={
                                                                            {
                                                                                subcategoryname: val.role,
                                                                                productid: val.productid
                                                                            }}
                                                                        onChange={(e, result1) => {



                                                                            if (result1) {
                                                                                roleedit({ sno: val.sno }, e, result1.serviceamount, result1, result);
                                                                            } else {
                                                                                roleedit({ sno: val.sno }, e, 0, result);
                                                                            }


                                                                        }}

                                                                        renderInput={(params) => { return <><TextField {...params} variant="outlined" label='Role' /></> }}

                                                                        disabled={(result.address) ? false : true}



                                                                    />


                                                                    </TableCell>
                                                                    <TableCell><Autocomplete
                                                                        margin="normal"
                                                                        fullWidth
                                                                        id="rolechoose"
                                                                        label="Venue Type"
                                                                        variant="outlined"
                                                                        sx={{ width: '120px' }}
                                                                        required
                                                                        value={val.position}
                                                                        isOptionEqualToValue={(option, value) => option.label === value}

                                                                        onChange={(e, result1) => {
                                                                            if (result1) {
                                                                                positionedit({ sno: val.sno }, e, result1, result);
                                                                            } else {
                                                                                positionedit({ sno: val.sno }, e, result)
                                                                            }
                                                                        }}
                                                                        renderInput={(params) => {
                                                                            return (
                                                                                <>
                                                                                    <TextField {...params} label="Count" />
                                                                                </>
                                                                            );
                                                                        }}
                                                                        options={positionoptions}
                                                                        disabled={(result.address) ? false : true}

                                                                    /></TableCell> */}
                                                                    <TableCell>
                                                                        <TimePicker
                                                                            label="Schedule Time"
                                                                            timeSteps={{ minutes: 15 }}
                                                                            onChange={(e) => {
                                                                                console.log(e)

                                                                                let arr = shiftarr1;
                                                                                let dateres11 = dayjs().diff(dayjs(`${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(e).format('HH:mm:ss')}`), 'm');
                                                                                console.log('dateres11')
                                                                                console.log(dateres11)
                                                                                if (dateres11 < 0) {


                                                                                    arr[result.sno - 1].details[val.sno - 1].starttime = dayjs(e.$d);

                                                                                    arr[result.sno - 1].details[val.sno - 1].endtime = dayjs(dayjs(e.$d).add(4, 'hours').$d);


                                                                                    if (arr[result.sno - 1].details[val.sno - 1].orderqty && arr[result.sno - 1].details[val.sno - 1].price) {
                                                                                        arr[result.sno - 1].details[val.sno - 1].landingamount = arr[result.sno - 1].details[val.sno - 1].orderqty * arr[result.sno - 1].details[val.sno - 1].price;
                                                                                        arr[result.sno - 1].details[val.sno - 1].productsumprice = arr[result.sno - 1].details[val.sno - 1].landingamount + arr[result.sno - 1].details[val.sno - 1].taxamount;

                                                                                        if (arr[result.sno - 1].details[val.sno - 1].starttime && arr[result.sno - 1].details[val.sno - 1].endtime) {
                                                                                            let dateres = dayjs(arr[result.sno - 1].details[val.sno - 1].endtime).diff(dayjs(arr[result.sno - 1].details[val.sno - 1].starttime), 'm');

                                                                                            console.log(dateres)
                                                                                            if (dateres >= 240) {
                                                                                                console.log("dateres")
                                                                                                arr[result.sno - 1].details[val.sno - 1].landingamount = (arr[result.sno - 1].details[val.sno - 1].orderqty * (dateres * (arr[result.sno - 1].details[val.sno - 1].price / 60))).toFixed(2)
                                                                                                arr[result.sno - 1].details[val.sno - 1].workhours = (dateres / 60).toFixed(2)
                                                                                            }

                                                                                        }
                                                                                        arr[result.sno - 1].details[val.sno - 1].productsumprice = arr[result.sno - 1].details[val.sno - 1].landingamount + arr[result.sno - 1].details[val.sno - 1].taxamount;
                                                                                    }







                                                                                    setShiftarr1([...arr])

                                                                                } else {
                                                                                    setAlertmessage('choose upcoming Time');
                                                                                    opentoast('choose upcoming Time');
                                                                                }
                                                                            }
                                                                            }

                                                                            sx={{ width: '150px' }}
                                                                            value={val.starttime || null}


                                                                        />
                                                                    </TableCell>
                                                                    <TableCell>{val.address}</TableCell>
                                                                    {/* <TableCell>
                                                                        <TimePicker
                                                                            label="End Time"
                                                                            timeSteps={{ minutes: 15 }}
                                                                            onChange={(e) => {
                                                                                console.log(e)
                                                                                let arr = shiftarr1;

                                                                                arr[result.sno - 1].details[val.sno - 1].endtime = dayjs(e.$d);
                                                                                if (arr[result.sno - 1].details[val.sno - 1].orderqty && arr[result.sno - 1].details[val.sno - 1].price) {
                                                                                    arr[result.sno - 1].details[val.sno - 1].landingamount = arr[result.sno - 1].details[val.sno - 1].orderqty * arr[result.sno - 1].details[val.sno - 1].price;
                                                                                    arr[result.sno - 1].details[val.sno - 1].productsumprice = arr[result.sno - 1].details[val.sno - 1].landingamount + arr[result.sno - 1].details[val.sno - 1].taxamount;

                                                                                    if (arr[result.sno - 1].details[val.sno - 1].starttime && arr[result.sno - 1].details[val.sno - 1].endtime) {
                                                                                        let dateres = dayjs(arr[result.sno - 1].details[val.sno - 1].endtime).diff(dayjs(arr[result.sno - 1].details[val.sno - 1].starttime), 'm');

                                                                                        console.log(dateres)
                                                                                        if (dateres >= 240) {
                                                                                            console.log("dateres")
                                                                                            arr[result.sno - 1].details[val.sno - 1].landingamount = (arr[result.sno - 1].details[val.sno - 1].orderqty * (dateres * (arr[result.sno - 1].details[val.sno - 1].price / 60))).toFixed(2)
                                                                                            arr[result.sno - 1].details[val.sno - 1].workhours = (dateres / 60).toFixed(2)
                                                                                        }

                                                                                    }
                                                                                    arr[result.sno - 1].details[val.sno - 1].productsumprice = arr[result.sno - 1].details[val.sno - 1].landingamount + arr[result.sno - 1].details[val.sno - 1].taxamount;
                                                                                }
                                                                                setShiftarr1([...arr])

                                                                            }
                                                                            }

                                                                            sx={{ width: '150px' }}
                                                                            value={val.endtime || null}
                                                                        />
                                                                    </TableCell> */}
                                                                    {/* <TableCell>
                                                                        {(val.starttime && val.endtime) &&
                                                                            <>
                                                                                {Math.floor(dayjs(val.endtime).diff(dayjs(val.starttime), 'm') / 60)}H:
                                                                                {dayjs(val.endtime).diff(dayjs(val.starttime), 'm') - (Math.floor(dayjs(val.endtime).diff(dayjs(val.starttime), 'm') / 60) * 60)}m

                                                                            </>
                                                                        }
                                                                    </TableCell> */}
                                                                    {/* <TableCell> <Autocomplete
                                                                        margin="normal"
                                                                        fullWidth
                                                                        id="unpaidbreak"
                                                                        label="Select"
                                                                        variant="outlined"

                                                                        required
                                                                        onChange={(e) => unpaidbreakedit({ sno: val.sno }, e, result)}
                                                                        freeSolo
                                                                        renderInput={(params) => <TextField {...params} placeholder="Select" sx={{
                                                                            input: {
                                                                                '&::placeholder': {
                                                                                    opacity: 0.9
                                                                                },

                                                                            }
                                                                        }} />}
                                                                        options={[{ label: '10 min' }, { label: '20 min' }, { label: '30 min' },
                                                                        { label: '40 min' }, { label: '50 min' }, { label: '60 min' }
                                                                        ]}
                                                                        sx={{ width: '100px' }}
                                                                    />
                                                                    </TableCell> */}

                                                                    {/* <TableCell>
                                                                        {(val.cost) &&
                                                                            <>
                                                                                {`${val.cost}/hr`}
                                                                            </>
                                                                        }

                                                                    </TableCell> */}


                                                                    {/* <TableCell align='center'>{(val.role && val.position) &&
                                                                        <>
                                                                            {val.landingamount}
                                                                        </>
                                                                    }
                                                                        {(!val.position || !val.role) &&
                                                                            0
                                                                        }
                                                                    </TableCell> */}





                                                                    <TableCell align='center' >
                                                                        {(open.shiftsno === result.sno && open.sno === val.sno) &&

                                                                            <>
                                                                                <Dialog open={(open.shiftsno === result.sno && open.sno === val.sno)} onClose={dialogclose}

                                                                                >
                                                                                    <Stack sx={{ p: 2 }} spacing={2}>
                                                                                        {attireslist.map((val1) => {
                                                                                            return <>

                                                                                                <Typography variant="label">{val1.typename}</Typography>

                                                                                                <Stack direction="row" sx={{ width: '100%' }} spacing={1} justifyContent={'center'}>
                                                                                                    {val1.serviceattires.map((val2) => {
                                                                                                        return <>
                                                                                                            <Button
                                                                                                                variant={
                                                                                                                    (
                                                                                                                        (result.orderattires.find((val3) => ((val3.ordersno === val.sno) && (val3.apptypeid === val2.apptypeid) && (val2.attirename === val3.attirename))))
                                                                                                                    )
                                                                                                                        ? "contained" : "outlined"}
                                                                                                                sx={{ borderRadius: '40px' }}
                                                                                                                onClick={(e) => editorderattire(e, val2, val1, val.sno, result)}
                                                                                                                startIcon={<CheckCircleRoundedIcon />}>
                                                                                                                {val2.attirename}
                                                                                                            </Button>
                                                                                                        </>

                                                                                                    })

                                                                                                    }

                                                                                                </Stack>
                                                                                            </>
                                                                                        })

                                                                                        }





                                                                                        <Stack direction='row' justifyContent='center'>
                                                                                            <Button variant='contained' onClick={dialogclose}>OK</Button>
                                                                                        </Stack>
                                                                                    </Stack>
                                                                                </Dialog>
                                                                            </>
                                                                        }
                                                                        <Stack direction='row' spacing={1} justifyContent={'center'}>
                                                                            {(val.role && val.position && val.starttime && val.endtime && false) &&

                                                                                <>
                                                                                    <Tooltip title="Attire">
                                                                                        <Button sx={{ minWidth: '10px !important' }} size='small' onClick={() => dialogopen({ sno: val.sno }, result)}><AccessibilityNewIcon /></Button>
                                                                                    </Tooltip>
                                                                                </>
                                                                            }
                                                                            <Button sx={{ minWidth: '10px !important' }} color="error" onClick={() => {
                                                                                let arr = orderarr;
                                                                                if (orderarr.length > 1) {
                                                                                    arr.splice(val.sno - 1, 1);
                                                                                    let arr1 = []
                                                                                    arr.map((val2, k) => {
                                                                                        arr1.push({
                                                                                            sno: k + 1,
                                                                                            'address': val2.address
                                                                                        })
                                                                                    })
                                                                                    setOrderarr([...arr1])
                                                                                } else {
                                                                                    setOrderarr([{
                                                                                        sno: 1,
                                                                                        address: ''
                                                                                    }])
                                                                                }

                                                                                // arr[val.sno-1]
                                                                            }}><DeleteOutlined /></Button>
                                                                        </Stack>
                                                                    </TableCell>

                                                                </TableRow>
                                                            </LocalizationProvider>
                                                        </>
                                                    })

                                                    }

                                                </TableBody>
                                            </Table>
                                        </TableContainer>
                                        {/* <Grid item xs={12}>
                                            <Button
                                                color="primary"
                                                endIcon={<PlusOutlined />}

                                                onClick={() => addarr(result)}

                                                sx={{ m: 2 }}
                                                variant="dashed"
                                           
                                            >

                                                ADD
                                            </Button>
                                        </Grid> */}
                                    </MainCard>





                                </Grid>


                            </>
                        })

                        }
                        {/* <Grid item xs={12}>
                            <Button
                                color="error"
                                endIcon={<PlusOutlined />}

                                onClick={addshiftarr1}

                                variant="dashed"



                            >

                                ADD SHIFTS
                            </Button>
                        </Grid> */}
                        <Grid item xs={12}>

                            <Grid container spacing={1}>

                                <Grid item xs={12}>
                                    <MainCard title='Other Instructions' sx={{ height: '100%' }}>

                                        <TextField id="outlined-multiline-static" sx={{ width: '100%', height: '100%' }} multiline rows={4} placeholder='Remarks'
                                            value={otherinstructions} onChange={(e) => setOtherinstructions(e.target.value)} />

                                    </MainCard>
                                </Grid>
                            </Grid>




                        </Grid>






                    </Grid >

                    <Stack direction='row' justifyContent='flex-end' sx={{ mt: 2, backgroundColor: '#fff' }} >
                        <Button variant='contained' onClick={() => {

                            createsubmitobj1()

                        }}>Review</Button>


                    </Stack>
                </Box >
            </Grid >
            <Grid item xs={12} >




            </Grid>

        </Grid >
    </>
}

export default Createorder;