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,
} 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 }) => {
  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 estimatePrintHeader = SettingData?.[0]?.SettingDtlDetails?.find(setting => setting?.SettingIdName?.toLowerCase() === 'estimateprintheader')?.SettingValue === 'Y'
  const keysLength = Object.keys(table2Data ?? {}).length;
  console.log(GlobalDiscount, Discount, "Discount");

  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 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.00,
        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.00,
        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.00,
        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>
                        <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>

                    </div>)}

                    {/* Invoice Title */}
                    <div className="invoice-title">
                      {table2Data?.OrderType === "E" && (
                        <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"
                                    }}
                                  >
                                    <div>{item?.ProdName}</div>
                                    {(PackageDetails?.filter((pkg) => pkg.ProdId === item.ProdId).length > 0 ?
                                      <div>
                                        {PackageDetails?.filter((pkg) => pkg.ProdId === item.ProdId)?.map((item, index) => (
                                          <span key={index} style={{ display: "block" }}>
                                            {item.ParcelCount} PCS {item.ParcelQty} PACK ({item.ParcelType})
                                          </span>
                                        ))}
                                      </div>

                                      : <div>
                                        ({item?.Size ? item?.Size : "1"}{" "}
                                        {item?.SinglePc == "Y"
                                          ? "PCS"
                                          : item?.Type != "C"
                                            ? item?.UomName
                                            : "COMBO"}
                                        )
                                      </div>)}
                                    &nbsp;{" "}
                                    {item?.BrandName !== null
                                      ? item?.BrandName
                                      : ""}
                                    &nbsp;
                                    {item?.ProductIdentifierDtls?.length > 0
                                      ? item?.ProductIdentifierDtls?.filter(
                                        (items) =>
                                          !(
                                            items.SerialNumber == "" ||
                                            items.SerialNumber == null
                                          )
                                      )?.map((a) => {
                                        return <div>{a.SerialNumber}</div>;
                                      })
                                      : ""}{" "}
                                    {item?.ProductIdentifierDtls?.length > 0
                                      ? item?.ProductIdentifierDtls.filter(
                                        (item1) =>
                                          item1.IMEI1 !== "" || item1.IMEI2 !== ""
                                      )?.map((item2) => {
                                        const imei1 = item2.IMEI1 || "";
                                        const imei2 = item2.IMEI2 || "";
                                        return (
                                          <div>
                                            {[imei1, imei2]
                                              .filter(Boolean)
                                              .join(",")}
                                          </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>

                            {/* <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>
                      </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">{GlobaldummyData ? "Company Name" : companyName}</h1>
                  </div>
                  <p>{companyAddress}</p>
                  <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" && (
                  <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",
                              }}
                            >
                              <div>{item?.ProdName}</div>
                              <div>
                                ({item?.Size ? item?.Size : "1"}{" "}
                                {item?.SinglePc == "Y"
                                  ? "PCS"
                                  : item?.Type != "C"
                                    ? item?.UomName
                                    : "COMBO"}
                                )
                              </div>
                              &nbsp;{" "}
                              {item?.BrandName !== null
                                ? item?.BrandName
                                : ""}
                              &nbsp;
                              {item?.ProductIdentifierDtls?.length > 0
                                ? item?.ProductIdentifierDtls?.filter(
                                  (items) =>
                                    !(
                                      items.SerialNumber == "" ||
                                      items.SerialNumber == null
                                    )
                                )?.map((a) => {
                                  return <div>{a.SerialNumber}</div>;
                                })
                                : ""}{" "}
                              {item?.ProductIdentifierDtls?.length > 0
                                ? item?.ProductIdentifierDtls.filter(
                                  (item1) =>
                                    item1.IMEI1 !== "" || item1.IMEI2 !== ""
                                )?.map((item2) => {
                                  const imei1 = item2.IMEI1 || "";
                                  const imei2 = item2.IMEI2 || "";
                                  return (
                                    <div>
                                      {[imei1, imei2]
                                        .filter(Boolean)
                                        .join(",")}
                                    </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>
                </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;