import * as React from 'react';
import { useEffect, useState, useRef, Fragment } from 'react';
import {
  FormControl,
  InputAdornment,
  Grid,
  Typography,
  Stack,
  Box,
  Button,
  TextField,
  Autocomplete,
  CardActions,
  Chip,
  Avatar,
  Divider,
  DialogTitle,
  DialogContent,
  Checkbox,
  DialogActions,
  CircularProgress,
  ButtonGroup,
  FormLabel,
  IconButton,
  Drawer,
  InputLabel,
  Select,
  MenuItem,
  Switch,
  CardHeader,
  Card,
  OutlinedInput
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { Empty } from 'antd';
import { FaPhoneAlt } from 'react-icons/fa';
import { GiDoorHandle } from 'react-icons/gi';
import { FaLandmarkDome } from 'react-icons/fa6';
import ClearIcon from '@mui/icons-material/Clear';
import { useNavigate } from 'react-router';
import { MdLocationCity } from 'react-icons/md';
import { TbMapPinCode } from 'react-icons/tb';
import { FaLocationDot } from 'react-icons/fa6';
import axios from 'axios';
import { useTheme } from '@mui/material/styles';
import Geocode from 'react-geocode';
import Loader from 'components/Loader';
import * as geolib from 'geolib';
import MainCard from 'components/MainCard';
import { FaUser } from 'react-icons/fa6';
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 Dialog from '@mui/material/Dialog';
import dayjs from 'dayjs';
import { enqueueSnackbar } from 'notistack';
var utc = require('dayjs/plugin/utc');
dayjs.extend(utc);
import LocationOnIcon from '@mui/icons-material/LocationOn';
import parse from 'autosuggest-highlight/parse';
import { debounce } from '@mui/material/utils';
import CardContent from 'themes/overrides/CardContent';
import { PhoneAndroid } from '@mui/icons-material';
import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
import PhoneInput from 'react-phone-number-input/input';
import MyLocationIcon from '@mui/icons-material/MyLocation';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';

function loadScript(src, position, id) {
  if (!position) {
    return;
  }

  const script = document.createElement('script');
  script.setAttribute('async', '');
  script.setAttribute('id', id);
  script.src = src;
  position.appendChild(script);
}

const Createorder1 = () => {
  Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
  // ================================================= || GoogleMaps (Drawer) || =================================================
  const [value, setValue] = React.useState(null);
  const [value1, setValue1] = React.useState(null);
  const [inputValue, setInputValue] = React.useState('');
  const [inputValue1, setInputValue1] = React.useState('');
  const [inputValue2, setInputValue2] = React.useState('');
  const [inputValue3, setInputValue3] = React.useState('');
  const [options, setOptions] = React.useState([]);
  const [options1, setOptions1] = React.useState([]);
  const loaded = React.useRef(false);
  const loaded1 = React.useRef(false);
  const [mobilenumber, setMobilenumber] = useState('');
  const [emailaddress, setEmailaddress] = useState('');
  const [city, setCity] = useState('');
  const [city1, setCity1] = useState('');
  const [zipcode, setZipcode] = useState('');
  const [zipcode1, setZipcode1] = useState('');
  const [state, setState] = useState('');
  const [state1, setState1] = useState('');
  const [suburb, setSuburb] = useState('');
  const [suburb1, setSuburb1] = useState('');
  const [pickContactName, setPickContactName] = useState('');
  const [dropContactName, setDropContactName] = useState('');
  const [pickdoorno, setPickDoorno] = useState('');
  const [dropDoorno, setDropDoorno] = useState('');
  const [pickLandmark, setPickLandmark] = useState('');
  const [dropLandmark, setDropLandmark] = useState('');
  const [address, setAddress] = useState('');
  const [address1, setAddress1] = useState('');
  const [latlong, setLatlong] = useState({});
  const [latlong1, setLatlong1] = useState({});
  const autocompleteService = useRef(null);
  const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid'));
  const [isLocation, setIsLocation] = useState(false);

  // // // ====================================================== || address (pick)|| ======================================================
  // useEffect(() => {
  //   if (address) {
  //     try {
  //       Geocode.fromAddress(address).then(
  //         (response) => {
  //           if (response.status == 'OK') {
  //             const { lat, lng } = response.results[0].geometry.location;
  //             console.log({ lat, lng });
  //             setLatlong({
  //               lat,
  //               lng
  //             });
  //             console.log(response);
  //             if (response.results[0].address_components) {
  //               let place = response.results[0];
  //               let cityA, zipcodeA, stateA, suburbA;
  //               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':
  //                       cityA = place.address_components[i].long_name;
  //                       break;
  //                     case 'administrative_area_level_1':
  //                       stateA = place.address_components[i].long_name;
  //                       break;
  //                     case 'postal_code':
  //                       zipcodeA = place.address_components[i].long_name;
  //                       break;
  //                     case 'sublocality':
  //                       suburbA = place.address_components[i].long_name;
  //                       break;
  //                   }
  //                 }
  //               }
  //               setCity(cityA || '');
  //               setState(stateA || '');
  //               setZipcode(zipcodeA || '');
  //               setSuburb(suburbA || '');
  //               console.log({ lat, lng, cityA, stateA, zipcodeA, suburbA });
  //               setPickCust({
  //                 ...pickCust
  //                 // city: cityA,
  //                 // state: stateA,
  //                 // postcode: zipcodeA,
  //                 // suburb: suburbA
  //                 // latitude: lat,
  //                 // longitude: lng
  //               });
  //               // setStartPoint({ latitude: lat, longitude: lng });
  //             }
  //           }
  //         },
  //         (error) => {
  //           console.log(error);
  //         }
  //       );
  //     } catch (err) {
  //       console.log(err);
  //     }
  //   }
  // }, [address]);
  // // // ====================================================== || address 1 (drop)|| ======================================================
  // useEffect(() => {
  //   if (address) {
  //     try {
  //       Geocode.fromAddress(address1).then(
  //         (response) => {
  //           if (response.status == 'OK') {
  //             const { lat, lng } = response.results[0].geometry.location;

  //             setLatlong1({
  //               lat,
  //               lng
  //             });
  //             console.log(response);
  //             if (response.results[0].address_components) {
  //               let place = response.results[0];
  //               let cityB, zipcodeB, stateB, suburbB;
  //               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':
  //                       cityB = place.address_components[i].long_name;
  //                       break;
  //                     case 'administrative_area_level_1':
  //                       stateB = place.address_components[i].long_name;
  //                       break;
  //                     case 'postal_code':
  //                       zipcodeB = place.address_components[i].long_name;
  //                       break;
  //                     case 'sublocality':
  //                       suburbB = place.address_components[i].long_name;
  //                       break;
  //                   }
  //                 }
  //               }
  //               setCity(cityB || '');
  //               setState(stateB || '');
  //               setZipcode(zipcodeB || '');
  //               setSuburb(suburbB || '');
  //               console.log({ lat, lng, cityB, stateB, zipcodeB, suburbB });
  //               setDropCust({
  //                 ...dropCust
  //                 // city: cityB,
  //                 // state: stateB,
  //                 // postcode: zipcodeB,
  //                 // suburb: suburbB
  //                 // latitude: lat,
  //                 // longitude: lng
  //               });
  //               // setEndPoint({ latitude: lat, longitude: lng });
  //             }
  //           }
  //         },
  //         (error) => {
  //           console.log(error);
  //         }
  //       );
  //     } catch (err) {
  //       console.log(err);
  //     }
  //   }
  // }, [address1]);

  if (typeof window !== 'undefined' && !loaded.current) {
    if (!document.querySelector('#google-maps')) {
      loadScript(
        `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=places&location=10.3656,77.9690&radius=50000&components=country:IN&strictbounds=true`,
        document.querySelector('head'),
        'google-maps'
      );
    }
    loaded.current = true;
  }

  // const fetch = React.useMemo(
  //   () =>
  //     debounce((request, callback) => {
  //       autocompleteService.current.getPlacePredictions(request, callback);
  //     }, 400),
  //   []
  // );
  // const fetch1 = React.useMemo(
  //   () =>
  //     debounce((request, callback) => {
  //       autocompleteService.current.getPlacePredictions(request, callback);
  //     }, 400),
  //   []
  // );

  // ====================================================== || options (pick)|| ======================================================

  // React.useEffect(() => {
  //   let active = true;
  //   if (!autocompleteService.current && window.google) {
  //     autocompleteService.current = new window.google.maps.places.AutocompleteService();
  //   }
  //   if (!autocompleteService.current) {
  //     return undefined;
  //   }
  //   if (inputValue === '') {
  //     setOptions(value ? [value] : []);
  //     return undefined;
  //   }
  //   fetch({ input: inputValue }, (results) => {
  //     if (active) {
  //       let newOptions = [];

  //       if (value) {
  //         newOptions = [value];
  //       }

  //       if (results) {
  //         newOptions = [...newOptions, ...results];
  //       }

  //       setOptions(newOptions);
  //     }
  //   });

  //   return () => {
  //     active = false;
  //   };
  // }, [value, inputValue, fetch]);

  // // ====================================================== || options1 (drop)|| ======================================================
  // React.useEffect(() => {
  //   let active = true;
  //   if (!autocompleteService.current && window.google) {
  //     autocompleteService.current = new window.google.maps.places.AutocompleteService();
  //   }
  //   if (!autocompleteService.current) {
  //     return undefined;
  //   }
  //   if (inputValue1 === '') {
  //     setOptions1(value1 ? [value1] : []);
  //     return undefined;
  //   }
  //   fetch1({ input: inputValue1 }, (results) => {
  //     if (active) {
  //       let newOptions = [];

  //       if (value1) {
  //         newOptions = [value1];
  //       }

  //       if (results) {
  //         newOptions = [...newOptions, ...results];
  //       }

  //       setOptions1(newOptions);
  //     }
  //   });

  //   return () => {
  //     active = false;
  //   };
  // }, [value1, inputValue1, fetch1]);

  const appId = localStorage.getItem('applocationid');
  const navigate = useNavigate();
  const [open, setOpen] = useState({});
  const [open1, setOpen1] = useState('');
  const [open2, setOpen2] = useState(false);
  const [open3, setOpen3] = useState(false);
  const [open4, setOpen4] = useState(false);
  const [shift, setShift] = useState(1);
  const [clientlist, setClientlist] = useState([]);
  const [clientdetail, setClientdetail] = useState([]);
  const [eventname, setEventname] = useState('');
  const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY'));
  const [enddate, setEnddate] = useState(dayjs().add(1, 'day').format('MM-DD-YYYY'));
  // const [starttime, setStatrttime] = useState(`${dayjs().format('MM-DD-YYYY')} 08:00:00`);
  const [starttime, setStatrttime] = useState();
  // const [endtime, setEndtime] = useState(`${dayjs().format('MM-DD-YYYY')} 20:00:00`);
  const [endtime, setEndtime] = useState();
  const [timeslotarr, setTimeslotarr] = useState([]);
  const [currentsno, setCurrentsno] = useState('');
  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 [loading, setLoading] = 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({});
  const [searchword, setSearchword] = useState('');
  const [clientdetailarr, setClientdetailarr] = useState([]);
  const [clientdetailbusinessarr, setClientdetailbusinessarr] = useState([]);
  const [admintoken, setAdmintoken] = useState();
  const [tenantlocationlist, setTenantlocationlist] = useState([]);
  const [tenant, setTenant] = useState({});
  const [clientinfo, setClientinfo] = useState({});
  const [selectedtime, setSelectedtime] = useState('');
  const [tenantlist, setTenantlist] = useState([]);
  const [tenantid, setTenantid] = useState();
  const [tenantlocation, setTenantlocation] = useState('');
  const [pickupswitch, setPickupswitch] = useState(true);
  const [deliverytype, setDeliverytype] = useState('B');
  const [dropswitch, setDropswitch] = useState(false);
  const [startPoint, setStartPoint] = useState({ latitude: 0, longitude: 0 });
  const [endPoint, setEndPoint] = useState({ latitude: 0, longitude: 0 });
  const [showDistance, setShowDistance] = useState(false);
  const [distance, setDistance] = useState(0);
  const [basePrice, setBasePrice] = useState(0);
  const [pricePerKm, setPricePerKm] = useState(0);
  const [minKm, setMinKm] = useState(0);
  const [totalCharge, setTotalCharge] = useState(0);
  const [subCat, setSubCat] = useState([]);
  const [subCatName, setSubCatName] = useState('Select ');
  const [subCatId, setSubCatId] = useState();
  const [weight, setWeight] = useState('');
  const tid = localStorage.getItem('tenantid');
  const [selectedCatChip, setSelectedCatChip] = useState(null);
  const [isCustomerOpen, setIsCustomerOpen] = useState(false);
  const [searchCustList, setSearchCustList] = useState('');
  const [customerlist, setCustomerlist] = useState([]);
  const [pickCust, setPickCust] = useState({});
  const [dropCust, setDropCust] = useState({});
  const [pickordrop, setpickordrop] = useState(0); // 1 ->pick 2 -> drop
  const [addId1, setAddId1] = useState(0);
  const [addId2, setAddId2] = useState(0);
  const [tenantLocations, setTenantlocations] = useState([]);
  const [appLocaLat, setAppLocaLat] = useState();
  const [appLocaLng, setAppLocaLng] = useState();
  const [appLocaRadius, setAppLocaRadius] = useState();

  const handleChipClick = (chipLabel) => {
    setSelectedCatChip(chipLabel);
  };

  const chipStyle = (chipLabel) => ({
    cursor: 'pointer',
    backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : 'default',
    color: selectedCatChip === chipLabel ? '#fff' : '',
    '&:hover': {
      backgroundColor: selectedCatChip === chipLabel ? theme.palette.primary.main : theme.palette.primary.light,
      color: '#fff'
    }
  });

  const fetchTenantPricing = async () => {
    try {
      const pricingResponse = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantpricing/?tenantid=${tid}`);
      console.log('pricingResponse', pricingResponse.data.details);
      setBasePrice(pricingResponse.data.details.baseprice);
      setPricePerKm(pricingResponse.data.details.priceperkm);
      setMinKm(pricingResponse.data.details.minkm);
    } catch (error) {
      console.log('fetchTenantPricing error', error);
    }
  };
  useEffect(() => {
    fetchTenantPricing();
  }, []);

  useEffect(() => {
    console.log('startPoint', startPoint);
    console.log('endPoint', endPoint);
    if (startPoint.latitude != 0 && startPoint.longitude != 0 && endPoint.latitude != 0 && endPoint.longitude != 0) {
      getDistance();
    }
  }, [startPoint, endPoint]);

  const getDistance = () => {
    const dist = geolib.getPreciseDistance(startPoint, endPoint, 1);
    console.log(`Distance: ${dist} meters`);
    const distanceInKm = (dist / 1000).toFixed(2);
    const roundedDistance = Math.round(distanceInKm);
    console.log('roundedDistance', roundedDistance);
    setDistance(roundedDistance.toFixed(2));
    if (roundedDistance < minKm) {
      setTotalCharge(basePrice);
    } else {
      const total = (roundedDistance - minKm) * pricePerKm + basePrice;
      setTotalCharge(total);
    }
    setShowDistance(true);
    if (roundedDistance > appLocaRadius) {
      setShowDistance(true);
      setOpen4(true);
    }
  };

  useEffect(() => {
    clientdetails();
    // clientdetailsbusiness();
  }, [searchCustList.length > 3, searchCustList == '']);

  useEffect(() => {
    if (timeslotarr[0]) {
      let arr = [];
      timeslotarr.map((val) => {
        if (dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) {
          arr.push(val);
        }
      });

      if (arr[0]) {
        setOrderarr([
          {
            sno: 1,
            address: '',
            customerid: '',
            deliverytime: dayjs(arr[0]) || '',
            deliverylocationid: '',
            clientname: '',
            contactno: '',
            latitude: '',
            longitude: ''
          }
        ]);
      }
    }
  }, [timeslotarr]);

  useEffect(() => {
    if (searchword) {
      let arr = clientdetail.filter((val) => {
        return (
          val.address.toLowerCase().includes(searchword.toLowerCase()) ||
          val.firstname.toLowerCase().includes(searchword.toLowerCase()) ||
          val.contactno.toLowerCase().includes(searchword.toLowerCase())
        );
      });
      console.log(arr);
      setClientdetailarr([...arr]);
    } else {
      setClientdetailarr([...clientdetail]);
    }
  }, [searchword]);

  // const { ref: materialRef } = usePlacesWidget({
  //   apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
  //   onPlaceSelected: (place) => {
  //     console.log(place);

  //     // setAddress(place.formatted_address)
  //     let city1, zipcode1, state1, 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':
  //             state1 = 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;
  //         }
  //       }
  //     }
  //     // setCity(city1 || '')
  //     // setState(state1 || '');
  //     // setZipcode(zipcode1 || '');
  //     // setSuburb(suburb1 || '')
  //   },

  //   options: {
  //     types: ['address' || 'geocode']
  //   }
  // });

  // ==================================================== || fetchtenantinfo || ====================================================
  const fetchtenantinfo = async () => {
    setLoading(true);
    console.log('tid', tid);

    await axios
      .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`)
      .then((res) => {
        console.log('fetchtenantinfo', res);
        if (res.data.status) {
          setTenant(res.data.details);
          setTenantid(res.data.details.tenantid);
          fetchAppAdminTokens();
          setSubCatId(res.data.details.subcategoryid);
        }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };
  useEffect(() => {
    fetchtenantinfo();
  }, []);
  // ==================================================== || getsubcategories || ====================================================
  const getsubcategories = async () => {
    await axios
      .get(`${process.env.REACT_APP_URL}/utils/getsubcategories/?moduleid=6`)
      .then((res) => {
        console.log('subcateRes', res.data.details);
        if (res.data.status) {
          setSubCat(res.data.details);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  useEffect(() => {
    getsubcategories();
  }, []);

  // ==================================================== || fetchTiming || ====================================================
  const fetchTiming = async () => {
    setLoading(true);
    await axios
      .get(`${process.env.REACT_APP_URL}/utils/getapplocations/?applocationid=${appId}`)
      .then((res) => {
        console.log('fetchTiming', res);
        const { opentime, closetime, latitude, longitude, radius } = res.data.details[0];
        if (res.data.status) {
          setAppLocaLat(latitude);
          setAppLocaLng(longitude);
          setAppLocaRadius(radius);
          setStatrttime(`${dayjs().format('MM-DD-YYYY')} ${opentime}`);
          setEndtime(`${dayjs().format('MM-DD-YYYY')} ${closetime}`);
          console.log('starttime', `${dayjs().format('MM-DD-YYYY')} ${opentime}`);
          console.log('endtime', `${dayjs().format('MM-DD-YYYY')} ${closetime} `);
          let arr = [];
          for (
            let i = `${dayjs().format('MM-DD-YYYY')} ${opentime}`, j = 0;
            dayjs(`${dayjs().format('MM-DD-YYYY')} ${closetime} `).diff(i, 'm') >= 0;
            j++, i = dayjs(i).add(30, 'm')
          ) {
            arr.push(i);
          }
          console.log('setTimeslotarr', arr);
          setTimeslotarr(arr);
        }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };
  useEffect(() => {
    fetchTiming();
  }, [starttime, endtime]);

  // =============================================== || fetchAppAdminTokens (via  appId) || ===============================================
  const fetchAppAdminTokens = async () => {
    setLoading(true);
    await axios
      .get(`${process.env.REACT_APP_URL}/utils/getapplocationconfig/?applocationid=${appId}`)
      .then((res) => {
        const userfcmtokemArray = res.data.details.applocationadmins.map((admin) => admin.userfcmtokem);
        console.log('fetchAppAdminTokens', res);
        console.log('userfcmtokemArray', userfcmtokemArray);
        if (res.data.status) {
          setAdmintoken(userfcmtokemArray);
        }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };

  useEffect(() => {
    if (starttime && endtime) {
      fetchAppAdminTokens();
    }
  }, [starttime, endtime]);

  // =============================================== || opentoast || ===============================================

  const opentoast = (message, variant, time) => {
    enqueueSnackbar(message, {
      variant: variant,
      anchorOrigin: { vertical: 'top', horizontal: 'right' },
      autoHideDuration: time ? time : 1500
    });
    console.log(alertmessage);
  };

  function closeAddressModal() {
    setOpen2(false);
  }
  function closetimemodal() {
    setOpen3(false);
    setCurrentsno('');
  }

  // =============================================== || createsubmitobj1 (create orders) || ===============================================
  const createsubmitobj1 = async () => {
    let arr = [];
    let timecheck = false;
    let addresscheck = false;
    arr = [
      {
        orderheaderid: 0,
        tenantid: parseFloat(tid),
        locationid: clientinfo.tenantlocationid ? clientinfo.tenantlocationid : tenantinfo.tenantlocationid,
        moduleid: tenant.moduleid,
        configid: 7,
        orderid: '',
        customerid: tenantinfo.customerid,
        orderdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        orderstatus: 'created',
        pending: '',
        processing: '',
        ready: '',
        delivered: '',
        cancellled: '',
        orderamount: totalCharge,
        taxamount: 0,
        ordercharges: 0,
        ordervalue: totalCharge,
        itemcount: 1,
        paymenttype: 64,
        paymentstatus: 0,
        deliverycharge: totalCharge,
        deliverytime: `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(selectedtime.$d).format('HH:mm:ss')}`,
        deliverylocationid: clientinfo.deliverylocationid,
        deliveryaddress: clientinfo.address,
        deliverytype: deliverytype,
        pickupaddress: tenantinfo.address,
        pickuplat: startPoint.latitude.toString(),
        pickuplong: startPoint.longitude.toString(),
        ordernotes: otherinstructions,
        remarks: '',
        tenantuserid: parseInt(localStorage.getItem('userid')),
        categoryid: tenant.categoryid,
        subcategoryid: tenant.subcategoryid,
        partnerid: tenant.partnerid,
        deliverylat: endPoint.latitude.toString(),
        deliverylong: endPoint.longitude.toString(),
        applocationid: parseInt(localStorage.getItem('applocationid')),
        deliveryid: clientinfo.customerid,
        pickuplocationid: tenantinfo.deliverylocationid,
        kms: distance
      }
    ];

    if (!tid) {
      opentoast('Choose Client ', 'warning');
    } else if (!tenantinfo.address) {
      opentoast('Choose Pickup Location', 'warning');
    } else if (!clientinfo.address) {
      opentoast('Choose Drop Location', 'warning');
    } else if (!selectedtime) {
      opentoast('Choose Schedule Time', 'warning');
    } else {
      setLoading(true);

      await axios
        .post(`${process.env.REACT_APP_URL}/orders/createorders`, arr)
        .then((res) => {
          if (res.data.status) {
            enqueueSnackbar('Order Created Successfully', {
              variant: 'success',
              anchorOrigin: { vertical: 'top', horizontal: 'right' },
              autoHideDuration: 1000
            });
            if (admintoken) {
              // notifyadmin(admintoken);
              sendnotifications();
            }

            navigate('/orders');
          } else {
            opentoast(res.data.message, 'warning');
          }
          setLoading(false);
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
          opentoast(err.data.message, 'warning');
          setLoading(false);
        });
    }
    console.log(arr);
  };

  const createsubmitobj2 = async () => {
    let arr = {};
    arr = {
      orders: {
        applocationid: tenant.applolcationid,
        cancellled: '',
        categoryid: +tenant.categoryid,
        configid: +localStorage.getItem('configid'),
        customerid: +pickCust.customerid || 0,
        deliveryaddress: dropCust.address || '',
        deliverycharge: +totalCharge.toFixed(2) || 0,
        deliverycity: dropCust.city || '',
        deliverycontactno: dropCust.contactno || '',
        deliverycustomer: dropCust.firstname || '',
        deliveryid: dropCust.customerid || 0,
        deliverylandmark: dropCust.landmark || '',
        deliverylat: dropCust.latitude.toString(),
        deliverylocation: dropCust.suburb || '',
        deliverylocationid: dropCust.deliverylocationid || 0,
        deliverylong: dropCust.longitude.toString(),
        deliverytime: `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(selectedtime.$d).format('HH:mm:ss')}`,
        deliverytype: pickCust.customerid !== 0 || dropCust.customerid !== 0 ? 'B' : 'C',
        delivered: '',
        itemcount: 1,
        kms: distance || 0,
        locationid: +tenanatLocoId, //main or branch
        moduleid: +tenant.moduleid,
        orderamount: +totalCharge.toFixed(2) || 0,
        ordercharges: 0.0,
        orderdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
        orderheaderid: 0,
        orderid: '', //
        ordernotes: otherinstructions,
        orderstatus: 'created',
        ordervalue: +totalCharge.toFixed(2) || 0,
        partnerid: tenant.partnerid,
        paymentstatus: 1,
        paymenttype: 42,
        pending: '',
        pickupaddress: pickCust.address || '',
        pickupcity: pickCust.city || '',
        pickupcontactno: pickCust.contactno || '',
        pickupcustomer: pickCust.firstname || '',
        pickuplandmark: pickCust.landmark || '',
        pickuplat: pickCust.latitude.toString(),
        pickuplocation: pickCust.suburb || '',
        pickuplocationid: pickCust.deliverylocationid || 0,
        pickuplong: pickCust.longitude.toString(),
        pickupaddress: pickCust.address || '',
        processing: '',
        ready: '',
        remarks: '',
        smsdelivery: 1,
        subcategoryid: +subCatId,
        taxamount: 0.0,
        tenantid: tenant.tenantid,
        tenantuserid: parseInt(localStorage.getItem('userid'))
      },

      pickup: {
        address: pickCust.address || '',
        applocationid: tenant.applolcationid,
        city: pickCust.city || '',
        configid: parseInt(localStorage.getItem('configid')),
        contactno: pickCust.contactno || '',
        customertoken: '',
        customerid: pickCust.customerid || 0,
        devicetype: '',
        deviceid: '',
        dialcode: '+91',
        doorno: pickCust.doorno || '',
        email: pickCust.email || '',
        firstname: pickCust.firstname || '',
        landmark: pickCust.landmark || '',
        latitude: pickCust.latitude.toString() || '',
        longitude: pickCust.longitude.toString() || '',
        locationid: pickCust.deliverylocationid || 0,
        postcode: pickCust.postcode || '',
        primaryaddress: 1,
        profileimage: '',
        state: pickCust.state || '',
        suburb: pickCust.suburb || '',
        tenantid: tenant.tenantid
      },

      drop: {
        address: dropCust.address || '',
        applocationid: tenant.applolcationid,
        city: dropCust.city || '',
        configid: parseInt(localStorage.getItem('configid')),
        contactno: dropCust.contactno || '',
        customertoken: '',
        customerid: dropCust.customerid || 0,
        devicetype: '',
        deviceid: '',
        dialcode: '+91',
        doorno: dropCust.doorno || '',
        email: dropCust.email || '',
        firstname: dropCust.firstname || '',
        landmark: dropCust.landmark || '',
        latitude: dropCust.latitude.toString(),
        longitude: dropCust.longitude.toString(),
        locationid: dropCust.deliverylocationid || 0,
        postcode: dropCust.postcode || '',
        primaryaddress: 1,
        profileimage: '',
        state: dropCust.state || '',
        suburb: dropCust.suburb || '',
        tenantid: tenant.tenantid
      }
    };
    console.log('createsubmitobj2', arr);
    if (!pickCust.firstname) {
      opentoast('Enter Pickup Contact Name  ', 'warning');
    } else if (!pickCust.contactno) {
      opentoast('Enter Pickup Contact Number ', 'warning');
    } else if (!pickCust.suburb) {
      opentoast('Enter Pickup  Location ', 'warning');
    } else if (!pickCust.city) {
      opentoast('Enter Pickup City ', 'warning');
    } else if (!pickCust.postcode) {
      opentoast('Enter Pickup Postcode ', 'warning');
    } else if (!pickCust.landmark) {
      opentoast('Enter Pickup Landmark ', 'warning');
    } else if (!dropCust.firstname) {
      opentoast('Enter Drop Contact Name ', 'warning');
    } else if (!dropCust.contactno) {
      opentoast('Enter Drop Contact Number', 'warning');
    } else if (!dropCust.suburb) {
      opentoast('Enter Drop Suburb ', 'warning');
    } else if (!dropCust.city) {
      opentoast('Enter Drop City ', 'warning');
    } else if (!dropCust.postcode) {
      opentoast('Enter Drop postcode ', 'warning');
    } else if (!dropCust.landmark) {
      opentoast('Enter Drop Landmark ', 'warning');
    } else if (!selectedtime) {
      opentoast('Choose deliverytime ', 'warning');
    } else if (!setSubCatId) {
      opentoast('Choose SubCategory ', 'warning');
    } else {
      try {
        const createRes = await axios.post(`${process.env.REACT_APP_URL2}/orders/createorder`, arr);
        // const createRes = await axios.post(`${process.env.REACT_APP_URL}/orders/createorder`, arr);
        if (createRes.data.status) {
          console.log('createRes', createRes);
          enqueueSnackbar('Order Created Successfully', {
            variant: 'success',
            anchorOrigin: { vertical: 'top', horizontal: 'right' },
            autoHideDuration: 1000
          });
          if (admintoken) {
            // notifyadmin(admintoken);
            sendnotifications();
          }

          navigate('/orders');
        } else {
          opentoast(res.data.message, 'warning');
        }
        setLoading(false);
        console.log(res);
      } catch (error) {
        console.log('createResErr', error);
      }
    }
  };

  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('');
  };
  // ========================================================= || clientdetails || =========================================================
  const clientdetails = async () => {
    setLoading2(true);
    try {
      let url =
        searchCustList == ''
          ? `${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}&pageno=1&pagesize=10`
          : `${process.env.REACT_APP_URL}/customers/search/?tenantid=${tid}&keyword=${searchCustList}`;

      await axios
        .get(url)
        .then((res) => {
          console.log('clientdetails', res.data.details);
          if (res.data.status) {
            setClientdetail(res.data.details);
            setCustomerlist(res.data.details);
            let arr = [];
            res.data.details.map((val) => {
              arr.push({
                label: `${val.firstname} | ${val.contactno}`,
                ...val
              });
            });
            setClientdetailarr(arr);
          }
          setLoading2(false);
        })
        .catch((err) => {
          console.log(err);
          setLoading2(false);
          opentoast('server error', 'warning');
        });
    } catch (err) {
      console.log(err);
      setLoading2(false);
    }
  };
  // ========================================================= || clientdetailsbusiness || =========================================================
  const clientdetailsbusiness = async () => {
    setLoading2(true);
    try {
      await axios
        .get(`${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}&locationid=1`)
        .then((res) => {
          console.log('clientdetailsbusiness', res.data.details);
          if (res.data.status) {
            setClientdetail(res.data.details);
            // if (!searchword) {
            //     setClientdetailarr(res.data.details)
            // }
            let arr = [];
            res.data.details.map((val) => {
              arr.push({
                label: `${val.firstname} | ${val.contactno}`,
                ...val
              });
            });
            setClientdetailbusinessarr(arr);
          }
          setLoading2(false);
        })
        .catch((err) => {
          console.log(err);
          setLoading2(false);
          opentoast('server error', 'warning');
        });
    } catch (err) {
      console.log(err);
      setLoading2(false);
    }
  };

  // ================================================== ||  sendnotifications || ==================================================
  const sendnotifications = async () => {
    setLoading(true);
    await axios
      .post(`${process.env.REACT_APP_URL}/utils/sendnotifications`, {
        priority: 'high',
        registration_ids: admintoken,
        data: {
          accessid: process.env.REACT_APP_RIDER_ACCESS_ID
        },
        notification: {
          title: 'Nearle Merchant',
          body: 'An Order has been placed successfully,kindly process the same',
          sound: 'ring'
        }
      })
      .then((res) => {
        console.log(res);
        if (res.data.message == 'Success') {
          enqueueSnackbar('Notification sent Successfully', {
            variant: 'success',
            anchorOrigin: { vertical: 'top', horizontal: 'right' },
            autoHideDuration: 1000
          });
        }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        enqueueSnackbar(err.message, {
          variant: 'error',
          anchorOrigin: { vertical: 'top', horizontal: 'right' },
          autoHideDuration: 1000
        });
        setLoading(false);
      });
  };
  // ============================================= || Google Maps Autocomplete(pick) || =============================================
  useEffect(() => {
    // Initialize Google Maps Autocomplete
    if (inputValue2) {
      const autocompleteInput = document.getElementById('addressAuto1');
      const autocomplete = new window.google.maps.places.Autocomplete(autocompleteInput, {
        // types: ['(cities)'], // You can adjust the types parameter based on your requirements
        strictBounds: true,
        bounds: new window.google.maps.Circle({
          // center: new window.google.maps.LatLng(11.0050707, 76.9509083),
          // radius: 100000
          center: new window.google.maps.LatLng(appLocaLat, appLocaLng),
          radius: appLocaRadius * 1000
        }).getBounds()
      });
      let arr = [];
      // Event listener for autocomplete place changed
      autocomplete.addListener('place_changed', () => {
        const place = autocomplete.getPlace();
        setInputValue2(`${place.name}, ${place.formatted_address}`);
        console.log('new place', place); // Do something with the selected place
        console.log(' pick (new place) lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place
        // to trigger getDistance
        setStartPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
        setValue(place);
        setAddress(`${place.name} ${place.formatted_address}`);
        setPickCust({ ...pickCust, address: `${place.name} ${place.formatted_address}` });
        const address = {
          address: `${place.name} ${place.formatted_address}`,
          street_number: '',
          route: '',
          locality: '',
          sublocality_level_1: '',
          administrative_area_level_3: '',
          administrative_area_level_1: '',
          country: '',
          postal_code: ''
        };
        place.address_components.forEach((component) => {
          component.types.forEach((type) => {
            switch (type) {
              case 'street_number':
                address.street_number = component.long_name;
                break;
              case 'route':
                address.route = component.long_name;
                break;
              case 'locality':
                address.locality = component.long_name;
                break;
              case 'sublocality_level_1':
                address.sublocality_level_1 = component.long_name;
                break;
              case 'administrative_area_level_3':
                address.administrative_area_level_3 = component.long_name;
                break;
              case 'administrative_area_level_1':
                address.administrative_area_level_1 = component.long_name;
                break;
              case 'country':
                address.country = component.long_name;
                break;
              case 'postal_code':
                address.postal_code = component.long_name;
                break;
              // Add more cases as needed for other types
            }
          });
        });

        // Use address object as per your requirements
        setPickCust({
          ...pickCust,
          address: address.address,
          doorno: `${address.street_number} ${address.route}`,
          suburb: address.sublocality_level_1,
          city: address.locality,
          postcode: address.postal_code,
          latitude: place.geometry.location.lat(),
          longitude: place.geometry.location.lng()
        });
        console.log('Pick Address:', address);
      });
    }
  }, [inputValue2]);
  // ============================================= || Google Maps Autocomplete(Drop) || =============================================

  useEffect(() => {
    if (inputValue3) {
      // Initialize Google Maps Autocomplete
      const autocompleteInput = document.getElementById('addressAuto2');
      const autocomplete = new window.google.maps.places.Autocomplete(autocompleteInput, {
        // types: ['(cities)'], // You can adjust the types parameter based on your requirements
        strictBounds: true,
        bounds: new window.google.maps.Circle({
          // center: new window.google.maps.LatLng(11.0050707, 76.9509083),
          center: new window.google.maps.LatLng(appLocaLat, appLocaLng),
          radius: appLocaRadius * 1000 //km to m
          // radius: 100000 //km to m
        }).getBounds()
      });
      let arr = [];
      // Event listener for autocomplete place changed
      autocomplete.addListener('place_changed', () => {
        const place = autocomplete.getPlace();
        setInputValue3(`${place.name}, ${place.formatted_address}`);
        console.log('new place', place); // Do something with the selected place
        console.log('drop (new place) lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place
        setEndPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
        setValue1(place);
        setAddress1(`${place.name} ${place.formatted_address}`);
        setDropCust({ ...dropCust, address: `${place.name} ${place.formatted_address}` });
        const address = {
          address: `${place.name} ${place.formatted_address}`,
          street_number: '',
          route: '',
          locality: '',
          sublocality_level_1: '',
          administrative_area_level_3: '',
          administrative_area_level_1: '',
          country: '',
          postal_code: ''
        };
        place.address_components.forEach((component) => {
          component.types.forEach((type) => {
            switch (type) {
              case 'street_number':
                address.street_number = component.long_name;
                break;
              case 'route':
                address.route = component.long_name;
                break;
              case 'locality':
                address.locality = component.long_name;
                break;
              case 'sublocality_level_1':
                address.sublocality_level_1 = component.long_name;
                break;
              case 'administrative_area_level_3':
                address.administrative_area_level_3 = component.long_name;
                break;
              case 'administrative_area_level_1':
                address.administrative_area_level_1 = component.long_name;
                break;
              case 'country':
                address.country = component.long_name;
                break;
              case 'postal_code':
                address.postal_code = component.long_name;
                break;
              // Add more cases as needed for other types
            }
          });
        });

        // Use address object as per your requirements
        setDropCust({
          ...dropCust,
          address: address.address,
          doorno: `${address.street_number} ${address.route}`,
          suburb: address.sublocality_level_1,
          city: address.locality,
          postcode: address.postal_code,
          latitude: place.geometry.location.lat(),
          longitude: place.geometry.location.lng()
        });
        console.log('Drop Address:', address);
      });
    }
  }, [inputValue3]);

  // ============================================= || gettenantlocations (branches) || =============================================
  const gettenantlocations = async () => {
    try {
      const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${tid}`);
      console.log('gettenantlocations', res.data.details);
      setTenantlocations(res.data.details);
      if (res.data.details.length == 1) {
        setIsLocation(true);
        setTenanatLocoId(res.data.details[0].locationid);
      }
    } catch (err) {
      console.log('gettenantlocations', err);
    }
  };
  useEffect(() => {
    gettenantlocations();
  }, []);

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

      <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' }}
              direction={{ md: 'row' }}
              sx={{ p: 1, ml: 1, mt: 1 }}
              justifyContent="space-between"
              alignItems="center"
              width="100%"
            >
              <Typography variant="h3">Create Order</Typography>
              {tenantLocations.length == 1 ? (
                <TextField
                  variant="outlined"
                  label={'Business Location'}
                  value={tenantLocations[0].locationname}
                  focused
                  sx={{ width: 300 }}
                  InputProps={{
                    style: { color: theme.palette.primary.main },
                    startAdornment: (
                      <InputAdornment position="start">
                        <MyLocationIcon color="primary" />
                      </InputAdornment>
                    )
                  }}
                />
              ) : (
                <Autocomplete
                  disablePortal
                  id="combo-box-demo"
                  options={tenantLocations || []}
                  getOptionLabel={(option) => `${option.locationname} (${option.locationsuburb})` || ''}
                  sx={{ width: 300 }}
                  renderInput={(params) => <TextField {...params} label="Select Business Locations" />}
                  onChange={(event, value, reason) => {
                    if (value) {
                      console.log('locationid', value.locationid);
                      setTenanatLocoId(value.locationid);
                      setIsLocation(true);
                    }
                    if (reason == 'clear') {
                      setIsLocation(false);
                    }
                  }}
                />
              )}
            </Stack>
          </Grid>
        </CardActions>

        <Grid item xs={12} sx={{ mt: -4 }}>
          <Box sx={{ overflow: 'auto', border: 1, borderColor: 'grey.200', borderRadius: 2, backgroundColor: '#fff', p: 3 }}>
            <Grid container spacing={1}>
              <Grid item xs={12}>
                <Grid container spacing={2} sx={{ height: '100%' }}>
                  {/* ================================================= || Pickup || ================================================= */}
                  <Grid item xs={12} sm={6}>
                    <MainCard sx={{ height: '100%' }}>
                      <Grid container spacing={2}>
                        <Grid item xs={12}>
                          <Stack direction={'row'} justifyContent={'space-between'}>
                            <Typography variant="h5">Pickup</Typography>
                            <Stack direction={'row'} spacing={1} alignItems={'center'}>
                              {/* <Typography>Customer</Typography>
                              <Switch
                                size="small"
                                checked={pickupswitch}
                                onChange={(e, val) => {
                                  if (val) {
                                    setPickupswitch(true);
                                    setDeliverytype('B');
                                    setTenantinfo({});
                                  } else {
                                    setPickupswitch(false);
                                    setTenantinfo({});
                                    setDeliverytype('C');
                                  }
                                }}
                              />
                              <Typography>Business</Typography> */}
                              <Button
                                variant="outlined"
                                sx={{
                                  '&:hover': {
                                    bgcolor: theme.palette.primary.main,
                                    color: 'white'
                                  }
                                }}
                                onClick={() => {
                                  if (!isLocation) {
                                    opentoast('Select Business Location', 'warning');
                                  } else {
                                    setIsCustomerOpen(true);
                                    setpickordrop(1);
                                    setPickCust({});
                                    setAddId1(1);
                                    setInputValue2('');
                                    setSearchCustList('');
                                  }
                                }}
                              >
                                Saved Locations
                              </Button>
                            </Stack>
                          </Stack>

                          {/* <Autocomplete
                            id="free-solo-demo"
                            sx={{ mt: 2 }}
                            // options={tenantlocationlist}
                            options={pickupswitch ? clientdetailbusinessarr : clientdetailarr}
                            renderInput={(params) => <TextField {...params} label="Choose Location" />}
                            onChange={(e, val) => {
                              console.log(pickupswitch ? 'clientdetailbusinessarr value' : 'clientdetailarr value', val);
                              if (val) {
                                // clientdetails(val.tenantid)
                                if (clientinfo.customerid == val.customerid) {
                                  opentoast('choose different Location', 'warning');
                                  setTenantinfo({});
                                } else {
                                  setTenantinfo(val);
                                }
                              } else {
                                setTenantinfo({});
                              }

                              console.log(val);
                              setStartPoint({ latitude: val.latitude, longitude: val.longitude });
                            }}
                            noOptionsText={
                              // <Button>ok</Button>
                              <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
                                <Typography>No options</Typography>
                                {!pickupswitch && (
                                  <Button
                                    variant="outlined"
                                    onClick={() => {
                                      setOpen4(true);
                                    }}
                                    color="success"
                                    startIcon={<PlusOutlined />}
                                  >
                                    Create Customer
                                  </Button>
                                )}
                              </Stack>
                            }
                          /> */}
                          <Stack spacing={1.25} sx={{ mt: 2 }}>
                            {addId1 == 0 ? (
                              // <Autocomplete
                              //   id="google-map-demo"
                              //   fullWidth
                              //   getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)}
                              //   filterOptions={(x) => x}
                              //   options={options}
                              //   // options={pickCust}
                              //   autoComplete
                              //   includeInputInList
                              //   filterSelectedOptions
                              //   value={value}
                              //   // value={pickCust.address}
                              //   noOptionsText="No locations"
                              //   onChange={(event, newValue, reason) => {
                              //     if (reason == 'clear') {
                              //       setValue(null);
                              //     }
                              //     console.log('pick location', newValue);
                              //     // setOptions(newValue ? [newValue, ...options] : options);
                              //     setValue(newValue);
                              //     setAddress(newValue.description);
                              //     setPickCust({ ...pickCust, address: newValue.description });
                              //   }}
                              //   onInputChange={(event, newInputValue) => {
                              //     setInputValue(newInputValue);
                              //   }}
                              //   renderInput={(params) => <TextField {...params} placeholder="Address" fullWidth />}
                              //   renderOption={(props, option) => {
                              //     const matches = option.structured_formatting.main_text_matched_substrings || [];
                              //     const parts = parse(
                              //       option.structured_formatting.main_text,
                              //       matches.map((match) => [match.offset, match.offset + match.length])
                              //     );

                              //     return (
                              //       <li {...props}>
                              //         <Grid container alignItems="center">
                              //           <Grid item sx={{ display: 'flex', width: 44 }}>
                              //             <LocationOnIcon sx={{ color: 'text.secondary' }} />
                              //           </Grid>
                              //           <Grid item sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
                              //             {parts.map((part, index) => (
                              //               <Box key={index} component="span" sx={{ fontWeight: part.highlight ? 'bold' : 'regular' }}>
                              //                 {part.text}
                              //               </Box>
                              //             ))}
                              //             <Typography variant="body2" color="text.secondary">
                              //               {option.structured_formatting.secondary_text}
                              //             </Typography>
                              //           </Grid>
                              //         </Grid>
                              //       </li>
                              //     );
                              //   }}
                              // />
                              <div>
                                <TextField
                                  disabled={!isLocation}
                                  id="addressAuto1"
                                  placeholder="Search"
                                  fullWidth
                                  value={inputValue2}
                                  onChange={(e) => setInputValue2(e.target.value)}
                                  InputProps={{
                                    endAdornment: (
                                      <IconButton
                                        onClick={() => {
                                          setInputValue2('');
                                          setPickCust({
                                            ...pickCust,
                                            doorno: '',
                                            suburb: '',
                                            city: '',
                                            postcode: '',
                                            landmark: ''
                                          });
                                          setShowDistance(false);
                                          setStartPoint({ latitude: 0, longitude: 0 });
                                        }}
                                        size="small"
                                      >
                                        <CloseIcon />
                                      </IconButton>
                                    )
                                  }}
                                />
                              </div>
                            ) : (
                              <TextField
                                InputProps={{
                                  endAdornment: (
                                    <IconButton
                                      onClick={() => {
                                        setAddId1(0);
                                        setPickCust({
                                          ...pickCust,
                                          firstname: '',
                                          contactno: '',
                                          doorno: '',
                                          suburb: '',
                                          city: '',
                                          postcode: '',
                                          landmark: ''
                                        });
                                        setShowDistance(false);
                                        setStartPoint({ latitude: 0, longitude: 0 });
                                      }}
                                    >
                                      <ClearIcon />
                                    </IconButton>
                                  )
                                }}
                                variant="outlined"
                                placeholder="Select"
                                value={pickCust.address}
                                onChange={(e) => {
                                  setPickCust({ ...pickCust, address: e.target.value });
                                  if (e.target.value == '') {
                                    setAddId1(0);
                                    setShowDistance(false);
                                    setStartPoint({ latitude: 0, longitude: 0 });
                                  }
                                }}
                              />
                            )}
                          </Stack>
                        </Grid>

                        <Grid item xs={12} sx={{}}>
                          <Typography variant="h5" sx={{ my: 2 }}>
                            Pickup Details
                          </Typography>
                          <Grid container spacing={4}>
                            {/* ====================================== ||Contact Name (pick) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <FaUser />
                                    </IconButton>
                                  )
                                }}
                                variant="outlined"
                                label="Contact Name"
                                value={pickCust.firstname}
                                onChange={(e) => {
                                  setPickCust({ ...pickCust, firstname: e.target.value });
                                }}
                              />
                            </Grid>
                            {/* ====================================== ||Contact Number(pick) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                type="number"
                                InputProps={{
                                  inputProps: {
                                    maxLength: 10
                                  },
                                  startAdornment: (
                                    <IconButton>
                                      <FaPhoneAlt />
                                    </IconButton>
                                  )
                                }}
                                variant="outlined"
                                label="Contact Number"
                                value={pickCust.contactno}
                                onChange={(e) => {
                                  if (e.target.value.length <= 10) {
                                    setPickCust({ ...pickCust, contactno: e.target.value });
                                  }
                                }}
                              />
                            </Grid>
                            {/* ====================================== ||Door No (pick) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <GiDoorHandle />
                                    </IconButton>
                                  )
                                }}
                                variant="outlined"
                                label="Door No / Street"
                                value={pickCust.doorno}
                                onChange={(e) => {
                                  setPickCust({ ...pickCust, doorno: e.target.value });
                                }}
                              />
                            </Grid>
                            {/* ====================================== || Suburb (pick) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <FaLocationDot />
                                    </IconButton>
                                  )
                                }}
                                variant="outlined"
                                label="Location"
                                value={pickCust.suburb}
                                onChange={(e) => {
                                  setPickCust({ ...pickCust, suburb: e.target.value });
                                }}
                              />
                            </Grid>
                            {/* ====================================== || City (pick) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <MdLocationCity />
                                    </IconButton>
                                  )
                                }}
                                variant="outlined"
                                label="City"
                                value={pickCust.city}
                                onChange={(e) => {
                                  setPickCust({ ...pickCust, city: e.target.value });
                                }}
                              />
                            </Grid>
                            {/* ====================================== || postcode (pick) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <TbMapPinCode />
                                    </IconButton>
                                  )
                                }}
                                variant="outlined"
                                label="Postcode"
                                value={pickCust.postcode}
                                onChange={(e) => {
                                  setPickCust({ ...pickCust, postcode: e.target.value });
                                }}
                              />
                            </Grid>
                            {/* ====================================== || Landmark (pick) || ====================================== */}
                            <Grid item xs={12}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <FaLandmarkDome />
                                    </IconButton>
                                  )
                                }}
                                variant="outlined"
                                label="Landmark"
                                value={pickCust.landmark}
                                onChange={(e) => {
                                  setPickCust({ ...pickCust, landmark: e.target.value });
                                }}
                              />
                            </Grid>
                          </Grid>
                        </Grid>
                        {/* <Stack
                          sx={{ width: '100%', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'end', mt: 2 }}
                        >
                          <Button
                            variant="outlined"
                            sx={{
                              width: 130,
                              '&:hover': {
                                bgcolor: theme.palette.primary.main,
                                color: 'white'
                              }
                            }}
                            onClick={() => {
                              console.log('pickCust', pickCust);
                              console.log('dropCust', dropCust);
                            }}
                          >
                            Save for Later
                          </Button>
                        </Stack> */}
                      </Grid>
                    </MainCard>
                  </Grid>
                  {/* ================================================= || Drop || ================================================= */}
                  <Grid item xs={12} sm={6}>
                    <MainCard sx={{ height: '100%' }}>
                      <Grid container spacing={2} sx={{ height: '100%' }}>
                        <Grid item xs={12} sx={{ height: '100%' }}>
                          <Stack direction={'row'} justifyContent={'space-between'}>
                            <Typography variant="h5">Drop</Typography>
                            <Stack direction={'row'} alignItems={'center'}>
                              {/* <Typography>Customer</Typography> */}
                              {/* <Switch
                                checked={dropswitch}
                                onChange={(e, val) => {
                                  if (val) {
                                    setDropswitch(true);
                                    setClientinfo({});
                                  } else {
                                    setDropswitch(false);
                                    setClientinfo({});
                                  }
                                }}
                                size="small"
                              />
                              <Typography>Business</Typography> */}
                              <Button
                                variant="outlined"
                                sx={{
                                  '&:hover': {
                                    bgcolor: theme.palette.primary.main,
                                    color: 'white'
                                  }
                                }}
                                onClick={() => {
                                  if (!isLocation) {
                                    opentoast('Select Business Location', 'warning');
                                  } else {
                                    setIsCustomerOpen(true);
                                    setpickordrop(2);
                                    setAddId2(1);
                                    setInputValue3('');
                                    setSearchCustList('');
                                  }
                                }}
                              >
                                Saved Locations
                              </Button>
                            </Stack>
                          </Stack>
                          {/* <Autocomplete
                            id="free-solo-demo"
                            sx={{ mt: 2 }}
                            // options={clientdetailarr}
                            options={dropswitch ? clientdetailbusinessarr : clientdetailarr}
                            renderInput={(params) => <TextField {...params} label="Choose Location" />}
                            onChange={(e, val) => {
                              if (val) {
                                if (tenantinfo.customerid == val.customerid) {
                                  opentoast('choose different Location', 'warning');
                                  setClientinfo({});
                                } else {
                                  setClientinfo(val);
                                }
                              } else {
                                setClientinfo({});
                              }

                              console.log(val);
                              setEndPoint({ latitude: val.latitude, longitude: val.longitude });
                            }}
                            noOptionsText={
                              // <Button>ok</Button>
                              <Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'}>
                                <Typography>No options</Typography>
                                {!dropswitch && (
                                  <Button
                                    variant="outlined"
                                    onClick={() => {
                                      setOpen4(true);
                                    }}
                                    color="success"
                                    startIcon={<PlusOutlined />}
                                  >
                                    Create Customer
                                  </Button>
                                )}
                              </Stack>
                            }
                          /> */}
                          <Stack spacing={1.25} sx={{ mt: 2 }}>
                            {addId2 == 0 ? (
                              // <Autocomplete
                              //   id="google-map-demo"
                              //   fullWidth
                              //   getOptionLabel={(option) => (typeof option === 'string' ? option : option.description)}
                              //   filterOptions={(x) => x}
                              //   options={options1}
                              //   autoComplete
                              //   includeInputInList
                              //   filterSelectedOptions
                              //   value={value1}
                              //   // value={dropCust.address}
                              //   noOptionsText="No locations"
                              //   onChange={(event, newValue) => {
                              //     setOptions1(newValue ? [newValue, ...options1] : options1);
                              //     setValue1(newValue);
                              //     console.log(newValue);
                              //     setAddress1(newValue.description);
                              //     setDropCust({ ...dropCust, address: newValue.description });
                              //   }}
                              //   onInputChange={(event, newInputValue) => {
                              //     setInputValue1(newInputValue);
                              //   }}
                              //   renderInput={(params) => <TextField {...params} label="Address" fullWidth />}
                              //   renderOption={(props, option) => {
                              //     const matches = option.structured_formatting.main_text_matched_substrings || [];
                              //     const parts = parse(
                              //       option.structured_formatting.main_text,
                              //       matches.map((match) => [match.offset, match.offset + match.length])
                              //     );

                              //     return (
                              //       <li {...props}>
                              //         <Grid container alignItems="center">
                              //           <Grid item sx={{ display: 'flex', width: 44 }}>
                              //             <LocationOnIcon sx={{ color: 'text.secondary' }} />
                              //           </Grid>
                              //           <Grid item sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
                              //             {parts.map((part, index) => (
                              //               <Box key={index} component="span" sx={{ fontWeight: part.highlight ? 'bold' : 'regular' }}>
                              //                 {part.text}
                              //               </Box>
                              //             ))}
                              //             <Typography variant="body2" color="text.secondary">
                              //               {option.structured_formatting.secondary_text}
                              //             </Typography>
                              //           </Grid>
                              //         </Grid>
                              //       </li>
                              //     );
                              //   }}
                              // />
                              <div>
                                <TextField
                                  id="addressAuto2"
                                  disabled={!isLocation}
                                  placeholder="Search"
                                  fullWidth
                                  value={inputValue3}
                                  onChange={(e) => setInputValue3(e.target.value)}
                                  InputProps={{
                                    endAdornment: (
                                      <IconButton
                                        onClick={() => {
                                          setInputValue3('');
                                          setDropCust({
                                            ...dropCust,
                                            doorno: '',
                                            suburb: '',
                                            city: '',
                                            postcode: '',
                                            landmark: ''
                                          });
                                          setShowDistance(false);
                                          setEndPoint({ latitude: 0, longitude: 0 });
                                        }}
                                        size="small"
                                      >
                                        <CloseIcon />
                                      </IconButton>
                                    )
                                  }}
                                />
                              </div>
                            ) : (
                              <TextField
                                disabled={!isLocation}
                                InputProps={{
                                  endAdornment: (
                                    <IconButton
                                      onClick={() => {
                                        setAddId2(0);
                                        setDropCust({
                                          ...dropCust,
                                          firstname: '',
                                          contactno: '',
                                          doorno: '',
                                          suburb: '',
                                          city: '',
                                          postcode: '',
                                          landmark: ''
                                        });
                                        setShowDistance(false);
                                        setEndPoint({ latitude: 0, longitude: 0 });
                                      }}
                                    >
                                      <ClearIcon />
                                    </IconButton>
                                  )
                                }}
                                variant="outlined"
                                placeholder="Select"
                                value={dropCust.address}
                                onChange={(e) => {
                                  setPickCust({ ...dropCust, address: e.target.value });
                                  if (e.target.value == '') {
                                    setAddId2(0);
                                    setShowDistance(false);
                                    setEndPoint({ latitude: 0, longitude: 0 });
                                  }
                                }}
                              />
                            )}
                          </Stack>
                        </Grid>

                        <Grid item xs={12}>
                          <Typography variant="h5" sx={{ my: 2 }}>
                            Drop Details
                          </Typography>
                          <Grid container spacing={4}>
                            {/* ====================================== ||Contact Name (drop) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                variant="outlined"
                                label="Contact Name"
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <FaUser />
                                    </IconButton>
                                  )
                                }}
                                value={dropCust.firstname}
                                onChange={(e) => {
                                  setDropCust({ ...dropCust, firstname: e.target.value });
                                }}
                              />
                            </Grid>
                            {/* ====================================== ||Contact Number (drop) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                type="number"
                                variant="outlined"
                                label="Contact Number"
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <FaPhoneAlt />
                                    </IconButton>
                                  )
                                }}
                                value={dropCust.contactno}
                                onChange={(e) => {
                                  if (e.target.value.length <= 10) {
                                    setDropCust({ ...dropCust, contactno: e.target.value });
                                  }
                                }}
                              />
                            </Grid>
                            {/* ====================================== ||Door No (drop) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                variant="outlined"
                                label="Door No / Street"
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <GiDoorHandle />
                                    </IconButton>
                                  )
                                }}
                                value={dropCust.doorno}
                                onChange={(e) => {
                                  setDropCust({ ...dropCust, doorno: e.target.value });
                                }}
                              />
                            </Grid>
                            {/* ====================================== ||Suburb (drop) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                variant="outlined"
                                label="Location"
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <FaLocationDot />
                                    </IconButton>
                                  )
                                }}
                                value={dropCust.suburb}
                                onChange={(e) => {
                                  setDropCust({ ...dropCust, suburb: e.target.value });
                                }}
                              />
                            </Grid>
                            {/* ====================================== ||City (drop) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                variant="outlined"
                                label="City"
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <MdLocationCity />
                                    </IconButton>
                                  )
                                }}
                                value={dropCust.city}
                                onChange={(e) => {
                                  setDropCust({ ...dropCust, city: e.target.value });
                                }}
                              />
                            </Grid>

                            {/* ====================================== ||Postcode (drop) || ====================================== */}
                            <Grid item xs={6}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                variant="outlined"
                                label="Postcode"
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <TbMapPinCode />
                                    </IconButton>
                                  )
                                }}
                                value={dropCust.postcode}
                                onChange={(e) => {
                                  setDropCust({ ...dropCust, postcode: e.target.value });
                                }}
                              />
                            </Grid>
                            {/* ====================================== ||Landmark (drop) || ====================================== */}
                            <Grid item xs={12}>
                              <TextField
                                disabled={!isLocation}
                                fullWidth
                                variant="outlined"
                                label="Landmark"
                                InputProps={{
                                  startAdornment: (
                                    <IconButton>
                                      <FaLandmarkDome />
                                    </IconButton>
                                  )
                                }}
                                value={dropCust.landmark}
                                onChange={(e) => {
                                  setDropCust({ ...dropCust, landmark: e.target.value });
                                }}
                              />
                            </Grid>
                          </Grid>
                        </Grid>
                        {/* <Stack
                          sx={{ width: '100%', display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'end', mt: 2 }}
                        >
                          <Button
                            variant="outlined"
                            sx={{
                              width: 130,
                              '&:hover': {
                                bgcolor: theme.palette.primary.main,
                                color: 'white'
                              }
                            }}
                          >
                            Save for Later
                          </Button>
                        </Stack> */}
                      </Grid>
                    </MainCard>
                  </Grid>
                  {/* ================================================= || Time || ================================================= */}
                  <Grid item xs={12} sm={6}>
                    <MainCard sx={{ mt: 2 }}>
                      <Grid container>
                        <Grid item xs={12}>
                          <Typography variant="h5">Date</Typography>
                          <LocalizationProvider dateAdapter={AdapterDayjs} sx={{}}>
                            <DatePicker
                              format="DD-MM-YYYY"
                              onChange={(e) => {
                                let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd');
                                console.log('dateres11');
                                console.log(dateres11);
                                setSelectedtime('');
                                if (dateres11 <= 0) {
                                  console.log('startdate', e);
                                  setStartdate(e);
                                  setEnddate(e);

                                  let arr = [];
                                  timeslotarr.map((val) => {
                                    if (
                                      dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0
                                    ) {
                                      arr.push(val);
                                    }
                                  });
                                  if (arr[0]) {
                                    setOrderarr([
                                      {
                                        sno: 1,
                                        address: '',
                                        customerid: '',
                                        deliverytime: dayjs(arr[0]) || '',
                                        deliverylocationid: '',
                                        clientname: '',
                                        contactno: '',
                                        latitude: '',
                                        longitude: ''
                                      }
                                    ]);
                                  } else {
                                    setOrderarr([]);
                                  }
                                } else {
                                  setAlertmessage('choose Upcoming Date');
                                  opentoast('choose Upcoming Date', 'warning');
                                  setStartdate(NaN);
                                }
                              }}
                              value={dayjs(startdate)}
                              sx={{ width: '100%', mt: 2 }}
                              disablePast
                            />
                          </LocalizationProvider>
                          <Typography variant="h5" sx={{ my: 2 }}>
                            Time
                          </Typography>
                          <MainCard
                            sx={{
                              mt: 1,
                              height: { md: '150px' },

                              overflowY: 'scroll',
                              scrollbarWidth: 'thin', // Hide scrollbar in Firefox
                              '&::-webkit-scrollbar': {
                                width: '3px' // Customize the width of the scrollbar
                              },
                              '&::-webkit-scrollbar-thumb': {
                                backgroundColor: '#65387A', // Customize the scrollbar thumb color
                                borderRadius: '6px' // Round the scrollbar thumb
                              }
                            }}
                          >
                            <Grid container spacing={2}>
                              {timeslotarr.map((val, index) => {
                                if (
                                  dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0
                                ) {
                                  return (
                                    <Fragment key={index}>
                                      <Grid item>
                                        <Chip
                                          key={index}
                                          sx={{ cursor: 'pointer' }}
                                          color={dayjs(selectedtime).format('HH:mm') == dayjs(val).format('HH:mm') ? 'primary' : 'default'}
                                          label={dayjs(val).format('hh:mm A')}
                                          onClick={() => {
                                            if (distance > appLocaRadius) {
                                              setOpen4(true);
                                            } else if (showDistance) {
                                              console.log('selectedtime', val);
                                              setSelectedtime(val);
                                            } else {
                                              opentoast('Select Pickup and Drop', 'error');
                                            }
                                          }}
                                        />
                                      </Grid>
                                    </Fragment>
                                  );
                                }
                              })}
                            </Grid>
                          </MainCard>
                        </Grid>
                      </Grid>
                    </MainCard>
                  </Grid>
                  <Grid item xs={12} sm={6} sx={{}}>
                    <MainCard sx={{ mt: 2, height: 330 }}>
                      {showDistance && (
                        <Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', mb: 3 }}>
                          <Stack spacing={1.5}>
                            <Typography variant="h5">Distance</Typography>

                            <Chip label={`Distance: ${distance} km`} size="medium" variant="contained" color="primary" />
                          </Stack>
                          <Stack spacing={1.5}>
                            <Typography variant="h5">Charges</Typography>
                            <Chip label={`Charge: ₹${totalCharge.toFixed(2)}`} size="medium" variant="contained" color="primary" />
                          </Stack>
                        </Stack>
                      )}
                      <Typography variant="h5">Category</Typography>
                      <Autocomplete
                        disablePortal
                        id="combo-box-demo"
                        options={subCat}
                        getOptionLabel={(option) => `${option.subcategoryname}` || ''}
                        sx={{ my: 2, zIndex: '100' }}
                        fullWidth
                        renderInput={(params) => <TextField {...params} label={subCatName == '' ? tenant.subcategoryname : subCatName} />}
                        onChange={(event, value, reason) => {
                          if (value) {
                            console.log(value);
                            setSubCatName(value.subcategoryname);
                            setSubCatId(value.subcategoryid);
                          }
                        }}
                      />
                      <Typography variant="h5">Weight</Typography>
                      <Stack direction={'row'} justifyContent={'space-evenly'} sx={{ border: '1px solid #eee', my: 2, py: 2 }}>
                        <Chip
                          variant="contained"
                          color="default"
                          label="1-10kgs"
                          sx={chipStyle('1-10kgs')}
                          onClick={() => {
                            handleChipClick('1-10kgs');
                            setWeight('1-10kgs');
                          }}
                        />
                        <Chip
                          variant="contained"
                          color="default"
                          label="11-20kgs"
                          sx={chipStyle('11-20kgs')}
                          onClick={() => {
                            handleChipClick('11-20kgs');
                            setWeight('11-20kgs');
                          }}
                        />
                        <Chip
                          variant="contained"
                          color="default"
                          label="21-30kgs"
                          sx={chipStyle('21-30kgs')}
                          onClick={() => {
                            handleChipClick('21-30kgs');
                            setWeight('21-30kgs');
                          }}
                        />
                      </Stack>
                    </MainCard>
                  </Grid>
                </Grid>
              </Grid>
            </Grid>
            {/* ================================================= || Notes || ================================================= */}
            <MainCard sx={{ mt: 2 }}>
              <Grid container>
                <Grid item xs={12}>
                  <TextField
                    focused
                    variant="outlined"
                    id="outlined-multiline-static"
                    sx={{ width: '100%', height: '100%', mb: 2 }}
                    multiline
                    rows={1}
                    label="Notes"
                    placeholder="Notes"
                    value={otherinstructions}
                    onChange={(e) => setOtherinstructions(e.target.value)}
                  />

                  {/* </Grid> */}
                </Grid>
                <Stack direction="row" justifyContent={'end'} sx={{ mt: 2, width: '100%' }}>
                  <Button
                    disabled={!showDistance}
                    variant="contained"
                    sx={{
                      '&:hover': {
                        bgcolor: 'white',
                        color: theme.palette.primary.main,
                        border: `1px solid ${theme.palette.primary.main}`
                      }
                    }}
                    onClick={() => {
                      setLoading(true);
                      createsubmitobj2();
                      setTimeout(() => {
                        setLoading(false);
                      }, 1000);
                    }}
                  >
                    Create
                  </Button>
                </Stack>
              </Grid>
            </MainCard>
          </Box>
        </Grid>

        {/* <Dialog
          open={open3}
          onClose={closetimemodal}
          sx={{ '& .MuiDialog-paper': { p: 0 }, '& .MuiBackdrop-root': { opacity: '0.5 !important' } }}
        >
          <DialogTitle>
            <Stack direction="row" justifyContent="space-between" alignItems="center">
              <Typography variant="h5">Select Time</Typography>
            </Stack>
          </DialogTitle>
          <Divider />
          <DialogContent sx={{ p: 2.5 }}>
            <Grid container spacing={2}>
              {timeslotarr.map((val) => {
                if (
                  dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0
                  // && currentsno
                ) {
                  return (
                    <>
                      <Grid item>
                        <Chip
                          sx={{ cursor: 'pointer' }}
                          label={dayjs(val).format('hh:mm A')}
                          onClick={() => {
                            setSelectedtime(dayjs(val).format('hh:mm A'));
                          }}
                        />
                      </Grid>
                    </>
                  );
                }
              })}
            </Grid>
          </DialogContent>
          <Divider />
          <DialogActions sx={{ p: 2.5, minWidth: '300px' }}>
            <Button
              variant="contained"
              color="error"
              onClick={() => {
                closetimemodal();
              }}
            >
              Cancel
            </Button>
            <Button onClick={closetimemodal} color="primary" variant="contained">
              OK
            </Button>
          </DialogActions>
        </Dialog> */}

        {/* ============================================= || saved address Dialog || ============================================= */}
        <Dialog
          open={isCustomerOpen}
          onClose={() => {
            setIsCustomerOpen(false);
          }}
          fullWidth
          sx={{ minWidth: 'lg' }}
        >
          <DialogTitle sx={{ bgcolor: theme.palette.primary.main, color: 'white' }}>
            <Stack>
              <Typography variant="h4"> {`Select Location (${pickordrop === 1 ? 'Pickup' : 'Drop'})`}</Typography>
              <FormControl
                sx={{
                  width: '100%',
                  mt: 1
                }}
              >
                <Stack spacing={2} sx={{ py: 0.2 }}>
                  <OutlinedInput
                    fullWidth
                    id="input-search-header"
                    placeholder="Search"
                    value={searchCustList}
                    onChange={(e) => setSearchCustList(e.target.value)}
                    // onChange={handleSearch}
                    sx={{
                      '& .MuiOutlinedInput-input': {
                        p: '10.5px 0px 12px'
                      },
                      bgcolor: 'white'
                    }}
                    startAdornment={
                      <InputAdornment position="start">
                        <SearchOutlined style={{ fontSize: 'small' }} />
                      </InputAdornment>
                    }
                    endAdornment={
                      <IconButton
                        sx={{ visibility: searchCustList ? 'visible' : 'hidden' }}
                        onClick={() => {
                          setSearchCustList('');
                        }}
                      >
                        <ClearIcon />
                      </IconButton>
                    }
                    autoComplete="off"
                  />
                </Stack>
              </FormControl>
            </Stack>
          </DialogTitle>
          <Divider />
          <DialogContent sx={{ p: 2.5 }}>
            {customerlist.length == 0 ? (
              <Stack spacing={2} direction={'row'} alignItems={'center'} justifyContent={'center'} sx={{ minHeight: 600, maxHeight: 600 }}>
                <Empty />
              </Stack>
            ) : (
              <Stack spacing={2} sx={{ minHeight: 600, maxHeight: 600 }}>
                {customerlist &&
                  customerlist.map((address, index) => (
                    <Button
                      onClick={() => {
                        setIsCustomerOpen(false);
                        if (pickordrop === 1) {
                          console.log('PickupClient', address);

                          setStartPoint({ latitude: address.latitude, longitude: address.longitude });
                          setPickCust(address);
                        } else {
                          console.log('DropClient', address);
                          setDropCust(address);
                          setEndPoint({ latitude: address.latitude, longitude: address.longitude });
                        }
                      }}
                      disabled={pickCust.customerid === address.customerid}
                      key={index}
                      sx={{
                        width: '100%',
                        border: '1px solid',
                        borderColor: 'grey.200',
                        borderRadius: 1,
                        p: 1.25,
                        // bgcolor: pickCust.customerid === address.customerid ? theme.palette.primary.main : null,
                        // color: pickCust.customerid === address.customerid ? 'white' : null,
                        '&:hover': {
                          // bgcolor: pickCust.customerid === address.customerid ? theme.palette.primary.main : theme.palette.primary.lighter,
                          // color: pickCust.customerid === address.customerid ? 'white' : null
                        }
                      }}
                    >
                      <div style={{ width: '100%' }}>
                        <Typography variant="subtitle1" sx={{ textAlign: 'left' }}>
                          {`${address.firstname} (${address.contactno})`}
                        </Typography>

                        <Typography variant="body2" color="secondary" sx={{ textAlign: 'left' }}>
                          {address.address}
                        </Typography>
                      </div>
                    </Button>
                  ))}
              </Stack>
            )}
          </DialogContent>
          <Divider />
          <DialogActions sx={{ p: 2.5 }}>
            <Button
              color="error"
              variant="outlined"
              sx={{
                '&:hover': {
                  bgcolor: 'red',
                  color: 'white'
                }
              }}
              onClick={() => {
                setIsCustomerOpen(false);
              }}
            >
              Cancel
            </Button>
            {/* <Button
              onClick={() => {
                setIsCustomerOpen(false);
              }}
              color="primary"
              variant="contained"
            >
              ok
            </Button> */}
          </DialogActions>
        </Dialog>

        <Dialog
          // anchor={'right'}
          open={open4}
          onClose={() => {
            setOpen4(false);
          }}
        >
          <DialogTitle sx={{ textAlign: 'center' }}>
            <HighlightOffIcon sx={{ fontSize: 60, color: theme.palette.error.main }} />
            <Typography variant="h3" sx={{ color: theme.palette.error.main }}>
              Error
            </Typography>
          </DialogTitle>
          <DialogContent>
            <Typography variant="h4" color={'secondary'}>
              Service not available at this location
            </Typography>
          </DialogContent>
          <DialogActions
            sx={{
              bgcolor: theme.palette.error.main,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 20,
              color: 'white',
              cursor: 'pointer'
            }}
            onClick={() => {
              setOpen4(false);
            }}
          >
            Close
          </DialogActions>
        </Dialog>
      </Grid>
    </>
  );
};

export default Createorder1;