import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, useLocation } from 'react-router-dom';
import {
  Space,
  Form,
  Tooltip,
  Pagination,
  Table,
  Tour,
  Popconfirm,
  Radio,
  Button,
  Empty,
  message,
} from 'antd';
import { debounce } from 'lodash';
import {
  EditFilled,
  DeleteFilled,
  PlusOutlined,
  ReloadOutlined,
  PrinterFilled,
  CloseOutlined,
  ArrowRightOutlined,
  CheckSquareOutlined,
} from '@ant-design/icons';
import { BiAddToQueue } from 'react-icons/bi';
import { FiUploadCloud, FiInfo, FiEyeOff } from 'react-icons/fi';
import { BsCameraFill } from 'react-icons/bs';

import { MdDeleteForever } from 'react-icons/md';
import QRCode from 'qrcode';
import { InputField } from '../../Components/Forms/InputField.jsx';
import { DropDowns } from '../../Components/Forms/DropDown';
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
import { Search } from '../../Components/Forms/Search';
import Buttons from '../../Components/Forms/Buttons';
import { Messages } from '../../Components/Notifications/Messages';
import FormHeader from '../PageComponents/FormHeader.jsx';
import {
  changeBreadCrumb,
  getEmpAccess,
} from '../../Features/AppPage/CenterPage.js';
import {
  getProductDataPageNo,
  deleteProductData,
  getAllsubcatdata,
  getAllbrandcatdata,
  bulkpostdata,
  uomDataSelector,
  prodCatDataSelector,
  taxSelector,
  supplierSelector,
  getProdCatData,
  getUomData,
  getSupplierData,
  getAdmin,
  Deletebulkdatas,
  getProductDataSearch,
  onlineimages,
  putProductData,
  getAllprodIds,
  updateProductImage,
  PostPedalOCR,

  // getUserGuideLines,
  // postUserGuideLines
} from '../../Features/ProductPage/ProductPage.js';
import {
  getSession,
  printDiv,
  roundToDecimal,
  validateSafeInput,
} from '../../Services/Others';
import {
  emptyExcelData,
  excelDataSelector,
} from '../../Features/ExcelUploadPage/ExcelUploadPage.js';
import moment from 'moment';
import ProductExcel from '../Product/ExcelUpload.jsx';
import TertiaryButton from '../../Components/Forms/tertiaryButton.jsx';
import { useAuth } from '../../AuthContext.jsx';
import { MdOutlineAutoDelete } from 'react-icons/md';
import '../../Styles/OverAllStyle/OverAllStyle.scss';
import {
  getBarcodeSessionsIDs,
  getBarcodeTemplate,
} from '../../Features/Barcode/Barcode.js';
import { style, getPageStyle } from './Printstyles.js';
import JsBarcode from 'jsbarcode';
import { uploadImage } from '../../Features/upload/upload.js';
import CropUpload from '../../Components/Forms/CropUpload.jsx';
import { getPreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js';
import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin.js';
import { FaRegEye } from 'react-icons/fa';
import { HiOutlineRocketLaunch } from 'react-icons/hi2';
import GooglePayUPIButton from '../UPIPayButton/UpiPay.jsx';
import ScannedProductTable from '../../Components/PedalOCR/scannedProductTable.jsx';
import MultiCameraCropOCR from '../../Components/PedalOCR/MultiCameraCropOCR.jsx';
import OCRLoader from '../../Components/PedalOCR/OCRLoader.jsx';
import { GiHorizontalFlip, GiVerticalFlip } from 'react-icons/gi';
import { FaPlus } from "react-icons/fa6";
import { Tables } from '../../../ownLib/my-ui-lib.js';

const colorText = 'Color : Red';
const ProductList = () => {
  const { SadminuserAccess } = useAuth();
  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Add Product'
  );
  const formRef = useRef();
  // const ref1 = useRef(null);
  const navigateTo = useNavigate();
  const dispatch = useDispatch();
  const location = useLocation();
  const barCodeImage =
    'https://cdn.pixabay.com/photo/2014/04/02/16/19/barcode-306926_1280.png';
  const qrCodeImage =
    'https://cdn.pixabay.com/photo/2015/03/21/09/34/qr-683354_640.png';
  const previewText = 'Barcode Preview';
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');
  const UserType = getSession('UserType');

  const [AllProdIds, setAllProdIds] = useState([]);
  const [cachedData, setCachedData] = useState({});
  const [CachedDataSearch, setCachedDataSearch] = useState({});
  const [searchedText, setSearchedText] = useState('');
  const [SearchProdData, setSearchProdData] = useState([]);
  const [productData, setproductData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [activeTab, setActiveTab] = useState('stock');
  let SalesStatus = productData?.[0]?.SalesStatus;
  const UomData = useSelector(uomDataSelector);
  const ProdCatData = useSelector(prodCatDataSelector);
  const SupplierData = useSelector(supplierSelector);
  const TaxData = useSelector(taxSelector);
  const excelDataValues = useSelector(excelDataSelector);
  const appPreferences = useSelector(ApplicationPreferences);

  const UomTypePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Product Uom'
  )?.PreferenceCatDetails;
  const isCheckSportsApp = appPreferences
    ?.find((preference) => preference?.PreferredCatName === 'Common Module')
    ?.PreferenceCatDetails?.some(
      (e) =>
        e?.PreferredSubCatName === 'SportsApp' && e?.PreferredStatus === 'Y'
    );
  const UomPreference = UomData?.filter((item) =>
    UomTypePreference?.some?.(
      (e) =>
        e?.PreferredSubCatName?.toLowerCase() ==
        item?.ConfigName?.toLowerCase() && e?.PreferredStatus == 'Y'
    )
  );

  const productFieldPreferences = appPreferences?.find(
    (preference) =>
      preference?.PreferredCatName?.toLowerCase() === 'product form fields'
  )?.PreferenceCatDetails;

  const filteredFields = productFieldPreferences?.filter(
    (field) => field?.PreferredStatus === 'Y'
  );
  const brandColumn = filteredFields?.find(
    (field) => field?.PreferredSubCatName === 'Brand'
  );
  const qrCodeColumn = filteredFields?.find(
    (field) => field?.PreferredSubCatName === 'Auto Generate QRCode'
  );
  const subCategory = filteredFields?.find(
    (field) => field?.PreferredSubCatName === 'Sub Category'
  );

  //local states
  const [QrandbarcodeDatas, setQrandbarcodeDatas] = useState([]);
  const [uploadImageModal, setUploadImageModal] = useState(false);
  const [MultiCode, setMultiCode] = useState(false);
  const [selectedRecords, setSelectedRecords] = useState([]);
  const [imageModalRowIndex, setImageModalRowIndex] = useState(null);
  const [rowRecord, setRowRecord] = useState(null);
  const [sortedInfo, setSortedInfo] = useState({});
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [open, setOpen] = useState(false);
  const [breadModalOpen, setBreadModalOpen] = useState(false);
  const [breadData, setBreadData] = useState([]);
  const [openPaddleOCR, setOpenPaddleOCR] = useState(false);
  const [uploadedFile, setUploadedFile] = useState(null);
  const [uploadedFiles, setUploadedFiles] = useState([]);
  const [showTips, setShowTips] = useState(false);
  const [isOCRProcessing, setIsOCRProcessing] = useState({
    Length: 0,
    Loader: false,
  });
  const [isDelete, setisDelete] = useState(false);
  const [allowDecimal, setAllowDecimal] = useState(false);
  const [inputError, setInputError] = useState('');
  const [openExcel, setOpenExcel] = useState(false);
  const [empData, setEmpData] = useState();
  const [dropdownValue, setDropdownValue] = useState();
  const [printProductName, setPrintProductName] = useState(false);
  const [copies, setCopies] = useState();
  const [proName, setProName] = useState();
  const [nickName, setNickName] = useState(null);
  const [ProdId, setProdId] = useState();
  const [detail, setDetail] = useState();
  const [size, setSize] = useState();
  const [qrCodeUrl, setQrCodeUrl] = useState('');
  const [page, setpage] = useState(1);
  const [subCatData, setSubCatData] = useState();
  const [allBrandData, setallBrandData] = useState();
  const [Exceldatasubmit, setExceldatasubmit] = useState(null);
  const [coresdata, setCoresdata] = useState([]);
  const [barcodeTemplateDetails, setBarcodeTemplateDetails] = useState([]);
  const [PopUp, setPopUp] = useState(false);
  const [fromPage, setFromPage] = useState(1);
  const [Bulkpost, setBulkpost] = useState(false);
  const [templateOptions, setTemplateOptions] = useState({
    mrp: false,
    barcode: false,
    color: false,
    eDate: false,
    mDate: false,
    sellingPrice: false,
    productName: false,
    value: '',
    secondValue: '',
    qrcode: false,
    codeType: '',
  });
  const secondValueStyle = {
    flexDirection: templateOptions.secondValue === 'R' ? 'row' : 'row-reverse',
  };
  const valueStyleRow = {
    flexDirection: templateOptions.value === 'R' ? 'row' : 'row-reverse',
  };
  const valueStyleColumn = {
    flexDirection: templateOptions.value === 'T' ? 'column' : 'column-reverse',
  };

  const [base64Image, setBase64Image] = useState(null);
  const [barcodeBase64Image, setBarcodeBase64Image] = useState(null);
  const [deleteProductPages, setDeleteProductPages] = useState([]);
  const [paginatedDeleteData, setPaginatedDeleteData] = useState([]);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const countOfProduct =
    SearchProdData?.length > 0
      ? SearchProdData?.length
      : deleteProductPages?.length > 0
        ? selectedRowKeys?.length
        : productData?.[0]?.TotalCount;

  const [addnewAccess, setaddnewAccess] = useState(true);
  const [imageopen, setimageOpen] = useState(false);
  const [imagedata, setimagedata] = useState();
  const [selectedImage, setSelectedImage] = useState(null);
  const [onlineImage, setOnlineImage] = useState(null);
  const [imageUrl, setImageUrl] = useState('');
  const [recordIndex, setRecordIndex] = useState(null);


  const [rangeFrom, setRangeFrom] = useState('');
  const [rangeTo, setRangeTo] = useState('');
  const [deleteInput, setDeleteInput] = useState(null);
  const [stockWiseQrcode, setstockWiseQrcode] = useState(false);
  const [productWiseQrcode, setProductWiseQrcode] = useState(false);
  const lastRangeIdsRef = useRef([]);


  const subDirectory = import.meta.env.ENV_BASE_URL;
  // const [openTour, setOpenTour] = useState(false);

  // const steps = [
  //   {
  //     title: 'Click here to add a new product',
  //     description: 'This button allows you to add a new product to the inventory.',
  //     target: () => ref1.current,
  //     placement: 'top',
  //   },
  // ];

  const items = [
    {
      name: 'Home',
      link: `${subDirectory}app-page/home`,
    },

    {
      name: isCheckSportsApp ? 'Add Slot' : 'Product',
      link: `${subDirectory}setting/product-master`,
    },
  ];
  // const stockAvailableCount = selectedRecords?.filter(
  //   item => item?.StockAvailable === "Y"
  // ).length
  const Qrcode = (record) => {
    setProName(record?.ProdName);
    setProdId(record?.QRCode);
    setDetail(record);
    setSize(record.Size + record.UomName);
    setOpen(true);
  };
  const handlePageChange = (current) => {
    if (deleteProductPages?.length > 0) {
      setproductData(paginatedDeleteData[current]);
    }
    setpage(current);
    setCurrentPage(current);
  };

  const pagewisefn = () => {
    setPopUp(true);
  };

  useEffect(() => {
    if (deleteProductPages?.length > 0) {
      getForDeleteProduct(deleteProductPages);
    } else if (deleteProductPages?.length === 0) {
      getProdfun();
      return;
    }
  }, [deleteProductPages]);

  useEffect(() => {
    if (coresdata?.length > 0 && open) {
      CoresOnChange(coresdata?.[0].ConfigName);
    }
  }, [open]);

  useEffect(() => {
    if (!AllProdIds?.length) return;
    const cleaned = deleteInput?.replace(/\s+/g, '');
    const parts = cleaned?.split(',') || [];
    let newRangeIds = [];
    let globalIndex = [];
    for (const part of parts) {
      if (/^\d+$/.test(part)) {
        // Single index
        const index = parseInt(part, 10);
        if (index > 0 && index <= AllProdIds?.length) {
          newRangeIds.push(AllProdIds[index - 1]?.ProdId);
          globalIndex.push(Math.ceil(index / 10));
        }
      } else if (/^\d+-\d+$/.test(part)) {
        // Range
        const [start, end] = part?.split('-').map(Number);
        if (start > 0 && end >= start && end <= AllProdIds?.length) {
          const pages = getPagesToCall(start, end);
          pages?.forEach((page) => globalIndex.push(page));
          for (let i = start; i <= end; i++) {
            newRangeIds?.push(AllProdIds[i - 1]?.ProdId);
          }
        }
      }
    }

    const idsToRemove = lastRangeIdsRef.current.filter(
      (id) => !newRangeIds?.includes(id)
    );

    const idsToAdd = newRangeIds.filter(
      (id) => !lastRangeIdsRef?.current?.includes(id)
    );
    setCurrentPage(1);
    setpage(1);
    const withRemoved = selectedRowKeys?.filter(
      (id) => !idsToRemove?.includes(id)
    );
    const withAdded = [...withRemoved, ...idsToAdd];
    const newSelectedRowKeys = Array.from(new Set(withAdded));
    setSelectedRowKeys(newSelectedRowKeys);
    setDeleteProductPages(Array.from(new Set(globalIndex)));
    lastRangeIdsRef.current = newRangeIds;
  }, [deleteInput, AllProdIds]);

  function getPagesToCall(from, to, itemsPerPage = 10) {
    const startPage = Math.ceil(from / itemsPerPage);
    const endPage = Math.ceil(to / itemsPerPage);

    const pages = [];
    for (let i = startPage; i <= endPage; i++) {
      pages.push(i);
    }

    return pages;
  }

  const validateDeleteInput = (input, totalCount) => {
    if (!input?.trim()) return { isValid: true, error: '' };

    const cleaned = input.replace(/\s+/g, '');
    const parts = cleaned.split(',');

    const rangeRegex = /^\d+(-\d+)?$/;

    for (const part of parts) {
      if (!rangeRegex.test(part)) {
        return {
          isValid: false,
          error: 'Invalid range, use e.g. 1-5, 8, 9-10',
        };
      }

      if (part.includes('-')) {
        const [start, end] = part.split('-').map(Number);
        if (
          isNaN(start) ||
          isNaN(end) ||
          start <= 0 ||
          end <= 0 ||
          start > end ||
          start > totalCount ||
          end > totalCount
        ) {
          return {
            isValid: false,
            error: `Out of bounds product reference, limit is ${totalCount}`,
          };
        }
      } else {
        const val = parseInt(part, 10);
        if (
          isNaN(val) ||
          val <= 0 ||
          !Number.isInteger(val) ||
          val > totalCount
        ) {
          return {
            isValid: false,
            error: `Out of bounds product reference, limit is ${totalCount}`,
          };
        }
      }
    }

    return { isValid: true, error: '' };
  };

  // const columns = useMemo(
  //   () => [
  //     {
  //       title: 'Sl.No',
  //       key: 'sno',
  //       align: 'center',
  //       width: '60px',
  //       render: (text, object, index) => (
  //         <a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
  //       ),
  //     },
  //     {
  //       title: 'Category',
  //       dataIndex: 'CategoryName',
  //       key: 'CategoryName',
  //       width: '100px',
  //       render: (text) => <a style={{ color: 'black' }}>{text}</a>,
  //       columnKey: 'CategoryName',
  //       sorter: (a, b) => a?.CategoryName?.localeCompare(b?.CategoryName),
  //       sortOrder:
  //         sortedInfo.columnKey === 'CategoryName' ? sortedInfo.order : null,
  //       ellipsis: true,
  //     },

  //     {
  //       title: isCheckSportsApp ? 'Name' : 'Product',
  //       dataIndex: 'ProdName',
  //       key: 'ProdName',
  //       width: '100px',
  //       render: (text) => <a style={{ color: 'black' }}>{text}</a>,
  //       sorter: (a, b) => a?.ProdName?.localeCompare(b?.ProdName),
  //       columnKey: 'ProdName',
  //       sortOrder:
  //         sortedInfo.columnKey === 'ProdName' ? sortedInfo.order : null,
  //       ellipsis: true,
  //     },
  //     brandColumn && subCategory
  //       ? {
  //           title: 'Brand',
  //           dataIndex: 'BrandName',
  //           key: 'BrandName',
  //           columnKey: 'BrandName',
  //           width: '100px',
  //           render: (text) => <a style={{ color: 'black' }}>{text}</a>,
  //           sorter: (a, b) => a?.BrandName?.localeCompare(b?.BrandName),
  //           sortOrder:
  //             sortedInfo.columnKey === 'BrandName' ? sortedInfo.order : null,
  //           ellipsis: true,
  //         }
  //       :null,

  //     {
  //       title: 'Qty',
  //       dataIndex: 'Size',
  //       key: 'Size',
  //       width: '100px',
  //       align: 'center',
  //       render: (text, record) => (
  //         <a
  //           style={{ color: 'black' }}
  //         >{`${record?.Size}${record?.UomName}`}</a>
  //       ),
  //       ellipsis: true,
  //     },
  //     // {
  //     //   title: 'Unit',
  //     //   dataIndex: 'UomName',
  //     //   key: 'UomName',
  //     //   width: '100px',
  //     //   render: (text) => <a style={{ color: 'black' }}>{text}</a>,
  //     //   ellipsis: true,
  //     // },

  //     {
  //       title: 'Sell Price',
  //       dataIndex: 'SellPrice',
  //       key: 'SellPrice',
  //       width: '100px',
  //       align: 'right',
  //       render: (text) => (
  //         <a style={{ color: 'black' }}>{roundToDecimal(text, allowDecimal)}</a>
  //       ),
  //       ellipsis: true,
  //     },
  //     // {
  //     //   title: "Stock Available",
  //     //   dataIndex: "StockAvailable",
  //     //   key: "StockAvailable",
  //     //   width: "100px",
  //     //   render: (text) => <a style={{ color: "black" }}>{text}</a>,
  //     //   ellipsis: true,
  //     // },

  //     qrCodeColumn
  //       ? {
  //           title: 'QRCode',
  //           dataIndex: 'QRCode',
  //           key: 'QRCode',
  //           width: '100px',
  //           render: (text) => (
  //             <a style={{ color: 'black' }}>{text ? text : '-'}</a>
  //           ),
  //           ellipsis: true,
  //         }
  //       : {},

  //     qrCodeColumn
  //       ? {
  //           title: 'Print QRCode',
  //           key: 'Print',
  //           dataIndex: 'Print',
  //           width: '100px',
  //           render: (_, record, index) =>
  //             productData.length >= 1 ? (
  //               <Space size="middle">
  //                 {record?.QRCode ? (
  //                   <a>
  //                     <PrinterFilled
  //                       style={{ fontSize: '20px' }}
  //                       onClick={() => {
  //                         Qrcode(record);
  //                       }}
  //                     />
  //                   </a>
  //                 ) : (
  //                   '-'
  //                 )}
  //               </Space>
  //             ) : null,
  //         }
  //       : {},

  // {
  //   title: 'Action',
  //   key: 'Action',
  //   dataIndex: 'Action',
  //   width: '100px',
  //   render: (_, record, index) =>
  //     productData.length >= 1 ? (
  //       <Space size="middle">
  //         {record.ActiveStatus === 'A' ? (
  //           <a>
  //             <EditFilled
  //               style={{ color: '#1292EE' }}
  //               onClick={() =>
  //                 UserType === 'Super Admin' ||
  //                 (UserType === 'Super Admin User' &&
  //                   SAAccessCommonMaster?.UpdateAccess === 'Y') ||
  //                 (UserType === 'Employee' &&
  //                   empData?.UpdateAccess === 'Y') ||
  //                 UserType === 'Admin'
  //                   ? actionsFormatter(record, index)
  //                   : null
  //               }
  //             />
  //           </a>
  //         ) : (
  //           ''
  //         )}
  //         <a>
  //           {record.ActiveStatus === 'A' ? (
  //             <DeleteFilled
  //               style={{
  //                 color: '#FF4D4F',
  //               }}
  //               onClick={() =>
  //                 UserType === 'Super Admin' ||
  //                 (UserType === 'Super Admin User' &&
  //                   SAAccessCommonMaster?.DeleteAccess === 'Y') ||
  //                 (UserType === 'Employee' &&
  //                   empData?.DeleteAccess === 'Y') ||
  //                 UserType === 'Admin'
  //                   ? statusFormatter(record)
  //                   : null
  //               }
  //             />
  //           ) : (
  //             <ReloadOutlined
  //               style={{
  //                 color: '#52C41A',
  //               }}
  //               onClick={() =>
  //                 UserType === 'Super Admin' ||
  //                 (UserType === 'Super Admin User' &&
  //                   SAAccessCommonMaster?.DeleteAccess === 'Y') ||
  //                 (UserType === 'Employee' &&
  //                   empData?.DeleteAccess === 'Y') ||
  //                 UserType === 'Admin'
  //                   ? statusFormatter(record)
  //                   : null
  //               }
  //             />
  //           )}
  //         </a>
  //       </Space>
  //     ) : null,
  // },
  // {
  //   title: 'Image',
  //   key: 'ProdLogo',
  //   dataIndex: 'ProdLogo',
  //   width: '100px',
  //   align: 'center',
  //   render: (_, record, index) => (
  //     // <div className="productMasterImageUpload">
  //     <Tooltip title={record.ProdLogo ? 'View Image' : 'Upload Image'}>
  //       <div>
  //         <FaRegEye
  //           style={{ background: 'none', cursor: 'pointer' }}
  //           size={22}
  //           color={record.ProdLogo && '#1F9B3A'}
  //           onClick={() => {
  //             setRowRecord(record);
  //             setImageModalRowIndex(index);
  //             setUploadImageModal(true);
  //             setOnlineImage(null);
  //             setSelectedImage(null);
  //           }}
  //         />
  //       </div>
  //     </Tooltip>
  //   ),
  // },
  // {
  //   title: (
  //     <>
  //       <div
  //         style={{
  //           display: 'flex',
  //           alignItems: isDelete ? 'center' : 'flex-start',
  //           flexDirection: 'column',
  //           gap: '10px',
  //           justifyContent: 'center',
  //         }}
  //       >
  //         <Tooltip title="Bulk Delete" className="delete-bulk-icon">
  //           {isDelete ? (
  //             <>
  //               {/* <DeleteFilled
  //                 style={{
  //                   color: '#FF4D4F',
  //                   marginBottom: '1rem',
  //                 }}
  //                 onClick={(e) => {
  //                   setisDelete(false);
  //                   setSelectedRowKeys([]);
  //                   setRangeFrom('');
  //                   setRangeTo('');
  //                   e.stopPropagation();
  //                 }}
  //               /> */}
  //               <MdDeleteForever
  //                 style={{
  //                   color: '#333',
  //                   marginLeft: '0.5rem',
  //                   fontSize: '1.2rem',
  //                   cursor: 'pointer',
  //                   marginBottom: '1rem',
  //                 }}
  //                 onClick={(e) => {
  //                   setisDelete(false);
  //                   setSelectedRowKeys([]);
  //                   setRangeFrom('');
  //                   setRangeTo('');
  //                   // setCachedData({})
  //                   setDeleteInput();
  //                   setDeleteProductPages([]);
  //                   getProdfun();
  //                   e.stopPropagation();
  //                 }}
  //               />
  //             </>
  //           ) : (
  //             <Popconfirm
  //               title="Are you sure you want to delete ?"
  //               onConfirm={() => {
  //                 setisDelete(true);
  //               }}
  //               okText="Yes"
  //               cancelText="No"
  //               placement="bottom"
  //             >
  //               <DeleteFilled
  //                 style={{
  //                   color: '#FF4D4F',
  //                   fontSize: '1rem',
  //                   cursor: 'pointer',
  //                 }}
  //                 onClick={(e) => {
  //                   e.stopPropagation();
  //                 }}
  //               />
  //             </Popconfirm>
  //           )}
  //           {isDelete && selectedRowKeys.length !== AllProdIds.length && (
  //             <input
  //               type="checkbox"
  //               checked={
  //                 AllProdIds.length > 0 &&
  //                 selectedRowKeys.length === AllProdIds.length
  //               }
  //               indeterminate={
  //                 selectedRowKeys.length > 0 &&
  //                 selectedRowKeys.length < AllProdIds.length
  //               }
  //               onChange={(e) => {
  //                 if (e.target.checked) {
  //                   const allProductIds = AllProdIds.map((p) => p.ProdId);
  //                   setSelectedRowKeys(allProductIds);
  //                   setRangeFrom('');
  //                   setRangeTo('');
  //                 } else {
  //                   setSelectedRowKeys([]);
  //                 }
  //               }}
  //             />
  //           )}
  //         </Tooltip>

  //         {/* {isDelete && selectedRowKeys.length !== AllProdIds.length && (
  //         <div className="productlistgetnoinput">
  //           <input
  //             maxLength={12}
  //             type="number"
  //             // placeholder="From"
  //             value={rangeFrom}
  //             onChange={(e) => {
  //               const val = e.target.value.replace(/[^\d]/g, '');
  //               setRangeFrom(val);
  //             }}
  //           />
  //           <input
  //             maxLength={12}
  //             type="number"
  //             // placeholder="To"
  //             value={rangeTo}
  //             onChange={(e) => {
  //               const val = e.target.value.replace(/[^\d]/g, '');
  //               setRangeTo(val);
  //             }}
  //           />
  //         </div>
  //         )} */}
  //         {isDelete && selectedRowKeys.length !== AllProdIds.length && (
  //           <div
  //             className={'product-delete-input'}
  //             style={{ width: 'inherit' }}
  //           >
  //             <Tooltip title={'e.g. 1-5, 8, 9-10'} placement={'left'}>
  //               <InputField
  //                 maxLength={30}
  //                 value={deleteInput}
  //                 onChange={(e) => {
  //                   const val = e?.target?.value;
  //                   setDeleteInput(val);

  //                   const totalCount = productData?.[0]?.TotalCount || 0;
  //                   const { isValid, error } = validateDeleteInput(
  //                     val,
  //                     totalCount
  //                   );

  //                   setInputError(isValid ? '' : error);
  //                 }}
  //                 placeholder="e.g. 1-5, 8, 9-10"
  //                 style={{
  //                   borderColor: inputError ? 'red' : undefined,
  //                   borderWidth: inputError ? 1 : undefined,
  //                 }}
  //               />
  //             </Tooltip>
  //             {inputError && (
  //               <div style={{ color: 'red', marginTop: 4 }}>
  //                 {inputError}
  //               </div>
  //             )}
  //           </div>
  //         )}
  //       </div>
  //     </>
  //   ),
  //   dataIndex: 'checkbox',
  //   key: 'checkbox',
  //   width: '100px',
  //   align: 'center',
  //   render: (_, record) =>
  //     isDelete ? (
  //       <input
  //         type="checkbox"
  //         checked={selectedRowKeys.includes(record.ProdId)}
  //         onChange={(e) => {
  //           if (e.target.checked) {
  //             setSelectedRowKeys((prev) => [...prev, record.ProdId]);
  //           } else {
  //             setSelectedRowKeys((prev) =>
  //               prev.filter((id) => id !== record.ProdId)
  //             );
  //           }
  //         }}
  //       />
  //     ) : null,
  //   sorter: false,
  // },
  //   ],
  //   [
  //     AllProdIds,
  //     selectedRowKeys,
  //     rangeFrom,
  //     rangeTo,
  //     page,
  //     productData,
  //     isDelete,
  //     sortedInfo,
  //     onlineImage,
  //   ]
  // );
  const formatDate = (dateStr) => {
    const d = new Date(dateStr);

    const day = String(d.getDate()).padStart(2, '0');

    const months = [
      'JAN',
      'FEB',
      'MAR',
      'APR',
      'MAY',
      'JUN',
      'JUL',
      'AUG',
      'SEP',
      'OCT',
      'NOV',
      'DEC',
    ];
    const month = months[d.getMonth()];

    const year = String(d.getFullYear()).slice(-2);

    return `${day}-${month}-${year}`;
  };
  const handleCheckboxChange = (record, checked) => {
    setSelectedRecords((prev) => {
      if (checked) {
        return [...prev, record]; // add record
      } else {
        return prev.filter((r) => r.ProdId !== record.ProdId); // remove record
      }
    });
  };
  const CreateQrcode = async (isChecked, code, productName, StockAvailable, copiesCount = 0) => {

    if (!code) return;

    if (isChecked) {
      const data = await QRCode.toDataURL(code);
      setQrandbarcodeDatas((prev) => [
        ...prev,
        {
          key: code,
          url: data,
          productName: productName,
          copiesCount: copiesCount,
          StockAvailable: StockAvailable
        },
      ]);
    } else {
      setQrandbarcodeDatas((prev) => prev.filter((item) => item.key !== code));
    }
  };

  const CreateQrcodesBatch = async (products, isChecked) => {
    if (isChecked) {
      const batchSize = 5;
      for (let i = 0; i < products.length; i += batchSize) {
        const batch = products.slice(i, i + batchSize);
        await Promise.all(
          batch.map((product) => CreateQrcode(true, product.QRCode, product.ProdName, product.StockAvailable, product.TotalBalanceQty))
        );
        // Small delay to prevent UI blocking
        if (i + batchSize < products.length) {
          await new Promise((resolve) => setTimeout(resolve, 10));
        }
      }
    } else {
      products.forEach((product) => CreateQrcode(false, product.QRCode, product.ProdName, product.StockAvailable, product.TotalBalanceQty));
    }
  };

  const columns = useMemo(() => {
    const cols = [
      {
        title: 'Sl.No',
        key: 'sno',
        align: 'center',
        width: '60px',
        render: (text, object, index) => (
          <a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
        ),
      },
      {
        title: 'Category',
        dataIndex: 'CategoryName',
        key: 'CategoryName',
        width: '100px',
        render: (text) => <a style={{ color: 'black' }}>{text}</a>,
        columnKey: 'CategoryName',
        sorter: (a, b) => a?.CategoryName?.localeCompare(b?.CategoryName),
        sortOrder:
          sortedInfo.columnKey === 'CategoryName' ? sortedInfo.order : null,
        ellipsis: true,
      },
      {
        title: isCheckSportsApp ? 'Name' : 'Product',
        dataIndex: 'ProdName',
        key: 'ProdName',
        width: '100px',
        render: (text) => <a style={{ color: 'black' }}>{text}</a>,
        sorter: (a, b) => a?.ProdName?.localeCompare(b?.ProdName),
        columnKey: 'ProdName',
        sortOrder:
          sortedInfo.columnKey === 'ProdName' ? sortedInfo.order : null,
        ellipsis: true,
      },
      ...(brandColumn && subCategory
        ? [
          {
            title: 'Brand',
            dataIndex: 'BrandName',
            key: 'BrandName',
            columnKey: 'BrandName',
            width: '100px',
            render: (text) => <a style={{ color: 'black' }}>{text}</a>,
            sorter: (a, b) => a?.BrandName?.localeCompare(b?.BrandName),
            sortOrder:
              sortedInfo.columnKey === 'BrandName' ? sortedInfo.order : null,
            ellipsis: true,
          },
        ]
        : []),

      {
        title: 'Qty',
        dataIndex: 'Size',
        key: 'Size',
        width: '100px',
        align: 'center',
        render: (text, record) => (
          <a style={{ color: 'black' }}>
            {`${record?.Size} ${record?.UomName}`}
          </a>
        ),
        ellipsis: true,
      },

      ...(qrCodeColumn
        ? [
          {
            title: 'QRCode',
            dataIndex: 'QRCode',
            key: 'QRCode',
            width: '100px',
            align: 'center',
            render: (text) => (
              <a style={{ color: 'black' }}>{text ? text : '-'}</a>
            ),
            ellipsis: true,
          },
          {
            title: (
              <Tooltip title=" printing multiple QR codes">
                <Space>
                  {MultiCode && (
                    <input
                      type="checkbox"
                      checked={
                        selectedRecords.length > 0 &&
                        productData
                          .filter((p) => p?.QRCode)
                          .every((p) =>
                            selectedRecords.some((r) => r.ProdId === p.ProdId)
                          )
                      }
                      onChange={(e) => {
                        const productsWithQR = productData.filter(
                          (p) => p?.QRCode
                        );
                        if (e.target.checked) {
                          const newSelections = productsWithQR.filter(
                            (p) =>
                              !selectedRecords.some(
                                (r) => r.ProdId === p.ProdId
                              )
                          );
                          setSelectedRecords((prev) => [
                            ...prev,
                            ...newSelections,
                          ]);
                          // Create QR codes for newly selected products
                          CreateQrcodesBatch(newSelections, true);
                        } else {
                          // Remove QR codes for deselected products
                          CreateQrcodesBatch(productsWithQR, false);
                          setSelectedRecords((prev) =>
                            prev.filter(
                              (r) =>
                                !productsWithQR.some(
                                  (p) => p.ProdId === r.ProdId
                                )
                            )
                          );
                        }
                      }}
                    />
                  )}
                  <span>Print QRCode</span>
                  <CheckSquareOutlined
                    style={{
                      fontSize: '18px',
                      cursor: 'pointer',
                      color: MultiCode ? '#1890ff' : '#666',
                    }}
                    onClick={() => {
                      setMultiCode((prev) => {
                        const newValue = !prev;
                        if (!newValue) {
                          setSelectedRecords([]);
                        }

                        return newValue;
                      });
                    }}
                  />
                </Space>
              </Tooltip>
            ),
            key: 'Print',
            dataIndex: 'Print',
            width: '100px',
            align: 'center',
            render: (_, record) =>
              productData.length >= 1 ? (
                <Space size="middle">
                  {MultiCode ? (
                    record?.QRCode ? (
                      <input
                        type="checkbox"
                        checked={selectedRecords.some(
                          (r) => r.ProdId == record.ProdId
                        )}
                        onChange={(e) => {
                          handleCheckboxChange(record, e.target.checked);
                          CreateQrcode(e.target.checked, record.QRCode, record?.ProdName, record?.StockAvailable, record?.TotalBalanceQty);
                        }}
                      />
                    ) : (
                      '-'
                    )
                  ) : record?.QRCode ? (
                    <a>
                      <PrinterFilled
                        style={{ fontSize: '20px' }}
                        onClick={() => Qrcode(record)}
                      />
                    </a>
                  ) : (
                    '-'
                  )}
                </Space>
              ) : null,
          },
        ]
        : []),

      {
        title: 'Action',
        key: 'Action',
        dataIndex: 'Action',
        width: '100px',
        align: 'center',
        render: (_, record, index) =>
          productData.length >= 1 ? (
            <Space size="middle">
              {record.ActiveStatus === 'A' ? (
                <a>
                  <EditFilled
                    style={{ color: '#1292EE' }}
                    onClick={() =>
                      UserType === 'Super Admin' ||
                        (UserType === 'Super Admin User' &&
                          SAAccessCommonMaster?.UpdateAccess === 'Y') ||
                        (UserType === 'Employee' &&
                          empData?.UpdateAccess === 'Y') ||
                        UserType === 'Admin'
                        ? actionsFormatter(record, index)
                        : null
                    }
                  />
                </a>
              ) : (
                ''
              )}
              <a>
                {record.ActiveStatus === 'A' ? (
                  <DeleteFilled
                    style={{
                      color: '#EF4443',
                    }}
                    onClick={() =>
                      UserType === 'Super Admin' ||
                        (UserType === 'Super Admin User' &&
                          SAAccessCommonMaster?.DeleteAccess === 'Y') ||
                        (UserType === 'Employee' &&
                          empData?.DeleteAccess === 'Y') ||
                        UserType === 'Admin'
                        ? statusFormatter(record)
                        : null
                    }
                  />
                ) : (
                  <ReloadOutlined
                    style={{
                      color: '#52C41A',
                    }}
                    onClick={() =>
                      UserType === 'Super Admin' ||
                        (UserType === 'Super Admin User' &&
                          SAAccessCommonMaster?.DeleteAccess === 'Y') ||
                        (UserType === 'Employee' &&
                          empData?.DeleteAccess === 'Y') ||
                        UserType === 'Admin'
                        ? statusFormatter(record)
                        : null
                    }
                  />
                )}
              </a>
            </Space>
          ) : null,
      },
      {
        title: 'Image',
        key: 'ProdLogo',
        dataIndex: 'ProdLogo',
        width: '60px',
        align: 'center',
        render: (_, record, index) => (
          // <div className="productMasterImageUpload">
          <Tooltip title={record.ProdLogo ? 'View Image' : 'Upload Image'}>
            <div>
              <FaRegEye
                style={{ background: 'none', cursor: 'pointer' }}
                size={22}
                color={record.ProdLogo && '#1F9B3A'}
                onClick={() => {
                  setRowRecord(record);
                  setImageModalRowIndex(index);
                  setUploadImageModal(true);
                  setOnlineImage(null);
                  setSelectedImage(null);
                }}
              />
            </div>
          </Tooltip>
        ),
      },
      {
        title: (
          <>
            <div
              style={{
                display: 'flex',
                alignItems: isDelete ? 'center' : 'flex-start',
                flexDirection: 'column',
                gap: '10px',
                justifyContent: 'center',
              }}
            >
              <Tooltip title="Bulk Delete" className="delete-bulk-icon">
                {isDelete ? (
                  <>
                    {/* <DeleteFilled
                      style={{
                        color: '#FF4D4F',
                        marginBottom: '1rem',
                      }}
                      onClick={(e) => {
                        setisDelete(false);
                        setSelectedRowKeys([]);
                        setRangeFrom('');
                        setRangeTo('');
                        e.stopPropagation();
                      }}
                    /> */}
                    <MdDeleteForever
                      style={{
                        color: '#333',
                        marginLeft: '0.5rem',
                        fontSize: '1.2rem',
                        cursor: 'pointer',
                        marginBottom: '1rem',
                      }}
                      onClick={(e) => {
                        setisDelete(false);
                        setSelectedRowKeys([]);
                        setRangeFrom('');
                        setRangeTo('');
                        // setCachedData({})
                        setDeleteInput();
                        setDeleteProductPages([]);
                        getProdfun();
                        e.stopPropagation();
                      }}
                    />
                  </>
                ) : productData.length > 0 ? (
                  <Popconfirm
                    title="Are you sure you want to delete ?"
                    onConfirm={() => {
                      setisDelete(true);
                    }}
                    okText="Yes"
                    cancelText="No"
                    placement="bottom"
                  >
                    <DeleteFilled
                      style={{
                        color: '#FF4D4F',
                        fontSize: '1rem',
                        cursor: 'pointer',
                      }}
                      onClick={(e) => {
                        e.stopPropagation();
                      }}
                    />
                  </Popconfirm>
                ) : (
                  <DeleteFilled
                    style={{
                      color: '#FF4D4F',
                      fontSize: '1rem',
                      cursor: 'pointer',
                    }}
                    onClick={(e) => {
                      e.stopPropagation();
                      setMessageType('info');
                      setMessageData('No product available');
                    }}
                  />
                )}
                {isDelete && selectedRowKeys.length !== AllProdIds.length && (
                  <input
                    type="checkbox"
                    checked={
                      AllProdIds.length > 0 &&
                      selectedRowKeys.length === AllProdIds.length
                    }
                    indeterminate={
                      selectedRowKeys.length > 0 &&
                      selectedRowKeys.length < AllProdIds.length
                    }
                    onChange={(e) => {
                      if (e.target.checked) {
                        const allProductIds = AllProdIds.map((p) => p.ProdId);
                        setSelectedRowKeys(allProductIds);
                        setRangeFrom('');
                        setRangeTo('');
                      } else {
                        setSelectedRowKeys([]);
                      }
                    }}
                  />
                )}
              </Tooltip>

              {/* {isDelete && selectedRowKeys.length !== AllProdIds.length && (
              <div className="productlistgetnoinput">
                <input
                  maxLength={12}
                  type="number"
                  // placeholder="From"
                  value={rangeFrom}
                  onChange={(e) => {
                    const val = e.target.value.replace(/[^\d]/g, '');
                    setRangeFrom(val);
                  }}
                />
                <input
                  maxLength={12}
                  type="number"
                  // placeholder="To"
                  value={rangeTo}
                  onChange={(e) => {
                    const val = e.target.value.replace(/[^\d]/g, '');
                    setRangeTo(val);
                  }}
                />
              </div>
              )} */}
              {isDelete && selectedRowKeys.length !== AllProdIds.length && (
                <div
                  className={'product-delete-input'}
                  style={{ width: 'inherit' }}
                >
                  <Tooltip title={'e.g. 1-5, 8, 9-10'} placement={'left'}>
                    <InputField
                      maxLength={30}
                      value={deleteInput}
                      onChange={(e) => {
                        const val = e?.target?.value;
                        setDeleteInput(val);

                        const totalCount = productData?.[0]?.TotalCount || 0;
                        const { isValid, error } = validateDeleteInput(
                          val,
                          totalCount
                        );

                        setInputError(isValid ? '' : error);
                      }}
                      placeholder="e.g. 1-5, 8, 9-10"
                      style={{
                        borderColor: inputError ? 'red' : undefined,
                        borderWidth: inputError ? 1 : undefined,
                      }}
                    />
                  </Tooltip>
                  {inputError && (
                    <div style={{ color: 'red', marginTop: 4 }}>
                      {inputError}
                    </div>
                  )}
                </div>
              )}
            </div>
          </>
        ),
        dataIndex: 'checkbox',
        key: 'checkbox',
        width: '50px',
        align: 'center',
        render: (_, record) =>
          isDelete ? (
            <input
              type="checkbox"
              checked={selectedRowKeys.includes(record.ProdId)}
              onChange={(e) => {
                if (e.target.checked) {
                  setSelectedRowKeys((prev) => [...prev, record.ProdId]);
                } else {
                  setSelectedRowKeys((prev) =>
                    prev.filter((id) => id !== record.ProdId)
                  );
                }
              }}
            />
          ) : null,
        sorter: false,
      },
    ];

    // ✅ Filter out any null, undefined, or empty columns safely
    return cols.filter(
      (col) => col && typeof col === 'object' && Object.keys(col).length > 0
    );
  }, [
    MultiCode,
    selectedRecords,
    AllProdIds,
    selectedRowKeys,
    rangeFrom,
    rangeTo,
    page,
    productData,
    isDelete,
    sortedInfo,
    onlineImage,
  ]);

  const handleImageTag = (w, h = '40px', barcodeOrQr) => {
    return (
      <img
        src={barcodeOrQr ? barCodeImage : qrCodeImage}
        alt={previewText}
        width={w}
        height={h}
      />
    );
  };

  const updateImageUrl = (url) => {
    setImageUrl(url);
  };

  useEffect(() => {
    if (imageUrl == '') {
      setOnlineImage(null);
    }
  }, [imageUrl]);

  const handleimage = () => {
    setimageOpen(false);
    setOnlineImage('');
    setOnlineImage(null);
  };

  const browseImage = async (productName, index) => {
    if (productName !== null) {
      let response = await dispatch(onlineimages(productName)).unwrap();
      setimageOpen(true);
      setimagedata(response?.data?.data);
      setImageUrl('');
      setRecordIndex(index);
    }
  };

  const handleImageModalClose = () => {
    setUploadImageModal(false);
    setOnlineImage(null);
    setImageModalRowIndex(null);
    setSelectedImage(null);
  };

  const submitimage = async () => {
    let response = await fetch(selectedImage.image);

    let data = await response?.blob();
    let metadata = {
      type: 'image/jpeg',
    };

    let file = new File([data], 'image.jpg', metadata);
    let uploadImgData = await dispatch(uploadImage(file)).unwrap();
    if (uploadImgData?.data?.status) {
      setOnlineImage(uploadImgData?.data?.image);
      setImageUrl(uploadImgData?.data?.image);
    }

    setimageOpen(false);
  };

  const handleProductListGetApi = async () => {
    const response = await dispatch(
      getProductDataPageNo({
        CompId: CompId,
        BranchId: BranchId,
        AppId: AppId,
        PageNumber: currentPage,
      })
    ).unwrap();
    if (response?.data?.statusCode === 1) {
      setCachedData((prev) => ({
        ...prev,
        [currentPage]: response?.data?.data,
      })); // Cache the new data
      setproductData(response?.data?.data);
    } else {
      setCachedData({});
      setproductData([]);
    }
  };

  const handleImageUpload = async (img, record) => {
    const { ProdId } = record;
    const putData = {
      AppId,
      CompId,
      BranchId,
      ProdId,
      ProdLogo: img,
      UpdatedBy: UserId,
    };

    const response = await dispatch(updateProductImage(putData)).unwrap();
    if (response?.data?.statusCode == 1) {
      setimageOpen(false);
      setOnlineImage('');
      setOnlineImage(null);
      handleProductListGetApi();
      setRowRecord((prev) => ({
        ...prev,
        ProdLogo: img,
      }));
    }
  };

  useEffect(() => {
    async function fetchImage() {
      try {
        const base64 = await imageUrlToBase64(qrCodeUrl);
        setBase64Image(base64);
      } catch (error) {
        setConversionError(error.message || 'Error converting image');
      }
    }
    if (qrCodeUrl) {
      fetchImage();
    }
  }, [qrCodeUrl]);

  useEffect(() => {
    try {
      dispatch(changeBreadCrumb({ items: items }));
      if (location?.state?.Notiffy) {
        setMessageType(location?.state?.Notiffy.messageType);
        setMessageData(location?.state?.Notiffy.messageData);
      }
    } catch (err) {
      console.log(err, 'err');
    }
    barcodeApiData();
    getPreference();
    getAllProdId();
    // userTour()
    // if (UserType === "Employee") {
    //   fetchApi()
    // }
  }, []);
  useEffect(() => {
    if (UserType === 'Employee') {
      fetchApi();
    }
  }, [UserType]);
  useEffect(() => {
    let hasAccess = false;

    if (UserType === 'Admin' || UserType === 'Super Admin') {
      hasAccess = true;
    } else if (UserType === 'Employee') {
      hasAccess = empData?.AddAccess === 'Y';
    } else if (UserType === 'Super Admin User') {
      hasAccess = SAAccessCommonMaster?.AddAccess === 'Y';
    }

    setaddnewAccess(!hasAccess);
  }, [empData, SAAccessCommonMaster, UserType]);

  useEffect(() => {
    if (
      SearchProdData?.length === 0 &&
      searchedText?.length === 0 &&
      !(deleteProductPages?.length > 0)
    ) {
      getProdfun();
    }
  }, [currentPage, SearchProdData]);

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

    if ((response.data.statusCode = 1)) {
      setAllProdIds(response.data.data);
    } else {
      setAllProdIds([]);
    }
  };
  const getPreference = async () => {
    const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
    const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
      (setting) =>
        setting?.SettingIdName?.toLowerCase() === 'decimal' &&
        setting?.SettingValue === 'Y'
    );
    if (decimalSetting) {
      setAllowDecimal(true);
    }
  };

  const getProdfun = async () => {
    if (cachedData[currentPage]) {
      // Use cached data if available
      setproductData(cachedData[currentPage]);
    } else {
      let response = await dispatch(
        getProductDataPageNo({
          CompId,
          BranchId,
          AppId,
          PageNumber: currentPage,
        })
      ).unwrap();

      if (response?.data?.statusCode === 1) {
        setCachedData((prev) => ({
          ...prev,
          [currentPage]: response?.data?.data,
        })); // Cache the new data

        // Merge old and new data
        setproductData(response?.data?.data);
      }
    }

    // setproductData
  };

  const getForDeleteProduct = async (productPages) => {
    if (selectedRowKeys?.length === 0) return;
    let cacheData = {};
    for (let i = 0; i < productPages?.length; i++) {
      if (!cachedData[productPages[i]]) {
        let response = await dispatch(
          getProductDataPageNo({
            CompId,
            BranchId,
            AppId,
            PageNumber: productPages[i],
          })
        ).unwrap();

        if (response?.data?.statusCode === 1) {
          cacheData[productPages[i]] = response?.data?.data;
          setCachedData((prev) => ({
            ...prev,
            [productPages[i]]: response?.data?.data,
          }));
        }
      } else {
        cacheData[productPages[i]] = cachedData[productPages[i]];
      }
    }
    let selectedDelete = [];
    for (let key in cacheData) {
      cacheData?.[key]?.forEach((data) => {
        if (selectedRowKeys.includes(data?.ProdId)) {
          selectedDelete.push(data);
        }
      });
    }
    const paginatedResults = paginateData(selectedDelete);
    setPaginatedDeleteData(paginatedResults);
    setproductData(paginatedResults[currentPage]);
  };

  useEffect(() => {
    if (ProdId) {
      QRCode?.toDataURL(ProdId)
        .then((url) => {
          setQrCodeUrl(url);
        })
        .catch((error) => {
          console.error('Error generating QR code:', error);
        });
    }
  }, [ProdId]);

  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);

  const fetchApi = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      EmpId: UserId,
    };
    let response = await dispatch(getEmpAccess(data)).unwrap();
    let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
      (item) => item.ConfigName === 'Add Product'
    );
    setEmpData(datas?.[0]);
  };

  const barcodeApiData = async () => {
    const getResponse = await dispatch(
      getBarcodeTemplate({ compId: CompId, appId: AppId, branchId: BranchId })
    ).unwrap();
    if (getResponse?.data?.statusCode === 1) {
      if (getResponse?.data?.data?.length > 0) {
        const { TemplateDetails } = getResponse?.data?.data?.[0];
        setBarcodeTemplateDetails(TemplateDetails);
      }
    }
  };
  const actionsFormatter = async (row, rowIndex) => {
    if (row.ActiveStatus !== 'D') {
      if (isCheckSportsApp) {
        navigateTo(
          `${subDirectory}setting/products-master/update`,
          {
            state: {
              editstate: { ...row, DiscountValue: row?.DiscountLimit ?? 0 },
            },
          },
          { key: rowIndex }
        );
      } else {
        navigateTo(
          `${subDirectory}setting/product-master/update`,
          {
            state: {
              editstate: { ...row, DiscountValue: row?.DiscountLimit ?? 0 },
            },
          },
          { key: rowIndex }
        );
      }
    }
  };
  const generateQRCode = (code) => {
    let Data = QrandbarcodeDatas?.find((e) => e?.key === code)?.url;
    return Data
  }

  const generateQRCodeCopy = (code) => {
    const found = QrandbarcodeDatas?.find((e) => e?.key === code);
    const count = Number(found?.copiesCount);
    return Number.isFinite(count) && count > 0 ? count : 0;

  };
  const imageUrlToBase64 = async (url) => {
    try {
      const response = await fetch(url);
      const blob = await response.blob();
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onloadend = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
      });
    } catch (error) {
      console.error('Error fetching or converting image:', error);
      throw error;
    }
  };

  const statusFormatter = async (row) => {
    let deleteData = {
      ProdId: row.ProdId,
      ActiveStatus: row.ActiveStatus === 'A' ? 'D' : 'A',
      UpdatedBy: getSession('UserId'),
    };
    let response = await dispatch(deleteProductData(deleteData)).unwrap();
    if (response?.data?.statusCode === 1) {
      setMessageType('success');
      setMessageData(
        row.ActiveStatus === 'A'
          ? 'In-Activated Successfully'
          : 'Activated Successfully'
      );

      // Fetch the updated data for the current page only
      let updatedResponse = await dispatch(
        getProductDataPageNo({
          CompId,
          BranchId,
          AppId,
          PageNumber: currentPage,
        })
      ).unwrap();

      if (updatedResponse?.data?.statusCode === 1) {
        if (SearchProdData?.length > 0) {
          fetchSearchResults(searchedText);
        } else {
          setCachedData((prev) => ({
            ...prev,
            [currentPage]: updatedResponse?.data?.data,
          }));

          setproductData((prev) => {
            let updatedData = [...prev];
            const startIndex = (currentPage - 1) * 10;
            if (updatedData.length >= startIndex + 10) {
              updatedData.splice(
                startIndex,
                10,
                ...updatedResponse?.data?.data
              );
            } else {
              updatedData = [...updatedResponse?.data?.data];
            }
            return updatedData;
          });
        }
      }
    }
  };

  const handleChange = (pagination, filters, sorter) => {
    setSortedInfo(sorter);
  };

  const paginateData = (allProducts) => {
    let paginatedData = {};
    for (let i = 0; i < allProducts.length; i += 10) {
      paginatedData[i / 10 + 1] = allProducts.slice(i, i + 10);
    }
    return paginatedData;
  };
  const fetchSearchResults = useCallback(
    debounce(async (searchValue) => {
      if (searchValue.length > 0) {
        let response = await dispatch(
          getProductDataSearch({
            CompId,
            BranchId,
            AppId,
            prodName: searchValue,
          })
        ).unwrap();

        if (response?.data?.statusCode === 1) {
          const paginatedResults = paginateData(response?.data?.data);
          setCachedDataSearch(paginatedResults);
          setSearchProdData(response?.data?.data);
          // setSearchProdData(response?.data?.data);
          setpage(1);
          setCurrentPage(1);
          setproductData(paginatedResults[1] || []);
        } else {
          setSearchProdData([]);
          setproductData([]);
          setCachedDataSearch([]);
          setpage(1);
          setCurrentPage(1);
        }
      } else {
        setSearchProdData([]);
        setproductData([]);
        setCachedDataSearch([]);
        setpage(1);
        setCurrentPage(1);
      }
    }, 500), // 500ms debounce time
    [dispatch, CompId, BranchId, AppId]
  );

  const onSearchChange = async (e) => {
    setSearchedText(e?.target?.value);
    fetchSearchResults(e?.target?.value);
  };

  const handelAddButton = () => {
    if (isCheckSportsApp) {
      navigateTo(`${subDirectory}setting/products-master/new`);
    } else {
      navigateTo(`${subDirectory}setting/product-master/new`);
    }
  };

  const handelBulkAdd = () => {
    navigateTo(`${subDirectory}setting/product-master/turbo-add`);
  };

  const CoresOnChange = (params) => {
    setDropdownValue(params);
    formRef.current?.setFieldsValue({ Cross: params });
    const template = barcodeTemplateDetails?.find(
      (find) => find.SessionName === params
    );
    const checkComponent = (name) =>
      template?.OptionDetails?.some((some) => some.OptionName === name);
    const productName = checkComponent('Product Name');
    setPrintProductName(productName);
  };

  const CopiesOnChange = (params) => {
    setCopies(params);
    formRef.current?.setFieldsValue({ Copies: params });
  };

  const onFinish = async () => {
    const template = barcodeTemplateDetails?.find(
      (find) => find.SessionName === dropdownValue
    );
    const templateAvailable = template === undefined ? false : true;

    if (templateAvailable) {
      const checkComponent = (name) =>
        template?.OptionDetails?.some((some) => some.OptionName === name);
      const mrp = checkComponent('MRP');
      const barcode = checkComponent('Barcode');
      const color = checkComponent('Color');
      const eDate = checkComponent('E Date');
      const mDate = checkComponent('M Date');
      const sellingPrice = checkComponent('Selling Price');
      const productName = checkComponent('Product Name');
      const qrcode = checkComponent('Qrcode');
      const position = template.Position !== '' ? template.Position : '';
      const positionString =
        template.PositionString !== '' ? template.PositionString : '';

      setTemplateOptions({
        mrp: mrp,
        barcode: barcode,
        color: color,
        eDate: eDate,
        mDate: mDate,
        sellingPrice: sellingPrice,
        productName: productName,
        value: position,
        secondValue: positionString,
        qrcode: qrcode,
        codeType: template?.CodeType,
      });
    }

    switch (dropdownValue) {
      case '15X15 6cross': // COMPLETE
        await printDiv(
          templateAvailable ? '15X156cross' : 'StickerPrints0',
          style + getPageStyle(92)
        );
        handleQRStickerPrinterModelCancel();
        break;
      case '22X35 3cross': // Need to check
        await printDiv(
          templateAvailable ? '22X353cross' : 'StickerPrints1',
          style + getPageStyle(105)
        );
        handleQRStickerPrinterModelCancel();
        break;
      case '25X25 4cross': // COMPLETE
        await printDiv(
          templateAvailable ? '25X254cross' : 'StickerPrints2',
          style + getPageStyle(100)
        );
        handleQRStickerPrinterModelCancel();
        break;
      case '25X50 2cross': //Need to check
        await printDiv(
          templateAvailable ? '25X502cross' : 'StickerPrints3',
          style
        );
        handleQRStickerPrinterModelCancel();
        break;
      case '50X30 Single': // COMPLETE
        await printDiv(
          templateAvailable ? '50X30Single' : 'StickerPrints4',
          style
        );
        handleQRStickerPrinterModelCancel();
        break;
      case '50X25 Single': // COMPLETE
        await printDiv(
          templateAvailable ? '50X25Single' : 'StickerPrints5',
          style
        );
        handleQRStickerPrinterModelCancel();
        break;
      case '100X13 (55MM Printable)': //Need to check
        await printDiv(
          templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6',
          style
        );
        handleQRStickerPrinterModelCancel();
        break;
      case '100X15 (70MM Printable)': // COMPLETE
        await printDiv(
          templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7',
          style
        );
        handleQRStickerPrinterModelCancel();
        break;
      case '100X150': // COMPLETE
        await printDiv(templateAvailable ? '100X150' : 'StickerPrints8', style);
        handleQRStickerPrinterModelCancel();
        break;
      default:
        alert('! Select correct cross ');
    }
  };

  useEffect(() => {
    Bulkuploadsubdata();
    getBarcodeSessionData();
  }, []);

  const Bulkuploadsubdata = async () => {
    let response = await dispatch(
      getAllsubcatdata({ AppId: AppId, TypeName: 'Product Sub-Category' })
    ).unwrap();
    setSubCatData(response?.data?.data);
    let res = await dispatch(
      getAllbrandcatdata({ AppId: AppId, TypeName: 'Product Brand' })
    ).unwrap();
    setallBrandData(res?.data?.data);
    dispatch(getProdCatData({ AppId: AppId }));
    dispatch(getUomData({ TypeName: 'Unit of Measure' }));
    dispatch(
      getSupplierData({ AppId: AppId, BranchId: BranchId, CompId: CompId })
    );
    dispatch(getAdmin({ AppId: AppId, CompId: CompId }));
    setOpen(false);
    formRef?.current?.resetFields();
  };

  const handleCancel = () => {
    setOpenExcel(false);
    handleResetExcelData();
  };

  const openModal = () => {
    setOpenExcel(true);
  };

  const handleResetExcelData = () => {
    dispatch(emptyExcelData());
  };

  const handleSubmitbulk = (excelData) => {
    setExceldatasubmit(excelData);
  };

  const handleSubmit = async () => {
    setBulkpost(true);
    let FilterData = Exceldatasubmit?.filter((a) => a['ProductName'] != '');

    if (FilterData && FilterData.length > 0) {
      const formattedData = FilterData?.map((data) => ({
        AppId: getSession('AppId'),
        CompId: getSession('CompId'),
        BranchId: getSession('BranchId'),
        CreatedBy: getSession('UserId'),

        ProdName: data?.ProductName,
        ProdVariantName: data?.ProductVariantName,
        Size: data?.Quantity,
        UOM: data?.UOM,
        MRP: data?.MRP,
        WhSalePrice: data?.WhSalePrice,
        SellPrice: data?.SellPrice,
        ProdCat: data?.Category ? data?.Category : 'General',
        ProdSubCat: data?.SubCategory,
        Brand: data?.Brand ? data?.Brand : '',
        AutoGenerateQr: data?.AutoGenerateQrcode
          ? data?.AutoGenerateQrcode
          : 'No',
        QRCode: data?.AddQrCode,
        StockAvailable: data?.StockAvailable ? data?.StockAvailable : 'No',
        TaxId: data?.Tax ? data?.Tax : 'NIL - 0%',
        Cess: data?.Cess,
        HSNCode: data?.HSN,
        PartNumber: data?.PartNumber,
        Rack: data?.Rack,
        ManufDate: moment(data?.ManufactureDate, ['M/D/YY']).format(
          'YYYY-MM-DDTHH:mm:ss'
        ),
        ExpDate: moment(data?.ExpireDate, ['M/D/YY']).format(
          'YYYY-MM-DDTHH:mm:ss'
        ),
        AvailableFrom: data?.AvailableFrom
          ? moment(data?.AvailableFrom, ['M/D/YY']).format('HH:mm:ss')
          : '',
        AvailableTo: data?.AvailableTo
          ? moment(data?.AvailableTo, ['M/D/YY']).format('HH:mm:ss')
          : '',
        OnePcsAvailable: data?.Amountperpiece ? data?.Amountperpiece : 'No',
        OnePcsPrice: data?.AmountperpiecePrice,
        // NoOfPcs:data?.NumberOfPieceInside,
        AutoGenerateSingleQr: data?.AutoGenerateOnePieceQrcode
          ? data?.AutoGenerateOnePieceQrcode
          : 'No',
        OnePcQR: data?.AutoGenerateOnePieceQrcodeNumber,
        // ProductType:data?.ProductType,
        TokenAvailable: data?.TokenAvailable ? data?.TokenAvailable : 'No',
        ProdLogo: data?.Productimage,
      }));

      let postDatas = { prodDetails: formattedData };

      let response = await dispatch(bulkpostdata(postDatas)).unwrap();
      if (response?.data?.statusCode == 1) {
        setMessageType('success');
        setMessageData(response?.data?.response);
        setBulkpost(false);
        setpage(1);

        var responseData = await dispatch(
          getProductDataPageNo({ CompId, BranchId, AppId, PageNumber: 1 })
        ).unwrap();
        setCurrentPage(1);

        if (responseData?.data?.statusCode === 1) {
          setCachedData({ [currentPage]: responseData?.data?.data });
          setproductData(responseData?.data?.data);
        }
      } else {
        setMessageType('error');
        setMessageData(responseData?.data?.response);
      }

      handleResetExcelData();
      handleCancel();
    } else {
      setMessageType('error');
      setMessageData('No data to submit. Please upload an Excel file.');
    }
  };

  const Unit = UomPreference?.map((e) => e.ConfigName);
  const CategoryId = ProdCatData?.map((e) => e.ConfigId);
  const CategoryNames = ProdCatData?.map((e) => e.ConfigName);
  const CatconfigId = ProdCatData?.map((e) => e.ConfigId);
  const Subcatnames = subCatData?.map((e) => e.ConfigName);
  const SubcatId = subCatData?.map((e) => e.ConfigId);
  const SubcatNumFId = subCatData?.map((e) => e.NumFId);
  const BrandNumFId = allBrandData?.map((e) => e.NumFId);
  const BrandId = allBrandData?.map((e) => e.ConfigId);
  const BrandName = allBrandData?.map((e) => e.ConfigName);
  const SuplierNames = SupplierData?.map((e) => e.SuppName);
  const TaxDatas = TaxData?.map((e) => e.TaxIdName);
  const TaxData1 = TaxData?.map((e) => e.TaxPercentage);
  const combinedTaxData = TaxDatas?.map(
    (taxIdName, index) => `${taxIdName} - ${TaxData1[index]}%`
  );
  const Deletebulk = async () => {
    let data = {
      AppId: AppId,
      CompId: CompId,
      BranchId: BranchId,
      ProdId: selectedRowKeys,
    };
    let res = await dispatch(Deletebulkdatas(data)).unwrap();
    if (res?.data?.statusCode == 1) {
      setMessageData('Product Deleted Successfully');
      setMessageType('success');
      setRangeFrom(null);
      setRangeTo(null);
      setSelectedRowKeys([]);
      setisDelete(false);

      let response = await dispatch(
        getProductDataPageNo({
          CompId: CompId,
          BranchId: BranchId,
          AppId: AppId,
          PageNumber: currentPage,
        })
      ).unwrap();
      if (response?.data?.statusCode === 1) {
        setCachedData((prev) => ({
          ...prev,
          [currentPage]: response?.data?.data,
        })); // Cache the new data
        setproductData(response?.data?.data);
      } else {
        setCachedData({});
        setproductData([]);
      }
      setDeleteProductPages([]);
      setDeleteInput();
    } else {
      setMessageType('error');
      setMessageData(res?.data?.response);
    }
  };

  useEffect(() => {
    if (ProdId) {
      try {
        const svg = document.createElementNS(
          'http://www.w3.org/2000/svg',
          'svg'
        );

        JsBarcode(svg, ProdId, {
          format: 'CODE128',
          displayValue: true,
          lineColor: '#000',
          width: 2,
          height: 50,
        });

        setTimeout(() => {
          convertSvgToBase64(svg);
        }, 500);
      } catch (error) {
        console.error('Error generating barcode:', error);
      }
    }
  }, [ProdId]);


  const totalCopies = QrandbarcodeDatas?.reduce(
    (sum, item) => sum + Number(item?.copiesCount || 0),
    0
  );
  const convertSvgToBase64 = (svgElement) => {
    try {
      const svgData = new XMLSerializer().serializeToString(svgElement);
      const svgBlob = new Blob([svgData], {
        type: 'image/svg+xml;charset=utf-8',
      });
      const reader = new FileReader();

      reader.onloadend = () => {
        setBarcodeBase64Image(reader.result);
      };

      reader.readAsDataURL(svgBlob);
    } catch (error) {
      console.error('Error converting barcode to Base64:', error);
    }
  };

  const getBarcodeSessionData = async () => {
    try {
      let resp = await dispatch(getBarcodeSessionsIDs()).unwrap();
      if (resp?.data?.statusCode === 1) {
        setCoresdata(
          resp?.data?.data?.filter(
            (item) => !item.ConfigName?.includes('100X13 (55MM Printable Gold)')
          ) || []
        );
      } else {
        setCoresdata([]);
      }
    } catch (error) {
      console.error('Error fetching barcode session data:', error);
    }
  };
  const imageTagBarcodeAndQR = (w = 'auto', fs = '6px', codeData = null) => {
    const currentCode = codeData || ProdId;

    console.log(currentCode, '1111111111', codeData);
    return (
      (templateOptions.barcode || templateOptions.qrcode) && (
        <>
          <img
            style={{ width: w }}
            src={
              templateOptions.codeType === 'B'
                ? !MultiCode
                  ? barcodeBase64Image
                  : generateBarcode(currentCode)
                : !MultiCode
                  ? base64Image
                  : generateQRCode(currentCode)
            }
            alt="Barcode"
          />
          {templateOptions.codeType !== 'B' && (
            <p style={{ margin: '0', padding: '0', fontSize: fs }}>
              {currentCode}
            </p>
          )}
        </>
      )
    );
  };

  const generateBarcode = (code) => {
    try {
      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      JsBarcode(svg, code, {
        format: 'CODE128',
        displayValue: false,
        lineColor: '#030303',
        width: 2,
        height: 40,
      });
      const svgData = new XMLSerializer().serializeToString(svg);
      return `data:image/svg+xml;base64,${btoa(svgData)}`;
    } catch (error) {
      return null;
    }
  };

  // const generateQRCode = (code) => {

  //   return base64Image;
  // };

  const generateCodeImage = (code, codeType = 'Q') => {
    if (codeType === 'B') {
      return generateBarcode(code);
    } else {
      return generateQRCode(code);
    }
  };

  const handleQRStickerPrinterModelCancel = () => {
    setDropdownValue();
    setCopies();
    setOpen(false);
    formRef?.current?.resetFields();
    setSelectedRecords([]);
    setQrandbarcodeDatas([])
    setMultiCode(false);
    setNickName(null);
  };

  const handleProcessMultipleOCR = async (formDataArray) => {
    if (formDataArray.length === 0) return;

    setIsOCRProcessing({ Length: formDataArray.length, Loader: true });

    try {
      const combinedFormData = new FormData();

      formDataArray.forEach((formData, index) => {
        const imageBlob = formData.get('image');
        combinedFormData.append(
          `image${index}`,
          imageBlob,
          `cropped${index}.jpg`
        );
      });

      const Response = await dispatch(PostPedalOCR(combinedFormData)).unwrap();

      if (Response?.data?.statusCode === 1 && Response?.data?.data) {
        setBreadData(
          Response.data.data?.map((e) => ({
            ...e,
            Products: e?.Products?.map((p) => ({
              ...p,
              NoOfUnits: 1,
              UOM: 'PCS',
            })),
          }))
        );
        setMessageType('success');
        setMessageData(`${formDataArray.length} images processed successfully`);
        setBreadModalOpen(true);
      } else {
        setMessageType('error');
        setMessageData('No products found in images');
      }

      setOpenPaddleOCR(false);
      setUploadedFiles([]);
    } catch (error) {
      setMessageType('error');
      setMessageData('Error processing images');
      console.error('OCR Error:', error);
    } finally {
      setIsOCRProcessing({ Length: 0, Loader: false });
    }
  };

  const handleBulkUpload = async () => {
    if (breadData?.length === 0) {
      setMessageType('error');
      setMessageData('No products to upload');
      return;
    }
    const Postdata =
      breadData?.flatMap(
        (p) =>
          p?.Products?.map((e) => ({
            AppId,
            CompId,
            BranchId,
            CreatedBy: UserId,

            ProdName: e?.Product,
            ProdVariantName: '',
            ProdCat: p?.Category,
            ProdSubCat: '',

            Brand: '',
            PartNumber: '',
            HSNCode: '',

            UOM: e?.UOM,
            Size: e?.NoOfUnits,
            MRP: e?.MRP,
            SellPrice: e?.MRP,
            WhSalePrice: '',

            TaxId: 'NIL - 0%',
            StockAvailable: 'No',
            OnePcsAvailable: 'No',
            TokenAvailable: 'No',

            AutoGenerateQr: 'No',
            AutoGenerateSingleQr: 'No',
            OnePcQR: '',
            QRCode: '',
            Rack: '',

            AvailableFrom: null,
            AvailableTo: null,
            ManufDate: null,
            ExpDate: null,
          })) || []
      ) || [];

    console.log(Postdata, 'Postdata');
    const response = await dispatch(
      bulkpostdata({ ProdDetails: Postdata })
    ).unwrap();
  };

  useEffect(() => {
    const from = parseInt(rangeFrom, 10);
    const to = parseInt(rangeTo, 10);

    let newRangeIds = [];
    if (
      !isNaN(from) &&
      !isNaN(to) &&
      from > 0 &&
      to > 0 &&
      from <= to &&
      to <= AllProdIds.length
    ) {
      newRangeIds = AllProdIds.slice(from - 1, to).map((p) => p.ProdId);
    }

    const idsToRemove = lastRangeIdsRef.current.filter(
      (id) => !newRangeIds.includes(id)
    );
    const idsToAdd = newRangeIds.filter(
      (id) => !lastRangeIdsRef.current.includes(id)
    );

    setSelectedRowKeys((prev) => {
      const withRemoved = prev.filter((id) => !idsToRemove.includes(id));
      const withAdded = [...withRemoved, ...idsToAdd];
      return Array.from(new Set(withAdded));
    });

    lastRangeIdsRef.current = newRangeIds;
  }, [rangeFrom, rangeTo, AllProdIds]);
  const tableData = useMemo(() => {
    return SearchProdData?.length > 0
      ? [...CachedDataSearch[page]]
      : [...productData];
  }, [SearchProdData, CachedDataSearch, page, productData]);
  return (
    <div className="userPageTable">
      {/* <Tour open={openTour} onClose={handleTourClose} steps={steps} /> */}
      <div className="userPageContent">
        <Messages
          messageType={messageType}
          messageData={messageData}
          onComplete={onComplete}
        />
        {/* <GooglePayUPIButton /> */}
        <div className="formAddNew">
          {/* <FormHeader title={'Product'} /> */}
          <div className="searchAddDiv productlistSearchDiv">
            <div className="formSearch">
              <Search
                placeholder="Search"
                // onSearch={onSearch}
                onSearchChange={onSearchChange}
              />
            </div>
            <div
              className="commonMaster-btn"
              style={{
                display: 'flex',
                alignItems: 'center',
                fontSize: '2.5rem',
                gap: '0.5rem',
                flexWrap: 'wrap',
              }}
            >
              <div>
                <div className="SmartScanBTN">
                  <Buttons
                    buttonText="Smart Scan"
                    className="smart_scan_Button"
                    handleSubmit={() => {
                      setOpenPaddleOCR(true);
                    }}
                    disabled={addnewAccess}
                    icon={<BsCameraFill size={18} />}
                  />
                </div>
              </div>
              <div className="productMaster-input">
                <Buttons
                  buttonText={isCheckSportsApp ? 'Add New Slot' : 'Single Add'}
                  disabled={addnewAccess}
                  handleSubmit={() => handelAddButton()}
                  color="901D77"
                  icon={<PlusOutlined />}
                />
              </div>

              {!isCheckSportsApp && (
                <>
                  <div className="uploadexcelBtn">
                    <Buttons
                      buttonText="Upload Excel"
                      className="tertiary_Button"
                      handleSubmit={openModal}
                      disabled={addnewAccess}
                      icon={<FiUploadCloud size={18} />}
                    />
                  </div>

                  <div className="productMaster-input">
                    <TertiaryButton
                      buttonText={'Turbo Add'}
                      disabled={addnewAccess}
                      handleSubmit={() => handelBulkAdd()}
                      color="901D77"
                      icon={<HiOutlineRocketLaunch size={22} />}
                    />
                  </div>
                </>
              )}
            </div>
          </div>
        </div>

        <div className="reportTable reportTableProduct">
          <Table
            columns={columns}
            dataSource={tableData}
            rowKey="ProdId"
            pagination={false}
            rowClassName="product-row"
            defaultSortOrder="ascend"
            onChange={handleChange}
          />
          {countOfProduct > 10 && (
            <Pagination
              className="producttablepagination"
              current={page}
              total={countOfProduct}
              pageSize={10}
              onChange={handlePageChange}
              showSizeChanger={false}
              // showQuickJumper={true}
              showTotal={(total) =>
                `Total ${countOfProduct ? countOfProduct : 0} items`
              }
            />
          )}{' '}
        </div>
        {/* <Popconfirm
          title="Are you sure to delete all products?"
          onConfirm={Deletebulk}
          okText="Yes"
          cancelText="No"
          placement="right"
          className='allpropopup'
        > */}
        {/* <Tooltip title="Delete All Products"> */}
        {isDelete && selectedRowKeys?.length > 0 && (
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              padding: '2rem 0',
              position: 'fixed',
              right: '5rem',
              bottom: '-27px',
              zIndex: '100',
            }}
          >
            <Buttons
              buttonText={'Delete'}
              handleSubmit={() => {
                Deletebulk();
              }}
            />
          </div>
        )}
        {!isDelete && MultiCode && selectedRecords?.length > 0 && (
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              padding: '2rem 0',
              position: 'fixed',
              right: '5rem',
              bottom: '-27px',
              zIndex: '100',
            }}
          >
            <Buttons
              buttonText={'Print Selected Codes'}
              handleSubmit={() => {
                setOpen(true);
              }}
            />
          </div>
        )}
        {/* </Tooltip> */}
        {/* </Popconfirm> */}
      </div>
      <DefaultModal
        width={1000}
        open={open}
        title="Sticker Print"
        handleCancel={handleQRStickerPrinterModelCancel}
        footer={false}
        children={
          <Form ref={formRef} onFinish={onFinish}>

            {MultiCode && <div className="printtabs">
              <div
                className={`tab-item ${activeTab === 'stock' ? 'active' : ''}`}
                onClick={() => setActiveTab('stock')}
              >
                Stock Wise <span className="count">({selectedRecords?.length})</span>
                <div>

                  <div className="AddStockMinatain" onClick={(e) => {
                    e.stopPropagation();
                    setstockWiseQrcode(true);
                  }}
                    style={{
                      animation: activeTab === 'stock' ? 'blink 1s infinite' : 'none'
                    }}>

                    <FaPlus

                    /> Add
                  </div>
                </div>
              </div>

              <div
                className={`tab-item ${activeTab === 'product' ? 'active' : ''}`}
                onClick={() => setActiveTab('product')}
              >
                Product Wise <span className="count">({selectedRecords?.length})</span>
                <div className="AddStockMinatain" onClick={(e) => {
                  e.stopPropagation();
                  setProductWiseQrcode(true);
                }} style={{
                  animation: activeTab === 'product' ? 'blink 1s infinite' : 'none'
                }}>

                  <FaPlus


                  /> Add
                </div>
              </div>

            </div>}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
              <Form.Item
                name="Cross"
                className="size-selection"
                rules={[
                  {
                    required: true,
                    message: 'Please Select Cross',
                  },
                ]}
              >
                <div>
                  <label
                    class="required"
                    style={{ marginBottom: '8px', display: 'block' }}
                  >
                    Cross
                  </label>
                  <div className="barcode-qr-preview">
                    <div className="radio-sidebar-container">
                      {coresdata?.map((option) => (
                        <div
                          key={option.ConfigName}
                          onClick={() => CoresOnChange(option.ConfigName)}
                          className={`radio-sidebar-item ${dropdownValue === option.ConfigName ? 'selected' : ''}`}
                        >
                          <div className="radio-sidebar-title">
                            {option.ConfigName}
                          </div>
                        </div>
                      ))}
                    </div>
                    <div className="BarcodeTemplateSetup-Master">
                      <div
                        className={`CustomisedBSPS ${dropdownValue === '100X150' ? 'height-max' : ''}`}
                      >
                        <div className="headerPreview">PREVIEW</div>
                        {(() => {
                          const template = barcodeTemplateDetails?.find(
                            (find) => find.SessionName === dropdownValue
                          );
                          const templateAvailable =
                            template === undefined ? false : true;
                          // Define constants using the lookup map
                          const checkComponent = (name) =>
                            template?.OptionDetails?.some(
                              (some) => some.OptionName === name
                            );

                          const mrp = checkComponent('MRP');
                          const qrcode = checkComponent('Qrcode');
                          const barcode = checkComponent('Barcode');
                          const color = checkComponent('Color');
                          const eDate = checkComponent('E Date');
                          const mDate = checkComponent('M Date');
                          const sellingPrice = checkComponent('Selling Price');
                          const productName = checkComponent('Product Name');
                          const barcodeOrQr = template?.CodeType
                            ? template?.CodeType === 'B'
                            : true;
                          // setPreviewTemplateOptions({
                          //   mrp: mrp,
                          //   barcode: barcode,
                          //   color: color,
                          //   eDate: eDate,
                          //   mDate: mDate,
                          //   sellingPrice: sellingPrice,
                          //   productName: productName,
                          //   value: template?.Position !== '' ? template?.Position : '',
                          //   secondValue:
                          //     template?.PositionString !== ''
                          //       ? template?.PositionString
                          //       : '',
                          //   qrcode: qrcode,
                          //   codeType: template?.CodeType,
                          // });
                          const templateValue =
                            template?.Position !== '' ? template?.Position : '';
                          switch (dropdownValue) {
                            case '15X15 6cross':
                              return templateAvailable ? (
                                !(productName || barcode || qrcode || mrp) ? (
                                  <Empty />
                                ) : (
                                  <>
                                    <div className="SixCross15x">
                                      {[...Array(6)].map((_, index) => (
                                        <div className="BarQrprint5">
                                          <div
                                            key={index}
                                            className="BarQrprint1details BarQrprint5Details alignCenterFlexDirectionColumn"
                                          >
                                            {(barcode || qrcode) &&
                                              templateValue === 'T' &&
                                              handleImageTag(
                                                barcodeOrQr ? 50 : 20,
                                                20,
                                                barcodeOrQr
                                              )}
                                            {productName && (
                                              <div
                                                className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                              >
                                                {nickName
                                                  ? nickName
                                                  : proName
                                                    ? proName
                                                    : 'Product Name'}
                                              </div>
                                            )}
                                            {(barcode || qrcode) &&
                                              templateValue === 'C' &&
                                              handleImageTag(
                                                barcodeOrQr ? 50 : 20,
                                                20,
                                                barcodeOrQr
                                              )}
                                            {mrp && (
                                              <div className="MRPBQ">
                                                {'₹:' +
                                                  (detail?.MRP
                                                    ? detail?.MRP
                                                    : 0.0)}
                                              </div>
                                            )}
                                            {(barcode || qrcode) &&
                                              templateValue === 'B' &&
                                              handleImageTag(
                                                barcodeOrQr ? 50 : 20,
                                                20,
                                                barcodeOrQr
                                              )}
                                          </div>
                                        </div>
                                      ))}
                                    </div>
                                    <div className="showInfoCross4Print">
                                      <p>
                                        Vertical
                                        <div>
                                          <GiVerticalFlip size={25} />{' '}
                                        </div>
                                        - {'15mm'}
                                      </p>
                                      <p>
                                        Horizontal
                                        <div>
                                          <GiHorizontalFlip size={30} />{' '}
                                        </div>
                                        - {'15mm'}
                                      </p>
                                    </div>
                                  </>
                                )
                              ) : (
                                <>
                                  <div className="default-15x15-6cross">
                                    {Array.from({ length: 6 }).map(
                                      (_, index) => (
                                        <div
                                          className="Sticker0"
                                          key={`sticker0-${index}`}
                                        >
                                          <img
                                            src={qrCodeImage}
                                            alt={`QR Code ${index + 1}`}
                                          />
                                        </div>
                                      )
                                    )}
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'15mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'15mm'}
                                    </p>
                                  </div>
                                </>
                              );
                            case '22X35 3cross':
                              return templateAvailable ? (
                                //"B","T"
                                !(barcode || qrcode || mrp) ? (
                                  <Empty />
                                ) : (
                                  <>
                                    <div className="Cross32235">
                                      {[...Array(3)].map((_, index) => (
                                        <div
                                          className="BarQrprint4"
                                          key={index}
                                        >
                                          <div
                                            className="BarQrprint1details"
                                            style={{
                                              alignItems: 'center',
                                              flexDirection:
                                                templateValue === 'T'
                                                  ? 'column'
                                                  : 'column-reverse',
                                            }}
                                          >
                                            {(barcode || qrcode) &&
                                              handleImageTag(
                                                barcodeOrQr ? 100 : 35,
                                                35,
                                                barcodeOrQr
                                              )}
                                            {(productName || mrp) && (
                                              <div
                                                style={{
                                                  textAlign: 'center',
                                                  width: '100%',
                                                  display: 'flex',
                                                  alignItems: 'center',
                                                  justifyContent: 'center',
                                                  flexDirection: 'column',
                                                }}
                                              >
                                                {productName && (
                                                  <div
                                                    className={`MRPBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                                  >
                                                    {nickName
                                                      ? nickName
                                                      : (proName || 'Product Name')}
                                                  </div>
                                                )}
                                                {mrp && (
                                                  <div className="MRPBQ">
                                                    {'₹:' +
                                                      (detail?.MRP
                                                        ? detail?.MRP
                                                        : 10.0)}
                                                  </div>
                                                )}
                                              </div>
                                            )}
                                          </div>
                                        </div>
                                      ))}
                                    </div>
                                    <div className="showInfoCross4Print">
                                      <p>
                                        Vertical
                                        <div>
                                          <GiVerticalFlip size={25} />{' '}
                                        </div>
                                        - {'22mm'}
                                      </p>
                                      <p>
                                        Horizontal
                                        <div>
                                          <GiHorizontalFlip size={30} />{' '}
                                        </div>
                                        - {'35mm'}
                                      </p>
                                    </div>
                                  </>
                                )
                              ) : (
                                <>
                                  <div className="grid22x35_3cross">
                                    {Array?.from({ length: 3 })?.map(
                                      (_, index) => (
                                        <div
                                          className="Sticker1 bg-white"
                                          key={`sticker1-${index}`}
                                        >
                                          <div style={{ width: '60%' }}>
                                            <p
                                              className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
                                            >
                                              {proName || 'Product Name'} ({size || '1 PCS'})
                                            </p>
                                            <p>{ProdId || 'QR579890770'}</p>
                                          </div>
                                          <img
                                            src={qrCodeImage}
                                            style={{
                                              width: '12mm',
                                              height: '12mm',
                                            }}
                                          />
                                        </div>
                                      )
                                    )}
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'22mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'35mm'}
                                    </p>
                                  </div>
                                </>
                              );
                            case '25X25 4cross':
                              return templateAvailable ? (
                                !(
                                  productName ||
                                  mDate ||
                                  eDate ||
                                  barcode ||
                                  qrcode ||
                                  mrp
                                ) ? (
                                  <Empty />
                                ) : (
                                  // 4 Cross idhu 25 * 25 * 25 * 25 = 1 inch
                                  <>
                                    <div className="Cross4Print">
                                      {[...Array(4)].map((_, index) => (
                                        <div
                                          key={index}
                                          className="BarQrprint3"
                                        >
                                          <div className="BarQrprint1details alignCenterFlexDirectionColumn">
                                            {(barcode || qrcode) &&
                                              templateValue === 'T' &&
                                              handleImageTag(
                                                barcodeOrQr ? 60 : 35,
                                                35,
                                                barcodeOrQr
                                              )}
                                            {productName && (
                                              <div
                                                className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                              >
                                                {nickName
                                                  ? nickName
                                                  : proName
                                                    ? proName
                                                    : 'Product Name'}
                                              </div>
                                            )}
                                            {mrp && (
                                              <div className="MRPBQ">
                                                {'₹:' +
                                                  (detail?.MRP
                                                    ? detail?.MRP
                                                    : 10.0)}
                                              </div>
                                            )}
                                            {(barcode || qrcode) &&
                                              templateValue === 'C' &&
                                              handleImageTag(
                                                barcodeOrQr ? 60 : 35,
                                                35,
                                                barcodeOrQr
                                              )}
                                            {mDate && (
                                              <div className="MandateBQ"></div>
                                            )}
                                            {eDate && (
                                              <div className="ExpdateBQ">
                                                DD-MM-YYYY
                                              </div>
                                            )}
                                            {(barcode || qrcode) &&
                                              templateValue === 'B' &&
                                              handleImageTag(
                                                barcodeOrQr ? 60 : 35,
                                                35,
                                                barcodeOrQr
                                              )}
                                          </div>
                                        </div>
                                      ))}
                                    </div>
                                    <div className="showInfoCross4Print">
                                      <p>
                                        Vertical
                                        <div>
                                          <GiVerticalFlip size={25} />{' '}
                                        </div>
                                        - {'25mm'}
                                      </p>
                                      <p>
                                        Horizontal
                                        <div>
                                          <GiHorizontalFlip size={30} />{' '}
                                        </div>
                                        - {'25mm'}
                                      </p>
                                    </div>
                                  </>
                                )
                              ) : (
                                <>
                                  <div className="grid25x25_4cross dummy4cross">
                                    {Array.from({ length: 4 })?.map(
                                      (_, index) => (
                                        <div
                                          className="sticker25x25 bg-white"
                                          key={`sticker2-${index}`}
                                        >
                                          <p
                                            className={`sticker25x25-name ${nickName ? '' : (proName + '(' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                          >
                                            <span
                                              class={
                                                (proName + '(' + size + ')')
                                                  ?.length <= 14
                                                  ? 'product-name2'
                                                  : 'product-nameSmall2'
                                              }
                                            >
                                              {nickName
                                                ? nickName
                                                : proName
                                                  ? proName
                                                  : 'Product Name'}
                                            </span>
                                            <span
                                              class={
                                                (proName + '(' + size + ')')
                                                  ?.length <= 14
                                                  ? 'product-size2'
                                                  : 'product-sizeSmall2'
                                              }
                                            >
                                              ({size || '1 PCS'})
                                            </span>
                                          </p>
                                          <div
                                            style={{
                                              display: 'flex',
                                              alignItems: 'center',
                                              width: '100%',
                                              flexDirection: 'column',
                                              justifyContent: 'center',
                                            }}
                                          >
                                            <img
                                              src={qrCodeImage}
                                              className="sticker25-img"
                                              alt="barcode"
                                            />
                                            <p class="product-id2">{ProdId || 'QR8575956'}</p>
                                          </div>
                                        </div>
                                      )
                                    )}
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'25mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'25mm'}
                                    </p>
                                  </div>
                                </>
                              );
                            case '25X50 2cross':
                              return templateAvailable ? (
                                //"B","T"
                                !(productName || barcode || qrcode || mrp) ? (
                                  <Empty />
                                ) : (
                                  <>
                                    <div className="TwoCrosssmain">
                                      {[...Array(2)].map((_, index) => (
                                        <div className="BarQrprint8">
                                          <div
                                            key={index}
                                            className="Barcodeimage"
                                            style={valueStyleColumn}
                                          >
                                            {(barcode || qrcode) &&
                                              handleImageTag(
                                                barcodeOrQr ? 140 : 30,
                                                30,
                                                barcodeOrQr
                                              )}
                                            {productName && (
                                              <div
                                                className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                              >
                                                {nickName
                                                  ? nickName
                                                  : proName
                                                    ? proName
                                                    : 'Product Name'}
                                              </div>
                                            )}
                                            {mrp && (
                                              <div className="MRPBQ">
                                                {'₹:' +
                                                  (detail?.MRP
                                                    ? detail?.MRP
                                                    : 10.0)}
                                              </div>
                                            )}
                                          </div>
                                        </div>
                                      ))}
                                    </div>
                                    <div className="showInfoCross4Print">
                                      <p>
                                        Vertical
                                        <div>
                                          <GiVerticalFlip size={25} />{' '}
                                        </div>
                                        - {'25mm'}
                                      </p>
                                      <p>
                                        Horizontal
                                        <div>
                                          <GiHorizontalFlip size={30} />{' '}
                                        </div>
                                        - {'50mm'}
                                      </p>
                                    </div>
                                  </>
                                )
                              ) : (
                                <>
                                  <div className="grid25x50_2cross">
                                    {Array.from({ length: 2 })?.map(
                                      (_, index) => (
                                        <div
                                          className="Sticker3 bg-white"
                                          key={`sticker3-${index}`}
                                        >
                                          <div style={{ width: '60%' }}>
                                            <p
                                              className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                            >
                                              {proName || 'Product Name'} ({size || '1 PCS'})
                                            </p>
                                            <p>{ProdId || 'QR74478578'}</p>
                                          </div>
                                          <img
                                            src={qrCodeImage}
                                            style={{
                                              width: '75px',
                                              height: '75px',
                                            }}
                                          />
                                        </div>
                                      )
                                    )}
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'25mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'50mm'}
                                    </p>
                                  </div>
                                </>
                              );
                            case '50X30 Single':
                              return templateAvailable ? (
                                !(
                                  productName ||
                                  mDate ||
                                  eDate ||
                                  barcode ||
                                  qrcode ||
                                  mrp
                                ) ? (
                                  <Empty />
                                ) : (
                                  <>
                                    <div
                                      className="BarQrprint6"
                                      style={secondValueStyle}
                                    >
                                      <div className="BarQrprint1details flexDirection">
                                        {productName && (
                                          <div
                                            className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                          >
                                            {nickName
                                              ? nickName
                                              : proName
                                                ? proName
                                                : 'Product Name'}
                                          </div>
                                        )}
                                        {mDate &&
                                          detail?.ProdVariantPriceDetails?.[0]
                                            ?.ManufDate && (
                                            <div className="MandateBQ">
                                              {formatDate(
                                                detail
                                                  ?.ProdVariantPriceDetails?.[0]
                                                  ?.ManufDate
                                              )}
                                            </div>
                                          )}
                                        {eDate &&
                                          detail?.ProdVariantPriceDetails?.[0]
                                            ?.ExpDate && (
                                            <div className="ExpdateBQ">
                                              {formatDate(
                                                detail
                                                  ?.ProdVariantPriceDetails?.[0]
                                                  ?.ExpDate
                                              )}
                                            </div>
                                          )}
                                      </div>
                                      <div
                                        className="Barcodeimage flexDirection"
                                        style={valueStyleColumn}
                                      >
                                        {(barcode || qrcode) &&
                                          handleImageTag(
                                            barcodeOrQr ? 70 : 35,
                                            35,
                                            barcodeOrQr
                                          )}
                                        {mrp && (
                                          <div className="MRPBQ">
                                            {'MRP : ' + (detail?.MRP || 10.0)}
                                          </div>
                                        )}
                                      </div>
                                    </div>
                                    <div className="showInfoCross4Print">
                                      <p>
                                        Vertical
                                        <div>
                                          <GiVerticalFlip size={25} />{' '}
                                        </div>
                                        - {'30mm'}
                                      </p>
                                      <p>
                                        Horizontal
                                        <div>
                                          <GiHorizontalFlip size={30} />{' '}
                                        </div>
                                        - {'50mm'}
                                      </p>
                                    </div>
                                  </>
                                )
                              ) : (
                                <>
                                  <div className="grid50x30_1cross">
                                    <div className="Sticker4 bg-white">
                                      <div className="Sticker4-name">
                                        <p
                                          className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                        >
                                          {proName || 'Product Name'} ({size || '1 PCS'})
                                        </p>
                                        <p>{ProdId || 'QR987968'}</p>
                                      </div>
                                      <img
                                        src={qrCodeImage}
                                        style={{
                                          width: '15mm',
                                          height: '15mm',
                                        }}
                                      />
                                    </div>
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'30mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'50mm'}
                                    </p>
                                  </div>
                                </>
                              );
                            case '50X25 Single':
                              return templateAvailable ? (
                                !(
                                  productName ||
                                  mDate ||
                                  barcode ||
                                  qrcode ||
                                  mrp
                                ) ? (
                                  <Empty />
                                ) : (
                                  <>
                                    <div
                                      className="BarQrprint2"
                                      style={secondValueStyle}
                                    >
                                      <div className="BarQrprint1details flexDirection">
                                        {productName && (
                                          <div
                                            className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                          >
                                            {nickName
                                              ? nickName
                                              : proName
                                                ? proName
                                                : 'Product Name'}
                                          </div>
                                        )}
                                        {mDate &&
                                          detail?.ProdVariantPriceDetails?.[0]
                                            ?.ManufDate && (
                                            <div className="MandateBQ">
                                              {formatDate(
                                                detail
                                                  ?.ProdVariantPriceDetails?.[0]
                                                  ?.ManufDate
                                              )}
                                            </div>
                                          )}
                                      </div>
                                      <div
                                        className="Barcodeimage"
                                        style={valueStyleColumn}
                                      >
                                        {(barcode || qrcode) &&
                                          handleImageTag(
                                            barcodeOrQr ? 70 : 35,
                                            35,
                                            barcodeOrQr
                                          )}
                                        {mrp && (
                                          <div className="MRPBQ">
                                            {'MRP : ' + (detail?.MRP || '10.0')}
                                          </div>
                                        )}
                                      </div>
                                    </div>
                                    <div className="showInfoCross4Print">
                                      <p>
                                        Vertical
                                        <div>
                                          <GiVerticalFlip size={25} />{' '}
                                        </div>
                                        - {'25mm'}
                                      </p>
                                      <p>
                                        Horizontal
                                        <div>
                                          <GiHorizontalFlip size={30} />{' '}
                                        </div>
                                        - {'50mm'}
                                      </p>
                                    </div>
                                  </>
                                )
                              ) : (
                                <>
                                  <div className="grid50x25_1cross">
                                    <div className="Sticker5 bg-white">
                                      <div className="Sticker5-name">
                                        <p
                                          className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                        >
                                          {proName || 'Product Name'} ({size || '1 PCS'})
                                        </p>
                                        <p>{ProdId || 'QR8798639'}</p>
                                      </div>
                                      <img
                                        src={qrCodeImage}
                                        style={{
                                          width: '13mm',
                                          height: '13mm',
                                        }}
                                      />
                                    </div>
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'25mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'50mm'}
                                    </p>
                                  </div>
                                </>
                              );
                            case '100X13 (55MM Printable)':
                              return templateAvailable ? (
                                //"C", "T", "B"
                                !(
                                  productName ||
                                  sellingPrice ||
                                  barcode ||
                                  qrcode
                                ) ? (
                                  <Empty />
                                ) : (
                                  <>
                                    <div
                                      className="BarQrprint9"
                                      style={valueStyleRow}
                                    >
                                      {(barcode || qrcode) &&
                                        handleImageTag(
                                          barcodeOrQr ? 140 : 35,
                                          35,
                                          barcodeOrQr
                                        )}
                                      <div className="BarQrprint1details1">
                                        {productName && (
                                          <div
                                            className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                          >
                                            {nickName
                                              ? nickName
                                              : proName
                                                ? proName
                                                : 'Product Name'}
                                          </div>
                                        )}
                                        {sellingPrice && (
                                          <div className="SellingpriceBQ">
                                            {`Selling Price : ` +
                                              (detail?.SellPrice || '10.0')}
                                          </div>
                                        )}
                                      </div>
                                    </div>
                                    <div className="showInfoCross4Print">
                                      <p>
                                        Vertical
                                        <div>
                                          <GiVerticalFlip size={25} />{' '}
                                        </div>
                                        - {'13mm'}
                                      </p>
                                      <p>
                                        Horizontal
                                        <div>
                                          <GiHorizontalFlip size={30} />{' '}
                                        </div>
                                        - {'100mm'}
                                      </p>
                                    </div>
                                  </>
                                )
                              ) : (
                                <>
                                  <div className="grid100x13_1cross">
                                    <div className="Sticker6 bg-white">
                                      <div className={`text-section6`}>
                                        <p
                                          className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                        >
                                          {proName || 'Product Name'} ({size || '1 PCS'})
                                        </p>
                                        <p>{ProdId || 'QR0970970'}</p>
                                      </div>
                                      <img
                                        src={qrCodeImage}
                                        style={{
                                          width: '11mm',
                                          height: '11mm',
                                        }}
                                      />
                                    </div>
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'13mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'100mm'}
                                    </p>
                                  </div>
                                </>
                              );
                            case '100X15 (70MM Printable)':
                              return templateAvailable ? (
                                // "L","R"
                                !(
                                  productName ||
                                  sellingPrice ||
                                  barcode ||
                                  qrcode ||
                                  mrp
                                ) ? (
                                  <Empty />
                                ) : (
                                  <>
                                    <div
                                      className="BarQrprint1"
                                      style={valueStyleRow}
                                    >
                                      <div className="BarQrprint1details flexDirection">
                                        {productName && (
                                          <div
                                            style={{ textAlign: 'left' }}
                                            className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                          >
                                            {nickName
                                              ? nickName
                                              : proName
                                                ? proName
                                                : 'Product Name'}
                                          </div>
                                        )}
                                        {mrp && (
                                          <div className="MRPBQ">
                                            {'MRP : ' + (detail?.MRP || '10.0')}
                                          </div>
                                        )}
                                        {sellingPrice && (
                                          <div className="SellingpriceBQ">
                                            {`Selling Price : ` +
                                              (detail?.SellPrice || '10.0')}
                                          </div>
                                        )}
                                      </div>
                                      <div className="Qrcodeimage">
                                        {(barcode || qrcode) &&
                                          handleImageTag(
                                            barcodeOrQr ? 90 : 40,
                                            null,
                                            barcodeOrQr
                                          )}
                                      </div>
                                    </div>
                                    <div className="showInfoCross4Print">
                                      <p>
                                        Vertical
                                        <div>
                                          <GiVerticalFlip size={25} />{' '}
                                        </div>
                                        - {'15mm'}
                                      </p>
                                      <p>
                                        Horizontal
                                        <div>
                                          <GiHorizontalFlip size={30} />{' '}
                                        </div>
                                        - {'100mm'}
                                      </p>
                                    </div>
                                  </>
                                )
                              ) : (
                                <>
                                  <div className="grid100x15_1cross">
                                    <div className="Sticker7 bg-white">
                                      <div className="text-section7">
                                        <p
                                          className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                                        >
                                          {proName || 'Product Name'} ({size || '1 PCS'})
                                        </p>
                                        <p>{ProdId || 'QR858755'}</p>
                                      </div>
                                      <img
                                        src={qrCodeImage}
                                        style={{
                                          width: '12mm',
                                          height: '12mm',
                                        }}
                                      />
                                    </div>
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'15mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'100mm'}
                                    </p>
                                  </div>
                                </>
                              );
                            case '100X150':
                              return templateAvailable ? (
                                !(
                                  productName ||
                                  sellingPrice ||
                                  mDate ||
                                  eDate ||
                                  color ||
                                  barcode ||
                                  qrcode ||
                                  mrp
                                ) ? (
                                  <Empty />
                                ) : (
                                  <>
                                    <div
                                      className="BarQrprint7"
                                      style={secondValueStyle}
                                    >
                                      <div className="BarQrprint1details1">
                                        {productName && (
                                          <div
                                            className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                          >
                                            {nickName
                                              ? nickName
                                              : proName
                                                ? proName
                                                : 'Product Name'}
                                          </div>
                                        )}
                                        {sellingPrice && (
                                          <div className="SellingpriceBQ">
                                            {`Selling Price : ` +
                                              detail?.SellPrice}
                                          </div>
                                        )}
                                        {mDate &&
                                          detail?.ProdVariantPriceDetails?.[0]
                                            ?.ManufDate && (
                                            <div className="MandateBQ">
                                              {formatDate(
                                                detail
                                                  ?.ProdVariantPriceDetails?.[0]
                                                  ?.ManufDate
                                              )}
                                            </div>
                                          )}
                                        {eDate &&
                                          detail?.ProdVariantPriceDetails?.[0]
                                            ?.ExpDate && (
                                            <div className="ExpdateBQ">
                                              {formatDate(
                                                detail
                                                  ?.ProdVariantPriceDetails?.[0]
                                                  ?.ExpDate
                                              )}
                                            </div>
                                          )}
                                        {color && (
                                          <div className="ColorBQ">
                                            {colorText}
                                          </div>
                                        )}
                                      </div>
                                      <div
                                        className="Barcodeimage"
                                        style={valueStyleColumn}
                                      >
                                        {(barcode || qrcode) &&
                                          handleImageTag(
                                            barcodeOrQr ? 140 : 35,
                                            35,
                                            barcodeOrQr
                                          )}
                                        {mrp && (
                                          <div className="MRPBQ">
                                            {'MRP : ' + (detail?.MRP || '10.0')}
                                          </div>
                                        )}
                                      </div>
                                    </div>
                                    <div className="showInfoCross4Print">
                                      <p>
                                        Vertical
                                        <div>
                                          <GiVerticalFlip size={25} />{' '}
                                        </div>
                                        - {'150mm'}
                                      </p>
                                      <p>
                                        Horizontal
                                        <div>
                                          <GiHorizontalFlip size={30} />{' '}
                                        </div>
                                        - {'100mm'}
                                      </p>
                                    </div>
                                  </>
                                )
                              ) : (
                                <>
                                  <div className="grid100x150_1cross  bg-white">
                                    <div className="OverAllSticker8">
                                      <div className="StikerBr8">
                                        <p>{detail?.BrName}</p>
                                      </div>
                                      <div className="Sticker8">
                                        <div className="text-section8">
                                          <p>
                                            Product Name:{' '}
                                            <p
                                              className={`field-value ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                                            >
                                              {nickName
                                                ? nickName
                                                : proName
                                                  ? proName
                                                  : 'Product Name'}
                                            </p>
                                          </p>
                                          <p>
                                            SIZE:{' '}
                                            <span className="field-value">
                                              {size || '1 PCS'}
                                            </span>
                                          </p>
                                          <p>
                                            Id:{' '}
                                            <span className="field-value">
                                              {ProdId || 'QR86868'}
                                            </span>
                                          </p>
                                          <p>
                                            MRP:{' '}
                                            <span className="field-value">
                                              {'MRP : ' + (detail?.MRP || '10.0')}
                                            </span>
                                          </p>
                                          <p>
                                            Selling Price:{' '}
                                            <span className="field-value">
                                              {(detail?.SellPrice || '10.0')}
                                            </span>
                                          </p>
                                        </div>
                                        <img
                                          src={qrCodeImage}
                                          style={{
                                            width: '50mm',
                                            height: '50mm',
                                          }}
                                        />
                                      </div>
                                    </div>
                                  </div>
                                  <div className="showInfoCross4Print">
                                    <p>
                                      Vertical
                                      <div>
                                        <GiVerticalFlip size={25} />{' '}
                                      </div>
                                      - {'150mm'}
                                    </p>
                                    <p>
                                      Horizontal
                                      <div>
                                        <GiHorizontalFlip size={30} />{' '}
                                      </div>
                                      - {'100mm'}
                                    </p>
                                  </div>
                                </>
                              );
                            default:
                              return <Empty />;
                          }
                        })()}
                        <p>{dropdownValue}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </Form.Item>
              {!MultiCode && <Form.Item
                name="Copies"
                rules={[
                  {
                    required: true,
                    pattern: /^[1-9]\d*(\.\d+)?$/,
                    message: 'Please Enter Copies',
                  },
                  {
                    validator: async (_, value) => {
                      await validateSafeInput(value); // To block HTML tags & SQL keywords
                      return Promise.resolve();
                    },
                  },
                ]}
              >
                <InputField
                  autoComplete="off"
                  label={<label class="required">Copies</label>}
                  isOnChange={false}
                  onChange={(e) => {
                    CopiesOnChange(e?.target?.value);
                  }}
                />
              </Form.Item>}
              {proName?.length > 12 && printProductName && !MultiCode && (
                <>
                  <div
                    style={{
                      width: '100%',
                      fontSize: '12px',
                      marginTop: '-10px',
                      fontFamily: 'Poppins',
                      fontStyle: 'italic',
                      color: '#ff4d4f',
                    }}
                  >
                    Note: Product name is very long. Please add a short/nick
                    name to proceed print.
                  </div>
                  <Form.Item
                    name="NickName"
                    rules={[
                      {
                        // required: true,
                        message: 'Please Enter Product Short / Nick Name',
                      },
                      {
                        max: 12,
                        message:
                          'Product Short / Nick Name cannot be greater than 12 characters',
                      },
                    ]}
                  >
                    <InputField
                      autoComplete="off"
                      label={`Product Short / Nick Name`}
                      onChange={(e) => {
                        setNickName(e?.target?.value);
                      }}
                      maxLength={12}
                    />
                  </Form.Item>
                </>
              )}
            </div>
            <div
              style={{
                width: '100%',
                display: 'flex',
                justifyContent: 'flex-end',
              }}
            >
              {(!MultiCode || totalCopies > 0) && (
                <Buttons buttonText="Submit" color="901D77" />
              )}
              {MultiCode && totalCopies === 0 && (
                <button
                  type="button"
                  className="product_primary_Button"
                  onClick={() => setstockWiseQrcode(true)}
                >
                  Submit
                </button>
              )} </div>


          </Form>
        }
      />
      < div style={{ display: 'none' }}>
        <div id="StickerPrints0">
          <div className="grid15x15_6cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                console.log(copyCount, "copyCountcopyCountcopyCount")
                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="Sticker0"
                    key={`sticker0-${recordIndex}-${copyIndex}`}
                  >
                    <img
                      src={
                        generateCodeImage(
                          record?.QRCode || record?.ProdId,
                          templateOptions?.codeType
                        ) || base64Image
                      }
                      style={{ width: '52px', height: '52px' }}
                    />
                  </div>
                ));
              })
              : Array.from({ length: copies })?.map((_, index) => (
                <div className="Sticker0" key={`sticker0-${index}`}>
                  <img
                    src={base64Image}
                    style={{ width: '13mm', height: '13mm' }}
                  />
                </div>
              ))}
          </div>
        </div>
        <div id="StickerPrints1">
          <div className="grid22x35_3cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                return Array?.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="Sticker1"
                    key={`sticker1-${recordIndex}-${copyIndex}`}
                  >
                    <div style={{ width: '60%' }}>
                      <p
                        className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
                      >
                        {record.ProdName} ({record.Size}
                        {record.UomName})
                      </p>
                      <p>{record.QRCode}</p>
                    </div>
                    <img
                      src={
                        generateCodeImage(
                          record?.QRCode || record?.ProdId,
                          templateOptions?.codeType
                        ) || base64Image
                      }
                      style={{ width: '52px', height: '52px' }}
                    />
                  </div>
                ))
              }
              )
              : Array?.from({ length: copies })?.map((_, index) => (
                <div className="Sticker1" key={`sticker1-${index}`}>
                  <div style={{ width: '60%' }}>
                    <p
                      className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 8 ? 'text-ellipsis' : ''}`}
                    >
                      {proName} ({size})
                    </p>
                    <p>{ProdId}</p>
                  </div>
                  <img
                    src={base64Image}
                    style={{ width: '16mm', height: '16mm' }}
                  />
                </div>
              ))}
          </div>
        </div>
        <div id="StickerPrints2">
          <div className="grid25x25_4cross">
            {(selectedRecords?.length > 0)
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                console.log(copyCount, 'copyCount2')
                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="sticker25x25"
                    key={`sticker2-${recordIndex}-${copyIndex}`}
                  >
                    <p
                      className={`sticker25x25-name ${nickName ? '' : (record?.ProdName + '(' + record?.Size + '' + record?.UomName + ')')?.length > 14 ? 'text-ellipsis' : ''}`}
                    >
                      <span
                        class={
                          (record?.NickName || record?.ProdName)?.length <= 14
                            ? 'product-name2'
                            : 'product-nameSmall2'
                        }
                      >
                        {record?.NickName || record?.ProdName}
                      </span>
                      <span
                        class={
                          (record?.NickName || record?.ProdName)?.length <= 14
                            ? 'product-size2'
                            : 'product-sizeSmall2'
                        }
                      >
                        ({record?.Size}
                        {record?.UomName})
                      </span>
                    </p>
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        width: '100%',
                        flexDirection: 'column',
                        justifyContent: 'center',
                      }}
                    >
                      <img
                        src={
                          generateCodeImage(
                            record?.QRCode || record?.ProdId,
                            templateOptions?.codeType
                          ) || base64Image
                        }
                        className="sticker25-img"
                        alt="barcode"
                      />
                      <p class="product-id2">
                        {record?.QRCode || record?.ProdId}
                      </p>
                    </div>
                  </div>
                ))
              }


              )
              : Array.from({ length: copies })?.map((_, index) => (
                <div className="sticker25x25" key={`sticker2-${index}`}>
                  <p
                    className={`sticker25x25-name ${nickName ? '' : (proName + '(' + size + ')')?.length > 14 ? 'text-ellipsis' : ''}`}
                  >
                    <span
                      class={
                        proName?.length <= 14
                          ? 'product-name2'
                          : 'product-nameSmall2'
                      }
                    >
                      {nickName
                        ? nickName
                        : proName
                          ? proName
                          : 'Product Name'}
                    </span>
                    <span
                      class={
                        proName?.length <= 14
                          ? 'product-size2'
                          : 'product-sizeSmall2'
                      }
                    >
                      ({size})
                    </span>
                  </p>
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      width: '100%',
                      flexDirection: 'column',
                      justifyContent: 'center',
                    }}
                  >
                    <img
                      src={base64Image}
                      className="sticker25-img"
                      alt="barcode"
                    />
                    <p class="product-id2">{ProdId}</p>
                  </div>
                </div>
              ))}
          </div>
        </div>
        <div id="StickerPrints3">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                console.log(copyCount, 'copyCount3')
                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="Sticker3"
                    key={`sticker3-${recordIndex}-${copyIndex}`}
                  >
                    <div>
                      <p
                        className={`${nickName ? '' : ((record?.NickName || record?.ProdName) + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {record?.NickName || record?.ProdName} ({record?.Size}
                        {record?.UomName})
                      </p>
                      <p>{record?.QRCode || record?.ProdId}</p>
                    </div>
                    <img
                      src={
                        generateCodeImage(
                          record?.QRCode || record?.ProdId,
                          templateOptions?.codeType
                        ) || base64Image
                      }
                      style={{ width: '75px', height: '75px' }}
                    />
                  </div>
                ))
              })
              : Array.from({ length: copies })?.map((_, index) => (
                <div className="Sticker3" key={`sticker3-${index}`}>
                  <div>
                    <p
                      className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                    >
                      {proName} ({size})
                    </p>
                    <p>{ProdId}</p>
                  </div>
                  <img
                    src={base64Image}
                    style={{ width: '75px', height: '75px' }}
                  />
                </div>
              ))}
          </div>
        </div>
        <div id="StickerPrints4">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                console.log(copyCount, 'copyCount4')
                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="Sticker4"
                    key={`sticker4-${recordIndex}-${copyIndex}`}
                  >
                    <div>
                      <p
                        className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {record?.NickName || record?.ProdName} ({record?.Size}
                        {record?.UomName})
                      </p>
                      <p>{record?.QRCode || record?.ProdId}</p>
                    </div>
                    <img
                      src={
                        generateCodeImage(
                          record?.QRCode || record?.ProdId,
                          templateOptions?.codeType
                        ) || base64Image
                      }
                      style={{ width: '75px', height: '75px' }}
                    />
                  </div>
                ))
              })
              : Array.from({ length: copies })?.map((_, index) => (
                <div className="Sticker4" key={`sticker4-${index}`}>
                  <div>
                    <p
                      className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                    >
                      {proName} ({size})
                    </p>
                    <p>{ProdId}</p>
                  </div>
                  <img
                    src={base64Image}
                    style={{ width: '75px', height: '75px' }}
                  />
                </div>
              ))}
          </div>
        </div>
        <div id="StickerPrints5">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                console.log(copyCount, 'copyCount5')
                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="Sticker5"
                    key={`sticker5-${recordIndex}-${copyIndex}`}
                  >
                    <div>
                      <p
                        className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {record?.NickName || record?.ProdName} ({record?.Size}
                        {record?.UomName})
                      </p>
                      <p>{record?.QRCode || record?.ProdId}</p>
                    </div>
                    <img
                      src={
                        generateCodeImage(
                          record?.QRCode || record?.ProdId,
                          templateOptions?.codeType
                        ) || base64Image
                      }
                      style={{ width: '72px', height: '72px' }}
                    />
                  </div>
                ))
              })
              : Array.from({ length: copies })?.map((_, index) => (
                <div className="Sticker5" key={`sticker5-${index}`}>
                  <div>
                    <p
                      className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                    >
                      {proName} ({size})
                    </p>
                    <p>{ProdId}</p>
                  </div>
                  <img
                    src={base64Image}
                    style={{ width: '72px', height: '72px' }}
                  />
                </div>
              ))}
          </div>
        </div>
        <div id="StickerPrints6">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                console.log(copyCount, 'copyCount6')
                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="Sticker6"
                    key={`sticker6-${recordIndex}-${copyIndex}`}
                  >
                    <div className="text-section6">
                      <p
                        className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {record?.NickName || record?.ProdName} ({record?.Size}
                        {record?.UomName})
                      </p>
                      <p>{record?.QRCode || record?.ProdId}</p>
                    </div>
                    <img
                      src={
                        generateCodeImage(
                          record?.QRCode || record?.ProdId,
                          templateOptions?.codeType
                        ) || base64Image
                      }
                      style={{ width: '11mm', height: '11mm' }}
                    />
                  </div>
                ))
              })
              : Array.from({ length: copies })?.map((_, index) => (
                <div className="Sticker6" key={`sticker6-${index}`}>
                  <div className="text-section6">
                    <p
                      className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                    >
                      {proName} ({size})
                    </p>
                    <p>{ProdId}</p>
                  </div>
                  <img
                    src={base64Image}
                    style={{ width: '11mm', height: '11mm' }}
                  />
                </div>
              ))}
          </div>
        </div>
        <div id="StickerPrints7">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                console.log(copyCount, 'copyCount7')
                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="Sticker7"
                    key={`sticker7-${recordIndex}-${copyIndex}`}
                  >
                    <div className="text-section7">
                      <p
                        className={`${nickName ? '' : (record?.ProdName + ' (' + record?.Size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {record?.NickName || record?.ProdName} ({record?.Size}
                        {record?.UomName})
                      </p>
                      <p>{record?.QRCode || record?.ProdId}</p>
                    </div>
                    <img
                      src={
                        generateCodeImage(
                          record?.QRCode || record?.ProdId,
                          templateOptions?.codeType
                        ) || base64Image
                      }
                      style={{ width: '12mm', height: '12mm' }}
                    />
                  </div>
                ))
              })
              : Array.from({ length: copies })?.map((_, index) => (
                <div className="Sticker7" key={`sticker7-${index}`}>
                  <div className="text-section7">
                    <p
                      className={`${nickName ? '' : (proName + ' (' + size + ')')?.length > 12 ? 'text-ellipsis' : ''}`}
                    >
                      {proName} ({size})
                    </p>
                    <p>{ProdId}</p>
                  </div>
                  <img
                    src={base64Image}
                    style={{ width: '12mm', height: '12mm' }}
                  />
                </div>
              ))}
          </div>
        </div>
        <div id="StickerPrints8">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                console.log(copyCount, 'copyCount8')
                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="OverAllSticker8"
                    key={`sticker8-${recordIndex}-${copyIndex}`}
                  >
                    <div className="StikerBr8">
                      <p>{record?.BrName || detail?.BrName}</p>
                    </div>
                    <div className="Sticker8">
                      <div className="text-section8">
                        <p>
                          Product Name:{' '}
                          <p
                            className={`field-value ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {record?.NickName || record?.ProdName}
                          </p>
                        </p>
                        <p>
                          SIZE:{' '}
                          <span className="field-value">
                            {record?.Size}
                            {record?.UomName}
                          </span>
                        </p>
                        <p>
                          Id:{' '}
                          <span className="field-value">
                            {record?.QRCode || record?.ProdId}
                          </span>
                        </p>
                        <p>
                          MRP:{' '}
                          <span className="field-value">
                            {'MRP : ' + record?.MRP}
                          </span>
                        </p>
                        <p>
                          Selling Price:{' '}
                          <span className="field-value">
                            {record?.SellPrice}
                          </span>
                        </p>
                      </div>
                      <img
                        src={
                          generateCodeImage(
                            record?.QRCode || record?.ProdId,
                            templateOptions?.codeType
                          ) || base64Image
                        }
                        style={{ width: '50mm', height: '50mm' }}
                      />
                    </div>
                  </div>
                ))
              })
              : Array.from({ length: copies })?.map((_, index) => (
                <div className="OverAllSticker8">
                  <div className="StikerBr8">
                    <p>{detail?.BrName}</p>
                  </div>
                  <div className="Sticker8" key={`sticker8-${index}`}>
                    <div className="text-section8">
                      <p>
                        Product Name:{' '}
                        <p
                          className={`field-value ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                        >
                          {proName}
                        </p>
                      </p>
                      <p>
                        SIZE: <span className="field-value">{size}</span>
                      </p>
                      <p>
                        Id: <span className="field-value">{ProdId}</span>
                      </p>
                      <p>
                        MRP:{' '}
                        <span className="field-value">
                          {'MRP : ' + detail?.MRP}
                        </span>
                      </p>
                      <p>
                        Selling Price:{' '}
                        <span className="field-value">
                          {detail?.SellPrice}
                        </span>
                      </p>
                    </div>
                    <img
                      src={base64Image}
                      style={{ width: '50mm', height: '50mm' }}
                    />
                  </div>
                </div>
              ))}
          </div>
        </div>
        <div id="25X254cross">
          <div className="grid25x25_4cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                return Array.from({ length: copyCount })?.map((_, copyIndex) => {
                  const hasProductName = !!templateOptions.productName;
                  const hasMrp = !!templateOptions.mrp;

                  const hasMDate = templateOptions.mDate && record?.ManufDate;

                  const hasEDate = templateOptions.eDate && record?.ExpDate;

                  // IMAGE SIZE LOGIC
                  let imageSize = 50;
                  if (!hasMDate && !hasEDate) {
                    imageSize = 52;
                  }

                  if (!hasProductName || !hasMrp) {
                    imageSize = 60;
                  }

                  if (!hasProductName && !hasMrp) {
                    imageSize = 80;
                  }

                  // FLEX DIRECTION LOGIC
                  const forceColumnLayout =
                    !hasProductName || !hasMrp || (!hasMDate && !hasEDate);
                  return (
                    <div
                      className="barcode-wrapper-25x25"
                      key={`Barcode1-${recordIndex}-${copyIndex}`}
                    >
                      <div className="barcode-container-25x25">
                        {templateOptions.value === 'T' && (
                          <div
                            style={{
                              width: '100%',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              flexDirection: forceColumnLayout
                                ? 'column'
                                : 'row',
                            }}
                          >
                            {imageTagBarcodeAndQR(
                              templateOptions.codeType === 'B'
                                ? '90%'
                                : `${imageSize}%`,
                              '7px',
                              record?.QRCode || record?.ProdId
                            )}
                          </div>
                        )}
                        {hasProductName && (
                          <div
                            style={{
                              fontSize: '9px',
                              textAlign: 'center',
                              width: '100%',
                            }}
                            className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {record?.NickName || record?.ProdName}
                          </div>
                        )}
                        {hasMrp && (
                          <div
                            style={{
                              fontSize: '9px',
                              textAlign: 'center',
                              width: '100%',
                            }}
                            className="MRPBQ"
                          >
                            {'₹' + record?.MRP}
                          </div>
                        )}
                        {templateOptions.value === 'C' && (
                          <div
                            style={{
                              width: '100%',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              flexDirection: forceColumnLayout
                                ? 'column'
                                : 'row',
                            }}
                          >
                            {imageTagBarcodeAndQR(
                              templateOptions.codeType === 'B'
                                ? '90%'
                                : `${imageSize}%`,
                              '7px',
                              record?.QRCode || record?.ProdId
                            )}
                          </div>
                        )}
                        {(hasMDate || hasEDate) && (
                          <div
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              gap: '3px',
                            }}
                          >
                            {hasMDate && (
                              <div
                                style={{
                                  fontSize: '8px',
                                  whiteSpace: 'nowrap',
                                  textAlign: 'center',
                                  width: '100%',
                                }}
                                className="MandateBQ"
                              >
                                {hasMDate && !hasEDate ? 'MFG: ' : ''}
                                {formatDate(record?.ManufDate)}
                              </div>
                            )}
                            {hasMDate && hasEDate && (
                              <span style={{ fontSize: '8px' }}>|</span>
                            )}
                            {hasEDate && (
                              <div
                                style={{
                                  fontSize: '8px',
                                  whiteSpace: 'nowrap',
                                  textAlign: 'center',
                                  width: '100%',
                                }}
                                className="ExpdateBQ"
                              >
                                {!hasMDate && hasEDate ? 'EXP: ' : ''}
                                {formatDate(record?.ExpDate)}
                              </div>
                            )}
                          </div>
                        )}
                        {templateOptions.value === 'B' && (
                          <div
                            style={{
                              width: '100%',
                              display: 'flex',
                              alignItems: 'center',
                              justifyContent: 'center',
                              flexDirection: forceColumnLayout
                                ? 'column'
                                : 'row',
                            }}
                          >
                            {imageTagBarcodeAndQR(
                              templateOptions.codeType === 'B'
                                ? '25mm'
                                : `${imageSize}%`,
                              '7px',
                              record?.QRCode || record?.ProdId
                            )}
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })
              }

              )
              : Array.from({ length: copies })?.map((_, index) => {
                const hasProductName = !!templateOptions.productName;
                const hasMrp = !!templateOptions.mrp;

                const hasMDate =
                  templateOptions.mDate &&
                  detail?.ProdVariantPriceDetails?.[0]?.ManufDate;

                const hasEDate =
                  templateOptions.eDate &&
                  detail?.ProdVariantPriceDetails?.[0]?.ExpDate;

                // IMAGE SIZE LOGIC
                let imageSize = 50;
                if (!hasMDate && !hasEDate) {
                  imageSize = 52;
                }

                if (!hasProductName || !hasMrp) {
                  imageSize = 60;
                }

                if (!hasProductName && !hasMrp) {
                  imageSize = 80;
                }

                // FLEX DIRECTION LOGIC
                const forceColumnLayout =
                  !hasProductName || !hasMrp || (!hasMDate && !hasEDate);
                return (
                  <div
                    className="barcode-wrapper-25x25"
                    key={`Barcode1-${index}`}
                  >
                    <div className="barcode-container-25x25">
                      {templateOptions.value === 'T' && (
                        <div
                          style={{
                            width: '100%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            flexDirection: forceColumnLayout
                              ? 'column'
                              : 'row',
                          }}
                        >
                          {imageTagBarcodeAndQR(
                            templateOptions.codeType === 'B'
                              ? '90%'
                              : `${imageSize}%`,
                            '7px'
                          )}
                        </div>
                      )}
                      {hasProductName && (
                        <div
                          style={{
                            fontSize: '9px',
                            textAlign: 'center',
                            width: '100%',
                          }}
                          className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                        >
                          {nickName
                            ? nickName
                            : proName
                              ? proName
                              : 'Product Name'}
                        </div>
                      )}
                      {hasMrp && (
                        <div
                          style={{
                            fontSize: '9px',
                            textAlign: 'center',
                            width: '100%',
                          }}
                          className="MRPBQ"
                        >
                          {'₹' + detail?.MRP}
                        </div>
                      )}
                      {templateOptions.value === 'C' && (
                        <div
                          style={{
                            width: '100%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            flexDirection: forceColumnLayout
                              ? 'column'
                              : 'row',
                          }}
                        >
                          {imageTagBarcodeAndQR(
                            templateOptions.codeType === 'B'
                              ? '90%'
                              : `${imageSize}%`,
                            '7px'
                          )}
                        </div>
                      )}
                      {(hasMDate || hasEDate) && (
                        <div
                          style={{
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            gap: '3px',
                          }}
                        >
                          {hasMDate && (
                            <div
                              style={{
                                fontSize: '8px',
                                whiteSpace: 'nowrap',
                                textAlign: 'center',
                                width: '100%',
                              }}
                              className="MandateBQ"
                            >
                              {hasMDate && !hasEDate ? 'MFG: ' : ''}
                              {formatDate(
                                detail?.ProdVariantPriceDetails?.[0]
                                  ?.ManufDate
                              )}
                            </div>
                          )}
                          {hasMDate && hasEDate && (
                            <span style={{ fontSize: '8px' }}>|</span>
                          )}
                          {hasEDate && (
                            <div
                              style={{
                                fontSize: '8px',
                                whiteSpace: 'nowrap',
                                textAlign: 'center',
                                width: '100%',
                              }}
                              className="ExpdateBQ"
                            >
                              {!hasMDate && hasEDate ? 'EXP: ' : ''}
                              {formatDate(
                                detail?.ProdVariantPriceDetails?.[0]?.ExpDate
                              )}
                            </div>
                          )}
                        </div>
                      )}
                      {templateOptions.value === 'B' && (
                        <div
                          style={{
                            width: '100%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            flexDirection: forceColumnLayout
                              ? 'column'
                              : 'row',
                          }}
                        >
                          {imageTagBarcodeAndQR(
                            templateOptions.codeType === 'B'
                              ? '25mm'
                              : `${imageSize}%`,
                            '7px'
                          )}
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
          </div>
        </div>

        <div id="25X502cross">
          <div className="Cross25X50container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="BarQrprint8"
                    key={`Barcode2-${recordIndex}-${copyIndex}`}
                    style={{ width: '100%' }}
                  >
                    <div className="Barcodeimage" style={valueStyleColumn}>
                      {imageTagBarcodeAndQR(
                        templateOptions.codeType === 'B' ? '90%' : '35%',
                        '6px',
                        record?.QRCode || record?.ProdId
                      )}
                      {templateOptions.productName && (
                        <div
                          className={`productNameBQ ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                        >
                          {record?.NickName || record?.ProdName}
                        </div>
                      )}
                      {templateOptions.mrp && (
                        <div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
                      )}
                    </div>
                  </div>
                ))
              }

              )
              : Array.from({ length: copies })?.map((_, index) => (
                <div
                  className="BarQrprint8"
                  key={`Barcode2-${index}`}
                  style={{ width: '100%' }}
                >
                  <div className="Barcodeimage" style={valueStyleColumn}>
                    {imageTagBarcodeAndQR(
                      templateOptions.codeType === 'B' ? '90%' : '35%'
                    )}
                    {templateOptions.productName && (
                      <div
                        className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {proName}
                      </div>
                    )}
                    {templateOptions.mrp && (
                      <div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
                    )}
                  </div>
                </div>
              ))}
          </div>
        </div>

        <div id="50X30Single">
          {selectedRecords?.length > 0
            ? selectedRecords?.map((record, recordIndex) => {
              const copyCount = generateQRCodeCopy(record?.QRCode);

              return Array.from({ length: copyCount })?.map((_, copyIndex) => (

                <div
                  className="BarQrprint6"
                  style={secondValueStyle}
                  key={`Barcode3-${recordIndex}-${copyIndex}`}
                >
                  <div className="BarQrprint1details flexDirection">
                    {templateOptions.productName && (
                      <div
                        className={`productNameBQ ${record?.NickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {record?.NickName || record?.ProdName}
                      </div>
                    )}
                    {templateOptions.mDate && record?.ManufDate && (
                      <div
                        style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
                        className="MandateBQ"
                      >
                        {record?.ManufDate}
                      </div>
                    )}
                    {templateOptions.eDate && record?.ExpDate && (
                      <div
                        style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
                        className="ExpdateBQ"
                      >
                        {record?.ExpDate}
                      </div>
                    )}
                  </div>
                  <div
                    className="Barcodeimage flexDirection"
                    style={valueStyleColumn}
                  >
                    {imageTagBarcodeAndQR(
                      '70%',
                      '6px',
                      record?.QRCode || record?.ProdId
                    )}
                    {templateOptions.mrp && (
                      <div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
                    )}
                  </div>
                </div>
              ))
            }

            )
            : Array.from({ length: copies })?.map((_, index) => (
              <div
                className="BarQrprint6"
                style={secondValueStyle}
                key={`Barcode3-${index}`}
              >
                <div className="BarQrprint1details flexDirection">
                  {templateOptions.productName && (
                    <div
                      className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                    >
                      {nickName
                        ? nickName
                        : proName
                          ? proName
                          : 'Product Name'}
                    </div>
                  )}
                  {templateOptions.mDate &&
                    detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
                      <div
                        style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
                        className="MandateBQ"
                      >
                        {detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
                      </div>
                    )}
                  {templateOptions.eDate &&
                    detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
                      <div
                        style={{ fontSize: '8px', whiteSpace: 'nowrap' }}
                        className="ExpdateBQ"
                      >
                        {detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
                      </div>
                    )}
                </div>
                <div
                  className="Barcodeimage flexDirection"
                  style={valueStyleColumn}
                >
                  {imageTagBarcodeAndQR('70%')}
                  {templateOptions.mrp && (
                    <div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
                  )}
                </div>
              </div>
            ))}
        </div>

        <div id="50X25Single">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);

                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="BarQrprint2"
                    style={secondValueStyle}
                    key={`Barcode4-${recordIndex}-${copyIndex}`}
                  >
                    <div
                      className="BarQrprint1details flexDirection"
                      style={{ width: '80%' }}
                    >
                      {templateOptions.productName && (
                        <div
                          className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                        >
                          {record?.NickName || record?.ProdName}
                        </div>
                      )}
                      {templateOptions.mDate && record?.ManufDate && (
                        <div
                          style={{ fontSize: '10px' }}
                          className="MandateBQ"
                        >
                          {record?.ManufDate}
                        </div>
                      )}
                      {templateOptions.eDate && record?.ExpDate && (
                        <div
                          style={{ fontSize: '10px' }}
                          className="ExpdateBQ"
                        >
                          {record?.ExpDate}
                        </div>
                      )}
                    </div>
                    <div
                      className="Barcodeimage"
                      style={{
                        valueStyleColumn,
                        width: '60%',
                        flexDirection: 'column',
                      }}
                    >
                      {imageTagBarcodeAndQR(
                        '90%',
                        '6px',
                        record?.QRCode || record?.ProdId
                      )}
                      {templateOptions.mrp && (
                        <div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
                      )}
                    </div>
                  </div>
                ))
              }

              )
              : Array.from({ length: copies })?.map((_, index) => (
                <div
                  className="BarQrprint2"
                  style={secondValueStyle}
                  key={`Barcode4-${index}`}
                >
                  <div
                    className="BarQrprint1details flexDirection"
                    style={{ width: '80%' }}
                  >
                    {templateOptions.productName && (
                      <div
                        className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {nickName
                          ? nickName
                          : proName
                            ? proName
                            : 'Product Name'}
                      </div>
                    )}
                    {templateOptions.mDate &&
                      detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
                        <div
                          style={{ fontSize: '10px' }}
                          className="MandateBQ"
                        >
                          {detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
                        </div>
                      )}
                    {templateOptions.eDate &&
                      detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
                        <div
                          style={{ fontSize: '10px' }}
                          className="ExpdateBQ"
                        >
                          {detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
                        </div>
                      )}
                  </div>
                  <div
                    className="Barcodeimage"
                    style={{
                      valueStyleColumn,
                      width: '60%',
                      flexDirection: 'column',
                    }}
                  >
                    {imageTagBarcodeAndQR('90%')}
                    {templateOptions.mrp && (
                      <div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
                    )}
                  </div>
                </div>
              ))}
          </div>
        </div>

        <div id="100X13(55MMPrintable)">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);
                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="BarQrprint9"
                    key={`Barcode5-${recordIndex}-${copyIndex}`}
                    style={valueStyleRow}
                  >
                    {imageTagBarcodeAndQR(
                      'auto',
                      '6px',
                      record?.QRCode || record?.ProdId
                    )}
                    <div className="BarQrprint1details1">
                      {templateOptions.productName && (
                        <div style={{ fontSize: '8px' }}>
                          {'Product Name :' +
                            (record?.NickName || record?.ProdName)}
                        </div>
                      )}
                      {templateOptions.sellingPrice && (
                        <div style={{ fontSize: '8px' }}>
                          {'Selling Price :' + record?.SellPrice}
                        </div>
                      )}
                    </div>
                  </div>
                ))
              }

              )
              : Array.from({ length: copies })?.map((_, index) => (
                <div
                  className="BarQrprint9"
                  key={`Barcode5-${index}`}
                  style={valueStyleRow}
                >
                  {imageTagBarcodeAndQR()}
                  <div className="BarQrprint1details1">
                    {templateOptions.productName && (
                      <div style={{ fontSize: '8px' }}>
                        {'Product Name :' + proName}
                      </div>
                    )}
                    {templateOptions.sellingPrice && (
                      <div style={{ fontSize: '8px' }}>
                        {'Selling Price :' + detail?.SellPrice}
                      </div>
                    )}
                  </div>
                </div>
              ))}
          </div>
        </div>

        <div id="100X15(70MMPrintable)">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);

                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="BarQrprint1"
                    style={valueStyleRow}
                    key={`Barcode6-${recordIndex}-${copyIndex}`}
                  >
                    <div className="BarQrprint1details flexDirection">
                      {templateOptions.productName && (
                        <div
                          className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                        >
                          {'Product Name: ' +
                            (record?.NickName || record?.ProdName)}
                        </div>
                      )}
                      {templateOptions.mrp && (
                        <div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
                      )}
                      {templateOptions.sellingPrice && (
                        <div className="SellingpriceBQ">
                          {'Selling Price :' + record?.SellPrice}
                        </div>
                      )}
                    </div>
                    <div className="Qrcodeimage" style={{ width: '50%' }}>
                      {imageTagBarcodeAndQR(
                        'auto',
                        '6px',
                        record?.QRCode || record?.ProdId
                      )}
                    </div>
                  </div>
                ))
              }

              )
              : Array.from({ length: copies })?.map((_, index) => (
                <div
                  className="BarQrprint1"
                  style={valueStyleRow}
                  key={`Barcode6-${index}`}
                >
                  <div className="BarQrprint1details flexDirection">
                    {templateOptions.productName && (
                      <div
                        className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {'Product Name' + proName}
                      </div>
                    )}
                    {templateOptions.mrp && (
                      <div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
                    )}
                    {templateOptions.sellingPrice && (
                      <div className="SellingpriceBQ">
                        {'Selling Price :' + detail?.SellPrice}
                      </div>
                    )}
                  </div>
                  <div className="Qrcodeimage" style={{ width: '50%' }}>
                    {imageTagBarcodeAndQR()}
                  </div>
                </div>
              ))}
          </div>
        </div>

        <div id="100X150">
          <div className="container">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);

                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="BarQrprint7"
                    style={secondValueStyle}
                    key={`Barcode7-${recordIndex}-${copyIndex}`}
                  >
                    <div
                      className="BarQrprint1details1"
                      style={{ gap: '10px' }}
                    >
                      {templateOptions.productName && (
                        <div
                          className={`productNameBQ ${nickName ? '' : record?.ProdName?.length > 12 ? 'text-ellipsis' : ''}`}
                        >
                          {'Product Name: ' +
                            (record?.NickName || record?.ProdName)}
                        </div>
                      )}
                      {templateOptions.sellingPrice && (
                        <div className="SellingpriceBQ">
                          {'Selling Price :' + record?.SellPrice}
                        </div>
                      )}
                      {templateOptions.mDate && record?.ManufDate && (
                        <div className="MandateBQ">{record?.ManufDate}</div>
                      )}
                      {templateOptions.eDate && record?.ExpDate && (
                        <div className="ExpdateBQ">{record?.ExpDate}</div>
                      )}
                      {templateOptions.color && (
                        <div className="ColorBQ">
                          {record?.Color || colorText}
                        </div>
                      )}
                    </div>
                    <div
                      className="Barcodeimage"
                      style={{
                        valueStyleColumn,
                        width: '50%',
                        flexDirection: 'column',
                      }}
                    >
                      {
                        <div>
                          {imageTagBarcodeAndQR(
                            '70%',
                            '6px',
                            record?.QRCode || record?.ProdId
                          )}
                        </div>
                      }
                      {templateOptions.mrp && (
                        <div className="MRPBQ">{'MRP : ' + record?.MRP}</div>
                      )}
                    </div>
                  </div>
                ))
              }

              )
              : Array.from({ length: copies })?.map((_, index) => (
                <div
                  className="BarQrprint7"
                  style={secondValueStyle}
                  key={`Barcode7-${index}`}
                >
                  <div
                    className="BarQrprint1details1"
                    style={{ gap: '10px' }}
                  >
                    {templateOptions.productName && (
                      <div
                        className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {'Product Name' + (nickName ? nickName : proName)}
                      </div>
                    )}
                    {templateOptions.sellingPrice && (
                      <div className="SellingpriceBQ">
                        {'Selling Price :' + detail?.SellPrice}
                      </div>
                    )}
                    {templateOptions.mDate &&
                      detail?.ProdVariantPriceDetails?.[0]?.ManufDate && (
                        <div className="MandateBQ">
                          {detail?.ProdVariantPriceDetails?.[0]?.ManufDate}
                        </div>
                      )}
                    {templateOptions.eDate &&
                      detail?.ProdVariantPriceDetails?.[0]?.ExpDate && (
                        <div className="ExpdateBQ">
                          {detail?.ProdVariantPriceDetails?.[0]?.ExpDate}
                        </div>
                      )}
                    {templateOptions.color && (
                      <div className="ColorBQ">{colorText}</div>
                    )}
                  </div>
                  <div
                    className="Barcodeimage"
                    style={{
                      valueStyleColumn,
                      width: '50%',
                      flexDirection: 'column',
                    }}
                  >
                    {<div>{imageTagBarcodeAndQR('70%')}</div>}
                    {templateOptions.mrp && (
                      <div className="MRPBQ">{'MRP : ' + detail?.MRP}</div>
                    )}
                  </div>
                </div>
              ))}
          </div>
        </div>

        <div id="15X156cross">
          <div
            className="labelGrid15"
            style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
              width: '100%',
            }}
          >
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);

                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="label15"
                    key={`Barcode8-${recordIndex}-${copyIndex}`}
                  >
                    <div className="BarQrprint2details alignCenterFlexDirectionColumn">
                      {templateOptions.value === 'T' &&
                        imageTagBarcodeAndQR(
                          templateOptions.codeType === 'B' ? '100%' : '50%',
                          '6px',
                          record?.QRCode || record?.ProdId
                        )}
                      {templateOptions.productName && (
                        <div
                          style={{
                            textAlign: 'center',
                            fontSize: '6px',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            whiteSpace: 'nowrap',
                            width: '90%',
                          }}
                          className="productNameBQ"
                        >
                          {record?.NickName
                            ? record?.NickName
                            : record?.ProdName}
                        </div>
                      )}
                      {templateOptions.value === 'C' &&
                        imageTagBarcodeAndQR(
                          templateOptions.codeType === 'B'
                            ? '80%'
                            : !templateOptions.productName &&
                              !templateOptions.mrp
                              ? '80%'
                              : '35%',
                          '6px',
                          record?.QRCode || record?.ProdId
                        )}
                      {templateOptions.mrp && (
                        <div
                          style={{
                            width: '100%',
                            textAlign: 'center',
                            fontSize: '6px',
                          }}
                          className="MRPBQ"
                        >
                          {'₹:' + record?.MRP}
                        </div>
                      )}
                      {templateOptions.value === 'B' &&
                        imageTagBarcodeAndQR(
                          templateOptions.codeType === 'B' ? '100%' : '50%',
                          '6px',
                          record?.QRCode || record?.ProdId
                        )}
                    </div>
                  </div>
                ))
              }

              )
              : Array.from({ length: copies })?.map((_, index) => (
                <div className="label15" key={`Barcode8-${index}`}>
                  <div className="BarQrprint2details alignCenterFlexDirectionColumn">
                    {templateOptions.value === 'T' &&
                      imageTagBarcodeAndQR(
                        templateOptions.codeType === 'B' ? '100%' : '50%'
                      )}
                    {templateOptions.productName && (
                      <div
                        style={{
                          textAlign: 'center',
                          fontSize: '6px',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                          width: '90%',
                        }}
                        className={`productNameBQ ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                      >
                        {nickName
                          ? nickName
                          : proName
                            ? proName
                            : 'Product Name'}
                      </div>
                    )}
                    {templateOptions.value === 'C' &&
                      imageTagBarcodeAndQR(
                        templateOptions.codeType === 'B'
                          ? '80%'
                          : !templateOptions.productName &&
                            !templateOptions.mrp
                            ? '80%'
                            : '35%'
                      )}
                    {templateOptions.mrp && (
                      <div
                        style={{
                          width: '100%',
                          textAlign: 'center',
                          fontSize: '6px',
                        }}
                        className="MRPBQ"
                      >
                        {'₹:' + (detail?.MRP ? detail?.MRP : 10.0)}
                      </div>
                    )}
                    {templateOptions.value === 'B' &&
                      imageTagBarcodeAndQR(
                        templateOptions.codeType === 'B' ? '100%' : '50%'
                      )}
                  </div>
                </div>
              ))}
          </div>
        </div>
        {/* //Qrcode */}
        <div id="22X353cross">
          <div className="grid22x35_3cross">
            {selectedRecords?.length > 0
              ? selectedRecords?.map((record, recordIndex) => {
                const copyCount = generateQRCodeCopy(record?.QRCode);

                return Array.from({ length: copyCount })?.map((_, copyIndex) => (
                  <div
                    className="barcode-wrapper-22x35"
                    key={`Barcode9-${recordIndex}-${copyIndex}`}
                  >
                    <div
                      className="barcode-container-22x35"
                      style={{
                        alignItems: 'center',
                        flexDirection:
                          templateOptions.value === 'T'
                            ? 'column'
                            : 'column-reverse',
                      }}
                    >
                      {imageTagBarcodeAndQR(
                        templateOptions.codeType === 'B'
                          ? '100%'
                          : !templateOptions.mrp &&
                            !templateOptions.productName
                            ? '60%'
                            : '40%',
                        '8px',
                        record?.QRCode || record?.ProdId
                      )}
                      {(templateOptions.productName ||
                        templateOptions.mrp) && (
                          <div
                            style={{
                              display: 'flex',
                              flexDirection: 'column',
                              alignItems: 'center',
                              justifyContent: 'center',
                            }}
                          >
                            {templateOptions.productName && (
                              <div
                                className={`productNameBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'} ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                              >
                                {record?.NickName
                                  ? record?.NickName
                                  : record?.ProdName}
                              </div>
                            )}
                            {templateOptions.mrp && (
                              <div
                                className={`MRPBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'}`}
                              >
                                {'MRP : ' + record?.MRP}
                              </div>
                            )}
                          </div>
                        )}
                    </div>
                  </div>
                ))
              }

              )
              : Array.from({ length: copies })?.map((_, index) => (
                <div
                  className="barcode-wrapper-22x35"
                  key={`Barcode9-${index}`}
                >
                  <div
                    className="barcode-container-22x35"
                    style={{
                      alignItems: 'center',
                      flexDirection:
                        templateOptions.value === 'T'
                          ? 'column'
                          : 'column-reverse',
                    }}
                  >
                    {imageTagBarcodeAndQR(
                      templateOptions.codeType === 'B'
                        ? '100%'
                        : !templateOptions.mrp && !templateOptions.productName
                          ? '60%'
                          : '40%',
                      '8px'
                    )}
                    {(templateOptions.productName || templateOptions.mrp) && (
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'column',
                          alignItems: 'center',
                          justifyContent: 'center',
                        }}
                      >
                        {templateOptions.productName && (
                          <div
                            className={`productNameBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'} ${nickName ? '' : proName?.length > 12 ? 'text-ellipsis' : ''}`}
                          >
                            {nickName
                              ? nickName
                              : proName
                                ? proName
                                : 'Product Name'}
                          </div>
                        )}
                        {templateOptions.mrp && (
                          <div
                            className={`MRPBQ ${templateOptions.codeType === 'B' ? '' : 'productNameBQSmall'}`}
                          >
                            {'MRP : ' + detail?.MRP}
                          </div>
                        )}
                      </div>
                    )}
                  </div>
                </div>
              ))}
          </div>
        </div>
      </div >
      <DefaultModal
        open={openExcel}
        title="Bulk Upload"
        footer={true}
        width={excelDataValues?.length > 0 ? 2500 : 600}
        className={'bulkuploadmodal'}
        children={
          <>
            <ProductExcel
              CategoryNames={CategoryNames}
              CategoryId={CategoryId}
              Catconfigid={CatconfigId}
              SubcatId={SubcatId}
              SubCatData={Subcatnames}
              Subcatnumfid={SubcatNumFId}
              Allbranddata={BrandName}
              AllBrandId={BrandId}
              Allbranddatanumfid={BrandNumFId}
              CategoryName1={CategoryNames}
              TaxDatas={combinedTaxData}
              Unit={Unit}
              SuplierNames={SuplierNames}
              handleSubmit={handleSubmitbulk}
            />
            {Bulkpost && (
              <div className="Bulkuploadpost">
                <div align="center" class="fondLoader">
                  <div className="contener_general">
                    <div className="contener_mixte">
                      <div className="ballcolor ball_1">&nbsp;</div>
                    </div>
                    <div className="contener_mixte">
                      <div className="ballcolor ball_2">&nbsp;</div>
                    </div>
                    <div className="contener_mixte">
                      <div className="ballcolor ball_3">&nbsp;</div>
                    </div>
                    <div className="contener_mixte">
                      <div className="ballcolor ball_4">&nbsp;</div>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </>
        }
        handleSubmit={handleSubmit}
        handleCancel={handleCancel}
      />

      <DefaultModal
        title="ONLINE IMAGE UPLOADER"
        width={800}
        open={imageopen}
        footer={
          selectedImage === null || selectedImage === undefined ? false : true
        }
        buttonText="Submit"
        children={
          <Form className="">
            <div className="productonlineImg">
              {imagedata?.map((item, index) => (
                <div
                  className={`singleimg ${selectedImage === item ? 'selected' : ''}`}
                  key={index}
                  onClick={() => setSelectedImage(item)}
                >
                  <img
                    src={item.image}
                    style={{ height: '100%', width: '100%' }}
                    alt="no image"
                  />
                </div>
              ))}
            </div>
          </Form>
        }
        handleSubmit={submitimage}
        handleCancel={handleimage}
      />

      <DefaultModal
        title="Product Image"
        width={500}
        open={uploadImageModal}
        footer={false}
        handleCancel={handleImageModalClose}
        className={'productMtrImgUpload1'}
        children={
          <div className="productMtrImgUpload">
            <CropUpload
              key={rowRecord?.ProdId}
              isProductList={{
                isProductListPutapi: true,
                record: rowRecord,
                imagePutFunction: handleImageUpload,
              }}
              onlineImage={onlineImage}
              ImageLink={rowRecord?.ProdLogo || null}
              updateImageUrl={imageModalRowIndex ? updateImageUrl : () => { }}
              handleClose={handleImageModalClose}
            />
            <button
              type="button"
              className={
                rowRecord?.ProdLogo
                  ? 'productListBrowseImageButton1'
                  : 'productListBrowseImageButton2'
              }
              onClick={() =>
                browseImage(rowRecord?.ProdName, imageModalRowIndex)
              }
            >
              Browse Image
            </button>
          </div>
        }
      />
      <DefaultModal
        open={openPaddleOCR}
        destroyOnClose
        title={
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'flex-start',
              gap: '1rem',
              flexDirection: 'column',
            }}
          >
            <span>Scan Menu Card</span>
            <button
              onClick={() => setShowTips(!showTips)}
              style={{
                padding: '6px 12px',
                backgroundColor: '#f6ffed',
                border: '1px solid #b7eb8f',
                borderRadius: 6,
                cursor: 'pointer',
                fontSize: 12,
                color: '#52c41a',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: 6,
                fontWeight: 400,
                fontFamily: 'Poppins',
              }}
            >
              {showTips ? <FiEyeOff size={14} /> : <FiInfo size={14} />}{' '}
              {showTips ? 'Hide Tips' : 'Show Tips'}
            </button>
          </div>
        }
        handleCancel={() => {
          setOpenPaddleOCR(false);
          setUploadedFile(null);
          setUploadedFiles([]);
          setBreadData([]);
        }}
        footer={false}
        width={600}
        children={
          <div
            style={{
              padding: '24px',
              backgroundColor: '#fafafa',
              minHeight: '400px',
            }}
          >
            <MultiCameraCropOCR
              showTips={showTips}
              handleProcessMultipleOCR={handleProcessMultipleOCR}
            />
          </div>
        }
      />
      <DefaultModal
        open={breadModalOpen}
        title="Scanned Products"
        handleCancel={() => setBreadModalOpen(false)}
        footer={false}
        children={
          <>
            <div>
              <div
                style={{
                  height: '70vh',
                  overflow: 'auto',
                  scrollbarWidth: 'thin',
                }}
              >
                <ScannedProductTable
                  data={breadData}
                  editable={true}
                  onDataChange={setBreadData}
                />
              </div>
              <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
                <Buttons
                  buttonText="SUBMIT"
                  color="901D77"
                  handleSubmit={() => {
                    handleBulkUpload(breadData);
                    setBreadModalOpen(false);
                    setBreadData([]);
                  }}
                  icon={<ArrowRightOutlined />}
                  htmlType={true}
                />
              </div>
            </div>
          </>
        }
      />
      <DefaultModal
        open={stockWiseQrcode}
        title="Stock Wise Qrcode"
        handleCancel={() => setstockWiseQrcode(false)}
        handleSubmit={() => {
          if (totalCopies == 0) {
            message.error("Please enter copies count")
            return;
          }
          else {
            setstockWiseQrcode(false)
            onFinish();
          }
        }}
        footer={true}
        children={
          <>
            <div className='ProductList-pwiseQrcode'>
              <Table
                columns={[
                  { title: 'Product Name', dataIndex: 'productName', key: 'productName' },
                  {
                    title: 'Copies Count',
                    dataIndex: 'copiesCount',
                    key: 'copiesCount',
                    render: (text, record) => (
                      <input
                        className='inputpwiseQR'
                        type="number"
                        min="1"
                        value={record.copiesCount}
                        onChange={(e) => {
                          const newValue = parseInt(e.target.value);
                          setQrandbarcodeDatas(prev =>
                            prev.map(item =>
                              item.key === record.key
                                ? { ...item, copiesCount: newValue }
                                : item
                            )
                          );
                        }}
                        style={{ width: '80px' }}
                      />
                    )
                  }
                ]}
                dataSource={QrandbarcodeDatas}
                rowKey="ProdId"
                pagination={false}
                size="small"
                rowClassName={(record) =>
                  record.StockAvailable === "N" ? 'row-red' : ''
                }
              />
            </div>
            <div className='indicationInfo'>
              <p></p>
              <span>Stock is not Maintained</span>
            </div>
          </>
        }
      />
      <DefaultModal
        open={productWiseQrcode}
        title="Product Wise Qrcode"
        handleCancel={() => setProductWiseQrcode(false)}
        handleSubmit={() => {
          if (totalCopies == 0) {
            message.error("Please enter copies count")
            return;
          }
          else {
            setProductWiseQrcode(false)
            onFinish();
          }

        }} footer={true}

        children={
          <>
            <div className='ProductList-pwiseQrcode'>
              <Table
                columns={[
                  { title: 'Product Name', dataIndex: 'productName', key: 'productName' },
                  // { title: 'Stock Count', dataIndex: 'StockAvailable', key: 'StockAvailable' },
                  {
                    title: 'Copies Count',
                    dataIndex: 'copiesCount',
                    key: 'copiesCount',
                    render: (text, record, index) => (
                      <input
                        type="number"
                        className='inputpwiseQR'
                        min="1"
                        value={record.copiesCount}
                        onChange={(e) => {
                          const newValue = parseInt(e.target.value) || 1;
                          setQrandbarcodeDatas(prev =>
                            prev.map(item =>
                              item.key === record.key
                                ? { ...item, copiesCount: newValue }
                                : item
                            )
                          );
                        }}
                        style={{ width: '80px' }}
                      />
                    )
                  }
                ]}
                dataSource={QrandbarcodeDatas}
                rowKey="ProdId"
                pagination={false}
                size="small"
              />
            </div>


          </>
        }
      />

      <OCRLoader
        isVisible={isOCRProcessing.Loader}
        imageCount={isOCRProcessing.Length || 1}
      />
    </div >
  );
};

export default ProductList;