import React, { useEffect, useState, useRef } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import moment from 'moment';
import { Badge, Popover, Modal, Tooltip } from 'antd';
import { BiRightArrowAlt } from 'react-icons/bi';
import { AiOutlineClose } from 'react-icons/ai';
import BSSummery from '../BSBillingTableSummery/BSSummery.jsx';
import BSBillingTable7 from './BSBillingTable7';
import { UpCircleOutlined } from '@ant-design/icons';
import '../../../../../Styles/BookingScreen/Components/BSBillingTables/BSBillingTable4/BSBillingTable4.scss';
import {
  GlobalSelectedFont,
  getTemplateData,
  SelectedPrintTemplate,
  StoredSessionData,
  GlobalprintDatas,
  GlobalPrinterMappingDtls,
  getPrinterMappingDetails,
  // getPrintSelectionComponentData,
} from '../../../../../Features/ThemeChange/ThemeChange.js';
import { PrintStyleFunction } from '../../../../paymentpdfPage/PrintStyleFunction.js';
import FeaturesFunctionalities from '../../BookingFunctionality/FeaturesFunctionalities.jsx';
import {
  ChangeNavHoldData,
  GlobalBookingType,
  GlobalCustId,
  GlobalNavHoldData,
  GlobalOrderCardDetails,
  GlobalReorderHoldDetails,
  GlobalSelectedTableDetails,
  PostBookingData,
  PutBookingData,
  changeBookingType,
  changeOrderCardDetails,
  changeReorderHoldDetails,
  getConfigType,
  getUnpaidData,
  getSelectedFavItems,
  GlobalProductSubCategorie,
  getCardDataWithoutSub,
  getCardDataWithoutSubmodule,
  GlobalProductCategorie,
  changeSelectedCustId,
  GlobalSelCustId,
  getLayoutproductCard,
  changeSelectedOption,
  GlobalSelOption,
  changeCustomerID,
  changeUnpaidData,
  ChangeSelectedCustDisable,
  GlobalSelectedCustDisable,
  SendPaymentLink,
  getSalesDetailData,
  changeSummeryTotalAmount,
  changeUpiIDprint,
  changeSummeryTotalItems,
  changeSummeryTotalWithoutTaxAmount,
  changeSummeryTotalTaxAmount,
  changeSummeryQty,
  GlobalEstimateBooking,
  GlobalSelProdWiseEst,
  changeSelProdWiseEst,
  GlobalUpiIDprint,
  changeUpiIDName,
  GlobalUpiIDName,
  changeUpiIDoptionId,
  GlobalUpiIDoptionId,
  GlobalBookingTypeBoth,
  changeSelectTable,
  changeSelectChair,
  changeSelectedTableDetails,
  changeReorderProductDetails,
  GlobalCommonPaymentOptions,
  PostPaymentdevice,
  GetPaymentdeviceResponse,
  PutBookingPaymentStatusChange,
  changePaymentloader,
  GlobalPayementloader,
  PaymentGatewayGetdetail,
  changePaymentTransactionNumber,
  Globalunpaidflow,
  changeunpaidflow,
  PutPendingPaymentList,
  ChangeInitialPaymentName,
  PreferenceData,
  changeOrderType,
  GlobalOrderType,
  GlobalFailedTotalAmt,
  putSplitpaymentStatus,
  GlobalUnpaidListData,
  GlobalScreenSize,
  GlobalOverAllDiscEstimate,
  GlobalOverAllDiscSales,
  ChangeOverAllDiscSales,
  ChangeOverAllDiscEstimate,

  GlobalBranchFinancialStatus,
  changeSummeryComboOfferAmount,
  ChangeComboCarddata,
  GlobaltipAmount,
  changeTipAmount,
  GlobalOtherSevices,
  GlobalOtherServiceTicketClaim,
  changeOtherServiceTicketClaim,
  GlobalRetailWSSalesType,
  GlobalDefaultBookingType,
  GlobalPaymentTrigger,
  GlobalCurrentOrderId,
  changeCurrentOrderId,
  GlobalCombocarddata,
  getCreditCustomer,
  GlobalSalesBillEdit,
  GlobalPreviousOrderPayment,
  GlobalPreviousOrderOfferDetails,
  GlobalpaymentOptionData,
  getPaymentOptions,
  putSalesBillEdit,
  changeBillEditingMode,
  changePreviousOrderPayment,
  changePreviousOrderOfferDetail,
  GlobalAllBookingType,
} from '../../../../../Features/BookingScreen/BookingData/BookingData.js';
import {
  globalExtraTotalAmount,
  ChangeTotalAmount,
} from '../../../../../Features/ExteraCharges/ExtraCharges.js'; // Shifayath Date:27/12/2023
import {
  encryptObject,
  extractLastNumberOrderId,
  printDiv,
} from '../../../../../Services/Others.js';
import {
  getAddCustomerDetails,
  getDefaultPaymentOptions,
  GlobalAddCustomerDetails,
  triggerCustomerRefresh,
  VerifiedPaymentDtl,
} from '../../../../../Features/BookingScreen/Customer/addCustomer.js';
import {
  changeholddata,
  gettinghold,
  globalholddata,
} from '../../../../../Features/BookingScreen/HoldOption/HoldOption.js';
import { Messages } from '../../../../../Components/Notifications/Messages.jsx';
import PaymentPdfBooking from '../../../../paymentpdfPage/PaymentPdfBooking.jsx';
import { DefaultModal } from '../../../../../Components/Modal/DefaultModal.jsx';
import { Tables } from '../../../../../Components/Tables/Table.jsx';
import paygate from '../../../../../Images/paygate.png';
import defaultupi from '../../../../../Images/defaultupi.png';
import paydevice from '../../../../../Images/paydevice.png';
import BSCustomerSelect from '../../UtillComponents/BSSelectCustomer.jsx';
import PozoHoldIcon from '../../UtillComponents/Pozo retail icons/PozoHoldIcon.jsx';
import PozoDineInIcon from '../../UtillComponents/Pozo retail icons/PozoDineIn.jsx';
import PozoUnpaidIcon from '../../UtillComponents/Pozo retail icons/PozoUnpaidIcon.jsx';
import PozoBillIcon from '../../UtillComponents/Pozo retail icons/PozoBIllIcon.jsx';
import PozoAddCustomerIcon from '../../UtillComponents/Pozo retail icons/PozoAddCustomerIcon.jsx';
import QrinScreen from '../../BookingFunctionality/DynamicScreenQr.jsx';
import { ArrowRightOutlined } from '@ant-design/icons';
import Buttons from '../../../../../Components/Forms/Buttons';
import WpIcon from '../../../../../Images/message.png';
import BsBillingCreditCustomer from '../../BookingFunctionality/BSBillingCreditCustomer.jsx';
import BSCreditCustomer from '../../UtillComponents/BSCreditCustomer.jsx';
import PozoAdvanceIcon from '../../UtillComponents/Pozo retail icons/PozoAdvanceIcon.jsx';
import { isMobile } from 'react-device-detect';
import MobilePrint from '../../BookingFunctionality/MobilePrint.jsx';
import CountUp from 'react-countup';
import { GlobalpreOrderOpen } from '../../../../../Features/BookingScreen/PreOrder/PreOrder.js';
import SplitPayment from '../../BookingFunctionality/SplitPayment.jsx';
import TokensinglePrint from '../../../../paymentpdfPage/TokenOnlyPrints/TokeninsinglePrint.jsx';
import SingleTokenMobilePrint from '../../BookingFunctionality/SingleTokenMobilePrint.jsx';
import IndividualTokenMobilePrint from '../../BookingFunctionality/IndividualTokenMobilePrint.jsx';
import { getCustomerDisplayWindow } from '../../../../../Features/customerDisplayWindow/customerDisplayWindow.js';
import { getEmpAccess } from '../../../../../Features/AppPage/CenterPage.js';
import PozoSplitPaymentIcon from '../../UtillComponents/Pozo retail icons/PozoSplitPaymentIcon.jsx';
import PozoCartIcon from '../../../../../Pages/BookingScreen/Components/UtillComponents/PozoCartIcon.jsx';
import {
  Global_OrderOfferDetail,
  Global_OverallOfferAmount
} from '../../../../../Features/Offer/Offer.js';
import { useApplyOfferto_CardDetail } from '../../UtillComponents/BSNavBarOffer/BSNavBarOffer_CustomHooks.jsx';
import TooltipWrapper from '../../../../../Components/Tooltip/Tooltip';
import { useAuth } from '../../../../../AuthContext.jsx';
import { GlobalBookingStatus } from '../../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
import {
  changeSalesPaymentoption,
  GlobalSalesPaymentoption,
} from '../../../../../Features/Payment/Paymentoptions/Paymentoptions.js';
import Paymentoption from '../../../../Payment/PaymentOptions/PaymentOptions.jsx';
import { getPaymentOptionsData } from '../../../../../Features/BookingScreen/BookingData/KioskBookingData.js';
import { getCombolist } from '../../../../../Features/ComboMaster/ComboMaster.js';
import WhatsAppShare from '../../../../WhatsAppShare/whatsAppShare.jsx';
import SMSShare from '../../../../WhatsAppShare/SmsShare.jsx';
import { MdSms } from 'react-icons/md';
import { FaWhatsapp, FaPrint, FaCartPlus } from 'react-icons/fa';
import BSTipAmount from '../../UtillComponents/BSTipAmount.jsx';
import { ApplicationPreferences } from '../../../../../Features/BrachLogin/BranchLogin.js';
import { TfiClipboard } from 'react-icons/tfi';
import { PostOtherServices } from '../../../../../Features/OtherServices/OtherServices.js';
import OtherServicePrintStyle1 from '../../../PrintTemplates/ThermalPrinter/OtherServicePrintStyle1.jsx';
import BSOtherServiceClaim from '../../UtillComponents/BSOtherServiceClaim.jsx';
import { MobilePdfPrint } from '../../BookingFunctionality/MobilePdfPrint.js';
import { PublicQrCodepost } from '../../../../../Features/ConfigMasterPage/ConfigMasterPage.js';
import {
  ChangeFullFreeProductList,
  changeFullOfferAppliedProducts,
  changeLoyaltyConsumedQuantities,
  GlobalFreeProdList,
  GlobalOfferAppliedProducts,
  GlobalOverAllOfferAmt,
} from '../../../../../Features/Offer/Offernew/BookingOffernew.js';
import OtherServiceMobilePrint from '../../BookingFunctionality/OtherServiceMobilePrint.jsx';
import CardPopover from '../StandardTable/Utils/CardPopover.jsx';
import UpiPopover from '../StandardTable/Utils/UpiPopOver.jsx';
import pozologoimg from '../../../../../Images/pozologoimg.png';
import PaymentGatewayEmbedded from '../../UtillComponents/PaymentGatewayEmbedded.jsx';
import MobileMultiPdfPrintTrigger from '../../UtillComponents/MobileMultiPdfPrintTrigger.jsx';
import { useDateStore } from '../../../../../Features/BookingScreen/BookingData/DateStore.js';
import CustomerOrders from '../../BookingFunctionality/CustomerOrders.jsx';
const subDirectory = import.meta.env.ENV_BASE_URL;
const MainHomeUrl = import.meta.env.ENV_MAIN_BASE_URL;
const RetailApiurl = import.meta.env.ENV_API_URL;

const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');

const BSBilling7Payment = () => {
  const isF4Pressed = useRef(false);
  const applyOffer = useApplyOfferto_CardDetail();
  const { SadminuserAccess } = useAuth();
  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Sales'
  );
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const salesBillEdit = useSelector(GlobalSalesBillEdit);
  const previousOrderPayment = useSelector(GlobalPreviousOrderPayment);
  const previousOrderOfferDetails = useSelector(GlobalPreviousOrderOfferDetails);
  const AllPaymentOptions = useSelector(GlobalpaymentOptionData);
  const Discount = useSelector(GlobalOverAllOfferAmt);
  const screenwidth = useSelector(GlobalScreenSize);
  const defaultBookingType = useSelector(GlobalDefaultBookingType);
  const printerTemplateStyle = useSelector(SelectedPrintTemplate);
  const AllBookingType = useSelector(GlobalAllBookingType)
  const FontFamily = useSelector(GlobalSelectedFont);
  const OrderCardDetail = useSelector(GlobalOrderCardDetails);
  const GetCustId = useSelector(GlobalCustId);
  const SelCustId = useSelector(GlobalSelCustId);
  const GlobalUpiID = useSelector(GlobalUpiIDprint);
  const selOption = useSelector(GlobalSelOption);
  const SelectedTableDetails = useSelector(GlobalSelectedTableDetails);
  const GlobalAddCustomerDetails1 = useSelector(GlobalAddCustomerDetails);
  const Holddata = useSelector(globalholddata);
  const ReportholdData = useSelector(GlobalReorderHoldDetails);
  const BookingType = useSelector(GlobalBookingType);
  const BookingTypeBoth = useSelector(GlobalBookingTypeBoth);
  const globalTipAmount = useSelector(GlobaltipAmount);
  const OtherServiceTicketClaim = useSelector(GlobalOtherServiceTicketClaim);
  const RetailWSSalesType = useSelector(GlobalRetailWSSalesType);
  const [SelectedBookingType, setSelectedBookingType] = useState(null);
  const [PaymentOptions, setPaymentOptions] = useState([]);
  const [PaymentUpiOptions, setPaymentUpiOptions] = useState([]);
  const GlobalExtraCharge = useSelector(globalExtraTotalAmount);
  const NavHoldData = useSelector(GlobalNavHoldData);
  const GlobalUpName = useSelector(GlobalUpiIDName);
  const GlobalUpiIDoptionIdd = useSelector(GlobalUpiIDoptionId);
  const prodCat = useSelector(GlobalProductCategorie);
  const ProdSubCat = useSelector(GlobalProductSubCategorie);
  const templateData = useSelector(getTemplateData);
  const appPreferences = useSelector(ApplicationPreferences);
  const Combodata = useSelector(GlobalCombocarddata, shallowEqual);
  const bookingTypePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Booking Type'
  )?.PreferenceCatDetails;
  const dinePreference = bookingTypePreference?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
      type?.PreferredStatus === 'Y'
  );
  const tableOptions = templateData?.BookingBilling?.[1];
  const OfferCheckedInSetup = templateData?.BookingNavbar?.[1].some(
    (item) => item?.OptionName == 'Offer'
  );
  const SettingDataSelector = useSelector(PreferenceData);
  const preferenceOffer =
    SettingDataSelector?.[0]?.['SettingDtlDetails']?.find(
      (item) => item.SettingIdName === 'Offer'
    )?.SettingValue === 'Y';
  const allowDecimal = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'decimal' &&
      setting?.SettingValue === 'Y'
  );
  const Weightasquantity = SettingDataSelector?.[0]?.SettingDtlDetails?.some(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'weightasquantity' &&
      setting?.SettingValue === 'Y'
  );
  const Custombill = SettingDataSelector?.[0]?.SettingDtlDetails?.some(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'customisedbillnumber' &&
      setting?.SettingValue === 'Y'
  );

  const FreeProdList = useSelector(GlobalFreeProdList);
  const offerAppliedProducts = useSelector(GlobalOfferAppliedProducts);
  const GlobEstBooking = useSelector(GlobalEstimateBooking);
  const GlobProdwisedata = useSelector(GlobalSelProdWiseEst);
  const preOrder = useSelector(GlobalpreOrderOpen);
  const OrderType = useSelector(GlobalOrderType);
  const FailedTotalAmt = useSelector(GlobalFailedTotalAmt);
  const defaultPaymentTrigger = useSelector(GlobalPaymentTrigger);
  const [defaultPaymentMode, setDefaultPaymentMode] = useState([]);
  const [defaultEnabled, setDefaultEnabled] = useState(false);
  const [selectCustomerDisplay, setSelectCustomer] = useState(false);
  const [paymentModeDisplay, setPaymentModeDisplay] = useState(true);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const SessionData = useSelector(StoredSessionData);
  const AppId = SessionData?.AppId;
  const CompId = SessionData?.CompId;
  const BranchId = SessionData?.BranchId;
  const UserId = SessionData?.UserId;
  const UserType = SessionData?.UserType;
  const [FirstPaymentclick, setFirstPaymentclick] = useState(false);
  const [open, setOpen] = useState(false);
  const [unpaidopen, setUnpaidOpen] = useState(false);
  const unpaidFlow = useSelector(Globalunpaidflow);
  const [open2, setOpen2] = useState(false);
  const [paybtns, setpaybtns] = useState([]);
  const [paybtnselected, setPaybtnselected] = useState();
  const [Paybtnnameselected, setPaybtnnameselected] = useState();
  const [credit, setCredit] = useState(false);
  const [overAllBal, setOverAllBal] = useState(0);
  const [SelectedCardOption, setSelectedCardOption] = useState(null);
  const [SelectedUPIPayOption, setSelectedUPIPayOption] = useState('Default');
  const [SelectedUpiOption, setSelectedUpiOption] = useState();
  const [hold, setHold] = useState(false);
  const [refundPayBtns, setRefundPayBtns] = useState([]);
  const [refundPaySelected, setRefundPaySelected] = useState();
  const [refundPaySelectedName, setRefundPaySelectedName] = useState(null);
  const [currentOrderNetAmount, setCurrentOrderNetAmount] = useState(0);
  const [previousNetAmount, setPreviousNetAmount] = useState(0);
  const [addcustomer, setAddCustomer] = useState(false);
  const [PrintOrderDetails, setPrintOrderDetails] = useState([]);
  const [customerPreviesOrders, setCustomerPreviesOrders] = useState(false); const OverAllSales = useSelector(GlobalOverAllDiscSales);
  const OverAllEstimate = useSelector(GlobalOverAllDiscEstimate);
  //Total calculation
  const TotalItems = OrderCardDetail?.length;
  // const [TotalWithoutTaxAmount, setTotalWithoutTaxAmount] = useState("");
  // const [TotalTaxAmount, setTotalTaxAmount] = useState("");
  const [formattedDate, setFormattedDate] = useState('');
  const [UpiOptionOpen, setUpiOptionOpen] = useState(false);
  const Qty = 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);
  console.log(salesBillEdit, currentOrderNetAmount, previousNetAmount, "previousNetAmount")
  const [UpiOption, setUpiOption] = useState('');
  const [BusinessPayOption, setBusinessPayoption] = useState([]);
  const [paymentSucess, setPaymentSuccess] = useState(false);
  const [businessUPI, setBusinessUPI] = useState(false);
  const [businessUPIOrderId, setBusinessUPIOrderId] = useState(null);
  const [businessUPILink, setBusinessUPILink] = useState(null);
  const [CardOptionOpen, setCardOptionOpen] = useState(false);
  const [UpiId, setUpiId] = useState();
  const [qrCode, setQrCode] = useState(false);
  const tabledata = useSelector(GlobalUnpaidListData);
  const GlobalSalesPaymentoptions = useSelector(GlobalSalesPaymentoption);

  const UomPrint = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
    (i) => i.SettingIdName === 'PrintUom'
  )?.[0];
  const Estimation = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (item) => item.SettingIdName == 'Estimation'
  );
  const [UpinotSelected, setUpinotSelected] = useState(false);
  const [CardoptionnotSelected, setCardoptionnotSelected] = useState(false);
  const Custdisable = useSelector(GlobalSelectedCustDisable);
  const [brachName, setbrachName] = useState('');
  const [UpiOpen, setUpiOpen] = useState(false);
  const [CreditCustomer, setCreditCustomer] = useState(false);
  const [creditCustomerOpen, setcreditCustomerOpen] = useState(false);
  const [ConfigDataList, setConfigDataList] = useState([]);
  const [OrderStatus, setOrderStatus] = useState(true);
  const [PaymentgatewayCard, setPaymentgatewayCard] = useState([]);
  const [PaymentDeviceCard, setPaymentDeviceCard] = useState([]);
  const [PaymentgatewayUPI, setPaymentgatewayUPI] = useState([]);
  const [PaymentDeviceUPI, setPaymentDeviceUPI] = useState([]);
  const [UpiPayOption, setUpiPayOption] = useState([]);
  const [CardPayOption, setCardPayOption] = useState([]);
  const [Splitpayment, setSplitpayment] = useState(false);
  const [urlData, setUrlData] = useState();
  const GlobaluseOptions = useSelector(GlobalCommonPaymentOptions);
  const [useOptions, setuseOptions] = useState([]);
  const paymentloader = useSelector(GlobalPayementloader);

  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 CheckOrderType = OrderCardDetail?.filter(
    (a) => a?.BookingTypeName !== BookingType
  );
  const TokenOnly = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
    (i) => i.SettingIdName === 'TokenOnly'
  )?.[0];
  const IndividualToken = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
    (i) => i.SettingIdName === 'AllProductindividualToken'
  )?.[0];
  const ParkingDisplay = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'parking' &&
      setting?.SettingValue === 'Y'
  );
  const MobileA4Print = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'mobilea4' &&
      setting?.SettingValue === 'Y'
  );
  const UpiQRPreference = SettingDataSelector?.[0]?.SettingDtlDetails?.find(
    (setting) =>
      setting?.SettingIdName?.toLowerCase() === 'upiqr' &&
      setting?.SettingValue === 'Y'
  );
  const preferenceshortcutkey =
    SettingDataSelector?.[0]?.SettingDtlDetails?.some(
      (setting) =>
        setting?.SettingIdName?.toLowerCase() === 'shortcutkeys' &&
        setting?.SettingValue === 'Y'
    );

  const [UnpaidConfirmation, setUnpaidConfirmation] = useState(false);
  const [unpaidselectedindex, setunpaidselectedindex] = useState();
  const [failedOrderData, setFailedOrderData] = useState();
  const [responsiveBill, setResponsiveBill] = useState(true);
  const [empData, setEmpData] = useState();
  const [addnewAccess, setaddnewAccess] = useState(true);
  const [blink, setBlink] = useState(false);
  const BookingStatus = useSelector(GlobalBookingStatus);
  const CheckBookingStatus =
    BookingStatus?.find((item) => item.ScreenType === 'Booking')
      ?.ScreenStatus ?? 'Open';
  const OverallOfferAmount = useSelector(Global_OverallOfferAmount);

  const [TotalAmount, setTotalAmount] = useState(0);
  const [showWhatsAppShare, setShowWhatsAppShare] = useState(false);
  const [showSMSShare, setSMSShare] = useState(false);
  // Usage
  const allowedNames = ['whatsapp', 'Print', 'SMS'];
  const [MobileNoWhatsApp, setMobileNoWhatsApp] = useState();
  const printDatas = useSelector(GlobalprintDatas);
  const PrinterDetails = useSelector(GlobalPrinterMappingDtls);
  const OtherServicesglobal = useSelector(GlobalOtherSevices);
  const [OtherServicesModal, setOtherServicesModal] = useState(false);
  const [vehicleInputs, setVehicleInputs] = useState({});
  const [errors, setErrors] = useState({});
  const [OtherServicesPrintDetails, setOtherServicesPrintDetails] = useState(
    []
  );
  const [showCancelConfirm, setShowCancelConfirm] = useState(false);
  // for customised invoice number
  const { invoiceDate, clearInvoiceDate } = useDateStore();
  const CurrentOrderId = useSelector(GlobalCurrentOrderId);
  const holdCheckedSalesSetup = tableOptions?.some(
    (item) => item?.OptionName === 'Hold'
  );

  const filteredSettingNames = SettingDataSelector?.[0]?.['SettingDtlDetails']
    ?.filter(
      (item) =>
        allowedNames.includes(item?.SettingIdName) && item?.SettingValue === 'Y'
    )
    ?.map((item) => item?.SettingIdName);

  useEffect(() => {
    if (
      OrderCardDetail?.length === 1 &&
      OrderCardDetail?.[0]?.OrderQty === 1 &&
      !SelCustId
    ) {
      console.log(OrderCardDetail, 'OrderCardDetail');
      closePrintOption();
      setPrintOrderDetails([]);
    }
  }, [OrderCardDetail]);
  useEffect(() => {
    if (selOption) {
      closePrintOption();
      setMobileNoWhatsApp(selOption);
    }
  }, [selOption]);

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

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


  // Usage
  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 (!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 - withComboSum
          : totalSum + extra - OverallOfferAmount - withComboSum;

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

      // if (withdiscTotal <= 0) {
      //   dispatch(ChangeOverAllDiscSales(0));
      //   dispatch(ChangeOverAllDiscEstimate(0));
      // }
    } else {
      setTotalAmount(0);
      dispatch(changeSummeryTotalAmount(0));
      dispatch(changeSummeryComboOfferAmount(0));
    }
  }, [
    OrderCardDetail,
    GlobalExtraCharge,
    OverAllSales,
    OverAllEstimate,
    globalTipAmount,
    OtherServiceTicketClaim,
    Discount,
  ]);
  useEffect(() => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
    };
    dispatch(getPrinterMappingDetails(data)).unwrap();
    // const Data1 = { AppId, CompId, BranchId };
    // dispatch(getPrintSelectionComponentData(Data1)).unwrap();
  }, []);
  useEffect(() => {
    if (CompId && BranchId && AppId) {
      if (holdCheckedSalesSetup) {
        getHolddata();
      }
      // getUnpaiddatas();
      getCustomerData();
    }
  }, [CompId, BranchId, AppId]);

  useEffect(() => {
    gettodaydate();
    getBookingTypeId();
    getPaymentOptionFeature();
    // if (UserType === "Employee") {
    //   fetchApi()
    // }
  }, []);
  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]);
  useEffect(() => {
    if (UserType === 'Employee') {
      fetchApi();
    }
  }, [UserType]);
  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(() => {
  //   const handleKeyPress = (event) => {
  //     if (event.shiftKey && event.code === 'KeyM') {
  //       if (
  //         document.activeElement.tagName !== 'INPUT' &&
  //         document.activeElement.tagName !== 'TEXTAREA'
  //       ) {
  //         event.preventDefault();
  //         setBlink(true);
  //       }
  //     }
  //   };
  //   const handleClickOutside = (event) => {
  //     setBlink(false);
  //   };
  //   window.addEventListener('keydown', handleKeyPress);
  //   window.addEventListener('mousedown', handleClickOutside);
  //   return () => {
  //     window.removeEventListener('keydown', handleKeyPress);
  //     window.addEventListener('mousedown', handleClickOutside);
  //   };
  // }, []);
  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 formatAmount = (value) => {
    return allowDecimal
      ? parseFloat(value || 0).toFixed(2)
      : parseInt(value || 0);
  };
  const getCustomerData = async () => {

    await dispatch(
      getAddCustomerDetails({
        CompId: CompId,
        AppId: AppId,
        branchId: BranchId,
      })
    );
  };

  useEffect(() => {
    if (OrderCardDetail?.length <= 0) {
      dispatch(changeCustomerID(null));
      dispatch(changeSelectedCustId());
      dispatch(changeSelectedOption(null));
      dispatch(ChangeSelectedCustDisable(false));
    }
  }, [OrderCardDetail]);
  //mohan stoped data
  useEffect(() => {
    if (
      (BookingType === 'Dine In' ||
        BookingTypeBoth ||
        CheckOrderType?.length > 0) &&
      !unpaidFlow &&
      SelectedTableDetails?.length !== 0
    ) {
      setOrderStatus(true);
    } else {
      setOrderStatus(false);
    }
  }, [BookingTypeBoth, BookingType, unpaidFlow]);
  //mohan end

  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();
    }
  };

  useEffect(() => {
    if (NavHoldData) {
      AddBookingDetails('Hold');
    }
  }, [NavHoldData]);
  useEffect(() => {
    if (SelCustId) {
      setpaybtns(PaymentOptions);
    } else {
      const withoutCustomer = PaymentOptions?.filter?.(
        (item) => item?.ModeName?.toLowerCase() !== 'credit'
      );

      setpaybtns(withoutCustomer);
    }
  }, [PaymentUpiOptions, PaymentOptions, SelCustId]);
  useEffect(() => {
    getPaymentOptionFeature();
  }, [GlobaluseOptions]);

  //dhana
  // Function to check if the button is active
  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;
  };

  // Function to handle the button click
  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 financialYearError = async () => {
    setMessageType('error');
    setMessageData('Financial Year-Based Sales Not Yet Started');
  };

  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 === 'w' &&
        BookingType !== 'Dine In' &&
        tableOptions?.some((e) => e?.OptionName == 'Hold') &&
        paybtns?.length > 0
      ) {
        event.preventDefault();
        if (
          OrderCardDetail?.length > 0 &&
          CheckBookingStatus !== 'Close' &&
          !addnewAccess
        ) {
          AddBookingDetails('Hold', false);
        } else if (
          Holddata?.length > 0 &&
          OrderCardDetail?.length === 0 &&
          CheckBookingStatus !== 'Close' &&
          !addnewAccess
        ) {
          HandleholdModelOpen();
        }
      }

      // Alt+S for Split Payment
      if (event.altKey && event.key === 's' && paybtns?.length > 1) {
        event.preventDefault();
        if (
          OrderCardDetail?.length > 0 &&
          CheckBookingStatus !== 'Close' &&
          !addnewAccess &&
          !unpaidFlow &&
          !OrderStatus
        ) {
          SplitPaymentOpen();
        }
      }
    };

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

  //dhana

  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 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);
    }
  };
  // useEffect(() => {
  //   if (
  //     PrintOrderDetails?.length > 0 &&
  //     (!filteredSettingNames ||
  //       filteredSettingNames?.includes('Print') ||
  //       filteredSettingNames?.length === 0) &&
  //     (
  //       (!filteredSettingNames?.includes('whatsapp') &&
  //         (!isMobile || !filteredSettingNames?.includes('SMS'))) ||
  //       (
  //         (filteredSettingNames?.includes('whatsapp') ||
  //           (isMobile && filteredSettingNames?.includes('SMS'))) &&
  //         (!MobileNoWhatsApp || Object.keys(MobileNoWhatsApp).length === 0)
  //       )
  //     )
  //   ) {

  //     handlePrintOrToken();
  //   }
  // }, [PrintOrderDetails]);

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

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

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

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

  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'
      );
    const PrintLogo = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
      (i) => i.SettingIdName === 'PrintLogo'
    )?.[0];
    const PrintGreeting = SettingDataSelector?.[0]?.SettingDtlDetails?.filter(
      (i) => i.SettingIdName === 'PrintGreetings'
    )?.[0];
    const preferenceDetails = SettingDataSelector?.[0]?.SettingDtlDetails;
    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',
            SettingDataSelector
          );
          closePrintOption();
        }
      }
    } else {
      if (Tokenthere && TokenOnly?.SettingValue === 'Y' && !dinein) {
        AllProductTokenFunction();
      } else {
        Print();
      }
    }
  };
  const AllProductTokenFunction = async () => {
    if (IndividualToken?.SettingValue === 'Y') {
      await Promise.all(
        PrintOrderDetails?.[0]?.OrderDetails?.map(
          async (orderDetail, index) => {
            const groupedTokens = orderDetail?.productDetails?.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?.map(
          async (orderDetail, index) => {
            await TokenPrint(`${index}-${orderDetail?.OrderId}`);
          }
        )
      );
      setPrintOrderDetails([]);
      closePrintOption();
    }
  };

  useEffect(() => {
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        ExtraCharges: GlobalExtraCharge,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
  }, [GlobalExtraCharge]);
  useEffect(() => {
    // TotalItemsCalculation();
    TotalWithoutTaxRate();
    TotalTaxAmt();
    OrderCardDetail?.length == 0 ? dispatch(changeunpaidflow(false)) : '';
  }, [OrderCardDetail]);

  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(() => {
    let data = GlobalUpiID;
    const customerDisplayWindow = getCustomerDisplayWindow();
    if (customerDisplayWindow && !customerDisplayWindow.closed) {
      const updatedData = {
        upi: data,
      };
      customerDisplayWindow.postMessage(updatedData, '*');
    } else {
      console.error(
        'Customer display window is not available or has been closed.'
      );
    }
    setUpiOption(GlobalUpName);
    setSelectedUpiOption(GlobalUpiIDoptionIdd);
    setUpiId(GlobalUpiID);
  }, [GlobalUpiID]);
  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]);
  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 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.'
        );
      }
    }
  };

  useEffect(() => {
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
  }, [PaymentOptions]);
  useEffect(() => {
    getBookingTypeId();
  }, [BookingType, BookingTypeBoth]);

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

  const getBookingTypeId = async () => {
    setConfigDataList(AllBookingType);
    let configdata = AllBookingType;
    let checkName = BookingTypeBoth ? 'DineIn,TakeAway' : BookingType;

    let filterconfigdata = configdata?.find(
      (a) => a?.ConfigName === checkName
    );
    setSelectedBookingType(filterconfigdata?.ConfigId);
  };
  const gettodaydate = () => {
    const currentDate = new Date();
    const day = String(currentDate.getDate()).padStart(2, '0');
    const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // Month is 0-based, so we add 1.
    const year = currentDate.getFullYear();

    const tempformattedDate = `${year}-${month}-${day}`;
    setFormattedDate(tempformattedDate);
  };
  const TotalItemsCalculation = async () => {
    let tempTotalitems = OrderCardDetail.length;
    let OverAllQty = OrderCardDetail?.reduce(
      (prev, current) => prev + Number(current?.OrderQty || 0),
      0
    );
    await dispatch(changeSummeryTotalItems(tempTotalitems));
    await dispatch(changeSummeryQty(OverAllQty));
  };

  const TotalWithoutTaxRate = async () => {
    const totalwithouttax = OrderCardDetail?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.WithoutTaxRate || 0);
    }, 0);
    await dispatch(
      changeSummeryTotalWithoutTaxAmount(totalwithouttax.toFixed(2))
    );
  };
  const TotalTaxAmt = async () => {
    const totaltax = OrderCardDetail?.reduce((accumulator, card) => {
      return accumulator + parseFloat(card.TaxAmt || 0);
    }, 0);
    await dispatch(changeSummeryTotalTaxAmount(totaltax.toFixed(2)));
  };

  const handleOpenChange = (newOpen) => {
    setOpen(newOpen);
  };
  const handleOpenChange2 = (newOpen) => {
    if (open2) {
      setOpen2(false);
    } else {
      setOpen2(true);
    }
  };

  const hide = () => {
    setOpen2(false);
    setOpen(false);
  };

  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 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 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);
    }
  };
  const EnableUpiOptions = () => {
    setUpiOptionOpen(!UpiOptionOpen);
  };
  const EnableCardOptions = () => {
    setCardOptionOpen(!CardOptionOpen);
  };
  const HandleholdModelOpen = () => {
    setHold(true);
  };

  const handleHoldCancel = () => {
    setHold(false);
  };
  const handleAddCustomer = () => {
    if (Custdisable === false) {
      setAddCustomer(true);
    }
  };
  const handleAddCustomerCancel = () => {
    setAddCustomer(false);
  };

  const hideDefault = () => {
    setUpiOptionOpen(false);
  };
  const handlePopoverVisibleChange = (visible) => {
    setUpiOptionOpen(visible);
  };
  const handlePopoverVisibleChangeCard = (visible) => {
    setCardOptionOpen(visible);
  };

  const ProductSummary = (salesData) => {
    // Create a map to store the aggregated values for each unique product
    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,
        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 UpiPayment = () => {
    if (OrderStatus) {
      AddBookingDetails('Dine-In', false);
    } else {
      if (SelectedUpiOption && TotalAmount == 0) {
        Upimodel('Submit');
      } else if (SelectedUpiOption) {
        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.'
          );
        }

        setUpiOpen(true);
      } else {
        setUpinotSelected(true);
        setMessageType('error');
        setMessageData('Please Select Upi Option');
      }
    }
  };
  const handleCreditCustomer = (type) => {
    setCreditCustomer(false);
    if (type == 'Submit') {
      Booking(BookingType, true);
    }
    if (type == 'Cancel') {
      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 ClearAllGlobalStateDatas = async (value) => {
    if (OfferCheckedInSetup && preferenceOffer) {
      await applyOffer([]);
    } else {
      dispatch(changeOrderCardDetails([]));
    }
    dispatch(changeBillEditingMode(false));
    await dispatch(changePreviousOrderPayment([]));
    await dispatch(changePreviousOrderOfferDetail([]));
    dispatch(changeTipAmount(0));
    dispatch(changeFullOfferAppliedProducts([]));
    dispatch(changeLoyaltyConsumedQuantities({}));
    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));
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
    setQrCode(false);
    setCurrentOrderNetAmount(0);
    setPreviousNetAmount(0);
    setUpinotSelected(false);
    if (holdCheckedSalesSetup) {
      getHolddata();
    }
    if (defaultBookingType === 'Both') {
      await dispatch(changeBookingType('TakeAway'));
    }
    await dispatch(changeSelProdWiseEst([]));
    await dispatch(ChangeOverAllDiscSales(null));
    await dispatch(ChangeOverAllDiscEstimate(null));
    // 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 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')
    ) {
      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 {
        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 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 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 })
    }));
    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,
      OverallDiscSales: OverAllSales > 0 ? OverAllSales : 0,
      OverallDiscEst: OverAllEstimate > 0 ? OverAllEstimate : 0,
      TaxAmount: totaltax,
      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';
    }

    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 PayatCounterfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) => item?.PaymentOptionType?.toLowerCase() === 'pc'
      );
      let businessUPIfilter = response?.data?.PaymentOrderDtl?.filter(
        (item) =>
          item?.PaymentOptionType?.toLowerCase() === 'bu' &&
          item?.PaymentStatus === 'P'
      );
      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]);
        filteredSettingNames?.includes('whatsapp') &&
          MobileNoWhatsApp?.value &&
          handleURL([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) {
        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));
                    setPaybtnnameselected(PaymentOptionsModeName);
                    setPaybtnselected(PaymentOptionsModeId);
                    setFirstPaymentclick(false);
                    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 {
          setPrintOrderDetails([response?.data]);
          // CustomerDisplay();
          ClearAllGlobalStateDatas();
          console.log('more pg data');
        }
      } else {
        // clearInvoiceDate
        clearInvoiceDate();
        dispatch(changeCurrentOrderId(null));
      }
    } else {
      setPrintOrderDetails([response?.data]);
      if (OfferCheckedInSetup && preferenceOffer) {
        await applyOffer([]);
      } else {
        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) => {
    console.log(PayData?.PaymentDetail?.[0]?.PaymentType, 'mohanPayData');
    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 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);
                // const customerDisplayWindow = getCustomerDisplayWindow();
                // if (customerDisplayWindow && !customerDisplayWindow.closed) {
                //     const updatedData = {
                //         userData: OrderCardDetail,
                //         ExtraCharges: GlobalExtraCharge,
                //         upi: GlobalUpiID,
                //         customer: selOption != null ? selOption : GetCustId,
                //         paymentMethod: Paybtnnameselected,
                //         Paymentgateway: false,
                //         OrderTotalAmount: PaymentGatewayfilter?.[0]?.Amount

                //     };
                //     customerDisplayWindow.postMessage(updatedData, '*');
                // }
              }
            }
          } catch (error) {
            console.error('Error fetching payment details: ', error);
          }
        }, 3000); // Call the API every 3 seconds
      };

      // Call the function to start checking payment status
      checkPaymentStatus();
    }
  };
  const 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);
            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);
        setPaybtnnameselected(PaymentOptionsModeName);
        setPaybtnselected(PaymentOptionsModeId);
        dispatch(changePaymentloader(false));
        CustomerDisplayRemovedData();
        ClearAllGlobalStateDatas(value);
      }
    }
  };
  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);
  };
  function safeRound(amountStr) {
    if (amountStr == null) return '0.00';

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

    return isNaN(num) ? '0.00' : num.toFixed(2); // return as string with 2 decimals
  }
  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);
          },
        };
      },
    },
  ];

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

  const Unpaidfun = async (event) => {
    dispatch(changeunpaidflow(true));
    if (
      OrderCardDetail?.length > 0 &&
      (BookingType === 'Dine In' || BookingTypeBoth)
    ) {
      // await dispatch(changeOrderCardDetails([]))
      // await dispatch(changeOrderCardDetails(tabledata?.[event]?.productDetails))
      // await dispatch(ChangeTotalAmount(tabledata?.[event]?.ExtraChargeDetails))
      // await dispatch(changeUnpaidData(true))
      // await dispatch(changeReorderHoldDetails([tabledata?.[event]]?.[0]));
      // await dispatch(changeReorderProductDetails(tabledata?.[event]?.productDetails))
      // setUnpaidOpen(false)
      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 Recipt = async () => {
    AddBookingDetails('Unpaid', false);
  };

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

    let data1 = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      ProdSubCat: ProdSubCat,
    };

    let data2 = {
      compId: CompId,
      branchId: BranchId,
      appId: AppId,
      prodCat: prodCat,
    };

    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();
    let datas = response?.data?.data;
    await dispatch(ChangeComboCarddata(datas));
    if (response?.data?.statusCode === 1) {
      // 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);
    }
  };

  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 OrderId=PostBookingDataDetailOrderId ?.OrderId
  const today = new Date();
  const year = today.getFullYear();
  // Note: Months are zero-based, so we add 1 to get the actual month
  const month = today.getMonth() + 1;
  const day = today.getDate();

  // Creating a formatted date string (in the format YYYY-MM-DD)
  const Todaydate = `${day < 10 ? '0' : ''}${day}-${month < 10 ? '0' : ''}${month}-${year}`;
  const OrderId = PrintOrderDetails?.[0]?.OrderDetails?.[0]?.OrderId;
  let MobileNo = selOption?.value;
  const onFinalSubmit = async () => {
    let url = `${MainHomeUrl}payment-page?amt=${TotalAmount}&Id=${MobileNo}&cus=${SelCustId} &CusN=${selOption?.CustName}&Br=${brachName}`;
    let response = await dispatch(SendPaymentLink({ MobileNo, url })).unwrap();
    if (response?.data?.statusCode === 1) {
      setMessageType('success');
      setMessageData('Link Sent Successfully');
    }
  };

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

  const CreditCustomerFun = () => {
    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 changeOrderStatus = () => {
    setOrderStatus(!OrderStatus);
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
  };
  // split payments
  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 handlesplitpaymentclose = () => {
    setSplitpayment(false);
    setPaybtnnameselected(PaymentOptionsModeName);
    setPaybtnselected(PaymentOptionsModeId);
    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 handleResponsiveBill = () => {
    setResponsiveBill(!responsiveBill);
  };
  const navCust = templateData?.BookingNavbar?.[1]?.some(
    (item) => item?.OptionName === 'AddCustomer'
  );

  const handlepaymentoptions = async () => {
    await dispatch(changeSalesPaymentoption(true));
    await dispatch(
      getPaymentOptionsData({
        AppId: AppId,
        CompId: CompId,
        BranchId: BranchId,
      })
    );
  };
  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);
    }
  };

  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}`;
  // ------------------------------------------------OTHER SERVICES FUNCTIONALITY-----------------------------------------------------------------------------------

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

  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([]);
      }
    };
    if (salesBillEdit) {
      setDefaultPaymentOption();
    }
  }, [defaultPaymentTrigger, salesBillEdit]);

  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 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 Otherservicesvehicleno = () => {
    setOtherServicesModal(true);
  };

  const handleInputChange = (key, index, value, serviceType, item) => {
    const uppercasedValue = value.toUpperCase();
    const regex = /^[A-Z]{2}[0-9]{2}[A-Z]{1,2}[0-9]{4}$/;
    const isValid = regex.test(uppercasedValue);

    if (serviceType === 'G') {
      const existing = vehicleInputs[key] ? [...vehicleInputs[key]] : [];
      existing[index] = uppercasedValue;

      setVehicleInputs((prev) => ({ ...prev, [key]: existing }));

      const updatedErrors = {
        ...errors,
        [key]: [...(errors[key] || [])],
      };
      // updatedErrors[key][index] = isValid ? '' : 'Invalid format (e.g., KA01AB1234)';
      updatedErrors[key][index] =
        uppercasedValue === ''
          ? ''
          : isValid
            ? ''
            : 'Invalid format (e.g., KA01AB1234)';

      setErrors(updatedErrors);

      vehiclesvalues({ ...vehicleInputs, [key]: existing });
    } else {
      const uniqueKey = `${key}__${item.__index}`;
      const updatedInputs = {
        ...vehicleInputs,
        [uniqueKey]: [uppercasedValue],
      };

      const updatedErrors = { ...errors };
      // updatedErrors[uniqueKey] = [isValid ? '' : 'Invalid format (e.g., KA01AB1234)'];

      updatedErrors[uniqueKey] = [
        uppercasedValue === ''
          ? ''
          : isValid
            ? ''
            : 'Invalid format (e.g., KA01AB1234)',
      ];

      setVehicleInputs(updatedInputs);
      setErrors(updatedErrors);

      vehiclesvalues(updatedInputs);
    }
  };

  const vehiclesvalues = (vehicleData) => {
    const updated = OrderCardDetail.map((item) => {
      const key =
        item.ServiceType === 'G'
          ? item.id // using `id` now
          : `${item.ServiceId}__${item.__index}`;

      // if (vehicleData[key]) {
      //   return {
      //     ...item,
      //     VehicleNo: vehicleData[key],
      //   };
      // }
      // return item;

      const value = vehicleData[key];

      if (value && value.length) {
        return {
          ...item,
          VehicleNo:
            item.ServiceType === 'G'
              ? value.join(',') // 👈 convert array to comma-separated string
              : value[0], // 👈 single string from array
        };
      }

      return item;
    });

    dispatch(changeOrderCardDetails(updated));
  };

  const Handlevehiclenumbers = () => {
    setOtherServicesModal(false);
  };

  const hasVehicleInputErrors = () => {
    return Object.values(errors).some(
      (arr) => Array.isArray(arr) && arr.some((err) => err)
    );
  };
  return (
    <div className="BSBilling4-price-full bsbilltable7">
      <div className="BSBilling4-price-content">
        {screenwidth <= 768 && (
          <div
            className={`BSBillingTable1-summeryTable ${responsiveBill ? 'open' : 'closed'}`}
            style={{
              width: '100%',
              transition: 'max-height 0.3s ease-in-out',
              overflow: 'scroll',
              maxHeight: responsiveBill ? '180px' : '0px',
            }}
          >
            {Array.isArray(OrderCardDetail) && OrderCardDetail?.length >= 1 && (
              <BSBillingTable7 optionNames={tableOptions} />
            )}
          </div>
        )}
        {screenwidth <= 768 && (
          <div
            style={{
              display: 'flex',
              alignItems: 'flex-end',
              justifyContent: 'flex-end',
              width: '100%',
            }}
          >
            {Array.isArray(OrderCardDetail) && OrderCardDetail?.length >= 1 && (
              <div
                onClick={handleResponsiveBill}
                className="Btn-responsiveBill"
                style={{ color: responsiveBill ? '#52c41a' : '#1292ee' }}
              >
                {responsiveBill ? (
                  <div
                    style={{
                      width: '28px',
                      display: 'flex',
                      alignItems: 'center',
                      height: '26px',
                    }}
                  >
                    {' '}
                    <PozoCartIcon />{' '}
                  </div>
                ) : (
                  <div
                    style={{
                      width: '28px',
                      display: 'flex',
                      alignItems: 'center',
                      height: '26px',
                    }}
                  >
                    {' '}
                    <PozoCartIcon />{' '}
                  </div>
                )}
              </div>
            )}
          </div>
        )}
        {/* {Array.isArray(OrderCardDetail) && OrderCardDetail?.length >= 1 && (
          <span className="Table3-Price-div-table">
            {" "}
            <BSBillingTable7 optionNames={tableOptions} />
          </span>
        )} */}
        <div className="Table7-price-icon-container">
          <Messages messageType={messageType} messageData={messageData} />
          <div className="CustomerAddSrch">
            <div style={{ height: '2.1rem' }}>
              {tableOptions
                ?.filter((item) => item.OptionName === 'AddCustomer')
                ?.map((filteredItem) => (
                  <React.Fragment key={filteredItem.TemplateOptionsId}>
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        columnGap: '0.5rem',
                      }}
                    >
                      <BSCustomerSelect />

                      <TooltipWrapper
                        title={'Add Customer'}
                        isMobile={isMobile}
                      >
                        {' '}
                        <PozoAddCustomerIcon
                          className="BSBillingNav-icon-table-icon"
                          onClick={handleAddCustomer}
                          style={{
                            fontSize: '25px',
                            color:
                              selOption || GetCustId ? '#52c41a' : '#1292EE',
                            cursor: Custdisable ? 'not-allowed' : 'pointer',
                          }}
                        />
                      </TooltipWrapper>
                    </div>
                  </React.Fragment>
                ))}
            </div>
          </div>
          <div className="BS3hold-sum">
            {(addcustomer || hold) && (
              <FeaturesFunctionalities
                handleAddCustomerCancel={handleAddCustomerCancel}
                addcustomer={addcustomer}
                handleHoldCancel={handleHoldCancel}
                modalOpen={hold}
              />
            )}
            {creditCustomerOpen && (
              <BSCreditCustomer
                creditCustomerOpen={creditCustomerOpen}
                CreditCustomerHAndleCancel={CreditCustomerHAndleCancel}
              />
            )}
            {tableOptions?.filter((item) => item.OptionName === 'AddCustomer')
              .length === 1 || navCust === true ? (
              <div style={{ width: '2rem' }}>
                {Object.keys(useOptions)?.length > 0 &&
                  useOptions?.some((flow) =>
                    flow.OptionDetails.some(
                      (option) =>
                        option.OptionName === 'Pay at the counter' &&
                        option.ModeDetails.some(
                          (mode) => mode.ModeName === 'Credit'
                        )
                    )
                  ) &&
                  !OtherServicesglobal && (
                    <React.Fragment key="CreditCustomerFragment">
                      <TooltipWrapper
                        title="Advance Amount"
                        isMobile={isMobile}
                      >
                        {' '}
                        <PozoAdvanceIcon
                          className="BSBillingNav-icon-table-icon"
                          onClick={CreditCustomerFun}
                          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',
                          }}
                        />
                      </TooltipWrapper>
                    </React.Fragment>
                  )}
              </div>
            ) : (
              ''
            )}

            {/* 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>
            )}
            {paybtns?.length > 1 && (
              <div
                style={{
                  pointerEvents:
                    (BookingType === 'Dine In' ||
                      BookingTypeBoth ||
                      CheckOrderType?.length > 0) &&
                      !unpaidFlow &&
                      OrderStatus
                      ? 'none'
                      : 'auto',
                  opacity:
                    (BookingType === 'Dine In' ||
                      BookingTypeBoth ||
                      CheckOrderType?.length > 0) &&
                      !unpaidFlow &&
                      OrderStatus
                      ? 0.5
                      : 1,
                  width: '2rem',
                }}
              >
                {!OtherServicesglobal && (
                  <TooltipWrapper 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>
                  </TooltipWrapper>
                )}
              </div>
            )}
            {OtherServicesglobal && OrderCardDetail.length >= 1 && (
              <TooltipWrapper title="Vehicle Number" isMobile={isMobile}>
                {' '}
                <div
                  className="BSBillingNav-icon-table-icon"
                  onClick={
                    // CheckBookingStatus != 'Close' && !addnewAccess?
                    Otherservicesvehicleno
                    // : ''
                  }
                  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',
                  }}
                >
                  <TfiClipboard />
                </div>
              </TooltipWrapper>
            )}
            {dinePreference && (
              <div style={{ width: '2rem' }}>
                {(BookingType === 'Dine In' ||
                  BookingTypeBoth ||
                  CheckOrderType?.length > 0) &&
                  !unpaidFlow &&
                  SelectedTableDetails?.length !== 0 && (
                    <>
                      <TooltipWrapper 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()
                              : ''
                          }
                        />
                      </TooltipWrapper>
                      {FirstPaymentclick === false &&
                        !addnewAccess &&
                        !OrderStatus && <BSTipAmount />}
                    </>
                  )}
              </div>
            )}
            {!OtherServicesglobal && (
              <div style={{ width: '2rem' }}>
                {tableOptions?.map((item) => (
                  <>
                    {unpaidFlow == false
                      ? item?.OptionName == 'Hold' &&
                      BookingType !== 'Dine In' &&
                      !BookingTypeBoth &&
                      OrderCardDetail?.length != 0 &&
                      OrderType != 'Failed' &&
                      CheckBookingStatus != 'Close' &&
                      paybtns?.length > 0 &&
                      !addnewAccess && (
                        <TooltipWrapper title={'Hold'} isMobile={isMobile}>
                          {' '}
                          <PozoHoldIcon
                            className="BSBillingNav-icon-table-icon"
                            onClick={() => AddBookingDetails('Hold')}
                            style={{
                              fontSize: '30px',
                              cursor: 'pointer',
                              color: '' ? '#52c41a' : '#1292EE',
                            }}
                          />
                        </TooltipWrapper>
                      )
                      : ''}

                    {unpaidFlow == false
                      ? item?.OptionName == 'Hold' &&
                      BookingType !== 'Dine In' &&
                      !BookingTypeBoth &&
                      Holddata?.length > 0 &&
                      OrderCardDetail?.length == 0 &&
                      CheckBookingStatus != 'Close' &&
                      paybtns?.length > 0 &&
                      !addnewAccess &&
                      !OtherServicesglobal && (
                        <TooltipWrapper title={'Recall'} isMobile={isMobile}>
                          {' '}
                          <Badge
                            count={Holddata?.length}
                            size={'small'}
                            offset={[0, 7]}
                          >
                            <PozoHoldIcon
                              className="BSBillingNav-icon-table-icon"
                              onClick={() => HandleholdModelOpen()}
                              style={{
                                fontSize: '28px',
                                cursor: 'pointer',
                                color: Holddata ? '#52c41a' : 'default',
                                pointerEvents:
                                  OrderType === 'Failed' ? 'none' : 'auto',
                              }}
                            />
                          </Badge>
                        </TooltipWrapper>
                      )
                      : ''}
                  </>
                ))}
              </div>
            )}
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                rowGap: '0.2rem',
              }}
            ></div>
          </div>
          <TooltipWrapper
            // title={'Payment Mode (SHIFT + M)'}
            isMobile={isMobile}
            placement={'left'}
          >
            <div
              className="Table4-payment-mode"
              style={{
                pointerEvents:
                  (BookingType === 'Dine In' ||
                    BookingTypeBoth ||
                    CheckOrderType?.length > 0) &&
                    !unpaidFlow &&
                    OrderStatus
                    ? 'none'
                    : 'auto',
                opacity:
                  (BookingType === 'Dine In' ||
                    BookingTypeBoth ||
                    CheckOrderType?.length > 0) &&
                    !unpaidFlow &&
                    OrderStatus
                    ? 0.5
                    : 1,
              }}
            >
              {paybtns?.length > 0 && (currentOrderNetAmount >= previousNetAmount) ? (
                paybtns?.map((payment) => (
                  <div className="Table3-cash">
                    <button
                      className={
                        paybtnselected === payment.ModeId &&
                          (UpinotSelected || CardoptionnotSelected)
                          ? 'Btn-payment-mode-notupisel'
                          : paybtnselected === payment.ModeId &&
                            (!UpinotSelected || !CardoptionnotSelected)
                            ? 'Btn-payment-mode'
                            : 'Btn-payment-mode-sel'
                      }
                      style={{
                        fontFamily: FontFamily['para'],
                        position: 'relative',
                        animation: blink
                          ? 'blink-animation 0.5s infinite alternate'
                          : 'none',
                      }}
                      onClick={() =>
                        payment?.ModeName?.toLowerCase() === 'upi' // Change the condition to payment.Id
                          ? handleUPIButtonClick(
                            payment.ModeId,
                            payment.ModeName
                          )
                          : handlePaymentMode(payment.ModeId, payment.ModeName)
                      }
                    >
                      {/* {UpiOption === "" && payment?.ModeName?.toLowerCase() === "upi" && <p> UPI</p>} */}

                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'row',
                          columnGap: '0.5rem',
                        }}
                      >
                        {payment.ModeName}
                        {payment?.ModeName?.toLowerCase() === 'card' && (
                          <CardPopover
                            CardPayOption={CardPayOption}
                            SelectedCardOption={SelectedCardOption}
                            AddCardOption={AddCardOption}
                            CardOptionOpen={CardOptionOpen}
                            EnableCardOptions={EnableCardOptions}
                            paygate={paygate}
                            paydevice={paydevice}
                          />
                        )}
                        {payment?.ModeName?.toLowerCase() === 'upi' && (
                          <UpiPopover
                            defaultPaymentMode={defaultPaymentMode}
                            defaultEnabled={defaultEnabled}
                            setDefaultEnabled={setDefaultEnabled}
                            UpiOptionOpen={UpiOptionOpen}
                            UpiPayOption={UpiPayOption}
                            BusinessPayOption={BusinessPayOption}
                            SelectedUPIPayOption={SelectedUPIPayOption}
                            AddUPIPaymentOption={AddUPIPaymentOption}
                            PaymentUpiOptions={PaymentUpiOptions}
                            UpiOption={UpiOption}
                            UpiId={UpiId}
                            paygate={paygate}
                            paydevice={paydevice}
                            EnableUpiOptions={EnableUpiOptions}
                            PaymentgatewayUPI={PaymentgatewayUPI}
                            PaymentDeviceUPI={PaymentDeviceUPI}
                            SelectedUpiOption={SelectedUpiOption}
                            addUpiOption={addUpiOption}
                            hideDefault={hideDefault}
                          />
                        )}
                      </div>
                    </button>
                  </div>
                ))
              ) : (currentOrderNetAmount < previousNetAmount && salesBillEdit && refundPayBtns.length > 0) ? (
                refundPayBtns.map((payment) => (
                  <div className="Table3-cash">
                    <button
                      className={
                        refundPaySelected === payment.ConfigId &&
                          (UpinotSelected || CardoptionnotSelected)
                          ? 'Btn-payment-mode-notupisel'
                          : refundPaySelected === payment.ConfigId &&
                            (!UpinotSelected || !CardoptionnotSelected)
                            ? 'Btn-payment-mode'
                            : 'Btn-payment-mode-sel'
                      }
                      style={{
                        fontFamily: FontFamily['para'],
                        position: 'relative',
                        animation: blink
                          ? 'blink-animation 0.5s infinite alternate'
                          : 'none',
                      }}
                      onClick={() => handleRefundPaymentMode(payment?.ConfigId, payment?.ConfigName)}
                    >
                      {/* {UpiOption === "" && payment?.ModeName?.toLowerCase() === "upi" && <p> UPI</p>} */}

                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'row',
                          columnGap: '0.5rem',
                        }}
                      >
                        {payment.ConfigName}
                      </div>
                    </button>
                  </div>
                ))
              ) : (
                <div
                  onClick={handlepaymentoptions}
                  style={{ cursor: 'pointer' }}
                  className="payment-error-msg"
                >
                  Please Set Payment Options
                </div>
              )}
            </div>
          </TooltipWrapper>
          {PrintOrderDetails?.length > 0 && (
            <div
              style={{
                display: 'flex',
                gap: '1rem',
                justifyContent: 'center',
                margin: '4px 0',
                alignItems: 'center',
              }}
            >
              {filteredSettingNames?.includes('whatsapp') &&
                MobileNoWhatsApp?.value && (
                  <FaWhatsapp
                    size={32}
                    color="#25D366"
                    style={{ cursor: 'pointer' }}
                    onClick={handleWhatsAppClick}
                    title="Share on WhatsApp"
                  />
                )}

              <FaPrint
                size={26}
                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>
          )}
        </div>

        {/* {(selectCustomerDisplay === true || paymentModeDisplay === true) && (
            <div className="BSBilling4-vertical-line"></div>
          )} */}

        <div
          className={
            selectCustomerDisplay === true || paymentModeDisplay === true
              ? 'Table4-price'
              : 'Table4-price-fullflex'
          }
        >
          <div className="Table4-price-btn-master">
            <div className="Table4-Price-div">
              <div className="T4PTable" style={{ display: 'contents' }}>
                <table className="Table4-total-price">
                  <tr className="Table4-totalprice-row">
                    <td
                      className="Table4-td-names"
                      style={{ fontFamily: FontFamily['para'] }}
                    >
                      Items:
                    </td>
                    <td
                      className="Table4-td-values"
                      style={{ fontFamily: FontFamily['para'] }}
                    >
                      {TotalItems}
                    </td>
                  </tr>

                  <tr className="Table4-totalprice-row">
                    <td
                      className="Table4-td-names"
                      style={{ fontFamily: FontFamily['para'] }}
                    >
                      Qty:
                    </td>
                    <td
                      className="Table4-td-values"
                      style={{ fontFamily: FontFamily['para'] }}
                    >
                      {Qty}
                    </td>
                  </tr>
                </table>
              </div>
              <div style={{ display: 'flex', gap: '1rem' }}>
                {!OtherServicesglobal &&
                  OrderCardDetail?.length > 0 &&
                  ParkingDisplay && (
                    <div
                      style={{
                        width: '1.5rem',
                        color: 'rgb(18, 146, 238)',
                        display: 'flex',
                        alignItems: 'center',
                        height: '2.46rem',
                      }}
                    >
                      <BSOtherServiceClaim />
                    </div>
                  )}
                <div>
                  {' '}
                  {!OtherServicesglobal && unpaidFlow == true ? (
                    <TooltipWrapper title="Print Bill" isMobile={isMobile}>
                      {' '}
                      <PozoBillIcon
                        className="Hover"
                        style={{
                          fontSize: '25px',
                          cursor: 'pointer',
                          color: unpaidFlow ? '#52c41a' : '#1292EE',
                        }}
                        onClick={() => {
                          Recipt();
                        }}
                      />
                    </TooltipWrapper>
                  ) : (
                    ''
                  )}
                </div>

                <div className="Table3-Price-summarypopfullscrn">
                  <Popover
                    content={
                      <>
                        <a onClick={hide}>
                          <AiOutlineClose color="black" />
                        </a>
                        {/* <span className="Table3-Price-div-table">
                          {" "}
                          <BSBillingTable7 optionNames={tableOptions} />
                        </span> */}
                        <BSSummery
                        // Qty={Qty}
                        // Totalitems={TotalItems}
                        // TotalAmount={TotalAmount}
                        // TotalTaxAmount={TotalTaxAmount}
                        // TotalWithoutTaxAmount={TotalWithoutTaxAmount}
                        />
                      </>
                    }
                    trigger="click"
                    // width={1000}
                    open={open}
                    onOpenChange={handleOpenChange}
                  >
                    <UpCircleOutlined
                      style={{
                        fontSize: '25px',
                        cursor: 'pointer',
                        color: '' ? '#52c41a' : '#1292EE',
                      }}
                    />
                  </Popover>
                </div>

                <div className="Table4-Price-summarypop">
                  <Popover
                    content={
                      <>
                        <a onClick={hide}>
                          <AiOutlineClose color="black" />
                        </a>
                        {/* <span className="Table3-Price-div-table">
                          <BSBillingTable7 optionNames={tableOptions} />
                        </span> */}
                        <BSSummery
                        // Qty={Qty}
                        // Totalitems={TotalItems}
                        // TotalAmount={TotalAmount}
                        // TotalTaxAmount={TotalTaxAmount}
                        // TotalWithoutTaxAmount={TotalWithoutTaxAmount}
                        />
                      </>
                    }
                    trigger="click"
                    placement="top"
                    style={{ width: '300px' }}
                    // width={1000}
                    open={open2}
                    onOpenChange={handleOpenChange2}
                  >
                    <TooltipWrapper title="Summary" isMobile={isMobile}>
                      <UpCircleOutlined
                        style={{
                          fontSize: '25px',
                          cursor: 'pointer',
                          color: '' ? '#52c41a' : '#1292EE',
                        }}
                      />
                    </TooltipWrapper>
                  </Popover>
                </div>
              </div>
            </div>
            <div className="Table4-finalprice">
              <TooltipWrapper title="Create Bill (F4)" isMobile={isMobile}>
                <button
                  className={
                    // (empData?.AddAccess === "N" || SAAccessCommonMaster?.AddAccess === "N")
                    addnewAccess
                      ? 'Table4-Btn-final-price-disabled'
                      : FirstPaymentclick === false &&
                        OrderCardDetail?.length > 0 &&
                        paybtnselected &&
                        CheckBookingStatus != 'Close'
                        ? !OrderStatus ? salesBillEdit && (currentOrderNetAmount < previousNetAmount) ?
                          'Table4-Btn-final-price'
                          : 'Table4-Btn-final-price'
                          : 'Table4-Btn-final-price Order'
                        : 'Table4-Btn-final-price-disabled'
                  }
                  // onClick={() => {
                  //   // AddBookingDetails(BookingType, true);
                  //   (qrCode && SelectedUPIPayOption === "Default") ? UpiPayment() : OrderStatus ? AddBookingDetails("Dine-In") : AddBookingDetails(BookingType, true);
                  // }}
                  onClick={
                    // BranchFinancialStatus==='N'? financialYearError:
                    handleButtonClick
                  }
                >
                  {!OrderStatus ? salesBillEdit && (currentOrderNetAmount < previousNetAmount) ? <p className="Table4-Order">Refund: ₹{(previousNetAmount || 0) - (currentOrderNetAmount || 0)}</p> : (
                    <>
                      <div className="Table4-fullrate">
                        <div
                          className="Table4-rate"
                          style={{ fontFamily: FontFamily['head'] }}
                        // onClick={() => AddBookingDetails(BookingType, true)}
                        >
                          {/* ₹ {Math.round(TotalAmount)} */}
                          {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>
                          )}
                        </div>
                        <div className="Table4-rate">
                          <BiRightArrowAlt />
                        </div>
                      </div>
                    </>
                  ) : (
                    <div className="Table4-Order">ORDER</div>
                  )}
                </button>
              </TooltipWrapper>
            </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={SettingDataSelector}
                      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>
            )}
          </div>
        </div>
      </div>
      <DefaultModal
        open={UpiOpen}
        title="UPI PAYMENT"
        width={500}
        handleCancel={() => {
          Upimodel('Cancel');
        }}
        footer={false}
        children={
          <div style={{ overflow: 'scroll' }}>
            {/* <h1 className="formHeader">UPI PAYMENT</h1> */}

            <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' }}
                  />
                  {/* <ArrowRightOutlined /> */}
                </div>
              )}

              <div
                style={{
                  display: 'flex',
                  flexDirection: 'row-reverse',
                  width: '100px',
                }}
              >
                <Buttons
                  buttonText="OK"
                  color="901D77"
                  icon={<ArrowRightOutlined />}
                  handleSubmit={() => {
                    Upimodel('Submit');
                  }}
                />
              </div>
            </div>
          </div>
        }
      />
      <DefaultModal
        className={'paymentoptionsModal'}
        open={OtherServicesModal}
        title="Vehicle No"
        handleCancel={() => {
          setOtherServicesModal(false);
        }}
        // handleSubmit={Handlevehiclenumbers}
        footer={false}
        children={
          <div
            className="paymentoptionsModalContent"
            style={{ overflow: 'scroll' }}
          >
            {OrderCardDetail.map((item, i) => {
              const isGroup = item.ServiceType === 'G';
              const groupKey = item.id; // 🔁 using `id` for groups now
              const uniqueKey = `${item.ServiceId}__${item.__index}`;

              // For G-type: render input only once for the group
              if (
                isGroup &&
                i !== OrderCardDetail.findIndex((o) => o.id === groupKey)
              ) {
                return null;
              }

              const qty = isGroup
                ? OrderCardDetail.filter((o) => o.id === groupKey).reduce(
                  (sum, o) => sum + (o.OrderQty || 1),
                  0
                )
                : item.OrderQty || 1;

              return (
                <div
                  key={isGroup ? groupKey : uniqueKey}
                  style={{ marginBottom: 20 }}
                >
                  <h4>{item.ServiceName}</h4>

                  {Array.from({ length: qty }).map((_, index) => {
                    const inputKey = isGroup
                      ? item.id
                      : `${item.ServiceId}__${item.__index}`;
                    const value = vehicleInputs[inputKey]?.[index] || '';
                    const error = errors[inputKey]?.[index] || '';

                    return (
                      <div
                        key={`${inputKey}-${index}`}
                        style={{ marginBottom: 10 }}
                      >
                        <input
                          placeholder={`Vehicle No ${index + 1}`}
                          value={value}
                          onChange={(e) =>
                            handleInputChange(
                              isGroup ? item.id : item.ServiceId,
                              index,
                              e.target.value,
                              item.ServiceType,
                              item
                            )
                          }
                          onKeyPress={(e) => {
                            if (!/[A-Za-z0-9]/.test(e.key)) {
                              e.preventDefault();
                            }
                          }}
                          style={{
                            width: '100%',
                            padding: 8,
                            borderRadius: 4,
                            border: error ? '1px solid red' : '1px solid #ccc',
                          }}
                        />
                        {error && (
                          <span style={{ color: 'red', fontSize: 12 }}>
                            {error}
                          </span>
                        )}
                      </div>
                    );
                  })}
                </div>
              );
            })}
            <div style={{ textAlign: 'right', marginTop: 16 }}>
              <button
                type="button"
                onClick={Handlevehiclenumbers}
                disabled={hasVehicleInputErrors()}
                style={{
                  padding: '8px 24px',
                  fontFamily: 'Gilroy',
                  background: hasVehicleInputErrors() ? '#ccc' : '#8f1e78',
                  color: '#fff',
                  border: 'none',
                  borderRadius: 4,
                  cursor: hasVehicleInputErrors() ? 'not-allowed' : 'pointer',
                }}
              >
                Submit
              </button>
            </div>
          </div>
        }
      />
      <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}
        />
      )}
      {Splitpayment && (
        <SplitPayment
          SplitPaymentModal={Splitpayment}
          handlesplitpaymentclose={handlesplitpaymentclose}
          TotalNetAmount={
            OrderType === 'Failed' ? FailedTotalAmt : 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>
        }
      />

      {
        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={SettingDataSelector}
              printDatas={printDatas}
            />
          </div>
        )
        // ))
      }

      <DefaultModal
        className={'paymentoptionsModal'}
        open={OtherServicesModal}
        title="Vehicle No"
        handleCancel={() => {
          setOtherServicesModal(false);
        }}
        handleSubmit={Handlevehiclenumbers}
        footer={true}
        children={
          <div
            className="paymentoptionsModalContent"
            style={{ overflow: 'scroll' }}
          >
            {OrderCardDetail.map((item, i) => {
              const isGroup = item.ServiceType === 'G';
              const groupKey = item.id; // 🔁 using `id` for groups now
              const uniqueKey = `${item.ServiceId}__${item.__index}`;

              // For G-type: render input only once for the group
              if (
                isGroup &&
                i !== OrderCardDetail.findIndex((o) => o.id === groupKey)
              ) {
                return null;
              }

              const qty = isGroup
                ? OrderCardDetail.filter((o) => o.id === groupKey).reduce(
                  (sum, o) => sum + (o.OrderQty || 1),
                  0
                )
                : item.OrderQty || 1;

              return (
                <div
                  key={isGroup ? groupKey : uniqueKey}
                  style={{ marginBottom: 20 }}
                >
                  <h4>{item.ServiceName}</h4>

                  {Array.from({ length: qty }).map((_, index) => {
                    const inputKey = isGroup
                      ? item.id
                      : `${item.ServiceId}__${item.__index}`;
                    const value = vehicleInputs[inputKey]?.[index] || '';
                    const error = errors[inputKey]?.[index] || '';

                    return (
                      <div
                        key={`${inputKey}-${index}`}
                        style={{ marginBottom: 10 }}
                      >
                        <input
                          placeholder={`Vehicle No ${index + 1}`}
                          value={value}
                          onChange={(e) =>
                            handleInputChange(
                              isGroup ? item.id : item.ServiceId,
                              index,
                              e.target.value,
                              item.ServiceType,
                              item
                            )
                          }
                          style={{
                            width: '100%',
                            padding: 8,
                            borderRadius: 4,
                            border: error ? '1px solid red' : '1px solid #ccc',
                          }}
                        />
                        {error && (
                          <span style={{ color: 'red', fontSize: 12 }}>
                            {error}
                          </span>
                        )}
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
        }
      />
      <DefaultModal
        open={businessUPI}
        handleCancel={() => setShowCancelConfirm(true)}
        footer={false}
        width={500}
        children={
          <>
            <PaymentGatewayEmbedded
              orderId={businessUPIOrderId}
              setBusinessUPIOrderId={setBusinessUPIOrderId}
              businessUPILink={businessUPILink}
              setBusinessUPI={setBusinessUPI}
              setPaymentSuccess={setPaymentSuccess}
              paymentSucess={paymentSucess}
              ClearAllGlobalStateDatas={ClearAllGlobalStateDatas}
              CustomerDisplay={CustomerDisplay}
            />
          </>
        }
      />
      {showCancelConfirm && (
        <Modal
          open={showCancelConfirm}
          title="Cancel Payment"
          onOk={() => {
            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)}
              />
            </>
          }
        />
      )}
    </div>
  );
};
export default BSBilling7Payment;
