import React, {
  useState,
  useRef,
  useEffect,
  useCallback,
  useContext,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
  Button,
  Form,
  Input,
  Table,
  Space,
  Select,
  Checkbox,
  AutoComplete,
  Switch,
  Tooltip,
  Popconfirm,
} from 'antd';
import { TiDelete } from 'react-icons/ti';
import { CiCalculator1 } from 'react-icons/ci';
import { Tables } from '../../../../Components/Tables/Table';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
import { DeleteFilled } from '@ant-design/icons';
import { Radio } from 'antd';
import moment from 'moment';
import FormHeader from '../../../PageComponents/FormHeader';
import {
  changeCustomerDelete,
  changeCustomerID,
  changeReorderHoldDetails,
  ChangeWSProduct,
  getSelectedFavItems,
  GlobalProductCategorie,
  getLayoutproductCard,
  GlobalProductSubCategorie,
  getAllCustomer,
  getCardDataWithoutSub,
  getCardDataWithoutSubmodule,
  changeSelectedCustId,
  changeSelectedOption,
  changeHoldOrderDtl,
  changeCombofocus,
  ChangeSelectedCustDisable,
  GlobalReorderHoldDetails,
  GlobalBookingType,
  GlobalEstimateBooking,
  GlobalSelProdWiseEst,
  changeSelProdWiseEst,
  changeEstimateBooking,
  changeOrderType,
  GlobalBookingTypeBoth,
  changeReorderProductDetails,
  ChangeOverAllDiscEstimate,
  ChangeOverAllDiscSales,
  PreferenceData,
  ChangeComboCarddata,
  getPreferenceData,
  getCustomerForHold,
  PostBlockSlots,
} from '../../../../Features/BookingScreen/BookingData/BookingData';
import { getTemplateData } from '../../../../Features/ThemeChange/ThemeChange';
import { DropDowns } from '../../../../Components/Forms/DropDown.jsx';
import { ArrowRightOutlined, CloseSquareFilled } from '@ant-design/icons';
import { InputField } from '../../../../Components/Forms/InputField';
import { Messages } from '../../../../Components/Notifications/Messages';
import Buttons from '../../../../Components/Forms/Buttons';
import ProductForm from '../../../../Pages/BookingScreen/Forms/QuickAdd/QuickAdd.jsx';
import {
  GlobalAddCustomerDetails,
  getAddCustomerDetails,
  postAddCustomerDetails,
  triggerCustomerRefresh,
} from '../../../../Features/BookingScreen/Customer/addCustomer';
import {
  extractLastNumberOrderId,
  getSession,
  validateSafeInput,
} from '../../../../Services/Others';
import { getExtTabledata } from '../../../../Features/ExteraCharges/ExtraCharges';
import {
  globalExtraChargesType,
  ChangeTotalAmount,
  globalExtraTotalAmount,
} from '../../../../Features/ExteraCharges/ExtraCharges.js';
import WeightScaleComp from '../../../../Components/WeightScale/weightScale.jsx';
import {
  gettinghold,
  puttinghold,
  changeholddata,
} from '../../../../Features/BookingScreen/HoldOption/HoldOption.js';
import {
  changeOrderCardDetails,
  GlobalOrderCardDetails,
  getProductsearch,
} from '../../../../Features/BookingScreen/BookingData/BookingData';
import { AiOutlineDownCircle, AiOutlineUpCircle } from 'react-icons/ai';
import '../../../../Styles/BookingScreen/Components/BookingFunctionality/FeaturesFunctionalities.scss';
import {
  IoCloseSharp,
  IoPersonAddSharp,
  IoSearchOutline,
} from 'react-icons/io5';
import { GrCheckboxSelected } from 'react-icons/gr';
import { BiCustomize } from 'react-icons/bi';
import { DatePicProd } from '../../../../Components/Forms/DatePickerProduct.jsx';
import {
  GlobalPreOrderList,
  GlobalpreOrderOpen,
} from '../../../../Features/BookingScreen/PreOrder/PreOrder.js';
import Imageupload from '../../../../Components/Forms/Upload.jsx';
import { useApplyOfferto_CardDetail } from '../UtillComponents/BSNavBarOffer/BSNavBarOffer_CustomHooks.jsx';
import { getCombolist } from '../../../../Features/ComboMaster/ComboMaster.js';
import {
  ChangeFullFreeProductList,
  changeFullOfferAppliedProducts,
  changeLoyaltyConsumedQuantities,
} from '../../../../Features/Offer/Offernew/BookingOffernew.js';
import { v4 as uuidv4 } from 'uuid';
import { ApplicationPreferences } from '../../../../Features/BrachLogin/BranchLogin.js';
import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
import { FaEdit, FaMapMarkedAlt, FaTrash } from 'react-icons/fa';
import { MdHome, MdLocationOn } from 'react-icons/md';
import { RadioGrpButton } from '../../../../Components/Forms/RadioGroup.jsx';

const FeaturesFunctionalities = (props) => {
  const { closeModal = () => {} } = props;
  const applyOffer = useApplyOfferto_CardDetail();
  const EditableContext = React.createContext(null);
  const EditableContext1 = React.createContext(null);
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');
  const dispatch = useDispatch();
  const formRef = useRef();
  const formWsRef = useRef();
  const formRefExtraCharges = useRef();
  const ExtraChargesType = useSelector(globalExtraChargesType);
  const GlobalExtraCharge = useSelector(globalExtraTotalAmount);
  const ReorderHoldDetails = useSelector(GlobalReorderHoldDetails);
  const BookingType = useSelector(GlobalBookingType);
  const BookingTypeBoth = useSelector(GlobalBookingTypeBoth);
  const [dataSource, setDataSource] = useState(
    ExtraChargesType.filter((item) => item.ActiveStatus == 'A')
  );
  const [dataSource1, setDataSource1] = useState(
    ExtraChargesType.filter((item) => item.ActiveStatus == 'A')
  );
  const [ImageUrl, setImageUrl] = useState(null);
  const preOrder = useSelector(GlobalpreOrderOpen);
  const PreOrderList = useSelector(GlobalPreOrderList);
  const withoutPreOrderList = useSelector(GlobalOrderCardDetails);
  const PreferenceDatas = useSelector(PreferenceData);
  console.log(PreferenceDatas, 'PreferenceDatas');
  const CartOrderDetails = preOrder ? PreOrderList : withoutPreOrderList;
  const [InitialOutStandingType, setInitialOutStandingType] = useState(null);
  const [amountType, setAmountType] = useState('C');

  const templateData = useSelector(getTemplateData);
  const prodCat = useSelector(GlobalProductCategorie);
  const ProdSubCat = useSelector(GlobalProductSubCategorie);

  const GlobalAddCustomerDetails1 = useSelector(GlobalAddCustomerDetails);
  const GlobEstBooking = useSelector(GlobalEstimateBooking);
  const GlobProdwisedata = useSelector(GlobalSelProdWiseEst);

  const [hold, setHold] = useState(props.modalOpen);
  const [WeightScale, setWeightScale] = useState(props.WeightScale);
  const [WeightScale2, setWeightScale2] = useState(true);

  const [CusDetails, setCusDetails] = useState(false);
  const [zipCodeData, setZipCodeData] = useState(false);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [totalAmount, setTotalAmount] = useState(0);
  const [Tabledata, setTabledata] = useState();
  const [extdata, setExtdata] = useState([]);
  const [extdata1, setExtdata1] = useState([]);
  const [SelectData, setSelectData] = useState([]);

  const [SelectData2, setSelectData2] = useState([]);
  const [oldUserId, setoldUserId] = useState(null);
  const [CalcProductRate, setCalcProductRate] = useState();
  const [CalcProductWeight, setCalcProductWeight] = useState();

  const [WSProductList, setWSProductList] = useState([]);
  const [ProductValue, setProductValue] = useState();
  const [WSProductDataSource, setWSProductDataSource] = useState([]);
  const [WSProductRate, setWSProductRate] = useState(0);
  const [WSProductWeight, setWSProductWeight] = useState(0);
  const [WSTotalPrice, setWSTotalPrice] = useState(0);
  const [WSSelectedStockDetail, setWSSelectedStockDetail] = useState([]);
  const [WSSelectedOnekgProd, setWSSelectedOnekgProd] = useState([]);
  const [CalcPriceWeightOpen, setCalcPriceWeightOpen] = useState(false);
  const [wsport, setwsport] = useState(null);

  const [isOpen, setIsOpen] = useState(false);
  const [Searchopen, setSearchopen] = useState(false);

  const [gender, setGender] = useState('M');
  const [isSearching, setIsSearching] = useState(false);
  const [suggestionClicked, setSuggestionClicked] = useState(false);
  const [selectSearchDefaultValue, setselectSearchDefaultValue] = useState('');
  const [TableName, setTableName] = useState([]);
  const [Checkbox1, setCheckbox1] = useState(true);
  const [selectedProduct, setselectedProduct] = useState();

  const [inputValue, setInputValue] = useState('');
  const [suggestions, setSuggestions] = useState(['prematix', 'pr']);
  const [searchResults, setSearchResults] = useState([]);
  const [selectedSearchValue, setselectedSearchValue] = useState('CustMobile');

  const [selectedValue, setSelectedValue] = useState(null);
  const [offerType, setofferType] = useState('P');
  const [OfferValue, setOfferValue] = useState(null);
  const [Maritalstatus, setMaritalstatus] = useState('N');
  const [allowDecimal, setAllowDecimal] = useState(false);
  const [DobDate, setDobDate] = useState();
  const [SpouseDobDate, setSpouseDobDate] = useState();
  const [anniversaryDate, setanniversaryDate] = useState();
  const [customerAddress, setCustomerAddress] = useState();
  const appPreferences = useSelector(ApplicationPreferences);
  const { selectedDate } = useDateStore();
  const salespagefields = appPreferences?.find(
    (pref) => pref?.PreferredCatName === 'Sales Page Fields'
  )?.PreferenceCatDetails;
  const AvailableDate = salespagefields?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
      type?.PreferredStatus === 'Y'
  );
  const commonModulePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Common Module'
  )?.PreferenceCatDetails;
  const sportsAppPreference = commonModulePreference?.find(
    (preference) =>
      preference?.PreferredSubCatName === 'SportsApp' &&
      preference?.PreferredStatus === 'Y'
  );
  const [addressPreview, setAddressPreview] = useState([]);
  const [addressesList, setAddressesList] = useState([]);
  const [addressTypes, setAddressTypes] = useState({});
  const [editingIndex, setEditingIndex] = useState(null);

  const yesNoOptions = [
    { value: 'A', label: 'Active' },
    { value: 'D', label: 'Deactive' },
  ];
  useEffect(() => {
    fetchdata();
    getPreference();
  }, []);
  useEffect(() => {
    getPreference();
  }, [PreferenceDatas]);

  useEffect(() => {
    hold ? dispatch(changeCombofocus(true)) : dispatch(changeCombofocus(false));
  }, [hold]);
  useEffect(() => {
    WeightScale
      ? dispatch(changeCombofocus(true))
      : dispatch(changeCombofocus(false));
  }, [WeightScale]);
  useEffect(() => {
    WeightScale2
      ? dispatch(changeCombofocus(true))
      : dispatch(changeCombofocus(false));
  }, [WeightScale2]);

  useEffect(() => {
    if (preOrder) {
      if (GlobalExtraCharge?.length > 0) {
        if (
          GlobalExtraCharge?.[0]?.ProdId === null ||
          (GlobalExtraCharge?.[0]?.ProdId === '' &&
            GlobalExtraCharge?.[0]?.InwardDtlId === '')
        ) {
          setCheckbox1(true);
        } else {
          setCheckbox1(false);
        }
      } else {
        setCheckbox1(true);
      }
    }
  }, [preOrder]);

  useEffect(() => {
    if (props?.mobileNo && String(props?.mobileNo)?.length === 10) {
      handleSelectSuggestion(String(props?.mobileNo));
    }
  }, [props?.mobileNo]);

  useEffect(() => {
    const { addcustomer, ExtraCharges, QuickAdd, reprint } = props;

    if (addcustomer || ExtraCharges || QuickAdd || reprint) {
      dispatch(changeCombofocus(true));
    } else {
      dispatch(changeCombofocus(false));
    }
  }, [props.addcustomer, props.ExtraCharges, props.QuickAdd, props.reprint]);

  useEffect(() => {
    formRef.current?.getFieldsValue()?.Zip === undefined &&
      setZipCodeData(false);
  }, [inputValue]);

  let CustIdForDynamicChange = ` ${' '}${suggestions?.[0]?.CustId?.match(/(.+)-\d+$/)?.[1]}-`;
  const statusFormatters = (index) => {
    const rows = [...TableName];
    const remove = rows?.filter(
      (e) => !(e.ProdName === index?.ProdName && e.UniqueId === index?.UniqueId)
    );

    setTableName(remove);
  };

  const fetchdata = async () => {
    let res = await dispatch(
      getAllCustomer({ CompId: CompId, AppId: AppId, branchId: BranchId })
    ).unwrap();

    if (res?.data?.statusCode == 1) {
      setSuggestions(res?.data?.data);
    }
  };

  const handleSelectSuggestion = (suggestion) => {
    checkExistingCustomer(
      suggestions.filter((a) => a[selectedSearchValue] === suggestion)?.[0]
        ?.CustMobile || suggestion
    );
    setInputValue(
      suggestions.filter((a) => a[selectedSearchValue] === suggestion)?.[0]
        ?.CustMobile || suggestion
    );
  };

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

  function safeRound(amountStr) {
    if (amountStr == null) return allowDecimal ? '0.00' : '0';

    const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
    const num = Number(cleaned);

    if (isNaN(num)) return allowDecimal ? '0.00' : '0';

    return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
  }

  const options = suggestions
    ? suggestions
        ?.filter((item) =>
          selectedSearchValue === 'CustName' ? item.CustName !== null : item
        )
        .map((item) => ({
          value: item?.CustMobile,
          label:
            selectedSearchValue === 'CustMobile'
              ? `${item?.CustMobile} - ${item?.CustName ? item?.CustName : ''} ${item?.CustName ? ' - ' : ''} ${'Id:' + item?.CustId?.match(/-(\d+)$/)?.[1]}`
              : selectedSearchValue === 'CustId'
                ? `${'Id:' + item?.CustId?.match(/-(\d+)$/)?.[1]}${item?.CustName ? ' - ' : ''} ${item?.CustName ? item?.CustName : ''} - ${item?.CustMobile}`
                : selectedSearchValue === 'CustName' &&
                  item?.CustName !== null &&
                  `${item?.CustName ? item?.CustName : ''} ${item?.CustName ? ' - ' : ''} ${item?.CustMobile} - ${'Id:' + item?.CustId?.match(/-(\d+)$/)?.[1]}`,
          CustMobile: item?.CustMobile,
          CustId: item?.CustId?.match(/-(\d+)$/)?.[1],
          CustName: item?.CustName,
        }))
    : GlobalAddCustomerDetails1?.map((item) => ({
        value: item.CustMobile,
        label: `${item?.CustName} ${item?.CustMobile}`,
        CustMobile: item?.CustMobile,
        CustId: item?.CustId,
        CustName: item?.CustName,
      }));
  const handleYesOrNoChange = (value) => {
    setSelectedValue(value);
    formRef.current?.setFieldsValue({ OfferActiveStatus: value });
  };
  const columnshold = [
    {
      title: 'Order.Id',
      key: 'productDetails',
      dataIndex: 'productDetails',
      align: 'center',
      width: '150px',
      onCell: (record) => {
        const productDetails = record?.productDetails;
        const Combodtl =
          record?.productDetails?.[0]?.comboDtl?.[0]?.ComboInwardDetails?.[0]
            ?.ComboDetails;

        return {
          onClick: () => {
            HoldPutfun(productDetails, record, Combodtl);
          },
        };
      },
      render: (productDetails, record) => (
        <a
          style={{ color: 'black' }}
          onClick={() => HoldPutfun(productDetails, record)}
        >
          {record?.OrderId &&
            extractLastNumberOrderId(record?.OrderId, record?.FYStatus)}
        </a>
      ),
    },
    {
      title: 'Order Type',
      key: 'productDetails',
      dataIndex: 'productDetails',
      align: 'center',
      width: '150px',
      onCell: (record) => {
        const productDetails = record?.productDetails;
        const Combodtl =
          record?.productDetails?.[0]?.comboDtl?.[0]?.ComboInwardDetails?.[0]
            ?.ComboDetails;

        return {
          onClick: () => {
            HoldPutfun(productDetails, record, Combodtl);
          },
        };
      },
      render: (productDetails, record) => (
        <a
          style={{ color: 'black' }}
          onClick={() => HoldPutfun(productDetails, record)}
        >
          {record?.OrderType == 'E' ? 'Estimate' : 'Sales'}
        </a>
      ),
    },
    ...(sportsAppPreference
      ? [
          {
            title: 'Subcategory',
            key: 'productDetails',
            dataIndex: 'productDetails',
            align: 'center',
            width: '150px',
            onCell: (record) => {
              const productDetails = record?.productDetails;
              const Combodtl =
                record?.productDetails?.[0]?.comboDtl?.[0]
                  ?.ComboInwardDetails?.[0]?.ComboDetails;

              return {
                onClick: () => {
                  HoldPutfun(productDetails, record, Combodtl);
                },
              };
            },
            render: (productDetails, record) => (
              <a
                style={{ color: 'black' }}
                onClick={() => HoldPutfun(productDetails, record)}
              >
                {record?.productDetails?.[0]?.ProdSubCatName}
              </a>
            ),
          },
        ]
      : []),
    {
      title: 'Orders',
      key: 'productDetails',
      dataIndex: 'productDetails',
      width: '150px',
      onCell: (record) => {
        const productDetails = record?.productDetails;
        return {
          onClick: () => {
            HoldPutfun(productDetails, record);
          },
        };
      },
      render: (productDetails, record) => (
        <a
          style={{ color: 'black' }}
          onClick={() => HoldPutfun(productDetails, record)}
        >
          {productDetails?.length > 0 &&
            productDetails
              ?.map(
                (item) =>
                  item.ProdName +
                  ('(' + item.Size + '' + ' ' + item.UomName) +
                  ')'
              )
              .join(',')}
        </a>
      ),
    },
    {
      title: 'Customer Name/Mobile.No/Cust.Id',
      key: 'sno',
      dataIndex: 'CustSuppName',
      width: '150px',
      onCell: (record) => {
        const productDetails = record?.productDetails;
        return {
          onClick: () => {
            HoldPutfun(productDetails, record);
          },
          style: { cursor: 'pointer' },
        };
      },
      render: (text, record) =>
        record?.CustSuppName || record?.CustSuppMobileNo || '-',
    },
    {
      title: 'Delete',
      key: 'sno',
      width: '150px',
      render: (record) => (
        <a className="BSC1Payment-HoldModel-delete">
          <TiDelete
            style={{ cursor: 'pointer' }}
            onClick={() => statusFormatter(record)}
          />
        </a>
      ),
    },
  ];
  const WSStockColumns = [
    {
      title: 'Stock Quantity',
      dataIndex: 'BalanceQty',
      key: 'BalanceQty',
      align: 'right',
      onCell: (record) => {
        return {
          onClick: () => {
            GetProductRate(record);
          },
        };
      },
      render: (text, row) => (
        <a style={{ color: 'black', width: '200px' }}>
          {row.BalanceQty ? row.BalanceQty : 'Stock Not Maintained'}
        </a>
      ),
    },
    {
      title: 'Amount',
      dataIndex: 'SellPrice',
      key: 'SellPrice',
      align: 'right',
      onCell: (record) => {
        return {
          onClick: () => {
            GetProductRate(record);
          },
        };
      },
    },
  ];
  useEffect(() => {
    setWeightScale(props.WeightScale);
  }, [props.WeightScale]);
  // useEffect(() => {
  //   if (!props.addcustomer) {
  //     formRef.current?.resetFields();
  //     setZipCodeData(false);
  //   }
  // }, [props.addcustomer]);
  const ExtTabledata = async () => {
    const data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
    };
    await dispatch(getExtTabledata(data)).unwrap();
  };
  useEffect(() => {
    setDataSource(
      ExtraChargesType.filter(
        (item) => item.ActiveStatus == 'A' && item?.PackageAvilable != 'Y'
      )
    );
    setDataSource1(
      ExtraChargesType.filter(
        (item) => item.ActiveStatus == 'A' && item?.PackageAvilable != 'Y'
      )
    );
  }, [ExtraChargesType]);

  useEffect(() => {
    if (props.ExtraCharges == true) {
      if (ExtraChargesType?.length === 0) {
        ExtTabledata();
      }
    }
  }, [props.ExtraCharges]);

  useEffect(() => {
    setTotalAmount(
      extdata.reduce((sum, item) => sum + item.QTY * item.Price, 0)
    );
  }, [extdata]);

  useEffect(() => {
    setselectedProduct();

    if (GlobalExtraCharge?.length === 0) {
      setTableName([]);
      setExtdata([]);
      setSelectData([]);
    }
  }, [Checkbox1]);
  useEffect(() => {
    if (GlobalExtraCharge?.length > 0) {
      if (
        GlobalExtraCharge?.[0]?.ProdId === null ||
        (GlobalExtraCharge?.[0]?.ProdId === '' &&
          GlobalExtraCharge?.[0]?.InwardDtlId === '')
      ) {
        let globalexdata = GlobalExtraCharge?.map((item) => {
          let mappedItem = {
            UniqueId: item?.ExtraChargeId,
            QTY: item?.OrderQty,
            Price: item?.OrderRate,
            ProdId: null,
            InwardDtlId: null,
            ExtraChargeType: item?.ExtraChargeType,
            TotalAmt: item?.TotalAmt,
            TaxAmt: item?.TaxAmt,
            ProdName: item?.ProdName,
            TaxId: item?.TaxId,
            TaxPercentage: item?.TaxPercentage,
            SinglePc: null,
          };

          // Add SalesId only if it exists
          if (item?.SalesId) {
            mappedItem['SalesId'] = item?.SalesId;
          }

          return mappedItem;
        });
        setExtdata(globalexdata);
        setSelectData(globalexdata?.map((item) => item.UniqueId));
        let mergedArray = mergearrays(dataSource, globalexdata);
        setDataSource(mergedArray);
      } else {
        let globalexdata = GlobalExtraCharge?.map((item) => {
          let mappedItem = {
            UniqueId: item?.ExtraChargeId,
            QTY: item?.OrderQty,
            Price: item?.OrderRate * item?.OrderQty,
            ProdId: item?.ProdId,
            InwardDtlId: item?.InwardDtlId,
            ProdName: item?.ProdName,
            ExtraChargeType: item?.ExtraChargeType,
            TotalAmt: item?.TotalAmt,
            TaxAmt: item?.TaxAmt,
            BookingTypeName: item?.BookingTypeName,
            BookingType: item?.BookingType,
            TaxId: item?.TaxId,
            TaxPercentage: item?.TaxPercentage,
            SinglePc: item?.SinglePc,
          };

          // Add SalesId only if it exists
          if (item?.SalesId) {
            mappedItem['SalesId'] = item?.SalesId;
          }

          return mappedItem;
        });

        setCheckbox1(false);
        setTableName(globalexdata);
        setSelectData([]);
      }
    } else {
      setTableName([]);
      setExtdata([]);
      setSelectData([]);
    }
  }, [GlobalExtraCharge]);
  function mergearrays(array1, array2) {
    let mergedArray = [];

    // Merge array1 into mergedArray
    mergedArray = array1.slice();

    // Merge array2 into mergedArray, ensuring unique objects based on UniqueId
    for (let item2 of array2) {
      let existingItemIndex = mergedArray.findIndex(
        (item) => item.UniqueId === item2.UniqueId
      );
      if (existingItemIndex !== -1) {
        // If item2 exists in mergedArray, update its properties
        mergedArray[existingItemIndex] = {
          ...mergedArray[existingItemIndex],
          ...item2,
        };
      } else {
        // If item2 doesn't exist in mergedArray, add it
        mergedArray.push(item2);
      }
    }
    return mergedArray;
  }
  useEffect(
    () => {
      if (WSProductWeight > 0 && WSProductRate > 0) {
        WSTotalCalculation();
      }
    },
    [WSProductWeight],
    [WSProductRate]
  );

  const addeddata = (record) => {
    if (SelectData.includes(record.UniqueId)) {
      if (totalAmount > 0) {
        setTotalAmount(totalAmount - record.Price * parseInt(record.QTY));
        const remove = extdata?.filter(
          (item) => item.UniqueId !== record.UniqueId
        );
        setExtdata(remove);
        setSelectData(SelectData?.filter((a) => a != record.UniqueId));
      }
    } else {
      setSelectData([...SelectData, record.UniqueId]);
      setTotalAmount(totalAmount + record.Price * parseInt(record.QTY));
      let data = {
        ExtraChargeType: record.ExtraChargeType,
        Price: record.Price,
        QTY: parseInt(record.QTY),
        UniqueId: record.UniqueId,
        TotalAmt: parseFloat(
          formatAmount(parseInt(record.Price) * parseInt(record.QTY))
        ),
        TaxAmt: formatAmount(
          ((record.Price * record.TaxPercentage) /
            (100 + record.TaxPercentage)) *
            record.QTY
        ),
        TaxId: record.TaxId,
        TaxPercentage: record.TaxPercentage,
      };
      setExtdata([data, ...extdata]);
    }
  };
  const formatAmount = (value) => {
    return allowDecimal
      ? parseFloat(value || 0).toFixed(2)
      : Math.round(value || 0);
  };
  const addeddata1 = (record) => {
    // Check if the UniqueId of the record is included in SelectData2
    if (SelectData2.includes(record.UniqueId)) {
      // If included, remove the record from extdata1 and update SelectData2
      const remove = extdata1?.filter(
        (item) => item.UniqueId !== record.UniqueId
      );
      setExtdata1(remove);
      setSelectData2(SelectData2?.filter((a) => a !== record.UniqueId));
    } else {
      // If not included, check for duplicates in extdata1 based on ExtraChargeType and UniqueId
      const isDuplicate = TableName?.some(
        (item) =>
          item.InwardDtlId +
            ' ' +
            item.BookingTypeName +
            ' ' +
            item.SinglePc ===
            selectedProduct && item.UniqueId === record.UniqueId
      );

      if (!isDuplicate) {
        // If not a duplicate, add the UniqueId to SelectData2 and construct data object
        setSelectData2([...SelectData2, record.UniqueId]);

        let data = {
          ExtraChargeType: record.ExtraChargeType,
          Price: record.Price,
          QTY: parseInt(record.QTY),
          UniqueId: record.UniqueId,
          TotalAmt: parseFloat(
            formatAmount(parseInt(record.Price) * parseInt(record.QTY))
          ),
          TaxAmt: formatAmount(
            ((record.Price * record.TaxPercentage) /
              (100 + record.TaxPercentage)) *
              record.QTY
          ),
          TaxId: record?.TaxId,
          TaxPercentage: record.TaxPercentage,
          SinglePc: record?.SinglePc,
        };

        // Add the constructed data object to extdata1
        setExtdata1([data, ...extdata1]);
      }
      // If it's a duplicate, you can handle it accordingly (e.g., show a message)
      else {
        setMessageType('error');
        setMessageData('Data Already Exists');
      }
    }
  };
  const ProfuctName = CartOrderDetails?.find(
    (e) =>
      e.InwardDtlId + ' ' + e.BookingTypeName + ' ' + e.SinglePc ==
      selectedProduct
  );

  const producttName = ProfuctName?.ProdName;

  const globalamount1 = () => {
    if (selectedProduct) {
      setSelectData2([]);
      setExtdata1([]);

      const newArray = extdata1?.map((obj) => ({
        ...obj,
        ProdName:
          ProfuctName?.ProdVariantName !== 'Variant 1'
            ? `${ProfuctName?.ProdName} (${ProfuctName.Size} ${ProfuctName.UomName}) (${ProfuctName.ProdVariantName}${BookingTypeBoth ? ` (${ProfuctName?.BookingTypeName})` : ''})`
            : `${ProfuctName?.ProdName} (${ProfuctName.Size} ${ProfuctName.UomName}) ${BookingTypeBoth ? ` (${ProfuctName?.BookingTypeName})` : ''}`,
        InwardDtlId: ProfuctName?.InwardDtlId,
        ProdId: ProfuctName?.ProdId,
        BookingTypeName: ProfuctName?.BookingTypeName,
        BookingType: ProfuctName?.BookingType,
        // booking type no came from global booking
        SinglePc: ProfuctName?.SinglePc,
      }));
      setTableName([...TableName, ...newArray]);
    }
  };
  const globalamount = async (data) => {
    setSelectData2([]);
    setTableName([]);
    props.ExtraChargesCancle();
    const modifiedData = data?.map(
      ({ UniqueId, ExtraChargeType, Price, QTY, ...rest }) => ({
        ...rest,
        ExtraChargeId: UniqueId,
        ExtraChargeType: ExtraChargeType,
        ProdId: null,
        InwardDtlId: '',
        OrderRate: Price,
        OrderQty: QTY,
        OrderType:
          GlobEstBooking === 'OvrAllEst' ? 'E' : preOrder ? 'PRE' : 'S',
        SinglePc: null,
        BookingTypeName: rest?.BookingTypeName,
        BookingType: rest?.BookingType,
      })
    );

    await dispatch(ChangeTotalAmount(modifiedData));
  };
  const globalamount2 = async (data) => {
    setTotalAmount(0);
    props.ExtraChargesCancle();
    setDataSource(
      ExtraChargesType.filter(
        (item) => item.ActiveStatus == 'A' && item?.PackageAvilable != 'Y'
      )
    );

    const modifiedData = data?.map(
      ({ UniqueId, ExtraChargeType, QTY, Price, ProdName, ...item }) => ({
        ...item,
        SinglePc: item?.SinglePc ? item?.SinglePc : 'N',
        ExtraChargeId: UniqueId,
        ExtraChargeType: ExtraChargeType,
        OrderQty: QTY,
        OrderRate: Price / QTY,
        ProdName: ProdName,
        OrderType:
          GlobEstBooking === 'OvrAllEst'
            ? 'E'
            : GlobEstBooking === 'ParEst'
              ? GlobProdwisedata?.includes(item?.InwardDtlId)
                ? 'E'
                : 'S'
              : preOrder
                ? 'PRE'
                : 'S',
        Size: item?.Size,
        UomName: item?.UomName,
        ProdVariantName: item?.ProdVariantName,
        BookingTypeName: item?.BookingTypeName,
        BookingType: item?.BookingType,
      })
    );
    await dispatch(ChangeTotalAmount(modifiedData));
  };

  const EditableRow = ({ index, ...props }) => {
    const [form] = Form.useForm();
    return (
      <Form form={form} component={false}>
        <EditableContext.Provider value={form}>
          <tr {...props} />
        </EditableContext.Provider>
      </Form>
    );
  };
  const EditableRow1 = ({ index, ...props }) => {
    const [form] = Form.useForm();
    return (
      <Form form={form} component={false}>
        <EditableContext1.Provider value={form}>
          <tr {...props} />
        </EditableContext1.Provider>
      </Form>
    );
  };

  const onChangeProduct = (e) => {
    formRefExtraCharges.current.setFieldsValue({
      Extracharges: e,
    });
    setselectedProduct(e);
  };

  const EditableCell = ({
    title,
    editable,
    children,
    dataIndex,
    record,
    handleSave,
    ...restProps
  }) => {
    const [editing, setEditing] = useState(false);
    const inputRef = useRef(null);
    const form = useContext(EditableContext);

    useEffect(() => {
      if (editing) {
        inputRef?.current?.focus();
      }
    }, [editing]);

    const toggleEdit = () => {
      setEditing(!editing);
      form.setFieldsValue({
        [dataIndex]: record[dataIndex],
      });
    };

    const save = async () => {
      try {
        const values = await form.validateFields();
        toggleEdit();
        handleSave({
          ...record,
          ...values,
        });
      } catch (errInfo) {
        console.log('Save failed:', errInfo);
      }
    };

    let childNode = children;

    if (editable) {
      childNode = editing ? (
        <Form.Item
          style={{
            margin: 0,
          }}
          name={dataIndex}
          rules={[
            {
              required: true,
              pattern: /^[1-9]\d*(\.\d+)?$/,
              message: `${title} is required.`,
            },
          ]}
        >
          <Input
            ref={inputRef}
            type="number"
            onPressEnter={save}
            onBlur={save}
          />
        </Form.Item>
      ) : (
        <div
          className="editable-cell-value-wrap"
          style={{
            paddingRight: 24,
          }}
          onClick={toggleEdit}
        >
          {children}
        </div>
      );
    }

    return <td {...restProps}>{childNode}</td>;
  };
  const EditableCell1 = ({
    title,
    editable,
    children,
    dataIndex,
    record,
    handleSave,
    ...restProps
  }) => {
    const [editing1, setEditing1] = useState(false);
    const inputRef1 = useRef(null);
    const form1 = useContext(EditableContext1);

    useEffect(() => {
      if (editing1) {
        inputRef1?.current?.focus();
      }
    }, [editing1]);

    const toggleEdit1 = () => {
      setEditing1(!editing1);
      form1.setFieldsValue({
        [dataIndex]: record[dataIndex],
      });
    };

    const save1 = async () => {
      try {
        const values = await form1.validateFields();
        toggleEdit1();
        handleSave1({
          ...record,
          ...values,
        });
      } catch (errInfo) {}
    };

    let childNode = children;

    if (editable) {
      childNode = editing1 ? (
        <Form.Item
          style={{
            margin: 0,
          }}
          name={dataIndex}
          rules={[
            {
              required: true,
              pattern: /^[1-9]\d*(\.\d+)?$/,
              message: `${title} is required.`,
            },
          ]}
        >
          <Input
            ref={inputRef1}
            type="number"
            onPressEnter={save1}
            onBlur={save1}
          />
        </Form.Item>
      ) : (
        <div
          className="editable-cell-value-wrap"
          style={{
            paddingRight: 24,
          }}
          onClick={toggleEdit1}
        >
          {children}
        </div>
      );
    }

    return <td {...restProps}>{childNode}</td>;
  };
  const calculateTaxAmount = (record) => {
    return (
      ((record.Price * record.TaxPercentage) / (100 + record.TaxPercentage)) *
      record.QTY
    );
  };
  const WithoutTaxAmountTaxAmount = (record) => {
    return (
      record.Price * record.QTY -
      ((record.Price * record.TaxPercentage) / (100 + record.TaxPercentage)) *
        record.QTY
    );
  };
  const WithTaxAmountTaxAmount = (record) => {
    return record.Price * record.QTY;
  };
  const WithoutTaxAmountTaxAmount2 = (record) => {
    return record.Price - record.TaxAmt;
  };

  const defaultColumns = [
    {
      title: 'ExtraCharge Type',
      key: 'ExtraChargeType',
      dataIndex: 'ExtraChargeType',
      width: '200px',
    },
    {
      title: 'QTY',
      key: 'QTY',
      dataIndex: 'QTY',
      align: 'right',
      width: '100px',
      editable: Checkbox1 ? true : false,
    },
    {
      title: 'Price',
      key: 'Price',
      dataIndex: 'Price',
      align: 'right',
      width: '100px',
      render: (text, record) => (
        <a style={{ color: 'black' }}>
          {formatAmount(WithoutTaxAmountTaxAmount(record))}
        </a>
      ),
    },
    {
      title: 'Tax Amt',
      key: 'TotalTaxAmt',
      dataIndex: 'TotalTaxAmt',
      align: 'right',
      width: '100px',
      render: (text, record) => (
        <a style={{ color: 'black' }}>
          {formatAmount(calculateTaxAmount(record))}
        </a>
      ),
    },
    {
      title: 'Amt',
      key: 'Price',
      dataIndex: 'Price',
      align: 'right',
      width: '100px',
      render: (text, record) => (
        <a style={{ color: 'black' }}>
          {formatAmount(WithTaxAmountTaxAmount(record))}
        </a>
      ),
    },
    {
      title: 'Action',
      key: 'Action',
      dataIndex: 'Action',
      width: '80px',
      render: (text, record) => (
        <Space size="middle">
          <Checkbox
            checked={SelectData?.includes(record.UniqueId) ? true : false}
            onClick={() => addeddata(record)}
            disabled={
              Object.keys(ReorderHoldDetails).length !== 0 &&
              BookingType === 'Dine In' &&
              GlobalExtraCharge.some(
                (item) => item.ExtraChargeId === record.UniqueId
              )
                ? true
                : false
            }
          />
        </Space>
      ),
    },
  ];
  const defaultColumns1 = [
    {
      title: 'ExtraCharge Type',
      key: 'ExtraChargeType',
      dataIndex: 'ExtraChargeType',
      width: '200px',
    },
    {
      title: 'QTY',
      key: 'QTY',
      dataIndex: 'QTY',
      align: 'right',
      width: '100px',
      // editable: Checkbox1 ? true : false,
    },
    {
      title: 'Price1',
      key: 'Price',
      dataIndex: 'Price',
      align: 'right',
      width: '100px',
      render: (text, record) => {
        return (
          <a style={{ color: 'black' }}>
            {formatAmount(WithoutTaxAmountTaxAmount(record))}
          </a>
        );
      },
    },

    {
      title: 'Tax Amt',
      key: 'TotalTaxAmt',
      dataIndex: 'TotalTaxAmt',
      align: 'right',
      width: '100px',
      render: (text, record) => (
        <a style={{ color: 'black' }}>
          {formatAmount(calculateTaxAmount(record))}
        </a>
      ),
    },
    {
      title: 'Amt',
      key: 'Price',
      dataIndex: 'Price',
      align: 'right',
      width: '100px',
      render: (text, record) => (
        <a style={{ color: 'black' }}>
          {formatAmount(WithTaxAmountTaxAmount(record))}
        </a>
      ),
    },
    {
      title: 'Action',
      key: 'Action',
      dataIndex: 'Action',
      width: '80px',
      render: (text, record) => (
        <Space size="middle">
          <Checkbox
            checked={SelectData2?.includes(record.UniqueId) ? true : false}
            onClick={() => addeddata1(record)}
          />
        </Space>
      ),
    },
  ];

  const handleSave = (row) => {
    const newData = [...dataSource];
    const index = newData.findIndex((item) => row.UniqueId === item.UniqueId);
    const item = newData[index];
    if (SelectData?.includes(row.UniqueId)) {
      const isDuplicate = extdata?.some(
        (item) => item.UniqueId === row.UniqueId
      );

      const remove = extdata?.filter((item) => item.UniqueId !== row.UniqueId);

      let data = {
        ExtraChargeType: row.ExtraChargeType,
        Price: row.Price,
        QTY: parseInt(row.QTY),
        TaxAmt: formatAmount(
          ((row.Price * row.TaxPercentage) / (100 + row.TaxPercentage)) *
            row.QTY
        ),
        TotalAmt: row.Price * row.QTY,
        // ((row.Price * row.TaxPercentage) / (100 + row.TaxPercentage) *row.QTY ).toFixed(2),
        TaxId: row.TaxId,
        TaxPercentage: row.TaxPercentage,
        UniqueId: row.UniqueId,
      };
      setExtdata([...remove, data]);
    }
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    // let vv={...newData,
    //   TotalTaxAmt:(row.Price * row.TaxPercentage) / (100 + row.TaxPercentage) * parseInt(row.QTY)

    // }
    const newArray = newData.map((obj) => ({
      ...obj,
      // TotalTaxAmt: parseFloat((obj.Price * obj.TaxPercentage) / (100 + obj.TaxPercentage) * parseInt(obj.QTY)).toFixed(2)
    }));

    setDataSource(newArray);
  };
  const handleSave1 = (row) => {
    const newData = [...TableName];
    const index = newData.findIndex(
      (item) => row.UniqueId === item.UniqueId && row.ProdName === item.ProdName
    );
    const item = newData[index];
    const tax = dataSource?.find((e) => e.UniqueId == item.UniqueId);
    let Taxx = tax?.TaxPercentage;
    let Price2 = tax?.Price;

    const hasUniqueId = TableName.some(
      (item) => item.UniqueId === row.UniqueId
    );
    if (hasUniqueId) {
      let updateQty = [...TableName];

      updateQty[index] = {
        ProdName: row.ProdName,
        ExtraChargeType: row.ExtraChargeType,
        Price: Price2 * row.QTY,
        QTY: parseInt(row.QTY),
        ProdId: row.ProdId,
        InwardDtlId: row.InwardDtlId,
        UniqueId: row.UniqueId,
        //((record.Price * record.TaxPercentage) / (100 + record.TaxPercentage)) *
        TaxAmt: formatAmount(
          ((Price2 * Taxx) / (100 + Taxx)) * parseInt(row.QTY)
        ),
        TotalAmt: formatAmount(parseInt(Price2) * parseInt(row.QTY)),
        BookingTypeName: row.BookingTypeName,
      };
      setTableName(updateQty);
    }
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
  };

  const components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  };
  const components1 = {
    body: {
      row: EditableRow1,
      cell: EditableCell1,
    },
  };
  const ExtraChargescolumns = [
    {
      title: 'Sl.No',
      key: 'sno',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{index + 1}</a>
      ),
      align: 'center',
      width: '150px',
    },
    {
      title: 'Product Name',
      dataIndex: 'ProdName',
      key: 'ProdName',
      width: '150px',
      render: (text, record) => (
        <a style={{ color: 'black' }}>
          {record?.ProdName + '(' + record?.BookingTypeName + ')'}
        </a>
      ),
    },
    {
      title: 'EXTRACHARGE TYPE',
      dataIndex: 'ExtraChargeType',
      key: 'ExtraChargeType',
      align: 'right',
      width: '150px',
    },
    {
      title: 'Price',
      dataIndex: 'Price',
      key: 'Price',
      align: 'right',
      width: '150px',
      render: (text, record) => (
        <a style={{ color: 'black' }}>
          {formatAmount(WithoutTaxAmountTaxAmount2(record))}
        </a>
      ),
    },
    {
      title: 'QTY',
      dataIndex: 'QTY',
      key: 'QTY',
      align: 'center',
      width: '200px',
      editable: true,
    },
    {
      title: ' Tax AMT',
      dataIndex: 'TaxAmt',
      key: 'ProdId',
      align: 'right',
      width: '150px',
      render: (text) => <span>{safeRound(text)}</span>,
    },
    {
      title: 'AMT',
      dataIndex: 'TotalAmt',
      key: 'ProdId',
      align: 'right',
      width: '150px',
      render: (amt) => <span>{safeRound(amt)}</span>,
    },
    {
      title: 'Action',
      dataIndex: 'Action',
      key: 'Action',
      align: 'center',
      render: (_, record, index) => (
        <Space size="middle">
          <a>
            {Object.keys(ReorderHoldDetails).length !== 0 &&
            BookingType === 'Dine In' &&
            GlobalExtraCharge?.some(
              (item) =>
                item.ExtraChargeId === record.UniqueId &&
                item.InwardDtlId === record.InwardDtlId
            ) ? (
              <DeleteFilled
                style={{
                  color: '#FF4D4F',
                  opacity: '0.4',
                }}
              />
            ) : (
              <DeleteFilled
                style={{
                  color: '#FF4D4F',
                }}
                onClick={() => statusFormatters(record, index)}
              />
            )}
          </a>
        </Space>
      ),
    },
  ];
  const columns = defaultColumns?.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });
  const columns1 = ExtraChargescolumns?.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave1,
      }),
    };
  });

  const handleToggle = () => {
    setIsOpen(!isOpen);
  };

  useEffect(() => {
    setHold(props.modalOpen);
  }, [props.modalOpen]);

  useEffect(() => {
    if (hold == true) {
      holding();
      dispatch(changeCustomerDelete('Deleted'));
    }
  }, [hold]);

  useEffect(() => {
    if (customerAddress && customerAddress[0]?.CustomerAddressDtl) {
      const addressList = customerAddress[0].CustomerAddressDtl.map((addr) => ({
        ActiveStatus: addr.ActiveStatus,
        Address1: addr.Address1 || '',
        Address2: addr.Address2 || '',
        Zip: addr.Zip || '',
        AddId: addr.AddId || '',
        City: addr.City || '',
        Dist: addr.Dist || '',
        State: addr.State || '',
        Latitude: addr.Latitude || '',
        Longitude: addr.Longitude || '',
        AddressType: addr.AddressType || '',
      }));

      console.log(addressList, 'ddddddddddddd');
      const prefilled = {};
      addressList.forEach((addr, idx) => {
        switch (addr.AddressType) {
          case 'Both Address':
            prefilled[idx] = [
              'Delivery Address',
              'Billing Address',
              'Both Address',
            ];
            break;
          case 'Delivery Address':
            prefilled[idx] = ['Delivery Address'];
            break;
          case 'Billing Address':
            prefilled[idx] = ['Billing Address'];
            break;
          default:
            prefilled[idx] = [];
            break;
        }
      });
      setAddressTypes(prefilled);
      setAddressesList(addressList);
      setAddressPreview(addressList);
      // setZipCodeData(true);
    }
  }, [customerAddress]);

  const pinCodeChange = (e) => {
    const value = e.target.value;
    if (value.length === 6) {
      getPincodeValues(value);
    } else {
      setZipCodeData(false);
    }
  };

  const getPincodeValues = async (pinCode) => {
    try {
      const res = await fetch(
        `https://api.postalpincode.in/pincode/${pinCode}`
      );
      const response = await res.json();

      if (response[0]?.Status === 'Success') {
        const postOffice = response[0].PostOffice?.[0];
        setZipCodeData(true);
        formRef.current?.setFieldsValue({
          City: postOffice?.Block || postOffice?.Name || '',
          Dist: postOffice?.District || '',
          State: postOffice?.State || '',
        });
      } else {
        setZipCodeData(false);
        formRef.current?.setFieldsValue({
          City: '',
          Dist: '',
          State: '',
        });
      }
    } catch (error) {
      console.error('Error fetching pincode info:', error);
      setZipCodeData(false);
    }
  };

  // const getPincodeValues = async (pinCode) => {
  //   let response = '';
  //   await fetch(`https://api.postalpincode.in/pincode/${pinCode}`)
  //     .then((res) => res.text())
  //     .then((text) => (response = JSON.parse(text)));

  //   if (response[0]['Status'] === 'Success') {
  //     setZipCodeData(true);
  //     formRef.current?.setFieldsValue({
  //       City: response[0]['PostOffice'][0]['Block'],
  //       Dist: response[0]['PostOffice'][0]['District'],
  //       State: response[0]['PostOffice'][0]['State'],
  //     });
  //   } else {
  //     setZipCodeData(false);
  //   }
  // };

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

  const customerData = async (e) => {
    let data = {
      MobileNo: e,
      CompId: getSession('CompId'),
      BranchId: getSession('BranchId'),
      AppId: getSession('AppId'),
    };

    let response = await dispatch(getAddCustomerDetails(data)).unwrap();
    if (response?.data?.statusCode === 1) {
      setoldUserId(response?.data?.data?.[0]?.UserId);
      setCustomerAddress(response?.data?.data);
      if (response?.data?.data?.[0]?.Zip) {
        getPincodeValues(response?.data?.data?.[0].Zip);
      }
      if (response?.data?.data?.[0]?.OfferActiveStatus) {
        setSelectedValue(response?.data?.data?.[0]?.OfferActiveStatus);
      }
      if (response?.data?.data?.[0]?.OfferType) {
        setofferType(response?.data?.data?.[0]?.OfferType);
      }
      if (response?.data?.data?.[0]?.MarriedStatus) {
        setMaritalstatus(response?.data?.data?.[0]?.MarriedStatus);
      }
      if (response?.data?.data?.[0]?.SpouseDOB) {
        setSpouseDobDate(response?.data?.data?.[0]?.SpouseDOB);
      }
      if (response?.data?.data?.[0]?.AnniversaryDate) {
        setanniversaryDate(response?.data?.data?.[0]?.AnniversaryDate);
      }
      if (response?.data?.data?.[0]?.CustDOB) {
        setDobDate(response?.data?.data?.[0]?.CustDOB);
      }
      if (
        response?.data?.data?.[0]?.OfferValue == 0 ||
        response?.data?.data?.[0]?.OfferValue
      ) {
        setOfferValue(
          response?.data?.data?.[0]?.OfferValue
            ? response?.data?.data?.[0]?.OfferValue
            : 0
        );
      }
      formRef.current?.setFieldsValue(response?.data?.data?.[0]);

      if (response?.data?.data?.[0]?.InitialOutStanding) {
        setInitialOutStandingType(
          response?.data?.data?.[0]?.InitialOutStanding
        );
      }
    } else if (response?.data?.statusCode === 0) {
      setoldUserId(null);
      !Searchopen && formRef.current?.resetFields();
      !Searchopen && formRef.current?.setFieldsValue({ CustMobile: e });
      Searchopen && setCusDetails(false);
    }
  };

  const handleSubmit = async (value) => {
    let PostData = value;
    PostData['CompId'] = getSession('CompId');
    PostData['BranchId'] = getSession('BranchId');
    PostData['AppId'] = getSession('AppId');
    PostData['CreatedBy'] = getSession('UserId');
    // PostData['Document'] = ImageUrl ? ImageUrl : null;
    PostData['CustomerProfile'] = ImageUrl ? ImageUrl : null;
    PostData['InitialOutStanding'] = parseInt(value?.OutStandingAmount);
    if (oldUserId) {
      PostData['UserId'] = oldUserId;
    }
    if (offerType) {
      PostData['OfferType'] = offerType;
    }
    if (Maritalstatus == 'N') {
      PostData['MarriedStatus'] = 'N';
      PostData['CustDOB'] = DobDate;
    }
    if (Maritalstatus == 'Y') {
      PostData['MarriedStatus'] = 'Y';
      PostData['CustDOB'] = DobDate;
      PostData['SpouseDOB'] = SpouseDobDate;
      PostData['AnniversaryDate'] = anniversaryDate;
    }
    const addedAddresses = addressesList || [];
    const validAddresses = addedAddresses?.filter(
      (addr) => addr?.Address1 && addr?.Zip
    );

    PostData['CustomerAddressDtl'] = validAddresses;

    let response = await dispatch(postAddCustomerDetails(PostData)).unwrap();

    if (response?.data?.statusCode == 1) {
      fetchdata();
      dispatch(changeSelectedOption(null));
      dispatch(
        changeCustomerID(
          response?.data?.CustomerDetails?.[
            response?.data?.CustomerDetails.length - 1
          ]
        )
      );
      dispatch(
        changeSelectedCustId(response?.data?.CustomerDetails?.[0]?.CustId)
      );
      setMessageType('success');
      setMessageData('Customer Added Successfully');
      setInputValue('');
      setoldUserId(null);
      dispatch(triggerCustomerRefresh());
      formRef.current?.resetFields();
      props.handleAddCustomerCancel();
    } else {
      setMessageType('error');
      setMessageData(response?.data?.response);
    }
    setIsOpen(false);
    setSearchopen(false);
    setCusDetails(false);
    setselectedSearchValue('CustMobile');
  };

  const checkExistingCustomer = (value) => {
    if (!isNaN(value)) {
      if (value?.length == 10) {
        customerData(value);
        setCusDetails(true);
      } else {
        setCusDetails(false);
      }
    } else {
      if (value?.length == 50) {
        customerData(value);
        setCusDetails(true);
      } else {
        setCusDetails(false);
      }
    }
  };

  const holding = async () => {
    const data = { CompId: CompId, BranchId: BranchId, AppId: AppId };
    let response = await dispatch(gettinghold(data)).unwrap();
    if (response?.data?.statusCode == 1) {
      let modifiedData = response?.data?.data?.map((item) => {
        return {
          ...item,
          productDetails: item.productDetails.map((product) => {
            // Clone the product to avoid modifying the original object
            let newProduct = { ...product };

            if (product.Type === 'P') {
              if (product.SinglePc === 'Y') {
                newProduct.UomName = 'PCS';
                newProduct.MRP = newProduct.OrderRate;
              }
            } else {
              newProduct.ProdName = newProduct.ProdName;
              newProduct.Size = 1;
              newProduct.UomName = 'Combo';
              newProduct.MRP = newProduct.OrderRate;
            }

            return newProduct; // Return the modified product
          }),
        };
      });

      setTabledata(modifiedData);
    }
  };

  const statusFormatter = async (row) => {
    let orderListIds = [];
    orderListIds.push(row.OrderId);

    let putData = { OrderId: orderListIds };
    let response = await dispatch(puttinghold(putData)).unwrap();

    const extractedData = row?.productDetails?.map((prod) => ({
      ProdId: prod.ProdId,
      InwardDtlId: prod.InwardDtlId,
      SinglePc: prod.SinglePc,
      Qty: prod.OrderQty,
      Date: prod?.BookingDate,
    }));
    let BlockPostdata = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      Status: 'UnBlock',
      CreatedBy: UserId,
      ProductList: extractedData,
    };
    await dispatch(PostBlockSlots(BlockPostdata)).unwrap();

    if (response?.data?.statusCode == 1) {
      setMessageType('success');
      setMessageData(response?.data?.response);
      let holdingData = await dispatch(
        gettinghold({ CompId: CompId, BranchId: BranchId, AppId: AppId })
      ).unwrap();
      if (holdingData?.data?.statusCode === 1) {
        setTabledata(holdingData?.data?.data);
        dispatch(changeholddata(holdingData?.data?.data));
      } else {
        // props.handleHoldCancel();
        props?.closeModal();
        setHold(false);
        const dataValue = { CompId: CompId, BranchId: BranchId, AppId: AppId };
        let responseValue = await dispatch(gettinghold(dataValue)).unwrap();
        if (responseValue?.data?.statusCode == 1) {
          dispatch(changeholddata(responseValue?.data?.data));
          getstockbadge();
          Combocarddata();
        } else {
          dispatch(changeholddata([]));
        }
      }
      getstockbadge();
      Combocarddata();
    }
  };
  const HoldPutfun = async (a, b) => {
    const updated = a?.map((item) => ({
      ...item,
      Offer: item?.OfferAmt,
      localId: uuidv4(),
      OfferMode: item?.OfferMode ? item?.OfferMode?.trim() : null,
      VariantAvailableFrom: item?.AvailableFrom || null,
      VariantAvailableTo: item?.AvailableTo || null,
      // TotalAmt: formatAmount((item.TotalAmt - item.OfferValue)),
    }));
    b?.RefDetails?.[0]?.FreeProdList &&
      dispatch(ChangeFullFreeProductList(b?.RefDetails[0]?.FreeProdList));
    b?.RefDetails?.[0]?.OfferAppliedProductList &&
      dispatch(
        changeFullOfferAppliedProducts(
          b?.RefDetails[0]?.OfferAppliedProductList
        )
      );

    const loyaltyFreeProductOfferApplied =
      b?.RefDetails?.[0]?.OfferAppliedProductList?.filter(
        (off) =>
          off?.FreeProductsList?.OfferMode === 'L' &&
          off?.TableUniqueName === 'FreeProduct'
      );

    let res = await dispatch(
      getCustomerForHold({
        CompId: CompId,
        AppId: AppId,
        branchId: BranchId,
        OrderId: b?.OrderId,
      })
    ).unwrap();
    if (res?.data?.statusCode == 1) {
      let custdetail = res?.data?.data?.find(
        (item) => item.CustId === b.CustSuppId
      );
      if (custdetail !== undefined) {
        let data = {
          CustId: custdetail?.CustId,
          CustName: custdetail?.CustName,
          label: custdetail?.CustName
            ? custdetail?.CustName
            : custdetail?.CustMobile,
          value: custdetail?.CustMobile,
          LoyaltyPointsDetail: custdetail?.LoyaltyPointsDetail,
          TotalLoyaltyPoints: custdetail?.TotalLoyaltyPoints,
        };
        await dispatch(changeSelectedOption(data));
        await dispatch(ChangeSelectedCustDisable(true));
        if (loyaltyFreeProductOfferApplied?.length > 0) {
          const loyaltyProdQuantities = {};

          loyaltyFreeProductOfferApplied.forEach((off) => {
            const freeProdDtls = off?.FreeProductsList;
            const freeProdOfferId =
              freeProdDtls?.ProdVariantDetails?.[0]?.StockDetails?.[0]
                ?.ProdOfferId;

            const key = [
              freeProdDtls?.OfferId,
              freeProdDtls?.FreeProdId,
              freeProdDtls?.FreeProdVariantName,
              freeProdOfferId,
            ].join('|');

            loyaltyProdQuantities[key] = freeProdDtls?.FreeQty || 0;
          });
          if (Object.keys(loyaltyProdQuantities).length > 0) {
            dispatch(changeLoyaltyConsumedQuantities(loyaltyProdQuantities));
          }

          console.log(loyaltyProdQuantities, 'loyaltyProdQuantities');
        }
      }
    }

    let temp = a
      ?.filter((item) => item.OrderType === 'E')
      .map((item) => item.InwardDtlId + ' ' + item.BookingTypeName);
    await dispatch(changeSelProdWiseEst(temp));
    if (b.OrderType == 'E') {
      await dispatch(changeEstimateBooking('OvrAllEst'));
      await dispatch(ChangeOverAllDiscEstimate(parseFloat(b.OverallDisc)));
      await dispatch(changeOrderCardDetails(updated));
    } else {
      await dispatch(changeEstimateBooking('Sales'));
      await dispatch(ChangeOverAllDiscSales(parseFloat(b.OverallDisc)));
      const salesOffer = templateData?.BookingNavbar?.[1]?.some(
        (item) => item?.OptionName === 'Offer'
      );
      const preferenceOffer =
        PreferenceDatas?.[0]?.['SettingDtlDetails']?.find(
          (item) => item.SettingIdName === 'Offer'
        )?.SettingValue === 'Y';
      // if (salesOffer && preferenceOffer) {
      //   await applyOffer(a, b.OrderOfferDetails);
      // }
      // else
      // {
      await dispatch(changeOrderCardDetails(updated));
      // }
    }
    await dispatch(changeOrderType('Hold'));
    await dispatch(changeHoldOrderDtl(true));
    await dispatch(changeReorderHoldDetails(b));
    await dispatch(changeReorderProductDetails(b?.productDetails));
    await dispatch(changeSelectedCustId(b?.CustSuppId));
    await dispatch(ChangeTotalAmount(b?.ExtraChargeDetails));
    setHold(false);
    // props.handleHoldCancel();
    props?.closeModal();
  };

  const removeAll = async () => {
    let data = [];
    Tabledata?.map((item) => {
      data?.push(item.OrderId);
    });
    let putData = { OrderId: data };
    clearall(putData);
  };

  const clearall = async (data) => {
    let response = await dispatch(puttinghold(data)).unwrap();

    const allProducts = Tabledata.flatMap((row) =>
      row?.productDetails?.map((prod) => ({
        ProdId: prod.ProdId,
        InwardDtlId: prod.InwardDtlId,
        SinglePc: prod.SinglePc,
        Qty: prod.OrderQty,
        Date: row?.SalesDate,
      }))
    );

    const BlockPostdata = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      Status: 'UnBlock',
      CreatedBy: UserId,
      ProductList: allProducts,
    };
    await dispatch(PostBlockSlots(BlockPostdata)).unwrap();

    if (response?.data?.statusCode == 1) {
      setMessageType('success');
      setMessageData(response?.data?.response);

      // props.handleHoldCancel();
      props?.closeModal();
      setHold(false);
      const dataValue = { CompId: CompId, BranchId: BranchId, AppId: AppId };
      let responseValue = await dispatch(gettinghold(dataValue)).unwrap();
      if (responseValue?.data?.statusCode == 1) {
        dispatch(changeholddata(responseValue?.data?.data));
        getstockbadge();
        Combocarddata();
      } else {
        dispatch(changeholddata([]));
        getstockbadge();
        Combocarddata();
      }
      dispatch(triggerCustomerRefresh());
      dispatch(changeSelectedOption(null));
    }
  };
  const setWsport = async (e) => {
    setwsport(e);
  };

  const myfun = async (e) => {
    setWSProductWeight(e);
    formWsRef.current?.setFieldsValue({ WSProductWeight: e });
  };
  const WSProductSelect = (data) => {
    formWsRef.current.resetFields(['CalcProductRate']);
    setCalcProductWeight();
    setCalcProductRate();
    formWsRef.current.resetFields(['CalcProductWeight', 'CalcProductRate']);
    setProductValue(data);
    let ProdNamedata = WSProductList?.find((item) => item.ProdName === data);
    let OneKgProd = ProdNamedata?.ProductDetail?.find(
      (item) =>
        (item?.UomName?.toLowerCase() === 'KGS'?.toLowerCase() ||
          item?.UomName?.toLowerCase() === 'KG'?.toLowerCase()) &&
        item?.Size === 1
    );
    setWSSelectedOnekgProd(OneKgProd);
    setWSProductDataSource(OneKgProd?.ProdVariantDetails?.[0]?.StockDetails);
    if (OneKgProd?.ProdVariantDetails?.[0]?.StockDetails?.length === 1) {
      GetProductRate(OneKgProd?.ProdVariantDetails?.[0]?.StockDetails?.[0]);
    }
  };
  const WSProductChange = async (data) => {
    formWsRef.current.resetFields([
      'WSProductWeight',
      'WSProductRate',
      'WSTotalPrice',
    ]);
    setWSProductRate(0);
    setWSProductWeight(0);
    setWSTotalPrice(0);
    setWSProductDataSource([]);
    setProductValue(data);
    if (data?.length > 2) {
      let ProductList = await dispatch(
        getProductsearch({
          CompId: CompId,
          BranchId: BranchId,
          AppId: AppId,
          ProdName: data,
        })
      ).unwrap();
      if (ProductList?.data?.statusCode == 1) {
        setWSProductList(ProductList?.data?.data);
      }
    }
  };
  const GetProductRate = (data) => {
    setWSSelectedStockDetail(data);
    setWSProductRate(data?.SellPrice);
    formWsRef.current?.setFieldsValue({ WSProductRate: data?.SellPrice });
  };

  const WSTotalCalculation = () => {
    let pricepergram = WSProductRate / 1000;
    let total = formatAmount(parseFloat(WSProductWeight) * 1000 * pricepergram);

    setWSTotalPrice(total);
    formWsRef.current?.setFieldsValue({ WSTotalPrice: total });
  };
  const onFinish = async () => {
    let data = {
      Type: WSProductList?.[0]?.Type,
      OverallQuantity: WSProductList?.[0]?.OverAllQty,
      ActiveStatus: WSSelectedOnekgProd?.ActiveStatus,
      AvailableFrom: WSSelectedOnekgProd?.AvailableFrom,
      AvailableTo: WSSelectedOnekgProd?.AvailableTo,
      Cess: WSSelectedOnekgProd?.Cess,
      ExpDate: WSSelectedStockDetail?.ExpDate,
      HSNCode: WSSelectedOnekgProd?.HSNCode,
      ManufDate: WSSelectedStockDetail?.ManufDate,
      OpeningQty: WSSelectedOnekgProd?.OpeningQty,
      ProdType: WSProductList?.[0]?.ProdType,
      PartNumber: WSSelectedOnekgProd?.PartNumber,
      ProdId: WSSelectedOnekgProd?.ProdId,
      ProdLogo: WSSelectedOnekgProd?.ProdLogo,
      ProdName: WSSelectedOnekgProd?.ProdName,
      QRCode: WSSelectedOnekgProd?.QRCode,
      QtyBasedPrice: WSSelectedOnekgProd?.QtyBasedPrice,
      Rack: WSSelectedOnekgProd?.Rack,
      Size: parseFloat(WSProductWeight).toFixed(3),
      StockAvailable: WSSelectedOnekgProd?.StockAvailable,
      TaxId: WSSelectedOnekgProd?.TaxId,
      TaxPercentage: WSSelectedOnekgProd?.TaxPercentage,
      TaxName: WSSelectedOnekgProd?.TaxIdName,
      UniqueId: WSSelectedOnekgProd?.UniqueId,
      UomName: WSSelectedOnekgProd?.UomName,
      BalanceQty: WSSelectedStockDetail?.BalanceQty,
      BatchRef: WSSelectedStockDetail?.BatchRef,
      InwardDate: WSSelectedStockDetail?.InwardDate,
      InwardDtlId: WSSelectedStockDetail?.InwardDtlId,
      InwardId: WSSelectedStockDetail?.InwardId,
      MRP: WSSelectedStockDetail?.MRP,
      Offer: WSSelectedStockDetail?.OfferPrice,
      SellPrice: WSSelectedStockDetail?.SellPrice,
      ProdVariantName: 'Variant1',
      OrderRate: Math.round(WSTotalPrice),
      SuppId: WSSelectedStockDetail?.SuppId,
      SuppName: WSSelectedStockDetail?.SuppName,
      OrderQty: WSProductWeight,
    };

    if (WSTotalPrice > 0) {
      await dispatch(ChangeWSProduct(data));
      WSModalPortclose();
    } else {
      WSModalPortclose();
      setMessageType('error');
      setMessageData('Total is not calculated');
    }
  };
  const WSModalPortclose = () => {
    setWeightScale2(false);

    setWSProductWeight(0);
    formWsRef.current?.resetFields();

    setTimeout(() => {
      WSModalClose();
      // setwsport(null)
    }, 20);
  };
  const WSModalClose = () => {
    setWeightScale2(true);

    setWSProductList([]);
    setProductValue();
    setWSProductDataSource([]);
    setWSProductRate(0);
    setWSProductWeight(0);
    setWSTotalPrice(0);
    setWSSelectedStockDetail([]);
    setWSSelectedOnekgProd([]);
    setCalcProductWeight();
    setCalcProductRate();
    formWsRef.current?.resetFields();
    setWeightScale(false);
    if (props.handleWeightScaleCancel) {
      props.handleWeightScaleCancel();
    }
  };

  const CalculateWeight = async (e) => {
    if (WSSelectedOnekgProd && ProductValue) {
      setCalcProductRate(e?.target?.value);
      let tempCalcProductWeight = (e.target.value / WSProductRate).toFixed(3);

      setCalcProductWeight(parseFloat(tempCalcProductWeight));
      formWsRef.current?.setFieldsValue({
        CalcProductWeight: tempCalcProductWeight,
      });
    }
  };
  const CalculateWeightOpen = () => {
    setCalcPriceWeightOpen(!CalcPriceWeightOpen);
    setCalcProductWeight();
    setCalcProductRate();
    formWsRef.current.resetFields(['CalcProductWeight', 'CalcProductRate']);
  };
  const HandleProductName = (_, value) => {
    return new Promise((resolve, reject) => {
      if (WSSelectedOnekgProd && ProductValue) {
        resolve();
      } else {
        reject('Please Select Product');
      }
    });
  };

  const HandleCloseModal = () => {
    props.handleAddCustomerCancel();
    setInputValue('');
    setCusDetails(false);
    setselectedSearchValue('CustMobile');
    setSearchopen(false);
    setIsOpen(false);
  };

  const getstockbadge = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      ...(AvailableDate && selectedDate
        ? {
            fromDate: selectedDate?.[0],
            toDate: selectedDate?.[1],
          }
        : {}),
    };
    await dispatch(getSelectedFavItems(data)).unwrap();

    let data1 = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      ProdSubCat: ProdSubCat,
      ...(AvailableDate && selectedDate
        ? {
            fromDate: selectedDate?.[0],
            toDate: selectedDate?.[1],
          }
        : {}),
    };

    let data2 = {
      compId: CompId,
      branchId: BranchId,
      appId: AppId,
      prodCat: prodCat,
      ...(AvailableDate && selectedDate
        ? {
            fromDate: selectedDate?.[0],
            toDate: selectedDate?.[1],
          }
        : {}),
    };

    if (
      templateData?.BookingLayout?.[1]?.some(
        (item) => item?.OptionName === 'SubCategory'
      ) &&
      ProdSubCat
    ) {
      await dispatch(getLayoutproductCard(data1)).unwrap();
    } else if (
      !templateData?.BookingLayout?.[1]?.some(
        (item) => item?.OptionName === 'SubCategory'
      )
    ) {
      await dispatch(getCardDataWithoutSubmodule(data2)).unwrap();
    } else {
      await dispatch(getCardDataWithoutSub(data2)).unwrap();
    }
  };

  const Combocarddata = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      ActiveStatus: 'A',
    };

    let response = await dispatch(getCombolist(data)).unwrap();
    let datas = response?.data?.data;
    await dispatch(ChangeComboCarddata(datas));
  };

  const HandleSearch = () => {
    setSearchopen(!Searchopen);
    setselectedSearchValue('CustMobile');
    setInputValue('');
    setCusDetails(false);
    setIsOpen(false);
    setselectSearchDefaultValue();
    formRef.current?.resetFields();
    Searchopen == true && setCusDetails(false);
  };

  const handleRadioChange = (event) => {
    setselectedSearchValue(event.target.value);
    event.target.value === 'CustName' ? setInputValue('') : setInputValue('');
    setIsOpen(false);
    setCusDetails(false);
    event.target.value === 'CustId' && setInputValue(CustIdForDynamicChange);
    setselectSearchDefaultValue();
    formRef.current?.resetFields();
  };
  const validateEmail = (_, value) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!value || emailRegex.test(value)) {
      return Promise.resolve();
    }
    return Promise.reject('Invalid email address');
  };
  const ClearMobileInput = () => {
    setInputValue('');
    setIsOpen(false);
    setCusDetails(false);
    formRef.current?.resetFields();
  };
  const handleCustomerSelectChange = (value, option) => {
    handleSelectSuggestion(value);
    setZipCodeData(false);
    setIsOpen(false);
    setselectSearchDefaultValue(
      option[selectedSearchValue] !== null
        ? option[selectedSearchValue]
        : option?.CustMobile
    );
  };
  const handleSearchInputChange = (inputValue) => {
    handleSelectSuggestion(inputValue);
  };
  const Onchangeoffertype = (a) => {
    setofferType(a);
    // dispatch(changeSetup_OfferType(a))
  };

  const Handleoffervalue = (e) => {
    formRef.current?.setFieldsValue({ OfferValue: e?.target?.value });
    setOfferValue(e?.target?.value);
    // dispatch(changeSetup_OfferValue(e?.target?.value))
  };
  const onchangeStatus = (e) => {
    setMaritalstatus(e?.target?.value);
  };

  // const dobchange=(e)
  const dobchange = async (date, dateString) => {
    if (dateString) {
      const Date1 = moment(dateString, ['DD-MM-YYYY']).format(
        'YYYY-MM-DDTHH:mm:ss'
      );
      // formRef.current?.setFieldsValue({ ManufDate: Date1 })
      await setDobDate(Date1);
    }
  };
  const spousedobchange = async (date, dateString) => {
    if (dateString) {
      const Date1 = moment(dateString, ['DD-MM-YYYY']).format(
        'YYYY-MM-DDTHH:mm:ss'
      );
      // formRef.current?.setFieldsValue({ ManufDate: Date1 })
      await setSpouseDobDate(Date1);
    }
  };
  const anniversaryDatechange = async (date, dateString) => {
    if (dateString) {
      const Date1 = moment(dateString, ['DD-MM-YYYY']).format(
        'YYYY-MM-DDTHH:mm:ss'
      );
      // formRef.current?.setFieldsValue({ ManufDate: Date1 })
      await setanniversaryDate(Date1);
    }
  };

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

  const deliveryOptions = [
    'Delivery Address',
    'Billing Address',
    'Both Address',
  ];

  const handleAddOrUpdateAddress = () => {
    const currentFormValues = formRef.current?.getFieldsValue() || {};

    if (!currentFormValues?.Address1 || !currentFormValues?.Zip) {
      setMessageType('error');
      setMessageData('Please enter Address Line1 and Zipcode before adding');
      return;
    }
    const selectedAddressType =
      editingIndex !== null
        ? addressTypes[editingIndex] || []
        : addressTypes[Object.keys(addressTypes).length - 1] || [];

    let addressType = '';
    if (selectedAddressType.includes('Both Address')) {
      addressType = 'Both Address';
    } else if (
      selectedAddressType.includes('Delivery Address') &&
      selectedAddressType.includes('Billing Address')
    ) {
      addressType = 'Both Address';
    } else if (selectedAddressType.includes('Delivery Address')) {
      addressType = 'Delivery Address';
    } else if (selectedAddressType.includes('Billing Address')) {
      addressType = 'Billing Address';
    }
    const newAddress = {
      AddressType: addressType,
      Address1: currentFormValues?.Address1,
      Address2: currentFormValues?.Address2 || '',
      Zip: currentFormValues?.Zip,
      City: currentFormValues?.City || '',
      Dist: currentFormValues?.Dist || '',
      State: currentFormValues?.State || '',
      Latitude: currentFormValues?.Latitude || '',
      Longitude: currentFormValues?.Longitude || '',
    };

    if (editingIndex !== null) {
      // 🛠️ Update existing address
      setAddressesList((prev) => {
        const updated = [...prev];
        updated[editingIndex] = newAddress;
        setAddressPreview(updated);
        return updated;
      });

      setEditingIndex(null);
      setMessageType('success');
      setMessageData('Address updated successfully!');
    } else {
      // ➕ Add new address
      setAddressesList((prev) => {
        const updated = [...prev, newAddress];
        setAddressPreview(updated);
        return updated;
      });

      setMessageType('success');
      setMessageData('Address added successfully!');
    }

    // 🧹 Clear form
    formRef.current?.setFieldsValue({
      Address1: '',
      AddressType: '',
      Address2: '',
      Zip: '',
      City: '',
      Dist: '',
      State: '',
      Latitude: '',
      Longitude: '',
    });

    setZipCodeData(false);
  };

  const handleAddressTypeChange = (index, type, checked) => {
    setAddressTypes((prev) => {
      const updated = { ...prev };
      let currentTypes = [...(updated[index] || [])];

      if (type === 'Both Address') {
        if (checked) {
          currentTypes = [
            'Delivery Address',
            'Billing Address',
            'Both Address',
          ];
          // Clear other addresses when Both Address is selected
          Object.keys(updated).forEach((i) => {
            if (parseInt(i) !== index) {
              updated[i] = [];
            }
          });
        } else {
          currentTypes = [];
        }
      } else {
        if (checked) {
          if (!currentTypes.includes(type)) {
            currentTypes.push(type);
          }
          // If both Delivery and Billing are selected, add Both Address
          if (
            currentTypes.includes('Delivery Address') &&
            currentTypes.includes('Billing Address')
          ) {
            currentTypes.push('Both Address');
          }
          // Clear same type from other addresses
          Object.keys(updated).forEach((i) => {
            if (parseInt(i) !== index) {
              updated[i] = (updated[i] || []).filter(
                (opt) => opt !== type && opt !== 'Both Address'
              );
            }
          });
        } else {
          currentTypes = currentTypes.filter(
            (t) => t !== type && t !== 'Both Address'
          );
        }
      }

      updated[index] = currentTypes;

      // Update addresses list
      setAddressesList((prev) => {
        const newList = prev.map((addr, i) => {
          const opts = updated[i] || [];
          let addressType = '';

          if (opts.includes('Both Address')) addressType = 'Both Address';
          else if (opts.includes('Delivery Address'))
            addressType = 'Delivery Address';
          else if (opts.includes('Billing Address'))
            addressType = 'Billing Address';

          return { ...addr, AddressType: addressType };
        });

        setAddressPreview(newList);
        return newList;
      });

      return updated;
    });
  };

  const handleEditAddress = (index) => {
    const addrToEdit = addressPreview[index];

    formRef.current.setFieldsValue({
      AddId: addrToEdit.AddId,
      AddressType: addrToEdit.AddressType,
      Address1: addrToEdit.Address1,
      Address2: addrToEdit.Address2,
      Zip: addrToEdit.Zip,
      City: addrToEdit.City,
      Dist: addrToEdit.Dist,
      State: addrToEdit.State,
      Latitude: addrToEdit.Latitude,
      Longitude: addrToEdit.Longitude,
    });
    if (addrToEdit.Zip) {
      setZipCodeData(true);
    }

    setEditingIndex(index);

    // Scroll to and focus Address1 input
    setTimeout(() => {
      const addressForm = document.querySelector('.subinputForm');
      const address1Input = document.querySelector('input[id*="Address1"]');

      if (addressForm) {
        addressForm.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }

      if (address1Input) {
        address1Input.focus();
      }
    }, 100);
  };

  // const handleRemoveAddress = (index) => {
  //   setAddressPreview((prev) => prev.filter((_, i) => i !== index));
  //   setAddressesList((prev) => prev.filter((_, i) => i !== index));

  //   setNewAddress((prev) => prev.filter((_, i) => i !== index));
  //   setAddressTypes((prev) => {
  //     const updated = { ...prev };
  //     delete updated[index];
  //     return updated;
  //   });
  // };

  const handleRemoveAddress = (index) => {
    setAddressPreview((prev) =>
      prev.map((item, i) =>
        i === index ? { ...item, ActiveStatus: 'D' } : item
      )
    );
    setAddressesList((prev) =>
      prev.map((item, i) =>
        i === index ? { ...item, ActiveStatus: 'D' } : item
      )
    );
    setNewAddress((prev) =>
      prev.map((item, i) =>
        i === index ? { ...item, ActiveStatus: 'D' } : item
      )
    );
  };

  return (
    <div>
      <div className="BSBilling7-icon-flex">
        <DefaultModal
          title={
            <div className="Holdmodel-title">
              <FormHeader title={'Holding Orders'} />
            </div>
          }
          open={hold}
          width={900}
          footer={null}
          children={
            <div>
              <Button
                className="BSC1Payment-HoldModel-cancleall"
                type="primary"
                danger
                onClick={(e) => {
                  e?.stopPropagation();
                  removeAll();
                }}
                // onClick={() => statusFormatter(record,index)}
              >
                Clear All
              </Button>

              <div className="BSC1Payment-Tablediv">
                <Tables
                  columns={columnshold}
                  data={Tabledata}
                  dataSource={Tabledata}
                />
              </div>
            </div>
          }
          handleCancel={props.handleHoldCancel}
        />
      </div>

      <div className="BSBilling7-icon-flex">
        <Messages
          messageType={messageType}
          messageData={messageData}
          onComplete={onComplete}
        />
        <DefaultModal
          width={650}
          className={'AddCustomerModal'}
          title={
            <div className="Holdmodel-title">
              <FormHeader
                title={Searchopen ? 'Search Customer' : 'Add Customer'}
              />
              {Searchopen && (
                <div
                  style={{
                    display: 'flex',
                    columnGap: '0.7rem',
                    flexWrap: 'wrap',
                  }}
                >
                  <label
                    htmlFor="CustMobile"
                    className="search-addcustomer-inputlabel"
                    style={{
                      backgroundColor:
                        selectedSearchValue === 'CustMobile' && '#1292EE',
                      color: selectedSearchValue === 'CustMobile' && '#fff',
                    }}
                  >
                    <input
                      onChange={handleRadioChange}
                      type="radio"
                      value={'CustMobile'}
                      name="search"
                      id="CustMobile"
                      checked={selectedSearchValue === 'CustMobile'}
                    />
                    Mobile
                  </label>
                  <label
                    htmlFor="CustName"
                    className="search-addcustomer-inputlabel"
                    style={{
                      backgroundColor:
                        selectedSearchValue === 'CustName' && '#1292EE',
                      color: selectedSearchValue === 'CustName' && '#fff',
                    }}
                  >
                    <input
                      onChange={handleRadioChange}
                      type="radio"
                      value={'CustName'}
                      name="search"
                      id="CustName"
                      checked={selectedSearchValue === 'CustName'}
                    />
                    Name
                  </label>
                  <label
                    htmlFor="CustId"
                    className="search-addcustomer-inputlabel"
                    style={{
                      backgroundColor:
                        selectedSearchValue === 'CustId' && '#1292EE',
                      color: selectedSearchValue === 'CustId' && '#fff',
                    }}
                  >
                    <input
                      onChange={handleRadioChange}
                      type="radio"
                      value={'CustId'}
                      name="search"
                      id="CustId"
                      checked={selectedSearchValue === 'CustId'}
                    />
                    Cust Id
                  </label>
                </div>
              )}
            </div>
          }
          open={props.addcustomer}
          // width={900}
          footer={null}
          children={
            <Form ref={formRef} onFinish={handleSubmit} initialValues={''}>
              <div style={{ height: '45vh', overflow: 'auto' }}>
                <div className="CustMob-Name">
                  {!isSearching && (
                    <Form.Item
                      name="CustMobile"
                      rules={[
                        {
                          pattern:
                            selectedSearchValue == 'CustMobile' && /^\d{10}$/,
                          message:
                            selectedSearchValue == 'CustMobile' &&
                            'Please Enter a Valid 10-digit Mobile Number',
                        },
                        {
                          required: true,
                          message:
                            selectedSearchValue == 'CustMobile'
                              ? 'Please Enter Valid Mobile Number'
                              : selectedSearchValue == 'CustName'
                                ? 'Please Enter Valid Name'
                                : selectedSearchValue == 'CustId' &&
                                  'Please EnterCustomer Id',
                        },
                      ]}
                    >
                      {Searchopen && (
                        <Select
                          showSearch
                          value={selectSearchDefaultValue}
                          type={
                            !Searchopen
                              ? 'number'
                              : selectedSearchValue === 'CustMobile'
                                ? 'number'
                                : 'text'
                          }
                          style={{ width: 250 }}
                          placeholder="Search to Select"
                          name="CustMobile"
                          optionFilterProp={selectedSearchValue}
                          filterOption={(input, option) =>
                            (option[selectedSearchValue] ?? '')
                              ?.toLowerCase()
                              ?.includes(input?.toLowerCase())
                          }
                          filterSort={(optionA, optionB) =>
                            (optionA[selectedSearchValue] ?? '')
                              ?.toLowerCase()
                              ?.localeCompare(
                                (
                                  optionB[selectedSearchValue] ?? ''
                                )?.toLowerCase()
                              )
                          }
                          options={options}
                          onSelect={(value, option) =>
                            setselectSearchDefaultValue(
                              ` ${option[selectedSearchValue] !== null ? option[selectedSearchValue] : option?.CustMobile}`
                            )
                          }
                          onChange={(value, option) =>
                            handleCustomerSelectChange(value, option)
                          }
                          onSearch={(inputValue) =>
                            handleSearchInputChange(inputValue)
                          }
                          onInputKeyDown={(e) => {
                            // Prevent minus sign and non-numeric characters for CustMobile and CustId
                            if (
                              (selectedSearchValue === 'CustMobile' ||
                                selectedSearchValue === 'CustId') &&
                              (e.key === '-' || e.key === 'e')
                            ) {
                              e.preventDefault();
                            }

                            // Ensure max length is respected
                            if (
                              (selectedSearchValue === 'CustMobile' &&
                                e.target.value.length >= 10 &&
                                e.key !== 'Backspace') ||
                              (selectedSearchValue === 'CustId' &&
                                e.target.value.length >= 9 &&
                                e.key !== 'Backspace')
                            ) {
                              e.preventDefault();
                            }

                            // Prevent numbers in name field
                            if (
                              selectedSearchValue === 'CustName' &&
                              !/^[A-Za-z]+$/.test(e.key) &&
                              e.key !== 'Backspace'
                            ) {
                              e.preventDefault();
                            }
                          }}
                          onWheel={(e) => e.preventDefault()} // Prevent scrolling from changing input value
                        />
                      )}
                      {!Searchopen && (
                        <InputField
                          label={
                            <label class="required">
                              {Searchopen
                                ? selectedSearchValue == 'CustMobile'
                                  ? 'Enter Mobile'
                                  : selectedSearchValue == 'CustName'
                                    ? 'Enter Name'
                                    : selectedSearchValue == 'CustId' &&
                                      'Enter Customer Id'
                                : ' Mobile Number'}
                            </label>
                          }
                          id="fruitInput"
                          options={options}
                          value={inputValue}
                          type={
                            !Searchopen
                              ? 'number'
                              : selectedSearchValue === 'CustMobile'
                                ? 'number'
                                : 'text'
                          }
                          list="fruits"
                          maxLength={
                            !Searchopen || selectedSearchValue === 'CustMobile'
                              ? 10
                              : undefined
                          }
                          autocomplete="off"
                          isOnChange={
                            selectedSearchValue === 'CustMobile'
                              ? inputValue?.length > 1
                                ? true
                                : inputValue && true
                              : true
                          }
                          onChange={(e) =>
                            handleSelectSuggestion(e?.target?.value)
                          }
                          onInput={(e) => {
                            let value = e?.target.value;

                            if (!suggestionClicked) {
                              // Allow only digits
                              value = value?.replace(/\D/g, '');

                              // Restrict starting digits to 6, 7, 8, 9
                              if (
                                value?.length === 1 &&
                                !/^[6-9]$/.test(value)
                              ) {
                                value = '';
                                setMessageData('Incorrect Number');
                                setMessageType('error');
                              }

                              // Restrict to max 10 digits
                              if (value?.length > 10) {
                                value = value?.slice(0, 10);
                              }

                              // Update the input field value
                              e.target.value = value;
                            }
                            setSuggestionClicked(false);
                          }}
                          suffix={
                            inputValue?.length >= 1 ? (
                              <IoCloseSharp onClick={ClearMobileInput} />
                            ) : (
                              <div></div>
                            )
                          }
                        />
                      )}

                      {!Searchopen && (
                        <datalist id="fruits">
                          {suggestions
                            ?.filter(
                              (suggestion) => suggestion[selectedSearchValue]
                            )
                            ?.map((suggestion, index) => (
                              <option
                                className="custom-suggestion-item"
                                key={index}
                                name={suggestion.MobileNo}
                                onMouseDown={() => {
                                  setSuggestionClicked(true);
                                  setInputValue(
                                    suggestion[selectedSearchValue]
                                  );
                                }}
                                value={suggestion[selectedSearchValue]}
                              >
                                <span>
                                  {selectedSearchValue == 'CustName'
                                    ? suggestion?.CustMobile
                                    : suggestion?.CustName}
                                  {selectedSearchValue === 'CustId' && (
                                    <>
                                      &nbsp; CustId:
                                      {
                                        suggestion?.CustId?.match(
                                          /-(\d+)$/
                                        )?.[1]
                                      }
                                    </>
                                  )}
                                </span>
                              </option>
                            ))}
                        </datalist>
                      )}

                      {searchResults.length > 0 && (
                        <div>
                          <p>Search Results:</p>
                          <ul>
                            {searchResults.map((result, index) => (
                              <li key={index}>{result}</li>
                            ))}
                          </ul>
                        </div>
                      )}

                      <div></div>
                    </Form.Item>
                  )}
                  <div className="search-and-addcust">
                    {Searchopen ? (
                      <div style={{ alignItems: 'center' }}>
                        <div
                          className="tooltip"
                          placement="bottom"
                          title={'Add Customer'}
                        >
                          <span className="tooltiptext">Add Customer</span>
                          <IoPersonAddSharp
                            style={{
                              color: 'rgb(18, 146, 238)',
                              fontSize: '20px',
                              cursor: 'pointer',
                            }}
                            onClick={HandleSearch}
                          />
                        </div>
                      </div>
                    ) : (
                      <div style={{ alignItems: 'center' }}>
                        <div className="tooltip" placement="bottom">
                          <span className="tooltiptext">Search Customer</span>
                          <IoSearchOutline
                            style={{
                              color: 'rgb(18, 146, 238)',
                              fontSize: '26px',
                              cursor: 'pointer',
                            }}
                            onClick={HandleSearch}
                          />
                        </div>
                      </div>
                    )}
                  </div>
                  <div
                    className={
                      CusDetails ? 'BSC1-CusDetails' : 'BSC1-CusDetails1'
                    }
                  >
                    <div className="BSC1-Basicdetails">
                      <Form.Item
                        name="CustName"
                        rules={[
                          {
                            pattern: /^(?!\s*$).+/,
                            message: 'Please Enter Customer Name',
                          },
                          {
                            validator: async (_, value) => {
                              await validateSafeInput(value); // To block HTML tags & SQL keywords
                              return Promise.resolve();
                            },
                          },
                        ]}
                      >
                        <InputField
                          label={<label>Customer Name</label>}
                          autocomplete="off"
                          isOnChange={
                            formRef.current?.getFieldsValue()?.CustName ||
                            inputValue
                              ? true
                              : false
                          }
                        />
                      </Form.Item>
                      <Form.Item
                        name="CustShortName"
                        rules={[
                          {
                            pattern: /^(?!\s*$).+/,
                            message: 'Please Enter Customer Short Name',
                          },
                          {
                            validator: async (_, value) => {
                              await validateSafeInput(value); // To block HTML tags & SQL keywords
                              return Promise.resolve();
                            },
                          },
                        ]}
                      >
                        <InputField
                          label={<label>Customer Short Name </label>}
                          autocomplete="off"
                          isOnChange={
                            formRef.current?.getFieldsValue()?.CustShortName
                              ? true
                              : false
                          }
                        />
                      </Form.Item>
                      <Form.Item name={'Gender'}>
                        <RadioGrpButton
                          Header={'Gender'}
                          content={[
                            { label: 'Male', value: 'M' },
                            { label: 'Female', value: 'F' },
                          ]}
                          // value={formRef.current?.getFieldsValue()?.Gender}
                          defaultSelect={gender}
                          onSelectFuntion={(e) => {
                            setGender(e);
                            formRef.current.setFieldsValue({ Gender: e });
                          }}
                        />
                      </Form.Item>
                      <Form.Item name={'AadhaarNo'}>
                        <InputField
                          label={'Aadhaar No'}
                          maxLength={12}
                          autocomplete="off"
                          isOnChange={
                            formRef.current?.getFieldsValue()?.AadhaarNo
                              ? true
                              : false
                          }
                          inputMode="numeric"
                          onInput={(e) => {
                            e.target.value = e.target.value.replace(/\D/g, '');
                          }}
                        />
                      </Form.Item>
                      <div className="upload_btn emp-master-form__upload">
                        <p>Upload Profile</p>
                        <Form.Item
                          name="CustomerProfile"
                          // getValueFromEvent={(e) =>
                          //   formType === 'edit' ? editstate?.EmpPhotoLink : e
                          // }
                        >
                          <Imageupload
                            singleImage={true}
                            updateImageUrl={updateImageUrl}
                            ImageLink={(() => {
                              const link =
                                formRef.current?.getFieldsValue()
                                  ?.CustomerProfile || ImageUrl;
                              // Always return a string
                              return typeof link === 'string' ? link : '';
                            })()}
                          />
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                  {/* <p
                    onClick={handleToggle}
                    style={{
                      fontSize: '13px',
                      cursor: 'pointer',
                      padding: '1rem 0.3rem',
                      display: 'flex',
                      // alignItems: "center",
                      flexDirection: 'row',
                      columnGap: '0.3rem',
                    }}
                  >
                    {' '}
                    {isOpen ? 'More info close' : 'More info open'}{' '}
                    <AiOutlineDownCircle />
                  </p> */}
                  <p
                    style={{
                      fontSize: '13px',
                      cursor: 'pointer',
                      padding: '1rem 0.3rem',
                      display: 'flex',
                      // alignItems: "center",
                      flexDirection: 'row',
                      columnGap: '0.3rem',
                      color: 'rgb(18, 146, 238)',
                    }}
                  >
                    {' '}
                    {isOpen ? (
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'flex-start',
                          gap: '4px',
                        }}
                        onClick={handleToggle}
                      >
                        More info close{' '}
                        <AiOutlineUpCircle style={{ marginTop: '4px' }} />
                      </div>
                    ) : (
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'flex-start',
                          gap: '4px',
                        }}
                        onClick={handleToggle}
                      >
                        More info open{' '}
                        <AiOutlineDownCircle style={{ marginTop: '4px' }} />
                      </div>
                    )}{' '}
                  </p>
                  {
                    <div
                      style={{ display: !isOpen && 'none' }}
                      className="BSC1-AdressInputs"
                    >
                      <Form.Item
                        name="CustEmail"
                        rules={[
                          {
                            // required: true,
                            message: 'Please enter Customer Email',
                          },
                          {
                            validator: validateEmail,
                          },
                        ]}
                      >
                        <InputField
                          label="Email Id"
                          autocomplete="off"
                          isOnChange={
                            formRef.current?.getFieldsValue()?.CustEmail
                              ? true
                              : false
                          }
                        />
                      </Form.Item>

                      <Form.Item
                        name="CustGSTIN"
                        rules={[
                          {
                            pattern:
                              /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Za-z]{1}[Z]{1}[0-9A-Za-z]{1}$/,
                            message: 'Enter a valid GSTIN',
                          },
                        ]}
                      >
                        <InputField
                          style={{ textTransform: 'uppercase' }}
                          autoComplete="off"
                          label="GST No"
                          autocapitalize="on"
                          isOnChange={
                            formRef.current?.getFieldsValue()?.CustGSTIN
                              ? true
                              : false
                          }
                        />
                      </Form.Item>

                      {isOpen && (
                        <>
                          <div className="formAddressDiv">
                            <p> Address Details</p>
                          </div>

                          <div className="customer-address-details-list">
                            {addressPreview.length > 0 ? (
                              addressPreview
                                ?.filter((addr) => addr.ActiveStatus !== 'D')
                                ?.map((addr, idx) => (
                                  <div key={idx} className="address-card">
                                    <div className="address-header">
                                      <div className="header-left">
                                        <h4>Address {idx + 1}</h4>
                                        {/* <h4>Address</h4> */}
                                      </div>
                                    </div>

                                  <div className="address-type-section">
                                    <div
                                      style={{
                                        display: 'flex',
                                        alignItems: 'center',
                                        flexWrap: 'wrap',
                                      }}
                                    >
                                      <Checkbox
                                        checked={(
                                          addressTypes[idx] || []
                                        ).includes('Delivery Address')}
                                        onChange={(e) =>
                                          handleAddressTypeChange(
                                            idx,
                                            'Delivery Address',
                                            e.target.checked
                                          )
                                        }
                                      >
                                        Delivery Address
                                      </Checkbox>
                                      <Checkbox
                                        checked={(
                                          addressTypes[idx] || []
                                        ).includes('Billing Address')}
                                        onChange={(e) =>
                                          handleAddressTypeChange(
                                            idx,
                                            'Billing Address',
                                            e.target.checked
                                          )
                                        }
                                      >
                                        Billing Address
                                      </Checkbox>
                                      <Checkbox
                                        checked={(
                                          addressTypes[idx] || []
                                        ).includes('Both Address')}
                                        onChange={(e) =>
                                          handleAddressTypeChange(
                                            idx,
                                            'Both Address',
                                            e.target.checked
                                          )
                                        }
                                      >
                                        Both Address
                                      </Checkbox>
                                    </div>
                                  </div>

                                  <div className="address-details-grid">
                                    <div className="address-detail-item address1">
                                      <div className="value">
                                        {addr?.Address1 || ''}
                                      </div>
                                    </div>

                                    <div className="address-detail-item address2">
                                      <div className="value">
                                        {addr?.Address2 || ''}
                                      </div>
                                    </div>

                                    <div className="address-detail-item zip">
                                      <div className="value">
                                        {addr?.Zip || ''}
                                      </div>
                                    </div>

                                    <div className="address-detail-item city">
                                      <div className="value">
                                        {addr?.City || ''}
                                      </div>
                                    </div>

                                    <div className="address-detail-item district">
                                      <div className="value">
                                        {addr?.Dist || ''}
                                      </div>
                                    </div>

                                    <div className="address-detail-item state">
                                      <div className="value">
                                        {addr?.State || ''}
                                      </div>
                                    </div>

                                    {addr?.Latitude && (
                                      <div className="address-detail-item coordinates">
                                        <div className="value coordinates">
                                          <MdLocationOn />{' '}
                                          {addr?.Latitude || ''},{' '}
                                          {addr?.Longitude || ''}
                                        </div>
                                      </div>
                                    )}
                                  </div>
                                  <div className="header-actions">
                                    <button
                                      type="button"
                                      onClick={() => handleEditAddress(idx)}
                                      className="edit-btn"
                                    >
                                      <FaEdit /> Edit
                                    </button>

                                    <Popconfirm
                                      title="Remove Address"
                                      description="Are you sure you want to remove this address?"
                                      onConfirm={() => handleRemoveAddress(idx)}
                                      okText="Yes, Remove"
                                      cancelText="Cancel"
                                      okType="danger"
                                    >
                                      <button
                                        className="remove-btn"
                                        type="button"
                                      >
                                        <FaTrash /> Remove
                                      </button>
                                    </Popconfirm>
                                  </div>
                                </div>
                              ))
                            ) : (
                              <div className="empty-state">
                                <MdHome />
                                <h3>No addresses added yet</h3>
                                <p>
                                  Add your first address using the form below
                                </p>
                              </div>
                            )}
                          </div>
                          {/* Single Address Input Form */}
                          <div
                            className="subinputForm"
                            style={{
                              border: '1px solid #ddd',
                              borderRadius: '8px',
                              padding: '16px',
                              marginBottom: '16px',
                            }}
                          >
                            <h4
                              style={{ marginBottom: '12px', color: '#1677ff' }}
                            >
                              Address Form
                            </h4>
                            <div
                              style={{
                                display: 'flex',
                                flexWrap: 'wrap',
                                gap: '16px',
                                alignItems: 'flex-start',
                              }}
                            >
                              {/* Address1 */}
                              <Form.Item
                                name="Address1"
                                rules={[
                                  // { required: true, pattern: /^(?!\s*$).+/, message: "Please Enter Address1" },
                                  {
                                    validator: async (_, value) => {
                                      await validateSafeInput(value);
                                      return Promise.resolve();
                                    },
                                  },
                                ]}
                              >
                                <InputField
                                  field="Address1"
                                  autoComplete="off"
                                  label={
                                    <label className="required">
                                      Address Line1
                                    </label>
                                  }
                                  fieldState={true}
                                  fieldApi={true}
                                  isOnChange={true}
                                />
                              </Form.Item>

                              {/* Address2 */}
                              <Form.Item
                                name="Address2"
                                rules={[
                                  {
                                    pattern: /^(?!\s*$).+/,
                                    message: 'Please Enter Address2',
                                  },
                                  {
                                    validator: async (_, value) => {
                                      await validateSafeInput(value);
                                      return Promise.resolve();
                                    },
                                  },
                                ]}
                              >
                                <InputField
                                  field="Address2"
                                  autoComplete="off"
                                  label="Address Line2"
                                  fieldState={true}
                                  fieldApi={true}
                                  isOnChange={true}
                                />
                              </Form.Item>

                              {/* Zip */}
                              <Form.Item
                                name="Zip"
                                rules={[
                                  // { required: true, pattern: /^(?!\s*$).+/, message: "Please Enter Zipcode" },
                                  {
                                    validator: async (_, value) => {
                                      await validateSafeInput(value);
                                      return Promise.resolve();
                                    },
                                  },
                                ]}
                              >
                                <InputField
                                  field="Zip"
                                  autoComplete="off"
                                  label={
                                    <label className="required">Zipcode</label>
                                  }
                                  maxLength={6}
                                  fieldState={true}
                                  fieldApi={true}
                                  isOnChange={true}
                                  onChange={(e) => pinCodeChange(e, 0)}
                                />
                              </Form.Item>

                              {zipCodeData && (
                                <>
                                  <Form.Item
                                    name="City"
                                    rules={[
                                      // { required: true },
                                      {
                                        validator: async (_, value) => {
                                          await validateSafeInput(value);
                                          return Promise.resolve();
                                        },
                                      },
                                    ]}
                                  >
                                    <InputField
                                      field="City"
                                      disabled
                                      label="City"
                                      fieldState={true}
                                      fieldApi={true}
                                      isOnChange={true}
                                    />
                                  </Form.Item>

                                  <Form.Item
                                    name="Dist"
                                    rules={[
                                      // { required: true },
                                      {
                                        validator: async (_, value) => {
                                          await validateSafeInput(value);
                                          return Promise.resolve();
                                        },
                                      },
                                    ]}
                                  >
                                    <InputField
                                      field="Dist"
                                      disabled
                                      label="District"
                                      fieldState={true}
                                      fieldApi={true}
                                      isOnChange={true}
                                    />
                                  </Form.Item>

                                  <Form.Item
                                    name="State"
                                    // rules={[{ required: true }]}
                                  >
                                    <InputField
                                      field="State"
                                      disabled
                                      label="State"
                                      fieldState={true}
                                      fieldApi={true}
                                      isOnChange={true}
                                    />
                                  </Form.Item>
                                </>
                              )}

                              {/* Add Address Button */}
                              <button
                                type="button"
                                onClick={handleAddOrUpdateAddress}
                                style={{
                                  backgroundColor: '#1677ff',
                                  color: '#fff',
                                  padding: '6px 12px',
                                  border: 'none',
                                  borderRadius: '6px',
                                  cursor: 'pointer',
                                  marginTop: '8px',
                                  fontWeight: '500',
                                }}
                              >
                                {editingIndex !== null
                                  ? 'Update Address'
                                  : 'Add Address'}
                              </button>
                            </div>
                          </div>
                        </>
                      )}

                      <div className="customerOffer">
                        <div
                          style={
                            offerType == 'P'
                              ? {
                                  opacity: '1',
                                  boxShadow:
                                    'rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px',
                                  margin: '3px',
                                  padding: '5px',
                                  backgroundColor: '#fff',
                                }
                              : { opacity: '0.6', boxShadow: 'none' }
                          }
                          onClick={() => {
                            Onchangeoffertype('P');
                          }}
                        >
                          <GrCheckboxSelected />
                          <p style={{ fontSize: '13px', textWrap: 'nowrap' }}>
                            Percentage
                          </p>
                        </div>
                        <div
                          style={
                            offerType == 'F'
                              ? {
                                  opacity: '1',
                                  boxShadow:
                                    'rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px',
                                  margin: '3px',
                                  padding: '5px',
                                  backgroundColor: '#fff',
                                }
                              : { opacity: '0.6', boxShadow: 'none' }
                          }
                          onClick={() => {
                            Onchangeoffertype('F');
                          }}
                        >
                          <BiCustomize />
                          <p style={{ fontSize: '13px', textWrap: 'nowrap' }}>
                            Fixed
                          </p>
                        </div>
                      </div>

                      <div>
                        <Form.Item
                          name="OfferValue"
                          rules={[
                            {
                              validator: async (_, value) => {
                                // Check for unsafe input first
                                await validateSafeInput(value); // Blocks HTML tags & SQL keywords

                                // Allow empty values (assumes optional field)
                                if (value === undefined || value === '') {
                                  return Promise.resolve();
                                }

                                // Ensure it's a number
                                if (isNaN(value)) {
                                  return Promise.reject(
                                    new Error('Offer Value must be a number')
                                  );
                                }

                                // If offer type is percentage, check range
                                if (offerType === 'P' && value >= 100) {
                                  return Promise.reject(
                                    new Error(
                                      'Offer Value must be less than 100'
                                    )
                                  );
                                }

                                return Promise.resolve();
                              },
                            },
                          ]}
                        >
                          <InputField
                            label={<label>Offer Value</label>}
                            autocomplete="off"
                            isOnChange={
                              OfferValue || OfferValue == 0 ? true : false
                            }
                            onChange={Handleoffervalue}
                            inputMode="decimal"
                            onInput={(e) => {
                              const cleanedValue = e.target.value.replace(
                                /[^0-9.]/g,
                                ''
                              );
                              const parts = cleanedValue.split('.');
                              e.target.value =
                                parts.length > 2
                                  ? `${parts[0]}.${parts.slice(1).join('')}`
                                  : cleanedValue;
                            }}
                          />
                        </Form.Item>
                      </div>

                      <div>
                        <Form.Item name="OfferActiveStatus">
                          <DropDowns
                            defaultValue={selectedValue}
                            options={yesNoOptions?.map((option) => ({
                              value: option?.value,
                              label: option?.label,
                            }))}
                            label={<label>Active / Deactive</label>}
                            className="field-DropDown"
                            onChangeFunction={(e) => handleYesOrNoChange(e)}
                            valueData={selectedValue}
                          />
                        </Form.Item>
                      </div>
                      {/* sree  */}
                      <Form.Item name="CreditDays">
                        <InputField
                          label="Credit Days"
                          autocomplete="off"
                          disabled={
                            InitialOutStandingType === 'Y' ? true : false
                          }
                          isOnChange={
                            formRef.current?.getFieldsValue()?.CustEmail ||
                            inputValue
                              ? true
                              : false
                          }
                          inputMode="decimal"
                          onInput={(e) => {
                            const cleanedValue = e.target.value.replace(
                              /[^0-9.]/g,
                              ''
                            );
                            const parts = cleanedValue.split('.');
                            e.target.value =
                              parts.length > 2
                                ? `${parts[0]}.${parts.slice(1).join('')}`
                                : cleanedValue;
                          }}
                        />
                      </Form.Item>
                      <Form.Item name="CreditLimit">
                        <InputField
                          name="CreditLimit"
                          label="Credit Limits"
                          disabled={
                            InitialOutStandingType === 'Y' ? true : false
                          }
                          autocomplete="off"
                          isOnChange={
                            formRef.current?.getFieldsValue()?.CreditLimit ||
                            inputValue
                              ? true
                              : false
                          }
                          inputMode="decimal"
                          onInput={(e) => {
                            const cleanedValue = e.target.value.replace(
                              /[^0-9.]/g,
                              ''
                            );
                            const parts = cleanedValue.split('.');
                            e.target.value =
                              parts.length > 2
                                ? `${parts[0]}.${parts.slice(1).join('')}`
                                : cleanedValue;
                          }}
                        />
                      </Form.Item>

                      <Form.Item name="AmountType" label="Type of Amount">
                        <Switch
                          size="small"
                          checked={amountType === 'D'}
                          onChange={(checked) => {
                            const newValue = checked ? 'D' : 'C';
                            formRef.current?.setFieldsValue({
                              AmountType: newValue,
                            });
                            setAmountType(newValue);
                          }}
                          checkedChildren="Advance"
                          unCheckedChildren="Balance"
                        />
                      </Form.Item>

                      {/* Then add the input field */}
                      <Form.Item name="OutStandingAmount">
                        <InputField
                          field="OutStandingAmount"
                          name="OutStandingAmount"
                          label={
                            formRef.current?.getFieldValue('AmountType') === 'D'
                              ? 'Out Standing Advance'
                              : 'Out Standing Balances'
                          }
                          disabled={InitialOutStandingType === 'Y'}
                          inputMode="numeric"
                          autoComplete="off"
                          fieldState={true}
                          fieldApi={true}
                          id="error2"
                          isOnChange={true}
                          value={formRef.current?.getFieldValue(
                            'OutStandingAmount'
                          )}
                          onChange={(e) => {
                            let value = e.target.value.replace(/[^0-9.]/g, '');
                            // Handle decimal points
                            const parts = value.split('.');
                            if (parts.length > 2) {
                              value = `${parts[0]}.${parts.slice(1).join('')}`;
                            }
                            // Limit to 2 decimal places
                            if (parts.length === 2 && parts[1].length > 2) {
                              value = `${parts[0]}.${parts[1].slice(0, 2)}`;
                            }
                            formRef.current?.setFieldsValue({
                              OutStandingAmount: value,
                            });
                          }}
                          onKeyDown={(e) => {
                            // Allow backspace, delete, arrow keys, tab
                            if (
                              [
                                'Backspace',
                                'Delete',
                                'ArrowLeft',
                                'ArrowRight',
                                'Tab',
                              ].includes(e.key)
                            ) {
                              return;
                            }
                            // Allow numbers and a single decimal point
                            if (!/[\d.]/.test(e.key)) {
                              e.preventDefault();
                              return;
                            }
                            // Prevent multiple decimal points
                            if (e.key === '.' && e.target.value.includes('.')) {
                              e.preventDefault();
                            }
                          }}
                        />
                      </Form.Item>

                      {/* <div className="upload_btn">
                        <p>Upload Document</p>
                        <Form.Item name="Document" valuePropName="ImageLink">
                          <Imageupload
                            singleImage={true}
                            updateImageUrl={updateImageUrl}
                            ImageLink={
                              formRef.current?.getFieldsValue()?.UserImage ||
                              ImageUrl
                            }
                          />
                        </Form.Item>
                      </div> */}
                      <div
                        style={{
                          display: 'flex',
                          paddingLeft: '10px',
                          flexDirection: 'column',
                          rowGap: '0.5rem',
                        }}
                      >
                        <label style={{ fontWeight: '600' }}>
                          Marital Status{' '}
                        </label>
                        <Radio.Group
                          onChange={onchangeStatus}
                          value={Maritalstatus}
                        >
                          <Radio value={'N'}>Single</Radio>
                          <Radio value={'Y'}>Married </Radio>
                        </Radio.Group>
                      </div>
                      <div>
                        <div
                          style={{
                            display: 'flex',
                            alignitems: 'center',
                            padding: '0px 10px',
                            columnGap: '2rem',
                          }}
                        >
                          <div>
                            <label style={{ fontWeight: '600' }}>
                              Date of Birth
                            </label>
                            <br />
                            <br />
                            <DatePicProd
                              canSelectPast={true}
                              onChange={dobchange}
                              valueData={DobDate}
                            />
                          </div>
                          {Maritalstatus == 'Y' && (
                            <div
                              style={{
                                display: 'flex',
                                alignitems: 'center',
                                columnGap: '2rem',
                              }}
                            >
                              <div>
                                <label style={{ fontWeight: '600' }}>
                                  {' '}
                                  Spouse DOB
                                </label>
                                <br />
                                <br />
                                <DatePicProd
                                  canSelectPast={true}
                                  onChange={spousedobchange}
                                  valueData={SpouseDobDate}
                                />
                              </div>
                              <div>
                                <label style={{ fontWeight: '600' }}>
                                  Anniversary Date
                                </label>
                                <br />
                                <br />
                                <DatePicProd
                                  canSelectPast={true}
                                  onChange={anniversaryDatechange}
                                  valueData={anniversaryDate}
                                />
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  }
                </div>
              </div>

              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Buttons
                  buttonText="SUBMIT"
                  color="901D77"
                  icon={<ArrowRightOutlined />}
                />
              </div>
            </Form>
          }
          handleCancel={
            // props.handleAddCustomerCancel

            HandleCloseModal
          }
        />
      </div>
      {/* <div>
        <DefaultModal
          title={
            <div className="Holdmodel-title">
              <FormHeader title={'Reprint'} />
            </div>
          }
          open={props.reprint}
          width={1000}
          footer={null}
          children={<BSReprint />}
          handleCancel={props.handleReprintCancel}
        />
      </div> */}
      <div>
        <DefaultModal
          open={props.QuickAdd}
          width={800}
          footer={false}
          children={
            // cardData Mohan 18-4-2025
            <ProductForm
              formType="add"
              handleCancelData={props.handleQuickAddCancel}
              ProductSearch={props.ProductSearch}
              ProductSearchType={props.ProductSearchType}
              cardData={props.cardData}
            />
          }
          handleCancel={props.handleQuickAddCancel}
        />
      </div>
      <div>
        <DefaultModal
          open={props.ExtraCharges}
          width={900}
          footer={false}
          children={
            <>
              <h1 class="formHeader">Extra Charges</h1>

              <div style={{ display: 'flex' }}>
                <Checkbox
                  checked={Checkbox1 ? true : false}
                  onClick={() => {
                    setCheckbox1(!Checkbox1);
                  }}
                ></Checkbox>{' '}
                &nbsp;&nbsp;<p>Overall orders </p> {'  '}
                &nbsp;&nbsp;
                <Checkbox
                  checked={!Checkbox1 ? true : false}
                  onClick={() => {
                    setCheckbox1(!Checkbox1);
                  }}
                ></Checkbox>{' '}
                {/* {!Checkbox1 ? ( */}
                &nbsp;&nbsp; <p> Individual orders</p>
              </div>
              <br />
              <Form ref={formRefExtraCharges} onFinish={globalamount1}>
                {!Checkbox1 && (
                  <Form.Item
                    name="Extracharges"
                    rules={[
                      {
                        required: true,
                        message: 'Please Select Dropdown',
                      },
                    ]}
                  >
                    <div style={{ display: 'flex' }}>
                      <DropDowns
                        defaultValue={selectedProduct}
                        options={CartOrderDetails?.map((option) => ({
                          value:
                            option?.InwardDtlId +
                            ' ' +
                            option?.BookingTypeName +
                            ' ' +
                            option?.SinglePc,
                          // label: option.Type === 'P'  ? option.ProdVariantName !== 'Variant 1'
                          // ? `${option?.ProdName} (${option.Size} ${option.UomName}) (${option.ProdVariantName}${BookingTypeBoth ? ` (${option?.BookingTypeName})` : ''})`
                          //   : `${option?.ProdName} (${option.Size} ${option.UomName}) ${BookingTypeBoth ? ` (${option?.BookingTypeName})` : ''}`
                          //   : `${option?.ProdName} (1 Combo)`
                          label:
                            option.Type === 'P'
                              ? option.ProdVariantName !== 'Variant 1'
                                ? `${option?.ProdName} (${option.Size} ${option?.SinglePc === 'PCS' ? 'PCS' : option.UomName}) (${option.ProdVariantName}${BookingTypeBoth ? ` (${option?.BookingTypeName})` : ''})`
                                : `${option?.ProdName} (${option.Size}${option?.SinglePc === 'PCS' ? 'PCS' : option.UomName}) ${BookingTypeBoth ? ` (${option?.BookingTypeName})` : ''}`
                              : `${option?.ProdName} (1 Combo)`,
                        }))}
                        label={<label className="required">Product Name</label>}
                        className="field-DropDown"
                        onChangeFunction={(e) => onChangeProduct(e)}
                        valueData={selectedProduct}
                      />
                    </div>
                  </Form.Item>
                )}
                <div>
                  {Checkbox1 ? (
                    <div>
                      <Table
                        components={components}
                        rowClassName={() => 'editable-row'}
                        bordered
                        dataSource={dataSource}
                        columns={columns}
                      />
                    </div>
                  ) : (
                    <div>
                      {/* JSX specific to false branch */}
                      <Table
                        dataSource={dataSource1}
                        columns={defaultColumns1}
                      />
                    </div>
                  )}

                  {!Checkbox1 && (
                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'right',
                        width: '100%',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          justifyContent: 'flex-end',
                          width: '100px',
                        }}
                      >
                        <Buttons
                          buttonText="SAVE"
                          color="901D77"
                          icon={<ArrowRightOutlined />}
                          //  handleSubmit={() => { globalamount1() }}
                        />
                      </div>
                    </div>
                  )}
                  {!Checkbox1 && (
                    <div>
                      <Table
                        columns={columns1}
                        rowClassName={() => 'editable-row'}
                        components={components1}
                        bordered
                        dataSource={TableName}
                        width={'120px'}
                        //pagination={column2?.length < "11" ? false : true}
                      ></Table>
                    </div>
                  )}
                </div>
                {Checkbox1 && (
                  <div style={{ display: 'flex' }}>
                    <h3>Total Amount:</h3>
                    <h3>{safeRound(totalAmount)}</h3>
                  </div>
                )}{' '}
                <br />
                {Checkbox1 && (
                  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <Buttons
                      buttonText="SUBMIT"
                      color="901D77"
                      icon={<ArrowRightOutlined />}
                      handleSubmit={() => {
                        globalamount(extdata);
                      }}
                    />
                  </div>
                )}
                {!Checkbox1 && (
                  <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                    <Buttons
                      buttonText="SUBMIT"
                      color="901D77"
                      icon={<ArrowRightOutlined />}
                      handleSubmit={() => {
                        globalamount2(TableName);
                      }}
                    />
                  </div>
                )}
              </Form>
            </>
          }
          handleCancel={props.ExtraChargesCancle}
        />
      </div>
      <div>
        <DefaultModal
          open={WeightScale}
          title="Item Info"
          width={1000}
          footer={false}
          children={
            <>
              <br />
              <div className="WeightScaleMainDiv">
                <Form ref={formWsRef} onFinish={onFinish}>
                  <div className="WeightScaleSubDiv">
                    <Form.Item
                      name="ItemName"
                      rules={[
                        {
                          required: true,
                          message: 'Please Enter Item Name',
                        },
                      ]}
                    >
                      <AutoComplete
                        value={ProductValue}
                        options={WSProductList?.map((option) => ({
                          value: option.ProdName,
                          label: option.ProdName,
                        }))}
                        style={{
                          width: 200,
                        }}
                        // onSearch={(text) => setOptions(getPanelValue(text))}
                        onChange={WSProductChange}
                        onSelect={WSProductSelect}
                        placeholder="Product Name"
                        allowClear={{
                          clearIcon: <CloseSquareFilled />,
                        }}
                      />
                    </Form.Item>
                    {WeightScale === true && (
                      <WeightScaleComp
                        testfun={myfun}
                        setportfun={setWsport}
                        portval={wsport}
                        portclose={WeightScale2}
                        WeightScale={WeightScale}
                      />
                    )}

                    <Form.Item name="WSProductWeight">
                      <InputField
                        label={<label>Product Weight</label>}
                        autocomplete="off"
                        isOnChange={WSProductWeight ? true : false}
                        readOnly={true}
                      />
                    </Form.Item>
                    <Form.Item name="WSProductRate">
                      <InputField
                        label={<label>Product Price</label>}
                        autocomplete="off"
                        isOnChange={WSProductRate ? true : false}
                        valueData={WSProductRate}
                        readOnly={true}
                        disabled={
                          formWsRef.current?.getFieldsValue().WSProductRate
                            ? true
                            : false
                        }
                      />
                    </Form.Item>
                    <CiCalculator1
                      className="WSCalculator-icon"
                      onClick={CalculateWeightOpen}
                    />
                    {CalcPriceWeightOpen && (
                      <>
                        <Form.Item
                          name="CalcProductRate"
                          rules={[
                            {
                              pattern: /^[1-9]\d*(\.\d+)?$/,
                              message: 'Please Enter Valid Price',
                            },
                            { validator: HandleProductName },
                          ]}
                        >
                          <InputField
                            label={<label> Customer Product Price</label>}
                            autocomplete="off"
                            isOnChange={CalcProductRate > 0 ? true : false}
                            valueData={CalcProductRate}
                            onChange={CalculateWeight}
                          />
                        </Form.Item>
                        <Form.Item name="CalcProductWeight">
                          <InputField
                            label={<label> Weight For Given Price</label>}
                            autocomplete="off"
                            isOnChange={CalcProductWeight > 0 ? true : false}
                            valueData={CalcProductWeight}
                            readOnly={true}
                          />
                        </Form.Item>
                      </>
                    )}
                    <Form.Item name="WSTotalPrice">
                      <InputField
                        label={<label>Product Total Price</label>}
                        autocomplete="off"
                        isOnChange={WSTotalPrice > 0 ? true : false}
                        valueData={WSTotalPrice}
                        readOnly={true}
                      />
                    </Form.Item>

                    <Buttons
                      buttonText="ADD"
                      color="901D77"
                      icon={<ArrowRightOutlined />}
                      disabled={WSTotalPrice > 0 ? false : true}
                    />
                  </div>
                </Form>

                {WSProductDataSource?.length > 0 ? (
                  <div className="WeightScale-table">
                    <Tables
                      columns={WSStockColumns}
                      data={WSProductDataSource}
                    />
                  </div>
                ) : (
                  ProductValue && (
                    <div>
                      <p>No Data Found</p>
                    </div>
                  )
                )}
              </div>
            </>
          }
          handleCancel={WSModalPortclose}
        />
      </div>
    </div>
  );
};
export default FeaturesFunctionalities;