import React, { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import moment from 'moment';
import {
  extractLastNumberOrderId,
  getSession,
} from '../../../../Services/Others';
import QRcode from '../../../../Images/QRcode.png';
import { printDiv } from '../../../../Services/Others';
// import HpyImg from "../../../../Images/happyemoji.png"
import '../../../../Styles/BookingScreen/PrintTemplates/A4/PrintA4Style11.scss';
import { useSelector } from 'react-redux';
import {
  GloabalFieldDetails,
  GlobalBillName,
  Globalnotes,
  GlobalprintAmount,
  GlobalprintCashierName,
  GlobalprintCredit,
  GlobalprintDiscount,
  GlobalprintHsnCode,
  GlobalprintItem,
  GlobalprintLogo,
  GlobalprintMRP,
  GlobalprintQrcodet,
  GlobalprintQuantity,
  GlobalprintRate,
  GlobalprintSignature,
  GlobalprintSlNo,
  GlobalprintTax,
  GlobalprinttermsAndConditions,
  GlobalPritdummyData,
  GlobalSignatureImage,
  GlobalthemeFormat,
  GlobalSelectedPrintHeaderColor,
  GlobalSelectedPrintHeaderFontColor,
  GlobalSelectedTableHeaderColor,
  GlobalSelectedTableHeaderFontColor,
  GlobalSelectedTableBodyFontColor,
  GlobalSelectedTableBodyColor,
  GlobalRowType,
  GlobalSelectedFooterColor,
  GlobalSelectedFooterFontColor,
  GlobalSelectedNetAmountColor,
  GlobalSelectedNetAmountFontColor,
} from '../../../../Features/ThemeChange/ThemeChange';
import signature from '../../../../Images/signatureimage.jpg';
import QRCodeModule from 'react-qr-code';

import Logo from '../../../../Images/Logo.jpg';
import { settingDataSelector } from '../../../../Features/PreferenceMaster/PreferenceMaster';
import { PreferenceData } from '../../../../Features/BookingScreen/BookingData/BookingData';

const PrintA4Style11 = ({
  index,
  ExtraChargeTotal,
  UpiId,
  Date1,
  base64Image,
  totalQuantityFilter = 6,
  BranchCity,
  BranchZip,
  CashierName,
  totalQuantity,
  OrderDetailGST,
  OrderDetailIGST,
  OrderDetailVAT,
  table2Data,
  PaymentStatus,
  PrintLogo,
  PrintGreeting,
  printDatas,
  sportsAppPreference,
  MembershipApplied = null,
  SalesModePref,
}) => {
  const QRCode = QRCodeModule.default || QRCodeModule;
  const GlobalthemeFormatr = useSelector(GlobalthemeFormat);
  const GlobalSignature = useSelector(GlobalprintSignature);
  const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
  const FieldDetails = useSelector(GloabalFieldDetails);
  const GlobalIsnotes = useSelector(Globalnotes);
  const GlobalSignatureImages = useSelector(GlobalSignatureImage);
  console.log(FieldDetails, 'FieldDetails');
  const SLNO = FieldDetails?.['Sl.No'];
  const Item = FieldDetails?.['Item'];
  const MRP = FieldDetails?.['MRP'];
  const Discount = FieldDetails?.['Discount'];
  const Tax = FieldDetails?.['Tax'];
  const Quantity = FieldDetails?.['Quantity'];
  const Rate = FieldDetails?.['Rate'];
  const Amount = FieldDetails?.['Amount'];
  const HsnCode = FieldDetails?.['HsnCode'];
  const Qrcodet = FieldDetails?.['Qrcode'];
  const Signature = FieldDetails?.['signature'];
  const TermsnAdCondition = FieldDetails?.['terms&conditions'];
  const isNotes = FieldDetails?.['Notes'];
  const CashierNameField = FieldDetails?.['CashierName'];
  const LogoField = FieldDetails?.['Logo'];
  const CreditDetails = FieldDetails?.['Credit details'];
  const WeightasKg = FieldDetails?.['Weight'];
  const GlobalSlNo = useSelector(GlobalprintSlNo);
  const GlobalItem = useSelector(GlobalprintItem);
  const GlobalMRP = useSelector(GlobalprintMRP);
  const GlobalDiscount = useSelector(GlobalprintDiscount);
  const GlobalTax = useSelector(GlobalprintTax);
  const GlobalQuantity = useSelector(GlobalprintQuantity);
  const GlobalRate = useSelector(GlobalprintRate);
  const GlobalAmount = useSelector(GlobalprintAmount);
  const GlobalHsnCode = useSelector(GlobalprintHsnCode);
  const GlobalQrcodet = useSelector(GlobalprintQrcodet);
  const GlobaldummyData = useSelector(GlobalPritdummyData);
  const GlobalBilltext = useSelector(GlobalBillName);
  const GlobalCashierName = useSelector(GlobalprintCashierName);
  const GlobalLogo = useSelector(GlobalprintLogo);
  const GlobalCredit = useSelector(GlobalprintCredit);
  const SettingData = useSelector(PreferenceData);
  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
  const SelectedHeaderFontColor = useSelector(
    GlobalSelectedPrintHeaderFontColor
  );
  const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
  const SelectedTableHeaderFontColor = useSelector(
    GlobalSelectedTableHeaderFontColor
  );
  const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
  const SelectedTableBodyFontColor = useSelector(
    GlobalSelectedTableBodyFontColor
  );
  const SelectedRowType = useSelector(GlobalRowType);
  const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
  const SelectedTableFooterFontColor = useSelector(
    GlobalSelectedFooterFontColor
  );
  const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
  const SelectedNetAmountFontColor = useSelector(
    GlobalSelectedNetAmountFontColor
  );
  let printColors = printDatas?.PrintColors;
  const headerColor = printColors?.find((obj) => obj.headerColor)?.headerColor;
  const tableHeaderColor = printColors?.find(
    (obj) => obj.tableHeaderColor
  )?.tableHeaderColor;
  const tableBodyColor = printColors?.find(
    (obj) => obj.tableBodyColor
  )?.tableBodyColor;
  const footerColor = printColors?.find((obj) => obj.footerColor)?.footerColor;
  const netAmtColor = printColors?.find((obj) => obj.netAmtColor)?.netAmtColor;
  const Retailshortname = SettingData?.[0]?.SettingDtlDetails?.find(
    (setting) => setting?.SettingIdName?.toLowerCase() === 'retailshortname'
  );
  const Wholesaleshortname = SettingData?.[0]?.SettingDtlDetails?.find(
    (setting) => setting?.SettingIdName?.toLowerCase() === 'wholesaleshortname'
  );
  const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter(
    (i) => i.SettingIdName === 'PrintUom'
  )?.[0];
  const estimatePrintHeader =
    SettingData?.[0]?.SettingDtlDetails?.find(
      (setting) =>
        setting?.SettingIdName?.toLowerCase() === 'estimateprintheader'
    )?.SettingValue === 'Y';
  const estimateTitle =
    SettingData?.[0]?.SettingDtlDetails?.find(
      (setting) => setting?.SettingIdName?.toLowerCase() === 'estimatetitle'
    )?.SettingValue === 'Y';
  const currentDate = new Date();
  console.log(OrderDetailGST, 'OrderDetailGST');
  const day = currentDate.getDate().toString().padStart(2, '0');
  const monthNames = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ];
  const monthIndex = currentDate.getMonth();
  const year = currentDate.getFullYear().toString().slice(-2);

  const formattedDate = `${day}-${monthNames[monthIndex]}-${year}`;

  const TakeawayData = table2Data?.productDetails?.filter(
    (item) => item.BookingTypeName?.toLowerCase() === 'takeaway'
  );
  const DineInData = table2Data?.productDetails?.filter(
    (item) => item.BookingTypeName?.toLowerCase() === 'dine in'
  );
  let PaymentStatusSuccess = PaymentStatus?.filter(
    (ps) => ps.PaymentStatus === 'S'
  );
  const isEditedBill = PaymentStatus?.some((payment) => {
    const type = payment?.AdjustmentType?.toLowerCase();
    return (
      (type === 'extra' || type === 'refund') &&
      payment?.BeforeAdjustment != null &&
      payment?.AfterAdjustment != null
    );
  });
  const lastTransaction = PaymentStatus?.find(
    (ps) => ps.PaymentStatus === 'S' && ps?.LastOrderTran === 'Y'
  );

  const TakeawayTotal = TakeawayData?.reduce(
    (accumulator, currentValue) => accumulator + currentValue.TotalAmt,
    0
  );
  const DineInTotal = DineInData?.reduce(
    (accumulator, currentValue) => accumulator + currentValue.TotalAmt,
    0
  );
  const aggregatedPayments = PaymentStatusSuccess?.reduce(
    (acc, paymentdata) => {
      const paymentType = paymentdata?.PaymentTypeName;
      const amount = Number(paymentdata?.Amount);

      if (acc[paymentType]) {
        acc[paymentType] += amount;
      } else {
        acc[paymentType] = amount;
      }

      return acc;
    },
    {}
  );
  let TermsAndConditions = printDatas?.TermsandConditions;
  let SignatureImg = printDatas?.Signature;
  let Notestext = printDatas?.Notes;
  let BillName = printDatas?.PrintHdrName;
  let FormatTheme = printDatas?.PrintType == 'S' ? true : false;
  console.log(FormatTheme, 'TermsAndConditions');
  const productsData = table2Data?.productDetails || [];
  const offers = table2Data?.OrderOfferDetails || [];
  const paymentTypeUPI = PaymentStatus?.find(
    (ps) => ps.PaymentTypeName === 'UPI'
  );

  const PackageDetails = table2Data?.PackageDtl;
  let TotalOfferAmount = 0;

  const products = [
    {
      id: 1,
      name: 'Butter Naan',
      price: 88.0,
      quantity: 2,
      mrp: 50,
      amt: 60,
      discount: 12,
      ProdTaxPercentage: 5,
    },
    {
      id: 2,
      name: 'Grill Chicken (f)',
      price: 300.0,
      quantity: 1,
      mrp: 50,
      amt: 60,
      discount: 12,
      ProdTaxPercentage: 5,
    },
    {
      id: 3,
      name: 'Tandoori Chicken (H) ',
      price: 200.0,
      quantity: 1,
      mrp: 50,
      amt: 60,
      discount: 12,
      ProdTaxPercentage: 0,
    },
    {
      id: 4,
      name: 'Kulfi',
      price: 30.0,
      quantity: 1,
      mrp: 50,
      amt: 60,
      discount: 12,
      ProdTaxPercentage: 18,
    },
    {
      id: 1,
      name: 'Butter Naan',
      price: 88.0,
      quantity: 2,
      mrp: 50,
      amt: 60,
      discount: 12,
      ProdTaxPercentage: 40,
    },
    {
      id: 2,
      name: 'Grill Chicken (f)',
      price: 300.0,
      quantity: 1,
      mrp: 50,
      amt: 60,
      discount: 12,
      ProdTaxPercentage: 5,
    },
  ];

  const chunkSize = 11;
  let dataSource = [];

  if (GlobaldummyData || TakeawayData?.length > 0) {
    dataSource = GlobaldummyData ? products : TakeawayData;
  } else if (DineInData?.length > 0) {
    dataSource = DineInData;
  }

  // Paginate the data
  const paginatedChunks = [];
  for (let i = 0; i < dataSource.length; i += chunkSize) {
    paginatedChunks.push(dataSource.slice(i, i + chunkSize));
  }
  const lastChunkRows =
    paginatedChunks.length > 0
      ? paginatedChunks[paginatedChunks.length - 1].length
      : 0;
  const shouldFooterBeOnNewPage = lastChunkRows > 6;

  const headerStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedHeaderColor
      : headerColor?.background,

    color: GlobaldummyData ? SelectedHeaderFontColor : headerColor?.font,
  };
  const tableHeaderStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedTableHeaderColor
      : tableHeaderColor?.background,

    color: GlobaldummyData
      ? SelectedTableHeaderFontColor
      : tableHeaderColor?.font,
  };
  const tableBodyStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedTableBodyColor
      : tableBodyColor?.background,
    color: GlobaldummyData ? SelectedTableBodyFontColor : tableBodyColor?.font,
  };
  const rowtypeStyle = GlobaldummyData
    ? SelectedRowType
    : tableBodyColor?.rowType;
  const footerColorStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedTableFooterColor
      : footerColor?.background,

    color: GlobaldummyData ? SelectedTableFooterFontColor : footerColor?.font,
  };
  const netAmountStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedNetAmountColor
      : netAmtColor?.background,

    color: GlobaldummyData ? SelectedNetAmountFontColor : netAmtColor?.font,
  };
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        minHeight: '297mm',
        pageBreakInside: 'avoid',
      }}
    >
      <div
        className="PrintA4Style11-MasterDiv"
        style={{ position: 'relative', width: '100%', minHeight: '297mm' }}
        id={`PrintStyleA4-0`}
      >
        {paginatedChunks.map((dataChunk, chunkIndex) => (
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between',
              height: FormatTheme ? '297mm' : '',
            }}
            className="print-page"
            key={chunkIndex}
          >
            <div
              className="page-headerA4Style11"
              style={{ textAlign: 'center' }}
            >
              {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
                ''
              ) : (
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    textAlign: 'left',
                    ...headerStyle,
                  }}
                >
                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      padding: '12px 0',
                      borderBottom: '1px solid black',
                    }}
                  >
                    {/* Logo Image */}
                    <div style={{ marginRight: '20px' }}>
                      {GlobalLogo && GlobaldummyData && (
                        <div style={{ display: 'flex' }}>
                          {' '}
                          <img
                            src={Logo}
                            alt="Brand Logo"
                            style={{
                              width: '100px',
                              height: 'auto',
                              objectFit: 'contain',
                            }}
                          />
                        </div>
                      )}
                      {base64Image &&
                      (PrintLogo?.SettingValue === 'Y' || LogoField) ? (
                        <img
                          className="PrintA4Style11-BrandImage"
                          src={base64Image}
                          alt="Brand Logo"
                          style={{
                            width: '100px',
                            height: 'auto',
                            objectFit: 'contain',
                          }}
                        />
                      ) : null}
                    </div>
                    {/* Store Info */}
                    <div
                      style={{
                        textAlign: 'center',
                        flex: 1,
                        fontFamily: 'Lemon, Arial, sans-serif',
                        fontWeight: 600,
                      }}
                    >
                      <div
                        style={{
                          fontSize: 'clamp(1.5rem, 2.5vw, 2rem)',
                          marginBottom: '4px',
                        }}
                      >
                        {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
                      </div>

                      {/* Address */}
                      <div
                        style={{
                          fontSize: '12px',
                          fontWeight: 400,
                          fontFamily: 'Arial, sans-serif',
                          lineHeight: 1.4,
                        }}
                      >
                        {GlobaldummyData
                          ? 'BranchAddress, Town- 635XXX City - State'
                          : [
                              table2Data?.AddressDetails?.[0]?.Address1,
                              table2Data?.AddressDetails?.[0]?.City,
                              table2Data?.AddressDetails?.[0]?.Zip,
                            ]
                              .filter(Boolean)
                              .join(' - ')}
                        <br />
                        Mobile: +91{' '}
                        {GlobaldummyData ? '986XXXXXXX' : table2Data?.BrMobile}
                      </div>
                      {/* Order Type */}
                    </div>
                  </div>
                </div>
              )}
              {!estimatePrintHeader &&
                table2Data?.OrderType === 'E' &&
                estimateTitle && (
                  <div
                    style={{
                      textTransform: 'uppercase',
                      textAlign: 'center',
                      padding: '12px 0',
                    }}
                  >
                    Estimate
                  </div>
                )}

              <div
                style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  padding: '0rem 1rem',
                  width: '100%',
                }}
              >
                <div style={{ fontWeight: '600', textAlign: 'left' }}>
                  Bill No :
                  {table2Data?.OrderId &&
                    extractLastNumberOrderId(
                      table2Data?.OrderId,
                      table2Data?.FYStatus
                    )}
                  {SalesModePref?.SettingValue == 'Y' && (
                    <div style={{ fontWeight: '600' }}>
                      {' '}
                      Name :{' '}
                      {table2Data?.SalesMode == 'R'
                        ? Retailshortname?.Comments
                        : Wholesaleshortname?.Comments}{' '}
                    </div>
                  )}
                  {GlobaldummyData && '685'}
                </div>
                <div style={{ textAlign: 'center', width: '24vw' }}>
                  {GlobaldummyData
                    ? GlobalBilltext
                      ? GlobalBilltext
                      : 'Cash' + ' Bill'
                    : BillName ||
                      (PaymentStatusSuccess?.length === 1
                        ? PaymentStatusSuccess?.[0]?.PaymentTypeName + ' Bill'
                        : ' Bill')}
                </div>
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    padding: '0rem 1rem',
                    fontSize: 'clamp(0.7rem, 2.5vw, 0.8rem)',
                    flexDirection: 'column',
                    textAlign: 'left',
                  }}
                >
                  {' '}
                  <div>{Date1}</div>{' '}
                  {SalesModePref?.SettingValue == 'Y' && (
                    <div style={{ fontWeight: '600' }}>
                      {' '}
                      Name :{' '}
                      {table2Data?.SalesMode == 'R'
                        ? Retailshortname?.Comments
                        : Wholesaleshortname?.Comments}{' '}
                    </div>
                  )}
                </div>
              </div>

              <hr className="PrintA4Style11-print-dottline" />
              <br />
            </div>

            <div className="print-body">
              {(TakeawayData?.length > 0 || GlobaldummyData) && (
                <>
                  <div
                    style={{
                      display: 'flex',
                      width: '100%',
                      justifyContent: 'center',
                      alignItems: 'center',
                      fontSize: '12px',
                      fontWeight: '600',
                    }}
                  >
                    Take Away
                  </div>

                  <table className="A4TableStyle11" style={{ width: '100%' }}>
                    <thead>
                      <tr>
                        <td>
                          {/* Placeholder for the fixed-position header  */}
                          <div className="page-headerA4Style11-space"> </div>
                        </td>
                      </tr>
                    </thead>

                    <tbody>
                      <tr>
                        <td style={{ width: '100%' }}>
                          <div
                            className={FormatTheme ? 'page' : ''}
                            style={{ lineHeight: '1', fontSize: '13px' }}
                          >
                            <table
                              style={{ width: '99%', margin: 'auto' }}
                              className="A4TableA4Style11"
                            >
                              <thead>
                                <tr
                                  style={{
                                    background: '#373B44',
                                    color: '#fff',
                                  }}
                                >
                                  {GlobaldummyData
                                    ? GlobalSlNo && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          S.No
                                        </th>
                                      )
                                    : SLNO == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          S.No
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalItem && (
                                        <th style={{ ...tableHeaderStyle }}>
                                          Item
                                        </th>
                                      )
                                    : Item == true && (
                                        <th style={{ ...tableHeaderStyle }}>
                                          Item
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalHsnCode && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          HSN
                                        </th>
                                      )
                                    : HsnCode == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          HSN
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalQuantity && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Qty
                                        </th>
                                      )
                                    : Quantity == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          {WeightasKg ? 'Qty/Kg' : 'Qty'}
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalMRP && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          MRP
                                        </th>
                                      )
                                    : MRP == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          MRP
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalRate && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Rate
                                        </th>
                                      )
                                    : Rate == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Rate
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalDiscount && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Dis{' '}
                                        </th>
                                      )
                                    : Discount == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Dis{' '}
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalTax && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Tax %
                                        </th>
                                      )
                                    : Tax &&
                                      table2Data?.OrderType !== 'E' && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Tax %
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalAmount && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'right',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Amt
                                        </th>
                                      )
                                    : Amount == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'right',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Amt
                                        </th>
                                      )}
                                </tr>
                              </thead>

                              <tbody>
                                {dataChunk?.map((item, index) => (
                                  <tr
                                    key={index}
                                    style={
                                      index % 2 !== 1 && rowtypeStyle === 'even'
                                        ? {
                                            ...tableBodyStyle,
                                          }
                                        : index % 2 === 1 &&
                                            rowtypeStyle === 'odd'
                                          ? {
                                              ...tableBodyStyle,
                                            }
                                          : {}
                                    }
                                  >
                                    {GlobaldummyData
                                      ? GlobalSlNo && (
                                          <td style={{ textAlign: 'center' }}>
                                            {index + 1}
                                          </td>
                                        )
                                      : SLNO == true && (
                                          <td style={{ textAlign: 'center' }}>
                                            {chunkIndex * chunkSize + index + 1}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalItem && <td>{item?.name}</td>
                                      : Item && (
                                          <td
                                            style={{
                                              display: 'flex',
                                              flexDirection: 'column',
                                            }}
                                          >
                                            <div>{item?.ProdName}</div>

                                            {PackageDetails?.filter(
                                              (pkg) =>
                                                pkg.ProdId === item.ProdId
                                            ).length > 0 ? (
                                              <div>
                                                {PackageDetails?.filter(
                                                  (pkg) =>
                                                    pkg.ProdId === item.ProdId
                                                )?.map((pkg, index) => (
                                                  <span
                                                    key={index}
                                                    style={{ display: 'block' }}
                                                  >
                                                    {pkg.ParcelCount} PCS{' '}
                                                    {pkg.ParcelQty} PACK (
                                                    {pkg.ParcelType})
                                                  </span>
                                                ))}
                                              </div>
                                            ) : (
                                              UomPrint?.SettingValue ===
                                                'Y' && (
                                                <div>
                                                  ({item?.Size || '1'}{' '}
                                                  {item?.SinglePc === 'Y'
                                                    ? 'PCS'
                                                    : item?.Type !== 'C'
                                                      ? item?.UomName
                                                      : 'COMBO'}
                                                  )
                                                </div>
                                              )
                                            )}

                                            {item?.BrandName && (
                                              <div>{item.BrandName}</div>
                                            )}

                                            {/* Serial Numbers */}
                                            {item?.ProductIdentifierDtls?.map(
                                              (id, index) => (
                                                <div key={`serial-${index}`}>
                                                  {id?.SerialNumber && (
                                                    <div>{id.SerialNumber}</div>
                                                  )}
                                                </div>
                                              )
                                            )}

                                            {/* IMEI */}
                                            {item?.ProductIdentifierDtls?.map(
                                              (id, index) => {
                                                const imei1 = id?.IMEI1 || '';
                                                const imei2 = id?.IMEI2 || '';

                                                return (
                                                  (imei1 || imei2) && (
                                                    <div key={`imei-${index}`}>
                                                      {[imei1, imei2]
                                                        .filter(Boolean)
                                                        .join(',')}
                                                    </div>
                                                  )
                                                );
                                              }
                                            )}

                                            {/* Description */}
                                            {id?.Description && (
                                              <div key={`desc-${index}`}>
                                                {id.Description}
                                              </div>
                                            )}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalHsnCode && (
                                          <td style={{ textAlign: 'center' }}>
                                            {item?.discount}
                                          </td>
                                        )
                                      : HsnCode == true && (
                                          <td style={{ textAlign: 'center' }}>
                                            {item?.HSN}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalQuantity && (
                                          <td style={{ textAlign: 'center' }}>
                                            {item?.quantity}
                                          </td>
                                        )
                                      : Quantity == true && (
                                          <td style={{ textAlign: 'center' }}>
                                            {item?.SalesQty}
                                          </td>
                                        )}

                                    {GlobaldummyData
                                      ? GlobalMRP && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.mrp}
                                          </td>
                                        )
                                      : MRP == true && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.SinglePc === 'Y'
                                              ? item?.Rate
                                              : item?.MRP}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalRate && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.Rate}
                                          </td>
                                        )
                                      : Rate == true && (
                                          <td style={{ textAlign: 'right' }}>
                                            {' '}
                                            {item?.MRP}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalDiscount && (
                                          <td>{item.discount}</td>
                                        )
                                      : Discount == true && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.Type !== 'C'
                                              ? item?.OfferAmt ||
                                                item?.DiscountAmt /
                                                  item?.SalesQty ||
                                                0
                                              : item?.OfferValue ||
                                                item?.DiscountAmt /
                                                  item?.SalesQty ||
                                                0}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalTax && (
                                          <td>{item.ProdTaxPercentage}</td>
                                        )
                                      : Tax &&
                                        table2Data?.OrderType !== 'E' && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.ProdTaxPercentage || 0}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalAmount && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.price}
                                          </td>
                                        )
                                      : Amount == true && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.Type !== 'C'
                                              ? item?.TotalAmt -
                                                (item?.OfferAmt || 0)
                                              : item?.TotalAmt -
                                                (item?.OfferValue || 0)}
                                          </td>
                                        )}
                                  </tr>
                                ))}
                              </tbody>
                            </table>

                            {!FormatTheme &&
                              chunkIndex === paginatedChunks.length - 1 && (
                                <div
                                  className="page-footerA4Style11"
                                  style={{
                                    marginTop: 'auto',
                                    pageBreakBefore: 'avoid',
                                    pageBreakInside: 'avoid',
                                    minHeight: 'auto',
                                  }}
                                >
                                  <>
                                    <div className="PrintA4Style11-print-ThirdDiv">
                                      <div>
                                        <div
                                          style={{
                                            display: 'flex',
                                            gap: '1rem',
                                            justifyContent: 'right',
                                            margin: '0.5rem 0rem',
                                            paddingRight: '1rem',
                                          }}
                                        >
                                          <div
                                            style={{
                                              display: 'flex',
                                              flexDirection: 'column',
                                              gap: '0.5rem',
                                            }}
                                          >
                                            <div>ITEMS</div>
                                            <div>Qty</div>
                                            {TotalOfferAmount > 0 ||
                                            table2Data?.OverallDisc ? (
                                              <div>OFFER</div>
                                            ) : (
                                              ''
                                            )}
                                            {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>Amount</div> */}
                                          </div>
                                          <div
                                            style={{
                                              textAlign: 'right',
                                              display: 'flex',
                                              flexDirection: 'column',
                                              gap: '0.5rem',
                                            }}
                                          >
                                            <div>
                                              {GlobaldummyData
                                                ? '7'
                                                : totalQuantityFilter?.length}
                                            </div>
                                            <div>
                                              {GlobaldummyData
                                                ? '9'
                                                : totalQuantity}
                                            </div>
                                            {TotalOfferAmount > 0 ||
                                            table2Data?.OverallDisc ? (
                                              <div>
                                                {Number(
                                                  TotalOfferAmount +
                                                    table2Data?.OverallDisc
                                                ).toFixed(2)}
                                              </div>
                                            ) : (
                                              ''
                                            )}
                                            {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
                                          </div>
                                        </div>
                                        <div
                                          className="total-Amount"
                                          style={{
                                            fontSize: '25px',
                                            fontWeight: '600',
                                            padding: '10px',
                                            // backgroundColor: '#fdc716',
                                            ...netAmountStyle,
                                            textAlign: 'center',
                                          }}
                                        >
                                          Amount :
                                          {GlobaldummyData
                                            ? '1066'
                                            : Number(
                                                table2Data?.NetAmount
                                              ).toFixed(2)}
                                        </div>
                                      </div>
                                    </div>
                                    {isEditedBill && lastTransaction && (
                                      <div
                                        style={{
                                          width: '100%',
                                          marginTop: '2px',
                                          paddingTop: '2px',
                                          display: 'flex',
                                          justifyContent: 'center',
                                          alignItems: 'flex-start',
                                          flexDirection: 'column',
                                          borderTop: '1px dashed #000',
                                        }}
                                      >
                                        <div
                                          style={{
                                            fontSize: '12px',
                                            width: '100%',
                                          }}
                                        >
                                          <div
                                            style={{
                                              display: 'flex',
                                              justifyContent: 'space-between',
                                            }}
                                          >
                                            <span
                                              style={{
                                                color: '#000',
                                                fontWeight: 600,
                                              }}
                                            >
                                              Bill Gross Amount
                                            </span>
                                            <strong>
                                              {(
                                                lastTransaction?.BeforeAdjustment ||
                                                0
                                              ).toFixed(2)}
                                            </strong>
                                          </div>
                                          <div
                                            style={{
                                              display: 'flex',
                                              justifyContent: 'space-between',
                                              fontWeight: 600,
                                              color:
                                                lastTransaction?.AdjustmentType ===
                                                'REFUND'
                                                  ? '#000'
                                                  : '#000',
                                            }}
                                          >
                                            <span>{'Adjustment Amount'}</span>
                                            <span>
                                              {lastTransaction?.AdjustmentType ===
                                              'REFUND'
                                                ? '-'
                                                : '+'}
                                              {Math.abs(
                                                (lastTransaction?.BeforeAdjustment ??
                                                  0) -
                                                  (lastTransaction?.AfterAdjustment ??
                                                    0)
                                              ).toFixed(2)}
                                            </span>
                                          </div>
                                          <div
                                            style={{
                                              display: 'flex',
                                              justifyContent: 'space-between',
                                              marginTop: '4px',
                                            }}
                                          >
                                            <span
                                              style={{
                                                color: '#000',
                                                fontWeight: 600,
                                              }}
                                            >
                                              Net Bill Amount
                                            </span>
                                            <strong>
                                              {(
                                                lastTransaction?.AfterAdjustment ||
                                                0
                                              ).toFixed(2)}
                                            </strong>
                                          </div>
                                        </div>
                                      </div>
                                    )}
                                    {GlobaldummyData
                                      ? GlobalCredit && (
                                          <div
                                            style={{
                                              textAlign: 'left',
                                              fontSize: '14px',
                                              fontWeight: '600',
                                              lineHeight: '12px',
                                            }}
                                          >
                                            <h6>Advance Amount:</h6>
                                            <h6>Opening Balance:</h6>
                                          </div>
                                        )
                                      : CreditDetails &&
                                        table2Data?.CustomerDetails?.length >
                                          0 && (
                                          <div
                                            style={{
                                              textAlign: 'left',
                                              fontSize: '12px',
                                              fontWeight: '600',
                                              lineHeight: '12px',
                                            }}
                                          >
                                            {/* OLD CREDIT BAL */}
                                            {PaymentStatusSuccess?.[0]
                                              ?.PaymentTypeName ===
                                              'Credit' && (
                                              <>
                                                {table2Data.CustomerDetails[0]
                                                  .OldCreditBal > 0 ? (
                                                  <p>
                                                    Advance Amount:
                                                    {
                                                      table2Data
                                                        .CustomerDetails[0]
                                                        .OldCreditBal
                                                    }
                                                  </p>
                                                ) : table2Data
                                                    .CustomerDetails[0]
                                                    .OldCreditBal < 0 ? (
                                                  <p>
                                                    {' '}
                                                    Opening Balance:{' '}
                                                    {Math.abs(
                                                      table2Data
                                                        .CustomerDetails[0]
                                                        .OldCreditBal
                                                    )}
                                                  </p>
                                                ) : null}
                                              </>
                                            )}

                                            {/* CURRENT CREDIT BAL */}
                                            {table2Data.CustomerDetails[0]
                                              .CurrentCreditBal > 0 ? (
                                              <p>
                                                {' '}
                                                Current Advance Amount:{' '}
                                                {
                                                  table2Data.CustomerDetails[0]
                                                    .CurrentCreditBal
                                                }
                                              </p>
                                            ) : table2Data.CustomerDetails[0]
                                                .CurrentCreditBal < 0 ? (
                                              <p>
                                                {' '}
                                                Current Balance Amount:{' '}
                                                {Math.abs(
                                                  table2Data.CustomerDetails[0]
                                                    .CurrentCreditBal
                                                )}
                                              </p>
                                            ) : null}
                                          </div>
                                        )}
                                    <hr className="PrintA4Style11-print-dottline" />

                                    {table2Data?.OrderType !== 'E' &&
                                      OrderDetailGST?.length > 0 &&
                                      OrderDetailGST?.[0]?.TaxAmt > 0 && (
                                        <>
                                          <p
                                            style={{
                                              margin: 0,
                                              padding: 0,
                                              fontSize: '12px',
                                              textAlign: 'center',
                                            }}
                                          >
                                            --------- GST Breakup Details
                                            -----------
                                          </p>
                                          <table className="PrintA4Style11-print-table">
                                            <thead>
                                              <tr>
                                                <th
                                                  style={{
                                                    width: '10px',
                                                    textAlign: 'center',
                                                  }}
                                                >
                                                  GST Rate
                                                </th>
                                                <th
                                                  style={{
                                                    width: '10px',
                                                    textAlign: 'right',
                                                  }}
                                                >
                                                  Taxable Amount
                                                </th>
                                                <th
                                                  style={{
                                                    width: '10px',
                                                    textAlign: 'right',
                                                  }}
                                                >
                                                  CGST
                                                </th>
                                                <th
                                                  style={{
                                                    width: '10px',
                                                    textAlign: 'right',
                                                  }}
                                                >
                                                  SGST
                                                </th>
                                                <th
                                                  style={{
                                                    width: '10px',
                                                    textAlign: 'right',
                                                  }}
                                                >
                                                  Total
                                                </th>
                                              </tr>
                                            </thead>
                                            <tbody>
                                              {OrderDetailGST?.map((item) => (
                                                <tr>
                                                  <td
                                                    style={{
                                                      textAlign: 'center',
                                                    }}
                                                  >
                                                    {item?.TaxPercentage}%{' '}
                                                  </td>
                                                  <td
                                                    style={{
                                                      textAlign: 'right',
                                                    }}
                                                  >
                                                    {' '}
                                                    {Number(
                                                      item.WithOutTaxAmount
                                                    ).toFixed(2)}{' '}
                                                  </td>
                                                  <td
                                                    style={{
                                                      textAlign: 'right',
                                                    }}
                                                  >
                                                    {' '}
                                                    {Number(item.CGST).toFixed(
                                                      2
                                                    )}
                                                  </td>
                                                  <td
                                                    style={{
                                                      textAlign: 'right',
                                                    }}
                                                  >
                                                    {' '}
                                                    {Number(item.SGST).toFixed(
                                                      2
                                                    )}
                                                  </td>
                                                  <td
                                                    style={{
                                                      textAlign: 'right',
                                                    }}
                                                  >
                                                    {' '}
                                                    {Number(
                                                      item.TotalAmt
                                                    ).toFixed(2)}
                                                  </td>
                                                </tr>
                                              ))}
                                            </tbody>
                                          </table>
                                        </>
                                      )}

                                    <div className="PrintA4Style11-print-ThirdDiv2">
                                      <div
                                        style={{
                                          display: 'flex',
                                          justifyContent: 'right',
                                          flexDirection: 'column',
                                        }}
                                      >
                                        <span
                                          style={{ margin: '0.5rem 0rem' }}
                                        />
                                      </div>
                                    </div>

                                    <div
                                      style={{
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        alignItems: 'center',
                                      }}
                                    >
                                      <div
                                        style={{
                                          display: 'flex',
                                          alignItems: 'center',
                                          gap: '0.3rem',
                                        }}
                                      ></div>

                                      {GlobaldummyData
                                        ? GlobalQrcodet && (
                                            <div
                                              style={{
                                                display: 'flex',
                                                flexDirection: 'column',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                              }}
                                            >
                                              <QRCode
                                                value={`upi://pay?pa=${UpiId}&pn=Merchant&am=${table2Data?.NetAmount}&cu=INR`}
                                                size={80}
                                              />
                                              <div style={{ fontSize: '12px' }}>
                                                Scan to Pay{' '}
                                              </div>
                                              <div style={{ fontSize: '12px' }}>
                                                ₹
                                                {GlobaldummyData
                                                  ? '1,066'
                                                  : Number(
                                                      table2Data?.NetAmount
                                                    ).toFixed(2)}
                                              </div>
                                            </div>
                                          )
                                        : Qrcodet &&
                                          paymentTypeUPI && (
                                            <div
                                              style={{
                                                display: 'flex',
                                                flexDirection: 'column',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                              }}
                                            >
                                              <QRCode
                                                value={`upi://pay?pa=${GlobalUpiID}&pn=Merchant&am=${table2Data?.NetAmount}&cu=INR`}
                                                size={80}
                                              />
                                              <div style={{ fontSize: '10px' }}>
                                                Scan to Pay{' '}
                                              </div>
                                              <div style={{ fontSize: '10px' }}>
                                                ₹
                                                {GlobaldummyData
                                                  ? '1,066'
                                                  : Number(
                                                      table2Data?.NetAmount
                                                    ).toFixed(2)}
                                              </div>
                                            </div>
                                          )}
                                    </div>

                                    <div
                                      style={{
                                        margin: '0.5rem 0.5rem',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        alignItems: 'flex-start',
                                        gap: '0.5rem',
                                        height: GlobalthemeFormatr
                                          ? '13vh'
                                          : '5vh',
                                      }}
                                    >
                                      {GlobaldummyData && GlobalCashierName && (
                                        <div className="PrintA4Style11-print-InfoDivsub">
                                          CASHIER : {CashierName}
                                        </div>
                                      )}
                                      {CashierName && CashierNameField && (
                                        <div className="PrintA4Style11-print-InfoDivsub">
                                          CASHIER : {CashierName}
                                        </div>
                                      )}
                                      <div
                                        className="PrintA4Style11-print-InfoDivsub"
                                        style={{ textTransform: 'capitalize' }}
                                      >
                                        {Date1}
                                      </div>
                                    </div>
                                  </>
                                  {sportsAppPreference && MembershipApplied && (
                                    <div
                                      style={{
                                        width: '100%',
                                        textAlign: 'center',
                                        paddingTop: '10px',
                                        fontSize: '13px',
                                      }}
                                    >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}</div>
                                  )}

                                  <div style={{ ...footerColorStyle }}>
                                    {GlobaldummyData
                                      ? GlobalIsnotes && (
                                          <div>
                                            <p style={{ padding: '0rem 1rem' }}>
                                              Notes : 10 days Return policy
                                            </p>

                                            <hr className="PrintA4Style11-print-dottline" />
                                          </div>
                                        )
                                      : Notestext && (
                                          <div>
                                            <p
                                              style={{
                                                padding: '0rem 1rem',
                                                textAlign: 'center',
                                              }}
                                            >
                                              {Notestext}
                                            </p>

                                            <hr className="PrintA4Style11-print-dottline" />
                                          </div>
                                        )}

                                    <div
                                      style={{
                                        display: 'flex',
                                        width: '90%',
                                        padding: '0 1rem',
                                        justifyContent: GlobaltermsAndConditions
                                          ? 'space-between'
                                          : 'flex-end',
                                        alignItems: 'center',
                                      }}
                                    >
                                      {GlobaldummyData
                                        ? GlobaltermsAndConditions && (
                                            <div
                                              style={{
                                                margin: '8px 0',
                                                padding: '8px',
                                                fontFamily: 'sans-serif',
                                                width: '100%',
                                              }}
                                            >
                                              <p
                                                style={{
                                                  fontSize: '13px',
                                                  fontWeight: 'bold',
                                                  marginBottom: '6px',
                                                }}
                                              >
                                                Terms & Conditions
                                              </p>
                                              <ol
                                                style={{
                                                  fontSize: '12px',
                                                  paddingLeft: '18px',
                                                  margin: 0,
                                                  lineHeight: '1',
                                                }}
                                              >
                                                <li>
                                                  Once goods are sold, they are
                                                  not exchangeable or
                                                  refundable.
                                                </li>
                                                <li>
                                                  Please check the product
                                                  before leaving the counter.
                                                </li>
                                              </ol>
                                            </div>
                                          )
                                        : TermsnAdCondition == true &&
                                          TermsAndConditions?.length > 0 && (
                                            <div
                                              style={{
                                                margin: '8px 0',
                                                fontFamily: 'sans-serif',
                                                width: '100%',
                                                display: 'flex',
                                                flexDirection: 'column',
                                                alignItems: 'flex-start',
                                              }}
                                            >
                                              <p
                                                style={{
                                                  fontSize: '13px',
                                                  fontWeight: 'bold',
                                                  marginBottom: '6px',
                                                }}
                                              >
                                                Terms & Conditions
                                              </p>
                                              <ol
                                                style={{
                                                  fontSize: '12px',
                                                  paddingLeft: '18px',
                                                  margin: 0,
                                                  lineHeight: '1',
                                                }}
                                              >
                                                {TermsAndConditions?.map(
                                                  (item) => (
                                                    <li
                                                      style={{
                                                        textAlign: 'start',
                                                      }}
                                                    >
                                                      {item?.TermsandConditions}
                                                    </li>
                                                  )
                                                )}
                                                {/* <li>Please check the product before leaving the counter.</li> */}
                                              </ol>
                                            </div>
                                          )}

                                      {GlobaldummyData
                                        ? GlobalSignature && (
                                            <div
                                              style={{
                                                display: 'flex',
                                                flexDirection: 'column',
                                                alignItems: 'flex-end',
                                                paddingBottom: '1rem',
                                              }}
                                            >
                                              <p
                                                style={{
                                                  fontSize: '13px',
                                                  fontWeight: 'bold',
                                                  marginBottom: '6px',
                                                }}
                                              >
                                                Signature
                                              </p>
                                              <img
                                                style={{
                                                  width: '70px',
                                                  height: '40px',
                                                }}
                                                src={
                                                  GlobalSignatureImages
                                                    ? GlobalSignatureImages
                                                    : signature
                                                }
                                                alt=""
                                              />
                                            </div>
                                          )
                                        : Signature == true && (
                                            <div
                                              style={{
                                                display: 'flex',
                                                flexDirection: 'column',
                                                alignItems: 'center',
                                                marginTop: '1rem',
                                                paddingBottom: '1rem',
                                              }}
                                            >
                                              <p
                                                style={{
                                                  fontSize: '13px',
                                                  fontWeight: 'bold',
                                                  marginBottom: '6px',
                                                }}
                                              >
                                                Signature
                                              </p>
                                              <img
                                                style={{
                                                  width: '100px',
                                                  height: '60px',
                                                }}
                                                src={SignatureImg}
                                                alt=""
                                              />
                                            </div>
                                          )}
                                    </div>
                                  </div>
                                </div>
                              )}

                            <hr className="PrintA4Style11-print-dottline" />
                            {/* {(chunkIndex === paginatedChunks.length - 1) && (
                             
                            )} */}
                          </div>
                        </td>
                      </tr>
                    </tbody>

                    <tfoot>
                      <tr>
                        <td>
                          <div className="page-footerA4Style11-space"></div>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </>
              )}

              {DineInData?.length > 0 && (
                <>
                  <div
                    style={{
                      display: 'flex',
                      width: '100%',
                      justifyContent: 'center',
                      alignItems: 'center',
                      fontSize: '12px',
                      fontWeight: '600',
                    }}
                  >
                    Dine In
                  </div>
                  <table className="A4TableStyle11" style={{ width: '100%' }}>
                    <thead>
                      <tr>
                        <td>
                          {/* Placeholder for the fixed-position header  */}
                          <div className="page-headerA4Style11-space"> </div>
                        </td>
                      </tr>
                    </thead>

                    <tbody>
                      <tr>
                        <td style={{ width: '100%' }}>
                          <div
                            className={FormatTheme ? 'page' : ''}
                            style={{ lineHeight: '1', fontSize: '13px' }}
                          >
                            <table
                              style={{ width: '100%' }}
                              className="A4TableA4Style11"
                            >
                              <thead>
                                <tr
                                  style={{
                                    background: '#373B44',
                                    color: '#fff',
                                  }}
                                >
                                  {GlobaldummyData
                                    ? GlobalSlNo && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          S.No
                                        </th>
                                      )
                                    : SLNO == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          S.No
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalItem && <th>Item</th>
                                    : Item == true && <th>Item</th>}
                                  {GlobaldummyData
                                    ? GlobalHsnCode && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          HSN
                                        </th>
                                      )
                                    : HsnCode == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          HSN
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalQuantity && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Qty
                                        </th>
                                      )
                                    : Quantity == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          {WeightasKg ? 'Qty/Kg' : 'Qty'}
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalMRP && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          MRP
                                        </th>
                                      )
                                    : MRP == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          MRP
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalRate && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Rate
                                        </th>
                                      )
                                    : Rate == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Rate
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalDiscount && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Dis{' '}
                                        </th>
                                      )
                                    : Discount == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Dis{' '}
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalTax && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Tax %
                                        </th>
                                      )
                                    : Tax &&
                                      table2Data?.OrderType !== 'E' && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Tax %
                                        </th>
                                      )}
                                  {GlobaldummyData
                                    ? GlobalAmount && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            textAlign: 'right',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Amt
                                        </th>
                                      )
                                    : Amount == true && (
                                        <th
                                          style={{
                                            width: '8%',
                                            textAlign: 'center',
                                            textAlign: 'right',
                                            ...tableHeaderStyle,
                                          }}
                                        >
                                          Amt
                                        </th>
                                      )}
                                </tr>
                              </thead>

                              <tbody>
                                {dataChunk?.map((item, index) => (
                                  <tr
                                    key={index}
                                    style={
                                      index % 2 !== 1 && rowtypeStyle === 'even'
                                        ? {
                                            ...tableBodyStyle,
                                          }
                                        : index % 2 === 1 &&
                                            rowtypeStyle === 'odd'
                                          ? {
                                              ...tableBodyStyle,
                                            }
                                          : {}
                                    }
                                  >
                                    {GlobaldummyData
                                      ? GlobalSlNo && (
                                          <td style={{ textAlign: 'center' }}>
                                            {index + 1}
                                          </td>
                                        )
                                      : SLNO == true && (
                                          <td style={{ textAlign: 'center' }}>
                                            {chunkIndex * chunkSize + index + 1}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalItem && <td>{item?.ProdName}</td>
                                      : Item && (
                                          <td
                                            style={{
                                              display: 'flex',
                                              flexDirection: 'column',
                                            }}
                                          >
                                            {/* Product Name */}
                                            <div>{item?.ProdName}</div>

                                            {/* Size + UOM */}
                                            {UomPrint?.SettingValue === 'Y' && (
                                              <div>
                                                ({item?.Size || '1'}{' '}
                                                {item?.SinglePc === 'Y'
                                                  ? 'PCS'
                                                  : item?.Type !== 'C'
                                                    ? item?.UomName
                                                    : 'COMBO'}
                                                )
                                              </div>
                                            )}

                                            {/* Brand */}
                                            {item?.BrandName && (
                                              <div>{item.BrandName}</div>
                                            )}

                                            {/* Identifiers */}
                                            {item?.ProductIdentifierDtls?.map(
                                              (id, index) =>
                                                (id?.SerialNumber ||
                                                  id?.IMEI1 ||
                                                  id?.IMEI2) && (
                                                  <div
                                                    key={index}
                                                    style={{
                                                      display: 'flex',
                                                      gap: '3px',
                                                    }}
                                                  >
                                                    {id?.SerialNumber && (
                                                      <div>
                                                        {id.SerialNumber}
                                                      </div>
                                                    )}
                                                    {(id?.IMEI1 ||
                                                      id?.IMEI2) && (
                                                      <div>
                                                        {[id.IMEI1, id.IMEI2]
                                                          .filter(Boolean)
                                                          .join(',')}
                                                      </div>
                                                    )}
                                                  </div>
                                                )
                                            )}

                                            {/* Description from first identifier */}
                                            {item?.ProductIdentifierDtls?.[0]
                                              ?.Description && (
                                              <div>
                                                {
                                                  item.ProductIdentifierDtls[0]
                                                    .Description
                                                }
                                              </div>
                                            )}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalHsnCode && (
                                          <td style={{ textAlign: 'center' }}>
                                            {item?.HSN}
                                          </td>
                                        )
                                      : HsnCode == true && (
                                          <td style={{ textAlign: 'center' }}>
                                            {item?.HSN}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalQuantity && (
                                          <td style={{ textAlign: 'center' }}>
                                            {item?.SalesQty}
                                          </td>
                                        )
                                      : Quantity == true && (
                                          <td style={{ textAlign: 'center' }}>
                                            {item?.SalesQty}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalMRP && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.MRP}
                                          </td>
                                        )
                                      : MRP == true && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.SinglePc === 'Y'
                                              ? item?.Rate
                                              : item?.MRP}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalRate && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.Rate}
                                          </td>
                                        )
                                      : Rate == true && (
                                          <td style={{ textAlign: 'right' }}>
                                            {' '}
                                            {item?.Rate}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalDiscount && (
                                          <td>{item.discount}</td>
                                        )
                                      : Discount == true && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.Type !== 'C'
                                              ? item?.OfferAmt ||
                                                item?.DiscountAmt /
                                                  item?.SalesQty ||
                                                0
                                              : item?.OfferValue ||
                                                item?.DiscountAmt /
                                                  item?.SalesQty ||
                                                0}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalTax && (
                                          <td>{item.ProdTaxPercentage}</td>
                                        )
                                      : Tax &&
                                        table2Data?.OrderType !== 'E' && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.ProdTaxPercentage || 0}
                                          </td>
                                        )}
                                    {GlobaldummyData
                                      ? GlobalAmount && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.TotalAmt}
                                          </td>
                                        )
                                      : Amount == true && (
                                          <td style={{ textAlign: 'right' }}>
                                            {item?.Type !== 'C'
                                              ? item?.TotalAmt -
                                                (item?.OfferAmt || 0)
                                              : item?.TotalAmt -
                                                (item?.OfferValue || 0)}
                                          </td>
                                        )}
                                  </tr>
                                ))}
                              </tbody>
                            </table>

                            {!FormatTheme &&
                              chunkIndex === paginatedChunks.length - 1 && (
                                <div
                                  className="page-footerA4Style11"
                                  style={{
                                    marginTop: 'auto',
                                    pageBreakBefore: 'avoid',
                                    pageBreakInside: 'avoid',
                                    minHeight: 'auto',
                                  }}
                                >
                                  <>
                                    <div className="PrintA4Style11-print-ThirdDiv">
                                      <div>
                                        <div
                                          style={{
                                            display: 'flex',
                                            gap: '1rem',
                                            justifyContent: 'right',
                                            margin: '0.5rem 0rem',
                                            paddingRight: '1rem',
                                          }}
                                        >
                                          <div
                                            style={{
                                              display: 'flex',
                                              flexDirection: 'column',
                                              gap: '0.5rem',
                                            }}
                                          >
                                            <div>ITEMS</div>
                                            <div>Qty</div>
                                            {TotalOfferAmount > 0 ||
                                            table2Data?.OverallDisc ? (
                                              <div>OFFER</div>
                                            ) : (
                                              ''
                                            )}
                                            {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>Amount</div> */}
                                          </div>
                                          <div
                                            style={{
                                              textAlign: 'right',
                                              display: 'flex',
                                              flexDirection: 'column',
                                              gap: '0.5rem',
                                            }}
                                          >
                                            <div>
                                              {GlobaldummyData
                                                ? '7'
                                                : totalQuantityFilter?.length}
                                            </div>
                                            <div>
                                              {GlobaldummyData
                                                ? '9'
                                                : totalQuantity}
                                            </div>
                                            {TotalOfferAmount > 0 ||
                                            table2Data?.OverallDisc ? (
                                              <div>
                                                {Number(
                                                  TotalOfferAmount +
                                                    table2Data?.OverallDisc
                                                ).toFixed(2)}
                                              </div>
                                            ) : (
                                              ''
                                            )}
                                            {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
                                          </div>
                                        </div>
                                        <div
                                          className="total-Amount"
                                          style={{
                                            fontSize: '25px',
                                            fontWeight: '600',
                                            padding: '10px',
                                            // backgroundColor: '#fdc716',
                                            ...netAmountStyle,
                                            textAlign: 'center',
                                          }}
                                        >
                                          Amount :
                                          {GlobaldummyData
                                            ? '1066'
                                            : Number(
                                                table2Data?.NetAmount
                                              ).toFixed(2)}
                                        </div>
                                      </div>
                                    </div>
                                    {isEditedBill && lastTransaction && (
                                      <div
                                        style={{
                                          width: '100%',
                                          marginTop: '2px',
                                          paddingTop: '2px',
                                          display: 'flex',
                                          justifyContent: 'center',
                                          alignItems: 'flex-start',
                                          flexDirection: 'column',
                                          borderTop: '1px dashed #000',
                                        }}
                                      >
                                        <div
                                          style={{
                                            fontSize: '12px',
                                            width: '100%',
                                          }}
                                        >
                                          <div
                                            style={{
                                              display: 'flex',
                                              justifyContent: 'space-between',
                                            }}
                                          >
                                            <span
                                              style={{
                                                color: '#000',
                                                fontWeight: 600,
                                              }}
                                            >
                                              Bill Gross Amount
                                            </span>
                                            <strong>
                                              {(
                                                lastTransaction?.BeforeAdjustment ||
                                                0
                                              ).toFixed(2)}
                                            </strong>
                                          </div>
                                          <div
                                            style={{
                                              display: 'flex',
                                              justifyContent: 'space-between',
                                              fontWeight: 600,
                                              color:
                                                lastTransaction?.AdjustmentType ===
                                                'REFUND'
                                                  ? '#000'
                                                  : '#000',
                                            }}
                                          >
                                            <span>{'Adjustment Amount'}</span>
                                            <span>
                                              {lastTransaction?.AdjustmentType ===
                                              'REFUND'
                                                ? '-'
                                                : '+'}
                                              {Math.abs(
                                                (lastTransaction?.BeforeAdjustment ??
                                                  0) -
                                                  (lastTransaction?.AfterAdjustment ??
                                                    0)
                                              ).toFixed(2)}
                                            </span>
                                          </div>
                                          <div
                                            style={{
                                              display: 'flex',
                                              justifyContent: 'space-between',
                                              marginTop: '4px',
                                            }}
                                          >
                                            <span
                                              style={{
                                                color: '#000',
                                                fontWeight: 600,
                                              }}
                                            >
                                              Net Bill Amount
                                            </span>
                                            <strong>
                                              {(
                                                lastTransaction?.AfterAdjustment ||
                                                0
                                              ).toFixed(2)}
                                            </strong>
                                          </div>
                                        </div>
                                      </div>
                                    )}
                                    {GlobaldummyData
                                      ? GlobalCredit && (
                                          <div
                                            style={{
                                              textAlign: 'left',
                                              fontSize: '14px',
                                              fontWeight: '600',
                                              lineHeight: '12px',
                                            }}
                                          >
                                            <h6>Advance Amount:</h6>
                                            <h6>Opening Balance:</h6>
                                          </div>
                                        )
                                      : CreditDetails &&
                                        table2Data?.CustomerDetails?.length >
                                          0 && (
                                          <div
                                            style={{
                                              textAlign: 'left',
                                              fontSize: '12px',
                                              fontWeight: '600',
                                              lineHeight: '12px',
                                            }}
                                          >
                                            {/* OLD CREDIT BAL */}
                                            {PaymentStatusSuccess?.[0]
                                              ?.PaymentTypeName ===
                                              'Credit' && (
                                              <>
                                                {table2Data.CustomerDetails[0]
                                                  .OldCreditBal > 0 ? (
                                                  <p>
                                                    Advance Amount:
                                                    {
                                                      table2Data
                                                        .CustomerDetails[0]
                                                        .OldCreditBal
                                                    }
                                                  </p>
                                                ) : table2Data
                                                    .CustomerDetails[0]
                                                    .OldCreditBal < 0 ? (
                                                  <p>
                                                    {' '}
                                                    Opening Balance:{' '}
                                                    {Math.abs(
                                                      table2Data
                                                        .CustomerDetails[0]
                                                        .OldCreditBal
                                                    )}
                                                  </p>
                                                ) : null}
                                              </>
                                            )}

                                            {/* CURRENT CREDIT BAL */}
                                            {table2Data.CustomerDetails[0]
                                              .CurrentCreditBal > 0 ? (
                                              <p>
                                                {' '}
                                                Current Advance Amount:{' '}
                                                {
                                                  table2Data.CustomerDetails[0]
                                                    .CurrentCreditBal
                                                }
                                              </p>
                                            ) : table2Data.CustomerDetails[0]
                                                .CurrentCreditBal < 0 ? (
                                              <p>
                                                {' '}
                                                Current Balance Amount:{' '}
                                                {Math.abs(
                                                  table2Data.CustomerDetails[0]
                                                    .CurrentCreditBal
                                                )}
                                              </p>
                                            ) : null}
                                          </div>
                                        )}
                                    <hr className="PrintA4Style11-print-dottline" />

                                    {table2Data?.OrderType !== 'E' &&
                                      OrderDetailGST?.length > 0 &&
                                      OrderDetailGST?.[0]?.TaxAmt > 0 && (
                                        <>
                                          <p
                                            style={{
                                              margin: 0,
                                              padding: 0,
                                              fontSize: '12px',
                                              textAlign: 'center',
                                            }}
                                          >
                                            --------- GST Breakup Details
                                            -----------
                                          </p>
                                          <table className="PrintA4Style11-print-table">
                                            <thead>
                                              <tr>
                                                <th
                                                  style={{
                                                    width: '10px',
                                                    textAlign: 'center',
                                                  }}
                                                >
                                                  GST Rate
                                                </th>
                                                <th
                                                  style={{
                                                    width: '10px',
                                                    textAlign: 'right',
                                                  }}
                                                >
                                                  Taxable Amount
                                                </th>
                                                <th
                                                  style={{
                                                    width: '10px',
                                                    textAlign: 'right',
                                                  }}
                                                >
                                                  CGST
                                                </th>
                                                <th
                                                  style={{
                                                    width: '10px',
                                                    textAlign: 'right',
                                                  }}
                                                >
                                                  SGST
                                                </th>
                                                <th
                                                  style={{
                                                    width: '10px',
                                                    textAlign: 'right',
                                                  }}
                                                >
                                                  Total
                                                </th>
                                              </tr>
                                            </thead>
                                            <tbody>
                                              {OrderDetailGST?.map((item) => (
                                                <tr>
                                                  <td
                                                    style={{
                                                      textAlign: 'center',
                                                    }}
                                                  >
                                                    {item?.TaxPercentage}%{' '}
                                                  </td>
                                                  <td
                                                    style={{
                                                      textAlign: 'right',
                                                    }}
                                                  >
                                                    {' '}
                                                    {Number(
                                                      item.WithOutTaxAmount
                                                    ).toFixed(2)}{' '}
                                                  </td>
                                                  <td
                                                    style={{
                                                      textAlign: 'right',
                                                    }}
                                                  >
                                                    {' '}
                                                    {Number(item.CGST).toFixed(
                                                      2
                                                    )}
                                                  </td>
                                                  <td
                                                    style={{
                                                      textAlign: 'right',
                                                    }}
                                                  >
                                                    {' '}
                                                    {Number(item.SGST).toFixed(
                                                      2
                                                    )}
                                                  </td>
                                                  <td
                                                    style={{
                                                      textAlign: 'right',
                                                    }}
                                                  >
                                                    {' '}
                                                    {Number(
                                                      item.TotalAmt
                                                    ).toFixed(2)}
                                                  </td>
                                                </tr>
                                              ))}
                                            </tbody>
                                          </table>
                                        </>
                                      )}

                                    <div className="PrintA4Style11-print-ThirdDiv2">
                                      <div
                                        style={{
                                          display: 'flex',
                                          justifyContent: 'right',
                                          flexDirection: 'column',
                                        }}
                                      >
                                        <hr style={{ margin: '0.5rem 0rem' }} />
                                      </div>
                                    </div>

                                    <div
                                      style={{
                                        display: 'flex',
                                        justifyContent: 'space-between',
                                        alignItems: 'center',
                                      }}
                                    >
                                      <div
                                        style={{
                                          display: 'flex',
                                          alignItems: 'center',
                                          gap: '0.3rem',
                                        }}
                                      ></div>

                                      {GlobaldummyData
                                        ? GlobalQrcodet && (
                                            <div
                                              style={{
                                                display: 'flex',
                                                flexDirection: 'column',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                              }}
                                            >
                                              <QRCode
                                                value={`upi://pay?pa=${UpiId}&pn=Merchant&am=${table2Data?.NetAmount}&cu=INR`}
                                                size={80}
                                              />
                                              <div style={{ fontSize: '12px' }}>
                                                Scan to Pay{' '}
                                              </div>
                                              <div style={{ fontSize: '12px' }}>
                                                ₹
                                                {GlobaldummyData
                                                  ? '1,066'
                                                  : Number(
                                                      table2Data?.NetAmount
                                                    ).toFixed(2)}
                                              </div>
                                            </div>
                                          )
                                        : Qrcodet &&
                                          paymentTypeUPI && (
                                            <div
                                              style={{
                                                display: 'flex',
                                                flexDirection: 'column',
                                                justifyContent: 'center',
                                                alignItems: 'center',
                                              }}
                                            >
                                              <QRCode
                                                value={`upi://pay?pa=${GlobalUpiID}&pn=Merchant&am=${table2Data?.NetAmount}&cu=INR`}
                                                size={80}
                                              />
                                              <div style={{ fontSize: '10px' }}>
                                                Scan to Pay{' '}
                                              </div>
                                              <div style={{ fontSize: '10px' }}>
                                                ₹
                                                {GlobaldummyData
                                                  ? '1,066'
                                                  : Number(
                                                      table2Data?.NetAmount
                                                    ).toFixed(2)}
                                              </div>
                                            </div>
                                          )}
                                    </div>

                                    <div
                                      style={{
                                        margin: '0.5rem 0.5rem',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        alignItems: 'flex-start',
                                        gap: '0.5rem',
                                        height: GlobalthemeFormatr
                                          ? '13vh'
                                          : '5vh',
                                      }}
                                    >
                                      {GlobaldummyData && GlobalCashierName && (
                                        <div className="PrintA4Style11-print-InfoDivsub">
                                          CASHIER : {CashierName}
                                        </div>
                                      )}
                                      {CashierName && CashierNameField && (
                                        <div className="PrintA4Style11-print-InfoDivsub">
                                          CASHIER : {CashierName}
                                        </div>
                                      )}
                                      <div
                                        className="PrintA4Style11-print-InfoDivsub"
                                        style={{ textTransform: 'capitalize' }}
                                      >
                                        {Date1}
                                      </div>
                                    </div>
                                  </>
                                  {sportsAppPreference && MembershipApplied && (
                                    <div
                                      style={{
                                        width: '100%',
                                        textAlign: 'center',
                                        paddingTop: '10px',
                                        fontSize: '13px',
                                      }}
                                    >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}</div>
                                  )}

                                  <div style={{ ...footerColorStyle }}>
                                    {GlobaldummyData
                                      ? GlobalIsnotes && (
                                          <div>
                                            <p style={{ padding: '0rem 1rem' }}>
                                              Notes : 10 days Return policy
                                            </p>

                                            <hr className="PrintA4Style11-print-dottline" />
                                          </div>
                                        )
                                      : Notestext && (
                                          <div>
                                            <p
                                              style={{
                                                padding: '0rem 1rem',
                                                textAlign: 'center',
                                              }}
                                            >
                                              {Notestext}
                                            </p>

                                            <hr className="PrintA4Style11-print-dottline" />
                                          </div>
                                        )}

                                    <div
                                      style={{
                                        display: 'flex',
                                        width: '90%',
                                        padding: '0 1rem',
                                        justifyContent: GlobaltermsAndConditions
                                          ? 'space-between'
                                          : 'flex-end',
                                        alignItems: 'center',
                                      }}
                                    >
                                      {GlobaldummyData
                                        ? GlobaltermsAndConditions && (
                                            <div
                                              style={{
                                                margin: '8px 0',
                                                padding: '8px',
                                                fontFamily: 'sans-serif',
                                                width: '100%',
                                              }}
                                            >
                                              <p
                                                style={{
                                                  fontSize: '13px',
                                                  fontWeight: 'bold',
                                                  marginBottom: '6px',
                                                }}
                                              >
                                                Terms & Conditions
                                              </p>
                                              <ol
                                                style={{
                                                  fontSize: '12px',
                                                  paddingLeft: '18px',
                                                  margin: 0,
                                                  lineHeight: '1',
                                                }}
                                              >
                                                <li>
                                                  Once goods are sold, they are
                                                  not exchangeable or
                                                  refundable.
                                                </li>
                                                <li>
                                                  Please check the product
                                                  before leaving the counter.
                                                </li>
                                              </ol>
                                            </div>
                                          )
                                        : TermsnAdCondition == true &&
                                          TermsAndConditions?.length > 0 && (
                                            <div
                                              style={{
                                                margin: '8px 0',
                                                fontFamily: 'sans-serif',
                                                width: '100%',
                                                display: 'flex',
                                                flexDirection: 'column',
                                                alignItems: 'flex-start',
                                              }}
                                            >
                                              <p
                                                style={{
                                                  fontSize: '13px',
                                                  fontWeight: 'bold',
                                                  marginBottom: '6px',
                                                }}
                                              >
                                                Terms & Conditions
                                              </p>
                                              <ol
                                                style={{
                                                  fontSize: '12px',
                                                  paddingLeft: '18px',
                                                  margin: 0,
                                                  lineHeight: '1',
                                                }}
                                              >
                                                {TermsAndConditions?.map(
                                                  (item) => (
                                                    <li
                                                      style={{
                                                        textAlign: 'start',
                                                      }}
                                                    >
                                                      {item?.TermsandConditions}
                                                    </li>
                                                  )
                                                )}
                                                {/* <li>Please check the product before leaving the counter.</li> */}
                                              </ol>
                                            </div>
                                          )}

                                      {GlobaldummyData
                                        ? GlobalSignature && (
                                            <div
                                              style={{
                                                display: 'flex',
                                                flexDirection: 'column',
                                                alignItems: 'flex-end',
                                                paddingBottom: '1rem',
                                              }}
                                            >
                                              <p
                                                style={{
                                                  fontSize: '13px',
                                                  fontWeight: 'bold',
                                                  marginBottom: '6px',
                                                }}
                                              >
                                                Signature
                                              </p>
                                              <img
                                                style={{
                                                  width: '70px',
                                                  height: '40px',
                                                }}
                                                src={
                                                  GlobalSignatureImages
                                                    ? GlobalSignatureImages
                                                    : signature
                                                }
                                                alt=""
                                              />
                                            </div>
                                          )
                                        : Signature == true && (
                                            <div
                                              style={{
                                                display: 'flex',
                                                flexDirection: 'column',
                                                alignItems: 'center',
                                                marginTop: '1rem',
                                                paddingBottom: '1rem',
                                              }}
                                            >
                                              <p
                                                style={{
                                                  fontSize: '13px',
                                                  fontWeight: 'bold',
                                                  marginBottom: '6px',
                                                }}
                                              >
                                                Signature
                                              </p>
                                              <img
                                                style={{
                                                  width: '100px',
                                                  height: '60px',
                                                }}
                                                src={SignatureImg}
                                                alt=""
                                              />
                                            </div>
                                          )}
                                    </div>
                                  </div>
                                </div>
                              )}
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </>
              )}
            </div>

            {PaymentStatusSuccess?.length > 1 && !isEditedBill && (
              <>
                {/* <p>Split Payment:</p> */}
                {Object.keys(aggregatedPayments).map((paymentType) => (
                  <div
                    key={paymentType}
                    style={{ margin: 0, padding: 0, fontSize: '12px' }}
                  >
                    {paymentType}: {aggregatedPayments[paymentType].toFixed(2)}
                  </div>
                ))}
              </>
            )}

            {chunkIndex === paginatedChunks.length - 1 &&
              !shouldFooterBeOnNewPage &&
              FormatTheme && (
                <div
                  className="page-footerA4Style11"
                  style={{
                    marginTop: 'auto',
                    pageBreakBefore: 'avoid',
                    pageBreakInside: 'avoid',
                    minHeight: 'auto',
                  }}
                >
                  <>
                    <div className="PrintA4Style11-print-ThirdDiv">
                      <div>
                        <div
                          style={{
                            display: 'flex',
                            gap: '1rem',
                            justifyContent: 'right',
                            margin: '0.5rem 0rem',
                            paddingRight: '1rem',
                          }}
                        >
                          <div
                            style={{
                              display: 'flex',
                              flexDirection: 'column',
                              gap: '0.5rem',
                            }}
                          >
                            <div>ITEMS</div>
                            <div>Qty</div>
                            {TotalOfferAmount > 0 || table2Data?.OverallDisc ? (
                              <div>OFFER</div>
                            ) : (
                              ''
                            )}
                            {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>Amount</div> */}
                          </div>
                          <div
                            style={{
                              textAlign: 'right',
                              display: 'flex',
                              flexDirection: 'column',
                              gap: '0.5rem',
                            }}
                          >
                            <div>
                              {GlobaldummyData
                                ? '7'
                                : totalQuantityFilter?.length}
                            </div>
                            <div>{GlobaldummyData ? '9' : totalQuantity}</div>
                            {TotalOfferAmount > 0 || table2Data?.OverallDisc ? (
                              <div>
                                {Number(
                                  TotalOfferAmount + table2Data?.OverallDisc
                                ).toFixed(2)}
                              </div>
                            ) : (
                              ''
                            )}
                            {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
                          </div>
                        </div>
                        <div
                          className="total-Amount"
                          style={{
                            fontSize: '25px',
                            fontWeight: '600',
                            padding: '10px',
                            // backgroundColor: '#fdc716',
                            ...netAmountStyle,
                            textAlign: 'center',
                          }}
                        >
                          Amount :
                          {GlobaldummyData
                            ? '1066'
                            : Number(table2Data?.NetAmount).toFixed(2)}
                        </div>
                      </div>
                    </div>
                    {isEditedBill && lastTransaction && (
                      <div
                        style={{
                          width: '100%',
                          marginTop: '2px',
                          paddingTop: '2px',
                          display: 'flex',
                          justifyContent: 'center',
                          alignItems: 'flex-start',
                          flexDirection: 'column',
                          borderTop: '1px dashed #000',
                        }}
                      >
                        <div
                          style={{
                            fontSize: '12px',
                            width: '100%',
                          }}
                        >
                          <div
                            style={{
                              display: 'flex',
                              justifyContent: 'space-between',
                            }}
                          >
                            <span style={{ color: '#000', fontWeight: 600 }}>
                              Bill Gross Amount
                            </span>
                            <strong>
                              {(lastTransaction?.BeforeAdjustment || 0).toFixed(
                                2
                              )}
                            </strong>
                          </div>
                          <div
                            style={{
                              display: 'flex',
                              justifyContent: 'space-between',
                              fontWeight: 600,
                              color:
                                lastTransaction?.AdjustmentType === 'REFUND'
                                  ? '#000'
                                  : '#000',
                            }}
                          >
                            <span>{'Adjustment Amount'}</span>
                            <span>
                              {lastTransaction?.AdjustmentType === 'REFUND'
                                ? '-'
                                : '+'}
                              {Math.abs(
                                (lastTransaction?.BeforeAdjustment ?? 0) -
                                  (lastTransaction?.AfterAdjustment ?? 0)
                              ).toFixed(2)}
                            </span>
                          </div>
                          <div
                            style={{
                              display: 'flex',
                              justifyContent: 'space-between',
                              marginTop: '4px',
                            }}
                          >
                            <span style={{ color: '#000', fontWeight: 600 }}>
                              Net Bill Amount
                            </span>
                            <strong>
                              {(lastTransaction?.AfterAdjustment || 0).toFixed(
                                2
                              )}
                            </strong>
                          </div>
                        </div>
                      </div>
                    )}
                    {GlobaldummyData
                      ? GlobalCredit && (
                          <div
                            style={{
                              textAlign: 'left',
                              fontSize: '14px',
                              fontWeight: '600',
                              lineHeight: '12px',
                            }}
                          >
                            <h6>Advance Amount:</h6>
                            <h6>Opening Balance:</h6>
                          </div>
                        )
                      : CreditDetails &&
                        table2Data?.CustomerDetails?.length > 0 && (
                          <div
                            style={{
                              textAlign: 'left',
                              fontSize: '12px',
                              fontWeight: '600',
                              lineHeight: '12px',
                            }}
                          >
                            {/* OLD CREDIT BAL */}
                            {PaymentStatusSuccess?.[0]?.PaymentTypeName ===
                              'Credit' && (
                              <>
                                {table2Data.CustomerDetails[0].OldCreditBal >
                                0 ? (
                                  <p>
                                    Advance Amount:
                                    {table2Data.CustomerDetails[0].OldCreditBal}
                                  </p>
                                ) : table2Data.CustomerDetails[0].OldCreditBal <
                                  0 ? (
                                  <p>
                                    {' '}
                                    Opening Balance:{' '}
                                    {Math.abs(
                                      table2Data.CustomerDetails[0].OldCreditBal
                                    )}
                                  </p>
                                ) : null}
                              </>
                            )}

                            {/* CURRENT CREDIT BAL */}
                            {table2Data.CustomerDetails[0].CurrentCreditBal >
                            0 ? (
                              <p>
                                {' '}
                                Current Advance Amount:{' '}
                                {table2Data.CustomerDetails[0].CurrentCreditBal}
                              </p>
                            ) : table2Data.CustomerDetails[0].CurrentCreditBal <
                              0 ? (
                              <p>
                                {' '}
                                Current Balance Amount:{' '}
                                {Math.abs(
                                  table2Data.CustomerDetails[0].CurrentCreditBal
                                )}
                              </p>
                            ) : null}
                          </div>
                        )}
                    <hr className="PrintA4Style11-print-dottline" />

                    {table2Data?.OrderType !== 'E' &&
                      OrderDetailGST?.length > 0 &&
                      OrderDetailGST?.[0]?.TaxAmt > 0 && (
                        <>
                          <p
                            style={{
                              margin: 0,
                              padding: 0,
                              fontSize: '12px',
                              textAlign: 'center',
                            }}
                          >
                            --------- GST Breakup Details -----------
                          </p>
                          <table className="PrintA4Style11-print-table">
                            <thead>
                              <tr>
                                <th
                                  style={{ width: '10px', textAlign: 'center' }}
                                >
                                  GST Rate
                                </th>
                                <th
                                  style={{ width: '10px', textAlign: 'right' }}
                                >
                                  Taxable Amount
                                </th>
                                <th
                                  style={{ width: '10px', textAlign: 'right' }}
                                >
                                  CGST
                                </th>
                                <th
                                  style={{ width: '10px', textAlign: 'right' }}
                                >
                                  SGST
                                </th>
                                <th
                                  style={{ width: '10px', textAlign: 'right' }}
                                >
                                  Total
                                </th>
                              </tr>
                            </thead>
                            <tbody>
                              {OrderDetailGST?.map((item) => (
                                <tr>
                                  <td style={{ textAlign: 'center' }}>
                                    {item?.TaxPercentage}%{' '}
                                  </td>
                                  <td style={{ textAlign: 'right' }}>
                                    {' '}
                                    {Number(item.WithOutTaxAmount).toFixed(
                                      2
                                    )}{' '}
                                  </td>
                                  <td style={{ textAlign: 'right' }}>
                                    {' '}
                                    {Number(item.CGST).toFixed(2)}
                                  </td>
                                  <td style={{ textAlign: 'right' }}>
                                    {' '}
                                    {Number(item.SGST).toFixed(2)}
                                  </td>
                                  <td style={{ textAlign: 'right' }}>
                                    {' '}
                                    {Number(item.TotalAmt).toFixed(2)}
                                  </td>
                                </tr>
                              ))}
                            </tbody>
                          </table>
                        </>
                      )}

                    <div className="PrintA4Style11-print-ThirdDiv2">
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'right',
                          flexDirection: 'column',
                        }}
                      >
                        <hr style={{ margin: '0.5rem 0rem' }} />
                      </div>
                    </div>

                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          gap: '0.3rem',
                        }}
                      ></div>

                      {GlobaldummyData
                        ? GlobalQrcodet && (
                            <div
                              style={{
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'center',
                                alignItems: 'center',
                              }}
                            >
                              <QRCode
                                value={`upi://pay?pa=${UpiId}&pn=Merchant&am=${table2Data?.NetAmount}&cu=INR`}
                                size={80}
                              />
                              <div style={{ fontSize: '12px' }}>
                                Scan to Pay{' '}
                              </div>
                              <div style={{ fontSize: '12px' }}>
                                ₹
                                {GlobaldummyData
                                  ? '1,066'
                                  : Number(table2Data?.NetAmount).toFixed(2)}
                              </div>
                            </div>
                          )
                        : Qrcodet &&
                          paymentTypeUPI && (
                            <div
                              style={{
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'center',
                                alignItems: 'center',
                              }}
                            >
                              <QRCode
                                value={`upi://pay?pa=${GlobalUpiID}&pn=Merchant&am=${table2Data?.NetAmount}&cu=INR`}
                                size={80}
                              />
                              <div style={{ fontSize: '10px' }}>
                                Scan to Pay{' '}
                              </div>
                              <div style={{ fontSize: '10px' }}>
                                ₹
                                {GlobaldummyData
                                  ? '1,066'
                                  : Number(table2Data?.NetAmount).toFixed(2)}
                              </div>
                            </div>
                          )}
                    </div>

                    <div
                      style={{
                        margin: '0.5rem 0.5rem',
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'flex-start',
                        gap: '0.5rem',
                        height: GlobalthemeFormatr ? '13vh' : '5vh',
                      }}
                    >
                      {GlobaldummyData && GlobalCashierName && (
                        <div className="PrintA4Style11-print-InfoDivsub">
                          CASHIER : {CashierName}
                        </div>
                      )}
                      {CashierName && CashierNameField && (
                        <div className="PrintA4Style11-print-InfoDivsub">
                          CASHIER : {CashierName}
                        </div>
                      )}
                      <div
                        className="PrintA4Style11-print-InfoDivsub"
                        style={{ textTransform: 'capitalize' }}
                      >
                        {Date1}
                      </div>
                    </div>
                  </>
                  {sportsAppPreference && MembershipApplied && (
                    <div
                      style={{
                        width: '100%',
                        textAlign: 'center',
                        paddingTop: '10px',
                        fontSize: '13px',
                      }}
                    >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}</div>
                  )}

                  <div style={{ ...footerColorStyle }}>
                    {GlobaldummyData
                      ? GlobalIsnotes && (
                          <div>
                            <p style={{ padding: '0rem 1rem' }}>
                              Notes : 10 days Return policy
                            </p>

                            <hr className="PrintA4Style11-print-dottline" />
                          </div>
                        )
                      : Notestext && (
                          <div>
                            <p
                              style={{
                                padding: '0rem 1rem',
                                textAlign: 'center',
                              }}
                            >
                              {Notestext}
                            </p>

                            <hr className="PrintA4Style11-print-dottline" />
                          </div>
                        )}

                    <div
                      style={{
                        display: 'flex',
                        width: '90%',
                        padding: '0 1rem',
                        justifyContent: GlobaltermsAndConditions
                          ? 'space-between'
                          : 'flex-end',
                        alignItems: 'center',
                      }}
                    >
                      {GlobaldummyData
                        ? GlobaltermsAndConditions && (
                            <div
                              style={{
                                margin: '8px 0',
                                padding: '8px',
                                fontFamily: 'sans-serif',
                                width: '100%',
                              }}
                            >
                              <p
                                style={{
                                  fontSize: '13px',
                                  fontWeight: 'bold',
                                  marginBottom: '6px',
                                }}
                              >
                                Terms & Conditions
                              </p>
                              <ol
                                style={{
                                  fontSize: '12px',
                                  paddingLeft: '18px',
                                  margin: 0,
                                  lineHeight: '1',
                                }}
                              >
                                <li>
                                  Once goods are sold, they are not exchangeable
                                  or refundable.
                                </li>
                                <li>
                                  Please check the product before leaving the
                                  counter.
                                </li>
                              </ol>
                            </div>
                          )
                        : TermsnAdCondition == true &&
                          TermsAndConditions?.length > 0 && (
                            <div
                              style={{
                                margin: '8px 0',
                                fontFamily: 'sans-serif',
                                width: '100%',
                                display: 'flex',
                                flexDirection: 'column',
                                alignItems: 'flex-start',
                              }}
                            >
                              <p
                                style={{
                                  fontSize: '13px',
                                  fontWeight: 'bold',
                                  marginBottom: '6px',
                                }}
                              >
                                Terms & Conditions
                              </p>
                              <ol
                                style={{
                                  fontSize: '12px',
                                  paddingLeft: '18px',
                                  margin: 0,
                                  lineHeight: '1',
                                }}
                              >
                                {TermsAndConditions?.map((item) => (
                                  <li style={{ textAlign: 'start' }}>
                                    {item?.TermsandConditions}
                                  </li>
                                ))}
                                {/* <li>Please check the product before leaving the counter.</li> */}
                              </ol>
                            </div>
                          )}

                      {GlobaldummyData
                        ? GlobalSignature && (
                            <div
                              style={{
                                display: 'flex',
                                flexDirection: 'column',
                                alignItems: 'flex-end',
                                paddingBottom: '1rem',
                              }}
                            >
                              <p
                                style={{
                                  fontSize: '13px',
                                  fontWeight: 'bold',
                                  marginBottom: '6px',
                                }}
                              >
                                Signature
                              </p>
                              <img
                                style={{ width: '70px', height: '40px' }}
                                src={
                                  GlobalSignatureImages
                                    ? GlobalSignatureImages
                                    : signature
                                }
                                alt=""
                              />
                            </div>
                          )
                        : Signature == true && (
                            <div
                              style={{
                                display: 'flex',
                                flexDirection: 'column',
                                alignItems: 'center',
                                marginTop: '1rem',
                                paddingBottom: '1rem',
                              }}
                            >
                              <p
                                style={{
                                  fontSize: '13px',
                                  fontWeight: 'bold',
                                  marginBottom: '6px',
                                }}
                              >
                                Signature
                              </p>
                              <img
                                style={{ width: '100px', height: '60px' }}
                                src={SignatureImg}
                                alt=""
                              />
                            </div>
                          )}
                    </div>
                  </div>
                </div>
              )}
          </div>
        ))}

        {shouldFooterBeOnNewPage && FormatTheme && (
          <div
            className="print-page"
            style={{
              display: 'flex',
              flexDirection: 'column',
              minHeight: '297mm',
              justifyContent: 'flex-end',
              pageBreakBefore: 'always',
            }}
          >
            <div
              className="page-footerA4Style11"
              style={{
                marginTop: 'auto',
                pageBreakBefore: 'avoid',
                pageBreakInside: 'avoid',
                minHeight: 'auto',
              }}
            >
              <>
                <div className="PrintA4Style11-print-ThirdDiv">
                  <div>
                    <div
                      style={{
                        display: 'flex',
                        gap: '1rem',
                        justifyContent: 'right',
                        margin: '0.5rem 0rem',
                        paddingRight: '1rem',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'column',
                          gap: '0.5rem',
                        }}
                      >
                        <div>ITEMS</div>
                        <div>Qty</div>
                        {TotalOfferAmount > 0 || table2Data?.OverallDisc ? (
                          <div>OFFER</div>
                        ) : (
                          ''
                        )}
                        {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>Amount</div> */}
                      </div>
                      <div
                        style={{
                          textAlign: 'right',
                          display: 'flex',
                          flexDirection: 'column',
                          gap: '0.5rem',
                        }}
                      >
                        <div>
                          {GlobaldummyData ? '7' : totalQuantityFilter?.length}
                        </div>
                        <div>{GlobaldummyData ? '9' : totalQuantity}</div>
                        {TotalOfferAmount > 0 || table2Data?.OverallDisc ? (
                          <div>
                            {Number(
                              TotalOfferAmount + table2Data?.OverallDisc
                            ).toFixed(2)}
                          </div>
                        ) : (
                          ''
                        )}
                        {/* <div className='total-Amount' style={{ fontSize: "15px", fontWeight: "600" }}>{GlobaldummyData ? "1066" : Number(table2Data?.NetAmount).toFixed(2)}</div> */}
                      </div>
                    </div>
                    <div
                      className="total-Amount"
                      style={{
                        fontSize: '25px',
                        fontWeight: '600',
                        padding: '10px',
                        // backgroundColor: '#fdc716',
                        ...netAmountStyle,
                        textAlign: 'center',
                      }}
                    >
                      Amount :
                      {GlobaldummyData
                        ? '1066'
                        : Number(table2Data?.NetAmount).toFixed(2)}
                    </div>
                  </div>
                </div>
                {isEditedBill && lastTransaction && (
                  <div
                    style={{
                      width: '100%',
                      marginTop: '2px',
                      paddingTop: '2px',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'flex-start',
                      flexDirection: 'column',
                      borderTop: '1px dashed #000',
                    }}
                  >
                    <div
                      style={{
                        fontSize: '12px',
                        width: '100%',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                        }}
                      >
                        <span style={{ color: '#000', fontWeight: 600 }}>
                          Bill Gross Amount
                        </span>
                        <strong>
                          {(lastTransaction?.BeforeAdjustment || 0).toFixed(2)}
                        </strong>
                      </div>
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          fontWeight: 600,
                          color:
                            lastTransaction?.AdjustmentType === 'REFUND'
                              ? '#000'
                              : '#000',
                        }}
                      >
                        <span>{'Adjustment Amount'}</span>
                        <span>
                          {lastTransaction?.AdjustmentType === 'REFUND'
                            ? '-'
                            : '+'}
                          {Math.abs(
                            (lastTransaction?.BeforeAdjustment ?? 0) -
                              (lastTransaction?.AfterAdjustment ?? 0)
                          ).toFixed(2)}
                        </span>
                      </div>
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'space-between',
                          marginTop: '4px',
                        }}
                      >
                        <span style={{ color: '#000', fontWeight: 600 }}>
                          Net Bill Amount
                        </span>
                        <strong>
                          {(lastTransaction?.AfterAdjustment || 0).toFixed(2)}
                        </strong>
                      </div>
                    </div>
                  </div>
                )}
                {GlobaldummyData
                  ? GlobalCredit && (
                      <div
                        style={{
                          textAlign: 'left',
                          fontSize: '14px',
                          fontWeight: '600',
                          lineHeight: '12px',
                        }}
                      >
                        <h6>Advance Amount:</h6>
                        <h6>Opening Balance:</h6>
                      </div>
                    )
                  : CreditDetails &&
                    table2Data?.CustomerDetails?.length > 0 && (
                      <div
                        style={{
                          textAlign: 'left',
                          fontSize: '12px',
                          fontWeight: '600',
                          lineHeight: '12px',
                        }}
                      >
                        {/* OLD CREDIT BAL */}
                        {PaymentStatusSuccess?.[0]?.PaymentTypeName ===
                          'Credit' && (
                          <>
                            {table2Data.CustomerDetails[0].OldCreditBal > 0 ? (
                              <p>
                                Advance Amount:
                                {table2Data.CustomerDetails[0].OldCreditBal}
                              </p>
                            ) : table2Data.CustomerDetails[0].OldCreditBal <
                              0 ? (
                              <p>
                                {' '}
                                Opening Balance:{' '}
                                {Math.abs(
                                  table2Data.CustomerDetails[0].OldCreditBal
                                )}
                              </p>
                            ) : null}
                          </>
                        )}

                        {/* CURRENT CREDIT BAL */}
                        {table2Data.CustomerDetails[0].CurrentCreditBal > 0 ? (
                          <p>
                            {' '}
                            Current Advance Amount:{' '}
                            {table2Data.CustomerDetails[0].CurrentCreditBal}
                          </p>
                        ) : table2Data.CustomerDetails[0].CurrentCreditBal <
                          0 ? (
                          <p>
                            {' '}
                            Current Balance Amount:{' '}
                            {Math.abs(
                              table2Data.CustomerDetails[0].CurrentCreditBal
                            )}
                          </p>
                        ) : null}
                      </div>
                    )}
                <hr className="PrintA4Style11-print-dottline" />

                {table2Data?.OrderType !== 'E' &&
                  OrderDetailGST?.length > 0 &&
                  OrderDetailGST?.[0]?.TaxAmt > 0 && (
                    <>
                      <p
                        style={{
                          margin: 0,
                          padding: 0,
                          fontSize: '12px',
                          textAlign: 'center',
                        }}
                      >
                        --------- GST Breakup Details -----------
                      </p>
                      <table className="PrintA4Style11-print-table">
                        <thead>
                          <tr>
                            <th style={{ width: '10px', textAlign: 'center' }}>
                              GST Rate
                            </th>
                            <th style={{ width: '10px', textAlign: 'right' }}>
                              Taxable Amount
                            </th>
                            <th style={{ width: '10px', textAlign: 'right' }}>
                              CGST
                            </th>
                            <th style={{ width: '10px', textAlign: 'right' }}>
                              SGST
                            </th>
                            <th style={{ width: '10px', textAlign: 'right' }}>
                              Total
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                          {OrderDetailGST?.map((item) => (
                            <tr>
                              <td style={{ textAlign: 'center' }}>
                                {item?.TaxPercentage}%{' '}
                              </td>
                              <td style={{ textAlign: 'right' }}>
                                {' '}
                                {Number(item.WithOutTaxAmount).toFixed(2)}{' '}
                              </td>
                              <td style={{ textAlign: 'right' }}>
                                {' '}
                                {Number(item.CGST).toFixed(2)}
                              </td>
                              <td style={{ textAlign: 'right' }}>
                                {' '}
                                {Number(item.SGST).toFixed(2)}
                              </td>
                              <td style={{ textAlign: 'right' }}>
                                {' '}
                                {Number(item.TotalAmt).toFixed(2)}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </>
                  )}

                <div className="PrintA4Style11-print-ThirdDiv2">
                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'right',
                      flexDirection: 'column',
                    }}
                  >
                    <hr style={{ margin: '0.5rem 0rem' }} />
                  </div>
                </div>

                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  }}
                >
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '0.3rem',
                    }}
                  ></div>

                  {GlobaldummyData
                    ? GlobalQrcodet && (
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'center',
                            alignItems: 'center',
                          }}
                        >
                          <QRCode
                            value={`upi://pay?pa=${UpiId}&pn=Merchant&am=${table2Data?.NetAmount}&cu=INR`}
                            size={80}
                          />
                          <div style={{ fontSize: '12px' }}>Scan to Pay </div>
                          <div style={{ fontSize: '12px' }}>
                            ₹
                            {GlobaldummyData
                              ? '1,066'
                              : Number(table2Data?.NetAmount).toFixed(2)}
                          </div>
                        </div>
                      )
                    : Qrcodet &&
                      paymentTypeUPI && (
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'center',
                            alignItems: 'center',
                          }}
                        >
                          <QRCode
                            value={`upi://pay?pa=${GlobalUpiID}&pn=Merchant&am=${table2Data?.NetAmount}&cu=INR`}
                            size={80}
                          />
                          <div style={{ fontSize: '10px' }}>Scan to Pay </div>
                          <div style={{ fontSize: '10px' }}>
                            ₹
                            {GlobaldummyData
                              ? '1,066'
                              : Number(table2Data?.NetAmount).toFixed(2)}
                          </div>
                        </div>
                      )}
                </div>

                <div
                  style={{
                    margin: '0.5rem 0.5rem',
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'flex-start',
                    gap: '0.5rem',
                    height: GlobalthemeFormatr ? '13vh' : '5vh',
                  }}
                >
                  {GlobaldummyData && GlobalCashierName && (
                    <div className="PrintA4Style11-print-InfoDivsub">
                      CASHIER : {CashierName}
                    </div>
                  )}
                  {CashierName && CashierNameField && (
                    <div className="PrintA4Style11-print-InfoDivsub">
                      CASHIER : {CashierName}
                    </div>
                  )}
                  <div
                    className="PrintA4Style11-print-InfoDivsub"
                    style={{ textTransform: 'capitalize' }}
                  >
                    {Date1}
                  </div>
                </div>
              </>
              {sportsAppPreference && MembershipApplied && (
                <div
                  style={{
                    width: '100%',
                    textAlign: 'center',
                    paddingTop: '10px',
                    fontSize: '13px',
                  }}
                >{`*** Membership ${table2Data?.NetAmount === 0 ? 'Free Hours' : 'Discount'} Utilized - ${MembershipApplied?.Detail?.[0]?.MembershipName} ***`}</div>
              )}

              <div style={{ ...footerColorStyle }}>
                {GlobaldummyData
                  ? GlobalIsnotes && (
                      <div>
                        <p style={{ padding: '0rem 1rem' }}>
                          Notes : 10 days Return policy
                        </p>

                        <hr className="PrintA4Style11-print-dottline" />
                      </div>
                    )
                  : Notestext && (
                      <div>
                        <p
                          style={{ padding: '0rem 1rem', textAlign: 'center' }}
                        >
                          {Notestext}
                        </p>

                        <hr className="PrintA4Style11-print-dottline" />
                      </div>
                    )}
                <div
                  style={{
                    display: 'flex',
                    width: '90%',
                    padding: '0 1rem',
                    justifyContent: GlobaltermsAndConditions
                      ? 'space-between'
                      : 'flex-end',
                    alignItems: 'center',
                  }}
                >
                  {GlobaldummyData
                    ? GlobaltermsAndConditions && (
                        <div
                          style={{
                            margin: '8px 0',
                            padding: '8px',
                            fontFamily: 'sans-serif',
                            width: '100%',
                          }}
                        >
                          <p
                            style={{
                              fontSize: '13px',
                              fontWeight: 'bold',
                              marginBottom: '6px',
                            }}
                          >
                            Terms & Conditions
                          </p>
                          <ol
                            style={{
                              fontSize: '12px',
                              paddingLeft: '18px',
                              margin: 0,
                              lineHeight: '1',
                            }}
                          >
                            <li>
                              Once goods are sold, they are not exchangeable or
                              refundable.
                            </li>
                            <li>
                              Please check the product before leaving the
                              counter.
                            </li>
                          </ol>
                        </div>
                      )
                    : TermsnAdCondition == true &&
                      TermsAndConditions?.length > 0 && (
                        <div
                          style={{
                            margin: '8px 0',
                            fontFamily: 'sans-serif',
                            width: '100%',
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'flex-start',
                          }}
                        >
                          <p
                            style={{
                              fontSize: '13px',
                              fontWeight: 'bold',
                              marginBottom: '6px',
                            }}
                          >
                            Terms & Conditions
                          </p>
                          <ol
                            style={{
                              fontSize: '12px',
                              paddingLeft: '18px',
                              margin: 0,
                              lineHeight: '1',
                            }}
                          >
                            {TermsAndConditions?.map((item) => (
                              <li style={{ textAlign: 'start' }}>
                                {item?.TermsandConditions}
                              </li>
                            ))}
                            {/* <li>Please check the product before leaving the counter.</li> */}
                          </ol>
                        </div>
                      )}

                  {GlobaldummyData
                    ? GlobalSignature && (
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'flex-end',
                            paddingBottom: '1rem',
                          }}
                        >
                          <p
                            style={{
                              fontSize: '13px',
                              fontWeight: 'bold',
                              marginBottom: '6px',
                            }}
                          >
                            Signature
                          </p>
                          <img
                            style={{ width: '70px', height: '40px' }}
                            src={
                              GlobalSignatureImages
                                ? GlobalSignatureImages
                                : signature
                            }
                            alt=""
                          />
                        </div>
                      )
                    : Signature == true && (
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            marginTop: '1rem',
                            paddingBottom: '1rem',
                          }}
                        >
                          <p
                            style={{
                              fontSize: '13px',
                              fontWeight: 'bold',
                              marginBottom: '6px',
                            }}
                          >
                            Signature
                          </p>
                          <img
                            style={{ width: '100px', height: '60px' }}
                            src={SignatureImg}
                            alt=""
                          />
                        </div>
                      )}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default PrintA4Style11;