import React, {
  useCallback,
  useEffect,
  useRef,
  useState,
  lazy,
  Suspense,
} from 'react';
import {
  FaCartPlus,
  FaMoneyBillWave,
  FaPrint,
  FaWhatsapp,
} from 'react-icons/fa';
import { IoClose } from 'react-icons/io5';
import { FaMobileScreenButton } from 'react-icons/fa6';
import moment from 'moment';
import { Tables } from '../../../../../Components/Tables/Table.jsx';
import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip.jsx';
import UpiPopover from './Utils/UpiPopOver';
import { isMobile } from 'react-device-detect';
import { useDispatch } from 'react-redux';

// Js Files
import {
  changeAddBookingDetailsTrigger,
  changeBillEditingMode,
  changeBookingType,
  ChangeComboCarddata,
  changeCurrentOrderId,
  changeCustomerID,
  ChangeInitialPaymentName,
  ChangeNavHoldData,
  changeOrderCardDetails,
  changeOrderType,
  changeOtherServiceTicketClaim,
  ChangeOverAllDiscEstimate,
  ChangeOverAllDiscSales,
  changePaymentloader,
  changePaymentTransactionNumber,
  changePreviousOrderOfferDetail,
  changePreviousOrderPayment,
  changeReorderHoldDetails,
  changeReorderProductDetails,
  changeSelectChair,
  ChangeSelectedCustDisable,
  changeSelectedCustId,
  changeSelectedOption,
  changeSelectedTableDetails,
  changeSelectTable,
  changeSelProdWiseEst,
  changeSummeryComboOfferAmount,
  changeSummeryTotalAmount,
  changeTipAmount,
  changeUnpaidData,
  changeunpaidflow,
  changeUpiIDName,
  changeUpiIDoptionId,
  changeUpiIDprint,
  getCardDataWithoutSub,
  getCardDataWithoutSubmodule,
  getCombolist,
  getConfigType,
  getCreditCustomer,
  getCurrentOrderid,
  getLayoutproductCard,
  GetPaymentdeviceResponse,
  getPaymentOptions,
  getSalesDetailData,
  getSelectedFavItems,
  getUnpaidData,
  GlobalAddBookingDetailsTrigger,
  GlobalAllBookingType,
  GlobalBookingType,
  GlobalBookingTypeBoth,
  GlobalCombocarddata,
  GlobalComboOfferAmount,
  GlobalCommonPaymentOptions,
  GlobalCurrentOrderId,
  GlobalCustId,
  GlobalDefaultBookingType,
  GlobalEstimateBooking,
  GlobalFailedTotalAmt,
  GlobalNavHoldData,
  GlobalOrderCardDetails,
  GlobalOrderType,
  GlobalOtherServiceTicketClaim,
  GlobalOtherSevices,
  GlobalOverAllDiscEstimate,
  GlobalOverAllDiscSales,
  GlobalPayementloader,
  GlobalpaymentOptionData,
  GlobalPaymentTrigger,
  GlobalPreviousOrderOfferDetails,
  GlobalPreviousOrderPayment,
  GlobalProductCategorie,
  GlobalProductSubCategorie,
  GlobalReorderHoldDetails,
  GlobalRetailWSSalesType,
  GlobalSalesBillEdit,
  GlobalSelCustId,
  GlobalSelectedTableDetails,
  GlobalSelOption,
  GlobalSelProdWiseEst,
  GlobalSummeryTotalTaxAmount,
  GlobaltipAmount,
  Globalunpaidflow,
  GlobalUnpaidListData,
  PaymentGatewayGetdetail,
  PostBookingData,
  PostPaymentdevice,
  PreferenceData,
  PutBookingData,
  PutBookingPaymentStatusChange,
  PutPendingPaymentList,
  putSalesBillEdit,
  putSplitpaymentStatus,
  SendPaymentLink,
} from '../../../../../Features/BookingScreen/BookingData/BookingData.js';
import { shallowEqual, useSelector } from 'react-redux';
import { Global_OverallOfferAmount } from '../../../../../Features/Offer/Offer';
import {
  getTemplateData,
  GlobalprintDatas,
  GlobalPrinterMappingDtls,
  GlobalSelectedFont,
  SelectedPrintTemplate,
  StoredSessionData,
} from '../../../../../Features/ThemeChange/ThemeChange';
import { getCustomerDisplayWindow } from '../../../../../Features/customerDisplayWindow/customerDisplayWindow';
import {
  ChangeTotalAmount,
  globalExtraTotalAmount,
} from '../../../../../Features/ExteraCharges/ExtraCharges';
import {
  encryptObject,
  extractLastNumberOrderId,
} from '../../../../../Services/Others';
import { getPaymentOptionsData } from '../../../../../Features/BookingScreen/BookingData/KioskBookingData';
import { PostOtherServices } from '../../../../../Features/OtherServices/OtherServices';
import paygate from '../../../../../Images/paygate.png';
import defaultupi from '../../../../../Images/defaultupi.png';
import paydevice from '../../../../../Images/paydevice.png';
import {
  changeholddata,
  gettinghold,
  globalholddata,
} from '../../../../../Features/BookingScreen/HoldOption/HoldOption';
import { Modal, Tooltip } from 'antd';
import {
  changeSalesPaymentoption,
  GlobalSalesPaymentoption,
} from '../../../../../Features/Payment/Paymentoptions/Paymentoptions';
import IndividualTokenMobilePrint from '../../BookingFunctionality/IndividualTokenMobilePrint';
import SingleTokenMobilePrint from '../../BookingFunctionality/SingleTokenMobilePrint';
import MobilePrint from '../../BookingFunctionality/MobilePrint';
import { PrintStyleFunction } from '../../../../paymentpdfPage/PrintStyleFunction';
import { printDiv } from '../../../../../Services/WSOthers';
import { GlobalBookingStatus } from '../../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail';
import { useAuth } from '../../../../../AuthContext';
import CountUp from 'react-countup';
import { GlobalpreOrderOpen } from '../../../../../Features/BookingScreen/PreOrder/PreOrder';
import BsBillingCreditCustomer from '../../BookingFunctionality/BSBillingCreditCustomer';
import PaymentPdfBooking from '../../../../paymentpdfPage/PaymentPdfBooking';
import { DefaultModal } from '../../../../../Components/Modal/DefaultModal';
import Buttons from '../../../../../Components/Forms/Buttons';

import SplitPayment from '../../BookingFunctionality/SplitPayment';
import BSCreditCustomer from '../../UtillComponents/BSCreditCustomer';
import {
  getDefaultPaymentOptions,
  GlobalAddCustomerDetails,
  triggerCustomerRefresh,
  VerifiedPaymentDtl,
} from '../../../../../Features/BookingScreen/Customer/addCustomer';
import { useNavigate } from 'react-router-dom';
import { ApplicationPreferences } from '../../../../../Features/BrachLogin/BranchLogin';
import { Messages } from '../../../../../Components/Notifications/Messages';
import { FaAngleUp } from 'react-icons/fa';
import {
  ChangeFullFreeProductList,
  changeFullOfferAppliedProducts,
  GlobalFreeProdList,
  GlobalOfferAppliedProducts,
  GlobalOverAllOfferAmt,
} from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
import { PublicQrCodepost } from '../../../../../Features/ConfigMasterPage/ConfigMasterPage.js';
import {
  getExpireProductsList,
  getLowStockAlertProductsList,
} from '../../../../../Features/ProductPage/ProductPage.js';

// Jsx Files
const CustomerOrders = lazy(
  () => import('../../BookingFunctionality/CustomerOrders.jsx')
);
const PaymentGatewayEmbedded = lazy(
  () => import('../../UtillComponents/PaymentGatewayEmbedded.jsx')
);
import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx';
import OtherServicePrintStyle1 from '../../../PrintTemplates/ThermalPrinter/OtherServicePrintStyle1.jsx';

import OtherServiceMobilePrint from '../../BookingFunctionality/OtherServiceMobilePrint.jsx';

const QrinScreen = lazy(
  () => import('../../BookingFunctionality/DynamicScreenQr.jsx')
);
const CardPopover = lazy(() => import('./Utils/CardPopover.jsx'));
const SMSShare = lazy(() => import('../../../../WhatsAppShare/SmsShare'));
const WhatsAppShare = lazy(
  () => import('../../../../WhatsAppShare/whatsAppShare')
);

import TokensinglePrint from '../../../../paymentpdfPage/TokenOnlyPrints/TokeninsinglePrint';
import { useApplyOfferto_CardDetail } from '../../UtillComponents/BSNavBarOffer/BSNavBarOffer_CustomHooks.jsx';

// Icons File
import WpIcon from '../../../../../Images/message.png';
import pozologoimg from '../../../../../Images/pozologoimg.png';
import PozoUnpaidIcon from '../../UtillComponents/Pozo retail icons/PozoUnpaidIcon.jsx';
import PozoDineInIcon from '../../UtillComponents/Pozo retail icons/PozoDineIn';
import Credit from '../../UtillComponents/Pozo retail icons/credit.svg';
import Paymentoption from '../../../../Payment/PaymentOptions/PaymentOptions';
import PozoSplitPaymentIcon from '../../UtillComponents/Pozo retail icons/PozoSplitPaymentIcon';
import { ArrowRightOutlined } from '@ant-design/icons';
import { BiRightArrowAlt } from 'react-icons/bi';
import PozoAdvanceIcon from '../../UtillComponents/Pozo retail icons/PozoAdvanceIcon';
import { MdSms } from 'react-icons/md';

//
const subDirectory = import.meta.env.ENV_BASE_URL;
const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL;
const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');

const StandardTablePayment = () => {
  const isF4Pressed = useRef(false);
  const { SadminuserAccess } = useAuth();
  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Sales'
  );
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const SessionData = useSelector(StoredSessionData);
  const BranchId = SessionData?.BranchId;
  const AppId = SessionData?.AppId;
  const CompId = SessionData?.CompId;
  const UserId = SessionData?.UserId;
  const UserType = SessionData?.UserType;
  const applyOffer = useApplyOfferto_CardDetail();
  const defaultPaymentTrigger = useSelector(GlobalPaymentTrigger);
  const defaultBookingType = useSelector(GlobalDefaultBookingType);
  const AllBookingType = useSelector(GlobalAllBookingType);
  const Holddata = useSelector(globalholddata);
  const FontFamily = useSelector(GlobalSelectedFont);
  const prodCat = useSelector(GlobalProductCategorie);
  const ProdSubCat = useSelector(GlobalProductSubCategorie);
  const templateData = useSelector(getTemplateData);
  const printerTemplateStyle = useSelector(SelectedPrintTemplate);
  const printDatas = useSelector(GlobalprintDatas);
  const ReportholdData = useSelector(GlobalReorderHoldDetails);
  const FailedTotalAmt = useSelector(GlobalFailedTotalAmt);
  const orderCardDetail = useSelector(GlobalOrderCardDetails);
  console.log(orderCardDetail, 'orderCardDetailorderCardDetail');
  const preOrder = useSelector(GlobalpreOrderOpen);
  const OverallOfferAmount = useSelector(Global_OverallOfferAmount);
  const SelectedTableDetails = useSelector(GlobalSelectedTableDetails);
  const TotalTaxAmount = useSelector(GlobalSummeryTotalTaxAmount);
  const globalTipAmount = useSelector(GlobaltipAmount);
  const GlobalExtraCharge = useSelector(globalExtraTotalAmount);
  const GlobalSalesPaymentoptions = useSelector(GlobalSalesPaymentoption);
  const Discount =
    useSelector(GlobalOverAllOfferAmt) +
    Number(useSelector(GlobalComboOfferAmount));
  const OverAllSales = useSelector(GlobalOverAllDiscSales);
  const OverAllEstimate = useSelector(GlobalOverAllDiscEstimate);
  const OfferCheckedInSetup = templateData?.BookingNavbar?.[1].some(
    (item) => item?.OptionName == 'Offer'
  );
  const FreeProdList = useSelector(GlobalFreeProdList);
  const offerAppliedProducts = useSelector(GlobalOfferAppliedProducts);
  const BookingType = useSelector(GlobalBookingType);
  const BookingTypeBoth = useSelector(GlobalBookingTypeBoth);
  const preferenceDatas = useSelector(PreferenceData);
  const preferenceDetails = preferenceDatas?.[0]?.SettingDtlDetails;
  const OtherServiceTicketClaim = useSelector(GlobalOtherServiceTicketClaim);
  const NavHoldData = useSelector(GlobalNavHoldData);
  const [SelectedBookingType, setSelectedBookingType] = useState(null);
  const GlobaluseOptions = useSelector(GlobalCommonPaymentOptions);
  const SelCustId = useSelector(GlobalSelCustId);
  const GlobProdwisedata = useSelector(GlobalSelProdWiseEst);
  const GlobEstBooking = useSelector(GlobalEstimateBooking);
  const OtherServicesglobal = useSelector(GlobalOtherSevices);
  const salesBillEdit = useSelector(GlobalSalesBillEdit);
  const previousOrderPayment = useSelector(GlobalPreviousOrderPayment);
  const previousOrderOfferDetails = useSelector(
    GlobalPreviousOrderOfferDetails
  );
  const AllPaymentOptions = useSelector(GlobalpaymentOptionData);
  const OrderType = useSelector(GlobalOrderType);
  const unpaidFlow = useSelector(Globalunpaidflow);
  const selOption = useSelector(GlobalSelOption);
  console.log(selOption, 'selOptionstandard');
  const paymentloader = useSelector(GlobalPayementloader);
  const BookingStatus = useSelector(GlobalBookingStatus);
  const tabledata = useSelector(GlobalUnpaidListData);
  const tableOptions = templateData?.BookingBilling?.[1];
  const NavBarOptions = templateData?.BookingNavbar?.[1];
  const holdCheckedSalesSetup = tableOptions?.some(
    (item) => item?.OptionName === 'Hold'
  );

  const GlobalAddCustomerDetails1 = useSelector(GlobalAddCustomerDetails);
  const AddBookingDetailsTrigger = useSelector(GlobalAddBookingDetailsTrigger);
  const GetCustId = useSelector(GlobalCustId);
  const appPreferences = useSelector(ApplicationPreferences);
  // customOrderId
  const CurrentOrderId = useSelector(GlobalCurrentOrderId);
  const RetailWSSalesType = useSelector(GlobalRetailWSSalesType, shallowEqual);
  const Combodata = useSelector(GlobalCombocarddata, shallowEqual);
  console.log(CurrentOrderId, 'CurrentOrderIdtable');
  const bookingTypePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Booking Type'
  )?.PreferenceCatDetails;
  const dinePreference = bookingTypePreference?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
      type?.PreferredStatus === 'Y'
  );
  const { selectedDate, invoiceDate, clearInvoiceDate } = useDateStore();
  const salespagefields = appPreferences?.find(
    (pref) => pref?.PreferredCatName === 'Sales Page Fields'
  )?.PreferenceCatDetails;
  const AvailableDate = salespagefields?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
      type?.PreferredStatus === 'Y'
  );
  const commonModulePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Common Module'
  )?.PreferenceCatDetails;
  const sportsAppPreference = commonModulePreference?.find(
    (preference) =>
      preference?.PreferredSubCatName === 'SportsApp' &&
      preference?.PreferredStatus == 'Y'
  );
  const PrinterDetails = useSelector(GlobalPrinterMappingDtls);
  const UpiQRPreference = preferenceDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'upiqr' &&
      setting?.SettingValue === 'Y'
  );

  const [defaultPaymentMode, setDefaultPaymentMode] = useState([]);
  const [defaultEnabled, setDefaultEnabled] = useState(false);
  const [blink, setBlink] = useState(false);
  const [showWhatsAppShare, setShowWhatsAppShare] = useState(false);
  const [showSMSShare, setSMSShare] = useState(false);
  const [OrderStatus, setOrderStatus] = useState(true);
  const [OtherServicesPrintDetails, setOtherServicesPrintDetails] = useState(
    []
  );
  const [UpiOpen, setUpiOpen] = useState(false);
  const [useOptions, setuseOptions] = useState([]);
  const [PaymentOptions, setPaymentOptions] = useState([]);
  const [addnewAccess, setaddnewAccess] = useState(true);
  const [empData, setEmpData] = useState();
  const [urlData, setUrlData] = useState();
  const [paybtnselected, setPaybtnselected] = useState();
  const [Paybtnnameselected, setPaybtnnameselected] = useState();
  const [payBtns, setPayBtns] = useState();
  console.log(payBtns, 'payBtnspayBtns');
  const [paymentSucess, setPaymentSuccess] = useState(false);
  const [businessUPI, setBusinessUPI] = useState(false);
  const [businessUPIOrderId, setBusinessUPIOrderId] = useState(null);
  const [businessUPILink, setBusinessUPILink] = useState(null);
  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
  const [creditCustomerOpen, setcreditCustomerOpen] = useState(false);
  const [Splitpayment, setSplitpayment] = useState(false);
  const [customerPreviesOrders, setCustomerPreviesOrders] = useState(false);
  const paymentGatewayRef = React.useRef(null);
  const [PrintOrderDetails, setPrintOrderDetails] = useState([]);
  const [PaymentUpiOptions, setPaymentUpiOptions] = useState([]);
  const [PaymentDeviceCard, setPaymentDeviceCard] = useState([]);
  const [SelectedCardOption, setSelectedCardOption] = useState(null);
  const [PaymentgatewayCard, setPaymentgatewayCard] = useState([]);
  const [PaymentgatewayUPI, setPaymentgatewayUPI] = useState([]);
  const [PaymentDeviceUPI, setPaymentDeviceUPI] = useState([]);
  const [ConfigDataList, setConfigDataList] = useState([]);
  const [TotalAmount, setTotalAmount] = useState(0);
  const [refundPayBtns, setRefundPayBtns] = useState([]);
  const [refundPaySelected, setRefundPaySelected] = useState();
  const [refundPaySelectedName, setRefundPaySelectedName] = useState(null);
  const [currentOrderNetAmount, setCurrentOrderNetAmount] = useState(0);
  const [previousNetAmount, setPreviousNetAmount] = useState(0);
  const [FirstPaymentclick, setFirstPaymentclick] = useState(false);
  const [UpinotSelected, setUpinotSelected] = useState(false);
  const [brachName, setbrachName] = useState('');
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [UpiOptionOpen, setUpiOptionOpen] = useState(false);
  const [SelectedUpiOption, setSelectedUpiOption] = useState();
  const [UpiOption, setUpiOption] = useState('');
  const [CardOptionOpen, setCardOptionOpen] = useState(false);
  const [UpiId, setUpiId] = useState();
  const [Success, SetSuccess] = useState();
  const [qrCode, setQrCode] = useState(false);
  const [credit, setCredit] = useState(false);
  const [overAllBal, setOverAllBal] = useState(0);
  const [CardoptionnotSelected, setCardoptionnotSelected] = useState(false);
  const [CreditCustomer, setCreditCustomer] = useState(false);
  const [UpiPayOption, setUpiPayOption] = useState([]);
  const [BusinessPayOption, setBusinessPayoption] = useState([]);
  const [SelectedUPIPayOption, setSelectedUPIPayOption] = useState('Default');
  const [CardPayOption, setCardPayOption] = useState([]);
  const [MobileNoWhatsApp, setMobileNoWhatsApp] = useState();
  const [summary, setSummary] = useState(false);
  const summaryRef = useRef(null);
  const [unpaidopen, setUnpaidOpen] = useState(false);
  const [UnpaidConfirmation, setUnpaidConfirmation] = useState(false);
  const [unpaidselectedindex, setunpaidselectedindex] = useState();
  const [extra, setExtra] = useState();

  const PaymentOptionsModeName =
    PaymentOptions?.find((e) => e.ModeDefault?.toUpperCase() === 'Y')
      ?.ModeName || PaymentOptions?.[0]?.ModeName;
  const PaymentOptionsModeId =
    PaymentOptions?.find((e) => e.ModeDefault?.toUpperCase() === 'Y')?.ModeId ||
    PaymentOptions?.[0]?.ModeId;
  const preferenceshortcutkey = preferenceDatas?.[0]?.SettingDtlDetails?.some(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'shortcutkeys' &&
      setting?.SettingValue === 'Y'
  );
  console.log(preferenceDatas, 'preferenceDatas', preferenceshortcutkey);
  console.log(
    PaymentOptionsModeName,
    'PaymentPrefarance',
    PaymentOptionsModeId
  );
  const allowedNames = ['whatsapp', 'Print', 'SMS'];

  const allowDecimal = preferenceDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'decimal' &&
      setting?.SettingValue === 'Y'
  );
  const Custombill = preferenceDetails?.some(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'customisedbillnumber' &&
      setting?.SettingValue === 'Y'
  );
  const Weightasquantity = preferenceDetails?.some(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'weightasquantity' &&
      setting?.SettingValue === 'Y'
  );
  const filteredSettingNames = preferenceDetails
    ?.filter(
      (item) =>
        allowedNames.includes(item?.SettingIdName) && item?.SettingValue === 'Y'
    )
    ?.map((item) => item?.SettingIdName);

  const preferenceOffer =
    preferenceDetails?.find((item) => item.SettingIdName === 'Offer')
      ?.SettingValue === 'Y';

  const UomPrint = preferenceDetails?.filter(
    (i) => i.SettingIdName === 'PrintUom'
  )?.[0];

  const Estimation = preferenceDetails?.find(
    (item) => item.SettingIdName == 'Estimation'
  );

  const MobileA4Print = preferenceDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'mobilea4' &&
      setting?.SettingValue === 'Y'
  );

  const TokenOnly = preferenceDetails?.filter(
    (i) => i.SettingIdName === 'TokenOnly'
  )?.[0];

  const IndividualToken = preferenceDetails?.filter(
    (i) => i.SettingIdName === 'AllProductindividualToken'
  )?.[0];

  const CheckOrderType = orderCardDetail?.filter(
    (a) => a?.BookingTypeName !== BookingType
  );
  const CheckBookingStatus =
    BookingStatus?.find((item) => item.ScreenType === 'Booking')
      ?.ScreenStatus ?? 'Open';

  const orderIdsArray =
    PrintOrderDetails?.[0]?.OrderDetails?.map(
      (orderDetail) => orderDetail?.OrderId
    ) || [];

  const handleURL = async (PrintOrderDetails) => {
    let orderIdsArray = PrintOrderDetails?.[0]?.OrderDetails?.map(
      (orderDetail) => orderDetail?.OrderId
    );

    const encrypted = encryptObject(orderIdsArray);

    const postData = {
      Url: encrypted,
      CreatedBy: UserId,
    };
    if (orderIdsArray) {
      const res = await dispatch(PublicQrCodepost(postData)).unwrap();
      const urlData = res?.data?.ReferenceNo;
      setUrlData(urlData);
    }
  };
  useEffect(() => {
    setExtra(
      GlobalExtraCharge?.reduce((accumulator, currentObject) => {
        return accumulator + currentObject.TotalAmt;
      }, 0)
    );
  }, [GlobalExtraCharge]);

  useEffect(() => {
    if (salesBillEdit) {
      dispatch(getPaymentOptions()).unwrap();
    }
  }, [salesBillEdit]);

  const customerNameOrMobile = MobileNoWhatsApp?.CustName?.trim()
    ? `Dear ${MobileNoWhatsApp?.CustName}`
    : `Dear ${MobileNoWhatsApp?.value}`;

  const documentUrl = `${MainHomeUrl}viewbill?code=${urlData}`;
  const encodedMessage = `${customerNameOrMobile},\n\n🙏 Thank you for being a valuable customer!\n\n🧾 To view your bill, please click the link below:\n${documentUrl}`;

  const isDisabled =
    (BookingType === 'Dine In' ||
      BookingTypeBoth ||
      CheckOrderType?.length > 0) &&
    !unpaidFlow &&
    OrderStatus;

  const formatAmount = (value) => {
    return allowDecimal
      ? parseFloat(value || 0).toFixed(2)
      : Math.round(value || 0);
  };

  const columns = [
    {
      title: 'Sl.No',
      key: 'sno',
      align: 'center',
      width: '100px',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{index + 1}</a>
      ),
    },
    {
      title: 'Table Name/Chair Name',
      dataIndex: 'TableName',
      key: 'TableName',
      width: '150px',
      onCell: (_, record, index) => {
        return {
          onClick: () => {
            Unpaidfun(record);
          },
        };
      },
    },
    {
      title: 'Order Id',
      dataIndex: 'OrderID',
      key: 'OrderID',
      width: '150px',
      align: 'right',
      onCell: (_, record, index) => {
        return {
          onClick: () => {
            Unpaidfun(record);
          },
        };
      },
    },
    {
      title: "Item's",
      dataIndex: 'ProductName',
      key: 'ProductName',
      width: '250px',
      onCell: (_, record, index) => {
        return {
          onClick: () => {
            Unpaidfun(record);
          },
        };
      },
    },
    {
      title: 'Amount',
      dataIndex: 'TotalAmount',
      key: 'TotalAmount',
      width: '150px',
      align: 'right',
      render: (text) => <span>{safeRound(text)}</span>,
      onCell: (_, record, index) => {
        return {
          onClick: () => {
            Unpaidfun(record);
          },
        };
      },
    },
  ];
  // useEffect(() => {
  //   let data = { compId: CompId, branchId: BranchId };
  //   dispatch(getCurrentOrderid(data)).unwrap();
  // }, []);
  const TableData = [];
  tabledata?.map((item) =>
    TableData.push({
      TableName: item.SalesTableLinkDetails?.map((item) =>
        item.ChairName == null ? item.TableName : item.ChairName
      )?.join(','),
      OrderID: extractLastNumberOrderId(item?.OrderId, item?.FYStatus),
      ProductName: item.productDetails
        ?.map(
          (item) =>
            item?.ProdName +
            '-' +
            (item?.Type != 'C' ? item?.OrderQty : '1 Combo')
        )
        ?.join(','),
      TotalAmount: item.NetAmount,
    })
  );

  console.log(
    BookingType,
    BookingTypeBoth,
    CheckOrderType,
    unpaidFlow,
    'ffffffffffff'
  );
  useEffect(() => {
    if (NavHoldData) {
      AddBookingDetails('Hold');
    }
  }, [NavHoldData]);
  useEffect(() => {
    if (AddBookingDetailsTrigger) {
      AddBookingDetails('TakeAway', true);
    }
  }, [AddBookingDetailsTrigger]);

  useEffect(() => {
    if (isMobile) {
      OtherServiceMobilePrint(
        OtherServicesPrintDetails,
        UpiId,
        'Booking',
        preferenceDatas
      );
    } else {
      Otherserviceprint();
    }
  }, [OtherServicesPrintDetails]);

  useEffect(() => {
    let hasAccess = false;

    if (UserType === 'Admin' || UserType === 'Super Admin') {
      hasAccess = true;
    } else if (UserType === 'Employee') {
      hasAccess = empData?.AddAccess === 'Y';
    } else if (UserType === 'Super Admin User') {
      hasAccess = SAAccessCommonMaster?.AddAccess === 'Y';
    }

    setaddnewAccess(!hasAccess);
  }, [empData, SAAccessCommonMaster, UserType]);

  useEffect(() => {
    if (selOption) {
      closePrintOption();
      setMobileNoWhatsApp(selOption);
    }
  }, [selOption]);

  useEffect(() => {
    const handleKeyPress = (event) => {
      if (!preferenceshortcutkey) return;

      if (event.key === 'F4' && isButtonActive() && !isF4Pressed.current) {
        isF4Pressed.current = true;
        // BranchFinancialStatus==='N'? financialYearError():
        handleButtonClick();
        setTimeout(() => {
          isF4Pressed.current = false; // Reset after a short delay
        }, 1000);
      }

      if (event.altKey && event.key === 's') {
        event.preventDefault();
        if (
          orderCardDetail?.length > 0 &&
          CheckBookingStatus !== 'Close' &&
          !addnewAccess &&
          !unpaidFlow &&
          !OrderStatus
        ) {
          SplitPaymentOpen();
        }
      }
    };

    window.addEventListener('keydown', handleKeyPress);
    return () => {
      window.removeEventListener('keydown', handleKeyPress);
    };
  }, [
    FirstPaymentclick,
    orderCardDetail,
    paybtnselected,
    OrderStatus,
    qrCode,
    SelectedUPIPayOption,
    TotalAmount,
    SelectedUpiOption,
    SelectedCardOption,
    BookingType,
    Holddata,
    CheckBookingStatus,
    addnewAccess,
    preferenceshortcutkey,
    unpaidFlow,
  ]);

  useEffect(() => {
    // setPaybtnnameselected(PaymentOptions?.[0]?.ModeName);
    // setPaybtnselected(PaymentOptions?.[0]?.ModeId);
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
    setQrCode(false);
  }, [PaymentOptions]);
  useEffect(() => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        paymentMethod: Paybtnnameselected,
        Paymentgateway: false,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
    dispatch(ChangeInitialPaymentName(Paybtnnameselected));
  }, [Paybtnnameselected]);
  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(() => {
    const fetchCreditCustomer = async () => {
      const selectedMode = payBtns?.find(
        (pay) => paybtnselected === pay?.ModeId
      )?.ModeName;

      if (
        selectedMode?.toLowerCase() === 'credit' &&
        (!UpinotSelected || !CardoptionnotSelected)
      ) {
        setCredit(true);
        try {
          const res = await dispatch(
            getCreditCustomer({
              CompId,
              AppId,
              BranchId,
              CustId: selOption?.CustId,
            })
          ).unwrap();

          if (res?.data?.statusCode === 1 && res?.data?.data?.length > 0) {
            setOverAllBal(res.data.data[0]?.OverAllBal ?? 0);
          } else {
            setOverAllBal(0);
          }
        } catch (error) {
          console.error('Credit fetch failed', error);
          setOverAllBal(0);
        }
      } else {
        setCredit(false);
        setOverAllBal(0);
      }
    };

    fetchCreditCustomer();
  }, [paybtnselected, selOption, payBtns]);

  useEffect(() => {
    if (orderCardDetail?.length == 0) {
      dispatch(changeunpaidflow(false));
      // dispatch(changePreviousOrderPayment([]));
      // dispatch(changePreviousOrderOfferDetail([]));
      // dispatch(changeBillEditingMode(false));
    }

    if (!preOrder) {
      const totalSum = orderCardDetail?.reduce(
        // (acc, card) => acc + parseFloat(card.OrderRate * card.OrderQty || 0),
        (acc, card) => acc + parseFloat(card.TotalAmt || 0),
        0
      );

      const extra = GlobalExtraCharge?.reduce(
        (acc, obj) => acc + (obj.TotalAmt || 0),
        0
      );

      let withComboSum = 0;
      const withComboOffer_CardDetail = orderCardDetail?.filter(
        (item) => item.Type === 'C'
      );
      if (withComboOffer_CardDetail?.length > 0) {
        withComboSum = formatAmount(
          withComboOffer_CardDetail.reduce(
            (acc, card) =>
              acc +
              parseFloat(card.OrderRate * card.OrderQty - card.TotalAmt || 0),
            0
          )
        );
      }

      let Total =
        extra === undefined
          ? totalSum - OverallOfferAmount
          : totalSum + extra - OverallOfferAmount;

      // Subtract OtherServiceTicketClaim?.totalTicketamount if present and > 0
      if (OtherServiceTicketClaim?.TotalAmt > 0) {
        if (Total - OtherServiceTicketClaim.TotalAmt > 0) {
          Total -= OtherServiceTicketClaim.TotalAmt;
        } else {
          dispatch(
            changeOtherServiceTicketClaim({
              TicketId: null,
              TotalAmt: 0,
              ParkingClaimed: false,
              ServiceCategory: null,
            })
          );
        }
      } else if (OtherServiceTicketClaim?.OtherType == 'Remove') {
        dispatch(
          changeOtherServiceTicketClaim({
            TicketId: null,
            TotalAmt: 0,
            ParkingClaimed: false,
            ServiceCategory: null,
          })
        );
      }

      const filteredPayments =
        previousOrderPayment?.filter(
          (p) =>
            p?.LastOrderTran === 'Y' &&
            p?.AfterAdjustment != null &&
            p?.AfterAdjustment !== '' &&
            p?.AfterAdjustment
        ) || [];

      const paymentsToUse =
        filteredPayments.length > 0
          ? filteredPayments
          : previousOrderPayment || [];

      const totalPreviouspayment = paymentsToUse?.reduce(
        (acc, payment) =>
          acc + parseFloat(payment.AfterAdjustment || payment.Amount || 0),
        0
      );

      const totalPreviousOfferAmount = previousOrderOfferDetails?.reduce(
        (acc, offer) => acc + parseFloat(offer.OfferAmount || 0),
        0
      );

      const previousNetAmount = totalPreviouspayment || 0;

      let withdiscTotal =
        Total -
        ((OverAllSales || 0) +
          (OverAllEstimate || 0) +
          (Discount > 0 ? Discount : 0));

      const currentOrderNetAmount = formatAmount(
        withdiscTotal >= 0
          ? (Number(withdiscTotal) + Number(globalTipAmount)).toFixed(2)
          : (Number(Total) + Number(globalTipAmount)).toFixed(2)
      );
      console.log(
        salesBillEdit
          ? currentOrderNetAmount > previousNetAmount
            ? currentOrderNetAmount - previousNetAmount
            : 0
          : currentOrderNetAmount,
        'totalPreviouspayment'
      );

      setTotalAmount(
        salesBillEdit
          ? currentOrderNetAmount > previousNetAmount
            ? currentOrderNetAmount - previousNetAmount
            : 0
          : currentOrderNetAmount
      );
      setCurrentOrderNetAmount(currentOrderNetAmount);
      setPreviousNetAmount(previousNetAmount);
      dispatch(
        changeSummeryTotalAmount(
          salesBillEdit
            ? currentOrderNetAmount > previousNetAmount
              ? currentOrderNetAmount - previousNetAmount
              : 0
            : currentOrderNetAmount
        )
      );
      dispatch(changeSummeryComboOfferAmount(withComboSum));
    } else {
      setTotalAmount(0);
      dispatch(changeSummeryTotalAmount(0));
      dispatch(changeSummeryComboOfferAmount(0));
    }
  }, [
    orderCardDetail,
    GlobalExtraCharge,
    OverAllSales,
    OverAllEstimate,
    globalTipAmount,
    OtherServiceTicketClaim,
    Discount,
  ]);
  useEffect(() => {
    if (
      orderCardDetail?.length === 1 &&
      orderCardDetail?.[0]?.OrderQty === 1 &&
      !SelCustId
    ) {
      closePrintOption();
      setPrintOrderDetails([]);
    }
  }, [orderCardDetail]);

  useEffect(() => {
    if (!PrintOrderDetails?.length) return;

    const selectedOptions = filteredSettingNames || [];
    const count = selectedOptions.length;

    if (count === 0) {
      handlePrintOrToken();
      return;
    }
    if (count === 1) {
      const option = selectedOptions[0];

      switch (option) {
        // case "whatsapp":
        //   handleWhatsAppClick();
        //   return;
        case 'whatsapp':
          if (!selOption && MobileNoWhatsApp?.value) {
            handleWhatsAppClick();
          } else {
            handlePrintOrToken();
          }
          return;

        case 'SMS':
          if (isMobile) handleSMSClick();
          else handlePrintOrToken();
          return;

        case 'Print':
          handlePrintOrToken();
          return;

        // case "Email":
        //   handleEmailClick();
        //   return;

        default:
          return;
      }
    }
    return;
  }, [PrintOrderDetails]);

  useEffect(() => {
    getPaymentOptionFeature();
    getBookingTypeId();
  }, []);

  useEffect(() => {
    getPaymentOptionFeature();
  }, [GlobaluseOptions]);

  useEffect(() => {
    getBookingTypeId();
  }, [BookingType]);

  useEffect(() => {
    if (SelCustId) {
      if (UserType !== 'Admin' || UserType !== 'Employee') {
        setPayBtns(PaymentOptions);
      } else {
        let data1 = PaymentOptions?.[1] ? PaymentOptions?.[1] : null;
        let data = [...PaymentOptions];
        data?.splice(1, 1);
        data1 && data?.push(data1);
        setPayBtns(data);
      }
    } else {
      const withoutCustomer = PaymentOptions?.filter?.(
        (item) => item?.ModeName?.toLowerCase() !== 'credit'
      );
      setPayBtns(withoutCustomer);
    }
  }, [PaymentUpiOptions, PaymentOptions, SelCustId]);

  useEffect(() => {
    if (salesBillEdit) {
      if (SelCustId) {
        setRefundPayBtns(AllPaymentOptions);
        setRefundPaySelected(AllPaymentOptions?.[0]?.ConfigId);
        setRefundPaySelectedName(AllPaymentOptions?.[0]?.ConfigName);
      } else {
        const withoutCustomer = AllPaymentOptions?.filter?.(
          (item) => item?.ConfigName?.toLowerCase() !== 'credit'
        );
        setRefundPaySelected(withoutCustomer?.[0]?.ConfigId);
        setRefundPaySelectedName(withoutCustomer?.[0]?.ConfigName);
        setRefundPayBtns(withoutCustomer);
      }
    }
  }, [AllPaymentOptions, SelCustId, salesBillEdit]);

  useEffect(() => {
    if (
      (BookingType === 'Dine In' ||
        BookingTypeBoth ||
        CheckOrderType?.length > 0) &&
      !unpaidFlow &&
      SelectedTableDetails?.length !== 0
    ) {
      setOrderStatus(true);
    } else {
      setOrderStatus(false);
    }
  }, [BookingTypeBoth, BookingType, unpaidFlow]);

  useEffect(() => {
    if (UserType === 'Employee') {
      fetchApi();
    }
  }, [UserType]);

  useEffect(() => {
    const getPrintData = async () => {
      try {
        const data = {
          AppId,
          CompId,
          BranchId,
          OrderId: businessUPIOrderId,
        };

        const res = await dispatch(VerifiedPaymentDtl(data)).unwrap();

        if (res?.data?.statusCode === 1 && res?.data?.data?.length > 0) {
          const orderData = [{ OrderDetails: res.data.data }];

          // Reset states first
          setBusinessUPIOrderId(null);
          setBusinessUPI(false);
          setPaymentSuccess(false);
          // Then set new data and trigger side effects
          setPrintOrderDetails(orderData);
          CustomerDisplay();
          ClearAllGlobalStateDatas();
          filteredSettingNames?.includes('whatsapp') &&
            MobileNoWhatsApp?.value &&
            handleURL(orderData);
        }
      } catch (error) {
        console.error('Failed to fetch print data:', error);
        // Reset states even on error
        setBusinessUPI(false);
        setPaymentSuccess(false);
      }
    };

    if (paymentSucess && businessUPIOrderId) {
      const timer = setTimeout(() => {
        getPrintData();
      }, 3000);

      return () => clearTimeout(timer);
    }
  }, [paymentSucess, businessUPIOrderId, AppId, CompId, BranchId, dispatch]);

  const isButtonActive = () => {
    const baseCondition =
      FirstPaymentclick === false &&
      orderCardDetail?.length > 0 &&
      paybtnselected &&
      CheckBookingStatus !== 'Close';
    let accessCondition = true;
    if (UserType === 'Employee') {
      accessCondition = empData?.AddAccess === 'Y';
    } else if (UserType === 'Super Admin User') {
      accessCondition = SAAccessCommonMaster?.AddAccess === 'Y';
    }
    return baseCondition && accessCondition;
  };

  const fetchApi = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      EmpId: UserId,
    };
    let response = await dispatch(getEmpAccess(data)).unwrap();
    let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
      (item) => item.ConfigName === 'Sales'
    );
    setEmpData(datas?.[0]);
  };

  const handleButtonClick = () => {
    if (qrCode && SelectedUPIPayOption === 'Default' && UpiQRPreference) {
      UpiPayment();
    } else if (
      salesBillEdit &&
      currentOrderNetAmount < previousNetAmount &&
      !refundPaySelected
    ) {
      setMessageType('warning');
      setMessageData('Please Select Refund Payment Method');
      return;
    } else {
      OrderStatus
        ? AddBookingDetails('Dine-In', false)
        : AddBookingDetails(BookingType, true);
    }
  };

  const Otherserviceprint = async () => {
    if (OtherServicesPrintDetails?.length > 0) {
      const style = await PrintStyleFunction('OtherServices1');
      const stylesMap = {
        OtherServices1: 'OtherServices1',
      };

      const selectedStyle = stylesMap['OtherServices1'];

      console.log(selectedStyle, 'selectedStyle');

      await printDiv('OtherServices1', style); // Use unique IDs for each print

      setOtherServicesPrintDetails([]);
      closePrintOption();
    }
  };

  const handleCreditCustomer = (type) => {
    setCreditCustomer(false);
    if (type == 'Submit') {
      Booking(BookingType, true);
    }
    if (type == 'Cancel') {
      // setPaybtnselected(PaymentOptions?.[0]?.ModeId);
      // setPaybtnnameselected(PaymentOptions?.[0]?.ModeName);
      setPaybtnnameselected(PaymentOptionsModeName);
      setPaybtnselected(PaymentOptionsModeId);
    }
    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 getBookingTypeId = async () => {
    let tempconfigdata = await dispatch(
      getConfigType({ TypeName: 'Booking Type' })
    ).unwrap();
    if (tempconfigdata?.data?.statusCode == 1) {
      setConfigDataList(tempconfigdata?.data?.data);
      let configdata = tempconfigdata?.data?.data;
      let checkName = BookingTypeBoth ? 'DineIn,TakeAway' : BookingType;
      let filterconfigdata = configdata?.find(
        (a) => a?.ConfigName === checkName
      );
      setSelectedBookingType(filterconfigdata?.ConfigId);
    }
  };

  const UpiPayment = () => {
    if (OrderStatus) {
      AddBookingDetails('Dine-In', false);
    } else {
      if (
        SelectedUpiOption &&
        orderCardDetail?.length > 0 &&
        TotalAmount == 0
      ) {
        Upimodel('Submit');
      } else if (SelectedUpiOption) {
        if (orderCardDetail?.length > 0) setUpiOpen(true);
        const customerDisplayWindow = getCustomerDisplayWindow();
        if (customerDisplayWindow && !customerDisplayWindow.closed) {
          const updatedData = {
            OrderTotalAmount: TotalAmount,
          };
          customerDisplayWindow.postMessage(updatedData, '*');
        } else {
          console.error(
            'Customer display window is not available or has been closed.'
          );
        }
      } else {
        setUpinotSelected(true);
        setMessageType('error');
        setMessageData('Please Select Upi Option');
      }
    }
  };

  const Upimodel = (type) => {
    setUpiOpen(false);

    if (type == 'Submit') {
      AddBookingDetails(BookingType, true);
    }
    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 AddBookingDetails = async (value, pay) => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    const OnUpiSelected = PaymentOptions?.find(
      (item) => item.ModeId === paybtnselected
    );

    if (
      OnUpiSelected?.ModeName?.toLowerCase() === 'upi' &&
      (SelectedUPIPayOption?.toLowerCase() === 'default' ||
        SelectedUPIPayOption?.toLowerCase() === 'business')
    ) {
      SetSuccess(false);
      setTimeout(function () {
        SetSuccess(true);
        // Add your state change code here
        // For example:
        // setNewState(newValue);
      }, 3000);
      if (SelectedUpiOption) {
        Booking(value, pay);
      } else {
        setUpinotSelected(true);
        setMessageType('error');
        setMessageData('Please Select Upi Option');
      }
    } else if (
      OnUpiSelected?.ModeName?.toLowerCase() === 'card' &&
      PaymentgatewayCard?.length > 0 &&
      PaymentDeviceCard?.length > 0
    ) {
      if (SelectedCardOption) {
        if (SelectedCardOption?.toLowerCase() === 'pg') {
          if (customerDisplayWindow && !customerDisplayWindow.closed) {
            if (SelCustId) {
              Booking(value, pay);
            } else {
              setMessageType('error');
              setMessageData('Please Select Customer');
            }
          } else {
            setMessageType('error');
            setMessageData('Please Set the customer display');
          }
        } else {
          Booking(value, pay);
        }
      } else {
        setCardoptionnotSelected(true);
        setMessageType('error');
        setMessageData('Please Select Card Option');
      }
    } else if (OnUpiSelected?.ModeName?.toLowerCase() === 'credit') {
      if (!SelCustId) {
        setMessageType('error');
        setMessageData('Please Select Customer');
      } else {
        if (TotalAmount <= 0) {
          return;
        }
        setCreditCustomer(true);
        const customerDisplayWindow = getCustomerDisplayWindow();
        if (customerDisplayWindow && !customerDisplayWindow.closed) {
          const updatedData = {
            OrderTotalAmount: TotalAmount,
          };
          customerDisplayWindow.postMessage(updatedData, '*');
        } else {
          console.error(
            'Customer display window is not available or has been closed.'
          );
        }
      }
    } else if (
      OnUpiSelected?.ModeName?.toLowerCase() === 'upi' &&
      SelectedUPIPayOption?.toLowerCase() === 'pg'
    ) {
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        if (SelCustId) {
          Booking(value, pay);
        } else {
          setMessageType('error');
          setMessageData('Please Select Customer');
        }
      } else {
        setMessageType('error');
        setMessageData('Please Set the customer display');
      }
    } else if (
      OnUpiSelected?.ModeName?.toLowerCase() === 'card' &&
      SelectedCardOption?.toLowerCase() === 'pg'
    ) {
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        if (SelCustId) {
          Booking(value, pay);
        } else {
          setMessageType('error');
          setMessageData('Please Select Customer');
        }
      } else {
        setMessageType('error');
        setMessageData('Please Set the customer display');
      }
    } else {
      Booking(value, pay);
    }
  };

  const Booking = async (value, pay) => {
    const TakAwayId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'TakeAway'
    )?.ConfigId;
    const DineinId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'Dine In'
    )?.ConfigId;

    setFirstPaymentclick(true);
    let temporderdetail = orderCardDetail?.map((a) => ({
      ProdId: a.ProdId,
      Type: a.Type,
      OrderQty: a.OrderQty,
      OrderRate: a.OrderRate,
      // TotalAmt: a.OrderQty * a.OrderRate,
      TotalAmt: a.TotalAmt,
      TaxAmt: a.TaxAmt,
      RefundQty: 0,
      InwardDtlId: a.InwardDtlId,
      TaxId: a.TaxId,
      ProdNameQty:
        UomPrint?.SettingValue === 'N'
          ? `${a.ProdName} ${a.UomName?.toLowerCase() === 'half' ? '(Half)' : ''}`
          : `${a.ProdName} ${a.Size} ${a.UomName}`,
      OrderStatus: 'O',
      OrderType:
        BookingType === 'Dine In' ||
          BookingTypeBoth ||
          Estimation?.SettingValue == 'N'
          ? 'S'
          : GlobEstBooking === 'OvrAllEst'
            ? 'E'
            : GlobEstBooking === 'ParEst'
              ? GlobProdwisedata?.includes(
                a.InwardDtlId + ' ' + a?.BookingTypeName
              )
                ? 'E'
                : 'S'
              : 'S',
      SinglePc: a.SinglePc,
      BookingType: a.BookingTypeName === 'Dine In' ? DineinId : TakAwayId,
      OfferValue: a?.Type === 'C' ? a?.OfferValue : a.Offer,
      OfferAmt: a?.Type === 'C' ? a?.TotalAmt : a.Offer,
      OfferType: a?.Type === 'C' ? a?.OfferType : '',
      OfferMode: a?.OfferMode,
      OfferMessage: a?.OfferMessage,
      CounterName: a?.TokenAvailable === 'Y' ? a?.CounterName : null,
      ProductIdentifierDtls: a.ProductIdentifierDtls,
      ModelNumber: a.ModelNumber,
      BatchRef: a.BatchRef,
      PackageDtl: a.PackageDtl,
      SetCount: a.SetCount,
      ...(a?.DiscountValue && { DiscountValue: a.DiscountValue }),
      ...(a?.DiscountType && { DiscountType: a.DiscountType }),
      ...(a?.DiscountAmt && { DiscountAmt: a.DiscountAmt }),
      BookingDate: AvailableDate
        ? Object.keys(ReportholdData)?.length > 0
          ? a?.BookingDate
          : a.BookedDate
        : null,
      ScaleType: a.ScaleType,
    }));
    const NotSlectedTypeFind = temporderdetail?.find(
      (a) => a?.BookingType != SelectedBookingType
    );
    const { totalwithouttax, totaltax } = orderCardDetail?.reduce(
      (totals, card) => {
        totals.totalwithouttax += parseFloat(card.WithoutTaxRate || 0);
        totals.totaltax += parseFloat(card.TaxAmt || 0);
        return totals;
      },
      { totalwithouttax: 0, totaltax: 0 }
    ) || { totalwithouttax: 0, totaltax: 0 };
    let updatedOfferDetails = offerAppliedProducts;
    if (GlobEstBooking !== 'Sales') {
      updatedOfferDetails = offerAppliedProducts?.filter(
        (item) =>
          !(
            item.TableName === 'LoyaltyPoints' &&
            item.TableUniqueName === 'UniqueId' &&
            item.Type === 'A'
          )
      );
    }
    let temppostdata = {
      SalesMode: RetailWSSalesType || 'R',
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      OrderDate: Custombill ? invoiceDate : null,
      CustomOrderNo: Custombill ? CurrentOrderId : null,
      OrderType:
        Object.keys(ReportholdData)?.length > 0
          ? ReportholdData?.OrderType
          : 'S',
      CustSuppId: SelCustId ? SelCustId : null,
      Reference: 'test',
      BookingType:
        NotSlectedTypeFind && !BookingTypeBoth
          ? NotSlectedTypeFind?.BookingType
          : SelectedBookingType,
      ServiceProvider: 0,
      ActiveStatus: 'A',
      CreatedBy: UserId,
      AddlInfo: 'test',
      BillAmount: totalwithouttax.toFixed(2),
      OverallDiscSales: OverAllSales > 0 ? OverAllSales : 0,
      OverallDiscEst: OverAllEstimate > 0 ? OverAllEstimate : 0,
      TaxAmount: totaltax.toFixed(2),
      VatAmount: 0,
      NetAmount: Math.round(TotalAmount),
      PaymentType:
        Paybtnnameselected?.toLowerCase() === 'upi'
          ? SelectedUPIPayOption?.toLowerCase() === 'pd'
            ? PaymentDeviceUPI?.[0]?.ModeId
            : SelectedUPIPayOption?.toLowerCase() === 'pg'
              ? PaymentgatewayUPI?.[0]?.ModeId
              : paybtnselected
          : paybtnselected
            ? paybtnselected
            : null,
      GivenAmt: 0,
      BalGiven: 0,
      BookingMedia: 'DW',
      RefundAmount: 0,
      ServiceCategory: OtherServiceTicketClaim?.ServiceCategory || null,
      OtherServiceTicketId: OtherServiceTicketClaim?.TicketId || null,
      OtherServiceTicketAmount: OtherServiceTicketClaim?.TotalAmt || null,
      PaymentStatus:
        Paybtnnameselected?.toLowerCase() === 'cash'
          ? 'S'
          : Paybtnnameselected?.toLowerCase() === 'credit'
            ? 'S'
            : Paybtnnameselected?.toLowerCase() === 'upi' &&
              SelectedUPIPayOption?.toLowerCase() === 'default'
              ? 'S'
              : 'P',
      OrderDtlDetails:
        Object.keys(ReportholdData)?.length > 0
          ? ProductSummary(temporderdetail)
          : temporderdetail,
      // (BookingType === "Dine In" || BookingTypeBoth)
      ExtraChargeDetails:
        GlobalExtraCharge?.length > 0
          ? extrachargesbookingtype(GlobalExtraCharge)
          : null,
      SalesTableLinkDetails:
        SelectedTableDetails?.length > 0
          ? globalTipAmount === 0
            ? SelectedTableDetails
            : SelectedTableDetails?.map((item) => ({
              ...item,
              TipsAmount: globalTipAmount,
            }))
          : null,

      SalesPaymentType: 'normal',
      PaymentDetail: [
        {
          PaymentType:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? refundPaySelected
              : Paybtnnameselected?.toLowerCase() === 'upi'
                ? SelectedUPIPayOption?.toLowerCase() === 'pd'
                  ? PaymentDeviceUPI?.[0]?.ModeId
                  : SelectedUPIPayOption?.toLowerCase() === 'pg'
                    ? PaymentgatewayUPI?.[0]?.ModeId
                    : SelectedUPIPayOption?.toLowerCase() === 'business'
                      ? BusinessPayOption?.find(
                        (busupi) => busupi?.ModeId === UpiId
                      )?.ModeId
                      : paybtnselected
                : paybtnselected
                  ? paybtnselected
                  : null,
          Amount:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? previousNetAmount - currentOrderNetAmount
              : Math.round(TotalAmount),
          MerchantId:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? null
              : Paybtnnameselected?.toLowerCase() === 'upi' &&
                SelectedUPIPayOption?.toLowerCase() === 'business'
                ? BusinessPayOption?.find((busupi) => busupi?.ModeId === UpiId)
                  ?.MerchantId
                : null,
          PaymentOptionType:
            salesBillEdit &&
              currentOrderNetAmount < previousNetAmount &&
              (refundPaySelectedName?.toLowerCase() === 'cash' ||
                refundPaySelectedName?.toLowerCase() === 'credit')
              ? 'PC'
              : Paybtnnameselected?.toLowerCase() === 'cash'
                ? 'PC'
                : Paybtnnameselected?.toLowerCase() === 'credit'
                  ? 'PC'
                  : Paybtnnameselected?.toLowerCase() === 'card'
                    ? SelectedCardOption
                    : Paybtnnameselected?.toLowerCase() === 'upi'
                      ? SelectedUPIPayOption?.toLowerCase() === 'default'
                        ? 'PC'
                        : SelectedUPIPayOption?.toLowerCase() === 'business'
                          ? 'BU'
                          : SelectedUPIPayOption
                      : null,
          ModeOfPayment:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? null
              : SelectedUPIPayOption?.toLowerCase() === 'default'
                ? PaymentUpiOptions?.find((upipay) => upipay?.UPIId === UpiId)
                  ?.UPIDetailId
                : SelectedUPIPayOption?.toLowerCase() === 'business'
                  ? BusinessPayOption?.find(
                    (busupi) => busupi?.ModeId === UpiId
                  )?.MerchantUPIId
                  : null,
          AccountDtl:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? []
              : Paybtnnameselected?.toLowerCase() === 'upi' &&
                SelectedUPIPayOption?.toLowerCase() === 'default'
                ? useOptions?.[0]?.PaymentDetails?.Payatthecounter?.find(
                  (upipay) => upipay?.UPIId === UpiId
                )
                : (Paybtnnameselected?.toLowerCase() === 'upi' &&
                  SelectedUPIPayOption?.toLowerCase() === 'pd') ||
                  (Paybtnnameselected?.toLowerCase() === 'card' &&
                    SelectedCardOption?.toLowerCase() === 'pd')
                  ? useOptions?.[0]?.PaymentDetails?.PaymentDevice
                  : (Paybtnnameselected?.toLowerCase() === 'upi' &&
                    SelectedUPIPayOption?.toLowerCase() === 'pg') ||
                    (Paybtnnameselected?.toLowerCase() === 'card' &&
                      SelectedCardOption?.toLowerCase() === 'pg')
                    ? useOptions?.[0]?.PaymentDetails?.PaymentGateway
                    : [],
          PaymentStatus:
            salesBillEdit && currentOrderNetAmount < previousNetAmount
              ? 'S'
              : Paybtnnameselected?.toLowerCase() === 'cash'
                ? 'S'
                : Paybtnnameselected?.toLowerCase() === 'credit'
                  ? 'S'
                  : Paybtnnameselected?.toLowerCase() === 'upi' &&
                    SelectedUPIPayOption?.toLowerCase() === 'default'
                    ? 'S'
                    : 'P',
          Debit:
            salesBillEdit &&
              currentOrderNetAmount < previousNetAmount &&
              refundPaySelectedName?.toLowerCase() === 'credit'
              ? Math.round(previousNetAmount - currentOrderNetAmount)
              : 0,
          Credit: salesBillEdit
            ? currentOrderNetAmount > previousNetAmount &&
              Paybtnnameselected?.toLowerCase() === 'credit'
              ? Math.round(TotalAmount)
              : 0
            : Paybtnnameselected?.toLowerCase() === 'credit'
              ? Math.round(TotalAmount)
              : 0,
        },
      ],
      OrderOfferDetail: updatedOfferDetails,

      RefDetails: [
        {
          FreeProdList: FreeProdList,
          OfferAppliedProductList: offerAppliedProducts,
        },
      ],
    };
    let PostData = temppostdata;
    if (value === 'Dine-In') {
      PostData['PaymentStatus'] = pay ? 'S' : 'P';
      PostData['PaymentDetail'] = !pay && [];
      PostData['PaymentType'] = !pay && '';
    } else if (value === 'Hold') {
      ((PostData['PaymentStatus'] = pay ? 'S' : 'P'),
        (PostData['PaymentDetail'] = !pay && []));
      PostData['PaymentType'] = !pay && '';
      PostData['ActiveStatus'] = pay ? 'A' : 'D';
    } else if (value === 'Unpaid') {
      PostData['PaymentStatus'] = pay ? 'S' : 'P';
      PostData['PaymentDetail'] = !pay && [];
      PostData['PaymentType'] = !pay && '';
      PostData['PrintType'] = 'Y';
    }
    // if(sportsAppPreference){
    //         let singlepcProd = orderCardDetail?.filter((item) => item.SinglePc === "Y");
    //         console.log("singlepcProd",singlepcProd);
    //     if (singlepcProd?.length > 0) {
    //             const ProductList = singlepcProd.map((item) => ({
    //               ProdId: item?.ProdId,
    //               InwardDtlId: item?.InwardDtlId,
    //               SinglePc: item?.SinglePc,
    //               Qty: item?.OrderQty,
    //               Date: item?.BookedDate,
    //             }));

    //             const BlockPostdata = {
    //               CompId: CompId,
    //               BranchId: BranchId,
    //               AppId: AppId,
    //               ProductList: ProductList,
    //               Status: "UnBlock",
    //               CreatedBy: UserId,
    //             };

    //             await dispatch(PostBlockSlots(BlockPostdata)).unwrap();

    //         }
    // }
    Object.keys(ReportholdData)?.length > 0
      ? OrderType === 'Failed'
        ? PutFailedPayment(PostData, value, pay)
        : PutBooking(PostData, value, pay)
      : !OtherServicesglobal
        ? PostBooking(PostData, value)
        : OtherServicePostBooking(PostData, value);
    // getstockbadge();
    // Combocarddata();
  };

  const PostBooking = async (PostData, value) => {
    let response = await dispatch(PostBookingData(PostData)).unwrap();
    if (response?.data?.statusCode == 1) {
      let Paymentdevicefilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'pd' &&
          item?.PaymentStatus === 'P'
      );
      let PaymentGatewayfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'pg' &&
          item?.PaymentStatus === 'P'
      );
      let businessUPIfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'bu' &&
          item?.PaymentStatus === 'P'
      );
      let PayatCounterfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) => item?.PaymentOptionType?.toLowerCase() === 'pc'
      );
      if (
        PayatCounterfilter?.length === 1 ||
        response?.data?.PaymentOrderDtl?.length === 0
      ) {
        setMessageType('success');
        setMessageData(
          response?.data?.response +
          ' ' +
          (response?.data?.OrderDetails?.length > 0
            ? response?.data?.OrderId &&
            extractLastNumberOrderId(
              response?.data?.OrderId,
              response?.data?.OrderDetails?.[0]?.FYStatus
            )
            : '')
        );
        response?.data?.OrderDetails?.length > 0 &&
          setPrintOrderDetails([response?.data]);
        CustomerDisplay(value);
        ClearAllGlobalStateDatas(value);
        filteredSettingNames?.includes('whatsapp') &&
          MobileNoWhatsApp?.value &&
          handleURL([response?.data]);
      }

      if (Paymentdevicefilter?.length === 1) {
        if (
          Paymentdevicefilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pd'
        ) {
          PaymentDeviceFlow(Paymentdevicefilter, value);
        }
      } else {
        console.log('more pd data');
      }
      if (PaymentGatewayfilter?.length === 1) {
        if (
          PaymentGatewayfilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pg'
        ) {
          await dispatch(changePaymentloader(true));
          const customerDisplayWindow = getCustomerDisplayWindow();
          if (customerDisplayWindow && !customerDisplayWindow.closed) {
            const updatedData = {
              OrderBookingId: PaymentGatewayfilter?.[0]?.OrderId,
              Paymentgateway: true,
              OrderPaymentId: PaymentGatewayfilter?.[0]?.PaymentOrderId,
              OrderTotalAmount: PaymentGatewayfilter?.[0]?.Amount,
            };
            customerDisplayWindow.postMessage(updatedData, '*');
          } else {
            console.error(
              'Customer display window is not available or has been closed.'
            );
          }
          const checkPaymentStatus = async () => {
            const intervalId = setInterval(async () => {
              try {
                let getpaymentgatewaydetail = await dispatch(
                  PaymentGatewayGetdetail(PaymentGatewayfilter?.[0]?.OrderId)
                ).unwrap();

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

                  if (paymentdataget === 'S') {
                    setMessageType('success');
                    setMessageData('Payment Success');
                    await dispatch(changePaymentloader(false));
                    if (
                      getpaymentgatewaydetail?.data?.OrderDetails?.length > 0
                    ) {
                      setPrintOrderDetails([getpaymentgatewaydetail?.data]);
                      CustomerDisplay(value);
                      ClearAllGlobalStateDatas(value);
                    }

                    clearInterval(intervalId); // Stop the loop when payment is successful
                  } else if (paymentdataget === 'F') {
                    setMessageType('error');
                    setMessageData('Payment Failed');
                    setFirstPaymentclick(false);
                    await dispatch(changePaymentloader(false));
                    // setPaybtnselected(PaymentOptions?.[0]?.ModeId);
                    // setPaybtnnameselected(PaymentOptions?.[0]?.ModeName);
                    setPaybtnnameselected(PaymentOptionsModeName);
                    setPaybtnselected(PaymentOptionsModeId);
                    clearInterval(intervalId); // Stop the loop when payment fails
                    CustomerDisplayRemovedData();
                    ClearAllGlobalStateDatas(value);
                  }
                }
              } 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();
        }
      } else {
        console.log('more pg data');
      }
      if (businessUPIfilter?.length === 1) {
        businessUPIFlow(
          businessUPIfilter,
          response?.data?.OrderId,
          response?.data?.PaymentPageLink
        );
      }
      dispatch(triggerCustomerRefresh());
    } else {
      setMessageType('error');
      setMessageData(response?.data?.response);
      setFirstPaymentclick(false);
      // clearInvoiceDate
      clearInvoiceDate();
      dispatch(changeCurrentOrderId(null));
    }
  };

  const PutBooking = async (putdatas, value, pay) => {
    let putdata = putdatas;
    putdata['OrderId'] = ReportholdData?.OrderId;
    putdata['SalesId'] = ReportholdData?.SalesId;
    putdata['UpdatedBy'] = UserId;
    if (value === 'Dine-In') {
      putdata['PaymentStatus'] = pay ? 'S' : 'P';
      putdata['PaymentDetail'] = !pay && [];
      putdata['PaymentType'] = !pay && '';
    } else if (value === 'Hold') {
      ((putdata['PaymentStatus'] = pay ? 'S' : 'P'),
        (putdata['PaymentDetail'] = !pay && []));
      putdata['PaymentType'] = !pay && '';
      putdata['ActiveStatus'] = pay ? 'A' : 'D';
    } else if (value === 'Unpaid') {
      putdata['PaymentStatus'] = pay ? 'S' : 'P';
      putdata['PaymentDetail'] = !pay && [];
      putdata['PaymentType'] = !pay && '';
      putdata['PrintType'] = 'Y';
    }
    let response = null;
    if (salesBillEdit) {
      response = await dispatch(putSalesBillEdit(putdata)).unwrap();
    } else {
      response = await dispatch(PutBookingData(putdata)).unwrap();
    }
    if (value !== 'Unpaid') {
      if (response?.data?.statusCode == 1) {
        let Paymentdevicefilter = response?.data?.PaymentOrderDtl?.filter(
          (item) =>
            item?.PaymentOptionType?.toLowerCase() === 'pd' &&
            item?.PaymentStatus === 'P'
        );
        let PaymentGatewayfilter = response?.data?.PaymentOrderDtl?.filter(
          (item) =>
            item?.PaymentOptionType?.toLowerCase() === 'pg' &&
            item?.PaymentStatus === 'P'
        );
        let PayatCounterfilter = response?.data?.PaymentOrderDtl?.filter(
          (item) => item?.PaymentOptionType?.toLowerCase() === 'pc'
        );
        if (
          PayatCounterfilter?.length === 1 ||
          response?.data?.PaymentOrderDtl?.length === 0
        ) {
          setMessageType('success');
          setMessageData(
            response?.data?.response +
            ' ' +
            (response?.data?.OrderDetails?.length > 0
              ? response?.data?.OrderId &&
              extractLastNumberOrderId(
                response?.data?.OrderId,
                response?.data?.OrderDetails?.[0]?.FYStatus
              )
              : '')
          );
          response?.data?.OrderDetails?.length > 0 &&
            setPrintOrderDetails([response?.data]);
          CustomerDisplay(value);
          ClearAllGlobalStateDatas(value);
        }
        if (Paymentdevicefilter?.length === 1) {
          if (
            Paymentdevicefilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pd'
          ) {
            PaymentDeviceFlow(Paymentdevicefilter, value);
          }
        } else {
          console.log('more pd data');
        }
        if (PaymentGatewayfilter?.length === 1) {
          PaymentGatewayFlow(PaymentGatewayfilter);
        } else {
          if (response?.data?.OrderDetails?.length > 0) {
            setPrintOrderDetails([response?.data]);
          }

          ClearAllGlobalStateDatas();
          console.log('more pg data');
        }
      } else {
        // clearInvoiceDate
        clearInvoiceDate();
        dispatch(changeCurrentOrderId(null));
      }
    } else {
      setPrintOrderDetails([response?.data]);
      await dispatch(changeOrderCardDetails([]));
      await dispatch(changeReorderHoldDetails({}));
      await dispatch(changeReorderProductDetails([]));

      setFirstPaymentclick(false);
      if (defaultBookingType === 'Both') {
        await dispatch(changeBookingType('TakeAway'));
      }
      await dispatch(changeSelectTable([]));
      await dispatch(changeSelectChair([]));
      getUnpaiddatas();
    }
  };

  const PutFailedPayment = async (PayData, value, pay) => {
    let tempsplitdata = {
      CompId: PayData?.CompId,
      BranchId: PayData?.BranchId,
      AppId: PayData?.AppId,
      CustSuppId: PayData?.SelCustId ? SelCustId : null,
      UpdatedBy: UserId,
      OrderId: ReportholdData?.OrderId,
      PaymentType: PayData?.PaymentDetail?.[0]?.PaymentType,
      Amount: FailedTotalAmt,
      PaymentOptionType: PayData?.PaymentDetail?.[0]?.PaymentOptionType,
      ModeOfPayment: PayData?.PaymentDetail?.[0]?.ModeOfPayment,
      AccountDtl: PayData?.PaymentDetail?.[0]?.AccountDtl,
      PaymentStatus: PayData?.PaymentDetail?.[0]?.PaymentStatus,
      Debit: PayData?.PaymentDetail?.[0]?.Debit,
      Credit: PayData?.PaymentDetail?.[0]?.Credit,
    };

    let response = await dispatch(
      putSplitpaymentStatus(tempsplitdata)
    ).unwrap();
    if (response?.data?.statusCode == 1) {
      let Paymentdevicefilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'pd' &&
          item?.PaymentStatus === 'P'
      );
      let PaymentGatewayfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'pg' &&
          item?.PaymentStatus === 'P'
      );
      let PayatCounterfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'pc' &&
          item?.PaymentType === PayData?.PaymentDetail?.[0]?.PaymentType
      );
      if (
        PayatCounterfilter?.length > 0 ||
        response?.data?.PaymentOrderDtl?.length === 0
      ) {
        setMessageType('success');

        // setSplitSelPayMode({...SplitSelPayMode,...{[`PaymentStatus-${i}`]:"S"}})

        const customerDisplayWindow = getCustomerDisplayWindow();
        if (customerDisplayWindow && !customerDisplayWindow.closed) {
          const updatedData = {
            upi: null,
          };
          customerDisplayWindow.postMessage(updatedData, '*');
        } else {
          console.error(
            'Customer display window is not available or has been closed.'
          );
        }
        setMessageData(
          response?.data?.response +
          ' ' +
          (response?.data?.OrderDetails?.length > 0
            ? response?.data?.OrderId &&
            extractLastNumberOrderId(
              response?.data?.OrderId,
              response?.data?.OrderDetails?.[0]?.FYStatus
            )
            : '')
        );
        if (response?.data?.OrderDetails?.length > 0) {
          setPrintOrderDetails([response?.data]);
          CustomerDisplay();
          ClearAllGlobalStateDatas();
        }
      }
      if (Paymentdevicefilter?.length === 1) {
        if (
          Paymentdevicefilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pd'
        ) {
          PaymentDeviceFlow(Paymentdevicefilter, value);
        }
      }

      if (PaymentGatewayfilter?.length === 1) {
        if (
          PaymentGatewayfilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pg'
        ) {
          PaymentGatewayFlow(PaymentGatewayfilter, value);
        }
      }
    }
  };

  const handleSalesBillEdit = async (putdatas, value, pay) => {
    console.log(putdatas, value, pay, 'handleSalesBillEdit');
  };

  const OtherServicePostBooking = async (PostData, value) => {
    console.log(PostData, value, 'PostData, value');

    let postdata = {
      AppId: AppId,
      CompId: CompId,
      BranchId: BranchId,
      BillAmount: PostData?.BillAmount,
      TaxAmount: PostData?.TaxAmount,
      NetAmount: PostData?.NetAmount,
      OtherServicesTicketDetails: orderCardDetail.map((item) => ({
        ServiceId: item.ServiceId,
        ServiceCategory: item.ServiceCategory,
        VehicleNumber: item.VehicleNo || '',
        Qty: item.OrderQty,
        Rate: item.Rate,
        TaxAmount: item.TaxAmt,
        TotalAmount: item.TotalAmt,
      })),
      PaymentDetail: PostData?.PaymentDetail,
      CreatedBy: UserId,
    };

    let Response = await dispatch(PostOtherServices(postdata)).unwrap();

    if (Response?.data?.statusCode == 1) {
      setMessageType('success');
      setMessageData(Response?.data?.response);
      ClearAllGlobalStateDatas(value);
      setOtherServicesPrintDetails([
        Response?.data?.OtherServicesTicketDetails?.[0],
      ]);
    }

    console.log(postdata, 'PostdataPostdataPostdata');
  };

  const getstockbadge = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      ...(AvailableDate && selectedDate
        ? {
          fromDate: selectedDate?.[0],
          toDate: selectedDate?.[1],
        }
        : {}),
    };

    await dispatch(getSelectedFavItems(data)).unwrap();

    let data1 = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      ProdSubCat: ProdSubCat,
      ...(AvailableDate && selectedDate
        ? {
          fromDate: selectedDate?.[0],
          toDate: selectedDate?.[1],
        }
        : {}),
    };

    let data2 = {
      compId: CompId,
      branchId: BranchId,
      appId: AppId,
      prodCat: prodCat,
      ...(AvailableDate && selectedDate
        ? {
          fromDate: selectedDate?.[0],
          toDate: selectedDate?.[1],
        }
        : {}),
    };

    if (
      templateData?.BookingLayout?.[1]?.some(
        (item) => item?.OptionName === 'SubCategory'
      ) &&
      ProdSubCat
    ) {
      await dispatch(getLayoutproductCard(data1)).unwrap();
    } else if (
      !templateData?.BookingLayout?.[1]?.some(
        (item) => item?.OptionName === 'SubCategory'
      )
    ) {
      await dispatch(getCardDataWithoutSubmodule(data2)).unwrap();
    } else {
      await dispatch(getCardDataWithoutSub(data2)).unwrap();
    }
  };

  const Combocarddata = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      ActiveStatus: 'A',
    };

    let response = await dispatch(getCombolist(data)).unwrap();

    if (response?.data?.statusCode === 1) {
      let datas = response?.data?.data;
      await dispatch(ChangeComboCarddata(datas));
      // let Data = response?.data?.data
      //             let comboList = Data?.map((item, index) => ({
      //                 ...item,
      //                 id: `${item.ComboName || 'Combo'}-${index}`,
      //                 ProdName:item?.ComboName,
      //                 OverAllQty:item?.OverallQuantity
      //             }));
      //             setCombocardata(comboList);
    } else {
      await dispatch(ChangeComboCarddata([]));
    }
  };

  const CustomerDisplay = (value) => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (value == 'TakeAway') {
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          userData: [],
          ExtraCharges: [],
          Paymentgateway: false,
          upioption1: 'okk',
          type: 'remove',
          keyValue: 'customer',
        };
        customerDisplayWindow.postMessage(updatedData, '*');
        const updatedRemovedData = {
          type: 'remove',
          keyValue: 'OrderTotalAmount',
        };
        customerDisplayWindow.postMessage(updatedRemovedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
    } else {
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          type: 'remove',
          keyValue: 'customer',
        };
        customerDisplayWindow.postMessage(updatedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
    }
  };

  const CustomerDisplayRemovedData = () => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        userData: [],
        ExtraCharges: [],
        Paymentgateway: false,
        type: 'remove',
        keyValue: 'customer',
      };
      customerDisplayWindow.postMessage(updatedData, '*');
      const updatedRemovedData = {
        type: 'remove',
        keyValue: 'OrderTotalAmount',
      };
      customerDisplayWindow.postMessage(updatedRemovedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  };

  const PaymentDeviceFlow = async (Paymentdevicefilter, value) => {
    await dispatch(changePaymentloader(true));
    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,
                  bookingpaymentupdate?.data?.OrderDetail?.[0]?.FYStatus
                )
                : '')
            );
            bookingpaymentupdate?.data?.OrderDetails?.length > 0 &&
              setPrintOrderDetails([bookingpaymentupdate?.data]);
            CustomerDisplay(value);
            ClearAllGlobalStateDatas(value);
            await dispatch(changePaymentloader(false));
          }
          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

          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}`
            );
            setFirstPaymentclick(false);
            // setPaybtnselected(PaymentOptions?.[0]?.ModeId);
            // setPaybtnnameselected(PaymentOptions?.[0]?.ModeName);
            setPaybtnnameselected(PaymentOptionsModeName);
            setPaybtnselected(PaymentOptionsModeId);
            await dispatch(changePaymentloader(false));
            CustomerDisplayRemovedData();
            ClearAllGlobalStateDatas(value);
          }

          console.error('Transaction not approved within 1 minute.');
          // Send an error message or handle the timeout
          // You can dispatch an action, show a notification, etc.
          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);
        setFirstPaymentclick(false);
        // setPaybtnselected(PaymentOptions?.[0]?.ModeId);
        // setPaybtnnameselected(PaymentOptions?.[0]?.ModeName);
        setPaybtnnameselected(PaymentOptionsModeName);
        setPaybtnselected(PaymentOptionsModeId);
        dispatch(changePaymentloader(false));
        CustomerDisplayRemovedData();
        ClearAllGlobalStateDatas(value);
      }
    }
  };

  const PaymentGatewayFlow = async (PaymentGatewayfilter) => {
    if (PaymentGatewayfilter?.[0]?.PaymentOptionType?.toLowerCase() === 'pg') {
      await dispatch(changePaymentloader(true));
      const customerDisplayWindow = getCustomerDisplayWindow();
      if (customerDisplayWindow && !customerDisplayWindow.closed) {
        const updatedData = {
          OrderBookingId: PaymentGatewayfilter?.[0]?.OrderId,
          Paymentgateway: true,
          OrderPaymentId: PaymentGatewayfilter?.[0]?.PaymentOrderId,
          OrderTotalAmount: PaymentGatewayfilter?.[0]?.Amount,
        };
        customerDisplayWindow.postMessage(updatedData, '*');
      } else {
        console.error(
          'Customer display window is not available or has been closed.'
        );
      }
      const checkPaymentStatus = async () => {
        const intervalId = setInterval(async () => {
          try {
            let getpaymentgatewaydetail = await dispatch(
              PaymentGatewayGetdetail(PaymentGatewayfilter?.[0]?.OrderId)
            ).unwrap();

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

              if (paymentdataget === 'S') {
                setMessageType('success');
                setMessageData('Payment Success');
                await dispatch(changePaymentloader(false));
                if (getpaymentgatewaydetail?.data?.OrderDetails?.length > 0) {
                  setPrintOrderDetails([getpaymentgatewaydetail?.data]);
                  CustomerDisplay(value);
                  ClearAllGlobalStateDatas(value);
                }
                clearInterval(intervalId); // Stop the loop when payment is successful
              } else if (paymentdataget === 'F') {
                setMessageType('error');
                setMessageData('Payment Failed');
                await dispatch(changePaymentloader(false));
                setFirstPaymentclick(false);
                setPaybtnnameselected(PaymentOptionsModeName);
                setPaybtnselected(PaymentOptionsModeId);
                clearInterval(intervalId); // Stop the loop when payment fails
                CustomerDisplayRemovedData();
                ClearAllGlobalStateDatas(value);
              }
            }
          } 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 businessUPIFlow = async (
    businessUPIfilter,
    OrderId,
    PaymentStatusLink
  ) => {
    // Implement your business UPI flow here
    console.log('Business UPI Flow Triggered', businessUPIfilter);
    // You can add similar logic as PaymentDeviceFlow or PaymentGatewayFlow based on your requirements
    setBusinessUPILink(PaymentStatusLink);
    setBusinessUPI(true);
    setBusinessUPIOrderId(OrderId);
  };

  const getPaymentOptionFeature = async () => {
    const FiltersalesPayment = GlobaluseOptions?.filter(
      (item) => item.FlowName?.toLowerCase() === 'sales'
    );
    setuseOptions(FiltersalesPayment);
    const filterpaycounter = FiltersalesPayment?.[0]?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'pay at the counter'
    );
    const filterpaymentgateway = FiltersalesPayment?.[0]?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'payment gateway'
    );
    const filterpaymentdevice = FiltersalesPayment?.[0]?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'payment device'
    );
    const filterBusinessUpi = FiltersalesPayment?.[0]?.OptionDetails?.filter(
      (item) => item?.OptionName?.toLowerCase() === 'business upi'
    );
    const cardinpaymentgateway =
      filterpaymentgateway?.[0]?.ModeDetails?.filter((item) =>
        item?.ModeName?.toLowerCase()?.includes('card')
      ) || [];
    const cardinpaymentdevice =
      filterpaymentdevice?.[0]?.ModeDetails?.filter((item) =>
        item?.ModeName?.toLowerCase()?.includes('card')
      ) || [];

    const upiinpaymentgateway =
      filterpaymentgateway?.[0]?.ModeDetails?.filter((item) =>
        item?.ModeName?.toLowerCase()?.includes('upi')
      ) || [];
    const upiinpaymentdevice =
      filterpaymentdevice?.[0]?.ModeDetails?.filter((item) =>
        item?.ModeName?.toLowerCase()?.includes('upi')
      ) || [];

    setPaymentOptions(filterpaycounter?.[0]?.ModeDetails);
    setPaymentUpiOptions(
      FiltersalesPayment?.[0]?.PaymentDetails?.Payatthecounter
    );
    setPaymentDeviceCard(cardinpaymentdevice);
    setPaymentgatewayCard(cardinpaymentgateway);
    setPaymentgatewayUPI(upiinpaymentgateway);
    setPaymentDeviceUPI(upiinpaymentdevice);
    const cardoptions = [];
    if (cardinpaymentgateway?.length > 0) {
      cardoptions.push({
        label: 'Payment Gateway',
        value: 'PG',
        imgSrc: paygate,
      });
    }
    if (cardinpaymentdevice?.length > 0) {
      cardoptions.push({
        label: 'Payment Device',
        value: 'PD',
        imgSrc: paydevice,
      });
    }
    setCardPayOption(cardoptions);
    const options = [];

    if (FiltersalesPayment?.[0]?.PaymentDetails?.Payatthecounter?.length > 0) {
      options.push({
        label: 'Personal UPI',
        value: 'Default',
        imgSrc: defaultupi,
      });
    }
    if (filterBusinessUpi?.[0]?.ModeDetails?.length > 0) {
      options.push({
        label: 'Business UPI',
        value: 'Business',
        imgSrc: pozologoimg,
        PaymentOptionId: filterBusinessUpi?.[0]?.PaymentOptionId,
        PaymentFlowId: filterBusinessUpi?.[0]?.PaymentFlowId,
        OptionId: filterBusinessUpi?.[0]?.OptionId,
      });
    }

    if (upiinpaymentgateway?.length > 0) {
      options.push({
        label: 'Payment Gateway',
        value: 'PG',
        imgSrc: paygate,
        PaymentOptionId: upiinpaymentgateway?.[0]?.PaymentOptionId,
        PaymentModeId: upiinpaymentgateway?.[0]?.PaymentModeId,
        ModeId: upiinpaymentgateway?.[0]?.ModeId,
      });
    }

    if (upiinpaymentdevice?.length > 0) {
      options.push({ label: 'Payment Device', value: 'PD', imgSrc: paydevice });
    }
    setUpiPayOption(options);
    setBusinessPayoption(filterBusinessUpi?.[0]?.ModeDetails || []);
    // }
  };

  const ProductSummary = (salesData) => {
    const productMap = new Map();

    salesData.forEach((item) => {
      let offerMode = item?.OfferMode?.trim();
      offerMode = offerMode && offerMode !== '' ? offerMode : null;

      let OfferId = null;
      if (
        item?.OfferMessage &&
        Array.isArray(item.OfferMessage) &&
        item.OfferMessage.length > 0
      ) {
        OfferId = item.OfferMessage[0]?.OfferId || null;
      }

      const keyData = [
        item.ProdId || null,
        item.InwardDtlId || null,
        item.BookingType || null,
        item.SinglePc || null,
        item.OrderRate || null,
        item.ScaleType || null,
        offerMode,
        OfferId,
      ];

      const key = keyData.join('-');

      if (productMap.has(key)) {
        const existingItem = productMap.get(key);
        existingItem.OrderQty =
          (existingItem.OrderQty || 0) + (item.OrderQty || 0);
        existingItem.TotalAmt =
          (existingItem.TotalAmt || 0) + (item.TotalAmt || 0);
        existingItem.TaxAmt =
          (parseFloat(existingItem.TaxAmt) || 0) +
          (parseFloat(item.TaxAmt) || 0);
      } else {
        const newItem = {
          ...item,
          OfferMode: offerMode,
          OfferMessage:
            item?.OfferMessage && Array.isArray(item.OfferMessage)
              ? item.OfferMessage
              : null,
        };
        productMap.set(key, newItem);
      }
    });

    // Convert the map values back to an array
    const aggregatedProducts = Array.from(productMap.values());

    return aggregatedProducts;
  };

  const extrachargesbookingtype = (extradata) => {
    const TakAwayId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'TakeAway'
    )?.ConfigId;
    const DineinId = ConfigDataList?.find(
      (a) => a?.ConfigName === 'Dine In'
    )?.ConfigId;
    let tempdata = extradata?.map((data) => ({
      ...data,
      BookingType: data?.BookingTypeName === 'Dine In' ? DineinId : TakAwayId,
    }));
    return tempdata;
  };

  const getUnpaiddatas = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
    };
    await dispatch(getUnpaidData(data)).unwrap();
  };

  const Unpaidfun = async (event) => {
    dispatch(changeunpaidflow(true));
    if (
      orderCardDetail?.length > 0 &&
      (BookingType === 'Dine In' || BookingTypeBoth)
    ) {
      setUnpaidConfirmation(true);
      setunpaidselectedindex(event);
    } else {
      const UpdatedData = tabledata?.[event]?.productDetails;
      if (OfferCheckedInSetup && preferenceOffer) {
        await applyOffer(UpdatedData);
      } else {
        dispatch(changeOrderCardDetails(UpdatedData));
      }
      await dispatch(changeReorderHoldDetails([tabledata?.[event]]?.[0]));
      await dispatch(ChangeTotalAmount(tabledata?.[event]?.ExtraChargeDetails));
      await dispatch(
        changeReorderProductDetails(tabledata?.[event]?.productDetails)
      );
      await dispatch(changeUnpaidData(true));
      setUnpaidOpen(false);
    }
  };

  const UnpaidOk = async () => {
    setOrderStatus(false);
    await dispatch(changeSelectedTableDetails([]));
    await dispatch(changeSelectTable([]));
    await dispatch(changeSelectChair([]));
    if (defaultBookingType === 'Both') {
      await dispatch(changeBookingType('TakeAway'));
    }
    await dispatch(
      changeOrderCardDetails(tabledata?.[unpaidselectedindex]?.productDetails)
    );
    await dispatch(
      changeReorderProductDetails(
        tabledata?.[unpaidselectedindex]?.productDetails
      )
    );
    await dispatch(
      changeReorderHoldDetails([tabledata?.[unpaidselectedindex]]?.[0])
    );
    await dispatch(
      ChangeTotalAmount(tabledata?.[unpaidselectedindex]?.ExtraChargeDetails)
    );
    await dispatch(changeUnpaidData(true));
    setUnpaidOpen(false);
    setUnpaidConfirmation(false);
  };

  const Unpaidclose = async () => {
    dispatch(changeunpaidflow(false));
    setUnpaidOpen(false);
    setUnpaidConfirmation(false);
  };

  const AddUPIPaymentOption = async (data, mode = false) => {
    setSelectedUpiOption('');
    setUpiOption('');
    setUpiId('');
    await dispatch(changeUpiIDprint(null));
    await dispatch(changeUpiIDName(''));
    await dispatch(changeUpiIDoptionId(null));
    setSelectedUPIPayOption(data);
    setUpinotSelected(false);
    setCardoptionnotSelected(false);
    if (data !== 'Default' && data !== 'Business' && !mode) {
      setUpiOptionOpen(false);
    }
  };

  const hideDefault = () => {
    setUpiOptionOpen(false);
  };

  const handleUPIButtonClick = (id, name) => {
    if (paymentloader === false) {
      setPaybtnnameselected(name);
      setPaybtnselected(id);
      let brachName1 = PaymentUpiOptions?.[0]?.BrName;
      setbrachName(brachName1);
      if (UpiPayOption?.length === 1) {
        setSelectedUPIPayOption(UpiPayOption?.[0]?.value);
        if (UpiPayOption?.[0]?.value?.toLowerCase() === 'default') {
          if (PaymentUpiOptions?.length === 1) {
            addUpiOption(
              PaymentUpiOptions?.[0]?.Mode,
              PaymentUpiOptions?.[0]?.ModeName,
              PaymentUpiOptions?.[0]?.UPIId
            );
          }
        }
      }

      setQrCode(true);
      SetSuccess(true);
    }
  };

  const handlePaymentMode = (id, name) => {
    if (name?.toLowerCase() !== 'credit') {
      setOverAllBal(0);
      setCredit(false);
    }
    if (paymentloader === false) {
      setPaybtnselected(id);
      setPaybtnnameselected(name);
      if (CardPayOption?.length === 1) {
        setSelectedCardOption(CardPayOption?.[0]?.value);
      }
      setUpiOptionOpen(false);
      setQrCode(false);
      setUpinotSelected(false);
      setCardoptionnotSelected(false);
    }
  };

  const handleRefundPaymentMode = (id, name) => {
    setRefundPaySelected(id);
    setRefundPaySelectedName(name);
  };

  const addUpiOption = async (id, name, UPIId) => {
    await dispatch(changeUpiIDprint(UPIId));
    await dispatch(changeUpiIDName(name));
    await dispatch(changeUpiIDoptionId(id));
    setSelectedUpiOption(id);
    setUpiOption(name);
    setUpiId(UPIId);
    setUpinotSelected(false);
    setCardoptionnotSelected(false);
    // setQrCode(true)
  };

  const AddCardOption = (data) => {
    setSelectedCardOption(data);
    setCardOptionOpen(false);
    setCardoptionnotSelected(false);
  };

  const ClearAllGlobalStateDatas = async (value) => {
    if (OfferCheckedInSetup && preferenceOffer) {
      await applyOffer([]);
    } else {
      dispatch(changeOrderCardDetails([]));
    }
    dispatch(
      changeOtherServiceTicketClaim({
        TotalAmt: 0,
        ParkingClaimed: false,
      })
    );
    dispatch(changeBillEditingMode(false));
    await dispatch(changePreviousOrderPayment([]));
    await dispatch(changePreviousOrderOfferDetail([]));
    dispatch(changeTipAmount(0));
    dispatch(changeFullOfferAppliedProducts([]));
    dispatch(ChangeFullFreeProductList([]));
    await dispatch(ChangeTotalAmount([]));
    await dispatch(changeReorderHoldDetails({}));
    await dispatch(changeReorderProductDetails([]));
    setFirstPaymentclick(false);
    await dispatch(ChangeNavHoldData(false));
    await dispatch(changeCustomerID(null));
    await dispatch(changeSelectedCustId());
    await dispatch(changeSelectedOption(null));
    await dispatch(ChangeSelectedCustDisable(false));
    // setPaybtnselected(PaymentOptions?.[0]?.ModeId);
    // setPaybtnnameselected(PaymentOptions?.[0]?.ModeName);
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
    setQrCode(false);
    setUpinotSelected(false);
    if (
      holdCheckedSalesSetup ||
      NavBarOptions?.some((e) => e?.OptionName == 'Hold')
    ) {
      getHolddata();
    }
    setCurrentOrderNetAmount(0);
    setPreviousNetAmount(0);
    if (defaultBookingType === 'Both') {
      await dispatch(changeBookingType('TakeAway'));
    }
    await dispatch(changeSelProdWiseEst([]));
    await dispatch(ChangeOverAllDiscSales(null));
    await dispatch(ChangeOverAllDiscEstimate(null));
    await dispatch(changeAddBookingDetailsTrigger(false));
    (dispatch(
      getExpireProductsList({
        compId: CompId,
        branchId: BranchId,
        appId: AppId,
      })
    )?.unwrap(),
      dispatch(
        getLowStockAlertProductsList({
          compId: CompId,
          branchId: BranchId,
          appId: AppId,
        })
      )?.unwrap(),
      // clearInvoiceDate
      clearInvoiceDate());
    dispatch(changeCurrentOrderId(null));
    // await dispatch(changeEstimateBooking(null))
    getstockbadge();
    Combodata?.length > 0 && Combocarddata();
    getUnpaiddatas();
    await dispatch(changeSelectTable([]));
    await dispatch(changeSelectChair([]));
    await dispatch(changeSelectedTableDetails([]));
    await dispatch(changeOrderType());
    if (value === 'Dine-In') {
      navigate(`${subDirectory}sales/dine-in`);
    }
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
      FromDate: currentDateValue,
      ToDate: currentDateValue,
    };
    await dispatch(getSalesDetailData(data));
  };

  const getHolddata = async () => {
    const data = { CompId: CompId, BranchId: BranchId, AppId: AppId };
    let response = await dispatch(gettinghold(data)).unwrap();
    if (response?.data?.statusCode == 1) {
      dispatch(changeholddata(response?.data?.data));
    } else {
      dispatch(changeholddata([]));
    }
  };

  const handlePrintOrToken = async () => {
    const dinein =
      PrintOrderDetails?.[0]?.OrderDetails?.[0]?.productDetails?.some(
        (product) => product.BookingTypeName === 'Dine In'
      );
    const Tokenthere =
      PrintOrderDetails?.[0]?.OrderDetails?.[0]?.productDetails?.some(
        (product) => product.TokenAvailable === 'Y'
      );
    if (isMobile) {
      if (MobileA4Print) {
        await MobileMultiPdfPrintTrigger({
          preferenceDetails,
          printerTemplateStyle,
          printDatas,
          PrinterDetails,
          PrintOrderDetails,
          SessionData,
          bookingTypePreference,
        });
      } else {
        if (Tokenthere && TokenOnly?.SettingValue === 'Y' && !dinein) {
          if (IndividualToken?.SettingValue === 'Y' && !dinein) {
            IndividualTokenMobilePrint(PrintOrderDetails, UpiId, 'Booking');
            closePrintOption();
          } else {
            SingleTokenMobilePrint(PrintOrderDetails, UpiId, 'Booking');
            closePrintOption();
          }
        } else {
          MobilePrint(
            appPreferences,
            PrintOrderDetails,
            UpiId,
            'Booking',
            preferenceDatas
          );
          closePrintOption();
        }
      }
    } else {
      if (Tokenthere && TokenOnly?.SettingValue === 'Y' && !dinein) {
        AllProductTokenFunction();
      } else {
        Print();
      }
    }
  };

  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',
      A4: 'PrintStyleA4',
      A5: 'PrintStyleA5',
      A4Standard: 'A4Standard',
      TaxInvoice: 'TaxInvoice',
    };

    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
            if (orderDetail?.BookingTypeName !== 'Dine In') {
              const groupedTokens = orderDetail?.productDetails
                ?.filter((data) => data?.EditTokenAvailable !== 'N')
                ?.reduce((acc, item, idx) => {
                  if (item.TokenAvailable === 'Y') {
                    if (!item.CounterName) {
                      // If CounterName is null or empty
                      acc[`individual-${idx}-${item.ProdId}`] = [item]; // Unique entry for each null/empty CounterName item
                    } else {
                      if (!acc[item.CounterName]) {
                        acc[item.CounterName] = [];
                      }
                      acc[item.CounterName].push(item); // Group by CounterName
                    }
                  }
                  return acc;
                }, {});

              // Iterate over grouped tokens and print them
              const tokensToPrint = Object.entries(groupedTokens).map(
                async ([counterName, items], idx) => {
                  // Use the counterName (or unique identifier for individual items) as part of the tokenId
                  const tokenId = `${idx}-${items?.[0]?.ProdId}-${counterName}`;

                  await TokenPrint(tokenId, items); // Pass all grouped items to the print function
                }
              );
              if (tokensToPrint?.length > 0) {
                await Promise.all(tokensToPrint);
              }
            }
          }
        )
      );

      setPrintOrderDetails([]);
      closePrintOption();
    }
  };

  const AllProductTokenFunction = async () => {
    if (IndividualToken?.SettingValue === 'Y') {
      await Promise.all(
        PrintOrderDetails?.[0]?.OrderDetails?.map(
          async (orderDetail, index) => {
            const groupedTokens = orderDetail?.productDetails
              ?.filter((data) => data?.EditTokenAvailable !== 'N')
              ?.reduce((acc, item, idx) => {
                if (item.TokenAvailable === 'Y') {
                  if (!item.CounterName) {
                    // If CounterName is null or empty
                    acc[`single-${idx}-${item.ProdId}`] = [item]; // Unique entry for each null/empty CounterName item
                  } else {
                    if (!acc[item.CounterName]) {
                      acc[item.CounterName] = [];
                    }
                    acc[item.CounterName].push(item); // Group by CounterName
                  }
                }
                return acc;
              }, {});

            // Iterate over grouped tokens and print them
            const tokensToPrint = Object.entries(groupedTokens).map(
              async ([counterName, items], idx) => {
                // Use the counterName (or unique identifier for individual items) as part of the tokenId
                const tokenId = `${idx}-${items?.[0]?.ProdId}-${counterName}`;
                await TokenPrint(tokenId, items); // Pass all grouped items to the print function
              }
            );
            if (tokensToPrint?.length > 0) {
              await Promise.all(tokensToPrint);
            }
            setPrintOrderDetails([]);
            closePrintOption();
          }
        )
      );
    } else {
      await Promise.all(
        PrintOrderDetails?.[0]?.OrderDetails?.filter(
          (data) => data?.EditTokenAvailable !== 'N'
        )?.map(async (orderDetail, index) => {
          await TokenPrint(`${index}-${orderDetail?.OrderId}`);
        })
      );
      setPrintOrderDetails([]);
      closePrintOption();
    }
  };

  const TokenPrint = async (index) => {
    try {
      console.log(`Starting token print for index ${index}`);

      const stylePrint = `<style> 
              *{
                font-family:Poppins;
              }
            
              .Reprint-body{  
                height: 100%;
                margin: 0vw 0vh;
                padding: 1vw 2vh;
              }
            
              .Re-print-body-Tr {
                text-align: center;
                font-family: Poppins;
              }
              .Re-print-body-Product{
                text-align:left;
                font-size:12px;
                border: 1px solid black;
                border-collapse: collapse;
                font-family: Poppins;
                padding-left:5px;
              }
              .Re-print-body-Rate{
                text-align:right;
                  font-size:12px;
                  padding-right:5px;
                  border: 1px solid black;
                  border-collapse: collapse;
                  font-family: Poppins;
              }
              .Re-print-Logo{
                width: 50px ;
                height: 50px;
                margin-bottom: -20px;
               }
            
              .Re-print-title {
                font-size: 19px;
                font-weight: 600;
                font-family: Gilroy;
                margin-bottom: -10px;
                text-align:center;
              }
              
              .Re-print-Add {
                font-size: 12px;
                font-family: Poppins;
                margin-bottom: -5px;
              }
              
              .Re-print-GST {
                font-size: 12px;
                font-family: Poppins;
              }
            
              .Re-print-top {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
              }
            
              .Re-print-top2 {
                display: flex;
                width: 90%;
                margin:0px 10px;
                font-family: Gilroy;
                justify-content: space-between;
              }
              .Re-print-top3 {
                display: flex;
                width: 75%;
                margin:0px 30px;
                font-family: Gilroy;
                justify-content: space-between;
                margin-bottom: 5px;
              }
              .Re-print-bold{
                font-size: 8px;
                font-weight: 400;
                font-family: Poppins;
                letter-spacing: 1px;
              }
            
              .Re-print-bold1{
                font-size: 12px;
                font-weight: 600;
                font-family: Poppins;
                letter-spacing: 1px;
              }
              .Re-print-bold2{
                width:100%;
                font-size: 12px;
                font-family: Poppins;
                text-align:center;
              }
            
              .Re-print-Table {
                  width: 90%;
                  margin:0px 10px;
                }
            
              .Re-print-Table ,.Re-print-th ,.Re-print-td {
                  border: 1px solid black;
                  border-collapse: collapse;
                  font-family: Poppins;
                }
                .Re-print-td
                {
                  font-size:12px;
                }
            
              </style>`;
      if (TokenOnly?.SettingValue === 'Y') {
        if (IndividualToken?.SettingValue === 'Y') {
          await printDiv(`TokenOnlySingle${index}`, stylePrint);
        } else {
          await printDiv(`TokenOnlyMultiple${index}`, stylePrint);
        }
      } else {
        await printDiv(`TakeawayToken${index}`, stylePrint);
      }
    } catch (error) {
      console.error(`Error printing token for index ${index}:`, error);
    }
  };

  const handlePaymentOptions = async () => {
    dispatch(changeSalesPaymentoption(true));
    dispatch(
      getPaymentOptionsData({
        AppId: AppId,
        CompId: CompId,
        BranchId: BranchId,
      })
    );
  };

  const closePrintOption = () => {
    setShowWhatsAppShare(false);
    setSMSShare(false);
    setPrintOrderDetails([]);
    setMobileNoWhatsApp();
  };

  const handleWhatsAppClick = () => {
    setShowWhatsAppShare(true);
  };

  const handleSMSClick = () => {
    setSMSShare(true);
  };

  const EnableUpiOptions = () => {
    setUpiOptionOpen(!UpiOptionOpen);
  };

  const EnableCardOptions = () => {
    setCardOptionOpen(!CardOptionOpen);
  };

  const onFinalSubmit = async () => {
    let url = `${MainHomeUrl}payment-page?amt=${TotalAmount}&Id=${selOption?.value}&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');
    }
  };

  function safeRound(amountStr) {
    if (amountStr == null) return allowDecimal ? '0.00' : '0';

    const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
    const num = Number(cleaned);

    if (isNaN(num)) return allowDecimal ? '0.00' : '0';

    return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
  }

  const CreditCustomer1 = () => {
    if (
      orderCardDetail?.length === 0 &&
      (selOption?.value !== undefined ||
        GlobalAddCustomerDetails1?.length > 0 ||
        GetCustId?.CustMobile !== undefined)
    ) {
      setcreditCustomerOpen(true);
    } else {
      if (selOption?.value == undefined) {
        setMessageType('warning');
        setMessageData('Please Select the Customer');
      }
    }
  };

  const SplitPaymentOpen = () => {
    if (orderCardDetail?.length > 0 && TotalAmount > 0) {
      //   const updatedData = {
      //     userData: OrderCardDetail,
      //     ExtraCharges: GlobalExtraCharge,
      //     customer: selOption != null ? selOption : GetCustId,
      //     Paymentgateway: false,
      //   };
      //   setFailedOrderData(updatedData);
      setSplitpayment(true);
    } else {
      if (TotalAmount <= 0) {
        setMessageType('warning');
        setMessageData('Cannot split when total amount is zero or less');
        return;
      }
      setMessageType('warning');
      setMessageData('Please Select the Product');
    }
  };

  const CreditCustomerHAndleCancel = () => {
    setcreditCustomerOpen(false);
  };

  const handlesplitpaymentclose = () => {
    setSplitpayment(false);
    setPaybtnselected(PaymentOptions?.[0]?.ModeId);
    setPaybtnnameselected(PaymentOptions?.[0]?.ModeName);
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        paymentMethod: PaymentOptions?.[0]?.ModeName,
        Paymentgateway: false,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  };

  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);

  const changeOrderStatus = () => {
    setOrderStatus(!OrderStatus);
    // setPaybtnnameselected(PaymentOptions?.[0]?.ModeName);
    // setPaybtnselected(PaymentOptions?.[0]?.ModeId);
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
  };

  const handleSummary = () => {
    setSummary((prev) => !prev);
  };

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (summaryRef.current && !summaryRef.current.contains(event.target)) {
        setSummary(true);
      }
    };

    // Attach the listener always
    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  useEffect(() => {
    const setDefaultPaymentOption = async () => {
      const res = await dispatch(
        getDefaultPaymentOptions({ AppId, CompId, BranchId })
      )?.unwrap();
      const defaultDetail = res?.data?.data?.[0]?.DefaultDetails?.[0];
      if (res?.data?.data?.length > 0 && defaultDetail) {
        setDefaultEnabled(true);
        setDefaultPaymentMode(defaultDetail);
        const { option, card } = defaultDetail;
        if (option?.value) setSelectedUPIPayOption(option.value);
        if (card) {
          const isDefault =
            String(option?.value ?? '').toLowerCase() === 'default';
          const idToUse = isDefault ? card?.UPIId : card?.ModeId;

          if (idToUse) {
            addUpiOption(card?.Mode, card?.ModeName, idToUse);
          }
        }
      } else {
        setDefaultEnabled(false);
        setDefaultPaymentMode([]);
      }
    };
    setDefaultPaymentOption();
  }, [defaultPaymentTrigger]);

  function safeRound(amountStr) {
    if (amountStr == null) return allowDecimal ? '0.00' : '0';

    const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
    const num = Number(cleaned);

    if (isNaN(num)) return allowDecimal ? '0.00' : '0';

    return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
  }

  return (
    <Suspense fallback={<div>Suspense Loading...</div>}>
      <div className="booking-table-footer" style={{ padding: '0' }}>
        <Messages
          messageType={messageType}
          messageData={messageData}
          onComplete={onComplete}
        />
        {summary && (
          <div className="paymentDetailsSection" ref={summaryRef}>
            <div className="detailsSummarty-Title">
              <div>Items :</div>
              <p>{orderCardDetail?.length || 0}</p>
            </div>
            <div className="detailsSummarty-Title">
              <div>Total Qty :</div>
              <p>
                {orderCardDetail?.reduce((acc, item) => {
                  const isWeightScale = item?.ScaleType === 'weight';

                  if (isWeightScale) {
                    return (
                      acc +
                      (Weightasquantity
                        ? Math.round(Number(item?.OrderQty || 0))
                        : 1)
                    );
                  }

                  return acc + Math.round(Number(item?.OrderQty || 0));
                }, 0)}
              </p>
            </div>
            <div className="detailsSummarty-Title">
              <div>MRP Total :</div>
              <p>
                ₹
                {orderCardDetail?.reduce(
                  (acc, data) => parseFloat(data?.TotalAmt || 0) + acc,
                  0
                )}
              </p>
            </div>
            {TotalTaxAmount > 0 && (
              <div className="detailsSummarty-Title">
                <div>Tax Amount :</div>
                <p>{safeRound(TotalTaxAmount)}</p>
              </div>
            )}
            {parseInt(extra) > 0 && (
              <div className="detailsSummarty-Title">
                <div>Extra Charges :</div>
                <p>{safeRound(extra)}</p>
              </div>
            )}
            <div className="detailsSummarty-Title1">
              <div>Discount :</div>
              <p>
                -₹
                {(OverAllSales > 0 ? OverAllSales : 0) +
                  (OverAllEstimate > 0 ? OverAllEstimate : 0) +
                  (Discount > 0 ? Discount : 0)}
              </p>
            </div>
            <div className="detailsTitle">
              <div>Total :</div>
              <p>
                ₹
                {safeRound(
                  credit && overAllBal >= 0
                    ? Math.max(0, TotalAmount - overAllBal)
                    : TotalAmount
                )}
              </p>
            </div>
          </div>
        )}
        <div className="payment-buttons-container">
          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
            <Tooltip title="Advance Amount" isMobile={isMobile}>
              <div>
                {' '}
                <PozoAdvanceIcon
                  className="BSBillingNav-icon-table-icon"
                  onClick={CreditCustomer1}
                  style={{
                    cursor: orderCardDetail?.length > 0 && 'not-allowed',
                    color:
                      orderCardDetail?.length > 0 ||
                        (selOption?.value === undefined &&
                          GlobalAddCustomerDetails1?.length === 0 &&
                          GetCustId?.CustMobile === undefined)
                        ? 'gray'
                        : 'rgb(18, 146, 238)',
                    fontSize: '28px',
                  }}
                />{' '}
              </div>
            </Tooltip>

            {!OtherServicesglobal && (
              <Tooltip title="Split Payment" isMobile={isMobile}>
                {' '}
                <div
                  className="BSBillingNav-icon-table-icon"
                  onClick={
                    CheckBookingStatus != 'Close' && !addnewAccess
                      ? SplitPaymentOpen
                      : ''
                  }
                  style={{
                    width: '1.5rem',
                    cursor:
                      orderCardDetail?.length === 0 ||
                        CheckBookingStatus == 'Close' ||
                        addnewAccess
                        ? 'not-allowed'
                        : 'pointer',
                    color:
                      orderCardDetail?.length === 0 ||
                        CheckBookingStatus == 'Close' ||
                        addnewAccess
                        ? 'gray'
                        : 'rgb(18, 146, 238)',
                    display: 'flex',
                    alignItems: 'center',
                    height: '2.46rem',
                  }}
                >
                  <PozoSplitPaymentIcon />
                </div>
              </Tooltip>
            )}

            {/* Customer Orders */}
            {(SelCustId && tableOptions?.filter((item) => item.OptionName === 'PreviousBillFetch')
              .length === 1) && (
                <Tooltip title="Customer Orders" isMobile={isMobile}>
                  {' '}
                  <div
                    className="BSBillingNav-icon-table-icon"
                    onClick={() => {
                      if (
                        CheckBookingStatus !== 'Close' &&
                        !addnewAccess &&
                        !(orderCardDetail?.length > 0)
                      ) {
                        setCustomerPreviesOrders(true);
                      }
                    }}
                    style={{
                      cursor: orderCardDetail?.length > 0 && 'not-allowed',
                      color:
                        orderCardDetail?.length > 0 ||
                          (orderCardDetail?.length > 0 &&
                            GetCustId?.CustMobile === undefined)
                          ? 'gray'
                          : 'rgb(18, 146, 238)',
                      fontSize: '25px',
                      display: 'flex',
                      alignItems: 'center',
                      height: '2.46rem',
                      width: '1.5rem',
                    }}
                  >
                    <FaCartPlus />
                  </div>
                </Tooltip>
              )}

            {tabledata?.length > 0 && dinePreference && (
              <div style={{ width: '2rem' }}>
                {tableOptions
                  ?.filter((item) => item.OptionName === 'UnpaidBill')
                  .map((filteredItem) => (
                    <React.Fragment key={filteredItem.TemplateOptionsId}>
                      {!OtherServicesglobal && (
                        <TooltipWrapper
                          title="Unpaid Bills"
                          isMobile={isMobile}
                        >
                          {' '}
                          <PozoUnpaidIcon
                            className="BSBillingNav-icon-table-icon"
                            style={{
                              fontSize: '27px',
                              cursor: 'pointer',
                              color: unpaidFlow ? '#52c41a' : '#1292EE',
                            }}
                            onClick={() => {
                              (setUnpaidOpen(true), getUnpaiddatas());
                            }}
                          />
                        </TooltipWrapper>
                      )}
                    </React.Fragment>
                  ))}
              </div>
            )}
            {/* share  */}
            {PrintOrderDetails?.length > 0 && (
              <div
                style={{
                  display: 'flex',
                  gap: '1rem',
                  justifyContent: 'center',
                }}
              >
                {filteredSettingNames?.includes('whatsapp') &&
                  MobileNoWhatsApp?.value && (
                    <FaWhatsapp
                      size={32}
                      color="#25D366"
                      style={{ cursor: 'pointer' }}
                      onClick={handleWhatsAppClick}
                      title="Share on WhatsApp"
                    />
                  )}

                {(filteredSettingNames?.includes('Print') ||
                  !MobileNoWhatsApp ||
                  !MobileNoWhatsApp.value) && (
                    <FaPrint
                      size={32}
                      color="#1292EE"
                      style={{ cursor: 'pointer' }}
                      onClick={handlePrintOrToken}
                      title="Print"
                    />
                  )}

                {filteredSettingNames?.includes('SMS') && isMobile && (
                  <MdSms
                    size={32}
                    color="#FF8800"
                    style={{ cursor: 'pointer' }}
                    onClick={handleSMSClick}
                    title="Send SMS"
                  />
                )}
                {/* WhatsAppShare modal/component */}
                {showWhatsAppShare && (
                  <WhatsAppShare
                    message={encodedMessage}
                    mobileNumber={MobileNoWhatsApp?.value}
                    onClose={() => closePrintOption(false)}
                  />
                )}
                {showSMSShare && isMobile && (
                  <SMSShare
                    message={encodedMessage}
                    mobileNumber={MobileNoWhatsApp?.value}
                    onClose={() => closePrintOption(false)}
                  />
                )}
              </div>
            )}

            {dinePreference &&
              (BookingType === 'Dine In' ||
                BookingTypeBoth ||
                CheckOrderType?.length > 0) &&
              !unpaidFlow &&
              SelectedTableDetails?.length !== 0 && (
                <div
                  style={{
                    width: '4rem',
                    display: 'flex',
                    alignItems: 'center',
                  }}
                >
                  <Tooltip title="ORDER" isMobile={isMobile}>
                    {' '}
                    <PozoDineInIcon
                      className={
                        FirstPaymentclick === false && !addnewAccess
                          ? OrderStatus
                            ? 'Dinein-order-btn pulse-element ChairClrRed'
                            : 'Dinein-order-btn pulse-element ChairClrGreen'
                          : 'Dinein-order-btn-disabled pulse-element'
                      }
                      onClick={() =>
                        FirstPaymentclick === false && !addnewAccess
                          ? changeOrderStatus()
                          : ''
                      }
                    />
                  </Tooltip>
                </div>
              )}
          </div>
          <button className="summaryopenClose" onClick={handleSummary}>
            {summary ? (
              <>
                Summary Close <IoClose color="#e33333" />
              </>
            ) : (
              <>
                Summary <FaAngleUp />
              </>
            )}
          </button>
        </div>
        <Tooltip title={'Payment Mode (SHIFT + M)'} placement={'top'}>
          <div
            className="paymentsButtons"
            style={{
              pointerEvents: isDisabled ? 'none' : 'auto',
              opacity: isDisabled ? 0.5 : 1,
            }}
          >
            {payBtns?.length > 0 &&
              currentOrderNetAmount >= previousNetAmount ? (
              payBtns.map((payment) => {
                const mode = payment?.ModeName?.toLowerCase();
                const isSelected = paybtnselected === payment?.ModeId;
                const buttonClass = isSelected
                  ? 'paybutton-selected'
                  : 'paybutton';

                const handleClick =
                  mode === 'upi'
                    ? () =>
                      handleUPIButtonClick(payment?.ModeId, payment?.ModeName)
                    : () =>
                      handlePaymentMode(payment?.ModeId, payment?.ModeName);

                return (
                  <div className="standard-pay-btns" key={payment?.ModeId}>
                    <button
                      className={buttonClass}
                      style={{
                        // fontFamily: FontFamily['para'],
                        backgroundColor:
                          mode === 'upi'
                            ? '#2563eb'
                            : mode === 'card'
                              ? '#9333ea'
                              : mode === 'credit'
                                ? '#9333ea'
                                : '#16a34a',
                        animation: blink
                          ? 'blink-animation 0.5s infinite alternate'
                          : 'none',
                      }}
                      onClick={handleClick}
                    >
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '0.5rem',
                        }}
                      >
                        {mode === 'cash' && <FaMoneyBillWave />}
                        {mode === 'upi' && <FaMobileScreenButton />}

                        {mode === 'credit' && (
                          <>
                            <img src={Credit} alt="" width={20} />
                          </>
                        )}
                        {payment?.ModeName}

                        {mode === 'upi' && (
                          <UpiPopover
                            defaultPaymentMode={defaultPaymentMode}
                            defaultEnabled={defaultEnabled}
                            setDefaultEnabled={setDefaultEnabled}
                            UpiOptionOpen={UpiOptionOpen}
                            UpiPayOption={UpiPayOption}
                            SelectedUPIPayOption={SelectedUPIPayOption}
                            AddUPIPaymentOption={AddUPIPaymentOption}
                            PaymentUpiOptions={PaymentUpiOptions}
                            UpiOption={UpiOption}
                            UpiId={UpiId}
                            BusinessPayOption={BusinessPayOption}
                            paygate={paygate}
                            paydevice={paydevice}
                            EnableUpiOptions={EnableUpiOptions}
                            PaymentgatewayUPI={PaymentgatewayUPI}
                            PaymentDeviceUPI={PaymentDeviceUPI}
                            SelectedUpiOption={SelectedUpiOption}
                            addUpiOption={addUpiOption}
                            hideDefault={hideDefault}
                          />
                        )}
                        {mode === 'card' && (
                          <CardPopover
                            CardPayOption={CardPayOption}
                            SelectedCardOption={SelectedCardOption}
                            AddCardOption={AddCardOption}
                            CardOptionOpen={CardOptionOpen}
                            EnableCardOptions={EnableCardOptions}
                            paygate={paygate}
                            paydevice={paydevice}
                          />
                        )}
                      </div>
                    </button>
                  </div>
                );
              })
            ) : currentOrderNetAmount < previousNetAmount &&
              salesBillEdit &&
              refundPayBtns.length > 0 ? (
              refundPayBtns.map((payment) => {
                const mode = payment?.ConfigName?.toLowerCase();
                const isSelected = refundPaySelected === payment?.ConfigId;
                const buttonClass = isSelected
                  ? 'paybutton-selected'
                  : 'paybutton';

                return (
                  <div className="standard-pay-btns" key={payment?.ConfigId}>
                    <button
                      className={buttonClass}
                      style={{
                        // fontFamily: FontFamily['para'],
                        backgroundColor:
                          mode === 'upi'
                            ? '#2563eb'
                            : mode === 'card'
                              ? '#9333ea'
                              : mode === 'credit'
                                ? '#9333ea'
                                : '#16a34a',
                        animation: blink
                          ? 'blink-animation 0.5s infinite alternate'
                          : 'none',
                      }}
                      onClick={() =>
                        handleRefundPaymentMode(
                          payment?.ConfigId,
                          payment?.ConfigName
                        )
                      }
                    >
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '0.5rem',
                        }}
                      >
                        {mode === 'cash' && <FaMoneyBillWave />}
                        {mode === 'upi' && <FaMobileScreenButton />}

                        {mode === 'credit' && (
                          <>
                            <img src={Credit} alt="" width={20} />
                          </>
                        )}
                        {payment?.ConfigName}
                      </div>
                    </button>
                  </div>
                );
              })
            ) : (
              <div
                onClick={handlePaymentOptions}
                style={{ cursor: 'pointer' }}
                className="payment-error-msg"
              >
                Please Set Payment Options
              </div>
            )}
          </div>
        </Tooltip>

        <Tooltip title="Create Bill (F4)" isMobile={isMobile}>
          <div
            className={
              addnewAccess
                ? 'standard-pay-btn-disabled'
                : FirstPaymentclick === false &&
                  orderCardDetail?.length > 0 &&
                  paybtnselected &&
                  CheckBookingStatus !== 'Close'
                  ? !OrderStatus
                    ? salesBillEdit && currentOrderNetAmount < previousNetAmount
                      ? 'standard-pay-btn-refund'
                      : 'standard-pay-btn'
                    : 'standard-pay-btn order-complete'
                  : 'standard-pay-btn-disabled'
            }
            onClick={handleButtonClick}
          >
            {!OrderStatus ? (
              salesBillEdit && currentOrderNetAmount < previousNetAmount ? (
                <p>
                  Refund: ₹
                  {(previousNetAmount || 0) - (currentOrderNetAmount || 0)}
                </p>
              ) : (
                <>
                  <p
                    className="standard-pay-amount"
                    style={{ fontFamily: FontFamily['head'] }}
                  >
                    {isMobile ? (
                      `₹ ${safeRound(
                        OrderType === 'Failed'
                          ? FailedTotalAmt
                          : credit && overAllBal >= 0
                            ? Math.max(0, TotalAmount - overAllBal)
                            : TotalAmount
                      )}`
                    ) : (
                      <div>
                        ₹{' '}
                        <CountUp
                          duration={0.4}
                          className="counter"
                          end={safeRound(
                            OrderType === 'Failed'
                              ? FailedTotalAmt
                              : credit && overAllBal >= 0
                                ? Math.max(0, TotalAmount - overAllBal)
                                : TotalAmount
                          )}
                        />
                      </div>
                    )}
                  </p>

                  <div className="standard-pay-arrow">
                    <BiRightArrowAlt size={25} />
                  </div>
                </>
              )
            ) : (
              <div className="standard-pay-order-label">ORDER</div>
            )}
          </div>
        </Tooltip>

        <DefaultModal
          open={unpaidopen}
          title="UNPAID BILL'S"
          width={1000}
          handleCancel={() => {
            setUnpaidOpen(false);
          }}
          footer={false}
          children={
            <div style={{ height: '400px', overflow: 'scroll' }}>
              <Tables
                columns={columns}
                data={TableData}
                dataSource={TableData}
              // pagination={handlePageChange}
              // onChange={handleChange}
              />
            </div>
          }
        />
        {UnpaidConfirmation && (
          <Modal
            open={UnpaidConfirmation}
            width={500}
            children={
              <>
                <div>
                  You have already selected a table. If you click 'OK,' the
                  table selection will be removed, and the unpaid flow will
                  continue. If you click 'Cancel,' the dine-in flow will proceed
                  as selected.
                </div>
              </>
            }
            onOk={UnpaidOk}
            onCancel={Unpaidclose}
          />
        )}

        {UpiOpen && (
          <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={
                        OrderType === 'Failed'
                          ? FailedTotalAmt
                          : Math.round(TotalAmount)
                      }
                      UpiId={UpiId}
                    />
                  </div>

                  <div>
                    <h1>
                      {' '}
                      RS :
                      {OrderType === 'Failed'
                        ? FailedTotalAmt
                        : Math.round(TotalAmount)}{' '}
                    </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>
            }
          />
        )}
        {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}
                Preference={preferenceDatas}
                printDatas={printDatas}
              />
            </div>
          ))}
        {PrintOrderDetails?.length > 0 &&
          (TokenOnly?.SettingValue === 'Y' ||
            IndividualToken?.SettingValue === 'Y') &&
          PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
            <div style={{ display: 'none' }}>
              <TokensinglePrint
                index={index}
                table2Data={orderDetail}
                singleData2={orderDetail?.productDetails}
                orderId={
                  orderDetail?.OrderId &&
                  extractLastNumberOrderId(
                    orderDetail?.OrderId,
                    orderDetail?.FYStatus
                  )
                }
                CreatedDate={orderDetail?.CreatedDate}
                PaymentStatus={PrintOrderDetails?.[0]?.PaymentOrderDtl}
              />
            </div>
          ))}
        {CreditCustomer && (
          <div style={{ display: 'none' }}>
            <BsBillingCreditCustomer
              ModalCreditCustomer={CreditCustomer}
              handlemodalclose={() => {
                handleCreditCustomer('Cancel');
              }}
              handleOk={() => {
                handleCreditCustomer('Submit');
              }}
            />
          </div>
        )}

        {creditCustomerOpen && (
          <BSCreditCustomer
            creditCustomerOpen={creditCustomerOpen}
            CreditCustomerHAndleCancel={CreditCustomerHAndleCancel}
          />
        )}
        {Splitpayment && (
          <SplitPayment
            SplitPaymentModal={Splitpayment}
            handlesplitpaymentclose={handlesplitpaymentclose}
            TotalNetAmount={Math.round(
              orderCardDetail?.reduce((acc, data) => data?.TotalAmt + acc, 0) -
              ((OverAllSales > 0 ? OverAllSales : 0) +
                (OverAllEstimate > 0 ? OverAllEstimate : 0) +
                (Discount > 0 ? Discount : 0))
            )}
          // failedOrderData={failedOrderData}
          />
        )}

        <DefaultModal
          className={'paymentoptionsModal'}
          open={GlobalSalesPaymentoptions}
          width={500}
          height={1000}
          handleCancel={() => {
            dispatch(changeSalesPaymentoption(false));
          }}
          footer={false}
          children={
            <div
              className="paymentoptionsModalContent"
              style={{ overflow: 'scroll' }}
            >
              <Paymentoption onSuccess={getPaymentOptionFeature} />
            </div>
          }
        />
        <DefaultModal
          open={businessUPI}
          handleCancel={() => setShowCancelConfirm(true)}
          footer={false}
          width={600}
          className={'ModalPaymentGatewayEmbedded'}
          children={
            <>
              <PaymentGatewayEmbedded
                ref={paymentGatewayRef}
                orderId={businessUPIOrderId}
                setBusinessUPIOrderId={setBusinessUPIOrderId}
                businessUPILink={businessUPILink}
                setBusinessUPI={setBusinessUPI}
                setPaymentSuccess={setPaymentSuccess}
                paymentSucess={paymentSucess}
                ClearAllGlobalStateDatas={ClearAllGlobalStateDatas}
                CustomerDisplay={CustomerDisplay}
              />
            </>
          }
        />
        {showCancelConfirm && (
          <Modal
            open={showCancelConfirm}
            title="Cancel Payment"
            onOk={() => {
              paymentGatewayRef.current?.clearPolling();
              setBusinessUPI(false);
              setShowCancelConfirm(false);
              ClearAllGlobalStateDatas();
              CustomerDisplay();
            }}
            onCancel={() => setShowCancelConfirm(false)}
            okText="Yes"
            cancelText="No"
          >
            Do you want to cancel the payment?
          </Modal>
        )}
        {customerPreviesOrders && (
          <DefaultModal
            open={customerPreviesOrders}
            handleCancel={() => setCustomerPreviesOrders(false)}
            footer={false}
            width={700}
            className={'ModalPaymentGatewayEmbedded'}
            children={
              <>
                <CustomerOrders
                  CustomerDetails={selOption}
                  close={() => setCustomerPreviesOrders(false)}
                />
              </>
            }
          />
        )}
        {OtherServicesPrintDetails?.length > 0 && (
          // PrintOrderDetails?.[0]?.OrderDetails?.map((orderDetail, index) => (
          <div style={{ display: 'none' }}>
            <OtherServicePrintStyle1
              // index={index}
              table2Data={OtherServicesPrintDetails}
              singleData2={OtherServicesPrintDetails?.productDetails}
              orderId={
                OtherServicesPrintDetails?.OrderId &&
                extractLastNumberOrderId(
                  OtherServicesPrintDetails?.OrderId,
                  OtherServicesPrintDetails?.FYStatus
                )
              }
              CreatedDate={OtherServicesPrintDetails?.CreatedDate}
              PaymentStatus={OtherServicesPrintDetails?.[0]?.PaymentOrderDtl}
              Preference={preferenceDatas}
              printDatas={printDatas}
            />
          </div>
        )}
      </div>
    </Suspense>
  );
};

export default StandardTablePayment;