import React, {
  useState,
  useEffect,
  useRef,
  useCallback,
  useContext,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import moment from 'moment';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { EditFilled, ArrowRightOutlined } from '@ant-design/icons';
import {
  Avatar,
  Flex,
  Segmented,
  Badge,
  Form,
  DatePicker,
  Input,
  Popconfirm,
  Table,
  Button,
  Checkbox,
  Modal,
  Space,
} from 'antd';
import Search from '../../../../Components/Forms/Search.jsx';
import { Tables } from '../../../../Components/Tables/Table.jsx';
import { RiCloseCircleFill } from 'react-icons/ri';
import { MdHistory } from 'react-icons/md';
import { FiPlus } from 'react-icons/fi';
import { BsClipboardCheckFill } from 'react-icons/bs';
import { MdOutlinePendingActions } from 'react-icons/md';
import BSCustomerSelect from './BSSelectCustomer.jsx';
import BSNavBarAddUser from './BSNavBarAddUser.jsx';
import { InputField } from '../../../../Components/Forms/InputField.jsx';
import TimePickers from '../../../../Components/Forms/TimePickerProduct.jsx';
import Buttons from '../../../../Components/Forms/Buttons.jsx';
import Imageupload from '../../../../Components/Forms/Upload.jsx';
import TextAreaInput from '../../../../Components/Forms/TextArea.jsx';
import WpIcon from '../../../../Images/message.png';
import QrinScreen from '../BookingFunctionality/DynamicScreenQr.jsx';
import {
  getConfigType,
  SendPaymentLink,
  GlobalSelCustId,
  GlobalSelOption,
  GlobalpaymentUpiOptionData,
  changeCustomerID,
  changeSelectedCustId,
  changeSelectedOption,
  changeSummeryTotalAmount,
  changealldata,
  changeBookingType,
  GlobalBookingType,
  GetPaymentdeviceResponse,
  PostPaymentdevice,
  PutBookingPaymentStatusChange,
  changeCompoPreOrderDtlStatus,
  changeDropDownStatus,
  GlobalCommonPaymentOptions,
  changePaymentloader,
  GlobalUpiIDprint,
  PutPendingPaymentList,
  ChangeSearchFocusPreOrder,
  PaymentCardGetdetail,
  GlobalCustId,
  changePaymentTransactionNumber,
  getSalesDetailData,
  PreferenceData,
} from '../../../../Features/BookingScreen/BookingData/BookingData.js';
import {
  PreOrderBookingData,
  PreOrderGet,
  PreOrderBookingDataPut,
  GlobalPreOrderList,
  GlobalPreOrderAdditem,
  changePreOrderAdditem,
  GlobalPreOrderCusName,
  GlobalPreOrderCusMobNo,
  GlobalPreOrderDate,
  GlobalPreOrderAdvance,
  GlobalPreOrderMessage,
  GlobalPreOrderAdd1,
  GlobalPreOrderAdd2,
  GlobalPreOrderzip,
  GlobalPreOrderCity,
  GlobalPreOrderDistrict,
  GlobalPreOrderState,
  GlobalPreOrderTime,
  changePreOrderDate,
  changepreOrder,
  changepreOrderList,
  changePreOrderCusName,
  changePreOrderCusMob,
  changePreOrderAdvance,
  changePreOrderAdd1,
  changePreOrderAdd2,
  changePreOrderzip,
  changePreOrderCity,
  changePreOrderDistrict,
  changePreOrderState,
  changePreOrderTime,
  GlobalpreOrderOpen,
  changePreOrderPendingCount,
  PreOrderBookingDataCancel,
} from '../../../../Features/BookingScreen/PreOrder/PreOrder.js';
import { IoEye } from 'react-icons/io5';
import {
  ChangeTotalAmount,
  globalExtraTotalAmount,
} from '../../../../Features/ExteraCharges/ExtraCharges.js';
import {
  extractLastNumber,
  getSession,
  extractLastNumberOrderId,
  printDiv,
  encryptedValuesFun,
  validateSafeInput,
} from '../../../../Services/Others.js';
import { DropDowns } from '../../../../Components/Forms/DropDown.jsx';
import {
  GlobalSelectedColor,
  GlobalSelectedFont,
  SelectedPrintTemplate,
} from '../../../../Features/ThemeChange/ThemeChange.js';
import CountUp from 'react-countup';
import { isMobile } from 'react-device-detect';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
import BsBillingCreditCustomer from '../BookingFunctionality/BSBillingCreditCustomer.jsx';
import MobilePrint from '../BookingFunctionality/MobilePrint.jsx';
import { Messages } from '../../../../Components/Notifications/Messages.jsx';
import '../../../../Styles/BookingScreen/Components/UtillComponents/BSNavBarPreOrder.scss';
import { DatePicProd } from '../../../../Components/Forms/DatePickerProduct.jsx';
import { PrintStyleFunction } from '../../../paymentpdfPage/PrintStyleFunction.js';
import { GlobalAddCustomerDetails } from '../../../../Features/BookingScreen/Customer/addCustomer.js';
import SplitPayment from '../BookingFunctionality/SplitPaymentPreorder.jsx';
import PaymentPdfBooking from '../../../paymentpdfPage/PaymentPdfBooking.jsx';
import { getCustomerDisplayWindow } from '../../../../Features/customerDisplayWindow/customerDisplayWindow.js';
import useCountUp from './useCountUp.jsx';

const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL;

const BSComboNavBarPreOrder = () => {
  //other Hooks
  const dispatch = useDispatch();
  const splitRef = useRef();
  const formRef = useRef();
  const ViewformRef = useRef();
  const cancelformRef = useRef();
  const [Pendingform] = Form.useForm();
  const [Itemform] = Form.useForm();

  //useSelector
  const GlobalUpiID = useSelector(GlobalUpiIDprint);

  const preOrderOpen = useSelector(GlobalpreOrderOpen);
  const printerTemplateStyle = useSelector(SelectedPrintTemplate);
  const SelectedCust = useSelector(GlobalSelOption);
  const SelCustId = useSelector(GlobalSelCustId);
  const selOption = useSelector(GlobalSelOption);

  const PreOrderAdditem = useSelector(GlobalPreOrderAdditem);
  const PreOrderCusName = useSelector(GlobalPreOrderCusName);
  const PreOrderCusMobNo = useSelector(GlobalPreOrderCusMobNo);
  const PreOrderDate = useSelector(GlobalPreOrderDate);
  const PreOrderList = useSelector(GlobalPreOrderList);
  const PreOrderAdvance = useSelector(GlobalPreOrderAdvance);
  const PreOrderMessage = useSelector(GlobalPreOrderMessage);
  const PreOrderAdd1 = useSelector(GlobalPreOrderAdd1);
  const PreOrderAdd2 = useSelector(GlobalPreOrderAdd2);
  const PreOrderzip = useSelector(GlobalPreOrderzip);
  const PreOrderCity = useSelector(GlobalPreOrderCity);
  const PreOrderDistrict = useSelector(GlobalPreOrderDistrict);
  const PreOrderState = useSelector(GlobalPreOrderState);
  const PreOrderTime = useSelector(GlobalPreOrderTime);
  const preferenceData = useSelector(PreferenceData);
  const BookingTypeData = useSelector(GlobalBookingType);
  const GetCustId = useSelector(GlobalCustId);

  const preferCondition =
    preferenceData?.[0]?.['SettingDtlDetails']?.filter(
      (e) => e?.SettingIdName == 'PreOrderPriceChange'
    )?.[0]?.SettingValue == 'Y';
  // other Const
  dayjs.extend(customParseFormat);
  const AppId = getSession('AppId');
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const UserId = getSession('UserId');

  const FontFamily = useSelector(GlobalSelectedFont);
  const Color = useSelector(GlobalSelectedColor);
  const GlobalExtraCharge = useSelector(globalExtraTotalAmount);
  const EditableContext = React.createContext(null);
  const PendingEditableContext = React.createContext(null);
  const useOptions = useSelector(GlobalCommonPaymentOptions);
  // const AddCustomerDetails = useSelector(GlobalAddCustomerDetails);

  //useStates

  const [PendingData, setPendingData] = useState();
  const [BookingType, setBookingType] = useState();
  const [UpiOpen, setUpiOpen] = useState(false);
  const [UpiId, setUpiId] = useState();
  const [Edit, setEdit] = useState(false);
  const [qrcode, setqrcode] = useState(false);
  const [selectedPaymentOption, setselectedPaymentOption] = useState();
  const PaymentUpiOptions = useSelector(GlobalpaymentUpiOptionData);
  const [selectedUPIOption, setselectedUPIOption] = useState();
  const [PreOrder, setPreOrder] = useState(false);

  console.log(PreOrder, 'PreOrderPreOrder');
  const [zipCodeData, setZipCodeData] = useState(false);
  const [SelectedOption, setselectedOption] = useState('Booking');
  const [ImageUrl, setImageUrl] = useState('');
  const [addDetails, setAddDetails] = useState(false);
  const [ItemEditdata, setItemEditData] = useState([]);
  console.log(ItemEditdata, 'ItemEditdata');
  const [totalAmount, setTotalAmount] = useState(0);
  const [balanceAmount, setBalaceAmount] = useState(0);
  const CustDetails = SelectedCust ? SelectedCust : GetCustId;

  const [SetAsDefaultCust, setSetAsDefaultCust] = useState(false);
  const [CusName, setCusName] = useState();
  const [MobName, setMobName] = useState();
  const [add1, setAdd1] = useState();
  const [add2, setAdd2] = useState();
  const [zip, setZip] = useState();
  const [Index, setIndex] = useState();
  const [ShowDetails, setShowDetails] = useState(false);
  const [TotalTaxAmount, setTotalTaxAmount] = useState(0);
  const [MessageModel, setMessageModel] = useState();
  const [PendingOrderView, setPendingOrderView] = useState([]);
  const [OldAdvanceAmount, setOldAdvanceAmount] = useState(0);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [ModalProduct, setModalProduct] = useState(false);
  const [PreOrder_Pending_FromDate, setPreOrder_Pending_FromDate] = useState();
  const [PreOrder_Pending_ToDate, setPreOrder_Pending_ToDate] = useState();
  const [PreOrder_History_FromDate, setPreOrder_History_FromDate] = useState();
  const [PreOrder_History_ToDate, setPreOrder_History_ToDate] = useState();
  const [PendingsearchedText, setPendingSearchedText] = useState('');
  const [HistorysearchedText, HistorysetSearchedText] = useState('');
  const [HistoryData, setHistoryData] = useState();
  const [OrderDetail, setOrderDetail] = useState();
  const [Status, setStatus] = useState();
  const [FullPayment, setFullPayment] = useState(false);
  const [selectOptionName, setselectOptionName] = useState();
  const [pendingCustomerView, setPendingCustomerView] = useState({
    Data: null,
    status: false,
  });
  const [CreditCustomer, setCreditCustomer] = useState({
    basic: false,
    model: false,
  });
  const [HistoryDetailsView, setHistoryDetails] = useState({
    Data: null,
    status: false,
  });
  const [Keys, setKeys] = useState();
  const [Buttonicon, setButton] = useState(false);
  const [Payment_Device, setPayment_Device] = useState();
  const [Payment_Gateway, setPayment_Gateway] = useState();
  const [PaymentOptions, setPaymentOptions] = useState();
  const [GateWayOptions, setGetWayOptions] = useState();
  const [selectedGateWayOptions, setSelectedGetWayOptions] = useState();
  const [orderId, setorderId] = useState(null);
  const [failedOrderData, setFailedOrderData] = useState();
  const currentDateValue = moment()?.format('YYYY-MM-DD HH:mm:ss');

  //split Payment
  const [splitPayment, setSplitPayment] = useState(false);
  const [SplitSelPayMode, setSplitSelPayMode] = useState({});

  const [PrintOrderDetails, setPrintOrderDetails] = useState([]);

  const [CancelModal, setCancelModal] = useState(false);
  const [PreOrderData, setPreOrderData] = useState();
  const [PreOrderRefund, setPreOrderRefund] = useState(0);
  const [CancelPaymentOption, setCancelPaymentOption] = useState();
  const gatewayOptions = [
    { option: 'Default', value: 'Default' },
    { option: 'Payment Device', value: 'PaymentDevice' },
    { option: 'Payment Gateway', value: 'PaymentGateway' },
  ];
  //useCallback
  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);

  const containerRef = useRef(null);

  const ChangeMouseData = async (data) => {
    await dispatch(changeCompoPreOrderDtlStatus(data));
  };

  useEffect(() => {
    OnchangePreOrderIcon();
    const handleMouseEnter = async () => await ChangeMouseData(true);
    const handleMouseLeave = () => ChangeMouseData(false);

    const divElement = containerRef.current;

    if (divElement) {
      divElement.addEventListener('mouseenter', handleMouseEnter);
      divElement.addEventListener('mouseleave', handleMouseLeave);

      return () => {
        divElement.removeEventListener('mouseenter', handleMouseEnter);
        divElement.removeEventListener('mouseleave', handleMouseLeave);
      };
    }
  }, []);

  useEffect(() => {
    let data = selOption != null ? selOption : GetCustId;
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        customer: data,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  }, [selOption, GetCustId]);

  useEffect(() => {
    if (selectedGateWayOptions !== undefined && Buttonicon) {
      const isCard = selectOptionName === 'Card';
      const isUPI =
        selectOptionName === 'UPI' && selectedGateWayOptions != 'Default';

      if (isCard || isUPI) {
        onFinish();
      }
    }
  }, [selectedGateWayOptions]);

  useEffect(() => {
    async function amoutchange() {
      let extra = GlobalExtraCharge?.reduce((accumulator, currentObject) => {
        return accumulator + currentObject.TotalAmt;
      }, 0);

      const Totalamount = ItemEditdata?.reduce((acc, item) => {
        return acc + item.TotalAmt;
      }, 0);
      const totalAmount =
        extra == undefined ? Totalamount : Totalamount + extra;
      if (PreOrderAdvance > totalAmount) {
        await dispatch(changePreOrderAdvance(totalAmount));
      }

      const Balance = totalAmount - PreOrderAdvance - OldAdvanceAmount;

      setTotalAmount(totalAmount);
      setBalaceAmount(Balance);
      await dispatch(
        changeSummeryTotalAmount(
          formRef?.current?.getFieldsValue()?.AdvanceAmount
        )
      );
    }

    amoutchange();
  }, [ItemEditdata]);

  useEffect(() => {
    UsePayments();
  }, [useOptions, CustDetails]);

  useEffect(() => {
    if (PreOrder) {
      if (SetAsDefaultCust) {
        formRef?.current?.setFieldsValue({
          Name: CustDetails?.CustName,
          MobileNo: CustDetails?.value || CustDetails?.CustMobile,
          Address1: CustDetails?.Address1,
          Address2: CustDetails?.Address2,
          Zip: CustDetails?.Zip,
        });
        dispatch(changePreOrderCusName(CustDetails?.CustName));
        dispatch(
          changePreOrderCusMob(CustDetails?.value || CustDetails?.CustMobile)
        );
        dispatch(changePreOrderAdd1(CustDetails?.Address1));
        dispatch(changePreOrderAdd2(CustDetails?.Address2));
        dispatch(changePreOrderzip(CustDetails?.Zip));
        if (CustDetails?.Zip?.toString().length === 6) {
          getPincodeValues(CustDetails?.Zip);
        }
      }
      setFullPayment(false);
    }
  }, [SelectedCust, SelectedOption]);

  useEffect(() => {
    FetchData();
  }, []);

  useEffect(() => {
    // Define an async function
    const handleBookingTypeChange = async () => {
      if (BookingTypeData !== 'PreOrder') {
        setPreOrder(false);
        await dispatch(changepreOrder(false));
      }
    };

    // Call the async function inside useEffect
    handleBookingTypeChange();
  }, [BookingTypeData]);

  useEffect(() => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        paymentMethod: selectOptionName,
        Paymentgateway: false,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  }, [selectOptionName]);

  useEffect(() => {
    ApiCall();
    if (Edit) setEdit(false);
    if (PreOrder) {
      if (SetAsDefaultCust) {
        formRef?.current?.setFieldsValue({
          Name: CustDetails?.CustName,
          MobileNo: CustDetails?.value || CustDetails?.CustMobile,
          Address1: CustDetails?.Address1,
          Address2: CustDetails?.Address2,
          Zip: CustDetails?.Zip,
        });
        dispatch(changePreOrderCusName(CustDetails?.CustName));
        dispatch(
          changePreOrderCusMob(CustDetails?.value || CustDetails?.CustMobile)
        );
        dispatch(changePreOrderAdd1(CustDetails?.Address1));
        dispatch(changePreOrderAdd2(CustDetails?.Address2));
        dispatch(changePreOrderzip(CustDetails?.Zip));
        if (CustDetails?.Zip?.toString().length === 6) {
          getPincodeValues(CustDetails?.Zip);
        }
      }
      setPreOrder_History_FromDate(null);
      setPreOrder_Pending_ToDate(null);
      setPreOrder_Pending_FromDate(null);
      setPreOrder_History_ToDate(null);
    }
  }, [SelectedOption]);

  useEffect(() => {
    TotalCalculation();
  }, [GlobalExtraCharge]);

  const OnChangeCancelPaymentOption = async (params) => {
    setCancelPaymentOption(params);
    cancelformRef?.current?.setFieldsValue({ CancelPayOptions: params });
  };

  useEffect(() => {
    if (Array.isArray(PreOrderList)) {
      const customerDisplayWindow = getCustomerDisplayWindow();
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          userData: [...PreOrderList],
        };
        customerDisplayWindow.postMessage(updatedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
      setItemEditData([...PreOrderList]);
      TotalCalculation();
    }
  }, [PreOrderList]);

  useEffect(() => {
    const setFieldsIfNotEmpty = (field, value) => {
      if (value?.length !== 0) {
        formRef?.current?.setFieldsValue({ [field]: value });
      }
    };

    if (SetAsDefaultCust) {
      formRef?.current?.setFieldsValue({
        Name: CustDetails?.CustName,
        MobileNo: CustDetails?.value || CustDetails?.CustMobile,
        Address1: CustDetails?.Address1,
        Address2: CustDetails?.Address2,
        Zip: CustDetails?.Zip,
      });
      if (CustDetails?.Zip?.toString().length === 6) {
        getPincodeValues(CustDetails?.Zip);
      }
    } else {
      formRef?.current?.setFieldsValue({
        Name: CusName,
        MobileNo: MobName,
        Address1: add1,
        Address2: add2,
        Zip: zip,
      });

      if (zip?.toString().length === 6) {
        getPincodeValues(zip);
      }
    }

    let extra = GlobalExtraCharge?.reduce((accumulator, currentObject) => {
      return accumulator + currentObject.TotalAmt;
    }, 0);

    const Amount =
      ItemEditdata?.reduce(
        (accumulator, currentItem) =>
          accumulator + (currentItem?.TotalAmt || 0),
        0
      ) || 0;
    const TotalAmount = extra == undefined ? Amount : Amount + extra;

    const Balance = TotalAmount - PreOrderAdvance - OldAdvanceAmount;

    setTotalAmount(TotalAmount);
    setBalaceAmount(Balance);

    setFieldsIfNotEmpty('AdvanceAmount', PreOrderAdvance);
    setFieldsIfNotEmpty('Message', PreOrderMessage);
    setFullPayment(false);
  }, [PreOrderAdditem]);
  useEffect(() => {
    const first = async () => {
      if (Edit && PreOrderAdditem == 'AddDetails') {
        await formRef?.current?.setFieldsValue({
          MobileNo: Keys?.MobileNo,
        });
        await formRef?.current?.setFieldsValue({
          Name: Keys?.Name,
        });

        await setMobName(Keys?.MobileNo);
        await setCusName(Keys?.Name);
        await dispatch(changePreOrderCusName(Keys?.Name));
        await dispatch(changePreOrderCusMob(Keys?.MobileNo));
        await getPincodeValues(Keys?.CustomerDetails[0]?.ZipCode);
        await dispatch(changePreOrderzip(Keys?.CustomerDetails[0]?.ZipCode));

        if (Keys?.OrderPaymentDtls?.[0]?.PaymentTypeName === 'UPI') {
          await setselectedUPIOption();
          await formRef?.current?.setFieldsValue({
            UPIOptions: Keys?.OrderPaymentDtls?.[0]?.PaymentType,
          });
        }
      }
    };

    first();
  }, [Edit]);

  useEffect(() => {
    splitRef?.current?.setFieldsValue(SplitSelPayMode);
  }, [splitPayment]);

  useEffect(() => {
    if (PrintOrderDetails?.length > 0) {
      if (isMobile) {
        MobilePrint(PrintOrderDetails, UpiId, 'Booking', preferenceData);
      } else {
        Print();
      }
    } //changeby karthiga
  }, [PrintOrderDetails]);
  const fetchingsalesData = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
      FromDate: currentDateValue,
      ToDate: currentDateValue,
    };
    await dispatch(getSalesDetailData(data));
  };
  const UsePayments = () => {
    if (useOptions?.length > 0) {
      let AllPaymentOptions = useOptions?.find(
        (item) => item.FlowName === 'Sales'
      );

      let PaymentDevice = AllPaymentOptions?.OptionDetails.find(
        (item) => item.OptionName === 'Payment Device'
      );
      let PaymentGateway = AllPaymentOptions?.OptionDetails.find(
        (item) => item.OptionName === 'Payment Gateway'
      );
      setPayment_Device(PaymentDevice);
      setPayment_Gateway(PaymentGateway);
      let object;
      if (CustDetails === undefined) {
        object = AllPaymentOptions?.OptionDetails?.find(
          (item) => item.OptionName === 'Pay at the counter'
        )?.ModeDetails?.filter((item) => item.ModeName !== 'Credit');
      } else {
        object = AllPaymentOptions?.OptionDetails?.find(
          (item) => item.OptionName === 'Pay at the counter'
        )?.ModeDetails;
      }

      setPaymentOptions(object);
      setselectedPaymentOption(
        object?.find((mode) => mode.ModeName == 'Cash')?.ModeId
      );
      setselectOptionName('Cash');
    }
  };
  const cardandUpi = async (e) => {
    if (Buttonicon) {
      setStatus('Edit');
    }
    setSelectedGetWayOptions(e);
    formRef?.current?.setFieldsValue({ GateWayOptions: e });
    formRef?.current?.resetFields(['UPIOptions']);
    setselectedUPIOption();
  };
  const Hcolumns = [
    {
      title: <div style={{ fontSize: '10px' }}>SI</div>,
      dataIndex: 'OrderId',
      key: 'OrderId',
      align: 'center',
      fixed: 'left',
      render: (text, object, index) => (
        <a style={{ color: 'black', fontSize: '10px' }}>{index + 1}</a>
      ),
    },
    {
      title: <div style={{ fontSize: '10px' }}>O.ID</div>,
      dataIndex: 'OrderId',
      key: 'OrderId',
      align: 'center',
      fixed: 'left',
      filteredValue: [HistorysearchedText],
      render: (text, record, index) => (
        <a style={{ color: 'black', fontSize: '10px' }}>
          {record.FYStatus === 'Y'
            ? extractThreeDigitNumber(text)
            : extractLastNumber(text)}
        </a>
      ),
      onFilter: (value, record) => {
        return (
          String(record.OrderId)
            ?.toLowerCase()
            .includes(value?.toLowerCase()) ||
          String(record?.CustomerDetails?.[0]?.CustSuppName)
            ?.toLowerCase()
            .includes(value?.toLowerCase()) ||
          String(record?.CustomerDetails?.[0]?.MobileNo)
            ?.toLowerCase()
            .includes(value?.toLowerCase()) ||
          String(formatDate(record?.DeliveryDate, record.DeliveryTime))
            ?.toLowerCase()
            .includes(value?.toLowerCase()) ||
          String(record.PaidAmount)
            ?.toLowerCase()
            .includes(value?.toLowerCase())
        );
      },
      ellipsis: true,
    },
    {
      title: (
        <div style={{ fontSize: '10px', textWrap: 'nowrap' }}>DATE/TIME</div>
      ),
      dataIndex: 'OrderId',
      key: 'OrderId',
      align: 'center',
      render: (_, record) => (
        <a style={{ color: 'black', fontSize: '10px' }}>
          {formatDate(record?.DeliveryDate, record.DeliveryTime)}
        </a>
      ),
    },
    {
      title: <div style={{ fontSize: '10px', textWrap: 'nowrap' }}>Name</div>,
      dataIndex: 'OrderId',
      key: 'OrderId',

      render: (_, record) => (
        <a style={{ color: 'black', fontSize: '10px' }}>
          {record?.CustomerDetails?.[0]?.CustSuppName || '-'}
        </a>
      ),
    },
    {
      title: <div style={{ fontSize: '10px', textWrap: 'nowrap' }}>Mobile</div>,
      dataIndex: 'OrderId',
      key: 'OrderId',
      align: 'right',
      render: (_, record) => (
        <a style={{ color: 'black', fontSize: '10px' }}>
          {record?.CustomerDetails?.[0]?.MobileNo || '-'}
        </a>
      ),
    },

    {
      title: <div style={{ fontSize: '10px', textWrap: 'nowrap' }}>Amount</div>,
      dataIndex: 'PaidAmount',
      key: 'PaidAmount',
      align: 'right',
      render: (text, object, index) => (
        <a style={{ color: 'black', fontSize: '10px' }}>{text}</a>
      ),
    },
    {
      title: <div style={{ fontSize: '10px' }}>Details</div>,
      dataIndex: 'OrderId',
      align: 'center',
      render: (_, record) => (
        <IoEye
          style={{ fontSize: '18px', color: '#000' }}
          onClick={() => setHistoryDetails({ Data: record, status: true })}
        />
      ),
    },
  ];

  const extractThreeDigitNumber = (str) => {
    const match = str.match(/(\d{3})-/);
    return match ? match[1] : null;
  };

  const handlerefundvalidator = (_, value) => {
    const paidAmount = parseFloat(PreOrderData?.PaidAmount ?? 0);
    const refundAmount = parseFloat(value ?? 0);

    if (refundAmount > paidAmount) {
      return Promise.reject('Refund amount cannot exceed advance paid');
    }
    return Promise.resolve();
  };

  const OnchangeRefund = async (e) => {
    setPreOrderRefund(e?.target?.value);
  };
  const TotalCalculation = async () => {
    let totalSum;
    let totaltax;

    totalSum = PreOrderList?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.TotalAmt || 0);
    }, 0);

    totaltax = PreOrderList?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.TaxAmt || 0);
    }, 0);

    let Totalamount = totaltax ? totalSum + totaltax : totalSum;

    let extra = GlobalExtraCharge?.reduce((accumulator, currentObject) => {
      return accumulator + currentObject.TotalAmt;
    }, 0);
    let AdvAmount =
      PreOrderAdvance != null
        ? parseInt(PreOrderAdvance)
        : 0 + parseInt(OldAdvanceAmount);
    let Total = extra == undefined ? Totalamount : Totalamount + extra;
    let balance = Total - AdvAmount;
    setBalaceAmount(balance);
    setTotalAmount(Total?.toFixed(2));
    setTotalTaxAmount(totaltax?.toFixed(2));
  };

  const OnOkView = () => {
    setShowDetails(false);
  };

  const OnCancelView = () => {
    setShowDetails(false);
  };

  const ApiCall = async () => {
    const today = new Date();
    const fromDate = today.toISOString().split('T')[0];
    if (SelectedOption == 'Pending') {
      PendingApiCall(fromDate, fromDate);
    } else if (SelectedOption == 'History') {
      HistoryApiCall(fromDate, fromDate);
    }
  };

  const FetchData = async () => {
    const today = new Date();
    const fromDate = today.toISOString().split('T')[0];
    BadgePendingApi();
    PendingApiCall();
    HistoryApiCall(fromDate, fromDate);
    let Response = await dispatch(
      getConfigType({ TypeName: 'Booking Type' })
    ).unwrap();
    if (Response?.data?.statusCode === 1) {
      setBookingType(
        Response?.data?.data?.find((item) => item?.ConfigName === 'TakeAway')
          ?.ConfigId
      );
    }
  };

  const BadgePendingApi = async () => {
    let Data = {
      compId: CompId,
      branchId: BranchId,
      appId: AppId,
      deliveryStatus: 'P',
    };
    let PendingResponse = await dispatch(PreOrderGet(Data)).unwrap();
    if (PendingResponse?.data?.statusCode === 1) {
      await dispatch(
        changePreOrderPendingCount(PendingResponse?.data?.data?.length)
      );
    }
  };
  const Print = async () => {
    const style = await PrintStyleFunction(
      printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle,
      'Sales'
    );
    const stylesMap = {
      'Style 1': 'PrintStyle1',
      'Style 2': 'PrintStyle2',
      'Style 3': 'PrintStyle3',
      'Style 4': 'PrintStyle4',
      'Style 5': 'PrintStyle5',
      'Style 6': 'PrintStyle6',
      'Style 7': 'PrintStyle7',
      'Style 8': 'PrintStyle8',
      'Style 9': 'PrintStyle9',
      'Style 10': 'PrintStyle10',
      'Style 11': 'PrintStyle11',
      'Style 12': 'PrintStyle12',
      'Style 13': 'RePrint',
    };

    const selectedStyle =
      stylesMap[
        printerTemplateStyle == undefined ? 'Style 13' : printerTemplateStyle
      ];

    if (selectedStyle) {
      await Promise.all(
        PrintOrderDetails?.[0]?.OrderDetails?.map(
          async (orderDetail, index) => {
            await printDiv(`${selectedStyle}-${index}`, style); // Use unique IDs for each print
          }
        )
      );
      setPrintOrderDetails([]);
    }
    fetchingsalesData();
  };

  const OnChangePaymentOption = async (params) => {
    formRef?.current?.resetFields(['GateWayOptions']);
    setSelectedGetWayOptions();
    formRef?.current?.resetFields(['UPIOptions']);
    setselectedUPIOption();
    let data = PaymentOptions?.filter((e) => e?.ModeId == params)?.[0]
      ?.ModeName;
    setCreditCustomer(
      data == 'Credit'
        ? { basic: true, model: false }
        : { basic: false, model: false }
    );
    setqrcode(data == 'UPI' ? true : false);
    setselectedPaymentOption(params);
    setselectOptionName(data);
    formRef?.current?.setFieldsValue({ PaymentOptions: params });
    let OptionData;
    let Device = Payment_Device?.ModeDetails?.some(
      (item) => item.ModeName === data
    );
    let Gateway;

    if (data === 'Card') {
      Gateway = Payment_Gateway?.ModeDetails?.some(
        (item) =>
          item.ModeName === 'CreditCard' || item.ModeName === 'DebitCard'
      );
    } else {
      Gateway = Payment_Gateway?.ModeDetails?.some(
        (item) => item.ModeName === data
      );
    }

    if (Device === false && Gateway === false) {
      OptionData = gatewayOptions.filter(
        (item) =>
          item.value !== 'PaymentDevice' && item.value !== 'PaymentGateway'
      );
    } else if (Device === false) {
      OptionData = gatewayOptions.filter(
        (item) => item.value !== 'PaymentDevice'
      );
    } else if (Gateway === false) {
      OptionData = gatewayOptions.filter(
        (item) => item.value !== 'PaymentGateway'
      );
    } else {
      OptionData = gatewayOptions;
    }

    if (data === 'Card') {
      OptionData = OptionData?.filter((item) => item.value !== 'Default');
    }

    if (!useOptions?.[0]?.PaymentDetails?.Payatthecounter?.length > 0) {
      OptionData = OptionData?.filter((item) => item.value !== 'Default');
    }
    setGetWayOptions(OptionData);
  };

  const OnChangeUPIOption = async (params) => {
    setselectedUPIOption(params);
    setUpiId(PaymentUpiOptions?.filter((e) => e?.Mode == params)?.[0]?.UPIId);
    formRef?.current?.setFieldsValue({ UPIOptions: params });
  };

  const Pending_onSearch = (value) => {
    setPendingSearchedText(value);
  };

  const Pending_onSearchChange = (e) => {
    setPendingSearchedText(e?.target?.value);
  };

  const PendingApiCall = async (Fromdate, Todate) => {
    let Data = {
      compId: CompId,
      branchId: BranchId,
      appId: AppId,
      deliveryStatus: 'P',
      fromDate: Fromdate,
      toDate: Todate,
    };
    let PendingResponse = await dispatch(PreOrderGet(Data)).unwrap();
    if (PendingResponse?.data?.statusCode === 1) {
      setPendingData(PendingResponse?.data?.data);
    } else if (PendingResponse?.data?.statusCode === 0) {
      setPendingData();
    }
  };

  const HistoryApiCall = async (Fromdate, Todate) => {
    let Data = {
      compId: CompId,
      branchId: BranchId,
      appId: AppId,
      deliveryStatus: 'D',
      fromDate: Fromdate,
      toDate: Todate,
    };
    let HistoryResponse = await dispatch(PreOrderGet(Data)).unwrap();
    if (HistoryResponse?.data?.statusCode === 1) {
      setHistoryData(HistoryResponse?.data?.data);
    } else if (HistoryResponse?.data?.statusCode === 0) {
      setHistoryData();
    }
  };

  const OnchangeAdvance = async (e) => {
    await dispatch(changePreOrderAdvance(e?.target?.value));
    let extra = GlobalExtraCharge?.reduce((accumulator, currentObject) => {
      return accumulator + currentObject.TotalAmt;
    }, 0);

    const Total =
      PreOrderList?.reduce(
        (accumulator, currentItem) =>
          accumulator + (currentItem?.TotalAmt || 0),
        0
      ) || 0;
    let TotalAmount = extra == undefined ? Total : Total + extra;

    setTotalAmount(TotalAmount);
    setBalaceAmount(
      TotalAmount -
        formRef?.current?.getFieldsValue()?.AdvanceAmount -
        OldAdvanceAmount
    );
    await dispatch(
      changeSummeryTotalAmount(
        formRef?.current?.getFieldsValue()?.AdvanceAmount
      )
    );
  };

  const updateImageUrl = async (url) => {
    setImageUrl(url);

    let data = [...ItemEditdata];

    // Create a shallow copy of the object at the specified index
    let updatedObject = { ...data[Index], Image: url };

    // Update the array with the modified object
    data[Index] = updatedObject;
    setItemEditData(data);

    // Dispatch the updated array
    // await dispatch(changepreOrderList(data));
  };

  const NameOnChange = (e) => {
    setCusName(e?.target?.value);
    dispatch(changePreOrderCusName(e?.target?.value));
    formRef?.current?.setFieldsValue({ Name: e?.target?.value });
  };

  const MobOnChange = (e) => {
    setMobName(e?.target?.value);
    dispatch(changePreOrderCusMob(e?.target?.value));
    formRef?.current?.setFieldsValue({ MobileNo: e?.target?.value });
  };

  const onChangeTime = async (_, timeString) => {
    if (timeString) {
      formRef.current?.setFieldsValue({});
      const fromTime = moment(timeString, ['h:mm a']).format('HH:mm:ss');
      await dispatch(changePreOrderTime(fromTime));
    } else {
      await dispatch(changePreOrderTime(null));
    }
  };

  const onChangeDate = async (_, dateString) => {
    dispatch(changeDropDownStatus(false));
    if (dateString) {
      const Date1 = moment(dateString, ['DD-MM-YYYY']).format(
        'YYYY-MM-DDTHH:mm:ss'
      );
      await dispatch(changePreOrderDate(Date1));
    }
  };

  const OnChangeMessage = async (e) => {
    setMessageModel(e?.target?.value);
    ViewformRef.current?.setFieldsValue({ Message: e?.target?.value });

    let data = [...ItemEditdata];

    // Create a shallow copy of the object at the specified index
    let updatedObject = { ...data[Index], Description: e?.target?.value };

    // Update the array with the modified object
    data[Index] = updatedObject;

    // Dispatch the updated array
    setItemEditData(data);
  };

  const OnChangeAddress1 = async (e) => {
    setAdd1(e?.target?.value);
    await dispatch(changePreOrderAdd1(e?.target?.value));
  };

  const OnChangeAddress2 = async (e) => {
    setAdd2(e?.target?.value);
    await dispatch(changePreOrderAdd2(e?.target?.value));
  };

  const pinCodeChange = async (e) => {
    setZip(e?.target?.value);
    if (e.target.value.length < 6) {
      setZipCodeData(false);
      return false;
    }
    await getPincodeValues(e?.target?.value);
    await dispatch(changePreOrderzip(e?.target?.value));
  };

  const getPincodeValues = async (pinCode) => {
    let response = '';
    await fetch(`https://api.postalpincode.in/pincode/${pinCode}`)
      .then((res) => res.text())
      .then((text) => (response = JSON.parse(text)));

    if (response[0]['Status'] === 'Success') {
      setZipCodeData(true);
      formRef.current?.setFieldsValue({
        City: response[0]['PostOffice'][0]['Block'],
        Dist: response[0]['PostOffice'][0]['District'],
        State: response[0]['PostOffice'][0]['State'],
      });
      await dispatch(changePreOrderCity(response[0]['PostOffice'][0]['Block']));
      await dispatch(
        changePreOrderDistrict(response[0]['PostOffice'][0]['District'])
      );
      await dispatch(
        changePreOrderState(response[0]['PostOffice'][0]['State'])
      );
    } else {
      setZipCodeData(false);
    }
  };
  const UpiPayment = () => {
    if (
      selectedUPIOption &&
      selectedGateWayOptions == 'Default' &&
      !CreditCustomer?.basic
    ) {
      setUpiOpen(true);
      const customerDisplayWindow = getCustomerDisplayWindow();
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          OrderTotalAmount: PreOrderAdvance,
          paymentMethod: 'UPI',
          upi: UpiId,
        };
        customerDisplayWindow.postMessage(updatedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
    } else if (CreditCustomer?.basic) {
      setCreditCustomer({ basic: true, model: true });
      const customerDisplayWindow = getCustomerDisplayWindow();
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          OrderTotalAmount: PreOrderAdvance,
        };
        customerDisplayWindow.postMessage(updatedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
    } else {
      setMessageType('error');
      setMessageData('Please Select Upi Option');
    }
  };
  const removestates = () => {
    const updatedData = {
      userData: [...PreOrderList],
      ExtraCharges: GlobalExtraCharge,
      customer: selOption != null ? selOption : GetCustId,
      Paymentgateway: false,
    };
    setFailedOrderData(updatedData);
    setSplitPayment(true);
    setSelectedGetWayOptions();
    setselectedPaymentOption();
  };
  const handlesplitpaymentclose = () => {
    setSplitPayment(false);
  };
  const AddBookingDetails = async (values, Status1) => {
    const FormValues = formRef?.current?.getFieldsValue();
    const DeliveryDate = dayjs(FormValues?.DeliveryDate).format('DD-MM-YYYY');

    let data = ItemEditdata.map((item) => ({
      OfferValue: item?.OfferValue,
      OfferAmt: item?.TotalOfferPrice || item?.OfferAmt,
      OfferType: item?.OfferType,
      ProdId: item.ProdId,
      Type: item.Type,
      OrderQty: item.OrderQty || item.SalesQty,
      OrderRate: item.OrderRate || item.Rate,
      TotalAmt: item.TotalAmt,
      TaxAmt: item.TaxAmt,
      RefundQty: 0,
      InwardDtlId: item.InwardDtlId,
      TaxId: item.TaxId,
      ProdNameQty: item.ProdName
        ? `${item.ProdName} ${item.Type != 'C' ? item.Size : '1'} ${item.Type != 'C' ? item.UomName : 'Combo'}`
        : '',
      OrderStatus: 'S',
      OrderType: 'PRE',
      SinglePc: item.SinglePc,
      BookingType: BookingType, // Assuming 1 if BookingTypeName exists, otherwise 0
      PaymentStatus: 'N',
      Image: item.Image,
      Description: item.Description,
    }));
    let stocklimitExceeded = false;

    const NewOrderDetailDelivery = [];

    if (Status == 'Delivery' || Status1 == 'Delivery') {
      ItemEditdata.forEach((item) => {
        const StockDetail = item?.StockDetail;
        const FoundInwardDtlIdData = StockDetail?.find(
          (detail) => detail.InwardDtlId === item?.InwardDtlId
        );

        let OrderDtl = {
          OfferValue: item?.OfferValue,
          OfferAmt: item?.TotalOfferPrice || item?.OfferAmt,
          OfferType: item?.OfferType,
          ProdId: item.ProdId,
          Type: item.Type,
          OrderQty: item.OrderQty || item.SalesQty,
          TotalAmt: item.TotalAmt,
          TaxAmt: item.TaxAmt,
          RefundQty: 0,
          InwardDtlId: item.inwardDtlId,
          TaxId: item.TaxId,
          ProdNameQty: item.ProdName
            ? `${item.ProdName} ${item.Type != 'C' ? item.Size : '1'} ${item.Type != 'C' ? item.UomName : 'Combo'}`
            : '',
          OrderStatus: 'S',
          OrderType: 'PRE',
          SinglePc: item.SinglePc,
          BookingType: BookingType,
          PaymentStatus: 'N',
          Image: item.Image,
          Description: item.Description,
        };

        if (item.StockAvailable === 'N') {
          OrderDtl.InwardDtlId = item?.InwardDtlId;
          OrderDtl.OrderRate = preferCondition
            ? StockDetail?.[0]?.SellPrice
            : item.OrderQty || item.SalesQty;
          NewOrderDetailDelivery.push(OrderDtl);
        } else if (item.StockAvailable === 'Y' && StockDetail?.length > 0) {
          if (
            FoundInwardDtlIdData?.BalanceQty >= (item.OrderQty || item.SalesQty)
          ) {
            OrderDtl.OrderRate = preferCondition
              ? FoundInwardDtlIdData.SellPrice
              : OrderDtl.OrderRate;
            OrderDtl.InwardDtlId = FoundInwardDtlIdData.InwardDtlId;
            NewOrderDetailDelivery.push(OrderDtl);
          } else {
            const totalAvailableQty = StockDetail.reduce(
              (total, detail) => total + (detail?.BalanceQty || 0),
              0
            );
            if (totalAvailableQty < Number(item.OrderQty || item.SalesQty)) {
              setMessageData(
                `${item?.ProdName + ' ' + item?.Size + ' ' + item?.UomName} Dont have Enough Stock`
              );
              setMessageType('warning');
              stocklimitExceeded = true;
            } else {
              let accumulatedQty = 0;
              const targetIndex = StockDetail.findIndex(
                (detail) => detail.InwardDtlId === item?.InwardDtlId
              );

              const accumulateQty = (startIndex) => {
                for (
                  let i = startIndex;
                  i < StockDetail.length &&
                  accumulatedQty < Number(item.OrderQty || item.SalesQty);
                  i++
                ) {
                  const stockDetail = StockDetail[i];
                  if (stockDetail?.BalanceQty > 0) {
                    const qtyToAdd = Math.min(
                      stockDetail.BalanceQty,
                      Number(item.OrderQty || item.SalesQty) - accumulatedQty
                    );

                    NewOrderDetailDelivery.push({
                      // ...stockDetail,
                      InwardDtlId: stockDetail?.InwardDtlId,
                      OrderRate: preferCondition
                        ? stockDetail?.SellPrice
                        : item.Rate,
                      OrderQty: qtyToAdd,
                      ProdId: item.ProdId,
                      Type: item.Type,
                      TotalAmt: item.TotalAmt,
                      TaxAmt: item.TaxAmt,
                      RefundQty: 0,
                      TaxId: item.TaxId,
                      ProdNameQty: item.ProdName
                        ? `${item.ProdName} ${item.Size} ${item.UomName}`
                        : '',
                      OrderStatus: 'S',
                      OrderType: 'PRE',
                      SinglePc: item.SinglePc,
                      BookingType: BookingType,
                      PaymentStatus: 'N',
                      Image: item.Image,
                      Description: item.Description,
                    });
                    accumulatedQty += qtyToAdd;
                  }
                }
              };

              if (targetIndex !== -1) accumulateQty(targetIndex);
              if (accumulatedQty < item.OrderQty || item.SalesQty)
                accumulateQty(0);
            }
          }
        } else {
          alert('fill the Product ');
        }
      });
    }
    function changeDateFormat(dateStr) {
      let dateParts = dateStr.split('-');
      return `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
    }

    const ModeName = PaymentOptions?.find(
      (item) => item.ModeId === selectedPaymentOption
    )?.ModeName;
    let PaymentType;
    let PaymentOptionType;
    if (ModeName === 'Card') {
      if (selectedGateWayOptions === 'PaymentDevice') {
        PaymentType = Payment_Device?.ModeDetails.find(
          (item) => item.ModeName === 'Card'
        )?.ModeId;
        PaymentOptionType = 'PD';
      } else if (selectedGateWayOptions === 'PaymentGateway') {
        PaymentType = selectedPaymentOption;
        PaymentOptionType = 'PG';
      }
    } else if (ModeName === 'UPI') {
      if (selectedGateWayOptions === 'Default') {
        PaymentType = selectedPaymentOption;
        PaymentOptionType = 'PC';
      } else if (selectedGateWayOptions === 'PaymentDevice') {
        PaymentType = Payment_Device?.ModeDetails.find(
          (item) => item.ModeName === 'UPI'
        )?.ModeId;
        PaymentOptionType = 'PD';
      } else if (selectedGateWayOptions === 'PaymentGateway') {
        PaymentType = Payment_Gateway?.ModeDetails.find(
          (item) => item.ModeName === 'UPI'
        )?.ModeId;
        PaymentOptionType = 'PG';
      }
    } else {
      PaymentType = selectedPaymentOption;
      PaymentOptionType = 'PC';
    }
    const commonOrderDetails = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      BookingType: BookingType,
      ServiceProvider: 0,
      ActiveStatus: 'A',
      RefundAmount: 0,
      AddInfo: 'test',
      BillAmount: FullPayment ? 0 : totalAmount - TotalTaxAmount,
      OverallDisc: 0,
      TaxAmount: FullPayment ? 0 : TotalTaxAmount,
      VatAmount: 0,
      NetAmount: FullPayment ? 0 : totalAmount,
      PaymentType: selectedPaymentOption || null,
      GivenAmt: 0,
      BalGiven: 0,
      BookingMedia: 'DW',
      ExtraChargeDetails: GlobalExtraCharge,
      Type: 'P',
      Debit: 0,
      Credit: PreOrderAdvance,
      DeliveryDate: changeDateFormat(DeliveryDate),
      DeliveryTime: PreOrderTime,
      Address1: FormValues?.Address1,
      Address2: FormValues?.Address2,
      City: FormValues?.City,
      Dist: FormValues?.Dist,
      State: FormValues?.State,
      Zip: FormValues?.Zip,
      AdvanceAmount: FullPayment ? 0 : FormValues?.AdvanceAmount,
      MobileNo: PreOrderCusMobNo,
      Name: PreOrderCusName,
      DefaultStatus: SetAsDefaultCust ? 'Y' : 'N',
      SalesPaymentType: 'normal',
      PaymentStatus: 'P',
      PaymentDetail: FullPayment
        ? []
        : !splitPayment
          ? [
              {
                PaymentType: PaymentType || null,
                Amount: FormValues?.AdvanceAmount,
                PaymentOptionType: PaymentOptionType || null,
                ModeOfPayment:
                  selectedGateWayOptions === 'Default'
                    ? useOptions?.[0]?.PaymentDetails?.Payatthecounter?.find(
                        (upipay) => upipay?.UPIId === UpiId
                      )?.UPIDetailId
                    : null,
                AccountDtl:
                  ModeName === 'UPI' && selectedGateWayOptions === 'Default'
                    ? useOptions?.[0]?.PaymentDetails?.Payatthecounter?.find(
                        (upipay) => upipay?.UPIId === UpiId
                      )
                    : (ModeName === 'UPI' && PaymentOptionType === 'PD') ||
                        (ModeName === 'Card' && PaymentOptionType === 'PD')
                      ? useOptions?.[0]?.PaymentDetails?.PaymentDevice
                      : (ModeName === 'UPI' && PaymentOptionType === 'PG') ||
                          (ModeName === 'Card' && PaymentOptionType === 'PG')
                        ? useOptions?.[0]?.PaymentDetails?.PaymentGateway
                        : [],
                PaymentStatus:
                  ModeName?.toLowerCase() === 'card' ||
                  (ModeName?.toLowerCase() === 'upi' &&
                    selectedGateWayOptions != 'Default')
                    ? 'P'
                    : 'S',
                Debit: 0,
                Credit:
                  ModeName?.toLowerCase() === 'credit'
                    ? FormValues?.AdvanceAmount
                    : 0,
              },
            ]
          : values,
    };

    if (Buttonicon) {
      if (
        Status == 'Delivery' ||
        (Status1 == 'Delivery' && !stocklimitExceeded)
      ) {
        const Put = {
          ...commonOrderDetails,
          OrderId: OrderDetail?.OrderId,
          OrderType: OrderDetail?.OrderType,
          UpdatedBy: UserId,
          CustSuppId: CustDetails?.CustId,
          Reference: 'test',
          OrderDtlDetails: data,
          NewOrderDtlDetails: NewOrderDetailDelivery,
          OrderStatus: 'S',
          DeliveryStatus: 'D',
          PaymentStatus:
            (ModeName?.toLowerCase() === 'card' ||
              ModeName?.toLowerCase() === 'upi') &&
            selectedGateWayOptions !== 'Default'
              ? 'P'
              : 'S',
        };

        let Response = await dispatch(PreOrderBookingDataPut(Put)).unwrap();
        if (Response?.data?.statusCode === 1) {
          // if (!FullPayment) {
          let fullpayment;
          let data = Response?.data?.PaymentOrderDtl?.filter(
            (e) => e?.PaymentStatus == 'S'
          )?.reduce((total, item) => {
            return total + item.Amount;
          }, 0);
          if (Response?.data?.OrderDetails?.[0]?.NetAmount === data) {
            fullpayment = true;
          } else {
            fullpayment = false;
          }
          if (!fullpayment) {
            if (
              (ModeName === 'Card' || ModeName === 'UPI') &&
              selectedGateWayOptions !== 'Default'
            ) {
              await PaymentDiviceFlow(
                Response?.data,
                selectedGateWayOptions,
                ModeName,
                PreOrderCusMobNo,
                'Delivery'
              );
            }
            if (
              ModeName == 'Cash' ||
              ModeName == 'Credit' ||
              selectedGateWayOptions == 'Default'
            ) {
              successFunction(Response);
            }
          } else {
            successFunction(Response);
            setFullPayment(false);
          }
        } else {
          setMessageType('error');
          setMessageData(Response?.data?.response);
        }
      }
      if (Status == 'Edit' || Status1 == 'Edit') {
        const Put = {
          ...commonOrderDetails,
          OrderId: OrderDetail?.OrderId,
          OrderType: OrderDetail?.OrderType,
          UpdatedBy: UserId,
          CustSuppId: CustDetails?.CustId,
          Reference: 'test',
          OrderDtlDetails: data,
          NewOrderDtlDetails: NewOrderDetailDelivery,
          OrderStatus: 'P',
          DeliveryStatus: 'P',
          PaymentStatus:
            ModeName?.toLowerCase() === 'card' ||
            ModeName?.toLowerCase() === 'upi'
              ? 'P'
              : 'P',
        };

        let Response = await dispatch(PreOrderBookingDataPut(Put)).unwrap();
        if (Response?.data?.statusCode === 1) {
          if (splitPayment) {
            return Response;
          } else {
            if (!FullPayment) {
              if (
                (ModeName === 'Card' || ModeName === 'UPI') &&
                selectedGateWayOptions !== 'Default'
              ) {
                await PaymentDiviceFlow(
                  Response?.data,
                  selectedGateWayOptions,
                  ModeName,
                  PreOrderCusMobNo
                );
              }
              if (
                ModeName == 'Cash' ||
                ModeName == 'Credit' ||
                selectedGateWayOptions == 'Default'
              ) {
                successFunction();
              }
            } else {
              successFunction();
              setFullPayment(false);
            }
          }
        } else {
          setMessageType('error');
          setMessageData(Response?.data?.response);
        }
      }

      // Handle response...
    } else {
      const POST = {
        ...commonOrderDetails,
        CreatedBy: UserId,
        OrderType: 'PRE',
        CustSuppId: CustDetails?.CustId,
        Reference: 'test',
        OrderDtlDetails: PreOrderList?.map((item) => ({
          OfferValue: item?.OfferValue,
          OfferAmt: item?.TotalOfferPrice || item?.OfferAmt,
          OfferType: item?.OfferType,
          ProdId: item.ProdId,
          Type: item.Type,
          OrderQty: item.OrderQty,
          OrderRate: item.OrderRate,
          TotalAmt: item.TotalAmt,
          TaxAmt: item.TaxAmt,
          RefundQty: 0,
          InwardDtlId: item.InwardDtlId,
          TaxId: item.TaxId,
          ProdNameQty: item.ProdName
            ? `${item.ProdName} ${item.Type != 'C' ? item.Size : '1'} ${item.Type != 'C' ? item.UomName : 'Combo'}`
            : '',
          OrderStatus: 'S',
          OrderType: 'PRE',
          SinglePc: item.SinglePc,
          BookingType: BookingType,
          Image: item.Image,
          Description: item.Description,
        })),
        OrderStatus: 'O',
        DeliveryStatus: 'P',
      };

      let Response = await dispatch(PreOrderBookingData(POST)).unwrap();
      if (Response?.data?.statusCode === 1) {
        if (splitPayment) {
          return Response;
        } else {
          if (
            (ModeName === 'Card' || ModeName === 'UPI') &&
            selectedGateWayOptions !== 'Default'
          ) {
            await PaymentDiviceFlow(
              Response?.data,
              selectedGateWayOptions,
              ModeName,
              PreOrderCusMobNo
            );
          }

          if (
            ModeName == 'Cash' ||
            ModeName == 'Credit' ||
            selectedGateWayOptions == 'Default'
          ) {
            successFunction();
          }
        }
      } else {
        setMessageType('error');
        setMessageData(Response?.data?.response);
      }
    }
  };

  const successFunction = async (Response) => {
    setMessageType('success');
    setMessageData('Order Added Sccessfully');
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      let updatedRemovedData;
      if (PreOrderAdvance == 0) {
        updatedRemovedData = {
          userData: [],
          ExtraCharges: [],
          Paymentgateway: false,
          paymentMethod: 'Cash',
          type: 'remove',
          keyValue: 'customer',
        };
      } else {
        updatedRemovedData = {
          userData: [],
          ExtraCharges: [],
          Paymentgateway: false,
          paymentMethod: 'Cash',
          upioption1: 'okk',
          type: 'remove',
          keyValue: 'customer',
        };
      }
      customerDisplayWindow.postMessage(updatedRemovedData, '*');
      const updatedRemovedDataNew = {
        type: 'remove',
        keyValue: 'OrderTotalAmount',
      };
      customerDisplayWindow.postMessage(updatedRemovedDataNew, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
    setOldAdvanceAmount(0);
    setBalaceAmount(0);
    setButton(false);
    setStatus();
    await formRef?.current?.resetFields();
    await dispatch(changepreOrderList(null));
    await dispatch(changepreOrder(true));
    await dispatch(changePreOrderCusName(null));
    await dispatch(changePreOrderCusMob(null));
    await dispatch(changePreOrderAdd1(null));
    await dispatch(changePreOrderAdd2(null));
    await dispatch(changePreOrderAdvance(null));
    await dispatch(changePreOrderzip(null));
    await dispatch(changePreOrderCity(null));
    await dispatch(changePreOrderDistrict(null));
    await dispatch(changePreOrderState(null));
    await dispatch(changePreOrderAdditem('AddDetails'));
    await dispatch(changeCustomerID(null));
    await dispatch(changeSelectedCustId(null));
    await dispatch(changeSelectedOption(null));

    setItemEditData([]);
    setselectedOption('Booking');
    setZipCodeData(false);
    setSetAsDefaultCust(false);
    setCusName();
    setMobName();
    setTotalAmount();
    setBalaceAmount();
    setAdd1();
    setAdd2();
    setZip();
    Response ? setPrintOrderDetails([Response?.data]) : '';

    setImageUrl('');
    cancelEdit();
    BadgePendingApi();
    PendingApiCall();
    const today = new Date();
    const fromDate = today.toISOString().split('T')[0];
    HistoryApiCall(fromDate, fromDate);
    await dispatch(ChangeTotalAmount([]));
    setGetWayOptions();
    setSelectedGetWayOptions();
    setselectedUPIOption();
    setselectedPaymentOption();
    fetchingsalesData();

    ///
  };
  const PaymentDiviceFlow = async (params, type, ModeName, MobNo) => {
    await dispatch(changePaymentloader(true));
    let Paymentdevicefilter = params?.PaymentOrderDtl?.filter(
      (item) => item.PaymentOptionType === 'PD' && item.PaymentStatus === 'P'
    );
    let PaymentGatewayfilter = params?.PaymentOrderDtl?.filter(
      (item) => item.PaymentOptionType === 'PG' && item.PaymentStatus === 'P'
    );

    if (type === 'PaymentDevice') {
      await dispatch(
        changePaymentTransactionNumber(Paymentdevicefilter?.[0]?.PaymentOrderId)
      );
      let paymentdetail = {
        TransactionNumber: Paymentdevicefilter?.[0]?.PaymentOrderId,
        SequenceNumber: 1,
        AllowedPaymentMode:
          Paymentdevicefilter?.[0]?.PaymentTypeName?.toLowerCase() === 'card'
            ? '1'
            : Paymentdevicefilter?.[0]?.PaymentTypeName?.toLowerCase() === 'upi'
              ? '10'
              : '',
        Amount: `${parseInt(Paymentdevicefilter?.[0]?.Amount) * 100}`,
        ClientID: useOptions?.[0]?.PDConfigDetails?.[0]?.ClientId,
        StoreID: useOptions?.[0]?.PDConfigDetails?.[0]?.StoreId,
        UserID: useOptions?.[0]?.PDConfigDetails?.[0]?.UserId,
        MerchantID: useOptions?.[0]?.PDConfigDetails?.[0]?.MerchantId,
        SecurityToken: useOptions?.[0]?.PDConfigDetails?.[0]?.SecurityToken,
        IMEI: useOptions?.[0]?.PDConfigDetails?.[0]?.IMEI,
        AutoCancelDurationInMinutes:
          useOptions?.[0]?.PDConfigDetails?.[0]?.AutoCancelDurationInMinutes,
      };
      let apiresponse = await dispatch(
        PostPaymentdevice(paymentdetail)
      ).unwrap();
      if (apiresponse?.ResponseMessage?.toLowerCase() === 'approved') {
        let pendingPaymentList = {
          MerchantID: useOptions?.[0]?.PDConfigDetails?.[0]?.MerchantId,
          SecurityToken: useOptions?.[0]?.PDConfigDetails?.[0]?.SecurityToken,
          ClientID: useOptions?.[0]?.PDConfigDetails?.[0]?.ClientId,
          StoreID: useOptions?.[0]?.PDConfigDetails?.[0]?.StoreId,
          IMEI: useOptions?.[0]?.PDConfigDetails?.[0]?.IMEI,
          PlutusTransactionReferenceId:
            apiresponse?.PlutusTransactionReferenceID,
          PaymentOrderId: Paymentdevicefilter?.[0]?.PaymentOrderId,
          UpdatedBy: UserId,
        };
        await dispatch(PutPendingPaymentList(pendingPaymentList)).unwrap();
        let isApproved = false;
        const startTime = Date.now();
        let postpaymentdata = {
          MerchantID: useOptions?.[0]?.PDConfigDetails?.[0]?.MerchantId,
          SecurityToken: useOptions?.[0]?.PDConfigDetails?.[0]?.SecurityToken,
          ClientID: useOptions?.[0]?.PDConfigDetails?.[0]?.ClientId,
          StoreID: useOptions?.[0]?.PDConfigDetails?.[0]?.StoreId,
          IMEI: useOptions?.[0]?.PDConfigDetails?.[0]?.IMEI,
          PlutusTransactionReferenceID:
            apiresponse?.PlutusTransactionReferenceID,
        };
        // Loop to call the second API every 3 seconds
        while (!isApproved) {
          let ApiResponseget = await dispatch(
            GetPaymentdeviceResponse(postpaymentdata)
          ).unwrap();

          if (
            ApiResponseget?.ResponseMessage?.toLowerCase() === 'txn approved'
          ) {
            let putbookingdata = {
              OrderBookingId: Paymentdevicefilter?.[0]?.OrderId,
              OrderId: Paymentdevicefilter?.[0]?.PaymentOrderId,
              PaymentStatus: 'S',
              Amount: Paymentdevicefilter?.[0]?.Amount,
              ResponseDtl: [ApiResponseget],
              PaymentType: Paymentdevicefilter?.[0]?.PaymentType,
              UpdatedBy: UserId,
            };

            let bookingpaymentupdate = await dispatch(
              PutBookingPaymentStatusChange(putbookingdata)
            ).unwrap();
            if (bookingpaymentupdate?.data?.statusCode === 1) {
              setMessageType('success');
              setMessageData(
                bookingpaymentupdate?.data?.response +
                  ' ' +
                  (bookingpaymentupdate?.data?.OrderDetails?.length > 0
                    ? bookingpaymentupdate?.data?.OrderId &&
                      extractLastNumberOrderId(
                        bookingpaymentupdate?.data?.OrderId,
                        response?.data?.bookingpaymentupdate?.[0]?.FYStatus
                      )
                    : '')
              );
              dispatch(changePaymentloader(false));
              let getpaymentgatewaydetail = await dispatch(
                PaymentCardGetdetail(bookingpaymentupdate?.data?.OrderId)
              ).unwrap();
              let data =
                getpaymentgatewaydetail?.data?.data?.[0]?.OrderPaymentDtls.reduce(
                  (total, item) => {
                    return total + item.Amount;
                  },
                  0
                );

              if (totalAmount == data && Buttonicon) {
                setFullPayment(true);
                await dispatch(changePreOrderAdvance(0));
              } else {
                successFunction();
              }
            }

            isApproved = true;
            console.log('Transaction Approved!');
            // Exit the loop
            break;
          }

          // Check if 1 minute has passed
          if (
            Date.now() - startTime >
            useOptions?.[0]?.PDConfigDetails?.[0]?.AutoCancelDurationInMinutes *
              60000
          ) {
            // 60,000 ms = 1 minute
            console.error('Transaction not approved within 1 minute.');
            let putbookingdata = {
              OrderBookingId: Paymentdevicefilter?.[0]?.OrderId,
              OrderId: Paymentdevicefilter?.[0]?.PaymentOrderId,
              PaymentStatus: 'F',
              Amount: Paymentdevicefilter?.[0]?.Amount,
              ResponseDtl: [ApiResponseget],
              PaymentType: Paymentdevicefilter?.[0]?.PaymentType,
              UpdatedBy: UserId,
            };

            let bookingpaymentupdate = await dispatch(
              PutBookingPaymentStatusChange(putbookingdata)
            ).unwrap();
            if (bookingpaymentupdate?.data?.statusCode === 1) {
              setMessageType('error');
              setMessageData(
                `Payment Failed. Your Transaction Number is ${Paymentdevicefilter?.[0]?.PaymentOrderId}`
              );
              dispatch(changePaymentloader(false));
              let AllPaymentOptions = useOptions?.find(
                (item) => item.FlowName === 'Sales'
              );
              let object = AllPaymentOptions?.OptionDetails?.find(
                (item) => item.OptionName === 'Pay at the counter'
              )?.ModeDetails;

              setselectedPaymentOption(
                object?.find((mode) => mode.ModeName == 'Cash')?.ModeId
              );
              setselectOptionName('Cash');
            }
            break;
          }

          // Wait for 3 seconds before making the next call
          await new Promise((resolve) => setTimeout(resolve, 3000));
        }
      } else {
        let putbookingdata = {
          OrderBookingId: Paymentdevicefilter?.[0]?.OrderId,
          OrderId: Paymentdevicefilter?.[0]?.PaymentOrderId,
          PaymentStatus: 'F',
          Amount: Paymentdevicefilter?.[0]?.Amount,
          PaymentType: Paymentdevicefilter?.[0]?.PaymentType,
          UpdatedBy: UserId,
        };
        let bookingpaymentupdate = await dispatch(
          PutBookingPaymentStatusChange(putbookingdata)
        ).unwrap();
        if (bookingpaymentupdate?.data?.statusCode === 1) {
          setMessageType('error');
          setMessageData(apiresponse?.ResponseMessage);
          await dispatch(changePaymentloader(false));
          let AllPaymentOptions = useOptions?.find(
            (item) => item.FlowName === 'Sales'
          );
          let object = AllPaymentOptions?.OptionDetails?.find(
            (item) => item.OptionName === 'Pay at the counter'
          )?.ModeDetails;
          setselectedPaymentOption(
            object?.find((mode) => mode.ModeName == 'Cash')?.ModeId
          );
          setselectOptionName('Cash');
        }
      }
    } else if (type === 'PaymentGateway') {
      const checkPaymentStatus = async () => {
        const intervalId = setInterval(async () => {
          try {
            let getpaymentgatewaydetail = await dispatch(
              PaymentCardGetdetail(PaymentGatewayfilter?.[0]?.OrderId)
            ).unwrap();

            if (getpaymentgatewaydetail?.data?.statusCode === 1) {
              let paymentdataget =
                getpaymentgatewaydetail?.data?.data?.[0]?.OrderPaymentDtls?.find(
                  (item) =>
                    item?.PaymentOrderId ===
                    PaymentGatewayfilter?.[0]?.PaymentOrderId
                )?.PaymentStatus;

              if (paymentdataget === 'S') {
                setMessageType('success');
                setMessageData('Payment Success');
                await dispatch(changePaymentloader(false));
                clearInterval(intervalId); // Stop the loop when payment is successful
                let data =
                  getpaymentgatewaydetail?.data?.data?.[0]?.OrderPaymentDtls.reduce(
                    (total, item) => {
                      return total + item.Amount;
                    },
                    0
                  );
                if (totalAmount == data && Buttonicon) {
                  setFullPayment(true);
                  await dispatch(changePreOrderAdvance(0));
                } else {
                  successFunction();
                }
              } else if (paymentdataget === 'F') {
                setMessageType('error');
                setMessageData('Payment Failed');
                await dispatch(changePaymentloader(false));
                let AllPaymentOptions = useOptions?.find(
                  (item) => item.FlowName === 'Sales'
                );
                let object = AllPaymentOptions?.OptionDetails?.find(
                  (item) => item.OptionName === 'Pay at the counter'
                )?.ModeDetails;
                setselectedPaymentOption(
                  object?.find((mode) => mode.ModeName == 'Cash')?.ModeId
                );
                setselectOptionName('Cash');
                clearInterval(intervalId); // Stop the loop when payment fails
                const customerDisplayWindow = getCustomerDisplayWindow();
                if (customerDisplayWindow && !customerDisplayWindow.closed) {
                  const updatedData = {
                    userData: [...PreOrderList],
                    ExtraCharges: GlobalExtraCharge,
                    customer: selOption != null ? selOption : GetCustId,
                    paymentMethod: selectOptionName,
                    Paymentgateway: false,
                  };
                  customerDisplayWindow.postMessage(updatedData, '*');
                }
              }
            }
          } catch (error) {
            console.error('Error fetching payment details: ', error);
          }
        }, 3000); // Call the API every 3 seconds
      };

      // Call the function to start checking payment status
      checkPaymentStatus();
      const GateWay = PaymentGatewayfilter?.[0];

      const customerDisplayWindow = getCustomerDisplayWindow();

      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          OrderBookingId: GateWay?.OrderId,
          Paymentgateway: true,
          OrderPaymentId: GateWay?.PaymentOrderId,
          OrderTotalAmount: GateWay?.Amount,
          paymentMethod: ModeName,
        };
        customerDisplayWindow.postMessage(updatedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
    }
  };

  const cancelEdit = async () => {
    setEdit(false);
    setButton(false);
    setselectedPaymentOption();
    setOldAdvanceAmount(0);
    setBalaceAmount(0);
    await formRef?.current?.resetFields();
    await dispatch(changepreOrderList(null));
    await dispatch(changepreOrder(true));
    await dispatch(changePreOrderCusName(null));
    await dispatch(changePreOrderCusMob(null));
    await dispatch(changePreOrderDate());
    await dispatch(changePreOrderTime(null));
    await dispatch(changePreOrderAdd1(null));
    await dispatch(changePreOrderAdd2(null));
    await dispatch(changePreOrderAdvance(null));
    await dispatch(changePreOrderzip(null));
    await dispatch(changePreOrderCity(null));
    await dispatch(changePreOrderDistrict(null));
    await dispatch(changePreOrderState(null));
    await dispatch(changePreOrderAdditem('AddDetails'));
    await dispatch(changeCustomerID(null));
    await dispatch(changeSelectedCustId(null));
    await dispatch(changeSelectedOption(null));

    setItemEditData([]);
    setselectedOption('Booking');
    setZipCodeData(false);
    setSetAsDefaultCust(false);
    setCusName();
    setMobName();
    setTotalAmount();
    setBalaceAmount();
    setAdd1();
    setAdd2();
    setZip();
    setImageUrl('');
    setGetWayOptions();
    setSelectedGetWayOptions();
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedRemovedData = {
        userData: [],
        ExtraCharges: [],
        paymentMethod: 'Cash',
        type: 'remove',
        keyValue: 'customer',
      };
      customerDisplayWindow.postMessage(updatedRemovedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  };
  const onFinish = async () => {
    let formattedPreOrderDate = null;

    if (PreOrderDate !== null && PreOrderDate !== undefined) {
      const day = String(PreOrderDate.$D).padStart(2, '0');
      const month = String(PreOrderDate.$M + 1).padStart(2, '0'); // Month is zero-based
      const year = PreOrderDate.$y;
      const dateString = `${day}-${month}-${year}`;
      formattedPreOrderDate = moment(dateString, 'DD-MM-YYYY').format(
        'DD-MM-YYYY'
      );
    }
    if (formattedPreOrderDate === null && PreOrderTime === null) {
      setMessageType('error');
      setMessageData('Select Date And Time');
    } else if (formattedPreOrderDate === null) {
      setMessageType('error');
      setMessageData('Select Date');
    } else if (PreOrderTime === null) {
      setMessageType('error');
      setMessageData('Select Time');
    } else if (SelCustId === null) {
      setMessageType('error');
      setMessageData('Select Customer');
    } else if (splitPayment) {
      Buttonicon ? setStatus('Edit') : setStatus('Delivery');
    } else if (
      PreOrderAdvance > 0 &&
      PreOrderAdvance != null &&
      (selectedPaymentOption === ' ' ||
        selectedPaymentOption === undefined ||
        selectedPaymentOption === null)
    ) {
      setMessageType('error');
      setMessageData('Select Payment Option');
    } else {
      if (
        PaymentOptions?.find((item) => item.ModeId === selectedPaymentOption)
          ?.ModeName === 'Cash' ||
        PaymentOptions?.find((item) => item.ModeId === selectedPaymentOption)
          ?.ModeName === 'Credit'
      ) {
        FurderFlow();
      } else if (
        PaymentOptions?.find((item) => item.ModeId === selectedPaymentOption)
          ?.ModeName === 'Card'
      ) {
        if (GateWayOptions?.length > 1) {
          if (selectedGateWayOptions != undefined) {
            FurderFlow();
          } else {
            setMessageType('error');
            setMessageData('Select GateWay Option');
          }
        } else {
          FurderFlow();
        }
      } else if (
        PaymentOptions?.find((item) => item.ModeId === selectedPaymentOption)
          ?.ModeName === 'UPI'
      ) {
        if (
          selectedGateWayOptions === 'Default' ||
          GateWayOptions?.length === 1
        ) {
          if (selectedGateWayOptions != undefined) {
            if (selectedUPIOption != null) {
              FurderFlow();
            } else {
              setMessageType('error');
              setMessageData('Select UPI Option');
            }
          } else {
            setMessageType('error');
            setMessageData('Select GateWay Option');
          }
        } else {
          FurderFlow();
        }
      }
    }
  };

  const FurderFlow = () => {
    if (
      (selectedUPIOption && selectedGateWayOptions == 'Default' && qrcode) ||
      CreditCustomer?.basic
    ) {
      UpiPayment();
    } else {
      AddBookingDetails();
    }
  };

  const onChange_Pending_FromDate = async (_, dateString) => {
    if (dateString) {
      const formattedDateTime = moment(
        dateString,
        'DD-MM-YYYY HH:mm:ss'
      ).format('DD-MM-YYYY HH:mm:ss');
      setPreOrder_Pending_FromDate(formattedDateTime);
      const FromDateApi = moment(dateString, 'DD-MM-YYYY HH:mm:ss').format(
        'YYYY-MM-DD'
      );
      const ToDateApi = moment(
        PreOrder_Pending_ToDate,
        'DD-MM-YYYY HH:mm:ss'
      ).format('YYYY-MM-DD');

      if (PreOrder_Pending_ToDate != undefined) {
        PendingApiCall(FromDateApi, ToDateApi);
      }
    } else {
      setPreOrder_Pending_FromDate(undefined);

      PendingApiCall();
    }
  };

  const onChange_Pending_ToDate = async (_, dateString) => {
    dispatch(changeDropDownStatus(false));
    if (dateString) {
      const formattedDateTime = moment(
        dateString,
        'DD-MM-YYYY HH:mm:ss'
      ).format('DD-MM-YYYY HH:mm:ss');
      setPreOrder_Pending_ToDate(formattedDateTime);
      const ToDateApi = moment(dateString, 'DD-MM-YYYY HH:mm:ss').format(
        'YYYY-MM-DD'
      );
      const FromDateApi = moment(
        PreOrder_Pending_FromDate,
        'DD-MM-YYYY HH:mm:ss'
      ).format('YYYY-MM-DD');

      if (PreOrder_Pending_FromDate != undefined) {
        PendingApiCall(FromDateApi, ToDateApi);
      }
    } else {
      setPreOrder_Pending_ToDate(undefined);
      PendingApiCall();
    }
  };

  const onChangeDate_History_FromDate = async (_, dateString) => {
    if (dateString) {
      const formattedDateTime = moment(
        dateString,
        'DD-MM-YYYY HH:mm:ss'
      ).format('DD-MM-YYYY HH:mm:ss');
      setPreOrder_History_FromDate(formattedDateTime);
      const FromDateApi = moment(dateString, 'DD-MM-YYYY HH:mm:ss').format(
        'YYYY-MM-DD'
      );
      const ToDateApi = moment(
        PreOrder_History_ToDate,
        'DD-MM-YYYY HH:mm:ss'
      ).format('YYYY-MM-DD');

      if (PreOrder_History_ToDate != undefined) {
        HistoryApiCall(FromDateApi, ToDateApi);
      }
    } else {
      setPreOrder_History_FromDate(undefined);
      HistoryApiCall();
    }
  };

  const onChangeDate_History_ToDate = async (_, dateString) => {
    if (dateString) {
      const formattedDateTime = moment(
        dateString,
        'DD-MM-YYYY HH:mm:ss'
      ).format('DD-MM-YYYY HH:mm:ss');
      setPreOrder_History_ToDate(formattedDateTime);
      const ToDateApi = moment(dateString, 'DD-MM-YYYY HH:mm:ss').format(
        'YYYY-MM-DD'
      );
      const FromDateApi = moment(
        PreOrder_History_FromDate,
        'DD-MM-YYYY HH:mm:ss'
      ).format('YYYY-MM-DD');

      if (PreOrder_History_FromDate != undefined) {
        HistoryApiCall(FromDateApi, ToDateApi);
      }
    } else {
      setPreOrder_History_ToDate(undefined);
      HistoryApiCall();
    }
  };

  const OnchangePreOrderIcon = async () => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        userData: [],
        ExtraCharges: [],
        type: 'remove',
        keyValue: 'customer',
        paymentMethod: null,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
    await dispatch(changeBookingType('PreOrder'));
    await dispatch(changePreOrderAdditem('AddItems'));
    setPreOrder(true);
    setZipCodeData(false);
    setSetAsDefaultCust(false);
    formRef.current?.resetFields();
    await dispatch(changepreOrderList(null));
    await dispatch(changepreOrder(true));
    await dispatch(changePreOrderCusName(null));
    await dispatch(changePreOrderCusMob(null));
    await dispatch(changePreOrderDate(null));
    await dispatch(changePreOrderAdd1(null));
    await dispatch(changePreOrderAdd2(null));
    await dispatch(changePreOrderAdvance(null));
    await dispatch(changePreOrderzip(null));
    await dispatch(changePreOrderCity(null));
    await dispatch(changePreOrderDistrict(null));
    await dispatch(changePreOrderState(null));
    await dispatch(changePreOrderTime(null));
    setCusName();
    setMobName();
    setTotalAmount();
    setBalaceAmount();
    setAdd1();
    setAdd2();
    setZip();
    // }
    await dispatch(changeCustomerID(null));
    await dispatch(changeSelectedCustId(null));
    await dispatch(changeSelectedOption(null));
    await dispatch(changealldata(false));
    setselectedOption('Booking');
    setItemEditData();
  };

  const productModalCancel = () => {
    setModalProduct(!ModalProduct);
    setPendingOrderView();
  };

  const SelectDefaultCaustmer = async (e) => {
    setSetAsDefaultCust(e.target.checked);

    const setZipCodeAddress = async () => {
      setZipCodeData(true);
      formRef.current?.setFieldsValue({
        City: CustDetails?.City,
        Dist: CustDetails?.Dist,
        State: CustDetails?.State,
      });
      await dispatch(changePreOrderCity(CustDetails?.City));
      await dispatch(changePreOrderDistrict(CustDetails?.Dist));
      await dispatch(changePreOrderState(CustDetails?.State));
    };

    if (e.target.checked && CustDetails != undefined) {
      await dispatch(changePreOrderCusName(CustDetails?.CustName));
      await dispatch(
        changePreOrderCusMob(CustDetails?.value || CustDetails?.CustMobile)
      );
      await dispatch(changePreOrderAdd1(CustDetails?.Address1));
      await dispatch(changePreOrderAdd2(CustDetails?.Address2));
      await dispatch(changePreOrderzip(CustDetails?.Zip));
      formRef?.current?.setFieldsValue({
        Name: CustDetails?.CustName,
        MobileNo: CustDetails?.value || CustDetails?.CustMobile,
        Address1: CustDetails?.Address1,
        Address2: CustDetails?.Address2,
        Zip: CustDetails?.Zip,
      });
      if (CustDetails?.Zip?.toString().length === 6) {
        setZipCodeAddress();
      }
    } else {
      setZipCodeData(false);
      await dispatch(changePreOrderCusName(null));
      await dispatch(changePreOrderCusMob(null));
      await dispatch(changePreOrderAdd1(null));
      await dispatch(changePreOrderAdd2(null));
      await dispatch(changePreOrderzip(null));
      await dispatch(changePreOrderCity(null));
      await dispatch(changePreOrderDistrict(null));
      await dispatch(changePreOrderState(null));
      formRef?.current?.setFieldsValue({
        Name: '',
        MobileNo: '',
        Address1: '',
        Address2: '',
        Zip: '',
        City: '',
        Dist: '',
        State: '',
      });
    }
  };

  const EditableRow = ({ index, ...props }) => {
    return (
      <Form form={Itemform} component={false}>
        <EditableContext.Provider value={Itemform}>
          <tr {...props} />
        </EditableContext.Provider>
      </Form>
    );
  };

  const EditableCell = ({
    title,
    editable,
    children,
    dataIndex,
    record,
    handleSave,
    ...restProps
  }) => {
    const [editing, setEditing] = useState(false);
    const inputRef = useRef(null);
    const form = useContext(EditableContext);

    useEffect(() => {
      if (editing) {
        inputRef?.current?.focus();
      }
    }, [editing]);

    const toggleEdit = () => {
      setEditing(!editing);
      form.setFieldsValue({
        [dataIndex]: record[dataIndex],
      });
    };

    const save = async () => {
      try {
        const values = await form.validateFields();
        toggleEdit();
        handleSave({
          ...record,
          ...values,
        });
      } catch (errInfo) {
        console.log('Save failed:', errInfo);
      }
    };

    let childNode = children;
    if (editable) {
      childNode = editing ? (
        <Form.Item
          style={{
            margin: 0,
          }}
          name={dataIndex}
          rules={[
            {
              required: true,
              pattern: /^[1-9]\d*(\.\d+)?$/,
              message: `${title} is required.`,
            },
          ]}
        >
          <Input ref={inputRef} onPressEnter={save} onBlur={save} />
        </Form.Item>
      ) : (
        <div
          className="editable-cell-value-wrap"
          style={{
            paddingRight: 24,
          }}
          onClick={toggleEdit}
        >
          {children}
        </div>
      );
    }

    return <td {...restProps}>{childNode}</td>;
  };

  const components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  };

  const handleDelete = async (key) => {
    const newData1 = PreOrderList?.filter(
      (item) =>
        !(
          item.SinglePc === key?.SinglePc &&
          item.InwardDtlId === key?.InwardDtlId
        )
    );
    await dispatch(changepreOrderList(newData1));
  };
  const Icolumns = [
    {
      title: 'SI',
      key: 'ProdName',
      align: 'center',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{index + 1}</a>
      ),
    },
    {
      title: 'PRODUCT',
      dataIndex: 'ProdName',
      key: 'ProdName',
    },
    {
      title: 'QTY',
      dataIndex: 'OrderQty',
      key: 'OrderQty',
      width: '100px',
      editable: true,
      render: (_, record, index) => (
        <>
          <div>{record?.OrderQty || record?.SalesQty} </div>
        </>
      ),
    },
    {
      title: 'UOM',
      dataIndex: 'UomName',
      key: 'UomName',
    },
    {
      title: 'AMT',
      dataIndex: 'MRP',
      key: 'MRP',
      align: 'right',
      render: (_, record, index) => (
        <>
          <div>{record?.OrderRate || record?.MRP} </div>
        </>
      ),
    },
    {
      title: '%',
      dataIndex: 'OfferPrice',
      key: 'OfferPrice',
      align: 'right',
      render: (_, record, index) => (
        <>
          <div>
            {record?.TotalOfferPrice || record?.OfferAmt
              ? record?.TotalOfferPrice || record?.OfferAmt
              : '-'}{' '}
          </div>
        </>
      ),
    },
    {
      title: 'TOTAL',
      dataIndex: 'TotalAmt',
      key: 'TotalAmt',
      align: 'right',
    },
    {
      title: 'Details',
      dataIndex: 'Details',
      key: 'Details',
      width: '50px',
      render: (_, record, index) => (
        <>
          <div style={{ display: 'flex' }}>
            <a
              onClick={() =>
                ShowDetailFn(record?.Image, record?.Description, index)
              }
            >
              <IoEye style={{ fontSize: '20px' }} />
            </a>
            {ItemEditdata.length >= 1 && (
              <Popconfirm
                title="Are you sure you want to delete?"
                onConfirm={() => handleDelete(record)}
              >
                <a style={{ paddingLeft: '10px' }}>
                  <RiCloseCircleFill
                    style={{ color: '#FF4D4F', fontSize: '20px' }}
                  />
                </a>
              </Popconfirm>
            )}
          </div>
        </>
      ),
    },
  ];

  const ShowDetailFn = (img, mess, index) => {
    setShowDetails(!ShowDetails);
    setImageUrl(img);
    setIndex(index);
    setMessageModel(mess);
    ViewformRef.current?.setFieldsValue({ Message: mess });
  };

  const columns = Icolumns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });

  const handleSave = async (row) => {
    let off =
      row?.Type != 'P'
        ? row.OfferValue
        : (row?.OrderRate * row?.OfferValue) / 100;

    const newData = [...ItemEditdata];
    const index = newData.findIndex((item) => row.ProdId === item.ProdId);
    const item = newData[index];
    const UpdatedData = {
      ProdName: row.ProdName,
      OrderQty: row.OrderQty,
      UomName: row.UomName,
      Amount: row.Amount,
      TotalAmt:
        row?.Type != 'P'
          ? (row.OrderRate || row.MRP) * row.OrderQty - row.OrderQty * off
          : (row.OrderRate || row.MRP) * row.OrderQty,
      TotalOfferPrice: row?.Type != 'P' ? row.OrderQty * off : '-',
    };
    newData.splice(index, 1, {
      ...item,
      ...UpdatedData,
    });
    await dispatch(changepreOrderList(newData));
  };

  const handleEdit = async (key) => {
    setorderId(key?.OrderId);

    await dispatch(changepreOrderList(key?.productDetails));
    setKeys(key);
    await dispatch(changePreOrderAdditem('AddDetails'));
    setEdit(true);
    await setCusName(key?.Name);
    setButton(true);

    await dispatch(ChangeTotalAmount(key?.ExtraChargeDetails));
    setSetAsDefaultCust(key?.DefaultStatus == 'Y' ? true : false);
    let data = key?.CustomerDetails?.[0];
    let data1 = {
      Address1: data?.Address1,
      Address2: data?.Address2,
      City: '',
      CustId: key?.CustSuppId,
      CustName: data?.CustSuppName,
      Dist: '',
      State: '',
      Zip: data?.ZipCode,
      label: data?.CustSuppName || data?.MobileNo,
      value: data?.MobileNo,
    };

    const fromTime = moment(key?.DeliveryTime, ['h:mm a']).format('HH:mm:ss');

    setOldAdvanceAmount(key?.PaidAmount);
    setselectedOption('Booking');
    setOrderDetail({ OrderId: key?.OrderId, OrderType: key?.OrderType });
    await dispatch(changeSelectedOption(data1));
    await dispatch(changePreOrderTime(fromTime));
    await dispatch(changePreOrderDate(key?.DeliveryDate));
    await dispatch(changeSelectedCustId(key?.CustSuppId));
    let AllPaymentOptions = useOptions?.find(
      (item) => item.FlowName === 'Sales'
    );
    let object = AllPaymentOptions?.OptionDetails?.find(
      (item) => item.OptionName === 'Pay at the counter'
    )?.ModeDetails;
    setselectedPaymentOption(
      object?.find((mode) => mode.ModeName == 'Cash')?.ModeId
    );
    setselectOptionName('Cash');
  };

  const PendingEditableRow = ({ index, ...props }) => {
    return (
      <Form form={Pendingform} component={false}>
        <EditableContext.Provider value={Pendingform}>
          <tr {...props} />
        </EditableContext.Provider>
      </Form>
    );
  };

  const PendingEditableCell = ({
    title,
    editable,
    children,
    dataIndex,
    record,
    handleSave,
    ...restProps
  }) => {
    const [editing, setEditing] = useState(false);
    const inputRef = useRef(null);
    const form = useContext(PendingEditableContext);

    useEffect(() => {
      if (editing) {
        inputRef?.current?.focus();
      }
    }, [editing]);

    const toggleEdit = () => {
      setEditing(!editing);
      form.setFieldsValue({
        [dataIndex]: record[dataIndex],
      });
    };

    const save = async () => {
      try {
        const values = await form.validateFields();
        toggleEdit();
        handleSave({
          ...record,
          ...values,
        });
      } catch (errInfo) {
        console.log('Save failed:', errInfo);
      }
    };

    let childNode = children;
    if (editable) {
      childNode = editing ? (
        <Form.Item
          style={{
            margin: 0,
          }}
          name={dataIndex}
          rules={[
            {
              required: true,
              pattern: /^[1-9]\d*(\.\d+)?$/,
              message: `${title} is required.`,
            },
          ]}
        >
          <Input ref={inputRef} onPressEnter={save} onBlur={save} />
        </Form.Item>
      ) : (
        <div
          className="editable-cell-value-wrap"
          style={{
            paddingRight: 24,
          }}
          onClick={toggleEdit}
        >
          {children}
        </div>
      );
    }

    return <td {...restProps}>{childNode}</td>;
  };

  const Pendingcomponents = {
    body: {
      row: PendingEditableRow,
      cell: PendingEditableCell,
    },
  };

  const handlePreOrderDelete = async (params) => {
    if (params?.PaidAmount > 0) {
      setCancelModal(true);
      setPreOrderData(params);
    } else {
      PreOrderCancel(params);
    }
  };

  const PreOrderCancel = async (params) => {
    const CancelDat = {
      AppId: AppId,
      CompId: CompId,
      BranchId: BranchId,
      OrderId: params?.OrderId,
      ...(params?.PaidAmount > 0 && {
        OrderPaymentDtl: [
          {
            PaymentType:
              cancelformRef?.current?.getFieldsValue()?.CancelPayOptions,
            Amount: cancelformRef?.current?.getFieldsValue()?.RefundAmount || 0,
            PaymentStatus: 'S',
          },
        ],
      }),
      CreatedBy: UserId,
    };
    let DeleteResponse = await dispatch(PreOrderBookingDataCancel(CancelDat));
    if (DeleteResponse?.payload?.data?.statusCode === 1) {
      setMessageType('success');
      setMessageData('OrderStatus Deleted Successfully');
      PendingApiCall();
      cancelformRef?.current?.resetFields();
      setCancelModal(false);
      setPreOrderData();
      setCancelPaymentOption(null);
      setPreOrderRefund(null);
    } else {
      setMessageType('error');
      setMessageData(DeleteResponse?.payload?.data?.response);
    }
  };

  const History_onSearch = (value) => {
    HistorysetSearchedText(value);
  };

  const History_onSearchChange = (e) => {
    HistorysetSearchedText(e?.target?.value);
  };

  const formatDate = (paramdate, time) => {
    const date = new Date(paramdate);

    if (isNaN(date.getTime())) {
      return 'Invalid Date';
    }
    const day = String(date.getDate()).padStart(2, '0');
    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-indexed
    const year = date.getFullYear();

    return `${day}-${month}-${year} ${time}`;
  };
  const Pcolumns = [
    {
      title: <div style={{ fontSize: '10px' }}>SI</div>,
      dataIndex: 'OrderId',
      key: 'OrderId',
      align: 'center',
      fixed: 'left',
      render: (text, object, index) => (
        <a style={{ color: 'black', fontSize: '10px' }}>{index + 1}</a>
      ),
    },
    {
      title: <div style={{ fontSize: '10px' }}>O.ID</div>,
      dataIndex: 'OrderId',
      key: 'OrderId',
      align: 'center',
      fixed: 'left',
      filteredValue: [PendingsearchedText],
      render: (text, record, index) => (
        <a style={{ color: 'black', fontSize: '10px' }}>
          {record.FYStatus === 'Y'
            ? extractThreeDigitNumber(text)
            : extractLastNumber(text)}
        </a>
      ),
      onFilter: (value, record) => {
        return (
          String(record.OrderId).toLowerCase().includes(value.toLowerCase()) ||
          String(record.DeliveryDate)
            .toLowerCase()
            .includes(value.toLowerCase()) ||
          String(record.DeliveryTime)
            .toLowerCase()
            .includes(value.toLowerCase()) ||
          String(formatDate(record?.DeliveryDate, record.DeliveryTime))
            .toLowerCase()
            .includes(value.toLowerCase())
        );
      },
      ellipsis: true,
    },
    {
      title: <div style={{ fontSize: '10px' }}>DATE/TIME</div>,
      dataIndex: 'OrderId',
      key: 'ProdNameQty',
      align: 'center',

      render: (_, record) => (
        <a style={{ color: 'black', fontSize: '10px' }}>
          {formatDate(record?.DeliveryDate, record.DeliveryTime)}
        </a>
      ),
    },
    {
      title: <div style={{ fontSize: '10px' }}>Customer</div>,
      dataIndex: 'OrderId',
      align: 'center',
      render: (_, record) => (
        <IoEye
          style={{ fontSize: '18px', color: '#000' }}
          onClick={() =>
            setPendingCustomerView({
              Data: record?.CustomerDetails?.[0],
              status: true,
            })
          }
        />
      ),
    },
    {
      title: <div style={{ fontSize: '10px' }}>Order</div>,
      dataIndex: 'OrderId',
      align: 'center',
      render: (_, record) => (
        <IoEye
          style={{ fontSize: '18px', color: '#000' }}
          onClick={() => viewproductModel(record?.productDetails)}
        />
      ),
    },
    {
      title: <div style={{ fontSize: '10px' }}>Action</div>,
      dataIndex: 'operation',

      fixed: 'right',
      align: 'center',
      render: (_, record) => (
        <>
          <Space size="middle">
            <Popconfirm
              title="Are you sure you want to edit?"
              onConfirm={() => handleEdit(record)}
            >
              <EditFilled
                style={{
                  color: '#1292EE',
                  fontSize: '18px',
                }}
              />
            </Popconfirm>
            {!Buttonicon && (
              <Popconfirm
                title="Are you sure you want to delete?"
                onConfirm={() => handlePreOrderDelete(record)}
              >
                <RiCloseCircleFill
                  style={{
                    color: '#FF4D4F',
                    fontSize: '18px',
                  }}
                />
              </Popconfirm>
            )}
          </Space>
        </>
      ),
    },
  ];

  const Upimodel = (type) => {
    setUpiOpen(false);
    if (type == 'Submit') {
      AddBookingDetails();
    }
    if (type == 'Cancel') {
      setselectedUPIOption();
    }
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedRemovedData = {
        type: 'remove',
        keyValue: 'OrderTotalAmount',
        Paymentgateway: false,
        upi: GlobalUpiID,
        paymentMethod: selectOptionName,
      };
      customerDisplayWindow.postMessage(updatedRemovedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  };
  const handleCreditCustomer = (type) => {
    if (type == 'Submit') {
      setCreditCustomer({
        basic: false,
        model: false,
      });
      AddBookingDetails();
    }
    if (type == 'Cancel') {
      setCreditCustomer({
        basic: true,
        model: false,
      });
    }
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedRemovedData = {
        type: 'remove',
        keyValue: 'OrderTotalAmount',
      };
      customerDisplayWindow.postMessage(updatedRemovedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  };
  const onFinalSubmit = async () => {
    let MobileNo = selOption?.value;
    let BrachName = PaymentUpiOptions?.[0]?.BrName;
    let url = `${MainHomeUrl}payment-page?amt=${PreOrderAdvance}&Id=${MobileNo}&cus=${SelCustId} &CusN=${selOption?.CustName}&Br=${BrachName}`;
    let response = await dispatch(SendPaymentLink({ MobileNo, url })).unwrap();
    if (response?.data?.statusCode === 1) {
      setMessageType('success');
      setMessageData('Link Sent Successfully');
    }
  };

  const viewproductModel = (value) => {
    setModalProduct(true);
    setPendingOrderView(value);
  };

  const Productcolumns = [
    { title: 'Product ', dataIndex: 'ProdName', key: 'ProdName' },
    { title: 'Quantity', dataIndex: 'OrderQty', key: 'OrderQty' },
    { title: 'Rate', dataIndex: 'MRP', key: 'MRP' },
    { title: 'Total Amount', dataIndex: 'TotalAmt', key: 'TotalAmt' },
    {
      title: 'Image',
      dataIndex: 'Image',
      key: 'Image',
      render: (text, record) =>
        record?.Image ? (
          <img
            src={record?.Image}
            alt="Product"
            style={{ width: '100px', height: 'auto' }}
          />
        ) : (
          ''
        ),
    },
    { title: 'Description', dataIndex: 'Description', key: 'Description' },
  ];

  const Pendingcolumns = Pcolumns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });
  const handleAdvancevalidator = (rule, value, callback) => {
    if (totalAmount - OldAdvanceAmount - value < 0) {
      callback('Please Enter AdvanceAmount less than or equal to TotalAmount');
    } else {
      callback();
    }
  };

  const MouseFunction = async (e) => {
    dispatch(changeDropDownStatus(e));
  };
  const openMenuClick = async () => {
    await dispatch(ChangeSearchFocusPreOrder(true));
  };

  const CountUp = useCountUp(Math.round(PreOrderAdvance));

  return (
    <>
      <Messages
        messageType={messageType}
        messageData={messageData}
        onComplete={onComplete}
      />
      <div ref={containerRef}>
        {preOrderOpen && (
          <div className="ComboPreOrder-MasterDiv">
            <div className="PreOrder-subContainer">
              <div>
                <h1 class="formHeader PreOrderFormHeader">Pre Booking</h1>
                <Flex
                  gap="small"
                  align="flex-start"
                  vertical
                  className="PreOrder-Flex"
                >
                  <Segmented
                    options={[
                      {
                        label: (
                          <div className="PreOrder-LableDiv">
                            <Avatar
                              className="PreOrder-LableAvatar"
                              icon={<BsClipboardCheckFill />}
                            />
                            <div>
                              Booking
                              <Badge className="PreOrder-LableText" />
                            </div>
                          </div>
                        ),
                        value: 'Booking',
                      },
                      {
                        label: (
                          <div className="PreOrder-LableDiv">
                            <Avatar
                              className="PreOrder-LableAvatar"
                              icon={<MdOutlinePendingActions />}
                            />
                            <div>
                              Pending{' '}
                              <Badge
                                className="PreOrder-LableText"
                                count={PendingData?.length}
                              />
                            </div>
                          </div>
                        ),
                        value: 'Pending',
                      },
                      {
                        label: (
                          <div className="PreOrder-LableDiv">
                            <Avatar
                              className="PreOrder-LableAvatar"
                              icon={<MdHistory />}
                            />
                            <div>
                              History
                              <Badge
                                className="PreOrder-LableText"
                                count={HistoryData?.length}
                              />
                            </div>
                          </div>
                        ),
                        value: 'History',
                      },
                    ]}
                    value={SelectedOption}
                    onChange={(e) => {
                      setselectedOption(e);
                    }}
                  />
                </Flex>
              </div>

              {SelectedOption == 'Booking' && (
                <>
                  <div className="PreOrder-TwoButtons">
                    <Button
                      icon={<FiPlus />}
                      onClick={async () => {
                        (await dispatch(changePreOrderAdditem('AddItems')),
                          setTotalAmount(),
                          setBalaceAmount());
                      }}
                    >
                      Add Item
                    </Button>
                    <Button
                      icon={<FiPlus />}
                      onClick={async () => {
                        await dispatch(changePreOrderAdditem('AddDetails'));
                      }}
                    >
                      Add Details
                    </Button>
                  </div>
                  {PreOrderAdditem == 'AddDetails' && (
                    <div className="PreOrder-BookingForm-div">
                      <div>
                        <Form
                          ref={formRef}
                          onFinish={onFinish}
                          className="PreOrder-Combo"
                        >
                          <div
                            className="PreOrder-FormDiv3"
                            onMouseEnter={() => MouseFunction(true)}
                            onMouseLeave={() => MouseFunction(false)}
                            // onClick={() => openMenuClick()}
                          >
                            <Form.Item name="DeliveryDate">
                              <DatePicProd
                                canSelectPast={false}
                                onChange={onChangeDate}
                                valueData={PreOrderDate}
                              />
                            </Form.Item>

                            <Form.Item name="DeliveryTime">
                              <TimePickers
                                label={
                                  <label class="required">Delivery Time</label>
                                }
                                isOnChange={true}
                                onChange={onChangeTime}
                                valueData={PreOrderTime}
                              />
                            </Form.Item>
                          </div>
                          <div className="PreOrder-FormDiv">
                            <BSCustomerSelect Focus="false" />
                            <BSNavBarAddUser />
                            <div className="PreOrder-SetDefault">
                              <p className="Ptag">Set As Customer </p>
                              <Checkbox
                                onChange={SelectDefaultCaustmer}
                                checked={SetAsDefaultCust}
                                disabled={
                                  CustDetails === undefined ? true : false
                                }
                              />
                            </div>
                          </div>
                          <div className="PreOrder-FormDiv">
                            <Form.Item
                              name="Name"
                              rules={[
                                {
                                  // required: true,
                                  pattern: /^(?!\s*$).+/,
                                  message: 'Please Enter Name',
                                },
                                {
                                  validator: async (_, value) => {
                                    await validateSafeInput(value); // To block HTML tags & SQL keywords
                                    return Promise.resolve();
                                  },
                                },
                              ]}
                              onClick={() => openMenuClick()}
                            >
                              <InputField
                                field="Name"
                                name="Name"
                                label={<label>Name</label>}
                                fieldState={true}
                                fieldApi={true}
                                autocomplete="off"
                                value={PreOrderCusName}
                                onChange={NameOnChange}
                                disabled={SetAsDefaultCust ? true : false}
                                isOnChange={
                                  (CustDetails?.CustName?.length > 0 &&
                                    SetAsDefaultCust) ||
                                  CusName
                                    ? true
                                    : false
                                }
                              />
                            </Form.Item>

                            <Form.Item
                              name="MobileNo"
                              rules={[
                                {
                                  required: true,
                                  pattern: /^\d{10}$/,
                                  message: 'Please Enter a Valid Mobile Number',
                                },
                                {
                                  validator: async (_, value) => {
                                    await validateSafeInput(value); // To block HTML tags & SQL keywords
                                    return Promise.resolve();
                                  },
                                },
                              ]}
                              onClick={() => openMenuClick()}
                            >
                              <InputField
                                field="MobileNo"
                                label={
                                  <label class="required">Mobile No</label>
                                }
                                fieldState={true}
                                maxLength="10"
                                fieldApi={true}
                                autocomplete="off"
                                onChange={MobOnChange}
                                disabled={SetAsDefaultCust ? true : false}
                                value={PreOrderCusMobNo}
                                isOnChange={
                                  CustDetails?.value ||
                                  (CustDetails?.CustMobile?.length > 0 &&
                                    SetAsDefaultCust) ||
                                  MobName
                                    ? true
                                    : false
                                }
                              />
                            </Form.Item>
                          </div>

                          <div className="PreOrder-FormDiv">
                            <Form.Item
                              name="AdvanceAmount"
                              rules={[
                                {
                                  pattern: /^\d+$/,
                                  message:
                                    'Please enter a valid Advance Amount (only numbers)',
                                },
                                { validator: handleAdvancevalidator },
                              ]}
                              onClick={() => openMenuClick()}
                            >
                              <InputField
                                field="AdvanceAmount"
                                autoComplete="off"
                                label={<label>Advance / Delivery Amount</label>}
                                maxLength="10"
                                fieldState={true}
                                value={PreOrderAdvance}
                                fieldApi={true}
                                onChange={OnchangeAdvance}
                                isOnChange={PreOrderAdvance ? true : false}
                              />
                            </Form.Item>
                          </div>
                          {Buttonicon && (
                            <div
                              style={{
                                display: 'flex',
                                justifyContent: 'center',
                              }}
                            >
                              <p className="Ptag">
                                Old Advance Amount : {OldAdvanceAmount}
                              </p>
                            </div>
                          )}
                          <div className="PreOrder-FormDiv5">
                            <p className="Ptag">Total Amount : {totalAmount}</p>
                            <p className="Ptag">
                              Balance Amount : {balanceAmount}
                            </p>
                          </div>
                          {ItemEditdata !== null &&
                            ItemEditdata?.length > 0 && (
                              <>
                                {PreOrderAdvance > 0 && (
                                  <>
                                    <div className="PreOrder-FormDiv6">
                                      <Form.Item
                                        name="PaymentOptions"
                                        onMouseEnter={() => openMenuClick()}
                                      >
                                        <DropDowns
                                          options={PaymentOptions?.map(
                                            (option) => ({
                                              value: option.ModeId,
                                              label: option.ModeName,
                                            })
                                          )}
                                          label={
                                            <label class="required">
                                              Payment Options
                                            </label>
                                          }
                                          isOnchanges={
                                            selectedPaymentOption ? true : false
                                          }
                                          onChangeFunction={(e) => {
                                            OnChangePaymentOption(e);
                                          }}
                                          valueData={selectedPaymentOption}
                                        />
                                      </Form.Item>
                                      {(PaymentOptions?.find(
                                        (item) =>
                                          item.ModeId === selectedPaymentOption
                                      )?.ModeName === 'UPI' ||
                                        PaymentOptions?.find(
                                          (item) =>
                                            item.ModeId ===
                                            selectedPaymentOption
                                        )?.ModeName === 'Card') &&
                                        GateWayOptions?.length > 0 && (
                                          <Form.Item
                                            name="GateWayOptions"
                                            rules={[
                                              {
                                                required: true,
                                                message:
                                                  'Please Select GateWay Option',
                                              },
                                            ]}
                                            onMouseEnter={() => openMenuClick()}
                                          >
                                            <DropDowns
                                              options={GateWayOptions?.map(
                                                (option) => ({
                                                  value: option.value,
                                                  label: option.option,
                                                })
                                              )}
                                              label={
                                                <label class="required">
                                                  Payment Methods
                                                </label>
                                              }
                                              isOnchanges={
                                                selectedGateWayOptions
                                                  ? true
                                                  : false
                                              }
                                              onChangeFunction={(e) => {
                                                cardandUpi(e);
                                              }}
                                              valueData={selectedGateWayOptions}
                                            />
                                          </Form.Item>
                                        )}
                                    </div>
                                    <div
                                      style={{
                                        display: 'flex',
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        width: '90%',
                                        marginTop: '0.5rem',
                                      }}
                                      onMouseEnter={() => openMenuClick()}
                                    >
                                      {PaymentOptions?.find(
                                        (item) =>
                                          item.ModeId === selectedPaymentOption
                                      )?.ModeName === 'UPI' &&
                                        selectedGateWayOptions ===
                                          'Default' && (
                                          <Form.Item
                                            name="UPIOptions"
                                            rules={[
                                              {
                                                required: true,
                                                message:
                                                  'Please Select UPI Options',
                                              },
                                            ]}
                                          >
                                            <DropDowns
                                              options={useOptions?.[0]?.PaymentDetails?.Payatthecounter?.map(
                                                (option) => ({
                                                  value: option.UPIId,
                                                  label: option.ModeName,
                                                })
                                              )}
                                              label={
                                                <label class="required">
                                                  UPI Options
                                                </label>
                                              }
                                              isOnchanges={
                                                selectedUPIOption ? true : false
                                              }
                                              onChangeFunction={(e) => {
                                                OnChangeUPIOption(e);
                                              }}
                                              valueData={selectedUPIOption}
                                            />
                                          </Form.Item>
                                        )}
                                    </div>
                                  </>
                                )}
                              </>
                            )}
                          {addDetails && (
                            <>
                              <div className="PreOrder-FormAddivtionalDiv">
                                <div className="PreOrder-FormDiv">
                                  <Form.Item
                                    name="Address1"
                                    rules={[
                                      {
                                        pattern: /^(?!\s*$).+/,
                                        message: 'Please Enter Address1',
                                      },
                                      {
                                        validator: async (_, value) => {
                                          await validateSafeInput(value); // To block HTML tags & SQL keywords
                                          return Promise.resolve();
                                        },
                                      },
                                    ]}
                                  >
                                    <InputField
                                      field="Address1"
                                      autoComplete="off"
                                      label={
                                        <label class="required">
                                          Address Line1
                                        </label>
                                      }
                                      fieldState={true}
                                      fieldApi={true}
                                      isOnChange={PreOrderAdd1 ? true : false}
                                      onChange={OnChangeAddress1}
                                    />
                                  </Form.Item>
                                  <Form.Item
                                    name="Address2"
                                    rules={[
                                      {
                                        pattern: /^(?!\s*$).+/,
                                        message: 'Please Enter Address2',
                                      },
                                      {
                                        validator: async (_, value) => {
                                          await validateSafeInput(value); // To block HTML tags & SQL keywords
                                          return Promise.resolve();
                                        },
                                      },
                                    ]}
                                  >
                                    <InputField
                                      field="Address2"
                                      autoComplete="off"
                                      label="Address Line2"
                                      fieldState={true}
                                      fieldApi={true}
                                      isOnChange={PreOrderAdd2 ? true : false}
                                      onChange={OnChangeAddress2}
                                    />
                                  </Form.Item>
                                </div>
                                <div>
                                  <Form.Item
                                    name="Zip"
                                    rules={[
                                      {
                                        pattern: /^(?!\s*$).+/,
                                        message: 'Please Enter Zipcode',
                                      },
                                      {
                                        validator: async (_, value) => {
                                          await validateSafeInput(value); // To block HTML tags & SQL keywords
                                          return Promise.resolve();
                                        },
                                      },
                                    ]}
                                  >
                                    <InputField
                                      field="Zip"
                                      autoComplete="off"
                                      label={
                                        <label class="required">Zipcode</label>
                                      }
                                      maxLength="6"
                                      fieldState={true}
                                      fieldApi={true}
                                      isOnChange={PreOrderzip ? true : false}
                                      onChange={pinCodeChange}
                                    />
                                  </Form.Item>
                                </div>
                                {zipCodeData ? (
                                  <>
                                    <div className="PreOrder-FormDiv">
                                      <Form.Item
                                        name="City"
                                        rules={[
                                          {
                                            required: true,
                                          },
                                          {
                                            validator: async (_, value) => {
                                              await validateSafeInput(value); // To block HTML tags & SQL keywords
                                              return Promise.resolve();
                                            },
                                          },
                                        ]}
                                      >
                                        <InputField
                                          field="City"
                                          disabled={true}
                                          label="City"
                                          fieldState={true}
                                          fieldApi={true}
                                          isOnChange={
                                            PreOrderCity ? true : false
                                          }
                                        />
                                      </Form.Item>
                                      <Form.Item
                                        name="Dist"
                                        rules={[
                                          {
                                            required: true,
                                          },
                                          {
                                            validator: async (_, value) => {
                                              await validateSafeInput(value); // To block HTML tags & SQL keywords
                                              return Promise.resolve();
                                            },
                                          },
                                        ]}
                                      >
                                        <InputField
                                          field="Dist"
                                          disabled={true}
                                          label="District"
                                          fieldState={true}
                                          fieldApi={true}
                                          isOnChange={
                                            PreOrderDistrict ? true : false
                                          }
                                        />
                                      </Form.Item>
                                    </div>
                                    <div>
                                      <Form.Item
                                        name="State"
                                        rules={[
                                          {
                                            required: true,
                                          },
                                          {
                                            validator: async (_, value) => {
                                              await validateSafeInput(value); // To block HTML tags & SQL keywords
                                              return Promise.resolve();
                                            },
                                          },
                                        ]}
                                      >
                                        <InputField
                                          field="State"
                                          disabled={true}
                                          label="State"
                                          fieldState={true}
                                          fieldApi={true}
                                          isOnChange={
                                            PreOrderState ? true : false
                                          }
                                        />
                                      </Form.Item>
                                    </div>
                                  </>
                                ) : (
                                  ''
                                )}
                              </div>
                            </>
                          )}
                          <div
                            className="PreOrder-Additional"
                            onClick={() => {
                              addDetails
                                ? setAddDetails(false)
                                : setAddDetails(true);
                            }}
                          >
                            Additional Details
                          </div>

                          {Buttonicon ? (
                            <div>
                              <div>
                                <div
                                  style={{
                                    display: 'flex',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                    gap: '0.5rem',
                                    width: '97%',
                                  }}
                                >
                                  <button
                                    type="submit"
                                    className="PreOrder-FormDiv7"
                                    style={{
                                      cursor: 'pointer',
                                      fontFamily: FontFamily['head'],
                                      backgroundColor: Color['darkColor'],
                                      color: Color['lightColor'],
                                    }}
                                    onClick={() => setStatus('Edit')}
                                  >
                                    Update Order
                                  </button>

                                  {balanceAmount === 0 &&
                                    (selectOptionName == 'Cash' ||
                                      selectOptionName == 'Credit' ||
                                      (selectOptionName == 'Card' &&
                                        FullPayment) ||
                                      (selectOptionName === 'UPI' &&
                                        selectedGateWayOptions === 'Default' &&
                                        selectedUPIOption != undefined)) && (
                                      <button
                                        type="submit"
                                        className="PreOrder-FormDiv7"
                                        style={{
                                          cursor: 'pointer',
                                          fontFamily: FontFamily['head'],
                                          backgroundColor: Color['darkColor'],
                                          color: Color['lightColor'],
                                        }}
                                        onClick={() => setStatus('Delivery')}
                                      >
                                        Delivery
                                      </button>
                                    )}
                                </div>

                                {PreOrderAdvance > 1 &&
                                  PreOrderAdvance != null &&
                                  !FullPayment &&
                                  PaymentOptions?.length > 1 && (
                                    <div
                                      className="PreOrder-FormDiv7"
                                      style={{
                                        cursor: 'pointer',
                                        fontFamily: FontFamily['head'],
                                        backgroundColor: Color['darkColor'],
                                        color: Color['lightColor'],
                                      }}
                                      onClick={() => {
                                        removestates();
                                      }}
                                    >
                                      Split Payment
                                    </div>
                                  )}
                              </div>
                              <div
                                className="PreOrder-FormDiv7"
                                style={{
                                  cursor: 'pointer',
                                  fontFamily: FontFamily['head'],
                                  backgroundColor: ' #ff7875',
                                }}
                                onClick={cancelEdit}
                              >
                                Cancel
                              </div>
                            </div>
                          ) : (
                            <div>
                              <>
                                <button
                                  type="submit"
                                  className="PreOrder-FormDiv7"
                                  style={{
                                    cursor: 'pointer',
                                    fontFamily: FontFamily['head'],
                                    backgroundColor: Color['darkColor'],
                                    color: Color['lightColor'],
                                  }}
                                >
                                  ₹ {CountUp}
                                  {/* <CountUp
                                    duration={0.4}
                                    className="counter"
                                    end={Math.round(PreOrderAdvance)}
                                  /> */}
                                </button>
                                {PreOrderAdvance > 1 &&
                                  PreOrderAdvance != null &&
                                  !FullPayment &&
                                  PaymentOptions?.length > 1 && (
                                    <div
                                      className="PreOrder-FormDiv7"
                                      style={{
                                        cursor: 'pointer',
                                        fontFamily: FontFamily['head'],
                                        backgroundColor: Color['darkColor'],
                                        color: Color['lightColor'],
                                      }}
                                      onClick={() => {
                                        removestates();
                                      }}
                                    >
                                      Split Payment
                                    </div>
                                  )}
                                <div
                                  className="PreOrder-FormDiv7"
                                  style={{
                                    cursor: 'pointer',
                                    fontFamily: FontFamily['head'],
                                    backgroundColor: ' #ff7875',
                                  }}
                                  onClick={() => {
                                    cancelEdit();
                                  }}
                                >
                                  Cancel
                                </div>
                              </>
                            </div>
                          )}
                        </Form>
                      </div>
                      <div></div>
                    </div>
                  )}

                  {PreOrderAdditem == 'AddItems' && (
                    <div>
                      <div className="ComboPreOrder-PendingDiv">
                        <Table
                          components={components}
                          rowClassName={() => 'editable-row'}
                          bordered
                          dataSource={ItemEditdata}
                          columns={columns}
                        />
                      </div>
                    </div>
                  )}
                </>
              )}

              {SelectedOption == 'Pending' && (
                <>
                  <Form
                    style={{ display: 'flex', gap: '0.5rem' }}
                    initialValues={{
                      FromDate: PreOrder_Pending_FromDate,
                      ToDate: PreOrder_Pending_ToDate,
                    }}
                  >
                    <div className="Pre-Order-Search">
                      <Search
                        placeholder="Search"
                        onSearch={Pending_onSearch}
                        onSearchChange={Pending_onSearchChange}
                      />
                    </div>

                    <div
                      style={{
                        display: 'flex',
                        gap: '0.5rem',
                        marginRight: '0.5rem',
                      }}
                    >
                      <div style={{ display: 'flex', flexDirection: 'column' }}>
                        <p>From Date</p>
                        <Form.Item name="FromDate">
                          <DatePicker
                            defaultValue={
                              PreOrder_Pending_FromDate
                                ? dayjs(PreOrder_Pending_FromDate, 'DD-MM-YYYY')
                                : null
                            }
                            isOnChange={true}
                            onChange={onChange_Pending_FromDate}
                            value={
                              PreOrder_Pending_FromDate
                                ? dayjs(PreOrder_Pending_FromDate, 'DD-MM-YYYY')
                                : null
                            }
                            disabledDate={false}
                            format={'DD/MM/YYYY'}
                          />
                        </Form.Item>
                      </div>
                      <div style={{ display: 'flex', flexDirection: 'column' }}>
                        <p>To Date</p>
                        <Form.Item name="ToDate">
                          <DatePicker
                            defaultValue={
                              PreOrder_Pending_ToDate
                                ? dayjs(PreOrder_Pending_ToDate, 'DD-MM-YYYY')
                                : null
                            }
                            isOnChange={true}
                            onChange={onChange_Pending_ToDate}
                            value={
                              PreOrder_Pending_ToDate
                                ? dayjs(PreOrder_Pending_ToDate, 'DD-MM-YYYY')
                                : null
                            }
                            disabledDate={false}
                            format={'DD/MM/YYYY'}
                          />
                        </Form.Item>
                      </div>
                    </div>
                  </Form>
                  <div className="Pre-Order-PendingTable">
                    <Table
                      components={Pendingcomponents}
                      rowClassName={() => 'editable-row'}
                      bordered
                      dataSource={PendingData}
                      columns={Pendingcolumns}
                      size="small"
                    />
                  </div>
                </>
              )}

              {SelectedOption == 'History' && (
                <div className="ComboPreOrder-PendingDiv">
                  <>
                    <Form
                      style={{ display: 'flex', gap: '0.5rem' }}
                      initialValues={{
                        FromDate: PreOrder_History_FromDate,
                        ToDate: PreOrder_History_ToDate,
                      }}
                    >
                      <div className="Pre-Order-Search">
                        <Search
                          placeholder="Search"
                          onSearch={History_onSearch}
                          onSearchChange={History_onSearchChange}
                        />
                      </div>

                      <div style={{ display: 'flex', flexDirection: 'column' }}>
                        <p>From Date</p>
                        <Form.Item name="FromDate">
                          <DatePicker
                            defaultValue={
                              PreOrder_History_FromDate
                                ? dayjs(PreOrder_History_FromDate, 'DD-MM-YYYY')
                                : null
                            }
                            isOnChange={true}
                            onChange={onChangeDate_History_FromDate}
                            value={
                              PreOrder_History_FromDate
                                ? dayjs(PreOrder_History_FromDate, 'DD-MM-YYYY')
                                : null
                            }
                            disabledDate={false}
                            format={'DD/MM/YYYY'}
                          />
                        </Form.Item>
                      </div>
                      <div style={{ display: 'flex', flexDirection: 'column' }}>
                        <p>To Date</p>
                        <Form.Item name="ToDate">
                          <DatePicker
                            defaultValue={
                              PreOrder_History_ToDate
                                ? dayjs(PreOrder_History_ToDate, 'DD-MM-YYYY')
                                : null
                            }
                            isOnChange={true}
                            onChange={onChangeDate_History_ToDate}
                            value={
                              PreOrder_History_ToDate
                                ? dayjs(PreOrder_History_ToDate, 'DD-MM-YYYY')
                                : null
                            }
                            disabledDate={false}
                            format={'DD/MM/YYYY'}
                          />
                        </Form.Item>
                      </div>
                    </Form>
                    <div className="Pre-Order-PendingTable">
                      <Table
                        columns={Hcolumns}
                        dataSource={HistoryData}
                        size="small"
                      />
                    </div>
                  </>
                </div>
              )}
            </div>
          </div>
        )}
        <Modal
          title={'Upload image & Message'}
          open={ShowDetails}
          onOk={OnOkView}
          onCancel={OnCancelView}
          width={700}
        >
          <div>
            <Form ref={ViewformRef} onFinish={OnOkView}>
              <div className="PreOrder-FormUploadImageDiv">
                <div>
                  <p>Upload Image</p>
                  <Imageupload
                    singleImage={true}
                    updateImageUrl={updateImageUrl}
                    ImageLink={ImageUrl}
                  />
                </div>
                <Form.Item
                  name="Message"
                  rules={[
                    {
                      pattern: /^(?!\s*$).+/,
                      message: 'Please Enter Message',
                    },
                    {
                      validator: async (_, value) => {
                        await validateSafeInput(value);
                        return Promise.resolve();
                      },
                    },
                  ]}
                >
                  <TextAreaInput
                    autoComplete="off"
                    label={<label>Message..</label>}
                    onChange={OnChangeMessage}
                    isOnChange={MessageModel ? true : false}
                    value={MessageModel}
                  />
                </Form.Item>
              </div>
            </Form>
          </div>
        </Modal>
        <Modal
          title={<h2 className="PreOrder-title">Customer Details</h2>}
          open={pendingCustomerView?.status === true}
          onCancel={() => {
            setPendingCustomerView({ Data: null, status: false });
          }}
          footer={false}
          width={700}
        >
          <div className="PreOrder-customer-details">
            {pendingCustomerView?.Data?.Address1 && (
              <div className="PreOrder-detail-item">
                Address1: {pendingCustomerView?.Data?.Address1}
              </div>
            )}
            {pendingCustomerView?.Data?.Address2 && (
              <div className="PreOrder-detail-item">
                Address2: {pendingCustomerView?.Data?.Address2}
              </div>
            )}
            {pendingCustomerView?.Data?.City && (
              <div className="PreOrder-detail-item">
                City: {pendingCustomerView?.Data?.City}
              </div>
            )}
            {pendingCustomerView?.Data?.CustSuppName && (
              <div className="PreOrder-detail-item">
                Customer: {pendingCustomerView?.Data?.CustSuppName}
              </div>
            )}
            {pendingCustomerView?.Data?.District && (
              <div className="PreOrder-detail-item">
                District: {pendingCustomerView?.Data?.District}
              </div>
            )}
            {pendingCustomerView?.Data?.Email && (
              <div className="PreOrder-detail-item">
                Email: {pendingCustomerView?.Data?.Email}
              </div>
            )}
            {pendingCustomerView?.Data?.MobileNo && (
              <div className="PreOrder-detail-item">
                Mobile No: {pendingCustomerView?.Data?.MobileNo}
              </div>
            )}
            {pendingCustomerView?.Data?.State && (
              <div className="PreOrder-detail-item">
                State: {pendingCustomerView?.Data?.State}
              </div>
            )}
            {pendingCustomerView?.Data?.ZipCode && (
              <div className="PreOrder-detail-item">
                Zip Code: {pendingCustomerView?.Data?.ZipCode}
              </div>
            )}
          </div>
        </Modal>

        <Modal
          title={<h2 className="PreOrder-title">Product Details</h2>}
          open={ModalProduct}
          onCancel={() => productModalCancel()}
          footer={false}
          width={700}
        >
          <div className="PreOrder-product-details">
            <Tables
              columns={Productcolumns}
              data={PendingOrderView}
              dataSource={PendingOrderView}
              pagination={false}
            />
          </div>
        </Modal>
        <DefaultModal
          open={UpiOpen}
          title="UPI PAYMENT"
          width={500}
          handleCancel={() => {
            Upimodel('Cancel');
          }}
          footer={false}
          children={
            <div style={{ overflow: 'scroll' }}>
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'space-evenly',
                  alignItems: 'center',
                }}
              >
                <div>
                  <QrinScreen
                    Amount={PreOrderAdvance ? PreOrderAdvance : 0}
                    UpiId={UpiId}
                  />
                </div>

                <div>
                  <h1> RS :{PreOrderAdvance ? PreOrderAdvance : 0} </h1>
                </div>
              </div>

              <div className="sentok">
                {(selOption || SelCustId) && (
                  <div className="sentLink" onClick={onFinalSubmit}>
                    Sent Payment Link
                    <img
                      src={WpIcon}
                      alt="Your Alt Text"
                      style={{ width: '30px', height: '30px' }}
                    />
                  </div>
                )}

                <div
                  style={{
                    display: 'flex',
                    flexDirection: 'row-reverse',
                    width: '100px',
                  }}
                >
                  <Buttons
                    buttonText="OK"
                    color="901D77"
                    icon={<ArrowRightOutlined />}
                    handleSubmit={() => {
                      Upimodel('Submit');
                    }}
                  />
                </div>
              </div>
            </div>
          }
        />

        {CreditCustomer?.model && (
          <div style={{ display: 'none' }}>
            <BsBillingCreditCustomer
              ModalCreditCustomer={CreditCustomer?.model}
              handlemodalclose={() => {
                handleCreditCustomer('Cancel');
              }}
              handleOk={() => {
                handleCreditCustomer('Submit');
              }}
            />
          </div>
        )}

        <Modal
          title={<h2 className="PreOrder-title">History Details</h2>}
          open={HistoryDetailsView?.status === true}
          onCancel={() => {
            setHistoryDetails({ Data: null, status: false });
          }}
          footer={false}
          width={900}
        >
          <div
            style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}
          >
            <div style={{ display: 'flex', gap: '0.5rem' }}>
              <div
                className="PreOrder-customer-details"
                style={{ width: '100%', height: '150px', overflow: 'scroll' }}
              >
                <h2 className="PreOrder-History-title">Customer Details</h2>
                {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.Address1 && (
                  <div className="PreOrder-detail-item">
                    Address1:{' '}
                    {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.Address1}
                  </div>
                )}
                {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.Address2 && (
                  <div className="PreOrder-detail-item">
                    Address2:{' '}
                    {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.Address2}
                  </div>
                )}
                {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.City && (
                  <div className="PreOrder-detail-item">
                    City: {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.City}
                  </div>
                )}
                {HistoryDetailsView?.Data?.CustomerDetails?.[0]
                  ?.CustSuppName && (
                  <div className="PreOrder-detail-item">
                    Customer:{' '}
                    {
                      HistoryDetailsView?.Data?.CustomerDetails?.[0]
                        ?.CustSuppName
                    }
                  </div>
                )}
                {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.District && (
                  <div className="PreOrder-detail-item">
                    District:{' '}
                    {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.District}
                  </div>
                )}
                {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.Email && (
                  <div className="PreOrder-detail-item">
                    Email:{' '}
                    {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.Email}
                  </div>
                )}
                {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.MobileNo && (
                  <div className="PreOrder-detail-item">
                    Mobile No:{' '}
                    {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.MobileNo}
                  </div>
                )}
                {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.State && (
                  <div className="PreOrder-detail-item">
                    State:{' '}
                    {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.State}
                  </div>
                )}
                {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.ZipCode && (
                  <div className="PreOrder-detail-item">
                    Zip Code:{' '}
                    {HistoryDetailsView?.Data?.CustomerDetails?.[0]?.ZipCode}
                  </div>
                )}
              </div>

              <div
                className="PreOrder-customer-details"
                style={{ width: '100%', height: '150px', overflow: 'scroll' }}
              >
                <h2 className="PreOrder-History-title">Payment Details</h2>
                {HistoryDetailsView?.Data?.OrderPaymentDtls?.[0]?.OrderId && (
                  <div className="PreOrder-detail-item">
                    OrderId:{' '}
                    {HistoryDetailsView?.Data?.OrderPaymentDtls?.[0]?.OrderId}
                  </div>
                )}
                {HistoryDetailsView?.Data?.OrderPaymentDtls?.[0]?.Amount && (
                  <div className="PreOrder-detail-item">
                    Amount:{' '}
                    {HistoryDetailsView?.Data?.OrderPaymentDtls?.[0]?.Amount}
                  </div>
                )}
                {HistoryDetailsView?.Data?.OrderPaymentDtls?.[0]
                  ?.PaymentTypeName && (
                  <div className="PreOrder-detail-item">
                    Payment Type Name:{' '}
                    {
                      HistoryDetailsView?.Data?.OrderPaymentDtls?.[0]
                        ?.PaymentTypeName
                    }
                  </div>
                )}
              </div>
            </div>
            <div
              className="PreOrder-product-details"
              style={{ width: '900px', height: '250px', overflow: 'scroll' }}
            >
              <h2 className="PreOrder-History-title">Product Details</h2>
              <Tables
                columns={Productcolumns}
                data={HistoryDetailsView?.Data?.productDetails}
                dataSource={HistoryDetailsView?.Data?.productDetails}
                pagination={true}
              />
            </div>
          </div>
        </Modal>
        {PrintOrderDetails?.length > 0 &&
          PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
            <div style={{ display: 'none' }}>
              <PaymentPdfBooking
                index={index}
                table2Data={orderDetail}
                singleData2={orderDetail?.productDetails}
                orderId={
                  orderDetail?.OrderId &&
                  extractLastNumberOrderId(
                    orderDetail?.OrderId,
                    orderDetail?.FYStatus
                  )
                }
                CreatedDate={orderDetail?.CreatedDate}
                PaymentStatus={PrintOrderDetails?.[0]?.PaymentOrderDtl}
                PreOrder={false}
                Preference={preferenceData}
              />
            </div>
          ))}
        {splitPayment && (
          <SplitPayment
            SplitPaymentModal={splitPayment}
            handlesplitpaymentclose={handlesplitpaymentclose}
            value={PreOrderAdvance}
            AddBookingDetails={AddBookingDetails}
            edit={Buttonicon}
            orderId={orderId}
            cancelEdit={cancelEdit}
            balanceAmount={balanceAmount}
            failedOrderData={failedOrderData}
          />
        )}

        {CancelModal && (
          <Modal
            title={<h2 className="PreOrder-title">Cancel Pre Booking</h2>}
            open={CancelModal}
            onCancel={() => setCancelModal(false)}
            footer={false}
            width={700}
          >
            <div className="PreOrder-cancel-details">
              {/* Summary Block */}
              <div className="summary-box">
                <div className="summary-row">
                  <span className="summary-label">Bill Amount:</span>
                  <span className="summary-value">
                    ₹ {PreOrderData?.NetAmount ?? 0}
                  </span>
                </div>
                <div className="summary-row">
                  <span className="summary-label">Advance Paid:</span>
                  <span className="summary-value">
                    ₹ {PreOrderData?.PaidAmount ?? 0}
                  </span>
                </div>
              </div>

              {/* Refund Amount Input */}
              <Form
                style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}
                ref={cancelformRef}
                onFinish={() => {
                  PreOrderCancel(PreOrderData);
                }}
              >
                <Form.Item
                  name="RefundAmount"
                  rules={[
                    {
                      required: true,
                      message: 'Please enter refund amount',
                    },
                    {
                      pattern: /^\d+(\.\d{1,2})?$/,
                      message: 'Only valid numbers allowed (max 2 decimals)',
                    },
                    {
                      validator: handlerefundvalidator,
                    },
                  ]}
                >
                  <InputField
                    field="RefundAmount"
                    autoComplete="off"
                    label={<label className="required">Refund Amount</label>}
                    maxLength={10}
                    fieldState={true}
                    value={PreOrderRefund}
                    fieldApi={true}
                    onChange={OnchangeRefund}
                    isOnChange={!!PreOrderRefund}
                    onKeyPress={(e) => {
                      const char = String.fromCharCode(e.charCode);
                      const isValid = /[0-9.]$/.test(char);
                      if (!isValid) e.preventDefault();
                      if (char === '.' && e.currentTarget.value.includes('.')) {
                        e.preventDefault();
                      }
                    }}
                  />
                </Form.Item>

                {/* Payment Method Dropdown */}
                <Form.Item
                  name="CancelPayOptions"
                  rules={[
                    {
                      required: true,
                      message: 'Please select a payment method',
                    },
                  ]}
                >
                  <DropDowns
                    options={PaymentOptions?.filter(
                      (option) =>
                        option.ModeName !== 'Credit' &&
                        option.ModeName !== 'Card'
                    )?.map((option) => ({
                      value: option.ModeId,
                      label: option.ModeName,
                    }))}
                    label={<label className="required">Payment Method</label>}
                    isOnchanges={!!CancelPaymentOption}
                    onChangeFunction={OnChangeCancelPaymentOption}
                    valueData={CancelPaymentOption}
                  />
                </Form.Item>

                <div
                  style={{
                    display: 'flex',
                    flexWrap: 'wrap',
                    justifyContent: 'end',
                    width: '100%',
                  }}
                >
                  <Buttons
                    buttonText="Refund"
                    color="901D77"
                    icon={<ArrowRightOutlined />}
                  />
                </div>
              </Form>
            </div>
          </Modal>
        )}
      </div>
    </>
  );
};

export default BSComboNavBarPreOrder;