import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import QrImage from '../../../../Images/QRcode.png';
import {
  extractLastNumber,
  extractLastNumberOrderId,
} from '../../../../Services/Others';
import {
  GlobalprintSlNo,
  GlobalprintItem,
  GlobalprintMRP,
  GlobalprintDiscount,
  GlobalprintQuantity,
  GlobalprintRate,
  GlobalprintAmount,
  GlobalprintHsnCode,
  GlobalprintQrcodet,
  GlobalPritdummyData,
  changeReprintDataFound,
  GloabalFieldDetails,
  GlobalprintSignature,
  GlobalprinttermsAndConditions,
  GlobalSignatureImage,
  Globalnotes,
  GlobalthemeFormat,
  GlobalBillName,
  GlobalSelectedPrintHeaderColor,
  GlobalSelectedPrintHeaderFontColor,
  GlobalSelectedTableHeaderColor,
  GlobalSelectedTableHeaderFontColor,
  GlobalSelectedTableBodyColor,
  GlobalSelectedTableBodyFontColor,
  GlobalRowType,
  GlobalSelectedFooterColor,
  GlobalSelectedFooterFontColor,
} from '../../../../Features/ThemeChange/ThemeChange';
import { GlobalUpiIDprint } from '../../../../Features/BookingScreen/BookingData/BookingData';
import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle8.scss';
import QRCode from 'react-qr-code';
import signature from '../../../../Images/signatureimage.jpg';
import { ApplicationPreferences } from '../../../../Features/BrachLogin/BranchLogin';
import { isMobile } from 'react-device-detect';

const DCPrintstyle8 = ({
  BranchName,
  BranchDetails,
  BranchAddress,
  BranchCity,
  BranchZip,
  Date1,
  table2Data,
  PaymentStatus,
  PrintGreeting,
  printDatas,
  DCPrintTemplateDtl,
}) => {
  const formatDate = (dateString = '') => {
    const date = new Date(dateString);
    const day = date.getDate().toString().padStart(2, '0');
    const months = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];
    const month = months[date.getMonth()];
    const year = date.getFullYear();
    return day && month && year ? `${day}-${month}-${year}` : '-';
  };
  const dispatch = useDispatch();
  let FieldDetails = DCPrintTemplateDtl?.FieldDetails?.reduce((acc, item) => {
    acc[item.ConfigName] = true;
    return acc;
  }, {});
  const SLNO = FieldDetails?.['Sl.No'];
  const Item = FieldDetails?.['Item'];
  const Discount = FieldDetails?.['Discount'];
  const Quantity = FieldDetails?.['Quantity'];
  const GlobalSlNo = useSelector(GlobalprintSlNo);
  const GlobalItem = useSelector(GlobalprintItem);
  const GlobalDiscount = useSelector(GlobalprintDiscount);
  const GlobalQuantity = useSelector(GlobalprintQuantity);
  const GlobaldummyData = useSelector(GlobalPritdummyData);
  const GlobalSignature = useSelector(GlobalprintSignature);
  const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
  const GlobalSignatureImages = useSelector(GlobalSignatureImage);
  const GlobalIsnotes = useSelector(Globalnotes);

  console.log(GlobalDiscount, Discount, 'Discount');

  let TermsAndConditions = DCPrintTemplateDtl?.TermsandConditions;
  let SignatureImg = DCPrintTemplateDtl?.Signature;
  let Notestext = DCPrintTemplateDtl?.Notes;
  let BillName = DCPrintTemplateDtl?.PrintHdrName;
  let FormatTheme = DCPrintTemplateDtl?.PrintType == 'S' ? true : false;
  let PageSize = DCPrintTemplateDtl?.PageSize;
  const Signature = FieldDetails?.['signature'];
  const TermsnAdCondition = FieldDetails?.['terms&conditions'];

  const keysLength = Object.keys(table2Data ?? {}).length;
  if (keysLength > 0) {
    dispatch(changeReprintDataFound(true));
  }

  const productsData = table2Data?.productDetails || [];
  const offers = table2Data?.OrderOfferDetails || [];

  let TotalOfferAmount = 0;

  // 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 products = [
    {
      ProdName: 'ITEM 1',
      Rate: 88.0,
      SalesQty: 2,
      MRP: 100,
      TotalAmt: 176,
      discount: 0,
      HSN: '01',
      Size: 250,
      UomName: 'g',
    },
    {
      ProdName: 'ITEM 2',
      Rate: 300.0,
      SalesQty: 1,
      MRP: 350,
      TotalAmt: 300,
      discount: 0,
      HSN: '02',
      Size: 250,
      UomName: 'g',
    },
    {
      ProdName: 'ITEM 3',
      Rate: 200.0,
      SalesQty: 1,
      MRP: 250,
      TotalAmt: 200,
      discount: 0,
      HSN: '03',
      Size: 250,
      UomName: 'g',
    },
    {
      ProdName: 'ITEM 4',
      Rate: 30.0,
      SalesQty: 1,
      MRP: 50,
      TotalAmt: 30,
      discount: 0,
      HSN: '04',
      Size: 250,
      UomName: 'g',
    },
    {
      ProdName: 'ITEM 5',
      Rate: 30.0,
      SalesQty: 1,
      MRP: 50,
      TotalAmt: 30,
      discount: 0,
      HSN: '05',
      Size: 250,
      UomName: 'g',
    },
    {
      ProdName: 'ITEM 6',
      Rate: 130.0,
      SalesQty: 1,
      MRP: 150,
      TotalAmt: 130,
      discount: 0,
      HSN: '06',
      Size: 250,
      UomName: 'g',
    },
    {
      ProdName: 'ITEM 7',
      Rate: 230.0,
      SalesQty: 1,
      MRP: 250,
      TotalAmt: 230,
      discount: 0,
      HSN: '08',
      Size: 250,
      UomName: 'g',
    },
  ];

  console.log(printDatas, 'printDatasjk');
  const chunkSize = PageSize == 'A5' ? 10 : 16;
  let dataSource = table2Data?.ProductDetails || [];

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

  //
  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
  const SelectedHeaderFontColor = useSelector(
    GlobalSelectedPrintHeaderFontColor
  );
  const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
  const SelectedTableHeaderFontColor = useSelector(
    GlobalSelectedTableHeaderFontColor
  );
  const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
  const SelectedTableBodyFontColor = useSelector(
    GlobalSelectedTableBodyFontColor
  );
  const SelectedRowType = useSelector(GlobalRowType);
  const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
  const SelectedTableFooterFontColor = useSelector(
    GlobalSelectedFooterFontColor
  );

  //
  let printColors = DCPrintTemplateDtl?.PrintColors;
  const headerColor = printColors?.find((obj) => obj.headerColor)?.headerColor;
  const tableHeaderColor = printColors?.find(
    (obj) => obj.tableHeaderColor
  )?.tableHeaderColor;
  const tableBodyColor = printColors?.find(
    (obj) => obj.tableBodyColor
  )?.tableBodyColor;
  const footerColor = printColors?.find((obj) => obj.footerColor)?.footerColor;

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

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

    color: GlobaldummyData
      ? SelectedTableHeaderFontColor
      : tableHeaderColor?.font,
  };

  const tableBodyStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedTableBodyColor
      : tableBodyColor?.background,
    color: GlobaldummyData ? SelectedTableBodyFontColor : tableBodyColor?.font,
  };

  const rowtypeStyle = GlobaldummyData
    ? SelectedRowType
    : tableBodyColor?.rowType;

  const footerColorStyle = {
    backgroundColor: GlobaldummyData
      ? SelectedTableFooterColor
      : footerColor?.background,
    color: GlobaldummyData ? SelectedTableFooterFontColor : footerColor?.font,
  };

  return (
    <>
      <div
        id={`DCPrintStyle8`}
        className="PrintStyle8MasterDiv"
        style={{
          fontFamily: "'Courier New', Courier, monospace",
          position: 'relative',
          width: '100%',
          minHeight: isMobile ? (PageSize == 'A5' ? '210mm' : '297mm') : 'auto',
        }}
      >
        {paginatedChunks.map((dataChunk, chunkIndex) => (
          <div
            className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`}
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent:
                chunkIndex === paginatedChunks.length - 1 &&
                !shouldFooterBeOnNewPage &&
                FormatTheme
                  ? 'space-between'
                  : '',
              height: FormatTheme ? (PageSize == 'A5' ? '170mm' : '257mm') : '',
            }}
            key={chunkIndex}
          >
            <div
              style={{
                fontSize: '14px',
                margin: '2px 0 0 0',
                padding: 0,
                fontWeight: 600,
              }}
            >
              {GlobaldummyData
                ? 'Cash Bill'
                : BillName
                  ? BillName
                  : 'Delivery Challan'}{' '}
            </div>
            <div
              className="header"
              style={{
                position: isMobile
                  ? GlobaldummyData
                    ? 'absolute'
                    : 'fixed'
                  : '',
                top: 0,
                width: '100%',
              }}
            >
              <div className="PrintStyle8-fistDiv" style={{ ...headerStyle }}>
                {/* <h3>{table2Data?.BrName}</h3> */}
                <div
                  style={{
                    fontSize: 'clamp(1.25rem, 2.5vw, 1.75rem)',
                    fontWeight: '600',
                  }}
                >
                  {' '}
                  {GlobaldummyData ? 'XYZ Shop' : BranchName}
                </div>
                <div
                  className="PrintStyle8-BrAddress"
                  style={{ fontSize: 'clamp(0.63rem, 2.5vw, 1.2rem)' }}
                >
                  {GlobaldummyData
                    ? 'BranchAddress, Town- 635XXX City - State'
                    : (BranchAddress || '') +
                      (BranchCity
                        ? (BranchAddress && BranchCity ? '-' : '') + BranchCity
                        : '') +
                      (BranchZip
                        ? (BranchCity && BranchZip ? '-' : '') + BranchZip
                        : '')}
                </div>
                {BranchDetails?.BrMobile && (
                  <div
                    className="PrintStyle8-BrAddress"
                    style={{ fontSize: 'clamp(0.63rem, 2.5vw, 1.2rem)' }}
                  >
                    {' '}
                    Mobile : +91{' '}
                    {GlobaldummyData ? '986XXXXXXX' : BranchDetails?.BrMobile}
                  </div>
                )}
              </div>
              {BranchDetails?.BrGSTIN && (
                <div>
                  GST NO :
                  {GlobaldummyData
                    ? '334bhbsagbysfgbfgbu'
                    : BranchDetails?.BrGSTIN}
                  , CIN :u00045hhsgbubufsdug
                </div>
              )}
              {/* {BranchDetails?.BrMobile &&
                                <div style={{ fontWeight: "600" }}>
                                    {" "}
                                    Mobile : +91 {GlobaldummyData ? "986XXXXXXX" : BranchDetails?.BrMobile}
                                </div>
                            } */}
              {table2Data?.ToBranchDtl?.length > 0 && (
                <>
                  <hr className="PrintStyle1-print-dottline" />
                  <div style={{ marginBottom: '4px', marginTop: '10px' }}>
                    <div style={{ fontSize: '14px' }}>
                      <strong>Delivery To :</strong>
                    </div>
                    <div
                      className="Quo-Print-Company"
                      style={{ fontSize: '13px' }}
                    >
                      <div className="Quo-Print-Cname">
                        {table2Data?.ToBranchDtl?.[0]?.BranchName}
                      </div>
                      {table2Data?.ToBranchDtl?.[0]?.Address1 && (
                        <div className="Quo-Print-address">
                          {table2Data?.ToBranchDtl?.[0]?.Address1}
                        </div>
                      )}
                      {(table2Data?.ToBranchDtl?.[0]?.City ||
                        table2Data?.ToBranchDtl?.[0]?.Dist ||
                        table2Data?.ToBranchDtl?.[0]?.Zip) && (
                        <div className="Quo-Print-address">{`${table2Data?.ToBranchDtl?.[0]?.City}, ${table2Data?.ToBranchDtl?.[0]?.Dist} - ${table2Data?.ToBranchDtl?.[0]?.Zip}`}</div>
                      )}
                      {table2Data?.ToBranchDtl?.[0]?.BrGSTIN && (
                        <div className="Quo-Print-address">
                          {table2Data?.ToBranchDtl?.[0]?.BrGSTIN}
                        </div>
                      )}
                    </div>
                  </div>
                  <hr className="PrintStyle1-print-dottline" />
                </>
              )}

              {table2Data?.dispatchPrint !== true && (
                <div className="PrintStyle8-SecondDiv">
                  <div style={{ fontWeight: '600', fontSize: '14px' }}>
                    Delivery ChallanNo:
                    {GlobaldummyData ? '121' : table2Data?.DCNo}
                  </div>
                </div>
              )}
              {table2Data?.dispatchPrint === true && (
                <div
                  style={{
                    display: 'flex',
                    width: '100%',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    marginTop: '4px',
                    gap: '10px',
                  }}
                >
                  <div className="PrintStyle8-SecondDiv">
                    <div style={{ fontWeight: '600', fontSize: '14px' }}>
                      Dispatch No #:{table2Data?.DispatchId}
                    </div>
                    <div style={{ fontSize: '12px' }}>
                      Dispatch Date:{formatDate(table2Data?.CreatedDate)}
                    </div>
                  </div>
                  <div className="PrintStyle8-SecondDiv">
                    <div style={{ fontWeight: '600', fontSize: '14px' }}>
                      Ref No #:{table2Data?.RequestId}
                    </div>
                    <div style={{ fontSize: '12px' }}>
                      Requested Date:{formatDate(table2Data?.RequestedDate)}
                    </div>
                  </div>
                </div>
              )}
              <hr className="PrintStyle1-print-dottline" />
              {(table2Data?.CustMobile ||
                table2Data?.CustName ||
                table2Data?.VehicleNo ||
                table2Data?.TransporterId ||
                table2Data?.TransporterName) && (
                <>
                  <div className="PrintStyle1-print-ordr-dtls">
                    {(table2Data?.CustMobile || table2Data?.CustName) && (
                      <div style={{ lineheight: '50px' }}>
                        <div style={{ fontSize: '14px', fontWeight: 600 }}>
                          Delivery Details
                        </div>
                        {table2Data?.CustMobile && (
                          <div style={{ fontSize: '14px', fontWeight: 600 }}>
                            {' '}
                            Mobile NO :{table2Data?.CustMobile}{' '}
                          </div>
                        )}
                        {table2Data?.CustName && (
                          <div style={{ fontSize: '14px', fontWeight: 600 }}>
                            {' '}
                            Name:{table2Data?.CustName}
                          </div>
                        )}
                      </div>
                    )}
                    {(table2Data?.VehicleNo ||
                      table2Data?.TransporterId ||
                      table2Data?.TransporterName) && (
                      <div>
                        <div style={{ fontSize: '14px', fontWeight: 600 }}>
                          Vehicle Details
                        </div>
                        {table2Data?.VehicleNo && (
                          <div style={{ fontSize: '14px', fontWeight: 600 }}>
                            {' '}
                            Vehicle No :{table2Data?.VehicleNo}
                          </div>
                        )}
                        {table2Data?.TransporterId && (
                          <div style={{ fontSize: '14px', fontWeight: 600 }}>
                            {' '}
                            Transporter Id :{table2Data?.TransporterId}
                          </div>
                        )}
                        {table2Data?.TransporterName && (
                          <div style={{ fontSize: '14px', fontWeight: 600 }}>
                            {' '}
                            Transporter Name :{table2Data?.TransporterName}
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                  <hr className="PrintStyle1-print-dottline" />
                </>
              )}
            </div>

            <div
              style={{ marginTop: GlobaldummyData ? '9rem' : '0rem' }}
              className="print-body"
            >
              {(table2Data?.ProductDetails?.length > 0 || GlobaldummyData) && (
                <>
                  <div className="PrintStyle8-print-tableMaster">
                    <table className="PrintStyle8-print-table">
                      <thead>
                        <tr>
                          {GlobaldummyData
                            ? GlobalSlNo && (
                                <th
                                  style={{
                                    width: '10px',
                                    textAlign: 'center',
                                    ...tableHeaderStyle,
                                  }}
                                >
                                  S.No
                                </th>
                              )
                            : SLNO && (
                                <th
                                  style={{
                                    width: '10px',
                                    textAlign: 'center',
                                    ...tableHeaderStyle,
                                  }}
                                >
                                  S.No
                                </th>
                              )}
                          {GlobaldummyData
                            ? GlobalItem && (
                                <th style={{ ...tableHeaderStyle }}>Item</th>
                              )
                            : Item && (
                                <th
                                  style={{
                                    textAlign: 'center',
                                    ...tableHeaderStyle,
                                  }}
                                >
                                  Item
                                </th>
                              )}
                          {GlobaldummyData
                            ? GlobalQuantity && (
                                <th
                                  style={{
                                    width: '10px',
                                    textAlign: 'right',
                                    ...tableHeaderStyle,
                                  }}
                                >
                                  Qty
                                </th>
                              )
                            : Quantity && (
                                <th
                                  style={{
                                    width: '10px',
                                    textAlign: 'right',
                                    ...tableHeaderStyle,
                                  }}
                                >
                                  Qty
                                </th>
                              )}
                        </tr>
                      </thead>
                      <tbody>
                        {dataChunk?.map((item, index) => {
                          return (
                            <tr
                              key={index}
                              style={{
                                ...(index % 2 !== 1 && rowtypeStyle === 'even'
                                  ? {
                                      ...tableBodyStyle,
                                    }
                                  : index % 2 === 1 && rowtypeStyle === 'odd'
                                    ? {
                                        ...tableBodyStyle,
                                      }
                                    : {}),
                              }}
                            >
                              {GlobaldummyData
                                ? GlobalSlNo && (
                                    <td style={{ textAlign: 'center' }}>
                                      {chunkIndex * chunkSize + index + 1}
                                    </td>
                                  )
                                : SLNO && (
                                    <td style={{ textAlign: 'center' }}>
                                      {chunkIndex * chunkSize + index + 1}
                                    </td>
                                  )}
                              {GlobaldummyData
                                ? GlobalItem && <td>{item?.ProdName}</td>
                                : Item && (
                                    <td
                                      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'}
                                        )
                                        {item?.RequestVariantName
                                          ? `${item?.RequestVariantName}`
                                          : ''}
                                      </div>
                                    </td>
                                  )}
                              {/* {GlobaldummyData ? GlobalHsnCode && <td>{item?.HSN}</td> : HsnCode && <td>{item?.HSN}</td>} */}
                              {/* {GlobaldummyData ? GlobalMRP && <td style={{ textAlign: 'right' }}>{item?.MRP}</td> : MRP && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Rate : item?.MRP}</td>}
                                                            {GlobaldummyData ? GlobalRate && <td style={{ textAlign: 'right' }}>{item?.Rate}</td> : Rate && <td style={{ textAlign: 'right' }}>{item?.Rate}</td>}
                                                            {GlobaldummyData ? GlobalDiscount && <td style={{ textAlign: 'right' }}>{item?.discount}</td> : Discount && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>} */}
                              {GlobaldummyData
                                ? GlobalQuantity && (
                                    <td style={{ textAlign: 'right' }}>
                                      {item?.SalesQty}
                                    </td>
                                  )
                                : Quantity && (
                                    <td style={{ textAlign: 'right' }}>
                                      {item?.Qty || item?.DispatchedQty}
                                    </td>
                                  )}
                              {/* {GlobaldummyData ? GlobalAmount && <td style={{ width: "10px", textAlign: 'right' }}>{item?.TotalAmt}</td> : Amount && <td style={{ width: "10px", textAlign: 'right' }}>{item?.Type != "C" ? item?.TotalAmt - item?.OfferAmt || 0 : item?.TotalAmt - item?.OfferValue || 0}</td>} */}
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                </>
              )}
            </div>

            {chunkIndex === paginatedChunks.length - 1 && (
              <>
                <div
                  className="page-footerA4Style11"
                  style={{
                    marginTop: 'auto',
                    pageBreakBefore: 'avoid',
                    pageBreakInside: 'avoid',
                    minHeight: 'auto',
                  }}
                >
                  {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' }}>{Notestext}</p>

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

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

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

                {PrintGreeting?.SettingValue === 'Y' && (
                  <div className="PrintStyle8-FourthSpan">
                    Thank You Visit Again
                  </div>
                )}
              </>
            )}
          </div>
        ))}
      </div>
    </>
  );
};

export default DCPrintstyle8;