import React from 'react';
import Loader from 'components/Loader';
import { useEffect, useState, Fragment, useRef } from 'react';
import { useTheme } from '@mui/material/styles';
import MainCard from 'components/MainCard';
import axios from 'axios';
import ClearIcon from '@mui/icons-material/Clear';
import { SearchOutlined, CloseOutlined, ExclamationCircleOutlined, FileAddOutlined } from '@ant-design/icons';
import { Empty } from 'antd';
import MyLocationIcon from '@mui/icons-material/MyLocation';
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 dayjs from 'dayjs';
var utc = require('dayjs/plugin/utc');
dayjs.extend(utc);
import { enqueueSnackbar } from 'notistack';
import { useNavigate } from 'react-router';
import Papa from 'papaparse';
import * as XLSX from 'xlsx';

import {
  FormControl,
  InputAdornment,
  Grid,
  Typography,
  Stack,
  Box,
  Button,
  TextField,
  Autocomplete,
  Chip,
  Divider,
  Dialog,
  DialogTitle,
  DialogContent,
  Checkbox,
  DialogActions,
  CircularProgress,
  IconButton,
  OutlinedInput,
  FormGroup,
  FormControlLabel,
  Table,
  TableContainer,
  TableCell,
  TableBody,
  TableRow,
  Paper,
  TableHead,
  FormLabel,
  RadioGroup,
  Radio,
  Backdrop,
  List,
  ListItem,
  ListItemText
} from '@mui/material';
import CircularLoader from 'components/CircularLoader';

const MultipleOrders = () => {
  const navigate = useNavigate();
  const theme = useTheme();
  const locationRef = useRef(null);
  const tenantRef = useRef(null);
  const userid = localStorage.getItem('userid');
  const [locations, setLocations] = useState([]);
  const [tenantlist, setTenantlist] = useState([]);
  const [loading, setLoading] = useState(false);
  const [btnLoading, setBtnLoading] = useState(false);
  const [appId, setAppId] = useState(0);
  const [tenantLocations, setTenantlocations] = useState([]);
  const [tenantid, setTenantid] = useState(0);
  const [locationid, setLocationid] = useState(0);
  const [basePrice, setBasePrice] = useState(0);
  const [pricePerKm, setPricePerKm] = useState(0);
  const [minKm, setMinKm] = useState(0);
  const [pickCust, setPickCust] = useState(null);
  const [dropCust, setDropCust] = useState([]);
  const [isCustomerOpen, setIsCustomerOpen] = useState(false);
  const [searchCustList, setSearchCustList] = useState('');
  const [customerlist, setCustomerlist] = useState([]);
  const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY'));
  const [timeslotarr, setTimeslotarr] = useState([]);
  const [starttime, setStatrttime] = useState();
  const [endtime, setEndtime] = useState();
  const [selectedtime, setSelectedtime] = useState('');
  const [alertmessage, setAlertmessage] = useState('');
  const [otherinstructions, setOtherinstructions] = useState('');
  const [admintoken, setAdmintoken] = useState();
  const [totaldist, settotaldist] = useState(0);
  const [totalAmt, settotalAmt] = useState(0);
  const [totalQty, settotalQty] = useState(0);
  const [totalCash, settotalCash] = useState(0);
  const [users, setUsers] = useState([]);
  const [uploadType, setUploadType] = useState(null);
  const [tenantValue, setTenantValue] = useState(null);
  const [locationValue, setLocationValue] = useState(null);
  const [pickupSlotsList, setPickupSlotsList] = useState(null);
  const [pickupSlot, setPickupSlot] = useState(null);

  // to clear the tenant and location autocomplete
  useEffect(() => {
    setTenantid(0);
    setTenantValue(null);
    setLocationid(0);
    setLocationValue(null);
  }, [appId]);
  // to clear the location autocomplete
  useEffect(() => {
    setLocationid(0);
    setLocationValue(null);
  }, [tenantid]);

  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);
        }
      });
    }
  }, [timeslotarr]);

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

  // 🔹 Smart toast wrapper — prevents duplicate toasts for same message within 3 seconds
  let toastCache = {};
  const OpenToast = (message, type = 'info', timeout = 10000) => {
    const key = `${type}-${message}`;
    if (toastCache[key]) return; // skip duplicates
    opentoast(message, type, timeout); // your existing toast/snackbar
    toastCache[key] = true;
    setTimeout(() => delete toastCache[key], 3000); // reset after delay
  };

  // ==============================|| fetchAppLocations ||============================== //

  const fetchAppLocations = async () => {
    setLoading(true);

    try {
      const locationRes = await axios.get(`${process.env.REACT_APP_URL}/partners/getlocations/?userid=${userid}`);
      console.log('fetchAppLocations', locationRes.data.details);
      setLocations(locationRes.data.details);
    } catch (err) {
      console.log('locationRes', err);
      OpenToast(err.message, 'error', 5000);
    } finally {
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchAppLocations();
  }, []);

  // ===================================================== || fetchtenantinfolist || =====================================================

  const fetchtenantinfolist = async () => {
    setLoading(true);
    await axios
      .get(`${process.env.REACT_APP_URL}/tenants/gettenants/?applocationid=${appId}&status=active`)

      .then((res) => {
        console.log(res);
        if (res.data.status) {
          let arr = [];
          res.data.details.map((val) => {
            arr.push({
              ...val,
              label: `${val.tenantname}`
            });
          });
          setTenantlist(arr);
        }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };
  useEffect(() => {
    appId && fetchtenantinfolist();
  }, [appId]);
  // ============================================= || fetchTenantPricing  || =============================================

  const fetchTenantPricing = async (id) => {
    try {
      const pricingResponse = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantpricing/?tenantid=${id}`);
      console.log('pricingResponse', pricingResponse.data.details);
      setBasePrice(pricingResponse.data.details.baseprice);
      setPricePerKm(pricingResponse.data.details.priceperkm);
      setMinKm(pricingResponse.data.details.minkm);
    } catch (error) {
      console.log('fetchTenantPricing error', error);
    }
  };
  // ============================================= || gettenantlocations (branches) || =============================================
  const gettenantlocations = async (id) => {
    try {
      const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${id}`);
      console.log('gettenantlocations', res.data.details);
      if (res.data.details.length == 1) {
        setTenantlocations(res.data.details);
        setPickCust(res.data.details[0]);
        setLocationid(res.data.details[0].locationid);
        setLocationValue(res.data.details[0].locationid);
        setPickupSlotsList(res.data.details[0].slots);
      } else {
        setTenantlocations(res.data.details);
      }
    } catch (err) {
      console.log('gettenantlocations', err);
    }
  };
  // ========================================================= || clientdetails || =========================================================
  const clientdetails = async () => {
    try {
      let url =
        searchCustList == ''
          ? `${process.env.REACT_APP_URL}/customers/gettenantcustomers/?tenantid=${tenantid}&pageno=1&pagesize=30`
          : `${process.env.REACT_APP_URL}/customers/search/?tenantid=${tenantid}&keyword=${searchCustList}`;
      await axios
        .get(url)
        .then((res) => {
          if (res.data.status) {
            console.log('clientdetails', res.data.details);

            setCustomerlist(res.data.details);
            let arr = [];
            res.data.details.map((val) => {
              arr.push({
                label: `${val.firstname} | ${val.contactno}`,
                ...val
              });
            });
          }
        })
        .catch((err) => {
          console.log(err);
          opentoast('server error', 'warning');
        });
    } catch (err) {
      console.log(err);
    }
  };
  useEffect(() => {
    if (tenantid) {
      clientdetails();
    }
  }, [searchCustList.length > 3, searchCustList == '', tenantid]);

  // ========================================================= || calculateTotal(dist , charge) || =========================================================
  const calculateTotal = () => {
    let a1 = 0;
    let a2 = 0;
    let a3 = 0;
    let a4 = 0;
    dropCust.map((customer) => {
      a1 += customer.distance;
      a2 += customer.totalcharge;
      a3 += customer.quantity;
      a4 += customer.collectionamt;
    });
    settotaldist(a1);
    settotalAmt(a2);
    settotalQty(a3);
    settotalCash(a4);
  };
  useEffect(() => {
    calculateTotal();
  }, [dropCust]);

  // ========================================================= || handleCheckboxChange || =========================================================
  const handleCheckboxChange = async (event, customer) => {
    setLoading(true);
    if (event.target.checked) {
      // If the checkbox is checked, calculate the distance and add the customer
      try {
        const obj = await calculateDistance(customer);
        const { roundedDistance, totalcharge } = obj;
        // Create a new customer object with the distance property
        const updatedCustomer = {
          ...customer,
          distance: roundedDistance,
          totalcharge: totalcharge
        };

        // Add the updated customer object to dropCust
        setDropCust((prevDropCust) => [...prevDropCust, updatedCustomer]);

        // Log the rounded distance
        // console.log(`Rounded Distance: ${roundedDistance} km`);
      } catch (error) {
        console.error('Failed to calculate distance:', error);
      } finally {
        setLoading(false);
      }
    } else {
      // If the checkbox is unchecked, remove the customer from dropCust
      setDropCust((prevDropCust) => {
        return prevDropCust.filter((cust) => cust.customerid !== customer.customerid);
      });
      setLoading(false);
    }
  };
  // ========================================================= || handleCheckboxChange1 || =========================================================
  // const handleCheckboxChange1 = async (customer) => {
  //   console.log('customer', customer);
  //   setLoading(true);
  //   try {
  //     const obj = await calculateDistance(customer);
  //     const { roundedDistance, totalcharge } = obj;
  //     // Create a new customer object with the distance property
  //     const updatedCustomer = {
  //       ...customer,
  //       distance: roundedDistance,
  //       totalcharge: totalcharge
  //     };

  //     // Add the updated customer object to dropCust
  //     setDropCust((prevDropCust) => [...prevDropCust, updatedCustomer]);

  //     // Log the rounded distance
  //     console.log(`Rounded Distance: ${roundedDistance} km`);
  //     setLoading(false);
  //   } catch (error) {
  //     console.error('Failed to calculate distance:', error);
  //   }
  // };
  const handleCheckboxChange1 = async (customer) => {
    console.log('customer', customer);

    setLoading(true);

    try {
      setDropCust((prevDropCust) => {
        const isAlreadySelected = prevDropCust.some((c) => c.firstname === customer.firstname);

        // 🔴 REMOVE if already exists
        if (isAlreadySelected) {
          return prevDropCust.filter((c) => c.firstname !== customer.firstname);
        }

        // 🟢 ADD if not exists (calculate distance)
        return prevDropCust;
      });

      // Only calculate distance if customer is not already added
      const alreadyExists = dropCust.some((c) => c.firstname === customer.firstname);

      if (!alreadyExists) {
        const obj = await calculateDistance(customer);
        const { roundedDistance, totalcharge } = obj;

        const updatedCustomer = {
          ...customer,
          distance: roundedDistance,
          totalcharge
        };

        setDropCust((prevDropCust) => [...prevDropCust, updatedCustomer]);

        console.log(`Rounded Distance: ${roundedDistance} km`);
      }
    } catch (error) {
      console.error('Failed to calculate distance:', error);
    } finally {
      setLoading(false);
    }
  };

  // ========================================================= || calculateDistance || =========================================================

  // 🔹 Main distance calculation function
  const calculateDistance = async (customer) => {
    const service = new google.maps.DistanceMatrixService();

    // Helper: safely get distance matrix
    const getDistanceMatrix = (origins, destinations) => {
      return new Promise((resolve, reject) => {
        // 2;
        try {
          if (!origins || !destinations) {
            return reject(new Error('Origin or destination data missing.'));
          }
          service.getDistanceMatrix(
            {
              origins: [new google.maps.LatLng(origins.latitude, origins.longitude)],
              destinations: [new google.maps.LatLng(destinations.latitude, destinations.longitude)],
              travelMode: 'DRIVING',
              unitSystem: google.maps.UnitSystem.METRIC
            },
            (response, status) => {
              if (status === 'OK') {
                resolve(response);
              } else {
                reject(new Error(`Google API error: ${status}`));
              }
            }
          );
        } catch (err) {
          reject(new Error(`Unexpected error inside DistanceMatrixService: ${err.message}`));
        }
      });
    };

    try {
      // --- Input validation ---
      if (!customer || typeof customer !== 'object') {
        throw new Error('Invalid customer data: expected an object.');
      }

      if (!pickCust || typeof pickCust !== 'object') {
        throw new Error('Origin (pickCust) data missing or invalid.');
      }

      // --- Call Google Maps API ---
      const response = await getDistanceMatrix(pickCust, customer);

      // --- Validate response structure ---
      if (!response.rows?.[0]?.elements?.[0] || !response.rows[0].elements[0].distance?.value) {
        throw new Error('Malformed Distance Matrix response: missing distance value.');
      }
      // --- Compute distance ---
      const distanceInMeters = response.rows[0].elements[0].distance.value;
      const distanceInKilometers = distanceInMeters / 1000;
      const roundedDistance = Math.round(distanceInKilometers);

      // --- Calculate total charge ---
      let totalcharge;
      if (roundedDistance < minKm) {
        totalcharge = basePrice;
      } else {
        totalcharge = (roundedDistance - minKm) * pricePerKm + basePrice;
      }
      return { roundedDistance, totalcharge };
    } catch (error) {
      // --- Categorized smart error handling ---
      console.log('on calculateDistance', error.message);
      if (error.message.includes('Google API')) {
        console.log('🚨 Google Maps API Error:', error.message);
        OpenToast('Invalid file format, upload valid file', 'error', 5000);
      } else if (error.message.includes('Invalid coordinates')) {
        console.log('📍 Invalid coordinate format:', error.message, 3000);
        OpenToast('Invalid coordinate format. Check location data.', 'warning'), 3000;
      } else if (error.message.includes('Malformed Distance Matrix')) {
        console.log('⚠️ Unexpected Google response structure:', error.message);
        OpenToast('Google Distance Matrix returned invalid data.', 'error', 3000);
      } else if (error.message.includes('Origin') || error.message.includes('customer')) {
        console.log('❌ Missing or invalid input data:', error.message);
        OpenToast('Missing or invalid input data for distance calculation.', 'warning', 3000);
      } else {
        console.log('💥 Unexpected error calculating distance:', error);
        OpenToast('Unexpected error during distance calculation.', 'error', 3000);
      }

      throw error; // keeps your current flow intact
    }
  };

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

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

  useEffect(() => {
    if (appId) {
      fetchAppAdminTokens();
    }
  }, [appId]);

  useEffect(() => {
    console.log('pickCust', pickCust);
  }, [pickCust]);
  useEffect(() => {
    console.log('dropCust', dropCust);
  }, [dropCust]);
  // ==================================================== || fetchtenantinfo || ====================================================
  const fetchtenantinfo = async () => {
    setLoading(true);
    console.log('tenantid', tenantid);

    await axios
      .get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tenantid}`)
      .then((res) => {
        console.log('fetchtenantinfo', res);
        if (res.data.status) {
          setTenantid(res.data.details.tenantid);
        }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        setLoading(false);
      });
  };
  useEffect(() => {
    if (tenantid) {
      fetchtenantinfo();
    }
  }, [tenantid]);
  // ================================================== ||  sendnotifications || ==================================================
  const sendnotifications = async () => {
    setLoading(true);
    await axios
      .post(`${process.env.REACT_APP_URL}/utils/sendnotifications`, {
        priority: 'high',
        registration_ids: admintoken,
        data: {
          accessid: process.env.REACT_APP_RIDER_ACCESS_ID
        },
        notification: {
          title: 'Nearle Merchant',
          body: 'An Order has been placed successfully,kindly process the same',
          sound: 'ring'
        }
      })
      .then((res) => {
        console.log(res);
        if (res.data.message == 'Success') {
          enqueueSnackbar('Notification sent Successfully', {
            variant: 'success',
            anchorOrigin: { vertical: 'top', horizontal: 'right' },
            autoHideDuration: 1000
          });
        }
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
        enqueueSnackbar(err.message, {
          variant: 'error',
          anchorOrigin: { vertical: 'top', horizontal: 'right' },
          autoHideDuration: 1000
        });
        setLoading(false);
      });
  };

  const cleanReceiverName = (name) => {
    if (typeof name !== 'string') return name;
    return name.replace(/^[\d.\s]+/, '').trim();
  };

  const handleFileUpload = (event) => {
    console.log('Normal upload started...');
    try {
      const file = event.target.files?.[0];
      if (!file) {
        opentoast('No file selected.', 'warning');
        return;
      }

      const fileName = file.name.toLowerCase();
      const isCSV = fileName.endsWith('.csv');
      const isExcel = fileName.endsWith('.xls') || fileName.endsWith('.xlsx');

      // Invalid file
      if (!isCSV && !isExcel) {
        opentoast('Invalid file type. Please upload a CSV or Excel file.', 'warning');
        return;
      }

      // ---------------------- CSV ----------------------
      if (isCSV) {
        Papa.parse(file, {
          header: true,
          dynamicTyping: true,
          skipEmptyLines: true,
          complete: (results) => {
            const data = results.data || [];
            if (data.length === 0) {
              opentoast('CSV file is empty or invalid.', 'warning');
              setUsers([]);
              return;
            }
            const cleanedData = data.map((row) => ({
              ...row,
              firstname: cleanReceiverName(row.firstname)
            }));
            console.log('✅ Parsed CSV Data:', cleanedData);
            setUsers(cleanedData);
            opentoast('CSV file uploaded successfully,  ✅', 'success', 3000);
            opentoast(' Press Continue to add delivery customers', 'warning', 5000);
          },
          error: (error) => {
            console.error('❌ CSV Parse Error:', error.message);
            opentoast(`CSV parsing failed: ${error.message}`, 'warning');
          }
        });
      }

      // ---------------------- EXCEL (.xls / .xlsx) ----------------------
      if (isExcel) {
        const reader = new FileReader();

        reader.onload = (e) => {
          try {
            const data = e.target.result;

            // Use correct mode for binary Excel formats
            const workbook = XLSX.read(data, {
              type: 'binary',
              cellDates: true,
              cellNF: false,
              cellText: false
            });
            const firstSheet = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[firstSheet];
            const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: '' });

            if (!jsonData || jsonData.length === 0) {
              opentoast('Excel file is empty or invalid.', 'warning');
              setUsers([]);
              return;
            }

            const cleanedData = jsonData.map((row) => ({
              ...row,
              firstname: cleanReceiverName(row.firstname)
            }));

            console.log('✅ Parsed Excel Data:', cleanedData);
            setUsers(cleanedData);
            opentoast('Excel file uploaded successfully ✅, press continue', 'success', 3000);
          } catch (err) {
            console.error('❌ Excel Parse Error:', err);
            opentoast(`Error reading Excel: ${err.message}`, 'warning');
          }
        };

        // ✅ Key fix: use readAsBinaryString for both .xls & .xlsx
        reader.readAsBinaryString(file);
      }
    } catch (err) {
      console.error('Unexpected error during file upload:', err.message);
      opentoast(`Unexpected error: ${err.message}`, 'warning');
    }
  };

  // your header mapping
  const headerMap = {
    'pickupdate(yyyy-mmm-dd)': 'date',
    'sendername*': 'locationname',
    'senderphone*': 'locationcontact',
    'senderaddress*': 'locationaddress',
    'receivername*': 'firstname',
    'receiverphone*': 'contactno',
    'receiveralternatephone*': 'altcontactno',
    receiverfulladdress: 'address',
    receiverlatitude: 'latitude',
    receiverlongitude: 'longitude',
    'itemdescription*': 'description',
    Quantity: 'quantity',
    ' Collect Cash': 'collectionamt'
  };

  // helper to normalize headers
  const normalizeHeader = (header) => header?.toString().trim().toLowerCase().replace(/\s+/g, '');

  const handleFileDirectUpload = (event) => {
    try {
      const file = event.target.files?.[0];
      if (!file) {
        opentoast('No file selected.', 'warning');
        return;
      }

      const fileName = file.name.toLowerCase();
      const isCSV = fileName.endsWith('.csv');
      const isExcel = fileName.endsWith('.xls') || fileName.endsWith('.xlsx');

      if (!isCSV && !isExcel) {
        opentoast('Invalid file type. Please upload a CSV or Excel file.', 'warning');
        return;
      }

      const processData = (data, headers) => {
        console.log('data', data);
        const normalizedMap = {};
        for (const key in headerMap) {
          normalizedMap[normalizeHeader(key)] = headerMap[key];
        }
        console.log('normalizedMap', normalizedMap);

        const mappedData = data.map((row) => {
          const newRow = {};
          for (const key in row) {
            const cleanKey = normalizeHeader(key);
            const newKey = normalizedMap[cleanKey] || cleanKey;
            let value = row[key];
            if (newKey === 'firstname') value = cleanReceiverName(value);

            newRow[newKey] = value;
          }

          return newRow;
        });

        const missingCols = Object.keys(headerMap).filter((clientCol) => !headers.includes(normalizeHeader(clientCol)));

        if (missingCols.length > 0) {
          isExcel && opentoast(`Missing columns: ${missingCols.join(', ')}`, 'warning');
        }

        console.log('✅ Final Processed Data:', mappedData);
        setUsers(mappedData);
        opentoast('File uploaded and  successfully ', 'success', 3000);
        opentoast('Press Continue', 'warning', 3000);
      };

      // ============ CSV handler ============
      if (isCSV) {
        Papa.parse(file, {
          header: true,
          dynamicTyping: true,
          skipEmptyLines: true,
          complete: (results) => {
            if (!results.data?.length) {
              opentoast('CSV file is empty or has no valid rows.', 'warning');
              setUsers([]);
              return;
            }
            const headers = results.meta.fields.map(normalizeHeader);
            processData(results.data, headers);
          },
          error: (error) => {
            console.error('❌ CSV Parsing Error:', error);
            opentoast(`CSV parsing failed: ${error.message}`, 'warning');
          }
        });
      }

      // ============ Excel handler ============
      if (isExcel) {
        const reader = new FileReader();
        reader.onload = (e) => {
          try {
            const data = e.target.result;
            // Try reading as binary first
            let workbook;
            try {
              workbook = XLSX.read(data, { type: 'binary' });
            } catch {
              // fallback for modern XLSX files
              const arrayBuffer = new Uint8Array(data);
              workbook = XLSX.read(arrayBuffer, { type: 'array' });
            }

            const firstSheet = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[firstSheet];
            const jsonData = XLSX.utils.sheet_to_json(worksheet, { defval: '' });

            if (!jsonData?.length) {
              opentoast('Excel file is empty or invalid.', 'warning');
              setUsers([]);
              return;
            }

            const headers = Object.keys(jsonData[0]).map(normalizeHeader);
            processData(jsonData, headers);
          } catch (err) {
            console.error('❌ Error processing Excel:', err);
            opentoast(`Error reading Excel: ${err.message}`, 'warning');
          }
        };

        // Important: use readAsBinaryString for Excel
        reader.readAsBinaryString(file);
      }
    } catch (err) {
      console.error('Unexpected error during file upload:', err);
      opentoast(`Unexpected error: ${err.message}`, 'warning');
    }
  };

  // =============================================== ||  createorders  || ===============================================
  const createorders = async () => {
    // ===================== Build Payload =====================
    const arr = dropCust.map((customer) => ({
      applocationid: pickCust.applocationid,
      configid: 9,
      partnerid: pickCust.partnerid,
      partneruserid: +userid,
      paymentstatus: 1,
      paymenttype: 42,
      pickupaddress: pickCust.address || '',
      pickupcity: pickCust.city || '',
      pickupcontactno: pickCust.contactno || '',
      pickupcustomer: pickCust.locationname || '',
      pickuplandmark: pickCust.landmark || '',
      pickuplat: pickCust.latitude,
      pickuplocation: pickCust.suburb || '',
      pickuplocationid: pickCust.locationid || 0,
      pickuplong: pickCust.longitude,
      tenantid: pickCust.tenantid,

      customerid: +customer?.customerid,
      deliveryaddress: customer.address || '',
      deliverycharge: +customer.totalcharge || 0,
      deliverycity: customer.city || '',
      deliverycontactno: customer.contactno?.toString() || '',
      deliverycustomer: customer.firstname || '',
      deliveryid: +customer.customerid,
      deliverylandmark: customer.landmark || '',
      deliverylat: customer.latitude?.toString() || '',
      deliverylocation: customer.suburb || '',
      deliverylocationid: customer.deliverylocationid || 0,
      deliverylong: customer.longitude?.toString() || '',
      deliverytime: `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(selectedtime.$d).format('HH:mm:ss')}`,
      deliverytype: 'B',

      itemcount: 1,
      quantity: customer.quantity,
      collectionamt: customer.collectionamt,
      kms: customer.distance?.toString() || '0',
      locationid: +pickCust.locationid,
      moduleid: +pickCust.moduleid,

      orderamount: +customer.totalcharge || 0,
      ordercharges: 0.0,
      orderdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
      ordernotes: otherinstructions,
      orderstatus: 'created',
      ordervalue: +customer.totalcharge || 0,
      pickupSlot
    }));

    console.log('arr', arr);

    // ===================== Validation =====================
    if (!tenantid) {
      opentoast('Choose Client', 'warning');
      return;
    }
    setLoading(true);
    try {
      const res = await axios.post(`${process.env.REACT_APP_URL}/orders/createorders`, arr);
      if (res.data.status) {
        opentoast('Order Created Successfully', 'success', 2000);
        if (admintoken) {
          sendnotifications();
        }
        navigate('/nearle/orders');
        setLoading(false);
      } else {
        console.log(res.data);
        console.error('Create order failed (API response):', res.data);
        opentoast(res?.data?.message || 'Order creation failed. Please try again.', 'warning', 3000);
      }
    } catch (err) {
      opentoast(err.message, 'error', 2000);
      console.log('create orders', err.message);
      console.error('Create order error:', {
        message: err.message,
        response: err.response,
        request: err.request,
        stack: err.stack
      });

      // Exact but short error for user
      let toastMessage = 'Something went wrong. Please try again.';

      if (err.response) {
        // Server responded with error
        toastMessage = err.response.data?.message || `Server error (${err.response.status})`;
      } else if (err.request) {
        // No response received
        toastMessage = 'Network error. Check your internet connection.';
      }
      opentoast(toastMessage, 'error');
      setLoading(false);
    } finally {
      setLoading(false);
      setBtnLoading(false);
    }
  };

  const [fileName, setFileName] = useState('');
  const removeFileExtension = (fileName) => {
    return fileName.replace(/\.[^/.]+$/, '');
  };

  const onFileChange = (event) => {
    const file = event.target.files[0];
    if (!file) return;
    const cleanedName = removeFileExtension(file.name);
    setFileName((prev) => (prev ? `${prev}, ${cleanedName}` : cleanedName));
    if (tenantid === 916) {
      handleFileDirectUpload(event);
    } else {
      handleFileDirectUpload(event);
      // handleFileUpload(event);
    }
  };

  const handleQuantityChange = (customerid, value) => {
    setDropCust((prev) => prev.map((cust) => (cust.customerid === customerid ? { ...cust, quantity: Number(value) || 0 } : cust)));
  };
  const handleCollectionAmtChange = (customerid, value) => {
    setDropCust((prev) => prev.map((cust) => (cust.customerid === customerid ? { ...cust, collectionamt: Number(value) || 0 } : cust)));
  };

  return (
    <>
      {loading && (
        <>
          <Loader />
          {/* <CircularLoader /> */}
        </>
      )}
      {
        <Backdrop
          sx={{
            color: '#fff',
            zIndex: (theme) => theme.zIndex.drawer + 1
          }}
          open={btnLoading} // when loader = true, backdrop covers the page
        >
          <CircularLoader color="inherit" />
        </Backdrop>
      }

      <Grid
        container
        spacing={3}
        sx={{
          position: 'sticky',
          top: '60px',
          bgcolor: theme.palette.background.default,
          zIndex: 100,
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'start',
          alignItems: 'center',
          spacing: 5
        }}
      >
        <Grid item xs={12} sx={{ width: '100%', mt: -1 }}>
          <Stack>
            <Typography variant="h3"> Create Multiple Order</Typography>
          </Stack>
        </Grid>
        <Grid item xs={12} sx={{ width: '100%', mt: -2 }}>
          <MainCard sx={{ height: '100%' }}>
            <Grid container spacing={3} sx={{}}>
              {/* ===================================================== || Choose  App location  || ===================================================== */}
              <Grid item xs={12} sm={4}>
                <Autocomplete
                  fullWidth
                  ref={locationRef}
                  options={locations || []}
                  getOptionLabel={(option) => `${option.locationname}`}
                  onChange={(event, value, reason) => {
                    if (reason === 'clear') {
                      setAppId(0);
                      setTenantid(0);
                      setTenantValue(null);
                      setTenantlist([]);
                      setLocationid(0);
                      setLocationValue(null);
                      setTenantlocations([]);
                      setPickCust(null);
                      setDropCust([]);
                      setUploadType(null);
                    } else {
                      setAppId(value.applocationid);
                      setDropCust([]);
                      setPickCust(null);
                    }
                  }}
                  renderInput={(params) => <TextField {...params} label={'App Location'} />}
                />
              </Grid>
              {/* ===================================================== || Choose client  || ===================================================== */}
              <Grid item xs={12} sm={4}>
                <Autocomplete
                  fullWidth
                  options={tenantlist || []}
                  value={tenantValue}
                  getOptionLabel={(option) => option?.tenantname || ''}
                  isOptionEqualToValue={(option, value) => option.tenantid === value.tenantid}
                  renderOption={(props, option) => (
                    <li {...props} key={option.tenantid}>
                      {option.tenantname}
                    </li>
                  )}
                  onOpen={(event) => {
                    if (!appId) {
                      event.preventDefault();
                      OpenToast('Please select your location first!', 'warning', 3000);
                      setTimeout(() => {
                        locationRef.current?.focus();
                      }, 0);
                    }
                  }}
                  onChange={(e, val, reason) => {
                    if (reason === 'clear') {
                      setTenantid(0);
                      setTenantValue(null);
                      setLocationid(0);
                      setLocationValue(null);
                      setTenantlocations([]);
                      setPickCust(null);
                      setDropCust([]);
                      setUploadType(null);
                    } else if (val) {
                      setTenantid(val.tenantid);
                      setTenantValue(val);
                      setLocationid(0);
                      setLocationValue(null);
                      fetchTenantPricing(val.tenantid);
                      gettenantlocations(val.tenantid);
                      setDropCust([]);
                    }
                  }}
                  renderInput={(params) => <TextField {...params} inputRef={tenantRef} label="Choose Client" />}
                />
              </Grid>
              {/* ===================================================== ||Business Location || ===================================================== */}
              <Grid item xs={12} sm={4}>
                {tenantLocations?.length == 1 ? (
                  <TextField
                    variant="outlined"
                    fullWidth
                    label={'Business Location'}
                    value={tenantLocations[0]?.locationname || ''}
                    focused
                    InputProps={{
                      style: { color: theme.palette.primary.main },
                      startAdornment: (
                        <InputAdornment position="start">
                          <MyLocationIcon color="primary" />
                        </InputAdornment>
                      )
                    }}
                  />
                ) : (
                  <Autocomplete
                    fullWidth
                    options={tenantLocations || []}
                    getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
                    value={locationValue}
                    onOpen={(event) => {
                      if (!appId && !tenantid) {
                        event.preventDefault();
                        OpenToast('Please select Location and Tenant first!', 'warning', 3000);
                        setTimeout(() => {
                          locationRef.current?.focus();
                        }, 0);
                      } else if (!tenantid) {
                        event.preventDefault();
                        OpenToast('Please select   Tenant first!', 'warning', 3000);
                        setTimeout(() => {
                          tenantRef.current?.focus();
                        }, 0);
                      }
                    }}
                    onChange={(event, value, reason) => {
                      if (reason === 'clear') {
                        setLocationid(0);
                        setLocationValue(null);
                        setPickCust(null);
                      } else {
                        setLocationid(value.locationid || 0);
                        setLocationValue(value);
                        setPickCust(value);
                        setPickupSlotsList(value?.slots);
                      }
                    }}
                    renderInput={(params) => <TextField {...params} label="Select Business Locations" color="primary" />}
                  />
                )}
              </Grid>
            </Grid>
          </MainCard>
        </Grid>
        {/* ===================================================== || Pickup || ===================================================== */}
        <Grid item xs={12} sx={{ width: '100%', mt: 0 }}>
          <Grid container xs={12} spacing={3}>
            {locationid !== 0 && (
              <Grid item xs={12}>
                <Box display="flex" alignItems="center" sx={{}}>
                  <TextField
                    label={'Pickup Location'}
                    fullWidth
                    value={`${pickCust?.locationname}  (${pickCust?.address})`}
                    InputProps={{
                      readOnly: true,
                      style: { fontSize: '1rem', fontWeight: 'bold', color: theme.palette.primary.main }
                    }}
                  />
                </Box>
              </Grid>
            )}
            {/* ================================================= || Time || ================================================= */}
            {appId !== 0 && (
              <Fragment>
                <Grid item xs={6}>
                  <Stack>
                    <LocalizationProvider dateAdapter={AdapterDayjs} sx={{}}>
                      <DatePicker
                        format="DD-MM-YYYY"
                        onChange={(e) => {
                          setStartdate(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);

                            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);
                              }
                            });
                          } else {
                            setAlertmessage('choose Upcoming Date');
                            opentoast('choose Upcoming Date', 'warning');
                            setStartdate(NaN);
                          }
                        }}
                        value={dayjs(startdate)}
                        sx={{ width: 'auto', mt: 0 }}
                        disablePast
                      />
                    </LocalizationProvider>
                  </Stack>
                  {/* {timeslotarr.length > 0 && (
                    <MainCard sx={{ mt: 2 }}>
                      <Grid container>
                        <Grid item xs={12} sx={{}}>
                          <Stack
                            display={'flex'}
                            flexDirection={'row'}
                            alignItems={'center'}
                            justifyContent={'space-between'}
                            sx={{ width: '100%' }}
                          >
                            <Stack>
                              <Typography variant="h5" sx={{ my: 2 }}>
                                Time
                              </Typography>
                            </Stack>

                            <Stack>
                              <LocalizationProvider dateAdapter={AdapterDayjs} sx={{}}>
                                <DatePicker
                                  format="DD-MM-YYYY"
                                  onChange={(e) => {
                                    setStartdate(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);

                                      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);
                                        }
                                      });
                                    } else {
                                      setAlertmessage('choose Upcoming Date');
                                      opentoast('choose Upcoming Date', 'warning');
                                      setStartdate(NaN);
                                    }
                                  }}
                                  value={dayjs(startdate)}
                                  sx={{ width: 'auto', mt: 0 }}
                                  disablePast
                                />
                              </LocalizationProvider>
                            </Stack>
                          </Stack>

                          <MainCard
                            sx={{
                              mt: 1,
                              overflowY: 'scroll',
                              '&::-webkit-scrollbar': {
                                width: '3px', // Width of vertical scrollbar
                                height: '10px' // Height of horizontal scrollbar
                              },
                              '&::-webkit-scrollbar-thumb': {
                                backgroundColor: '#65387A' // Color of the scrollbar thumb
                              }
                            }}
                          >
                            <Grid container spacing={2}>
                              {timeslotarr.map((val, index) => {
                                if (
                                  dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0
                                ) {
                                  return (
                                    <Fragment key={index}>
                                      <Grid item>
                                        <Chip
                                          key={index}
                                          sx={{ cursor: 'pointer' }}
                                          color={dayjs(selectedtime).format('HH:mm') == dayjs(val).format('HH:mm') ? 'primary' : 'default'}
                                          label={dayjs(val).format('hh:mm A')}
                                          onClick={() => {
                                            console.log('selectedtime', val);
                                            setSelectedtime(val);
                                          }}
                                          // onClick={() => {
                                          //   if (distance > appLocaRadius) {
                                          //     setOpen(true);
                                          //   } else if (showDistance) {
                                          //     console.log('selectedtime', val);
                                          //     setSelectedtime(val);
                                          //   } else {
                                          //     opentoast('Out of city limit', 'error');
                                          //   }
                                          // }}
                                        />
                                      </Grid>
                                    </Fragment>
                                  );
                                }
                              })}
                            </Grid>
                          </MainCard>
                        </Grid>
                      </Grid>
                    </MainCard>
                  )} */}
                </Grid>
                <Grid item xs={6}>
                  <Autocomplete
                    options={pickupSlotsList || []}
                    onChange={(e, newValue, reason) => {
                      if (reason === 'clear') {
                        setSelectedtime(null);
                        setPickupSlot(null);
                      } else {
                        // Convert to AM/PM and merge with date
                        const formattedTime = dayjs(newValue.time, 'HH:mm').format('hh:mm A');
                        setSelectedtime(formattedTime);
                        const finalDateTime = dayjs(`${startdate} ${formattedTime}`, 'MM-DD-YYYY hh:mm A').format('YYYY-MM-DD hh:mm A');
                        setPickupSlot(finalDateTime);
                      }
                    }}
                    getOptionLabel={(option) => `${option.name} (${dayjs(option.time, 'HH:mm').format('hh:mm A')})`}
                    renderInput={(params) => <TextField {...params} placeholder="Select Pickup Slot" />}
                  />
                </Grid>
              </Fragment>
            )}
          </Grid>
        </Grid>

        {/* ===================================================== || Drop  || ===================================================== */}

        <Grid item xs={12} sx={{ width: '100%', mt: 0 }}>
          <MainCard
            sx={{ height: '100%' }}
            title={
              <Stack direction="row" spacing={1} alignItems="center" justifyContent="space-between" flexWrap="wrap" sx={{ mr: 1 }}>
                <Typography variant="h5" sx={{ p: 3, whiteSpace: 'nowrap' }}>
                  Drop ({dropCust?.length || 0})
                </Typography>
                <Stack direction="row" gap={2} alignItems="center" justifyContent="flex-end" flexWrap="wrap" sx={{ m: 3 }}>
                  {/* ================= Upload CSV ================= */}
                  {uploadType === 0 && (
                    <>
                      {fileName && (
                        <Stack direction={'row'} spacing={1}>
                          <FileAddOutlined />
                          <Typography variant="body2" color="text.secondary">
                            {fileName}
                          </Typography>
                        </Stack>
                      )}

                      <input
                        accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                        id="upload-file"
                        type="file"
                        hidden
                        onChange={onFileChange}
                      />

                      <label htmlFor="upload-file">
                        <Button variant="contained" size="small" component="span" sx={{ minHeight: 36 }}>
                          {dropCust?.length > 0 ? 'Add More Files' : ' Upload CSV'}
                        </Button>
                      </label>
                    </>
                  )}

                  {/* ================= Continue ================= */}
                  {users.length >= 1 && uploadType === 0 && (
                    <Button
                      variant="contained"
                      size="small"
                      color="warning"
                      sx={{
                        minHeight: 36,
                        ...(!dropCust?.length && {
                          '@keyframes blink': {
                            '0%': { opacity: 1 },
                            '50%': { opacity: 0.3 },
                            '100%': { opacity: 1 }
                          },
                          animation: 'blink 1s infinite'
                        })
                      }}
                      onClick={() => {
                        users.forEach((customer) => handleCheckboxChange1(customer));
                      }}
                    >
                      Continue
                    </Button>
                  )}

                  {/* ================= Select Customers ================= */}
                  {uploadType === 1 && (
                    <Button
                      variant="outlined"
                      size="small"
                      sx={{ minHeight: 36 }}
                      onClick={() => {
                        setIsCustomerOpen(true);
                        setSearchCustList('');
                      }}
                    >
                      Select Customers
                    </Button>
                  )}

                  {/* ================= Upload Type ================= */}
                  <Stack sx={{ bgcolor: 'secondary.lighter', py: 0.5, px: 1, borderRadius: 2 }}>
                    <FormControl size="small">
                      <FormLabel sx={{ fontSize: 12 }}>Upload Type</FormLabel>
                      <RadioGroup
                        row
                        value={uploadType}
                        onChange={(e) => {
                          if (!appId || !tenantid || !locationid) {
                            OpenToast('Please select Location, Tenant, Business!', 'warning', 3000);
                            return;
                          }
                          setUploadType(Number(e.target.value));
                          setDropCust([]);
                          setUsers([]);
                          setFileName('');
                        }}
                      >
                        <FormControlLabel value={0} control={<Radio size="small" />} label="Excel / CSV" />
                        <FormControlLabel value={1} control={<Radio size="small" />} label="Selection" />
                      </RadioGroup>
                    </FormControl>
                  </Stack>
                </Stack>
              </Stack>
            }
          >
            <TableContainer component={Paper}>
              <Table>
                {dropCust?.length > 0 ? (
                  <>
                    <TableHead>
                      <TableRow>
                        <TableCell>S.No</TableCell>
                        <TableCell>Customer</TableCell>
                        <TableCell>Address</TableCell>
                        <TableCell align={uploadType == 0 ? 'right' : 'center'}>Quantity</TableCell>

                        <TableCell sx={{ whiteSpace: 'nowrap' }} align={uploadType == 0 ? 'right' : 'center'}>
                          Cash Collect
                        </TableCell>
                        <TableCell>Kms</TableCell>

                        <TableCell align="right">Charge</TableCell>
                        <TableCell align="center">Action</TableCell>
                      </TableRow>
                    </TableHead>

                    <TableBody>
                      {dropCust?.map((customer, index) => (
                        <TableRow key={index}>
                          <TableCell>{index + 1}</TableCell>
                          <TableCell sx={{ whiteSpace: 'nowrap' }}>{customer.firstname}</TableCell>
                          <TableCell>{customer.address}</TableCell>
                          <TableCell align="center">
                            {uploadType == 0 ? (
                              <Typography>{customer.quantity}</Typography>
                            ) : (
                              <TextField
                                size="small"
                                type="number"
                                value={customer.quantity}
                                onChange={(e) => handleQuantityChange(customer.customerid, e.target.value)}
                                inputProps={{ min: 0 }}
                              />
                            )}
                          </TableCell>
                          <TableCell align="center">
                            {uploadType == 0 ? (
                              <Typography>₹{Number(customer.collectionamt || 0).toFixed(2)}</Typography>
                            ) : (
                              <TextField
                                size="small"
                                type="number"
                                value={customer.collectionamt ? customer.collectionamt : ''}
                                placeholder="0"
                                onChange={(e) => {
                                  if (e.target.value <= 0) {
                                    handleCollectionAmtChange(customer.customerid, 0);
                                  } else {
                                    handleCollectionAmtChange(customer.customerid, e.target.value);
                                  }
                                }}
                                inputProps={{ min: 0 }}
                                InputProps={{
                                  startAdornment: <InputAdornment position="start">₹</InputAdornment>
                                }}
                              />
                            )}
                          </TableCell>

                          <TableCell>{customer.distance}</TableCell>
                          <TableCell align="right">{`₹${customer?.totalcharge?.toFixed(2)}`}</TableCell>
                          <TableCell align="center">
                            {
                              <>
                                <CloseOutlined
                                  style={{ cursor: 'pointer', color: 'red' }}
                                  // onClick={(event) => handleCheckboxChange(event, customer)}
                                  onClick={() => handleCheckboxChange1(customer)}
                                />
                              </>
                            }
                          </TableCell>
                        </TableRow>
                      ))}
                      {dropCust?.length != 0 && (
                        <TableRow>
                          <TableCell>Total</TableCell>
                          <TableCell colSpan={2}></TableCell>

                          <TableCell>
                            <Typography variant="h5" align="center">{`${totalQty} `}</Typography>
                          </TableCell>

                          <TableCell>
                            <Typography align="center" variant="h5">{`${totalCash?.toFixed(2)} `}</Typography>
                          </TableCell>
                          <TableCell>
                            <Typography variant="h5">{`${totaldist} `}</Typography>
                          </TableCell>
                          <TableCell align="right">
                            <Typography align="right" variant="h5">{`₹${totalAmt?.toFixed(2)}`}</Typography>
                          </TableCell>

                          <TableCell></TableCell>
                        </TableRow>
                      )}
                    </TableBody>
                  </>
                ) : (
                  <Stack
                    spacing={2}
                    elevation={0}
                    sx={{
                      bgcolor: 'primary.lighter',
                      border: 'none',
                      p: 2.5,
                      borderRadius: 1
                    }}
                  >
                    {/* Header */}
                    <Stack direction="row" alignItems="center" spacing={1}>
                      <ExclamationCircleOutlined style={{ color: 'red', fontSize: 18 }} />{' '}
                      <Typography variant="h5" sx={{ fontWeight: 600, color: 'red' }}>
                        Important Instructions
                      </Typography>
                    </Stack>

                    {/* Ordered List */}
                    <Stack elevation={0} component="ol" sx={{ pl: 4, m: 0 }}>
                      <Typography component="li" sx={{ fontSize: 15, mb: 1 }}>
                        Choose either <b>Upload Type</b> to upload CSV/Excel files, or
                        <b> Selection Type</b> to select from saved customers.
                      </Typography>

                      <Typography component="li" sx={{ fontSize: 15, mb: 1 }}>
                        Uploaded CSV or Excel files must follow the required format and contain the correct column names.
                      </Typography>

                      <Typography component="li" sx={{ fontSize: 15, mb: 1 }}>
                        Multiple files can be uploaded, but only <b>one file at a time</b>.
                      </Typography>

                      <Typography component="li" sx={{ fontSize: 15, color: 'error.main' }}>
                        Invalid or incorrectly formatted files will not be processed.
                      </Typography>
                    </Stack>
                  </Stack>
                )}
              </Table>
            </TableContainer>
          </MainCard>
        </Grid>

        <Grid item xs={12} sx={{ width: '100%', mt: -2 }}>
          {/* ================================================= || Notes || ================================================= */}
          <MainCard sx={{ mt: 2, p: 3 }} title={'Notes'}>
            <Grid container>
              <Grid item xs={12}>
                <TextField
                  focused
                  id="outlined-multiline-static"
                  sx={{ width: '100%', height: '100%', mb: 2 }}
                  multiline
                  rows={1}
                  placeholder="Notes"
                  value={otherinstructions}
                  onChange={(e) => setOtherinstructions(e.target.value)}
                />
              </Grid>
              <Stack direction="row" justifyContent={'end'} sx={{ mt: 2, width: '100%' }}>
                <Button
                  disabled={dropCust.length == 0 || !pickupSlot}
                  size="medium"
                  variant="outlined"
                  onClick={() => {
                    setLoading(true);
                    setBtnLoading(true);
                    createorders();
                  }}
                  sx={{
                    '&:hover': {
                      transform: 'scale(1.05)',
                      transition: 'transform 0.3s ease'
                    }
                  }}
                >
                  {btnLoading ? <CircularProgress color="primary" size={20} thickness={10} /> : 'Create'}
                </Button>
              </Stack>
            </Grid>
          </MainCard>
        </Grid>
      </Grid>
      {/* ============================================= || saved address Dialog || ============================================= */}
      <Dialog
        open={isCustomerOpen}
        onClose={() => {
          setIsCustomerOpen(false);
        }}
        fullWidth
        sx={{ minWidth: 'lg' }}
      >
        <DialogTitle sx={{ bgcolor: theme.palette.primary.main, color: 'white' }}>
          <Stack>
            <Typography variant="h4"> {`Select Drop Customers (${dropCust.length || 0})`}</Typography>
            <FormControl
              sx={{
                width: '100%',
                mt: 1
              }}
            >
              <Stack spacing={2} sx={{ py: 0.2 }}>
                <OutlinedInput
                  fullWidth
                  id="input-search-header"
                  placeholder="Search"
                  value={searchCustList}
                  onChange={(e) => setSearchCustList(e.target.value)}
                  sx={{
                    '& .MuiOutlinedInput-input': {
                      p: '10.5px 0px 12px'
                    },
                    bgcolor: 'white'
                  }}
                  startAdornment={
                    <InputAdornment position="start">
                      <SearchOutlined style={{ fontSize: 'small' }} />
                    </InputAdornment>
                  }
                  endAdornment={
                    <IconButton
                      sx={{ visibility: searchCustList ? 'visible' : 'hidden' }}
                      onClick={() => {
                        setSearchCustList('');
                      }}
                    >
                      <ClearIcon />
                    </IconButton>
                  }
                  autoComplete="off"
                />
              </Stack>
            </FormControl>
          </Stack>
        </DialogTitle>
        <Divider />
        <DialogContent sx={{ p: 2.5 }}>
          {customerlist?.length == 0 ? (
            <Stack spacing={2} direction={'row'} alignItems={'center'} justifyContent={'center'} sx={{ minHeight: 600, maxHeight: 600 }}>
              <Empty />
            </Stack>
          ) : (
            <Stack spacing={2} sx={{ minHeight: 600, maxHeight: 600 }}>
              {customerlist &&
                customerlist?.map((customer, index) => (
                  <FormGroup key={index}>
                    <FormControlLabel
                      control={
                        <Checkbox
                          checked={dropCust.some((cust) => cust.customerid === customer.customerid)} // Set the checked state of the checkbox based on whether the customer is in `dropCust`
                          onChange={(event) => handleCheckboxChange(event, customer)}
                        />
                      }
                      label={
                        <div style={{ width: '100%' }}>
                          <Typography variant="subtitle1" sx={{ textAlign: 'left' }}>
                            {`${customer.firstname} (${customer.contactno})`}
                          </Typography>

                          <Typography variant="body2" color="secondary" sx={{ textAlign: 'left' }}>
                            {customer.address}
                          </Typography>
                        </div>
                      }
                    />
                  </FormGroup>
                ))}
            </Stack>
          )}
        </DialogContent>
        <Divider />
        <DialogActions sx={{ p: 2.5 }}>
          <Button
            color={dropCust.length == 0 ? 'error' : 'primary'}
            variant="outlined"
            sx={{
              '&:hover': {
                bgcolor: dropCust.length == 0 ? 'red' : theme.palette.primary.main,
                color: 'white'
              }
            }}
            onClick={() => {
              setIsCustomerOpen(false);
            }}
          >
            {dropCust.length == 0 ? 'Close' : 'Continue'}
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
};

export default MultipleOrders;
