import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
  extractLastNumber,
  extractLastNumberOrderId,
} from '../../../../Services/Others';
import Logo from '../../../../Images/Logo.jpg';
import {
  GlobalprintSlNo,
  GlobalprintItem,
  GlobalprintMRP,
  GlobalprintDiscount,
  GlobalprintQuantity,
  GlobalprintRate,
  GlobalprintAmount,
  GlobalprintHsnCode,
  GlobalprintQrcodet,
  GlobalPritdummyData,
  changeReprintDataFound,
  GloabalFieldDetails,
  GlobalprintSignature,
  GlobalprinttermsAndConditions,
  GlobalSignatureImage,
  Globalnotes,
  GlobalthemeFormat,
  GlobalBillName,
  GlobalprintCashierName,
  GlobalprintLogo,
  GlobalprintTax,
  GlobalSelectedPrintHeaderColor,
} from '../../../../Features/ThemeChange/ThemeChange';
import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle1.scss';
import QRCode from 'react-qr-code';
import {
  GlobalUpiIDprint,
  PreferenceData,
} from '../../../../Features/BookingScreen/BookingData/BookingData';
import signature from '../../../../Images/signatureimage.jpg';
import { isMobile } from 'react-device-detect';

const InvoiceTemplate = ({
  index,
  totalQuantityFilter,
  Date1,
  CashierName,
  totalQuantity,
  OrderDetailGST,
  OrderDetailIGST,
  OrderDetailVAT,
  table2Data,
  UpiId,
  PaymentStatus,
  PrintLogo,
  PrintGreeting,
  base64Image,
  printDatas,
  isPdf,
  sportsAppPreference,
  MembershipApplied = null,
  SalesModePref,
}) => {
  const dispatch = useDispatch();
  const GlobalUpiID = useSelector(GlobalUpiIDprint);
  const FieldDetails = useSelector(GloabalFieldDetails);
  console.log(table2Data, 'FieldDetails');
  const SLNO = FieldDetails?.['Sl.No'];
  const Item = FieldDetails?.['Item'];
  console.log(Item, 'Item');
  const MRP = FieldDetails?.['MRP'];
  const Discount = FieldDetails?.['Discount'];
  const Quantity = FieldDetails?.['Quantity'];
  const Tax = FieldDetails?.['Tax'];
  const Rate = FieldDetails?.['Rate'];
  const Amount = FieldDetails?.['Amount'];
  const HsnCode = FieldDetails?.['HsnCode'];
  const Qrcodet = FieldDetails?.['Qrcode'];
  const LogoField = FieldDetails?.['Logo'];
  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 GlobalSignature = useSelector(GlobalprintSignature);
  const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
  const GlobalSignatureImages = useSelector(GlobalSignatureImage);
  const GlobalIsnotes = useSelector(Globalnotes);
  const GlobalthemeFormatr = useSelector(GlobalthemeFormat);
  const GlobalBilltext = useSelector(GlobalBillName);
  const GlobalLogo = useSelector(GlobalprintLogo);
  const SettingData = useSelector(PreferenceData);
  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 keysLength = Object.keys(table2Data ?? {}).length;
  console.log(GlobalDiscount, Discount, 'Discount');

  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);

  let BankDetails = table2Data?.BankDetails;
  let TermsAndConditions = printDatas?.TermsandConditions;
  let SignatureImg = printDatas?.Signature;
  let Notestext = printDatas?.Notes;
  let BillName = printDatas?.PrintHdrName;
  let FormatTheme = printDatas?.PrintType == 'S' ? true : false;
  let PageSize = printDatas?.PageSize;
  const Signature = FieldDetails?.['signature'];
  const TermsnAdCondition = FieldDetails?.['terms&conditions'];
  console.log(BankDetails, 'GlobalthemeFormatr');
  console.log(table2Data, 'FormatThemekjhjk', PaymentStatus);

  if (keysLength > 0) {
    dispatch(changeReprintDataFound(true));
  }
  const currentDate = new Date();
  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 PackageDetails = table2Data?.PackageDtl;
  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;
    },
    {},
  );
  const productsData = table2Data?.productDetails || [];
  const offers = table2Data?.OrderOfferDetails || [];

  let TotalOfferAmount = 0;
  console.log(table2Data, 'productsDatakl');

  // Calculate SalesWiseOffers total amount
  offers.forEach((offer) => {
    if (offer.TableName === 'SalesWiseOffers') {
      TotalOfferAmount += offer.OfferAmount;
    }
  });
  const hasMappedOffer = offers.some((offer) =>
    ['ItemWiseOffers', 'BundleOffers', 'QuantityWiseOffers'].includes(
      offer.TableName
    )
  );

  if (hasMappedOffer) {
    const productTotal = productsData?.reduce(
      (acc, item) =>
        acc + (item?.Type != 'C' ? item.OfferAmt : item.OfferValue || 0),
      0
    );
    TotalOfferAmount += productTotal;
  } else {
    const Combothere = productsData?.filter((item) => item?.Type == 'C');
    const CombothereTotal = Combothere?.reduce(
      (acc, item) => acc + (item.OfferValue || 0),
      0
    );
    TotalOfferAmount += CombothereTotal;
  }

  const invoiceData = {
    company: {
      name: 'Prematix Software Solution Pvt Ltd.',
      address:
        '#589, 2nd floor, VP Chambers, 1st cross, 3rd block, Koramangala, Bengaluru- 560034.',
      phone: '9344270900',
      email: 'info@prematix.com',
      gstin: '29AAICP0469K1ZX',
    },
    invoice: {
      state: 'Karnataka',
      stateCode: '29',
      date: '13/04/2024',
      number: 'BLR/01/2024-25',
      reverseCharge: '',
      placeOfSupply: '',
      dateOfSupply: '',
      vehicleNumber: '',
      transportationMode: '',
    },
    billTo: {
      name: 'Ooty Boat House',
      address: 'No:2, North Lake Road,',
      state: 'Tamil Nadu',
      stateCode: '33',
      gstin: '',
      poNumber: 'BLR/14/2024',
      poDate: '11/04/2024',
    },
    items: [
      {
        sr: 1,
        name: 'Acrylic Scanner Box',
        hsn: '39204900',
        uom: 'INR',
        qty: 1,
        rate: 6501,
        amount: 6501,
        discount: 0,
        taxableValue: 6501,
        cgstRate: 0,
        cgstAmount: 0,
        sgstRate: 0,
        sgstAmount: 0,
        igstRate: 18.0,
        igstAmount: 1170,
        totalAmount: 7671,
      },
      {
        sr: 2,
        name: '32" Wide Angle view display FHD',
        hsn: '84716030',
        uom: 'INR',
        qty: 1,
        rate: 48317,
        amount: 48317,
        discount: 0,
        taxableValue: 48317,
        cgstRate: 0,
        cgstAmount: 0,
        sgstRate: 0,
        sgstAmount: 0,
        igstRate: 18.0,
        igstAmount: 8697,
        totalAmount: 57014,
      },
      {
        sr: 3,
        name: 'Service charges',
        hsn: '999630',
        uom: 'INR',
        qty: 1,
        rate: 25000,
        amount: 25000,
        discount: 0,
        taxableValue: 25000,
        cgstRate: 0,
        cgstAmount: 0,
        sgstRate: 0,
        sgstAmount: 0,
        igstRate: 18.0,
        igstAmount: 4500,
        totalAmount: 29500,
      },
    ],
    totals: {
      beforeTax: 83660,
      igst: 15059,
      sgst: 0,
      cgst: 0,
      totalGst: 15059,
      afterTax: 98719,
      amountInWords:
        'Ninety Eight Thousand Seven Hundred and Nineteen Rupees Only',
    },
    bankDetails: {
      bankName: 'State Bank of India',
      accountNo: '34850253701',
      ifscCode: 'SBIN0006242',
      branchName: 'Mookandapalli',
    },
  };

  const chunkSize = isMobile ? 11 : PageSize == 'A5' ? 8 : 9;
  let dataSource = [];

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

  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 > (isMobile ? 11 : PageSize == 'A5' ? 4 : 6);

  console.log(table2Data, 'table2Datah');

  const companyName = table2Data?.CompName;
  const companyAddress =
    table2Data?.AddressDetails?.[0]?.Address1 +
    (table2Data?.AddressDetails?.[0]?.Address2 || '') ||
    '#589, 2nd floor, VP Chambers, 1st cross, 3rd block, Koramangala, Bengaluru- 560034.';
  const companyPhone =
    table2Data?.BrMobile + ',' + table2Data?.BrMobile2 !== null
      ? table2Data?.BrMobile2
      : '';
  const companyEmail = table2Data?.CompanyEmail || 'info@prematix.com';
  const companyGSTIN = table2Data?.CompGSTIN;

  // Billing Address (replace static values)
  const billToName = table2Data?.CustomerName || 'Ooty Boat House';
  const billToAddress = table2Data?.CustomerAddress || 'No:2, North Lake Road,';
  const billToState = table2Data?.CustomerState || 'Tamil Nadu';
  const billToStateCode = table2Data?.CustomerStateCode || '33';
  const billToGSTIN = table2Data?.CustomerGSTIN || '';

  const InvoiceAmountWords = ({ amount }) => {
    const numberToWords = (num) => {
      const a = [
        '',
        'One',
        'Two',
        'Three',
        'Four',
        'Five',
        'Six',
        'Seven',
        'Eight',
        'Nine',
        'Ten',
        'Eleven',
        'Twelve',
        'Thirteen',
        'Fourteen',
        'Fifteen',
        'Sixteen',
        'Seventeen',
        'Eighteen',
        'Nineteen',
      ];
      const b = [
        '',
        '',
        'Twenty',
        'Thirty',
        'Forty',
        'Fifty',
        'Sixty',
        'Seventy',
        'Eighty',
        'Ninety',
      ];

      if (num === 0) return 'Zero';

      if (num < 20) return a[num];
      if (num < 100)
        return b[Math.floor(num / 10)] + (num % 10 ? ' ' + a[num % 10] : '');
      if (num < 1000)
        return (
          a[Math.floor(num / 100)] +
          ' Hundred' +
          (num % 100 ? ' and ' + numberToWords(num % 100) : '')
        );
      if (num < 100000)
        return (
          numberToWords(Math.floor(num / 1000)) +
          ' Thousand' +
          (num % 1000 ? ' ' + numberToWords(num % 1000) : '')
        );

      return 'Number too large';
    };
    return (
      <div>
        <p style={{ fontSize: '12px', fontWeight: 'bold' }}>
          Total Invoice Amount in Words:
        </p>
        <p
          className="amount-in-words"
          style={{ fontSize: '12px', fontWeight: 'bold' }}
        >
          {numberToWords(amount)}
        </p>
      </div>
    );
  };

  const products = [
    {
      ProdName: 'ITEM 1',
      Rate: 88.0,
      SalesQty: 2,
      MRP: 100,
      TotalAmt: 176,
      discount: 0,
      HSN: '01',
    },
    {
      ProdName: 'ITEM 2',
      Rate: 300.0,
      SalesQty: 1,
      MRP: 350,
      TotalAmt: 300,
      discount: 0,
      HSN: '02',
    },
    {
      ProdName: 'ITEM 3',
      Rate: 200.0,
      SalesQty: 1,
      MRP: 250,
      TotalAmt: 200,
      discount: 0,
      HSN: '03',
    },
    {
      ProdName: 'ITEM 4',
      Rate: 30.0,
      SalesQty: 1,
      MRP: 50,
      TotalAmt: 30,
      discount: 0,
      HSN: '04',
    },
    {
      ProdName: 'ITEM 5',
      Rate: 30.0,
      SalesQty: 1,
      MRP: 50,
      TotalAmt: 30,
      discount: 0,
      HSN: '05',
    },
  ];

  return (
    <>
      <style>
        {`
         @media print {
  .header {
    position: static !important;
    top: auto !important;
  }
  .print-chunk.print-page-break {
    page-break-before: always;
  }
}
  
 .invoice-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            font-size: 14px;
            font-family: Arial, sans-serif;
          }

          .invoice-wrapper {
            border: 2px solid black;
          }

          .header-section {
            border-bottom: 1px solid black;
            padding: 2px 12px;
          }

          .header-section .company-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 8px;
          }

          .header-section p {
            margin: 4px 0;
          }

          .invoice-title {
            text-align: center;
            border-bottom: 1px solid black;
            // padding: 8px;
          }

          .invoice-title h2 {
            font-size: 24px;
            font-weight: bold;
            margin: 0;
          }

          .invoice-details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border-bottom: 1px solid black;
          }

          .invoice-details-left {
            padding: 5px;
            border-right: 1px solid black;
          }

          .invoice-details-right {
            padding: 5px;
          }

          .details-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            font-size: 12px;
          }

          // .billing-grid {
          //   display: grid;
          //   grid-template-columns: 1fr 1fr;
          //   border-bottom: 1px solid black;
          // }

          .billing-left {
            // padding: 5px;
            border-right: 1px solid black;
          }

          .billing-right {
            padding: 5px;
          }

          .section-title {
            font-weight: bold;
            // margin-bottom: 8px;
            color:black;
          }

          .billing-details {
            font-size: 12px;
          }

          .billing-detail-item {
            // margin: 4px 0;
          }

          .table-overflow {
            overflow-x: auto;
          }

          .items-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
          }

          .table-header {
            border-bottom: 1px solid black;
          }

          .table-header-cell {
            border-right: 1px solid black;
            padding: 4px;
            text-align: left;
            font-weight: bold;
          }

          .table-header-cell-last {
            padding: 4px;
            text-align: left;
            font-weight: bold;
          }

          .table-header-cell-center {
            border-right: 1px solid black;
            padding: 4px;
            text-align: center;
            font-weight: bold;
          }

          .table-row {
            border-bottom: 1px solid black;
          }

          .table-cell {
            border-right: 1px solid black;
            padding: 4px;
          }

          .table-cell-last {
            padding: 4px;
          }

          .table-cell-center {
            border-right: 1px solid black;
            padding: 4px;
            text-align: center;
          }

          .total-row {
            border-bottom: 1px solid black;
            font-weight: bold;
          }

          .summary-grid {
            // display: grid;
            // grid-template-columns: 1fr 1fr;
            border: 1px solid black;
            display:flex;
            justify-content:flex-end;
          }

          .summary-left {
            padding: 5px;
            border-right: 1px solid black;
          }

          .summary-right {
            padding: 5px;
          }

          .summary-item {
            display: flex;
            justify-content: space-between;
            margin: 4px 0;
            font-size: 12px;
          }

          .summary-item-bold {
            display: flex;
            justify-content: space-between;
            margin: 4px 0;
            font-size: 12px;
            font-weight: bold;
          }

          .amount-in-words {
            font-size: 12px;
            margin-top: 4px;
          }

          .total-amount {
            font-size: 18px;
            font-weight: bold;
            text-align: right;
            margin-top: 16px;
          }

          .footer-grid {
            // display: grid;
            // grid-template-columns: 1fr 1fr;
             border: 1px solid black;
            display:flex;
            justify-content:space-between;
          }

          .footer-left {
            padding: 5px;
            border-right: 1px solid black;
          }

          .footer-right {
            padding: 5px;
            flex-direction:column;
            }

          .bank-details-title {
            font-weight: bold;
            font-size: 12px;
            margin-bottom: 8px;
          }

          .bank-details {
            font-size: 12px;
          }

          .bank-detail-item {
            margin: 4px 0;
          }

          .terms-title {
            font-weight: bold;
            font-size: 12px;
            margin-top: 16px;
          }

          .certification {
            font-size: 12px;
            margin-bottom: 16px;
          }

          .signature-section {
            text-align: right;
          }

          .signature-text {
            font-size: 12px;
          }

          .signature-space {
            margin-top: 32px;
          }

          .copy-labels {
            border-top: 1px solid black;
            padding: 8px;
            text-align: center;
            font-size: 12px;
          }

          .copy-labels span {
            margin-right: 20px;
          }

          /* Responsive Design */
          @media (max-width: 768px) {
            .invoice-container {
              padding: 10px;
              font-size: 12px;
            }
            
            .invoice-details-grid,
            .billing-grid,
            .summary-grid,
            .footer-grid {
              // grid-template-columns: 1fr;
            }
            
            .invoice-details-left,
            .billing-left,
            .summary-left,
            .footer-left {
              border-right: none;
              border-bottom: 1px solid black;
            }
            
            .details-grid {
              grid-template-columns: 1fr;
              gap: 4px;
            }
            
            .items-table {
              font-size: 15px;
            }
            
            .table-header-cell,
            .table-cell,
            .table-header-cell-center,
            .table-cell-center {
              padding: 2px;
            }
          }

          @media print {
            .invoice-container {
              padding: 0;
              max-width: none;
            }
            
            .invoice-wrapper {
              border: 2px solid black;
            }
            
            body {
              margin: 0;
              padding: 0;
            }
          }
        `}
      </style>
      <>
        {FormatTheme ? (
          <div
            id={`A4Standard-${index}`}
            style={{
              fontFamily: 'sans-serif',
              position: 'relative',
              width: '100%',
              //  minHeight:  isMobile? "296mm":PageSize == "A5" ? '210mm' :'297mm',
              padding: '5px',
            }}
            className="invoice-container "
          >
            <div className="">
              {paginatedChunks.map((dataChunk, chunkIndex) => (
                <div
                  className={
                    isMobile
                      ? `invoice-wrapper container pdf-page`
                      : `invoice-wrapper container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`
                  }
                  style={{
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent:
                      chunkIndex === paginatedChunks.length - 1 &&
                        !shouldFooterBeOnNewPage &&
                        FormatTheme
                        ? 'space-between'
                        : '',
                    height: FormatTheme
                      ? isMobile
                        ? '293mm'
                        : PageSize == 'A5'
                          ? '170mm'
                          : '275mm'
                      : '',
                    marginBottom: '0',
                  }}
                  key={chunkIndex}
                >
                  {/* <div className="invoice-wrapper"> */}
                  {/* Header */}

                  {/* <div className="header" style={{ position: !isMobile && (GlobaldummyData ? "absolute" : "fixed"), top: 0, width: "100%" }}> */}
                  <div
                    className="header"
                    style={{
                      position: isMobile
                        ? ''
                        : GlobaldummyData
                          ? 'absolute'
                          : isPdf
                            ? 'static'
                            : 'fixed',
                      top: 0,
                      width: '100%',
                    }}
                  >
                    {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
                      ''
                    ) : (
                      <div className="header-section">
                        <div>
                          <div
                            style={{ display: 'flex', alignItems: 'center' }}
                          >
                            {GlobalLogo && GlobaldummyData && (
                              <div>
                                {' '}
                                <img
                                  src={Logo}
                                  alt="Brand Logo"
                                  style={{
                                    width: '100px',
                                    height: 'auto',
                                    objectFit: 'contain',
                                  }}
                                />
                              </div>
                            )}
                            {base64Image &&
                              (PrintLogo?.SettingValue === 'Y' || LogoField) ? (
                              <img
                                src={base64Image}
                                alt="Brand Logo"
                                style={{
                                  width: '60px',
                                  height: 'auto',
                                  objectFit: 'contain',
                                }}
                              />
                            ) : null}
                            <h1 className="company-name">
                              {GlobaldummyData ? 'Company Name' : companyName}
                            </h1>
                          </div>
                          <p>{companyAddress}</p>
                          {(companyPhone || GlobaldummyData) && (
                            <div>
                              Phone:{' '}
                              {GlobaldummyData ? '999999XXXX' : companyPhone}
                            </div>
                          )}
                          <div>Email: {companyEmail}</div>
                          {companyGSTIN ||
                            (GlobaldummyData && (
                              <div
                                style={{ fontSize: '16px', fontWeight: '600' }}
                              >
                                GSTIN:{' '}
                                {GlobaldummyData
                                  ? 'XXTTHJJF7679'
                                  : companyGSTIN}
                              </div>
                            ))}
                        </div>
                        <div style={{ fontWeight: '600', fontSize: '14px' }}>
                          {' '}
                          BillNo:
                          {GlobaldummyData
                            ? '121'
                            : table2Data?.OrderId &&
                            extractLastNumberOrderId(
                              table2Data?.OrderId,
                              table2Data?.FYStatus
                            )}
                        </div>
                        {SalesModePref?.SettingValue == 'Y' && <div style={{ fontSize: '13px', margin: '0rem 0rem', fontWeight: '600' }}>
                          {' '}
                          Name : {table2Data?.SalesMode == "R" ? "RT" : "WS"}{' '}
                        </div>}
                      </div>
                    )}

                    {/* Invoice Title */}
                    <div className="invoice-title">
                      {table2Data?.OrderType === 'E' && estimateTitle && (
                        <div
                          style={{
                            fontSize: '14px',
                            margin: '2px 0 0 0',
                            padding: 0,
                            fontWeight: 600,
                          }}
                        >
                          Estimate{' '}
                        </div>
                      )}
                      {table2Data?.OrderType === 'E' ? (
                        ''
                      ) : (
                        <div
                          style={{
                            fontSize: '14px',
                            margin: '2px 0 0 0',
                            padding: 0,
                            fontWeight: 600,
                          }}
                        >
                          {GlobaldummyData
                            ? GlobalBilltext
                              ? GlobalBilltext
                              : 'Cash' + ' Bill'
                            : BillName
                              ? BillName
                              : PaymentStatusSuccess?.length === 1
                                ? PaymentStatusSuccess?.[0]?.PaymentTypeName +
                                ' Bill'
                                : ''}
                        </div>
                      )}
                    </div>

                    {GlobaldummyData ? (
                      <div className="billing-grid">
                        <div className="billing-left">
                          <h3 className="section-title">
                            Details of Receiver | Billed to
                          </h3>
                          <div className="billing-details">
                            <div className="billing-detail-item">
                              <strong>Name : </strong>
                              {GlobaldummyData ? (
                                <span style={{ fontSize: '11px' }}>
                                  {'XXXYYY'}
                                </span>
                              ) : (
                                table2Data?.CustomerDetails?.[0]?.CustSuppName
                              )}
                            </div>

                            <div className="billing-detail-item">
                              <strong>Address: </strong>
                              XYZ City
                            </div>

                            <div className="billing-detail-item">
                              <strong>State:</strong> XYZ State
                            </div>
                          </div>
                        </div>
                      </div>
                    ) : (
                      table2Data?.CustomerDetails?.length > 0 && (
                        <div className="billing-grid">
                          <div className="billing-left">
                            <h3 className="section-title">
                              Details of Receiver | Billed to
                            </h3>
                            <div className="billing-details">
                              <div className="billing-detail-item">
                                <strong>Name : </strong>
                                {GlobaldummyData ? (
                                  <span style={{ fontSize: '11px' }}>
                                    {'XXXYYY'}
                                  </span>
                                ) : (
                                  table2Data?.CustomerDetails?.[0]?.CustSuppName
                                )}
                              </div>

                              <div className="billing-detail-item">
                                <strong>Address:</strong>{' '}
                                {table2Data?.CustomerDetails?.length > 0 &&
                                  !GlobaldummyData && (
                                    <span style={{ fontSize: '11px' }}>
                                      {
                                        table2Data?.CustomerDetails?.[0]
                                          ?.Address1
                                      }{' '}
                                      {
                                        table2Data?.CustomerDetails?.[0]
                                          ?.Address2
                                      }
                                    </span>
                                  )}
                              </div>

                              <div className="billing-detail-item">
                                <strong>State:</strong>{' '}
                                {table2Data?.CustomerDetails?.[0]?.State}
                              </div>
                              {table2Data?.CustomerDetails?.[0]?.CustGSTNo && (
                                <div className="billing-detail-item">
                                  <strong>GST:</strong>{' '}
                                  {table2Data?.CustomerDetails?.[0]?.CustGSTNo}
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                      )
                    )}
                  </div>

                  {/* Items Table */}
                  <div
                    style={{ marginTop: GlobaldummyData ? '9rem' : '0rem' }}
                    className="print-body"
                  >
                    <div className="table-overflow">
                      <table
                        className="items-table"
                        style={{
                          borderTop: '1px solid black',
                          fontFamily: 'sans-serif',
                        }}
                      >
                        <thead>
                          <tr className="table-header">
                            {GlobaldummyData
                              ? GlobalSlNo && (
                                <th className="table-header-cell">S.No</th>
                              )
                              : SLNO == true && (
                                <th
                                  className="table-header-cell"
                                  style={{
                                    textAlign: 'center',
                                    fontFamily: 'sans-serif',
                                  }}
                                >
                                  S.No
                                </th>
                              )}

                            {GlobaldummyData
                              ? GlobalItem && (
                                <th className="table-header-cell">Item</th>
                              )
                              : Item == true && (
                                <th
                                  className="table-header-cell"
                                  style={{ fontFamily: 'sans-serif' }}
                                >
                                  Item
                                </th>
                              )}

                            {GlobaldummyData
                              ? GlobalHsnCode && (
                                <th className="table-header-cell">HSN </th>
                              )
                              : HsnCode == true && (
                                <th
                                  className="table-header-cell"
                                  style={{ fontFamily: 'sans-serif' }}
                                >
                                  HSN{' '}
                                </th>
                              )}

                            {GlobaldummyData
                              ? GlobalQuantity && (
                                <th className="table-header-cell">Qty</th>
                              )
                              : Quantity == true && (
                                <th
                                  className="table-header-cell"
                                  style={{
                                    textAlign: 'center',
                                    fontFamily: 'sans-serif',
                                  }}
                                >
                                  {' '}
                                  {WeightasKg ? 'Qty/Kg' : 'Qty'}
                                </th>
                              )}

                            {/* <th className="table-header-cell">UOM</th>
                  <th className="table-header-cell">UOM</th> */}

                            {GlobaldummyData
                              ? GlobalMRP && (
                                <th className="table-header-cell">MRP</th>
                              )
                              : MRP == true && (
                                <th
                                  className="table-header-cell"
                                  style={{
                                    textAlign: 'right',
                                    fontFamily: 'sans-serif',
                                  }}
                                >
                                  MRP
                                </th>
                              )}

                            {GlobaldummyData
                              ? GlobalRate && (
                                <th className="table-header-cell">Rate</th>
                              )
                              : Rate == true && (
                                <th
                                  className="table-header-cell"
                                  style={{
                                    textAlign: 'right',
                                    fontFamily: 'sans-serif',
                                  }}
                                >
                                  Rate
                                </th>
                              )}

                            {GlobaldummyData
                              ? GlobalDiscount && (
                                <th className="table-header-cell">Dis</th>
                              )
                              : Discount == true && (
                                <th
                                  className="table-header-cell"
                                  style={{
                                    textAlign: 'right',
                                    fontFamily: 'sans-serif',
                                  }}
                                >
                                  Dis
                                </th>
                              )}

                            {GlobaldummyData
                              ? GlobalTax && (
                                <th className="table-header-cell">Tax %</th>
                              )
                              : Tax &&
                              table2Data?.OrderType !== 'E' && (
                                <th
                                  className="table-header-cell"
                                  style={{
                                    textAlign: 'right',
                                    fontFamily: 'sans-serif',
                                  }}
                                >
                                  Tax %
                                </th>
                              )}

                            {GlobaldummyData
                              ? GlobalAmount && (
                                <th className="table-header-cell">Amount</th>
                              )
                              : Amount == true && (
                                <th
                                  className="table-header-cell"
                                  style={{
                                    textAlign: 'right',
                                    fontFamily: 'sans-serif',
                                  }}
                                >
                                  Amount
                                </th>
                              )}
                          </tr>
                        </thead>
                        <tbody>
                          {((GlobaldummyData ? products : dataChunk) || []).map(
                            (item, idx) => (
                              <tr key={idx} className="table-row">
                                {GlobaldummyData
                                  ? GlobalSlNo && (
                                    <td
                                      className="table-header-cell"
                                      style={{ textAlign: 'center' }}
                                    >
                                      {chunkIndex * chunkSize + idx + 1}
                                    </td>
                                  )
                                  : SLNO == true && (
                                    <td
                                      className="table-header-cell"
                                      style={{
                                        textAlign: 'center',
                                        fontFamily: 'sans-serif',
                                      }}
                                    >
                                      {chunkIndex * chunkSize + idx + 1}
                                    </td>
                                  )}
                                {GlobaldummyData
                                  ? GlobalItem && (
                                    <td className="table-header-cell">
                                      {item?.ProdName}
                                    </td>
                                  )
                                  : Item == true && (
                                    <td
                                      className="table-header-cell"
                                      style={{
                                        display: "flex",
                                        flexDirection: "column",
                                        fontFamily: "sans-serif",
                                      }}
                                    >
                                      {/* Product Name */}
                                      <div>{item?.ProdName}</div>

                                      {(() => {
                                        const packages =
                                          PackageDetails?.filter(pkg => pkg.ProdId === item.ProdId) || [];

                                        const identifiers = item?.ProductIdentifierDtls || [];

                                        return (
                                          <>
                                            {/* Package OR Size */}
                                            {packages.length > 0 ? (
                                              <div>
                                                {packages.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>
                                              )
                                            )}

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

                                            {/* Identifiers */}
                                            {identifiers.map((id, i) => (
                                              (id?.SerialNumber || id?.IMEI1 || id?.IMEI2) && (
                                                <div key={i} 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 */}
                                            {identifiers[0]?.Description && <div>{identifiers[0].Description}</div>}
                                          </>
                                        );
                                      })()}
                                    </td>
                                  )}
                                {GlobaldummyData
                                  ? GlobalHsnCode && (
                                    <td
                                      className="table-header-cell"
                                      style={{ textAlign: 'center' }}
                                    >
                                      {item?.HSN}
                                    </td>
                                  )
                                  : HsnCode == true && (
                                    <td
                                      className="table-header-cell"
                                      style={{
                                        textAlign: 'center',
                                        fontFamily: 'sans-serif',
                                      }}
                                    >
                                      {item?.HSN}
                                    </td>
                                  )}
                                {GlobaldummyData
                                  ? GlobalQuantity && (
                                    <td
                                      className="table-header-cell"
                                      style={{ textAlign: 'center' }}
                                    >
                                      {item?.SalesQty}
                                    </td>
                                  )
                                  : Quantity == true && (
                                    <td
                                      className="table-header-cell"
                                      style={{
                                        textAlign: 'center',
                                        fontFamily: 'sans-serif',
                                      }}
                                    >
                                      {item?.SalesQty}
                                    </td>
                                  )}
                                {GlobaldummyData
                                  ? GlobalMRP && (
                                    <td
                                      className="table-header-cell"
                                      style={{ textAlign: 'right' }}
                                    >
                                      {item?.MRP}
                                    </td>
                                  )
                                  : MRP == true && (
                                    <td
                                      className="table-header-cell"
                                      style={{
                                        textAlign: 'right',
                                        fontFamily: 'sans-serif',
                                      }}
                                    >
                                      {item?.SinglePc === 'Y'
                                        ? item?.Rate
                                        : item?.MRP}
                                    </td>
                                  )}
                                {GlobaldummyData
                                  ? GlobalRate && (
                                    <td
                                      className="table-header-cell"
                                      style={{ textAlign: 'right' }}
                                    >
                                      {item?.Rate}
                                    </td>
                                  )
                                  : Rate == true && (
                                    <td
                                      className="table-header-cell"
                                      style={{
                                        textAlign: 'right',
                                        fontFamily: 'sans-serif',
                                      }}
                                    >
                                      {' '}
                                      {item?.Rate}
                                    </td>
                                  )}
                                {GlobaldummyData
                                  ? GlobalDiscount && (
                                    <td className="table-header-cell">
                                      {item.discount}
                                    </td>
                                  )
                                  : Discount == true && (
                                    <td
                                      className="table-header-cell"
                                      style={{
                                        textAlign: 'right',
                                        fontFamily: 'sans-serif',
                                      }}
                                    >
                                      {item?.Type != 'C'
                                        ? item?.OfferAmt || 0
                                        : item?.OfferValue || 0}
                                    </td>
                                  )}
                                {GlobaldummyData
                                  ? GlobalTax && (
                                    <td className="table-header-cell">
                                      {item?.ProdTaxPercentage}
                                    </td>
                                  )
                                  : Tax &&
                                  table2Data?.OrderType !== 'E' && (
                                    <td
                                      className="table-header-cell"
                                      style={{
                                        textAlign: 'right',
                                        fontFamily: 'sans-serif',
                                      }}
                                    >
                                      {item?.ProdTaxPercentage || 0}
                                    </td>
                                  )}
                                {GlobaldummyData
                                  ? GlobalAmount && (
                                    <td
                                      className="table-header-cell"
                                      style={{ textAlign: 'right' }}
                                    >
                                      {item?.TotalAmt}
                                    </td>
                                  )
                                  : Amount == true && (
                                    <td
                                      className="table-header-cell"
                                      style={{
                                        textAlign: 'right',
                                        fontFamily: 'sans-serif',
                                      }}
                                    >
                                      {item?.Type != 'C'
                                        ? item?.TotalAmt - item?.OfferAmt || 0
                                        : item?.TotalAmt - item?.OfferValue ||
                                        0}
                                    </td>
                                  )}
                              </tr>
                            )
                          )}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  {Array.isArray(dataChunk) && dataChunk.length === 1 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 1 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 1 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 1 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 1 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 1 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 2 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 2 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 2 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 2 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 2 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 3 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 3 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 3 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 3 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 4 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 4 && (
                    <div></div>
                  )}
                  {Array.isArray(dataChunk) && dataChunk.length === 5 && (
                    <div></div>
                  )}

                  {chunkIndex === paginatedChunks.length - 1 &&
                    !shouldFooterBeOnNewPage &&
                    FormatTheme && (
                      <>
                        {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={{
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'flex-start',
                          }}
                        >
                          <div
                            style={{
                              display: 'flex',
                              flexDirection: 'column',
                              justifyContent: 'flex-start',
                              width: '95%',
                              whiteSpace: 'nowrap',
                              fontSize: '10px',
                              flexWrap: 'wrap',
                              alignItems: 'flex-end',
                              gap: '2px',
                              marginBottom: '0.5rem',
                            }}
                          >
                            <div style={{ display: 'flex' }}>
                              <div
                                style={{
                                  width: '180px',
                                  textAlign: 'right',
                                  paddingRight: '8px',
                                  fontSize: '15px',
                                  fontFamily: 'sans-serif',
                                }}
                              >
                                Items :
                              </div>
                              <div
                                style={{
                                  fontSize: '15px',
                                  fontWeight: '600',
                                  fontFamily: 'sans-serif',
                                }}
                              >
                                {GlobaldummyData
                                  ? '7'
                                  : totalQuantityFilter?.length}
                              </div>
                            </div>

                            <div style={{ display: 'flex' }}>
                              <div
                                style={{
                                  width: '180px',
                                  textAlign: 'right',
                                  paddingRight: '8px',
                                  fontSize: '15px',
                                  fontFamily: 'sans-serif',
                                }}
                              >
                                Qty :
                              </div>
                              <div
                                style={{
                                  fontSize: '15px',
                                  fontWeight: '600',
                                  fontFamily: 'sans-serif',
                                }}
                              >
                                {GlobaldummyData ? '9' : totalQuantity}
                              </div>
                            </div>

                            <div style={{ display: 'flex' }}>
                              <div
                                style={{
                                  width: '180px',
                                  textAlign: 'right',
                                  paddingRight: '8px',
                                  fontSize: '15px',
                                  fontFamily: 'sans-serif',
                                }}
                              >
                                Off :
                              </div>
                              <div
                                style={{
                                  fontSize: '15px',
                                  fontWeight: '600',
                                  fontFamily: 'sans-serif',
                                }}
                              >
                                {(
                                  Number(TotalOfferAmount || 0) +
                                  Number(table2Data?.OverallDisc || 0)
                                ).toFixed(2)}
                              </div>
                            </div>
                            <div style={{ display: 'flex' }}>
                              <div
                                style={{
                                  width: '180px',
                                  textAlign: 'right',
                                  paddingRight: '8px',
                                  fontSize: '15px',
                                  fontFamily: 'sans-serif',
                                }}
                              >
                                Amount :₹
                              </div>
                              <div
                                style={{
                                  fontSize: '15px',
                                  fontWeight: '600',
                                  fontFamily: 'sans-serif',
                                }}
                              >
                                {GlobaldummyData
                                  ? '1066'
                                  : table2Data?.NetAmount}
                              </div>
                            </div>
                          </div>
                          {/* Summary */}
                          <div
                            style={{ border: '1px solid #000' }}
                            className="summary-grid"
                          >
                            {GlobaldummyData ? (
                              <div className="summary-left">
                                <InvoiceAmountWords amount={736} />
                              </div>
                            ) : (
                              <div className="summary-left">
                                <InvoiceAmountWords
                                  amount={table2Data?.NetAmount}
                                />
                              </div>
                            )}
                            {table2Data?.OrderType !== 'E' && (
                              <div className="summary-right">
                                <div style={{ display: 'flex' }}>
                                  <div
                                    style={{
                                      width: '180px',
                                      textAlign: 'right',
                                      paddingRight: '8px',
                                    }}
                                  >
                                    Total Taxable Amount :
                                  </div>
                                  <div>
                                    {GlobaldummyData
                                      ? 736
                                      : table2Data?.BillAmount}
                                  </div>
                                </div>

                                <div
                                  style={{
                                    display: 'flex',
                                    flexDirection: 'column',
                                    fontSize: '12px',
                                    gap: '8px',
                                  }}
                                >
                                  {OrderDetailGST?.map((item, index) => (
                                    <div key={index}>
                                      <div style={{ display: 'flex' }}>
                                        <div
                                          style={{
                                            width: '180px',
                                            textAlign: 'right',
                                            paddingRight: '8px',
                                          }}
                                        >
                                          Taxable Amount :
                                        </div>
                                        <div>
                                          {Number(
                                            item.WithOutTaxAmount
                                          ).toFixed(2)}
                                        </div>
                                      </div>

                                      <div style={{ display: 'flex' }}>
                                        <div
                                          style={{
                                            width: '180px',
                                            textAlign: 'right',
                                            paddingRight: '8px',
                                          }}
                                        >
                                          CGST ({item.TaxPercentage / 2}%) :
                                        </div>
                                        <div>
                                          {Number(item.CGST).toFixed(2)}
                                        </div>
                                      </div>

                                      <div style={{ display: 'flex' }}>
                                        <div
                                          style={{
                                            width: '180px',
                                            textAlign: 'right',
                                            paddingRight: '8px',
                                          }}
                                        >
                                          SGST ({item.TaxPercentage / 2}%) :
                                        </div>
                                        <div>
                                          {Number(item.SGST).toFixed(2)}
                                        </div>
                                      </div>

                                      <div style={{ display: 'flex' }}>
                                        <div
                                          style={{
                                            width: '180px',
                                            textAlign: 'right',
                                            paddingRight: '8px',
                                          }}
                                        >
                                          Total (incl GST) :
                                        </div>
                                        <div>
                                          {Number(item.TotalAmt).toFixed(2)}
                                        </div>
                                      </div>
                                    </div>
                                  ))}
                                </div>

                                {/* <div className="summary-item">
                          <span>GST Payable on Reverse Charge</span>
                          <span></span>
                        </div> */}
                                <hr />

                                <div style={{ display: 'flex' }}>
                                  <div
                                    style={{
                                      width: '180px',
                                      textAlign: 'right',
                                      paddingRight: '8px',
                                      fontSize: '16px',
                                      fontWeight: '600',
                                    }}
                                  >
                                    Total Amount Payable :
                                  </div>
                                  <div>
                                    {Number(
                                      GlobaldummyData
                                        ? 736
                                        : table2Data?.NetAmount,
                                    )?.toFixed(2)}
                                  </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'
                                            ? '-'
                                            : '+'}
                                          {(
                                            lastTransaction?.Amount || 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>
                                )}

                                {/* <div className="summary-item-bold">
                            <span>Total Amount Payable</span>
                            <span>{Number(GlobaldummyData ? 736 : table2Data?.NetAmount)?.toFixed(2)}</span>
                          </div> */}
                                {/* <div className="total-amount">
                            {Number(GlobaldummyData ? 736 : table2Data?.NetAmount)?.toFixed(2)}
                          </div> */}
                              </div>
                            )}
                          </div>

                          {/* Footer */}
                          <div className="footer-grid">
                            <div className="footer-left">
                              {BankDetails?.length > 0 && (
                                <>
                                  <h4 className="bank-details-title">
                                    Bank Details:
                                  </h4>
                                  <div className="bank-details">
                                    <div className="bank-detail-item">
                                      <strong>Bank Name:</strong>{' '}
                                      {!estimatePrintHeader &&
                                        table2Data?.OrderType === 'E'
                                        ? ''
                                        : BankDetails?.[0]?.BankName}
                                    </div>
                                    <div className="bank-detail-item">
                                      <strong>Account No.:</strong>{' '}
                                      {!estimatePrintHeader &&
                                        table2Data?.OrderType === 'E'
                                        ? ''
                                        : BankDetails?.[0]?.AccountNo}
                                    </div>
                                    <div className="bank-detail-item">
                                      <strong>IFSC Code:</strong>{' '}
                                      {!estimatePrintHeader &&
                                        table2Data?.OrderType === 'E'
                                        ? ''
                                        : BankDetails?.[0]?.IFSCCode}
                                    </div>
                                    <div className="bank-detail-item">
                                      <strong>Branch Name:</strong>{' '}
                                      {!estimatePrintHeader &&
                                        table2Data?.OrderType === 'E'
                                        ? ''
                                        : BankDetails?.[0]?.BankBranch}
                                    </div>
                                  </div>
                                  <hr />
                                </>
                              )}

                              <div className="terms-title">
                                {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>
                                  )}
                              </div>
                            </div>
                            <div
                              style={{
                                display: 'flex',
                                justifyContent: 'flex-end',
                              }}
                              className="footer-right"
                            >
                              <div className="certification">
                                <p>
                                  Certified that the particulars given above are
                                  true and correct.
                                </p>
                              </div>
                              <div className="signature-section">
                                {GlobaldummyData ? (
                                  <p className="signature-text">Company Name</p>
                                ) : !estimatePrintHeader &&
                                  table2Data?.OrderType === 'E' ? (
                                  ''
                                ) : (
                                  <p className="signature-text">
                                    {' '}
                                    "For" {companyName}
                                  </p>
                                )}
                                <p className="signature-text">
                                  Authorised Signatory
                                </p>

                                {GlobaldummyData
                                  ? GlobalSignature && (
                                    <div style={{ paddingBottom: '1rem' }}>
                                      <img
                                        style={{
                                          width: '70px',
                                          height: '40px',
                                        }}
                                        src={
                                          GlobalSignatureImages
                                            ? GlobalSignatureImages
                                            : signature
                                        }
                                        alt=""
                                      />
                                    </div>
                                  )
                                  : Signature == true && (
                                    <div style={{}}>
                                      {!estimatePrintHeader &&
                                        table2Data?.OrderType === 'E' ? (
                                        ''
                                      ) : (
                                        <img
                                          style={{
                                            width: '100px',
                                            height: '60px',
                                          }}
                                          src={SignatureImg}
                                          alt=""
                                        />
                                      )}
                                    </div>
                                  )}
                                <p className="signature-text">(Common Seal)</p>
                              </div>
                            </div>
                          </div>
                          {/* </div> */}

                          {/* Copy Labels */}
                          <div className="copy-labels">
                            {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>
                        </div>
                      </>
                    )}
                </div>
                // </div>
              ))}
            </div>
            {/* <hr /> */}
            {shouldFooterBeOnNewPage && FormatTheme && (
              <div
                className="print-page invoice-wrapper"
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  minHeight: PageSize == 'A5' ? '200mm' : '257mm',
                  justifyContent: 'flex-end',
                  pageBreakBefore: 'always',
                }}
              >
                <div
                  className="page-footerA4Style11 "
                  style={{
                    marginTop: 'auto',
                    pageBreakBefore: 'avoid',
                    pageBreakInside: 'avoid',
                    minHeight: 'auto',
                  }}
                >
                  <>
                    {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={{
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'flex-end',
                        justifyContent: 'space-around',
                        width: '95%',
                        whiteSpace: 'nowrap',
                        fontSize: '10px',
                        flexWrap: 'wrap',
                        gap: '2px',
                      }}
                    >
                      <div style={{ display: 'flex' }}>
                        <div
                          style={{
                            width: '180px',
                            textAlign: 'right',
                            paddingRight: '8px',
                            fontSize: '15px',
                            fontFamily: 'sans-serif',
                          }}
                        >
                          Items :
                        </div>
                        <div
                          style={{
                            fontSize: '15px',
                            fontWeight: '600',
                            fontFamily: 'sans-serif',
                          }}
                        >
                          {GlobaldummyData ? '7' : totalQuantityFilter?.length}
                        </div>
                      </div>

                      <div style={{ display: 'flex' }}>
                        <div
                          style={{
                            width: '180px',
                            textAlign: 'right',
                            paddingRight: '8px',
                            fontSize: '15px',
                            fontFamily: 'sans-serif',
                          }}
                        >
                          Qty :
                        </div>
                        <div
                          style={{
                            fontSize: '15px',
                            fontWeight: '600',
                            fontFamily: 'sans-serif',
                          }}
                        >
                          {GlobaldummyData ? '9' : totalQuantity}
                        </div>
                      </div>

                      <div style={{ display: 'flex' }}>
                        <div
                          style={{
                            width: '180px',
                            textAlign: 'right',
                            paddingRight: '8px',
                            fontSize: '15px',
                            fontFamily: 'sans-serif',
                          }}
                        >
                          Off :
                        </div>
                        <div
                          style={{
                            fontSize: '15px',
                            fontWeight: '600',
                            fontFamily: 'sans-serif',
                          }}
                        >
                          {(
                            Number(TotalOfferAmount || 0) +
                            Number(table2Data?.OverallDisc || 0)
                          ).toFixed(2)}
                        </div>
                      </div>
                      <div style={{ display: 'flex' }}>
                        <div
                          style={{
                            width: '180px',
                            textAlign: 'right',
                            paddingRight: '8px',
                            fontSize: '15px',
                            fontFamily: 'sans-serif',
                          }}
                        >
                          Amount :₹
                        </div>
                        <div
                          style={{
                            fontSize: '15px',
                            fontWeight: '600',
                            fontFamily: 'sans-serif',
                          }}
                        >
                          {GlobaldummyData ? '1066' : table2Data?.NetAmount}
                        </div>
                      </div>
                    </div>
                    {/* <hr /> */}
                    {/* Summary */}
                    <div className="summary-grid">
                      {GlobaldummyData ? (
                        <div className="summary-left">
                          <InvoiceAmountWords amount={736} />
                        </div>
                      ) : (
                        <div className="summary-left">
                          <InvoiceAmountWords amount={table2Data?.NetAmount} />
                        </div>
                      )}
                      {table2Data?.OrderType !== 'E' && (
                        <div className="summary-right">
                          <div style={{ display: 'flex' }}>
                            <div
                              style={{
                                width: '180px',
                                textAlign: 'right',
                                paddingRight: '8px',
                              }}
                            >
                              Total Taxable Amount :
                            </div>
                            <div>
                              {GlobaldummyData ? 736 : table2Data?.BillAmount}
                            </div>
                          </div>

                          <div
                            style={{
                              display: 'flex',
                              flexDirection: 'column',
                              fontSize: '12px',
                              gap: '8px',
                            }}
                          >
                            {OrderDetailGST?.map((item, index) => (
                              <div key={index}>
                                <div style={{ display: 'flex' }}>
                                  <div
                                    style={{
                                      width: '180px',
                                      textAlign: 'right',
                                      paddingRight: '8px',
                                    }}
                                  >
                                    Taxable Amount :
                                  </div>
                                  <div>
                                    {Number(item.WithOutTaxAmount).toFixed(2)}
                                  </div>
                                </div>

                                <div style={{ display: 'flex' }}>
                                  <div
                                    style={{
                                      width: '180px',
                                      textAlign: 'right',
                                      paddingRight: '8px',
                                    }}
                                  >
                                    CGST ({item.TaxPercentage / 2}%) :
                                  </div>
                                  <div>{Number(item.CGST).toFixed(2)}</div>
                                </div>

                                <div style={{ display: 'flex' }}>
                                  <div
                                    style={{
                                      width: '180px',
                                      textAlign: 'right',
                                      paddingRight: '8px',
                                    }}
                                  >
                                    SGST ({item.TaxPercentage / 2}%) :
                                  </div>
                                  <div>{Number(item.SGST).toFixed(2)}</div>
                                </div>

                                <div style={{ display: 'flex' }}>
                                  <div
                                    style={{
                                      width: '180px',
                                      textAlign: 'right',
                                      paddingRight: '8px',
                                    }}
                                  >
                                    Total Amount Tax :
                                  </div>
                                  <div>{Number(item.TotalAmt).toFixed(2)}</div>
                                </div>
                              </div>
                            ))}
                          </div>
                          {/* <div className="summary-item">
                          <span>GST Payable on Reverse Charge</span>
                          <span></span>
                        </div> */}
                          <hr />
                          <div className="summary-item-bold">
                            <span>Total Amount Payable</span>
                            <span>
                              {Number(
                                GlobaldummyData ? 736 : table2Data?.NetAmount
                              )?.toFixed(2)}
                            </span>
                          </div>
                          <div className="total-amount">
                            {Number(
                              GlobaldummyData ? 736 : table2Data?.NetAmount,
                            )?.toFixed(2)}
                          </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>
                          )}
                        </div>
                      )}
                    </div>

                    {/* Footer */}
                    <div className="footer-grid">
                      <div className="footer-left">
                        {BankDetails?.length > 0 && (
                          <>
                            <h4 className="bank-details-title">
                              Bank Details:
                            </h4>
                            <div className="bank-details">
                              <div className="bank-detail-item">
                                <strong>Bank Name:</strong>{' '}
                                {!estimatePrintHeader &&
                                  table2Data?.OrderType === 'E'
                                  ? ''
                                  : BankDetails?.[0]?.BankName}
                              </div>
                              <div className="bank-detail-item">
                                <strong>Account No.:</strong>{' '}
                                {!estimatePrintHeader &&
                                  table2Data?.OrderType === 'E'
                                  ? ''
                                  : BankDetails?.[0]?.AccountNo}
                              </div>
                              <div className="bank-detail-item">
                                <strong>IFSC Code:</strong>{' '}
                                {!estimatePrintHeader &&
                                  table2Data?.OrderType === 'E'
                                  ? ''
                                  : BankDetails?.[0]?.IFSCCode}
                              </div>
                              <div className="bank-detail-item">
                                <strong>Branch Name:</strong>{' '}
                                {!estimatePrintHeader &&
                                  table2Data?.OrderType === 'E'
                                  ? ''
                                  : BankDetails?.[0]?.BankBranch}
                              </div>
                            </div>
                            <hr />
                          </>
                        )}
                        <div className="terms-title">
                          {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>
                            )}
                        </div>
                      </div>
                      <div
                        style={{ display: 'flex', justifyContent: 'flex-end' }}
                        className="footer-right"
                      >
                        <div className="certification">
                          <p>
                            Certified that the particulars given above are true
                            and correct.
                          </p>
                        </div>
                        <div className="signature-section">
                          {GlobaldummyData ? (
                            <p className="signature-text">Company Name</p>
                          ) : (
                            <p className="signature-text">
                              {' '}
                              "For" {companyName}
                            </p>
                          )}
                          <p className="signature-text">Authorised Signatory</p>
                          {GlobaldummyData
                            ? GlobalSignature && (
                              <div
                                style={{
                                  display: 'flex',
                                  flexDirection: 'column',
                                  alignItems: 'flex-end',
                                  paddingBottom: '1rem',
                                }}
                              >
                                <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',
                                }}
                              >
                                <img
                                  style={{ width: '100px', height: '60px' }}
                                  src={SignatureImg}
                                  alt=""
                                />
                              </div>
                            )}
                          <p className="signature-text">(Common Seal)</p>
                        </div>
                      </div>
                    </div>
                    {/* </div> */}

                    {/* Copy Labels */}
                    <div className="copy-labels">
                      {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>
                  </>
                </div>
              </div>
            )}
          </div>
        ) : (
          <div id={`A4Standard-${index}`} className="invoice-container">
            <div className="invoice-wrapper">
              {/* Header */}
              {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
                ''
              ) : (
                <div className="header-section">
                  <div>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                      {GlobalLogo && GlobaldummyData && (
                        <div>
                          {' '}
                          <img
                            src={Logo}
                            alt="Brand Logo"
                            style={{
                              width: '100px',
                              height: 'auto',
                              objectFit: 'contain',
                            }}
                          />
                        </div>
                      )}
                      {base64Image &&
                        (PrintLogo?.SettingValue === 'Y' || LogoField) ? (
                        <img
                          src={base64Image}
                          alt="Brand Logo"
                          style={{
                            width: '60px',
                            height: 'auto',
                            objectFit: 'contain',
                          }}
                        />
                      ) : null}
                      <h1
                        className="company-name"
                        style={{
                          color: SelectedHeaderColor,
                        }}
                      >
                        {GlobaldummyData ? 'Company Name' : companyName}
                      </h1>
                    </div>
                    <p>{companyAddress}</p>
                    {(companyPhone || GlobaldummyData) && (
                      <div>
                        Phone: {GlobaldummyData ? '999999XXXX' : companyPhone}
                      </div>
                    )}
                    <div>Email: {companyEmail}</div>
                    {companyGSTIN ||
                      (GlobaldummyData && (
                        <div style={{ fontSize: '16px', fontWeight: '600' }}>
                          GSTIN:{' '}
                          {GlobaldummyData ? 'XXTTHJJF7679' : companyGSTIN}
                        </div>
                      ))}
                  </div>
                </div>
              )}

              {/* Invoice Title */}
              <div className="invoice-title">
                {table2Data?.OrderType === 'E' && estimateTitle && (
                  <div
                    style={{
                      fontSize: '14px',
                      margin: '2px 0 0 0',
                      padding: 0,
                      fontWeight: 600,
                    }}
                  >
                    Estimate{' '}
                  </div>
                )}
                {table2Data?.OrderType === 'E' ? (
                  ''
                ) : (
                  <div
                    style={{
                      fontSize: '14px',
                      margin: '2px 0 0 0',
                      padding: 0,
                      fontWeight: 600,
                    }}
                  >
                    {GlobaldummyData
                      ? GlobalBilltext
                        ? GlobalBilltext
                        : 'Cash' + ' Bill'
                      : BillName
                        ? BillName
                        : PaymentStatusSuccess?.length === 1
                          ? PaymentStatusSuccess?.[0]?.PaymentTypeName + ' Bill'
                          : ''}
                  </div>
                )}
              </div>

              {GlobaldummyData ? (
                <div className="billing-grid">
                  <div className="billing-left">
                    <h3 className="section-title">
                      Details of Receiver | Billed to
                    </h3>
                    <div className="billing-details">
                      <div className="billing-detail-item">
                        <strong>Name : </strong>
                        {GlobaldummyData ? (
                          <span style={{ fontSize: '11px' }}>{'XXXYYY'}</span>
                        ) : (
                          table2Data?.CustomerDetails?.[0]?.CustSuppName
                        )}
                      </div>

                      <div className="billing-detail-item">
                        <strong>Address: </strong>
                        XYZ City
                      </div>

                      <div className="billing-detail-item">
                        <strong>State:</strong> XYZ State
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                table2Data?.CustomerDetails?.length > 0 && (
                  <div className="billing-grid">
                    <div className="billing-left">
                      <h3 className="section-title">
                        Details of Receiver | Billed to
                      </h3>
                      <div className="billing-details">
                        <div className="billing-detail-item">
                          <strong>Name : </strong>
                          {GlobaldummyData ? (
                            <span style={{ fontSize: '11px' }}>{'XXXYYY'}</span>
                          ) : (
                            table2Data?.CustomerDetails?.[0]?.CustSuppName
                          )}
                        </div>

                        <div className="billing-detail-item">
                          <strong>Address:</strong>{' '}
                          {table2Data?.CustomerDetails?.length > 0 &&
                            !GlobaldummyData && (
                              <span style={{ fontSize: '11px' }}>
                                {table2Data?.CustomerDetails?.[0]?.Address1}{' '}
                                {table2Data?.CustomerDetails?.[0]?.Address2}
                              </span>
                            )}
                        </div>

                        <div className="billing-detail-item">
                          <strong>State:</strong>{' '}
                          {table2Data?.CustomerDetails?.[0]?.State}
                        </div>
                      </div>
                    </div>
                  </div>
                )
              )}

              {/* Items Table */}
              <div className="table-overflow">
                <table
                  className="items-table"
                  style={{ borderTop: '1px solid black' }}
                >
                  <thead>
                    <tr className="table-header">
                      {GlobaldummyData
                        ? GlobalSlNo && (
                          <th className="table-header-cell">S.No</th>
                        )
                        : SLNO == true && (
                          <th className="table-header-cell">S.No</th>
                        )}

                      {GlobaldummyData
                        ? GlobalItem && (
                          <th className="table-header-cell">Item</th>
                        )
                        : Item == true && (
                          <th className="table-header-cell">Item</th>
                        )}

                      {GlobaldummyData
                        ? GlobalHsnCode && (
                          <th className="table-header-cell">HSN </th>
                        )
                        : HsnCode == true && (
                          <th className="table-header-cell">HSN </th>
                        )}

                      {GlobaldummyData
                        ? GlobalQuantity && (
                          <th className="table-header-cell">Qty</th>
                        )
                        : Quantity == true && (
                          <th className="table-header-cell">
                            {' '}
                            {WeightasKg ? 'Qty/Kg' : 'Qty'}
                          </th>
                        )}

                      {/* <th className="table-header-cell">UOM</th>
                  <th className="table-header-cell">UOM</th> */}

                      {GlobaldummyData
                        ? GlobalMRP && (
                          <th className="table-header-cell">MRP</th>
                        )
                        : MRP == true && (
                          <th className="table-header-cell">MRP</th>
                        )}

                      {GlobaldummyData
                        ? GlobalRate && (
                          <th className="table-header-cell">Rate</th>
                        )
                        : Rate == true && (
                          <th className="table-header-cell">Rate</th>
                        )}

                      {GlobaldummyData
                        ? GlobalDiscount && (
                          <th className="table-header-cell">Dis</th>
                        )
                        : Discount == true && (
                          <th className="table-header-cell">Dis</th>
                        )}

                      {GlobaldummyData
                        ? GlobalTax && (
                          <th className="table-header-cell">Tax %</th>
                        )
                        : Tax &&
                        table2Data?.OrderType !== 'E' && (
                          <th
                            className="table-header-cell"
                            style={{
                              textAlign: 'right',
                              fontFamily: 'sans-serif',
                            }}
                          >
                            Tax %
                          </th>
                        )}

                      {GlobaldummyData
                        ? GlobalAmount && (
                          <th className="table-header-cell">Amount</th>
                        )
                        : Amount == true && (
                          <th className="table-header-cell">Amount</th>
                        )}

                      {/* <th className="table-header-cell">Taxable</th>
                  <th className="table-header-cell-center" colSpan="2">IGST</th>
                  <th className="table-header-cell-last">Total</th> */}
                    </tr>
                    {/* <tr className="table-header">
                  <th className="table-header-cell"></th>
                  <th className="table-header-cell"></th>
                  <th className="table-header-cell"></th>
                  <th className="table-header-cell"></th>
                  <th className="table-header-cell"></th>
                  <th className="table-header-cell"></th>
                  <th className="table-header-cell"></th>
                  <th className="table-header-cell"></th>
                  <th className="table-header-cell"></th>
                  <th className="table-header-cell-center">Rate</th>
                  <th className="table-header-cell-center">Amount</th>
                  <th className="table-header-cell-last"></th>
                </tr> */}
                  </thead>
                  <tbody>
                    {((GlobaldummyData ? products : productsData) || []).map(
                      (item, idx) => (
                        <tr key={idx} className="table-row">
                          {GlobaldummyData
                            ? GlobalSlNo && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'center' }}
                              >
                                {idx + 1}
                              </td>
                            )
                            : SLNO == true && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'center' }}
                              >
                                {idx + 1}
                              </td>
                            )}
                          {GlobaldummyData
                            ? GlobalItem && (
                              <td className="table-header-cell">
                                {item?.ProdName}
                              </td>
                            )
                            : Item == true && (
                              <td
                                className="table-header-cell"
                                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 */}
                                {(() => {
                                  const firstDescription = item?.ProductIdentifierDtls?.find(
                                    d => d?.Description
                                  )?.Description;

                                  return (
                                    <>
                                      {/* Serial + IMEI */}
                                      {item?.ProductIdentifierDtls?.map((id, index) => (
                                        <div
                                          key={index}
                                          style={{ display: 'flex', gap: '4px', marginBottom: '2px' }}
                                        >
                                          {id?.SerialNumber && <div>{id.SerialNumber}</div>}

                                          {(id?.IMEI1 || id?.IMEI2) && (
                                            <div>
                                              {[id.IMEI1, id.IMEI2].filter(Boolean).join(", ")}
                                            </div>
                                          )}
                                        </div>
                                      ))}

                                      {/* Description Outside */}
                                      {firstDescription && (
                                        <div style={{ marginTop: '4px' }}>
                                          {firstDescription}
                                        </div>
                                      )}
                                    </>
                                  );
                                })()}

                               
                              </td>
                            )}
                          {GlobaldummyData
                            ? GlobalHsnCode && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'center' }}
                              >
                                {item?.HSN}
                              </td>
                            )
                            : HsnCode == true && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'center' }}
                              >
                                {item?.HSN}
                              </td>
                            )}
                          {GlobaldummyData
                            ? GlobalQuantity && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'center' }}
                              >
                                {item?.SalesQty}
                              </td>
                            )
                            : Quantity == true && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'center' }}
                              >
                                {item?.SalesQty}
                              </td>
                            )}
                          {GlobaldummyData
                            ? GlobalMRP && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'right' }}
                              >
                                {item?.MRP}
                              </td>
                            )
                            : MRP == true && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'right' }}
                              >
                                {item?.SinglePc === 'Y'
                                  ? item?.Rate
                                  : item?.MRP}
                              </td>
                            )}
                          {GlobaldummyData
                            ? GlobalRate && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'right' }}
                              >
                                {item?.Rate}
                              </td>
                            )
                            : Rate == true && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'right' }}
                              >
                                {' '}
                                {item?.Rate}
                              </td>
                            )}
                          {GlobaldummyData
                            ? GlobalDiscount && (
                              <td className="table-header-cell">
                                {item.discount}
                              </td>
                            )
                            : Discount == true && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'right' }}
                              >
                                {item?.Type != 'C'
                                  ? item?.OfferAmt || 0
                                  : item?.OfferValue || 0}
                              </td>
                            )}
                          {GlobaldummyData
                            ? GlobalTax && (
                              <td className="table-header-cell">
                                {item?.ProdTaxPercentage}
                              </td>
                            )
                            : Tax &&
                            table2Data?.OrderType !== 'E' && (
                              <td
                                className="table-header-cell"
                                style={{
                                  textAlign: 'right',
                                  fontFamily: 'sans-serif',
                                }}
                              >
                                {item?.ProdTaxPercentage || 0}
                              </td>
                            )}
                          {GlobaldummyData
                            ? GlobalAmount && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'right' }}
                              >
                                {item?.TotalAmt}
                              </td>
                            )
                            : Amount == true && (
                              <td
                                className="table-header-cell"
                                style={{ textAlign: 'right' }}
                              >
                                {item?.Type != 'C'
                                  ? item?.TotalAmt - item?.OfferAmt || 0
                                  : item?.TotalAmt - item?.OfferValue || 0}
                              </td>
                            )}
                        </tr>
                      ),
                    )}
                  </tbody>
                </table>
              </div>
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'flex-start',
                  justifyContent: 'space-around',
                  width: '95%',
                  whiteSpace: 'nowrap',
                  fontSize: '10px',
                  flexWrap: 'wrap',
                  gap: '2px',
                }}
              >
                <div
                  style={{
                    margin: 0,
                    padding: 0,
                    fontSize: '10px',
                    fontWeight: '600',
                    width: '100%',
                    textAlign: 'right',
                  }}
                >
                  {' '}
                  Items:{GlobaldummyData ? '7' : totalQuantityFilter?.length}
                </div>
                <div
                  style={{
                    margin: 0,
                    padding: 0,
                    fontSize: '10px',
                    fontWeight: '600',
                    width: '100%',
                    textAlign: 'right',
                  }}
                >
                  {' '}
                  Qty:{GlobaldummyData ? '9' : totalQuantity}
                </div>
                {/* {ExtraChargeTotal > 0 && <p style={{ margin: 0, padding: 0, fontSize: "12px" }}> Extra Charges:{ExtraChargeTotal}</p>} */}

                {(TotalOfferAmount > 0 || table2Data?.OverallDisc > 0) && (
                  <p
                    style={{
                      margin: 0,
                      padding: 0,
                      fontSize: '10px',
                      fontWeight: '600',
                      width: '100%',
                      textAlign: 'right',
                    }}
                  >
                    Off :
                    {(
                      Number(TotalOfferAmount || 0) +
                      Number(table2Data?.OverallDisc || 0)
                    ).toFixed(2)}
                  </p>
                )}
                <div
                  style={{
                    margin: 0,
                    padding: 0,
                    fontSize: '10px',
                    fontWeight: '600',
                    width: '100%',
                    textAlign: 'right',
                  }}
                >
                  Amount :₹
                  {GlobaldummyData
                    ? '1066'
                    : Number(table2Data?.NetAmount).toFixed(2)}
                </div>
              </div>
              {/* Summary */}
              <div className="summary-grid">
                {GlobaldummyData ? (
                  <div className="summary-left">
                    <InvoiceAmountWords amount={736} />
                  </div>
                ) : (
                  <div className="summary-left">
                    <InvoiceAmountWords amount={table2Data?.NetAmount} />
                  </div>
                )}
                {table2Data?.OrderType !== 'E' && (
                  <div className="summary-right">
                    <div style={{ display: 'flex' }}>
                      <div
                        style={{
                          width: '180px',
                          textAlign: 'right',
                          paddingRight: '8px',
                        }}
                      >
                        Total Taxable Amount :
                      </div>
                      <div>
                        {GlobaldummyData ? 736 : table2Data?.BillAmount}
                      </div>
                    </div>

                    <div
                      style={{
                        display: 'flex',
                        flexDirection: 'column',
                        fontSize: '12px',
                        gap: '8px',
                      }}
                    >
                      {OrderDetailGST?.map((item, index) => (
                        <div key={index}>
                          <div style={{ display: 'flex' }}>
                            <div
                              style={{
                                width: '180px',
                                textAlign: 'right',
                                paddingRight: '8px',
                              }}
                            >
                              Taxable Amount :
                            </div>
                            <div>
                              {Number(item.WithOutTaxAmount).toFixed(2)}
                            </div>
                          </div>

                          <div style={{ display: 'flex' }}>
                            <div
                              style={{
                                width: '180px',
                                textAlign: 'right',
                                paddingRight: '8px',
                              }}
                            >
                              CGST ({item.TaxPercentage / 2}%) :
                            </div>
                            <div>{Number(item.CGST).toFixed(2)}</div>
                          </div>

                          <div style={{ display: 'flex' }}>
                            <div
                              style={{
                                width: '180px',
                                textAlign: 'right',
                                paddingRight: '8px',
                              }}
                            >
                              SGST ({item.TaxPercentage / 2}%) :
                            </div>
                            <div>{Number(item.SGST).toFixed(2)}</div>
                          </div>

                          <div style={{ display: 'flex' }}>
                            <div
                              style={{
                                width: '180px',
                                textAlign: 'right',
                                paddingRight: '8px',
                              }}
                            >
                              Total (incl GST) :
                            </div>
                            <div>{Number(item.TotalAmt).toFixed(2)}</div>
                          </div>
                        </div>
                      ))}
                    </div>
                    {/* <div className="summary-item">
                    <span>GST Payable on Reverse Charge</span>
                    <span></span>
                  </div> */}
                    <hr />
                    <div className="summary-item-bold">
                      <span>Total Amount Payable</span>
                      <span>
                        {Number(
                          GlobaldummyData ? 736 : table2Data?.NetAmount,
                        )?.toFixed(2)}
                      </span>
                    </div>
                    <div className="total-amount">
                      {Number(
                        GlobaldummyData ? 736 : table2Data?.NetAmount,
                      )?.toFixed(2)}
                    </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>
                    )}
                  </div>
                )}
              </div>

              {/* Footer */}
              <div className="footer-grid">
                <div className="footer-left">
                  {(BankDetails?.length > 0 || GlobaldummyData) && (
                    <>
                      <h4 className="bank-details-title">Bank Details:</h4>
                      <div className="bank-details">
                        <div className="bank-detail-item">
                          <strong>Bank Name:</strong>{' '}
                          {!estimatePrintHeader && table2Data?.OrderType === 'E'
                            ? ''
                            : BankDetails?.[0]?.BankName}
                        </div>
                        <div className="bank-detail-item">
                          <strong>Account No.:</strong>{' '}
                          {!estimatePrintHeader && table2Data?.OrderType === 'E'
                            ? ''
                            : BankDetails?.[0]?.AccountNo}
                        </div>
                        <div className="bank-detail-item">
                          <strong>IFSC Code:</strong>{' '}
                          {!estimatePrintHeader && table2Data?.OrderType === 'E'
                            ? ''
                            : BankDetails?.[0]?.IFSCCode}
                        </div>
                        <div className="bank-detail-item">
                          <strong>Branch Name:</strong>{' '}
                          {!estimatePrintHeader && table2Data?.OrderType === 'E'
                            ? ''
                            : BankDetails?.[0]?.BankBranch}
                        </div>
                      </div>
                      <hr />
                    </>
                  )}
                  <div className="terms-title">
                    {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>
                      )}
                  </div>
                </div>
                <div
                  style={{ display: 'flex', justifyContent: 'flex-end' }}
                  className="footer-right"
                >
                  <div className="certification">
                    <p>
                      Certified that the particulars given above are true and
                      correct.
                    </p>
                  </div>
                  <div className="signature-section">
                    {GlobaldummyData ? (
                      <p className="signature-text">Company Name</p>
                    ) : (
                      <p className="signature-text"> "For" {companyName}</p>
                    )}
                    <p className="signature-text">Authorised Signatory</p>
                    {GlobaldummyData
                      ? GlobalSignature && (
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'flex-end',
                            paddingBottom: '1rem',
                          }}
                        >
                          <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',
                          }}
                        >
                          <img
                            style={{ width: '100px', height: '60px' }}
                            src={SignatureImg}
                            alt=""
                          />
                        </div>
                      )}
                    <p className="signature-text">(Common Seal)</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Copy Labels */}
            <div className="copy-labels">
              {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>
          </div>
        )}
      </>
    </>
  );
};

export default InvoiceTemplate;