/* eslint-disable no-unused-vars */
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,
  FormGroup,
  FormControlLabel
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import { calculateDrivingDistance, calculateTotalCharge } from '../../../utils/distance';
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 { getAdminPricing, getAdminTenant, getTenantCustomers, getTenantLocations, createExpressBooking } from 'pages/api/doormileApi';
import { useTheme } from '@mui/material/styles';
import AddressAutocomplete from 'components/nearle_components/AddressAutocomplete';
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 MyLocationIcon from '@mui/icons-material/MyLocation';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
import { Paper } from '@mui/material';
import {
  MdAddShoppingCart,
  MdMyLocation,
  MdLocationOn,
  MdSchedule,
  MdLocalShipping,
  MdAttachMoney,
  MdNotes,
  MdCheckCircle,
  MdReceiptLong,
  MdInventory2,
  MdStraighten,
  MdPersonPin,
  MdPerson,
  MdHistoryToggleOff
} from 'react-icons/md';

// ============================================================================
// Design tokens — shared with the rest of the redesigned operator pages.
// ============================================================================
const DT = {
  radiusPill: 999,
  radiusCard: 16,
  shadowSoft: '0 14px 40px rgba(15, 23, 42, 0.10)',
  shadowMd: '0 8px 24px rgba(15, 23, 42, 0.08)',
  shadowPop: '0 18px 50px rgba(15, 23, 42, 0.18)',
  textPrimary: '#0f172a',
  textSecondary: '#64748b',
  textMuted: '#94a3b8',
  borderSubtle: '#e2e8f0',
  divider: '#f1f5f9',
  surface: '#ffffff',
  surfaceAlt: '#f8fafc'
};
const dtA = (c, suffix) => `${c}${suffix}`;
const tint = (c) => dtA(c, '08');
const soft = (c) => dtA(c, '18');
const ring = (c) => dtA(c, '26');
const edge = (c) => dtA(c, '55');

const BRAND = '#C01227';
const BRAND_LIGHT = '#D25463';

// Soft card section header — coloured banner above each form section.
const SectionHeader = ({ color, icon, title, subtitle, action }) => (
  <Stack
    direction="row"
    alignItems="center"
    justifyContent="space-between"
    spacing={1}
    sx={{
      px: { xs: 1.5, md: 2 },
      py: 1.25,
      borderBottom: `1px solid ${DT.divider}`,
      background: `linear-gradient(90deg, ${tint(color)} 0%, transparent 100%)`
    }}
  >
    <Stack direction="row" alignItems="center" spacing={1.25}>
      <Avatar sx={{ width: 32, height: 32, bgcolor: color, color: '#fff', boxShadow: `0 6px 18px ${ring(color)}` }}>{icon}</Avatar>
      <Stack>
        <Typography sx={{ fontWeight: 800, color: DT.textPrimary, fontSize: 14, lineHeight: 1.1 }}>{title}</Typography>
        {subtitle && (
          <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
            {subtitle}
          </Typography>
        )}
      </Stack>
    </Stack>
    {action}
  </Stack>
);

// Section wrapper Paper used as the outer card for each form block.
const SectionCard = ({ children, sx = {} }) => (
  <Paper
    elevation={0}
    sx={{
      borderRadius: DT.radiusCard / 8,
      border: '1px solid',
      borderColor: DT.borderSubtle,
      background: '#fff',
      overflow: 'hidden',
      boxShadow: DT.shadowSoft,
      height: '100%',
      ...sx
    }}
  >
    {children}
  </Paper>
);

// Popup paper for Autocomplete dropdowns — matches the rest of the design.
const SoftPaper = (props) => (
  <Paper
    {...props}
    sx={{
      mt: 0.75,
      borderRadius: 2,
      boxShadow: DT.shadowPop,
      border: '1px solid',
      borderColor: 'divider',
      overflow: 'hidden'
    }}
  />
);

const Createorder1 = () => {
  // ================================================= || GoogleMaps (Drawer) || =================================================
  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 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 [latlong, setLatlong] = useState({});
  const [latlong1, setLatlong1] = useState({});
  const autocompleteService = useRef(null);
  const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid'));
  const [isLocation, setIsLocation] = useState(false);
  const textFieldRef1 = useRef(null);
  const textFieldRef2 = useRef(null);
  const [collectionamt, setCollectionamt] = useState(0);
  const [quantity, setQuantity] = useState(1);

  const handleOkClick1 = () => {
    // Set focus back to the text field after clicking the "OK" chip
    if (textFieldRef1.current) {
      textFieldRef1.current.focus();
    }
  };

  const handleOkClick2 = () => {
    // Set focus back to the text field after clicking the "OK" chip
    if (textFieldRef2.current) {
      textFieldRef2.current.focus();
    }
  };

  const top100Films = [
    { label: 'The Shawshank Redemption', year: 1994 },
    { label: 'The Godfather', year: 1972 },
    { label: 'The Godfather: Part II', year: 1974 },
    { label: 'The Dark Knight', year: 2008 },
    { label: '12 Angry Men', year: 1957 }
  ];

  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 [btnLoading, setBtnLoading] = 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 [isNumChange1, setIsNumChange1] = useState(0);
  const [isNumChange2, setIsNumChange2] = useState(0);
  const [showCheck1, setShowCheck1] = useState(0);
  const [showCheck2, setShowCheck2] = useState(0);
  const [pickNum, setPickNum] = useState();
  const [dropNum, setdropNum] = useState();
  const [numErr1, setNumErr1] = useState(false);
  const [numErr2, setNumErr2] = useState(false);
  const [isSms, setIsSms] = useState(0);

  useEffect(() => {
    console.log(isSms);
  }, [isSms]);

  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 pricing = (await getAdminPricing()) || [];
      const match = pricing.find((p) => p.tenantid === tid);
      if (match) {
        setBasePrice(match.baseprice);
        setPricePerKm(match.priceperkm);
        setMinKm(match.basedistance);
      }
    } 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();
      calculateDistance(startPoint, endPoint);
    }
  }, [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);
    }
  };

  const calculateDistance = async (pickup, drop) => {
    try {
      const roundedDistance = await calculateDrivingDistance(pickup, drop);
      console.log('calculated distance in km:', roundedDistance);
      setDistance(roundedDistance);

      const total = calculateTotalCharge(roundedDistance, basePrice, pricePerKm, minKm);
      console.log('total charge:', total);
      setTotalCharge(total);

      setShowDistance(true);
      if (roundedDistance > appLocaRadius) {
        setShowDistance(true);
        setOpen4(true);
      }

      // ⏱️ Approximate duration
      const avgSpeed = 40; // km/h (adjust if needed)
      const duration = Math.round((roundedDistance / avgSpeed) * 60); // minutes
      console.log(`Distance: ${roundedDistance}, Duration: ${duration}`);
    } catch (error) {
      console.error('Error calculating distance:', error);
    }
  };

  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]);

  // ==================================================== || fetchtenantinfo || ====================================================
  const fetchtenantinfo = async () => {
    setLoading(true);
    try {
      const info = await getAdminTenant(tid);
      if (info) {
        setTenant(info);
        setTenantid(info.tenantid);
        fetchAppAdminTokens();
        setSubCatId(info.subcategoryid);
      }
    } catch (err) {
      console.log(err);
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchtenantinfo();
  }, []);
  // No item-subcategory lookup endpoint in the new API.
  const getsubcategories = async () => setSubCat([]);
  useEffect(() => {
    getsubcategories();
  }, []);

  // ==================================================== || fetchTiming || ====================================================
  // No per-zone open/close-hours or geofence-radius endpoint in the new API
  // (applocationid/"zones" aren't a resource there at all — see fetchAppLocations
  // in pages/api/api.js). Falls back to a fixed 09:00–21:00 delivery window so
  // the order-row / time-slot picker below still has slots to initialise from,
  // and a generous default radius so the "too far" warning doesn't misfire.
  const fetchTiming = async () => {
    setLoading(true);
    const opentime = '09:00:00';
    const closetime = '21:00:00';
    setAppLocaLat(0);
    setAppLocaLng(0);
    setAppLocaRadius(100);
    setStatrttime(`${dayjs().format('MM-DD-YYYY')} ${opentime}`);
    setEndtime(`${dayjs().format('MM-DD-YYYY')} ${closetime}`);
    let arr = [];
    for (
      let i = `${dayjs().format('MM-DD-YYYY')} ${opentime}`;
      dayjs(`${dayjs().format('MM-DD-YYYY')} ${closetime} `).diff(i, 'm') >= 0;
      i = dayjs(i).add(30, 'm')
    ) {
      arr.push(i);
    }
    setTimeslotarr(arr);
    setLoading(false);
  };
  useEffect(() => {
    fetchTiming();
  }, []);

  // =============================================== || fetchAppAdminTokens (via  appId) || ===============================================
  // No zone-admin-token lookup endpoint in the new API.
  const fetchAppAdminTokens = async () => setAdmintoken([]);

  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 : 2000
    });
    console.log(alertmessage);
  };

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

  // =============================================== || createsubmitobj1 (create orders) || ===============================================

  const createsubmitobj2 = async () => {
    // POST /admin/expressbooking's schema is a single flat booking object
    // (tenantid, pickuplocationid, customer_phone/name, delivery* fields,
    // service_option, finalprice, notes, parcels[]) — nothing like the old
    // pickup/drop/orders triple. The drop contact becomes the booking's
    // customer (new API models the delivery recipient as "the customer");
    // the pickup side maps to pickuplocationid when a saved location was
    // picked (tenanatLocoId/isLocation, set by the "Business Location"
    // Autocomplete below — pickCust.deliverylocationid was always '' and
    // never actually got wired to the picker, so this shortcut never fired),
    // otherwise raw pickup* fields following the doc's own delivery*/pickup*
    // naming symmetry (pickupaddress/pickuppincode/pickupcity/pickuplatitude/
    // pickuplongitude — NOT shown in the doc's example, so unverified against
    // the live API).
    const arr = {
      tenantid: tenant.tenantid,
      ...(isLocation && tenanatLocoId
        ? { pickuplocationid: tenanatLocoId }
        : {
            pickupaddress: pickCust.address || '',
            pickuppincode: pickCust.postcode || '',
            pickupcity: pickCust.city || '',
            pickuplatitude: Number(pickCust.latitude) || 0,
            pickuplongitude: Number(pickCust.longitude) || 0
          }),
      customer_phone: dropCust.contactno || '',
      customer_name: dropCust.firstname || '',
      deliveryaddress: dropCust.address || '',
      deliverypincode: dropCust.postcode || '',
      deliverycity: dropCust.city || '',
      deliverylatitude: Number(dropCust.latitude) || 0,
      deliverylongitude: Number(dropCust.longitude) || 0,
      service_option: 'Normal',
      finalprice: +totalCharge.toFixed(2) || 0,
      notes: otherinstructions || '',
      parcels: [
        {
          itemcategory: subCat.find((c) => c.subcategoryid === subCatId)?.categoryname || 'General',
          itemdescription: 'Order',
          declaredvalue: +totalCharge.toFixed(2) || 0
        }
      ]
    };
    console.log('createsubmitobj2', arr);
    if (!pickCust.firstname) {
      opentoast('Enter Pickup Contact Name  ', 'warning', 2000);
    } else if (!pickCust.contactno) {
      opentoast('Enter Pickup Contact Number ', 'warning', 2000);
    } else if (pickCust.contactno.length != 10) {
      opentoast('Check Pickup Contact Number ', 'error', 2000);
    } else if (!pickCust.suburb) {
      opentoast('Enter Pickup  Location ', 'warning', 2000);
    } else if (!pickCust.city) {
      opentoast('Enter Pickup City ', 'warning', 2000);
    } else if (!pickCust.postcode) {
      opentoast('Enter Pickup Postcode ', 'warning', 2000);
    } else if (!pickCust.landmark) {
      opentoast('Enter Pickup Landmark ', 'warning', 2000);
    } else if (!dropCust.firstname) {
      opentoast('Enter Drop Contact Name ', 'warning', 2000);
    } else if (!dropCust.contactno) {
      opentoast('Enter Drop Contact Number', 'warning', 2000);
    } else if (dropCust.contactno.length !== 10) {
      opentoast('Check Drop Contact Number ', 'error', 2000);
    } else if (!dropCust.suburb) {
      opentoast('Enter Drop Suburb ', 'warning', 2000);
    } else if (!dropCust.city) {
      opentoast('Enter Drop City ', 'warning', 2000);
    } else if (!dropCust.postcode) {
      opentoast('Enter Drop postcode ', 'warning', 2000);
    } else if (!dropCust.landmark) {
      opentoast('Enter Drop Landmark ', 'warning', 2000);
    } else if (!selectedtime) {
      opentoast('Choose deliverytime ', 'warning', 2000);
    } else if (!setSubCatId) {
      opentoast('Choose SubCategory ', 'warning', 2000);
    } else {
      setLoading(true);
      try {
        const createRes = await createExpressBooking(arr);
        if (createRes.success) {
          enqueueSnackbar('Order Created Successfully', {
            variant: 'success',
            anchorOrigin: { vertical: 'top', horizontal: 'right' },
            autoHideDuration: 1000
          });
          navigate('/nearle/orders');
        } else {
          opentoast(createRes.message || 'Something went wrong, Cannot create order', 'warning');
        }
      } catch (error) {
        console.log('createResErr', error);
        // Previously silent — a thrown error here (network failure, CityGate
        // rejection, validation error) left the operator with no feedback at
        // all and a permanently stuck loading spinner (setLoading(false) was
        // only reachable on the success path).
        opentoast(error.response?.data?.message || error.message || 'Cannot create order', 'error', 3000);
      } finally {
        setLoading(false);
      }
    }
  };

  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 {
      const customers = (await getTenantCustomers()) || [];
      const filtered = searchCustList
        ? customers.filter(
            (val) =>
              val.firstname?.toLowerCase().includes(searchCustList.toLowerCase()) ||
              val.phone?.includes(searchCustList) ||
              val.contactno?.includes(searchCustList)
          )
        : customers;
      setClientdetail(filtered);
      setCustomerlist(filtered);
      setClientdetailarr(filtered.map((val) => ({ label: `${val.firstname} | ${val.phone || val.contactno}`, ...val })));
    } catch (err) {
      console.log(err);
      opentoast('server error', 'warning');
    } finally {
      setLoading2(false);
    }
  };
  useEffect(() => {
    console.log('clientdetails, by search');
    clientdetails();
    // clientdetailsbusiness();
  }, [searchCustList.length > 3, searchCustList == '']);
  // ========================================================= || clientdetailsbusiness || =========================================================
  const clientdetailsbusiness = async () => {
    setLoading2(true);
    try {
      const customers = (await getTenantCustomers()) || [];
      setClientdetail(customers);
      setClientdetailbusinessarr(customers.map((val) => ({ label: `${val.firstname} | ${val.phone || val.contactno}`, ...val })));
    } catch (err) {
      console.log(err);
      opentoast('server error', 'warning');
    } finally {
      setLoading2(false);
    }
  };

  // ================================================== ||  sendnotifications || ==================================================
  // No bulk-notify endpoint in the new API — never actually called (dead in
  // the original code too, only referenced from a commented-out call site).
  const sendnotifications = async () => {};
  // ============================================= || Address Autocomplete (pick) || =============================================
  const handlePickPlaceSelected = (place) => {
    setInputValue2(`${place.name}, ${place.formatted_address}`);
    // to trigger getDistance
    setStartPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
    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()
    });
  };
  // ============================================= || Address Autocomplete (Drop) || =============================================

  const handleDropPlaceSelected = (place) => {
    setInputValue3(`${place.name}, ${place.formatted_address}`);
    setEndPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
    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()
    });
  };

  // ============================================= || gettenantlocations (branches) || =============================================
  const gettenantlocations = async () => {
    try {
      const locations = (await getTenantLocations(tid)) || [];
      setTenantlocations(locations);
      if (locations.length == 1) {
        setIsLocation(true);
        setTenanatLocoId(locations[0].locationid);
      }
    } catch (err) {
      console.log('gettenantlocations', err);
      setTenantlocations([]);
    }
  };
  useEffect(() => {
    gettenantlocations();
  }, []);

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

      <Grid container rowSpacing={2} columnSpacing={2.75}>
        <Grid item xs={12}>
          <Paper
            elevation={0}
            sx={{
              position: 'sticky',
              top: '60px',
              zIndex: 1000,
              mb: 1.5,
              p: { xs: 1.5, sm: 2, md: 2.5 },
              borderRadius: DT.radiusCard / 8,
              border: '1px solid',
              borderColor: DT.borderSubtle,
              background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
              boxShadow: DT.shadowMd
            }}
          >
            <Stack
              direction={{ xs: 'column', sm: 'row' }}
              alignItems={{ xs: 'flex-start', sm: 'center' }}
              justifyContent="space-between"
              spacing={{ xs: 1.5, sm: 2 }}
            >
              <Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
                <Avatar
                  sx={{
                    width: { xs: 40, sm: 48 },
                    height: { xs: 40, sm: 48 },
                    bgcolor: BRAND,
                    color: '#fff',
                    boxShadow: `0 6px 18px ${ring(BRAND)}`
                  }}
                >
                  <MdAddShoppingCart size={22} />
                </Avatar>
                <Stack>
                  <Typography
                    variant="h3"
                    sx={{
                      fontWeight: 800,
                      color: DT.textPrimary,
                      lineHeight: 1.1,
                      fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
                    }}
                  >
                    Create Order
                  </Typography>
                  <Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
                    <Box
                      sx={{
                        width: 8,
                        height: 8,
                        borderRadius: '50%',
                        bgcolor: '#10b981',
                        boxShadow: '0 0 0 4px rgba(16,185,129,0.18)'
                      }}
                    />
                    <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
                      Fill pickup, drop, schedule & pricing details
                    </Typography>
                  </Stack>
                </Stack>
              </Stack>

              {tenantLocations.length === 1 ? (
                <Box
                  sx={{
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 0.75,
                    px: 1.5,
                    py: 0.875,
                    borderRadius: 999,
                    bgcolor: tint(BRAND),
                    border: `1.5px solid ${edge(BRAND)}`,
                    color: BRAND,
                    fontWeight: 800,
                    fontSize: 13
                  }}
                >
                  <MdMyLocation size={14} /> {tenantLocations[0].locationname}
                </Box>
              ) : (
                <Autocomplete
                  options={tenantLocations || []}
                  getOptionLabel={(option) => (option && option.locationname ? `${option.locationname} (${option.suburb || ''})` : '')}
                  isOptionEqualToValue={(option, value) => option?.locationid === value?.locationid}
                  PaperComponent={SoftPaper}
                  sx={{ width: { xs: '100%', sm: 300 } }}
                  size="small"
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      placeholder="Select Business Location"
                      InputProps={{
                        ...params.InputProps,
                        startAdornment: (
                          <Stack direction="row" alignItems="center" spacing={0.75} sx={{ pl: 0.5 }}>
                            <Avatar sx={{ width: 22, height: 22, bgcolor: BRAND, color: '#fff' }}>
                              <MdMyLocation size={13} />
                            </Avatar>
                          </Stack>
                        )
                      }}
                      sx={{
                        '& .MuiOutlinedInput-root': {
                          borderRadius: DT.radiusPill + 'px',
                          bgcolor: '#fff',
                          fontWeight: 600,
                          '& fieldset': { borderColor: edge(BRAND), borderWidth: 1.5 },
                          '&:hover fieldset': { borderColor: BRAND },
                          '&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` },
                          '&.Mui-focused fieldset': { borderColor: BRAND, borderWidth: 2 }
                        }
                      }}
                    />
                  )}
                  onChange={(event, value, reason) => {
                    if (value) {
                      setTenanatLocoId(value.locationid);
                      setIsLocation(true);
                    }
                    if (reason === 'clear') {
                      setIsLocation(false);
                    }
                  }}
                />
              )}
            </Stack>
          </Paper>
        </Grid>

        <Grid item xs={12}>
          <Box sx={{ overflow: 'visible' }}>
            <Grid container spacing={2}>
              <Grid item xs={12}>
                <Grid container spacing={2} sx={{ height: '100%' }}>
                  {/* ================================================= || Pickup || ================================================= */}
                  <Grid item xs={12} sm={6}>
                    <SectionCard>
                      <SectionHeader
                        color="#0ea5e9"
                        icon={<MdLocationOn size={16} />}
                        title="Pickup Details"
                        subtitle="Where the order is picked up"
                        action={
                          <Button
                            size="small"
                            variant="outlined"
                            startIcon={<MdPersonPin size={14} />}
                            onClick={() => {
                              if (!isLocation) {
                                opentoast('Select Business Location', 'warning');
                              } else {
                                setIsCustomerOpen(true);
                                setpickordrop(1);
                                setPickCust({});
                                setInputValue2('');
                                setSearchCustList('');
                              }
                            }}
                            sx={{
                              borderRadius: 999,
                              px: 1.5,
                              py: 0.375,
                              fontSize: 11.5,
                              fontWeight: 700,
                              textTransform: 'none',
                              borderColor: edge('#0ea5e9'),
                              color: '#0ea5e9',
                              '&:hover': {
                                borderColor: '#0ea5e9',
                                bgcolor: tint('#0ea5e9'),
                                boxShadow: `0 0 0 3px ${ring('#0ea5e9')}`
                              }
                            }}
                          >
                            Saved Locations
                          </Button>
                        }
                      />
                      <Box sx={{ p: { xs: 2, md: 2.5 } }}>
                        <Grid container spacing={2}>
                          <Grid item xs={12}>
                            <Grid container spacing={4}>
                              {/* ====================================== ||Contact Name (pick) || ====================================== */}
                              <Grid item xs={6}>
                                <TextField
                                  inputRef={textFieldRef1}
                                  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
                                  error={numErr1}
                                  disabled={!isLocation}
                                  fullWidth
                                  type="number"
                                  InputProps={{
                                    inputProps: {
                                      maxLength: 10
                                    },
                                    startAdornment: (
                                      <IconButton>
                                        <FaPhoneAlt color={numErr1 && 'red'} />
                                      </IconButton>
                                    )
                                  }}
                                  variant="outlined"
                                  label="Contact Number"
                                  value={pickCust.contactno}
                                  onChange={(e) => {
                                    if (e.target.value.length <= 10) {
                                      setPickCust({ ...pickCust, contactno: e.target.value });
                                    }
                                    if (pickNum == e.target.value) {
                                      setShowCheck1(0);
                                    } else {
                                      setShowCheck1(1);
                                    }
                                    if (e.target.value.length < 10) {
                                      setNumErr1(true);
                                    } else {
                                      setNumErr1(false);
                                    }
                                  }}
                                />
                              </Grid>
                              {/* ====================================== || Address (pick) || ====================================== */}
                              <Grid item xs={12}>
                                <Stack spacing={1.25} sx={{ mt: 0 }}>
                                  {addId1 == 0 ? (
                                    <div>
                                      <AddressAutocomplete
                                        label="Address"
                                        disabled={!isLocation}
                                        id="addressAuto1"
                                        fullWidth
                                        value={inputValue2}
                                        onChange={setInputValue2}
                                        onPlaceSelected={handlePickPlaceSelected}
                                        bias={{ lat: appLocaLat, lng: appLocaLng }}
                                        TextFieldProps={{
                                          variant: 'outlined',
                                          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>

                              {/* ====================================== ||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>
                              {/* ====================================== ||Checkbox save for later (pick) || ====================================== */}
                              {showCheck1 == 1 && (
                                <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'end' }}>
                                  <FormGroup>
                                    <FormControlLabel
                                      control={
                                        <Checkbox
                                          checked={isNumChange1 === 1}
                                          onChange={(e) => {
                                            setIsNumChange1(e.target.checked ? 1 : 0);
                                          }}
                                        />
                                      }
                                      label="Save For Later"
                                    />
                                  </FormGroup>
                                </Grid>
                              )}
                            </Grid>
                          </Grid>
                        </Grid>
                      </Box>
                    </SectionCard>
                  </Grid>
                  {/* ================================================= || Drop || ================================================= */}
                  <Grid item xs={12} sm={6}>
                    <SectionCard>
                      <SectionHeader
                        color={BRAND}
                        icon={<MdLocalShipping size={16} />}
                        title="Drop Details"
                        subtitle="Where the order is delivered"
                        action={
                          <Button
                            size="small"
                            variant="outlined"
                            startIcon={<MdPersonPin size={14} />}
                            onClick={() => {
                              if (!isLocation) {
                                opentoast('Select Business Location', 'warning');
                              } else {
                                setIsCustomerOpen(true);
                                setpickordrop(2);
                                setInputValue3('');
                                setSearchCustList('');
                              }
                            }}
                            sx={{
                              borderRadius: 999,
                              px: 1.5,
                              py: 0.375,
                              fontSize: 11.5,
                              fontWeight: 700,
                              textTransform: 'none',
                              borderColor: edge(BRAND),
                              color: BRAND,
                              '&:hover': {
                                borderColor: BRAND,
                                bgcolor: tint(BRAND),
                                boxShadow: `0 0 0 3px ${ring(BRAND)}`
                              }
                            }}
                          >
                            Saved Locations
                          </Button>
                        }
                      />
                      <Box sx={{ p: { xs: 2, md: 2.5 } }}>
                        <Grid container spacing={2} sx={{ height: '100%' }}>
                          <Grid item xs={12} sx={{ height: '100%' }}>
                            <Stack direction={'row'} justifyContent={'space-between'} sx={{ display: 'none' }}>
                              <Typography variant="h5" sx={{ mb: 2 }}>
                                Drop Details
                              </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);

                                      setInputValue3('');
                                      setSearchCustList('');
                                    }
                                  }}
                                >
                                  Saved Locations
                                </Button>
                              </Stack>
                            </Stack>
                            {/* new2 */}
                            {/* <Autocomplete
                            disabled={!isLocation}
                            fullWidth
                            disablePortal
                            id="combo-box-demo"
                            // options={customerlist}
                            options={clientdetailarr}
                            getOptionLabel={(option) => `${option.firstname} (${option.contactno})`}
                            sx={{ mt: 0, mb: 1 }}
                            renderInput={(params) => (
                              <TextField
                                {...params}
                                label="Search"
                                onChange={(e) => {
                                  setSearchCustList(e.target.value);
                                }}
                                InputProps={{
                                  ...params.InputProps,
                                  inputProps: {
                                    ...params.inputProps,
                                    maxLength: 10
                                  }
                                }}
                              />
                            )}
                            onChange={(e, val, reason) => {
                              if (val) {
                                if (pickCust.customerid === val.customerid) {
                                  opentoast('Select Another Customer', 'error');
                                  setSearchCustList('');
                                } else {
                                  console.log('DropClient', val);
                                  setDropCust(val);
                                  setEndPoint({ latitude: val.latitude, longitude: val.longitude });
                                  setAddId2(1);
                                }
                              }
                              if (reason == 'clear') {
                                setSearchCustList('');
                              }
                            }}
                            noOptionsText={
                              /^[0-9]{10}$/.test(searchCustList) ? (
                                <Stack sx={{ width: '100%', display: 'flex', alignItems: 'end', justifyContent: 'end' }}>
                                  <Chip
                                    label={'OK'}
                                    sx={{
                                      width: 50,
                                      cursor: 'pointer',
                                      '&:hover': { background: theme.palette.primary.main, color: 'white' }
                                    }}
                                    onClick={() => {
                                      setDropCust({ ...dropCust, contactno: searchCustList });
                                      handleOkClick2();
                                      setSearchCustList('');
                                    }}
                                  />
                                </Stack>
                              ) : null
                            }
                          /> */}
                          </Grid>

                          <Grid item xs={12}>
                            <Grid container spacing={4}>
                              {/* ====================================== ||Contact Name (drop) || ====================================== */}
                              <Grid item xs={6}>
                                <TextField
                                  inputRef={textFieldRef2}
                                  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}
                                  error={numErr2}
                                  fullWidth
                                  type="number"
                                  variant="outlined"
                                  label="Contact Number"
                                  InputProps={{
                                    startAdornment: (
                                      <IconButton>
                                        <FaPhoneAlt color={numErr2 && 'red'} />
                                      </IconButton>
                                    )
                                  }}
                                  value={dropCust.contactno}
                                  onChange={(e) => {
                                    if (e.target.value.length <= 10) {
                                      setDropCust({ ...dropCust, contactno: e.target.value });
                                    }
                                    if (dropNum == e.target.value) {
                                      setShowCheck2(0);
                                    } else {
                                      setShowCheck2(1);
                                    }
                                    if (e.target.value.length < 10) {
                                      setNumErr2(true);
                                    } else {
                                      setNumErr2(false);
                                    }
                                  }}
                                />
                              </Grid>
                              <Grid item xs={12}>
                                <Stack spacing={1.25} sx={{ mt: 0 }}>
                                  {addId2 == 0 ? (
                                    <div>
                                      <AddressAutocomplete
                                        id="addressAuto2"
                                        disabled={!isLocation}
                                        label="Address"
                                        fullWidth
                                        value={inputValue3}
                                        onChange={setInputValue3}
                                        onPlaceSelected={handleDropPlaceSelected}
                                        bias={{ lat: appLocaLat, lng: appLocaLng }}
                                        TextFieldProps={{
                                          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>

                              {/* ====================================== ||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>
                              {/* ====================================== ||Checkbox save for later (drop) || ====================================== */}
                              {showCheck2 == 1 && (
                                <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'end' }}>
                                  <FormGroup>
                                    <FormControlLabel
                                      control={
                                        <Checkbox
                                          checked={isNumChange2 === 1}
                                          onChange={(e) => {
                                            setIsNumChange2(e.target.checked ? 1 : 0);
                                          }}
                                        />
                                      }
                                      label="Save For Later"
                                    />
                                  </FormGroup>
                                </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>
                      </Box>
                    </SectionCard>
                  </Grid>
                  {/* ================================================= || Time || ================================================= */}
                  <Grid item xs={12} sm={6}>
                    <SectionCard sx={{ mt: 2, minHeight: 390 }}>
                      <SectionHeader color="#f59e0b" icon={<MdSchedule size={16} />} title="Schedule" subtitle="Pickup date & time slot" />
                      <Box sx={{ p: { xs: 2, md: 2.5 } }}>
                        <Grid container>
                          <Grid item xs={12}>
                            <Typography variant="subtitle2" sx={{ fontWeight: 700, color: DT.textSecondary, mb: 1 }}>
                              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="subtitle2" sx={{ fontWeight: 700, color: DT.textSecondary, mt: 2, mb: 1 }}>
                              Time
                            </Typography>
                            <Box
                              sx={{
                                mt: 0.5,
                                p: 1.25,
                                borderRadius: 2,
                                border: '1px solid',
                                borderColor: DT.divider,
                                bgcolor: DT.surfaceAlt,
                                maxHeight: 150,
                                overflowY: 'auto',
                                scrollbarWidth: 'thin',
                                '&::-webkit-scrollbar': { width: 6 },
                                '&::-webkit-scrollbar-thumb': { backgroundColor: edge(BRAND), borderRadius: 6 }
                              }}
                            >
                              <Stack direction="row" flexWrap="wrap" gap={0.75} useFlexGap>
                                {timeslotarr.map((val, index) => {
                                  if (
                                    dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <=
                                    0
                                  ) {
                                    const active = dayjs(selectedtime).format('HH:mm') == dayjs(val).format('HH:mm');
                                    return (
                                      <Box
                                        key={index}
                                        onClick={() => {
                                          if (distance > appLocaRadius) {
                                            setOpen4(true);
                                          } else if (showDistance) {
                                            setSelectedtime(val);
                                          } else {
                                            opentoast('Select Pickup and Drop', 'error');
                                          }
                                        }}
                                        sx={{
                                          display: 'inline-flex',
                                          alignItems: 'center',
                                          gap: 0.5,
                                          px: 1.25,
                                          py: 0.5,
                                          cursor: 'pointer',
                                          borderRadius: 999,
                                          border: `1.5px solid ${active ? '#f59e0b' : edge('#f59e0b')}`,
                                          bgcolor: active ? '#f59e0b' : tint('#f59e0b'),
                                          color: active ? '#fff' : '#f59e0b',
                                          fontSize: 12,
                                          fontWeight: 800,
                                          transition: 'all 0.15s',
                                          boxShadow: active ? `0 6px 18px ${ring('#f59e0b')}` : 'none',
                                          '&:hover': {
                                            borderColor: '#f59e0b',
                                            boxShadow: active ? `0 6px 18px ${ring('#f59e0b')}` : `0 0 0 3px ${ring('#f59e0b')}`
                                          }
                                        }}
                                      >
                                        <MdHistoryToggleOff size={11} /> {dayjs(val).format('hh:mm A')}
                                      </Box>
                                    );
                                  }
                                })}
                              </Stack>
                            </Box>
                          </Grid>
                        </Grid>
                      </Box>
                    </SectionCard>
                  </Grid>
                  <Grid item xs={12} sm={6} sx={{}}>
                    <SectionCard sx={{ mt: 2, minHeight: 390 }}>
                      <SectionHeader
                        color="#10b981"
                        icon={<MdAttachMoney size={16} />}
                        title="Distance & Pricing"
                        subtitle="Auto-calculated from pickup → drop"
                      />
                      <Box sx={{ p: { xs: 2, md: 2.5 } }}>
                        {showDistance && (
                          <Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', mb: 3 }}>
                            <Stack spacing={1.5}>
                              <Chip label={`Distance: ${distance} km`} size="medium" variant="contained" color="primary" />
                            </Stack>
                            <Stack spacing={1.5}>
                              <Chip label={`Charge: ₹${totalCharge.toFixed(2)}`} size="medium" variant="contained" color="primary" />
                            </Stack>
                          </Stack>
                        )}
                        <Stack direction={'column'} justifyContent={'space-between'} sx={{ mb: 2 }}>
                          <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);
                              }
                            }}
                          />
                        </Stack>
                        <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>
                        <Stack direction={'row'} justifyContent={'space-between'} sx={{ mt: 4 }}>
                          <Typography variant="h5">SMS Delivery</Typography>
                          <Switch
                            checked={isSms === 1}
                            onChange={(e) => {
                              setIsSms(e.target.checked ? 1 : 0);
                            }}
                          />
                        </Stack>
                      </Box>
                    </SectionCard>
                  </Grid>
                </Grid>
              </Grid>
            </Grid>

            {/* ============================== || Cash Collect & Quantity || ============================== */}
            <SectionCard sx={{ mt: 2 }}>
              <SectionHeader
                color="#6366f1"
                icon={<MdInventory2 size={16} />}
                title="Collection & Quantity"
                subtitle="Cash to collect on delivery, total items"
              />
              <Box sx={{ p: { xs: 2, md: 2.5 } }}>
                <Grid container spacing={2}>
                  <Grid item xs={12} sm={6}>
                    <TextField
                      type="number"
                      value={collectionamt}
                      fullWidth
                      label="Cash Collect"
                      onChange={(e) => setCollectionamt(e.target.value)}
                      inputProps={{ min: 0 }}
                    />
                  </Grid>
                  <Grid item xs={12} sm={6}>
                    <TextField
                      type="number"
                      value={quantity}
                      fullWidth
                      label="Quantity"
                      onChange={(e) => setQuantity(e.target.value)}
                      inputProps={{ min: 1 }}
                    />
                  </Grid>
                </Grid>
              </Box>
            </SectionCard>

            {/* ================================================= || Notes || ================================================= */}
            <SectionCard sx={{ mt: 2 }}>
              <SectionHeader
                color={DT.textSecondary}
                icon={<MdNotes size={16} />}
                title="Notes"
                subtitle="Add anything the rider should know"
              />
              <Box sx={{ p: { xs: 2, md: 2.5 } }}>
                <TextField
                  focused
                  variant="outlined"
                  sx={{ width: '100%', mb: 2 }}
                  multiline
                  rows={2}
                  label="Notes"
                  placeholder="Special instructions, gate code, etc."
                  value={otherinstructions}
                  onChange={(e) => setOtherinstructions(e.target.value)}
                />
                <Divider sx={{ my: 1.5 }} />
                <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={1.25}>
                  {!showDistance && (
                    <Typography variant="caption" sx={{ color: DT.textMuted, fontWeight: 700 }}>
                      Set pickup & drop to enable
                    </Typography>
                  )}
                  <Button
                    size="medium"
                    disabled={!showDistance}
                    variant="contained"
                    startIcon={btnLoading ? null : <MdCheckCircle size={16} />}
                    onClick={() => {
                      setLoading(true);
                      setBtnLoading(true);
                      createsubmitobj2();
                      setTimeout(() => {
                        setLoading(false);
                        setBtnLoading(false);
                      }, 1000);
                    }}
                    sx={{
                      borderRadius: 999,
                      px: 3,
                      py: 1,
                      fontWeight: 800,
                      textTransform: 'none',
                      fontSize: 13,
                      background: `linear-gradient(135deg, ${BRAND} 0%, ${BRAND_LIGHT} 100%)`,
                      color: '#fff',
                      boxShadow: `0 8px 22px ${ring(BRAND)}`,
                      transition: 'all 0.18s',
                      '&:hover': {
                        background: `linear-gradient(135deg, #4D1C61 0%, ${BRAND} 100%)`,
                        transform: 'translateY(-1px)',
                        boxShadow: `0 10px 26px ${ring(BRAND)}`
                      },
                      '&.Mui-disabled': {
                        background: DT.divider,
                        color: DT.textMuted,
                        boxShadow: 'none'
                      }
                    }}
                  >
                    {btnLoading ? <CircularProgress size={18} thickness={5} sx={{ color: '#fff' }} /> : 'Create Order'}
                  </Button>
                </Stack>
              </Box>
            </SectionCard>
          </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
          maxWidth="sm"
          PaperProps={{ sx: { borderRadius: 3 } }}
        >
          <DialogTitle
            sx={{
              p: 2.5,
              background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
              borderBottom: `1px solid ${DT.borderSubtle}`
            }}
          >
            <Stack direction="row" alignItems="center" spacing={1.5} sx={{ mb: 1.5 }}>
              <Avatar sx={{ bgcolor: BRAND, color: '#fff', width: 40, height: 40, boxShadow: `0 6px 18px ${ring(BRAND)}` }}>
                <MdPersonPin size={20} />
              </Avatar>
              <Stack>
                <Typography variant="h5" sx={{ fontWeight: 800, color: DT.textPrimary }}>
                  Saved Locations
                </Typography>
                <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
                  Pick a saved customer for {pickordrop === 1 ? 'Pickup' : 'Drop'}
                </Typography>
              </Stack>
            </Stack>
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                gap: 0.75,
                px: 1.25,
                py: 0.5,
                borderRadius: 999,
                bgcolor: '#fff',
                border: `1.5px solid ${edge(BRAND)}`,
                transition: 'all 0.18s',
                '&:focus-within': {
                  borderColor: BRAND,
                  boxShadow: `0 0 0 3px ${ring(BRAND)}`
                }
              }}
            >
              <SearchOutlined style={{ color: BRAND, fontSize: 14 }} />
              <OutlinedInput
                fullWidth
                placeholder="Search saved customer"
                value={searchCustList}
                onChange={(e) => setSearchCustList(e.target.value)}
                sx={{
                  flex: 1,
                  '& .MuiOutlinedInput-input': { p: '6px 4px', fontSize: 13, fontWeight: 600 },
                  '& fieldset': { border: 'none' }
                }}
                endAdornment={
                  searchCustList && (
                    <IconButton size="small" onClick={() => setSearchCustList('')} sx={{ p: 0.25, color: BRAND }}>
                      <ClearIcon fontSize="small" />
                    </IconButton>
                  )
                }
                autoComplete="off"
              />
            </Box>
          </DialogTitle>
          <DialogContent sx={{ p: 2, bgcolor: DT.surfaceAlt }}>
            {customerlist.length === 0 ? (
              <Stack alignItems="center" justifyContent="center" spacing={1.5} sx={{ minHeight: 480, maxHeight: 480 }}>
                <Avatar sx={{ width: 56, height: 56, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
                  <MdPersonPin size={26} />
                </Avatar>
                <Typography variant="subtitle1" sx={{ fontWeight: 700, color: DT.textPrimary }}>
                  No saved locations
                </Typography>
                <Typography variant="caption" sx={{ color: DT.textSecondary }}>
                  {searchCustList ? 'Try a different keyword.' : 'Save a customer from the order form to reuse it later.'}
                </Typography>
              </Stack>
            ) : (
              <Stack spacing={1} sx={{ minHeight: 480, maxHeight: 480, overflow: 'auto', pr: 0.5 }}>
                {customerlist.map((address, index) => {
                  const isUsed = pickCust.customerid === address.customerid;
                  return (
                    <Box
                      key={index}
                      onClick={() => {
                        if (isUsed) return;
                        setIsCustomerOpen(false);
                        if (pickordrop === 1) {
                          setAddId1(1);
                          setStartPoint({ latitude: address.latitude, longitude: address.longitude });
                          setPickCust(address);
                          setPickNum(address.contactno);
                        } else {
                          setAddId2(1);
                          setEndPoint({ latitude: address.latitude, longitude: address.longitude });
                          setDropCust(address);
                          setdropNum(address.contactno);
                        }
                      }}
                      sx={{
                        display: 'flex',
                        alignItems: 'flex-start',
                        gap: 1.25,
                        p: 1.5,
                        borderRadius: 2,
                        border: '1px solid',
                        borderColor: isUsed ? edge('#94a3b8') : DT.borderSubtle,
                        bgcolor: isUsed ? DT.surfaceAlt : '#fff',
                        cursor: isUsed ? 'not-allowed' : 'pointer',
                        opacity: isUsed ? 0.6 : 1,
                        transition: 'all 0.15s',
                        '&:hover': isUsed
                          ? {}
                          : {
                              borderColor: edge(BRAND),
                              bgcolor: tint(BRAND),
                              boxShadow: DT.shadowSoft
                            }
                      }}
                    >
                      <Avatar sx={{ width: 36, height: 36, bgcolor: soft(BRAND), color: BRAND, fontWeight: 800 }}>
                        {String(address.firstname || '?')
                          .charAt(0)
                          .toUpperCase()}
                      </Avatar>
                      <Stack sx={{ flex: 1, minWidth: 0 }}>
                        <Stack direction="row" alignItems="center" spacing={0.75} flexWrap="wrap" useFlexGap>
                          <Typography sx={{ fontWeight: 800, color: DT.textPrimary, fontSize: 13.5 }} noWrap>
                            {address.firstname}
                          </Typography>
                          <Box
                            sx={{
                              display: 'inline-flex',
                              alignItems: 'center',
                              gap: 0.375,
                              px: 0.75,
                              py: 0.125,
                              borderRadius: 999,
                              bgcolor: tint('#0ea5e9'),
                              border: `1px solid ${edge('#0ea5e9')}`,
                              color: '#0ea5e9',
                              fontSize: 10.5,
                              fontWeight: 800
                            }}
                          >
                            <FaPhoneAlt size={9} /> {address.contactno}
                          </Box>
                          {isUsed && (
                            <Box
                              sx={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                px: 0.75,
                                py: 0.125,
                                borderRadius: 999,
                                bgcolor: tint('#94a3b8'),
                                border: `1px solid ${edge('#94a3b8')}`,
                                color: DT.textSecondary,
                                fontSize: 10.5,
                                fontWeight: 800
                              }}
                            >
                              Already used
                            </Box>
                          )}
                        </Stack>
                        <Typography variant="caption" sx={{ color: DT.textSecondary, mt: 0.25 }} noWrap>
                          {address.address}
                        </Typography>
                      </Stack>
                    </Box>
                  );
                })}
              </Stack>
            )}
          </DialogContent>
          <Stack direction="row" justifyContent="flex-end" sx={{ p: 2, borderTop: `1px solid ${DT.divider}` }}>
            <Button
              variant="outlined"
              onClick={() => setIsCustomerOpen(false)}
              sx={{
                borderRadius: 999,
                px: 2.5,
                borderColor: DT.borderSubtle,
                color: DT.textSecondary,
                fontWeight: 700,
                textTransform: 'none',
                '&:hover': { borderColor: DT.textSecondary, bgcolor: DT.surfaceAlt }
              }}
            >
              Cancel
            </Button>
          </Stack>
        </Dialog>

        <Dialog open={open4} onClose={() => setOpen4(false)} PaperProps={{ sx: { borderRadius: 3 } }}>
          <Box
            sx={{
              p: 2.5,
              background: `linear-gradient(135deg, ${tint('#ef4444')} 0%, ${tint('#f59e0b')} 100%)`,
              borderBottom: `1px solid ${DT.borderSubtle}`
            }}
          >
            <Stack direction="row" alignItems="center" spacing={1.5}>
              <Avatar sx={{ bgcolor: '#ef4444', color: '#fff', width: 40, height: 40, boxShadow: `0 6px 18px ${ring('#ef4444')}` }}>
                <HighlightOffIcon />
              </Avatar>
              <Stack>
                <Typography variant="h5" sx={{ fontWeight: 800, color: DT.textPrimary }}>
                  Out of Service Area
                </Typography>
                <Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
                  This drop point is outside the supported radius
                </Typography>
              </Stack>
            </Stack>
          </Box>
          <DialogContent sx={{ pt: 2.5 }}>
            <Typography sx={{ color: DT.textSecondary, fontWeight: 600 }}>
              Service is not available at this location. Try a different drop point within the coverage zone.
            </Typography>
          </DialogContent>
          <Stack direction="row" justifyContent="flex-end" sx={{ p: 2, borderTop: `1px solid ${DT.divider}` }}>
            <Button
              variant="contained"
              onClick={() => setOpen4(false)}
              sx={{
                borderRadius: 999,
                px: 3,
                bgcolor: '#ef4444',
                fontWeight: 700,
                textTransform: 'none',
                boxShadow: `0 6px 18px ${ring('#ef4444')}`,
                '&:hover': { bgcolor: '#dc2626' }
              }}
            >
              Close
            </Button>
          </Stack>
        </Dialog>
      </Grid>
    </>
  );
};

export default Createorder1;
