import React, { useEffect, useRef, useState, useCallback, forwardRef, useImperativeHandle } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import WebFont from 'webfontloader';
import { SwatchesPicker } from 'react-color';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
import { RadioGrpButton } from '../../../../Components/Forms/RadioGroup.jsx';
import {

  CloseOutlined,
  ArrowRightOutlined,
} from '@ant-design/icons';
import { BiSkipPrevious } from 'react-icons/bi';
import { BiSkipNext } from 'react-icons/bi';
import { Modal, Form } from 'antd';
import { Checkbox, Row } from 'antd';
import { DropDowns } from '../../../../Components/Forms/DropDown';
import {
  selectedFontId,
  selectedColorId,
  getCatFonts,
  getSubCatFonts,
  getCardFonts,
  getTableFonts,
  postColorData,
  GlobalCatData,
  GlobalSubcatData,
  GlobalCardData,
  GlobalTableData,
  postCatFontData,
  postSubcatFontData,
  postCardFontData,
  postTableFontData,
  getLayout,
  getNavbar,
  getCategory,
  getCard,
  getSubCategory,
  getBillingTable,
  changeSelectedLayout,
  changeSelectedNavbar,
  changeSelectedCategory,
  changeSelectedSubCategory,
  changeSelectedNavbarCheckedItems,
  changeSelectedCategoryCheckedItems,
  changeSelectedSubCategoryCheckedItems,
  changeSelectedCardCheckedItems,
  changeSelectedCard,
  changeSelectedBillingTable,
  changeSelectedBillTableCheckedItems,
  postSelectionComponentData,
  putSelectionComponentData,
  changePreviewComponents,
  getCombo1Navbar,
  getCombo2Navbar,
  getTemplateData,
  getTemplate,
  getColorsDataCat,
  getColorsDataSubcat,
  getColorsDataCard,
  getColorsDataBilltable,
  getColorsCat,
  getColorsSubcat,
  getColorsCard,
  getLayoutOverallBackgroundColors,
  GlobalLayoutOverallbackgroundlist,
  GlobalSubcategoryOverallColorsList,
  GlobalCategoryOverallColorsList,
  GlobalcardOverallColorsList,
  GlobalBillingOverallColorsList,
  getCategoryOverallBackgroundColors,
  getSubcategoryOverallBackgroundColors,
  getCardOverallBackgroundColors,
  getBillingOverallBackgroundColors,
  getColorsBilltable,
  SelectedGlobalCardFont,
  SelectedGlobalBillingFont,
  SelectedGlobalCatgFont,
  SelectedGlobalSubCatgFont,
  changeSelectedCardColorDetail,
  changeSelectedBillingColorDetail,
  changeSelectedCatgColorDetail,
  changeSelectedSubCatgColorDetail,
  changeSelectedLayoutColorDetail,
  changeSelectedBillingFont,
  changeSelectedCardFont,
  changeSelectedCatgFont,
  changeSelectedSubCatgFont,
  SelectedGlobalCardColorDetail,
  SelectedGlobalBillingColorDetail,
  SelectedGlobalCatgColorDetail,
  SelectedGlobalSubCatgColorDetail,
  getThemes,
  changeThemeCreation,
  getThemeCreation,
  getOthersTemplate,
  GlobalDefaultTheme,
  GlobalSelectedTheme,
  changeSelectedTheme,
  changeOthersTheme,
  GlobalActiveTheme,
  changeActiveTheme,
  changeScanTemplate,
} from '../../../../Features/ThemeChange/ThemeChange';
import { InputField } from '../../../../Components/Forms/InputField.jsx';
import { Messages } from '../../../../Components/Notifications/Messages';
import Buttons from '../../../../Components/Forms/Buttons';
import { getSession, validateSafeInput } from '../../../../Services/Others';
import '../../../../Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss';
import {
  changeBreadCrumb,
  getEmpAccess,
} from '../../../../Features/AppPage/CenterPage';
import { getPreferenceData } from '../../../../Features/BookingScreen/BookingData/BookingData.js';
import { useAuth } from '../../../../AuthContext.jsx';
import { HiOutlineSquares2X2, HiSquaresPlus } from 'react-icons/hi2';
import { ApplicationPreferences, getCommonAppPreference } from '../../../../Features/BrachLogin/BranchLogin.js';
import { TbLayoutNavbar } from 'react-icons/tb';
import { HiMenuAlt1 } from 'react-icons/hi';
import { IoMdAdd } from "react-icons/io";
import { LuCreditCard } from "react-icons/lu";
import { IoReceiptOutline } from "react-icons/io5";

const subDirectory = import.meta.env.BASE_URL;
const SelectionComponent = forwardRef((props, ref) => {
  const { SadminuserAccess } = useAuth();

  console.log(SadminuserAccess, 'SadminuserAccess');

  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Sales Screen'
  );
  const dispatch = useDispatch();
  const formRef = useRef(null);
  const [form] = Form.useForm();

  const [Catform] = Form.useForm();
  const [Subform] = Form.useForm();
  const [Cardform] = Form.useForm();
  const [Tableform] = Form.useForm();
  const [isFormValid, setIsFormValid] = useState(false);
  const templateData1 = useSelector(getTemplateData);
  const selthemeData = useSelector(getThemeCreation);
  console.log(selthemeData, templateData1, 'themeData111111111');
  const LayoutOverallbackgroundlist = useSelector(
    GlobalLayoutOverallbackgroundlist
  );
  const SubcategoryOverallColorsList = useSelector(
    GlobalSubcategoryOverallColorsList
  );
  const CategoryOverallColorsList = useSelector(
    GlobalCategoryOverallColorsList
  );
  const cardOverallColorsList = useSelector(GlobalcardOverallColorsList);
  const BillingOverallColorsList = useSelector(GlobalBillingOverallColorsList);
  const CatColorData = useSelector(getColorsDataCat);
  const SubcatColorData = useSelector(getColorsDataSubcat);
  const CardColorData = useSelector(getColorsDataCard);
  const TableColorData = useSelector(getColorsDataBilltable);
  const CatFontData = useSelector(GlobalCatData);
  const SubCatFontData = useSelector(GlobalSubcatData);
  const CardFontData = useSelector(GlobalCardData);
  const TableFontData = useSelector(GlobalTableData);
  const SelectedCardFont = useSelector(SelectedGlobalCardFont);
  const SelectedBillingFont = useSelector(SelectedGlobalBillingFont);
  const SelectedCatgFont = useSelector(SelectedGlobalCatgFont);
  const SelectedSubCatgFont = useSelector(SelectedGlobalSubCatgFont);
  const EditColor = useSelector(selectedColorId);
  const EditFont = useSelector(selectedFontId);
  const GlobalCardColorDetail = useSelector(SelectedGlobalCardColorDetail);
  const GlobalBillingColorDetail = useSelector(
    SelectedGlobalBillingColorDetail
  );
  const GlobalCatgColorDetail = useSelector(SelectedGlobalCatgColorDetail);
  const GlobalSubCatgColorDetail = useSelector(
    SelectedGlobalSubCatgColorDetail
  );
  const DefaultThemes = useSelector(GlobalDefaultTheme);
  const SelectedTheme = useSelector(GlobalSelectedTheme)
  const activeTheme = useSelector(GlobalActiveTheme);
  const appPreferences = useSelector(ApplicationPreferences);
  const bookingTypePreference = appPreferences?.find((preference) => preference?.PreferredCatName === 'Booking Type')?.PreferenceCatDetails
  const dinePreference = bookingTypePreference?.find((type) => type?.PreferredSubCatName?.toLowerCase() === "dine in" && type?.PreferredStatus === 'Y')
  const takeAwayPreference = bookingTypePreference?.find((type) => type?.PreferredSubCatName?.toLowerCase() === "take away" && type?.PreferredStatus === 'Y')
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const UserType = getSession('UserType');

  const [Temptemplatedata, setTemptemplatedata] = useState(false);
  const [GlobalPreferenceData, setGlobalPreferenceData] = useState([]);
  const [selectedCatFont, setSelectedCatFont] = useState();
  const [selectedSubCatFont, setSelectedSubcatFont] = useState();
  const [selectedCardFont, setSelectedCardFont] = useState();
  const [selectedTableFont, setSelectedTableFont] = useState();
  const [UploadColor, setUploadColor] = useState(false);
  const [BillUploadColor, BillsetUploadColor] = useState(false);
  const [UploadColorselectcard, setUploadColorselectcard] = useState(false);
  const [UploadLayoutOverallBackground, setUploadLayoutOverallBackground] =
    useState(false);
  const [CategoryUploadOverallColor, setCategoryUploadOverallColor] =
    useState(false);
  const [SubcategoryUploadOverallColor, setSubcategoryUploadOverallColor] =
    useState(false);
  const [cardUploadOverallColor, setcardUploadOverallColor] = useState(false);
  const [BillingUploadOverallColor, setBillingUploadOverallColor] =
    useState(false);
  const [UploadColorsubcat, setUploadColorsubcat] = useState(false);
  const [catModelOpen, setcatModelOpen] = useState(false);
  const [subCatModelopen, setSubCatModelopen] = useState(false);
  const [CardModelopen, setCardModelopen] = useState(false);
  const [TableModelopen, setTableModelopen] = useState(false);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  // Dropdowndatas state
  const [LayoutData, setLayoutData] = useState([]);
  const [NavbarData, setNavbarData] = useState([]);
  const [CategoryData, setCategoryData] = useState([]);
  const [SubCategoryData, setSubCategoryData] = useState([]);
  const [CardData, setCardData] = useState([]);
  const [BillingTableData, setBillingTableData] = useState([]);

  //  selected Dropdown ids
  const [currentLayoutsessionID, setCurrentLayoutsessionID] = useState(null);
  const [SelectedLayoutId, setSelectedLayoutId] = useState(null);
  const [SelectedNavbarId, setSelectedNavbarId] = useState(null);
  const [SelectedCategoryId, setSelectedCategoryId] = useState(null);
  const [SelectedSubCategoryId, setSelectedSubCategoryId] = useState(null);
  const [SelectedCardId, setSelectedCardId] = useState(null);
  const [SelectedBillingTableId, setSelectedBillingTableId] = useState(null);
  const [ShowDropDownData, SetShowDropDownData] = useState([]);


  //navbarcheck boxes
  const [NavBarCheckList, setNavBarCheckList] = useState([]);
  const [SelectedNavCheckValues, setSelectedNavCheckValues] = useState([]);
  const [SelectedNavCheckList, setSelectedNavCheckList] = useState([]);
  const DineInChecked = SelectedNavCheckValues?.includes(
    NavBarCheckList?.[0]?.ComponentOptionsDetails?.filter(
      (item) => item?.OptionName === 'DineIn'
    )?.[0]?.OptionId
  );
  //categorycheckbox
  const [CategoryCheckList, setCategoryCheckList] = useState([]);
  const [SelectedCategoryCheckValues, setSelectedCategoryCheckValues] =
    useState([]);
  const [SelectedCategoryCheckList, setSelectedCategoryCheckList] = useState(
    []
  );

  // Subcategorycheckbox
  const [SubCategoryCheckList, setSubCategoryCheckList] = useState([]);
  const [SelectedSubCategoryCheckValues, setSelectedSubCategoryCheckValues] =
    useState([]);
  const [SelectedSubCategoryCheckList, setSelectedSubCategoryCheckList] =
    useState([]);

  //Cardcheck boxes
  const [CardCheckList, setCardCheckList] = useState([]);
  const [SelectedCardCheckValues, setSelectedCardCheckValues] = useState([]);
  const [SelectedCardCheckList, setSelectedCardCheckList] = useState([]);

  //  BillingTable

  const [BillTableCheckList, setBillTableCheckList] = useState([]);
  const [SelectedBillTableCheckValues, setSelectedBillTableCheckValues] =
    useState([]);
  const [SelectedBillTableCheckList, setSelectedBillTableCheckList] = useState(
    []
  );

  // Hold and addcustomer OptionsDetails
  const [HoldButton, setHoldButton] = useState(false);
  const [AddCustomerButton, setAddCustomerButton] = useState(false);
  // nav hold option
  const [NavHoldButton, setNavHoldButton] = useState(false);
  const [NavAddCustomerButton, setNavAddCustomerButton] = useState(false);
  // category Image Selection
  const [CatImageSelection, setCatImageSelection] = useState(false);
  const [CatbackgroundSelection, setCatbackgroundSelection] = useState(false);
  const [CardSelection, setCardSelection] = useState(false);
  const [BillbackgroundSelection, setBillbackgroundSelection] = useState(false);
  const [SmallImage, setSmallImage] = useState(false);
  const [SelectAllPositionImage, setSelectAllPositionImage] = useState([]);
  const [SelectfliterPositionImage, setSelectfliterPositionImage] =
    useState(false);
  const [SelectedTableColor, setSelectedTableColor] = useState(null);
  const [SelectedCardColor, setSelectedCardColor] = useState(null);
  const [SelectedSubCatColor, setSelectedSubCatColor] = useState(null);
  const [SelectedCatColor, setSelectedCatColor] = useState(null);
  const [dropdownLayoutOverallColor, setdropdownLayoutOverallColor] =
    useState(null);
  const [dropdownCategoryOverallColor, setdropdownCategoryOverallColor] =
    useState(null);
  const [dropdownSubcategoryOverallColor, setdropdownSubcategoryOverallColor] =
    useState(null);
  const [dropdownCardOverallColor, setdropdownCardOverallColor] =
    useState(null);
  const [dropdownBillingOverallColor, setdropdownBillingOverallColor] =
    useState(null);
  const [CatColorType, setcatColorType] = useState('Y');
  const [CardColorType, setCardColorType] = useState('Y');
  const [SubCatColorType, setSubCatColorType] = useState('Y');
  const [TableColorType, setTableColorType] = useState('Y');
  const [CatfontColor, setCatfontColor] = useState('#000000');
  const [catFontHex, setCatFontHex] = useState(
    CatfontColor?.replace('#', '').trim()
  );
  const [SubcatfontColor, setSubcatfontColor] = useState('#000000');
  const [subCatFontHex, setSubCatFontHex] = useState(
    SubcatfontColor?.replace('#', '').trim()
  );
  const [TablefontColor, setTablefontColor] = useState('#000000');
  const [tableFontHex, setTableFontHex] = useState(
    TablefontColor?.replace('#', '').trim()
  );
  const [CardfontColor, setCardfontColor] = useState('#000000');
  const [cardFontHex, setCardFontHex] = useState(
    CardfontColor?.replace('#', '').trim()
  );
  const [CatbackgroundColor, setCatbackgroundColor] = useState('#009b00');
  const [catBGHex, setCatBGHex] = useState(
    CatbackgroundColor?.replace('#', '').trim()
  );
  const [SubcatbackgroundColor, setSubcatbackgroundColor] = useState('#009b00');
  const [subCatBGHex, setSubCatBGHex] = useState(
    SubcatbackgroundColor?.replace('#', '').trim()
  );
  const [CardbackgroundColor, setCardbackgroundColor] = useState('#009b00');
  const [cardBGHex, setCardBGHex] = useState(
    CardbackgroundColor?.replace('#', '').trim()
  );
  const [TablebackgroundColor, setTablebackgroundColor] = useState('#009b00');
  const [tableBGHex, setTableBGHex] = useState(
    TablebackgroundColor?.replace('#', '').trim()
  );
  const [LayoutOverallColor, setLayoutOverallColor] = useState('#000000');
  const [layoutOverallHexCode, setLayoutOverallHexCode] = useState(
    LayoutOverallColor?.replace('#', '').trim()
  );
  const [CategoryOverallColor, setCategoryOverallColor] = useState('#000000');
  const [categoryOverallHex, setCategoryOverallHex] = useState(
    CategoryOverallColor?.replace('#', '').trim()
  );
  const [SubcategoryOverallColor, setSubcategoryOverallColor] =
    useState('#000000');
  const [subCatOverallHex, setSubCatOverallHex] = useState(
    SubcategoryOverallColor?.replace('#', '').trim()
  );
  const [CardOverallColor, setCardOverallColor] = useState('#000000');
  const [cardOverallHex, setCardOverallHex] = useState(
    CardOverallColor?.replace('#', '').trim()
  );
  const [BillingOverallColor, setBillingOverallColor] = useState('#000000');
  const [billingOverallHex, setBillingOverallHex] = useState(
    BillingOverallColor?.replace('#', '').trim()
  );
  const [selectOverallSelected, setSelectOverallSelected] = useState(true);
  const [empData, setEmpData] = useState();
  const [addnewAccess, setaddnewAccess] = useState(true);

  // const [activeTheme, setActiveTheme] = useState(
  //   Object.keys(templateData1)?.length > 0 ? 'customised' : 'default'
  // );
  const [ThemesData, setThemesData] = useState([]);
  const [templateData, settemplateData] = useState({});

  console.log(DefaultThemes, 'ThemesDataThemesData');
  // const [SelectedTheme, setSelectedTheme] = useState(null);
  console.log(SelectedTheme, 'SelectedThemeSelectedTheme');
  const [FirstOnClick, setFirstOnClick] = useState(false);
  const [isNext, isSetNext] = useState(true);
  const items = [
    {
      name: 'Home',
      link: `${subDirectory}app-page/home`,
    },
    // {
    //   name: "SalesSetup",
    //   link: `${subDirectory}saleslayouts/sales-selection`,
    // },
  ];
  useImperativeHandle(ref, () => ({
    submit: () => {
      form.submit(); // Triggers the onFinish callback
    },
  }));
  useEffect(() => {
    dispatch(changeThemeCreation({ formtype: 'new' }));
    dispatch(changeSelectedTheme(null));
    dispatch(changeBreadCrumb({ items: items }));
    gettemplatedetail();
    GetPreferenceDetails();
    // if (UserType === "Employee") {
    //   fetchApi()
    // }
    getThemesData();
  }, []);
  useEffect(() => {
    if (activeTheme == 'default') {
      if (Object.keys(DefaultThemes)?.length > 0) {
        dispatch(changeSelectedTheme({ ThemeId: DefaultThemes?.[0]?.TemplatePreferenceId, ThemeName: DefaultThemes?.[0]?.ThemeName }));
        settemplateData(DefaultThemes?.[0]);
        dispatch(changeThemeCreation({ formtype: 'edit', editdata: DefaultThemes?.[0] }));
      } else {
        dispatch(changeSelectedTheme({}));
        settemplateData({});
      }
    }
  }, [DefaultThemes, activeTheme]);
  useEffect(() => {
    if (UserType === 'Employee') {
      fetchApi();
    }
  }, [UserType]);

  useEffect(() => {
    let hasAccess = false;

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

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

  const gettemplatedetail = async () => {
    let tempdetail = await dispatch(
      getTemplate({ CompId: CompId, BranchId: BranchId, AppId: AppId })
    ).unwrap();

    if (tempdetail?.data?.statusCode == 1) {
      dispatch(changeActiveTheme("customised"));
    } else {
      setTemptemplatedata(true);
    }
  };

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

  const getThemesData = async () => {
    // let themeresponse = 
    await dispatch(getThemes()).unwrap();
    // if (themeresponse.data?.statusCode === 1) {
    //   let themedatalist = themeresponse.data?.data?.filter(
    //     (item) => item?.ActiveStatus == 'A'
    //   );
    //   if (themedatalist?.length > 0) {
    //     // setThemesData(themedatalist);
    //     // console.log(themedatalist, 'themedatalist');
    //     // dispatch(changeThemeCreation({ formtype: 'edit', editdata: themedatalist?.[0] }));
    //     // setSelectedTheme(themedatalist?.[0]?.TemplatePreferenceId);
    //   } else {
    //     // GetOthersTemplate();
    //   }
    // } else {
    //   setThemesData([]);
    // }
  };

  useEffect(() => {
    // if(Object.keys(templateData1)?.length > 0){
    //    settemplateData(templateData1)

    // }else{
    if (activeTheme == 'default') {
      if (Object.keys(selthemeData)?.length > 0) {
        settemplateData(selthemeData);
      } else {
        settemplateData({});
      }
    } else {
      settemplateData(templateData1);
      // }
    }
  }, [templateData1, selthemeData, activeTheme]);
  useEffect(() => {
    if (Object.keys(templateData)?.length > 0) {

      setEditTemplateData();
    } else {
      ClearAllComponentStates();
    }
  }, [templateData]);
  useEffect(() => {
    const Unpaidchecked =
      BillTableCheckList?.[0]?.ComponentOptionsDetails?.find(
        (item) => item?.OptionName === 'UnpaidBill'
      )?.OptionId;
    if (!DineInChecked && Unpaidchecked) {
      setSelectedBillTableCheckList((prevList) =>
        prevList?.filter((item) => item.OptionId !== Unpaidchecked)
      );
      setSelectedBillTableCheckValues((prevValues) =>
        prevValues?.filter((item) => item !== Unpaidchecked)
      );
      let obj = SelectedBillTableCheckList?.filter(
        (item) => item.OptionId !== Unpaidchecked
      );
      dispatch(changeSelectedBillTableCheckedItems(obj));
    }
  }, [DineInChecked]);
  const ClearAllComponentStates = () => {
    GetLayoutFun();
    setBillbackgroundSelection(!BillbackgroundSelection);
    setCatbackgroundSelection(!CatbackgroundSelection);
    setCardSelection(!CardSelection);
    setSelectedLayoutId(null);
    setSelectedNavbarId(null);
    setNavBarCheckList([]);
    setSelectedNavCheckValues([]);
    setSelectedNavCheckList([]);
    setSelectedCategoryId(null);
    setCategoryCheckList([]);
    setSelectedCategoryCheckValues([]);
    setSelectedCategoryCheckList([]);
    setSelectedSubCategoryId(null);
    setSelectedSubCategoryCheckValues([]);
    setSubCategoryCheckList([]);
    setSelectedSubCategoryCheckList([]);
    setSelectedCardId(null);
    setCardCheckList([]);
    setSelectedCardCheckValues([]);
    setSelectedCardCheckList([]);
    setSelectedBillingTableId(null);
    setBillTableCheckList([]);
    setSelectedBillTableCheckValues([]);
    setSelectedBillTableCheckList([]);
    setHoldButton(false);
    setAddCustomerButton(false);
    setNavHoldButton(false);
    setNavAddCustomerButton(false);
    setCatImageSelection(false);
    setSelectedTableColor(null);
    setSelectedCardColor(null);
    setSelectedSubCatColor(null);
    setSelectedCatColor(null);
    setdropdownLayoutOverallColor(null);
    setdropdownSubcategoryOverallColor(null);
    setdropdownCardOverallColor(null);
    setdropdownBillingOverallColor(null);
    formRef.current.resetFields();

    dispatch(changePreviewComponents({}));
  };

  const GetPreferenceDetails = async () => {
    let Preference = await dispatch(
      getPreferenceData({ CompId: CompId, BranchId: BranchId, AppId: AppId })
    ).unwrap();
    if (Preference?.data?.statusCode === 1) {
      let Prefencedata = Preference?.data?.data?.[0]?.[
        'SettingDtlDetails'
      ]?.find((item) => item.SettingIdName === 'DineIn');
      setGlobalPreferenceData(Prefencedata);
    } else {
      setGlobalPreferenceData();
    }
  };

  const setEditTemplateData = async () => {
    if (Object.keys(templateData)?.length > 0) {
      let gettingEditLayOutData = await dispatch(getLayout()).unwrap();
      if (gettingEditLayOutData?.data?.statusCode === 1) {
        setLayoutData(gettingEditLayOutData.data?.data);
        const editLayoutVal = gettingEditLayOutData.data?.data?.filter(
          (item) => item.ComponentName == templateData?.['BookingLayout']?.[0]
        );
        formRef?.current?.setFieldsValue({
          LayoutId: editLayoutVal?.[0]?.['ComponentId'],
        });
        setSelectedLayoutId(editLayoutVal?.[0]?.['ComponentId']);
        selectLayout(editLayoutVal?.[0]?.['ComponentId']);
        if (editLayoutVal?.[0]?.ComponentName === 'Combo1') {
          GetCombo1Navbar();
        } else if (editLayoutVal?.[0]?.ComponentName === 'Combo2') {
          GetCombo2Navbar();
        }
        dispatch(
          changePreviewComponents({
            BookingLayout: [
              editLayoutVal[0]?.ComponentName,
              editLayoutVal[0]?.ComponentOptionsDetails,
            ],
          })
        );
        let Imageselection = templateData?.['BookingCategory']?.[1]?.filter(
          (a) => a.OptionName === 'Image'
        );
        if (Imageselection?.length > 0) {
          setCatImageSelection(true);
        } else {
          setCatImageSelection(false);
        }
        let smallImageSelection = templateData?.['BookingCard']?.[1]?.filter(
          (a) => a.OptionName === 'SmallImage'
        );
        if (smallImageSelection?.length) {
          setSmallImage(true);
        }
      }
    }
  };

  useEffect(() => {
    if (templateData && NavbarData?.length > 0) {
      if (templateData?.BookingLayout?.[0] === 'Combo2') {
        let editNavbarVal = NavbarData?.filter(
          (item) => item.ComponentName == templateData?.['BookingCombo2']?.[0]
        );
        selectNavbar(editNavbarVal?.[0]?.['ComponentId']);
        const optionIds = templateData?.['BookingCombo2']?.[1]?.map(
          (item) => item?.OptionId
        );
        NavBarSelectlistonChange(optionIds);
      } else if (templateData?.BookingLayout?.[0] === 'Combo1') {
        let editNavbarVal = NavbarData?.filter(
          (item) => item.ComponentName == templateData?.['BookingCombo1']?.[0]
        );
        selectNavbar(editNavbarVal?.[0]?.['ComponentId']);
        const optionIds = templateData?.['BookingCombo1']?.[1]?.map(
          (item) => item?.OptionId
        );
        NavBarSelectlistonChange(optionIds);
      } else {
        let editNavbarVal = NavbarData?.filter(
          (item) => item.ComponentName == templateData?.['BookingNavbar']?.[0]
        );
        selectNavbar(editNavbarVal?.[0]?.['ComponentId']);
        const optionIds = templateData?.['BookingNavbar']?.[1]?.map(
          (item) => item?.OptionId
        );
        NavBarSelectlistonChange(optionIds);
      }
    }
  }, [NavbarData]);

  useEffect(() => {
    if (templateData && CategoryData?.length > 0) {
      const editCategoryrVal = CategoryData?.filter(
        (item) => item.ComponentName == templateData?.['BookingCategory']?.[0]
      );
      if (
        CategoryData[0]?.SessionId != null &&
        CategoryData[0]?.SessionId != undefined
      ) {
        let OverallCategorydata = {
          SessionID: CategoryData[0]?.SessionId,
          OptionName: 'OverallBackground',
        };
        dispatch(getCategoryOverallBackgroundColors(OverallCategorydata))
          .unwrap;
      }
      if (
        CategoryData[0]?.SessionId != null &&
        CategoryData[0]?.SessionId != undefined
      ) {
        let Categorydata = {
          SessionID: CategoryData[0]?.SessionId,
          OptionName: 'Background',
        };
        dispatch(getColorsCat(Categorydata)).unwrap;
      }

      dispatch(getCatFonts(CategoryData[0]?.SessionId)).unwrap;
      selectCategory(editCategoryrVal?.[0]?.['ComponentId']);
      let optionIds = templateData?.['BookingCategory']?.[1]?.map(
        (item) => item?.OptionId
      );
      CategorySelectlistonChange(optionIds);
    }
  }, [CategoryData]);

  useEffect(() => {
    if (templateData && SubCategoryData?.length > 0) {
      const editSubCategoryrVal = SubCategoryData?.filter(
        (item) =>
          item.ComponentName == templateData?.['BookingSubCategory']?.[0]
      );
      if (
        SubCategoryData[0]?.SessionId != null &&
        SubCategoryData[0]?.SessionId != undefined
      ) {
        let OveralSubCategorydata = {
          SessionID: SubCategoryData[0]?.SessionId,
          OptionName: 'OverallBackground',
        };
        dispatch(getSubcategoryOverallBackgroundColors(OveralSubCategorydata))
          .unwrap;
      }
      if (
        SubCategoryData[0]?.SessionId != null &&
        SubCategoryData[0]?.SessionId != undefined
      ) {
        let SubCategorydata = {
          SessionID: SubCategoryData[0]?.SessionId,
          OptionName: 'Background',
        };
        dispatch(getColorsSubcat(SubCategorydata)).unwrap;
      }

      selectSubCategory(editSubCategoryrVal?.[0]?.['ComponentId']);
      let optionIds = templateData?.['BookingSubCategory']?.[1]?.map(
        (item) => item?.OptionId
      );
      SubCategorySelectlistonChange(optionIds);
    }
  }, [SubCategoryData]);

  useEffect(() => {
    if (templateData && CardData?.length > 0) {
      let editCardVal = CardData?.filter(
        (item) => item.ComponentName == templateData?.['BookingCard']?.[0]
      );
      if (
        CardData[0]?.SessionId != null &&
        CardData[0]?.SessionId != undefined
      ) {
        let OverallCarddata = {
          SessionID: CardData[0]?.SessionId,
          OptionName: 'OverallBackground',
        };
        dispatch(getCardOverallBackgroundColors(OverallCarddata)).unwrap;
      }
      if (
        CardData[0]?.SessionId != null &&
        CardData[0]?.SessionId != undefined
      ) {
        let Carddata = {
          SessionID: CardData[0]?.SessionId,
          OptionName: 'Background',
        };
        dispatch(getColorsCard(Carddata)).unwrap;
      }

      selectCard(editCardVal?.[0]?.['ComponentId']);

      const optionIds = templateData?.['BookingCard']?.[1]?.map(
        (item) => item?.OptionId
      );
      CardSelectlistonChange(optionIds);
    }
  }, [CardData]);

  useEffect(() => {
    if (templateData && BillingTableData?.length > 0) {
      console.log(BillingTableData?.length, "BillingTableData?.length")
      const editCardVal = BillingTableData?.filter(
        (item) => item.ComponentName == templateData?.['BookingBilling']?.[0]
      );
      if (
        BillingTableData[0]?.SessionId != null &&
        BillingTableData[0]?.SessionId != undefined
      ) {
        let OverallBillingdata = {
          SessionID: BillingTableData[0]?.SessionId,
          OptionName: 'OverallBackground',
        };
        dispatch(getBillingOverallBackgroundColors(OverallBillingdata)).unwrap;
      }
      if (
        BillingTableData[0]?.SessionId != null &&
        BillingTableData[0]?.SessionId != undefined
      ) {
        let Billingdata = {
          SessionID: BillingTableData[0]?.SessionId,
          OptionName: 'Background',
        };
        dispatch(getColorsBilltable(Billingdata)).unwrap;
      }

      selectBillingTable(editCardVal?.[0]?.['ComponentId']);
      const optionIds = templateData?.['BookingBilling']?.[1]?.map(
        (item) => item?.OptionId
      );
      BillTableSelectlistonChange(optionIds);
    }
  }, [BillingTableData]);

  useEffect(() => {
    if (templateData && CategoryData?.length > 0) {
      EditColor?.filter(
        (item) => item.SessionName === 'BookingCategory'
      )?.forEach((item) => {
        if (item?.['BackgroundColor']) {
          formRef?.current?.setFieldsValue({ CatColor: item?.['ColorId'] });
          setSelectedCatColor(item?.['ColorId']);
        } else if (item?.['OverallBackgroundColor']) {
          formRef?.current?.setFieldsValue({
            CatOverallColor: item?.['ColorId'],
          });
          setdropdownCategoryOverallColor(item?.['ColorId']);
          dispatch(
            changeSelectedCatgColorDetail({
              catgColor: {
                BackgroundColor: GlobalCatgColorDetail?.['BackgroundColor'],
                FontColor: GlobalCatgColorDetail?.['FontColor'],
                OverallBackgroundColor: CategoryOverallColorsList?.filter(
                  (data) => data?.ColorId === item?.['ColorId']
                )?.[0]?.['BackgroundColor'],
              },
            })
          );
        }
      });
    }
  }, [CatColorData, CategoryOverallColorsList]);

  useEffect(() => {
    if (templateData && SubCategoryData?.length > 0) {
      EditColor?.filter(
        (item) => item.SessionName === 'BookingSubCategory'
      )?.forEach((item) => {
        if (item?.['BackgroundColor']) {
          formRef?.current?.setFieldsValue({ SubCatColor: item?.['ColorId'] });
          setSelectedSubCatColor(item?.['ColorId']);
        } else if (item?.['OverallBackgroundColor']) {
          formRef?.current?.setFieldsValue({
            SubCatOverallColor: item?.['ColorId'],
          });
          setdropdownSubcategoryOverallColor(item?.['ColorId']);
          dispatch(
            changeSelectedSubCatgColorDetail({
              subCatgColor: {
                BackgroundColor: GlobalSubCatgColorDetail?.['BackgroundColor'],
                FontColor: GlobalSubCatgColorDetail?.['FontColor'],
                OverallBackgroundColor: SubcategoryOverallColorsList?.filter(
                  (data) => data?.ColorId === item?.['ColorId']
                )?.[0]?.['BackgroundColor'],
              },
            })
          );
        }
      });
    }
  }, [SubcatColorData, SubcategoryOverallColorsList]);

  useEffect(() => {
    if (templateData && CardData?.length > 0) {
      EditColor?.filter((item) => item.SessionName === 'BookingCard')?.forEach(
        (item) => {
          if (item?.['BackgroundColor']) {
            formRef?.current?.setFieldsValue({ CardColor: item?.['ColorId'] });
            setSelectedCardColor(item?.['ColorId']);
          } else if (item?.['OverallBackgroundColor']) {
            formRef?.current?.setFieldsValue({
              CardOverallColor: item?.['ColorId'],
            });
            setdropdownCardOverallColor(item?.['ColorId']);
            dispatch(
              changeSelectedCardColorDetail({
                cardColor: {
                  BackgroundColor: GlobalCardColorDetail?.['BackgroundColor'],
                  FontColor: GlobalCardColorDetail?.['FontColor'],
                  OverallBackgroundColor: cardOverallColorsList?.filter(
                    (data) => data?.ColorId === item?.['ColorId']
                  )?.[0]?.['BackgroundColor'],
                },
              })
            );
          }
        }
      );
    }
  }, [CardColorData, cardOverallColorsList]);

  useEffect(() => {
    if (templateData && BillingTableData?.length > 0) {
      EditColor?.filter(
        (item) => item.SessionName === 'BookingBilling'
      )?.forEach((item) => {
        if (item?.['BackgroundColor']) {
          formRef?.current?.setFieldsValue({ TableColor: item?.['ColorId'] });
          setSelectedTableColor(item?.['ColorId']);
        } else if (item?.['OverallBackgroundColor']) {
          formRef?.current?.setFieldsValue({
            BillingOverallColor: item?.['ColorId'],
          });
          setdropdownBillingOverallColor(item?.['ColorId']);
          dispatch(
            changeSelectedBillingColorDetail({
              billingColor: {
                BackgroundColor: GlobalBillingColorDetail?.['BackgroundColor'],
                FontColor: GlobalBillingColorDetail?.['FontColor'],
                OverallBackgroundColor: BillingOverallColorsList?.filter(
                  (data) => data?.ColorId === item?.['ColorId']
                )?.[0]?.['BackgroundColor'],
              },
            })
          );
        }
      });
    }
  }, [TableColorData, BillingOverallColorsList]);

  useEffect(() => {
    if (Object.keys(templateData)?.length > 0) {
      const bookingLayoutColors = EditColor?.filter(
        (item) => item.SessionName === 'BookingLayout'
      );

      if (bookingLayoutColors.length > 0) {
        bookingLayoutColors.forEach((item) => {
          if (item?.['OverallBackgroundColor']) {
            formRef?.current?.setFieldsValue({
              LayoutOverallBackground: item?.['ColorId'],
            });
            setdropdownLayoutOverallColor(item?.['ColorId']);
          }
        });
      } else {
        // Reset the values when "BookingLayout" is not found
        formRef?.current?.resetFields(['LayoutOverallBackground']);
        setdropdownLayoutOverallColor(null);
      }
    }
  }, [LayoutOverallbackgroundlist]);

  useEffect(() => {
    if (templateData && CategoryData?.length > 0) {
      let FontCat = EditFont?.find(
        (item) => item.SessionName === 'BookingCategory'
      )?.['FontId'];
      formRef?.current?.setFieldsValue({ FontCat: FontCat });
      setSelectedCatFont(FontCat);
    }
  }, [CatFontData]);

  useEffect(() => {
    if (templateData && SubCategoryData?.length > 0) {
      let FontSubCat = EditFont?.find(
        (item) => item.SessionName === 'BookingSubCategory'
      )?.['FontId'];
      formRef?.current?.setFieldsValue({ FontSubcat: FontSubCat });
      setSelectedSubcatFont(FontSubCat);
    }
  }, [SubCatFontData]);

  useEffect(() => {
    if (templateData && CardData?.length > 0) {
      let FontCard = EditFont?.find(
        (item) => item.SessionName === 'BookingCard'
      )?.['FontId'];
      formRef?.current?.setFieldsValue({ FontCard: FontCard });
      setSelectedCardFont(FontCard);
    }
  }, [CardFontData]);
  useEffect(() => {
    if (templateData && BillingTableData?.length > 0) {
      let FontTable = EditFont?.find(
        (item) => item.SessionName === 'BookingBilling'
      )?.['FontId'];
      formRef?.current?.setFieldsValue({ FontTable: FontTable });
      setSelectedTableFont(FontTable);
    }
  }, [TableFontData]);

  useEffect(
    () => {
      if (SelectedCardFont) {
        WebFont.load({
          google: {
            families: [SelectedCardFont], // Load the selected font
          },
        });
      }
      if (SelectedBillingFont) {
        WebFont.load({
          google: {
            families: [SelectedBillingFont], // Load the selected font
          },
        });
      }
      if (SelectedCatgFont) {
        WebFont.load({
          google: {
            families: [SelectedCatgFont], // Load the selected font
          },
        });
      }
      if (SelectedSubCatgFont) {
        WebFont.load({
          google: {
            families: [SelectedSubCatgFont], // Load the selected font
          },
        });
      }
    },
    [SelectedCardFont],
    [SelectedBillingFont],
    [SelectedCatgFont],
    [SelectedSubCatgFont]
  );

  useEffect(() => {
    GetLayoutBackgroundFun();
    let DrpData = LayoutData?.filter((a) => a.ComponentId === SelectedLayoutId);
    SetShowDropDownData(DrpData?.[0]?.ComponentOptionsDetails);
    if (DrpData?.[0]?.ComponentName === 'Combo1') {
      GetCombo1Navbar();
    } else if (DrpData?.[0]?.ComponentName === 'Combo2') {
      GetCombo2Navbar();
    }
  }, [SelectedLayoutId]);

  // Function to check form validation
  const checkFormValidity = () => {
    formRef?.current
      ?.validateFields()
      .then(() => setIsFormValid(true))
      .catch(() => setIsFormValid(false));
  };

  // Run validation whenever form values change
  const onValuesChange = () => {
    checkFormValidity();
  };
  // const changeThemes = (theme) => {
  //   setSelectedTheme(theme.TemplatePreferenceId);
  // };

  const GetLayoutFun = async () => {
    const gettingLayOutData = await dispatch(getLayout()).unwrap();
    if (gettingLayOutData?.data?.statusCode === 1) {
      setLayoutData(gettingLayOutData?.data?.data);
      setCurrentLayoutsessionID(gettingLayOutData?.data?.data?.[0]?.SessionId);
    }
  };

  // Get Dropdown datas
  const GetLayoutBackgroundFun = async () => {
    if (currentLayoutsessionID != null && currentLayoutsessionID != undefined) {
      let OverallLayoutdata = {
        SessionID: currentLayoutsessionID,
        OptionName: 'OverallBackground',
      };
      await dispatch(
        getLayoutOverallBackgroundColors(OverallLayoutdata)
      ).unwrap();
    }
  };
  const GetNavbarFun = async () => {
    const gettingNavbarData = await dispatch(getNavbar()).unwrap();
    if (gettingNavbarData?.data?.statusCode === 1) {
      setNavbarData(gettingNavbarData.data?.data?.map((navbar) => {
        return {
          ...navbar,
          ComponentOptionsDetails: navbar?.ComponentOptionsDetails
            ?.filter((component) =>
              !((component?.OptionName === 'DineIn' && dinePreference === undefined) ||
                (component?.OptionName === 'TakeAway' && takeAwayPreference === undefined))
            )
        }
      }));
    }
  };
  const GetCategoryFun = async () => {
    const gettingCategoryData = await dispatch(getCategory()).unwrap();
    if (gettingCategoryData?.data?.statusCode === 1) {
      dispatch(getCatFonts(gettingCategoryData?.data?.data?.[0]?.SessionId))
        .unwrap;
      setCategoryData(gettingCategoryData?.data?.data);
    }
  };
  const GetSubCategoryFun = async () => {
    const gettingSubCategoryData = await dispatch(getSubCategory()).unwrap();
    if (gettingSubCategoryData?.data?.statusCode === 1) {
      dispatch(
        getSubCatFonts(gettingSubCategoryData?.data?.data?.[0]?.SessionId)
      ).unwrap;
      setSubCategoryData(gettingSubCategoryData?.data?.data);
    }
  };
  const GetCardFun = async () => {
    const gettingCardData = await dispatch(getCard()).unwrap();
    if (gettingCardData?.data?.statusCode === 1) {
      dispatch(getCardFonts(gettingCardData?.data?.data?.[0]?.SessionId))
        .unwrap;
      setCardData(gettingCardData?.data?.data);
      let tempcarddata = gettingCardData?.data?.data;
      let CardItems = tempcarddata?.filter((a) => a.ComponentName === 'Card2');
      let ImagePosition = CardItems[0]?.ComponentOptionsDetails?.filter(
        (e) =>
          e.OptionName.includes('Image') &&
          !e.OptionName.includes('SmallImage') &&
          !e.OptionName.includes('BigImage')
      );
      let ImagePositionId = ImagePosition?.map((d) => d?.OptionId);
      setSelectAllPositionImage(ImagePositionId);
      setSelectfliterPositionImage(ImagePositionId);
    }
  };
  const GetBillingTableFun = async () => {
    const gettingBillingTableData = await dispatch(getBillingTable()).unwrap();
    if (gettingBillingTableData?.data?.statusCode === 1) {
      dispatch(
        getTableFonts(gettingBillingTableData?.data?.data?.[0]?.SessionId)
      ).unwrap;
      setBillingTableData(gettingBillingTableData?.data?.data);
    }
  };
  const GetCombo1Navbar = async () => {
    const gettingCombo1NavbarData = await dispatch(getCombo1Navbar()).unwrap();
    if (gettingCombo1NavbarData?.data?.statusCode === 1) {
      setNavbarData(gettingCombo1NavbarData?.data?.data?.map((navbar) => {
        return {
          ...navbar,
          ComponentOptionsDetails: navbar?.ComponentOptionsDetails
            ?.filter((component) =>
              !((component?.OptionName === 'DineIn' && dinePreference === undefined) ||
                (component?.OptionName === 'TakeAway' && takeAwayPreference === undefined))
            )
        }
      }));
    }
  };
  const GetCombo2Navbar = async () => {
    const gettingCombo2NavbarData = await dispatch(getCombo2Navbar()).unwrap();
    if (gettingCombo2NavbarData?.data?.statusCode === 1) {
      setNavbarData(gettingCombo2NavbarData?.data?.data?.map((navbar) => {
        return {
          ...navbar,
          ComponentOptionsDetails: navbar?.ComponentOptionsDetails
            ?.filter((component) =>
              !((component?.OptionName === 'DineIn' && dinePreference === undefined) ||
                (component?.OptionName === 'TakeAway' && takeAwayPreference === undefined))
            )
        }
      }));
    }
  };

  // Selected value functions
  const selectLayout = (e) => {
    formRef.current?.setFieldsValue({ LayoutId: e });
    setSelectedLayoutId(e);
    dispatch(
      changeSelectedLayout({
        LayoutId: e,
      })
    );

    let LayoutValues = LayoutData?.filter((item) => item.ComponentId == e);
    dispatch(
      changePreviewComponents({
        BookingLayout: [
          LayoutValues[0]?.ComponentName,
          LayoutValues[0]?.ComponentOptionsDetails,
        ],
      })
    );

    GetNavbarFun();
    GetLayoutBackgroundFun();
    GetCategoryFun();
    GetCardFun();
    GetSubCategoryFun();
    GetBillingTableFun();
    setSelectedNavbarId(null);
    setNavBarCheckList([]);
    setSelectedNavCheckValues([]);
    setSelectedNavCheckList([]);
    setSelectedCategoryId(null);
    setCategoryCheckList([]);
    setSelectedCategoryCheckValues([]);
    setSelectedCategoryCheckList([]);
    setSelectedSubCategoryId(null);
    setSelectedSubCategoryCheckValues([]);
    setSubCategoryCheckList([]);
    setSelectedSubCategoryCheckList([]);
    setSelectedCardId(null);
    setCardCheckList([]);
    setSelectedCardCheckValues([]);
    setSelectedCardCheckList([]);
    setSelectedBillingTableId(null);
    setBillTableCheckList([]);
    setSelectedBillTableCheckValues([]);
    setSelectedBillTableCheckList([]);
    setHoldButton(false);
    setAddCustomerButton(false);
    setNavHoldButton(false);
    setNavAddCustomerButton(false);
    let Imageselection = templateData?.['BookingCategory']?.[1]?.filter(
      (a) => a.OptionName === 'Image'
    );
    if (Imageselection?.length > 0) {
      setCatImageSelection(true);
    } else {
      setCatImageSelection(false);
    }
    formRef.current.resetFields(['NavbarId']);
    formRef.current.resetFields(['CategoryId']);
    formRef.current.resetFields(['SubCategoryId']);
    formRef.current.resetFields(['CardId']);
    formRef.current.resetFields(['BillingTableId']);
  };

  const selectNavbar = (e) => {
    formRef.current?.setFieldsValue({ NavbarId: e });
    setSelectedNavbarId(e);
    dispatch(changeSelectedNavbar({ NavbarId: e }));
    let NavbarItems = NavbarData?.filter((a) => a.ComponentId === e);
    dispatch(
      changePreviewComponents({
        BookingNavbar: [
          NavbarItems[0]?.ComponentName,
          NavbarItems[0]?.ComponentOptionsDetails,
        ],
      })
    );

    setNavBarCheckList(NavbarItems);
    // Find the object with OptionName equal to "Search" and extract OptionId
    const searchOption = NavbarItems[0]?.ComponentOptionsDetails?.find(
      (option) => option.OptionName === 'Search'
    );

    if (searchOption) {
      setSelectedNavCheckList([{ OptionId: searchOption.OptionId }]);
      setSelectedNavCheckValues((prevState) => {
        // If prevState is undefined, initialize it as an empty array
        const newState = Array.isArray(prevState) ? prevState : [];
        return [...newState, searchOption.OptionId];
      });
    }

    // <MainPage/>
  };

  const selectCategory = (e) => {
    formRef.current?.setFieldsValue({ CategoryId: e });
    setSelectedCategoryId(e);
    dispatch(changeSelectedCategory({ CategoryId: e }));
    let CategoryItems = CategoryData?.filter((a) => a.ComponentId === e);
    dispatch(
      changePreviewComponents({
        BookingCategory: [
          CategoryItems[0]?.ComponentName,
          CategoryItems[0]?.ComponentOptionsDetails,
        ],
      })
    );
    setCategoryCheckList(CategoryItems);
  };

  const selectSubCategory = (e) => {
    formRef.current?.setFieldsValue({ SubCategoryId: e });
    setSelectedSubCategoryId(e);
    dispatch(changeSelectedSubCategory({ SubCategoryId: e }));
    let SubCategoryItems = SubCategoryData?.filter((a) => a.ComponentId === e);
    dispatch(
      changePreviewComponents({
        BookingSubCategory: [
          SubCategoryItems[0]?.ComponentName,
          SubCategoryItems[0]?.ComponentOptionsDetails,
        ],
      })
    );
    setSubCategoryCheckList(SubCategoryItems);
  };

  const selectCard = (e) => {
    formRef.current?.setFieldsValue({ CardId: e });
    setSelectedCardId(e);
    dispatch(changeSelectedCard({ CardId: e }));
    let CardItems = CardData?.filter((a) => a.ComponentId === e);
    dispatch(
      changePreviewComponents({
        BookingCard: [
          CardItems[0]?.ComponentName,
          CardItems[0]?.ComponentOptionsDetails,
        ],
      })
    );
    setCardCheckList(CardItems);
    let smallImageSelection = templateData?.['BookingCard']?.[1]?.filter(
      (a) => a.OptionName === 'SmallImage'
    );
    if (smallImageSelection?.length) {
      setSmallImage(true);
    }
    const optionIds = templateData?.['BookingCard']?.[1]?.map(
      (item) => item?.OptionId
    );
    CardSelectlistonChange(optionIds);
  };

  const selectBillingTable = (e) => {
    formRef.current?.setFieldsValue({ BillingTableId: e });
    setSelectedBillingTableId(e);
    dispatch(changeSelectedBillingTable({ BillingTableId: e }));
    let BillTableItems = BillingTableData?.filter((a) => a.ComponentId === e);
    dispatch(
      changePreviewComponents({
        BookingBilling: [
          BillTableItems[0]?.ComponentName,
          BillTableItems[0]?.ComponentOptionsDetails,
        ],
      })
    );
    setBillTableCheckList(BillTableItems?.map((billItem) => {
      return {
        ...billItem,
        ComponentOptionsDetails: billItem?.ComponentOptionsDetails
          ?.filter((component) =>
            !(component?.OptionName === 'UnpaidBill' && dinePreference === undefined)
          )
      }
    }));

    const itemOption = BillTableItems[0]?.ComponentOptionsDetails?.find(
      (option) => option.OptionName === 'Item'
    );
    if (itemOption) {
      setSelectedBillTableCheckList([{ OptionId: itemOption.OptionId }]);
      setSelectedBillTableCheckValues((prevState) => {
        const newStateVal = Array.isArray(prevState) ? prevState : [];
        return [...newStateVal, itemOption.OptionId];
      });
    }
  };

  const selectTableColor = async (value) => {
    await setSelectedTableColor(value);
    formRef.current?.setFieldsValue({ TableColor: value });
    let billColorVal = TableColorData?.filter(
      (data) => data?.ColorId === value
    );
    dispatch(
      changeSelectedBillingColorDetail({
        billingColor: {
          BackgroundColor: billColorVal?.[0]?.['BackgroundColor'],
          FontColor: billColorVal?.[0]?.['FontColor'],
          OverallBackgroundColor:
            GlobalBillingColorDetail?.['OverallBackgroundColor'],
        },
      })
    );
  };

  const selectLayoutOverallColor = async (value) => {
    await setdropdownLayoutOverallColor(value);
    formRef.current?.setFieldsValue({ LayoutOverallBackground: value });
    let layoutOverallColorVal = LayoutOverallbackgroundlist?.filter(
      (data) => data?.ColorId === value
    );
    dispatch(
      changeSelectedLayoutColorDetail({
        layoutColor: {
          OverallBackgroundColor:
            layoutOverallColorVal?.[0]?.['BackgroundColor'],
        },
      })
    );
  };

  const selectCategoryOverallColor = async (value) => {
    await setdropdownCategoryOverallColor(value);
    formRef.current?.setFieldsValue({ CatOverallColor: value });
    let catgOverallColorVal = CategoryOverallColorsList?.filter(
      (data) => data?.ColorId === value
    );
    dispatch(
      changeSelectedCatgColorDetail({
        catgColor: {
          BackgroundColor: GlobalCatgColorDetail?.['BackgroundColor'],
          FontColor: GlobalCatgColorDetail?.['FontColor'],
          OverallBackgroundColor: catgOverallColorVal?.[0]?.['BackgroundColor'],
        },
      })
    );
  };

  const selectSubcategoryOverallColor = async (value) => {
    await setdropdownSubcategoryOverallColor(value);
    formRef.current?.setFieldsValue({ SubCatOverallColor: value });
    let subCatgOverallColorVal = SubcategoryOverallColorsList?.filter(
      (data) => data?.ColorId === value
    );
    dispatch(
      changeSelectedSubCatgColorDetail({
        subCatgColor: {
          BackgroundColor: GlobalSubCatgColorDetail?.['BackgroundColor'],
          FontColor: GlobalSubCatgColorDetail?.['FontColor'],
          OverallBackgroundColor:
            subCatgOverallColorVal?.[0]?.['BackgroundColor'],
        },
      })
    );
  };

  const selectCardOverallColor = async (value) => {
    await setdropdownCardOverallColor(value);
    formRef.current?.setFieldsValue({ CardOverallColor: value });
    let cardOverallColorVal = cardOverallColorsList?.filter(
      (data) => data?.ColorId === value
    );
    dispatch(
      changeSelectedCardColorDetail({
        cardColor: {
          BackgroundColor: GlobalCardColorDetail?.['BackgroundColor'],
          FontColor: GlobalCardColorDetail?.['FontColor'],
          OverallBackgroundColor: cardOverallColorVal?.[0]?.['BackgroundColor'],
        },
      })
    );
  };
  const selectBillingOverallColor = async (value) => {
    await setdropdownBillingOverallColor(value);
    formRef.current?.setFieldsValue({ BillingOverallColor: value });
    let billOverallColorVal = BillingOverallColorsList?.filter(
      (data) => data?.ColorId === value
    );
    dispatch(
      changeSelectedBillingColorDetail({
        billingColor: {
          BackgroundColor: GlobalBillingColorDetail?.['BackgroundColor'],
          FontColor: GlobalBillingColorDetail?.['FontColor'],
          OverallBackgroundColor: billOverallColorVal?.[0]?.['BackgroundColor'],
        },
      })
    );
  };
  const selectCardColor = async (value) => {
    await setSelectedCardColor(value);
    formRef.current?.setFieldsValue({ CardColor: value });
    let cardColorVal = CardColorData?.filter((data) => data?.ColorId === value);
    dispatch(
      changeSelectedCardColorDetail({
        cardColor: {
          BackgroundColor: cardColorVal?.[0]?.['BackgroundColor'],
          FontColor: cardColorVal?.[0]?.['FontColor'],
          OverallBackgroundColor:
            GlobalCardColorDetail?.['OverallBackgroundColor'],
        },
      })
    );
  };
  const selectSubCategoryColor = async (value) => {
    await setSelectedSubCatColor(value);
    formRef.current?.setFieldsValue({ SubCatColor: value });
    let subCatgColorVal = SubcatColorData?.filter(
      (data) => data?.ColorId === value
    );
    dispatch(
      changeSelectedSubCatgColorDetail({
        subCatgColor: {
          BackgroundColor: subCatgColorVal?.[0]?.['BackgroundColor'],
          FontColor: subCatgColorVal?.[0]?.['FontColor'],
          OverallBackgroundColor:
            GlobalSubCatgColorDetail?.['OverallBackgroundColor'],
        },
      })
    );
  };
  const selectCategoryColor = async (value) => {
    await setSelectedCatColor(value);
    formRef.current?.setFieldsValue({ CatColor: value });
    let catgColorVal = CatColorData?.filter((data) => data?.ColorId === value);
    dispatch(
      changeSelectedCatgColorDetail({
        catgColor: {
          BackgroundColor: catgColorVal?.[0]?.['BackgroundColor'],
          FontColor: catgColorVal?.[0]?.['FontColor'],
          OverallBackgroundColor:
            GlobalCatgColorDetail?.['OverallBackgroundColor'],
        },
      })
    );
  };
  const handlecategoryUploadOverallColor = () => {
    setCategoryUploadOverallColor(true);
  };
  const handleSubcategoryUploadOverallColor = () => {
    setSubcategoryUploadOverallColor(true);
  };
  const handlecardUploadOverallColor = () => {
    setcardUploadOverallColor(true);
  };
  const handleBillingUploadOverallColor = () => {
    setBillingUploadOverallColor(true);
  };

  const handleUploadColor = () => {
    setUploadColor(true);
  };
  const SubhandleUploadColor = () => {
    setUploadColorsubcat(true);
  };
  const handleUploadLayoutOverallBackground = () => {
    setUploadLayoutOverallBackground(true);
  };

  const handleUploadColorselectCard = () => {
    setUploadColorselectcard(true);
  };
  const BillhandleUploadColor = () => {
    BillsetUploadColor(true);
  };

  const CatonCancel = () => {
    setUploadColor(false);
  };
  const SubCatonCancel2 = () => {
    setUploadColorsubcat(false);
  };
  const CardonCancel3 = () => {
    setUploadColorselectcard(false);
  };
  const TableonCancel4 = () => {
    BillsetUploadColor(false);
  };
  const handleLayoutOverallColorChange = (color, event) => {
    setLayoutOverallColor(color['hex']);
    setLayoutOverallHexCode(color?.hex?.replace('#', '').trim());
  };
  const handleCategoryOverallColorChange = (color, event) => {
    setCategoryOverallColor(color['hex']);
    setCategoryOverallHex(color?.hex?.replace('#', '').trim());
  };

  const handleSubcategoryOverallColorChange = (color, event) => {
    setSubcategoryOverallColor(color['hex']);
    setSubCatOverallHex(color?.hex?.replace('#', '').trim());
  };

  const handleCardOverallColorChange = (color, event) => {
    setCardOverallColor(color['hex']);
    setCardOverallHex(color?.hex?.replace('#', '').trim());
  };

  const handleBillingOverallColorChange = (color, event) => {
    setBillingOverallColor(color['hex']);
    setBillingOverallHex(color?.hex?.replace('#', '').trim());
  };

  const handleColorChange = (color, event) => {
    if (CatColorType == 'Y') {
      setCatbackgroundColor(color['hex']);
      setCatBGHex(color?.hex?.replace('#', '').trim());
    }
    if (CatColorType == 'N') {
      setCatfontColor(color['hex']);
      setCatFontHex(color?.hex?.replace('#', '').trim());
    }
  };
  const handleColorChange2 = (color, event) => {
    if (SubCatColorType == 'Y') {
      setSubcatbackgroundColor(color['hex']);
      setSubCatBGHex(color?.hex?.replace('#', '').trim());
    }
    if (SubCatColorType == 'N') {
      setSubcatfontColor(color['hex']);
      setSubCatFontHex(color?.hex?.replace('#', '').trim());
    }
  };

  const handleColorChange3 = (color, event) => {
    if (CardColorType == 'Y') {
      setCardbackgroundColor(color['hex']);
      setCardBGHex(color?.hex?.replace('#', '').trim());
    }
    if (CardColorType == 'N') {
      setCardfontColor(color['hex']);
      setCardFontHex(color?.hex?.replace('#', '').trim());
    }
  };

  const handleColorChange4 = (color, event) => {
    if (TableColorType == 'Y') {
      setTablebackgroundColor(color['hex']);
      setTableBGHex(color?.hex?.replace('#', '').trim());
    }
    if (TableColorType == 'N') {
      setTablefontColor(color['hex']);
      setTableFontHex(color?.hex?.replace('#', '').trim());
    }
  };
  const handleLayoutOverallColorSubmit = async () => {
    let response;

    try {
      let postData = {
        BackgroundColor: LayoutOverallColor,
        FontColor: '#000000',
        CreatedBy: getSession('UserId'),
        SessionId: currentLayoutsessionID,
        OptionId: LayoutData.filter(
          (item) => item.ComponentId == SelectedLayoutId
        )?.[0]?.ComponentOptionsDetails?.filter(
          (item) => item.OptionName == 'OverallBackground'
        )?.[0]?.OptionId,
      };
      response = await dispatch(postColorData(postData)).unwrap();
    } catch (err) {
      if (err['message'] == 'Request failed with status code 422') {
        response = {
          data: {
            statusCode: 0,
            response: 'Color Not Added',
            data: [],
          },
        };
      }
    }
    if (response?.data?.statusCode == 1) {
      if (response?.data?.response == 'Color Already Exists') {
        setMessageType('warning');
        setMessageData(response?.data?.response);
      } else {
        setMessageType('success');
        setMessageData(response?.data?.response);
        setUploadLayoutOverallBackground(false);
      }
      let OverallLayoutdata = {
        SessionID: currentLayoutsessionID,
        OptionName: 'OverallBackground',
      };
      await dispatch(
        getLayoutOverallBackgroundColors(OverallLayoutdata)
      ).unwrap();
    } else {
      setMessageData(response?.data?.response);
      setMessageType('error');
    }
  };

  const handleCategoryOverallColorSubmit = async () => {
    let response;

    try {
      let postData = {
        BackgroundColor: CategoryOverallColor,
        FontColor: '#000000',
        CreatedBy: getSession('UserId'),
        SessionId: CategoryData[0]?.SessionId,
        OptionId: CategoryCheckList?.[0]?.ComponentOptionsDetails?.filter(
          (item) => item.OptionName == 'OverallBackground'
        )?.[0]?.OptionId,
      };

      response = await dispatch(postColorData(postData)).unwrap();
    } catch (err) {
      if (err['message'] == 'Request failed with status code 422') {
        response = {
          data: {
            statusCode: 0,
            response: 'Color Not Added',
            data: [],
          },
        };
      }
    }
    if (response?.data?.statusCode == 1) {
      if (response?.data?.response == 'Color Already Exists') {
        setMessageType('warning');
        setMessageData(response?.data?.response);
      } else {
        setMessageType('success');
        setMessageData(response?.data?.response);
        setCategoryUploadOverallColor(false);
      }
      let OverallCategorydata = {
        SessionID: CategoryData[0]?.SessionId,
        OptionName: 'OverallBackground',
      };
      dispatch(getCategoryOverallBackgroundColors(OverallCategorydata)).unwrap;
    } else {
      setMessageData(response?.data?.response);
      setMessageType('error');
    }
  };

  const handleSubcategoryOverallColorSubmit = async () => {
    let response;

    try {
      let postData = {
        BackgroundColor: SubcategoryOverallColor,
        FontColor: '#000000',
        CreatedBy: getSession('UserId'),
        SessionId: SubCategoryData[0]?.SessionId,
        OptionId: SubCategoryCheckList[0]?.ComponentOptionsDetails?.filter(
          (item) => item.OptionName == 'OverallBackground'
        )?.[0]?.OptionId,
      };
      response = await dispatch(postColorData(postData)).unwrap();
    } catch (err) {
      if (err['message'] == 'Request failed with status code 422') {
        response = {
          data: {
            statusCode: 0,
            response: 'Color Not Added',
            data: [],
          },
        };
      }
    }
    if (response?.data?.statusCode == 1) {
      if (response?.data?.response == 'Color Already Exists') {
        setMessageType('warning');
        setMessageData(response?.data?.response);
      } else {
        setMessageType('success');
        setMessageData(response?.data?.response);
        setSubcategoryUploadOverallColor(false);
      }
      let OveralSubCategorydata = {
        SessionID: SubCategoryData[0]?.SessionId,
        OptionName: 'OverallBackground',
      };
      dispatch(getSubcategoryOverallBackgroundColors(OveralSubCategorydata))
        .unwrap;
    } else {
      setMessageData(response?.data?.response);
      setMessageType('error');
    }
  };

  const handleCardOverallColorSubmit = async () => {
    let response;

    try {
      let postData = {
        BackgroundColor: CardOverallColor,
        FontColor: '#000000',
        CreatedBy: getSession('UserId'),
        SessionId: CardData[0]?.SessionId,
        OptionId: CardCheckList[0]?.ComponentOptionsDetails?.filter(
          (item) => item.OptionName == 'OverallBackground'
        )?.[0]?.OptionId,
      };
      response = await dispatch(postColorData(postData)).unwrap();
    } catch (err) {
      if (err['message'] == 'Request failed with status code 422') {
        response = {
          data: {
            statusCode: 0,
            response: 'Color Not Added',
            data: [],
          },
        };
      }
    }
    if (response?.data?.statusCode == 1) {
      if (response?.data?.response == 'Color Already Exists') {
        setMessageType('warning');
        setMessageData(response?.data?.response);
      } else {
        setMessageType('success');
        setMessageData(response?.data?.response);
        setcardUploadOverallColor(false);
      }
      let OverallCarddata = {
        SessionID: CardData[0]?.SessionId,
        OptionName: 'OverallBackground',
      };
      dispatch(getCardOverallBackgroundColors(OverallCarddata)).unwrap;
    } else {
      setMessageData(response?.data?.response);
      setMessageType('error');
    }
  };

  const handleBillingOverallColorSubmit = async () => {
    let response;

    try {
      let postData = {
        BackgroundColor: BillingOverallColor,
        FontColor: '#000000',
        CreatedBy: getSession('UserId'),
        SessionId: BillingTableData[0]?.SessionId,
        OptionId: BillTableCheckList[0]?.ComponentOptionsDetails?.filter(
          (item) => item.OptionName == 'OverallBackground'
        )?.[0]?.OptionId,
      };
      response = await dispatch(postColorData(postData)).unwrap();
    } catch (err) {
      if (err['message'] == 'Request failed with status code 422') {
        response = {
          data: {
            statusCode: 0,
            response: 'Color Not Added',
            data: [],
          },
        };
      }
    }
    if (response?.data?.statusCode == 1) {
      if (response?.data?.response == 'Color Already Exists') {
        setMessageType('warning');
        setMessageData(response?.data?.response);
      } else {
        setMessageType('success');
        setMessageData(response?.data?.response);
        setBillingUploadOverallColor(false);
      }
      let OverallBillingdata = {
        SessionID: BillingTableData[0]?.SessionId,
        OptionName: 'OverallBackground',
      };
      dispatch(getBillingOverallBackgroundColors(OverallBillingdata)).unwrap;
    } else {
      setMessageData(response?.data?.response);
      setMessageType('error');
    }
  };
  const handleColorSubmit1 = async () => {
    if (CatbackgroundColor !== CatfontColor) {
      let response;

      try {
        let postData = {
          BackgroundColor: CatbackgroundColor,
          FontColor: CatfontColor,
          CreatedBy: getSession('UserId'),
          SessionId: CategoryData[0]?.SessionId,
          OptionId: CategoryCheckList?.[0]?.ComponentOptionsDetails?.filter(
            (item) => item.OptionName == 'Background'
          )?.[0]?.OptionId,
        };
        response = await dispatch(postColorData(postData)).unwrap();
      } catch (err) {
        if (err['message'] == 'Request failed with status code 422') {
          response = {
            data: {
              statusCode: 0,
              response: 'Color Not Added',
              data: [],
            },
          };
        }
      }
      if (response?.data?.statusCode == 1) {
        if (response?.data?.response == 'Color Already Exists') {
          setMessageType('warning');
          setMessageData(response?.data?.response);
        } else {
          setMessageType('success');
          setMessageData(response?.data?.response);
          setUploadColor(false);
        }
        let Categorydata = {
          SessionID: CategoryData[0]?.SessionId,
          OptionName: 'Background',
        };
        dispatch(getColorsCat(Categorydata)).unwrap();
      } else {
        setMessageData(response?.data?.response);
        setMessageType('error');
      }
    } else {
      setMessageData('Please select different color for background and font');
      setMessageType('warning');
    }
  };
  const handleColorSubmit2 = async () => {
    if (SubcatbackgroundColor !== SubcatfontColor) {
      let response;

      try {
        let postData = {
          BackgroundColor: SubcatbackgroundColor,
          FontColor: SubcatfontColor,
          CreatedBy: getSession('UserId'),
          SessionId: SubCategoryData[0]?.SessionId,
          OptionId: SubCategoryCheckList[0]?.ComponentOptionsDetails?.filter(
            (item) => item.OptionName == 'Background'
          )?.[0]?.OptionId,
        };
        response = await dispatch(postColorData(postData)).unwrap();
      } catch (err) {
        if (err['message'] == 'Request failed with status code 422') {
          response = {
            data: {
              statusCode: 0,
              response: 'Color Not Added',
              data: [],
            },
          };
        }
      }
      if (response?.data?.statusCode == 1) {
        setMessageData(response?.data?.response);
        if (response?.data?.response == 'Color Already Exists') {
          setMessageType('warning');
          setMessageData(response?.data?.response);
        } else {
          setMessageType('success');
          setMessageData(response?.data?.response);
          setUploadColorsubcat(false);
        }
        let SubCategorydata = {
          SessionID: SubCategoryData[0]?.SessionId,
          OptionName: 'Background',
        };
        dispatch(getColorsSubcat(SubCategorydata)).unwrap;
      } else {
        setMessageData(response?.data?.response);
        setMessageType('error');
      }
    } else {
      setMessageData('Please select different color for background and font');
      setMessageType('warning');
    }
  };

  const handleColorSubmit3 = async () => {
    if (CardbackgroundColor !== CardfontColor) {
      let response;

      try {
        let postData = {
          BackgroundColor: CardbackgroundColor,
          FontColor: CardfontColor,
          CreatedBy: getSession('UserId'),
          SessionId: CardData[0]?.SessionId,
          OptionId: CardCheckList[0]?.ComponentOptionsDetails?.filter(
            (item) => item.OptionName == 'Background'
          )?.[0]?.OptionId,
        };
        response = await dispatch(postColorData(postData)).unwrap();
      } catch (err) {
        if (err['message'] == 'Request failed with status code 422') {
          response = {
            data: {
              statusCode: 0,
              response: 'Color Not Added',
              data: [],
            },
          };
        }
      }
      if (response?.data?.statusCode == 1) {
        if (response?.data?.response == 'Color Already Exists') {
          setMessageType('warning');
          setMessageData(response?.data?.response);
        } else {
          setMessageType('success');
          setMessageData(response?.data?.response);
          setUploadColorselectcard(false);
        }
        let Carddata = {
          SessionID: CardData[0]?.SessionId,
          OptionName: 'Background',
        };
        dispatch(getColorsCard(Carddata)).unwrap;
      } else {
        setMessageData(response?.data?.response);
        setMessageType('error');
      }
    } else {
      setMessageData('Please select different color for background and font');
      setMessageType('warning');
    }
  };

  const handleColorSubmit4 = async () => {
    if (TablebackgroundColor !== TablefontColor) {
      let response;

      try {
        let postData = {
          BackgroundColor: TablebackgroundColor,
          FontColor: TablefontColor,
          CreatedBy: getSession('UserId'),
          SessionId: BillingTableData[0]?.SessionId,
          OptionId: BillTableCheckList[0]?.ComponentOptionsDetails?.filter(
            (item) => item.OptionName == 'Background'
          )?.[0]?.OptionId,
        };
        response = await dispatch(postColorData(postData)).unwrap();
      } catch (err) {
        if (err['message'] == 'Request failed with status code 422') {
          response = {
            data: {
              statusCode: 0,
              response: 'Color Not Added',
              data: [],
            },
          };
        }
      }

      if (response?.data?.statusCode == 1) {
        if (response?.data?.response == 'Color Already Exists') {
          setMessageType('warning');
          setMessageData(response?.data?.response);
        } else {
          setMessageType('success');
          setMessageData(response?.data?.response);
          BillsetUploadColor(false);
        }
        let Billingdata = {
          SessionID: BillingTableData[0]?.SessionId,
          OptionName: 'Background',
        };
        dispatch(getColorsBilltable(Billingdata)).unwrap;
      } else {
        setMessageData(response?.data?.response);
        setMessageType('error');
      }
    } else {
      setMessageData('Please select different color for background and font');
      setMessageType('warning');
    }
  };
  const selectFont0 = async (value) => {
    await setSelectedCatFont(value);
    formRef.current?.setFieldsValue({ FontCat: value });
    let catgFont = CatFontData?.filter((data) => data?.FontId === value);
    dispatch(
      changeSelectedCatgFont({
        catgFont: catgFont?.[0]?.['SessionFont'],
      })
    );
  };
  const selectFont1 = async (value) => {
    await setSelectedSubcatFont(value);
    formRef.current?.setFieldsValue({ FontSubcat: value });
    let subCatgFont = SubCatFontData?.filter((data) => data?.FontId === value);
    dispatch(
      changeSelectedSubCatgFont({
        subCargFont: subCatgFont?.[0]?.['SessionFont'],
      })
    );
  };
  const selectFont2 = async (value) => {
    await setSelectedCardFont(value);
    formRef.current?.setFieldsValue({ FontCard: value });
    let cardFont = CardFontData?.filter((data) => data?.FontId === value);
    dispatch(
      changeSelectedCardFont({
        cardFont: cardFont?.[0]?.['SessionFont'],
      })
    );
  };
  const selectFont3 = async (value) => {
    await setSelectedTableFont(value);
    formRef.current?.setFieldsValue({ FontTable: value });
    let billFont = TableFontData?.filter((data) => data?.FontId === value);
    dispatch(
      changeSelectedBillingFont({
        billFont: billFont?.[0]?.['SessionFont'],
      })
    );
  };

  const CathandleUploadFonts = () => {
    setcatModelOpen(true);
  };

  const CathandleCancel = () => {
    setcatModelOpen(false);
    Catform.resetFields();
  };
  const SubcathandleUploadFonts = () => {
    setSubCatModelopen(true);
  };

  const SubcathandleCancel = () => {
    setSubCatModelopen(false);
    Subform.resetFields();
  };

  const CardhandleUploadFonts = () => {
    setCardModelopen(true);
  };

  const TablehandleUploadFonts = () => {
    setTableModelopen(true);
  };

  const cardcathandleCancel = () => {
    setCardModelopen(false);
    Cardform.resetFields();
  };

  const TablehandleCancel = () => {
    setTableModelopen(false);
    Tableform.resetFields();
  };

  const CathandleSubmit = async () => {
    const values = await Catform.validateFields();
    validateFontscat(values);
  };
  const SubCathandleSubmit = async () => {
    const values = await Subform.validateFields();
    validateFontssub(values);
  };
  const CardhandleSubmit = async () => {
    const values = await Cardform.validateFields();
    validateFontscard(values);
  };
  const TablehandleSubmit = async () => {
    const values = await Tableform.validateFields();
    validateFontsTable(values);
  };

  function formatFontName(input) {
    return input
      ?.toLowerCase()
      .split(/\s+/)
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
      .join(' ');
  }

  const validateFontscat = async (values) => {
    const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
    fetch(apiUrl)
      .then((response) => response.json())
      .then(async (data) => {
        const fontNames = data?.items?.map((item) => item.family);
        if (fontNames.includes(formatFontName(values['CategoryFont']))) {
          let response;
          try {
            let postData = {
              SessionFont: formatFontName(values['CategoryFont']),
              CreatedBy: getSession('UserId'),
              SessionId: CategoryData?.[0]?.SessionId,
            };
            response = await dispatch(postCatFontData(postData)).unwrap();
          } catch (err) {
            if (err['message'] == 'Request failed with status code 422') {
              response = {
                data: {
                  statusCode: 0,
                  response: 'Font Not Added',
                  data: [],
                },
              };
            }
          }
          if (response?.data?.statusCode == 1) {
            setcatModelOpen(false);
            setMessageData(response?.data?.response);
            if (response?.data?.response == 'Font Already Exists') {
              setMessageType('warning');
            } else {
              setMessageType('success');
            }

            dispatch(getCatFonts(CategoryData?.[0]?.SessionId)).unwrap;
            Catform.resetFields();
          } else {
            setMessageData(response?.data?.response);
            setMessageType('error');
          }
        } else {
          setMessageData('Please give the Correct google fonts Name!');
          setMessageType('warning');
        }
      })
      .catch((error) => {
        console.error('Error fetching fonts:', error);
      });
  };
  const validateFontssub = async (values) => {
    const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
    fetch(apiUrl)
      .then((response) => response.json())
      .then(async (data) => {
        const fontNames = data?.items?.map((item) => item.family);
        if (fontNames.includes(formatFontName(values['SubcategoryFont']))) {
          let response;
          try {
            let postData = {
              SessionFont: formatFontName(values['SubcategoryFont']),
              CreatedBy: getSession('UserId'),
              SessionId: SubCategoryData?.[0]?.SessionId,
            };
            response = await dispatch(postSubcatFontData(postData)).unwrap();
          } catch (err) {
            if (err['message'] == 'Request failed with status code 422') {
              response = {
                data: {
                  statusCode: 0,
                  response: 'Font Not Added',
                  data: [],
                },
              };
            }
          }
          if (response?.data?.statusCode == 1) {
            setSubCatModelopen(false);
            setMessageData(response?.data?.response);
            if (response?.data?.response == 'Font Already Exists') {
              setMessageType('warning');
            } else {
              setMessageType('success');
            }

            dispatch(getSubCatFonts(SubCategoryData?.[0]?.SessionId)).unwrap;
            Subform.resetFields();
          } else {
            setMessageData(response?.data?.response);
            setMessageType('error');
          }
        } else {
          setMessageData('Please give the Correct google fonts Name!');
          setMessageType('warning');
        }
      })
      .catch((error) => {
        console.error('Error fetching fonts:', error);
      });
  };
  const validateFontscard = async (values) => {
    const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
    fetch(apiUrl)
      .then((response) => response.json())
      .then(async (data) => {
        const fontNames = data?.items?.map((item) => item.family);
        if (fontNames.includes(formatFontName(values['CardFont']))) {
          let response;
          try {
            let postData = {
              SessionFont: formatFontName(values['CardFont']),
              CreatedBy: getSession('UserId'),
              SessionId: CardData?.[0]?.SessionId,
            };
            response = await dispatch(postCardFontData(postData)).unwrap();
          } catch (err) {
            if (err['message'] == 'Request failed with status code 422') {
              response = {
                data: {
                  statusCode: 0,
                  response: 'Font Not Added',
                  data: [],
                },
              };
            }
          }
          if (response?.data?.statusCode == 1) {
            setCardModelopen(false);
            setMessageData(response?.data?.response);
            if (response?.data?.response == 'Font Already Exists') {
              setMessageType('warning');
            } else {
              setMessageType('success');
            }

            dispatch(getCardFonts(CardData?.[0]?.SessionId)).unwrap;
            Cardform.resetFields();
          } else {
            setMessageData(response?.data?.response);
            setMessageType('error');
          }
        } else {
          setMessageData('Please give the Correct google fonts Name!');
          setMessageType('warning');
        }
      })
      .catch((error) => {
        console.error('Error fetching fonts:', error);
      });
  };
  const validateFontsTable = async (values) => {
    console.log(values,"table font")
    const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
    fetch(apiUrl)
      .then((response) => response.json())
      .then(async (data) => {
        const fontNames = data?.items?.map((item) => item.family);
        if (fontNames.includes(formatFontName(values['TableFont']))) {
          let response;
          try {
            let postData = {
              SessionFont: formatFontName(values['TableFont']),
              CreatedBy: getSession('UserId'),
              SessionId: BillingTableData?.[0]?.SessionId,
            };
            response = await dispatch(postTableFontData(postData)).unwrap();
          } catch (err) {
            if (err['message'] == 'Request failed with status code 422') {
              response = {
                data: {
                  statusCode: 0,
                  response: 'Font Not Added',
                  data: [],
                },
              };
            }
          }
          if (response?.data?.statusCode == 1) {
            setTableModelopen(false);
            setMessageData(response?.data?.response);
            if (response?.data?.response == 'Font Already Exists') {
              setMessageType('warning');
            } else {
              setMessageType('success');
            }

            dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap;
            Tableform.resetFields();
          } else {
            setMessageData(response?.data?.response);
            setMessageType('error');
          }
        } else {
          setMessageData('Please give the Correct google fonts Name!');
          setMessageType('warning');
        }
      })
      .catch((error) => {
        console.error('Error fetching fonts:', error);
      });
  };

  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);
  // navbarchecklistselection
  const NavBarSelectlistonChange = (checkedValues) => {
    setSelectedNavCheckValues(checkedValues);
    const obj = checkedValues?.map((d) => ({ OptionId: d }));
    setSelectedNavCheckList(obj);
    dispatch(changeSelectedNavbarCheckedItems(obj));
  };
  useEffect(() => {
    const NavaddCustomerOptionId =
      NavBarCheckList[0]?.ComponentOptionsDetails?.find(
        (item) => item.OptionName === 'AddCustomer'
      )?.OptionId;
    const NavholdOptionId = NavBarCheckList[0]?.ComponentOptionsDetails?.find(
      (item) => item.OptionName === 'Hold'
    )?.OptionId;

    switch (true) {
      case SelectedNavCheckValues?.includes(NavaddCustomerOptionId) &&
        SelectedNavCheckValues?.includes(NavholdOptionId):
        setHoldButton(true);
        setAddCustomerButton(true);
        break;

      case !SelectedNavCheckValues?.includes(NavaddCustomerOptionId) &&
        !SelectedNavCheckValues?.includes(NavholdOptionId):
        setHoldButton(false);
        setAddCustomerButton(false);
        break;

      case SelectedNavCheckValues?.includes(NavholdOptionId):
        if (
          SelectedNavCheckValues?.includes(NavholdOptionId) &&
          SelectedNavCheckValues?.includes(NavaddCustomerOptionId)
        ) {
          setHoldButton(true);
          setAddCustomerButton(true);
        } else if (
          SelectedNavCheckValues?.includes(NavholdOptionId) &&
          !SelectedNavCheckValues?.includes(NavaddCustomerOptionId)
        ) {
          setHoldButton(true);
          setAddCustomerButton(false);
        }
        break;

      case SelectedNavCheckValues?.includes(NavaddCustomerOptionId):
        if (
          SelectedNavCheckValues?.includes(NavholdOptionId) &&
          SelectedNavCheckValues?.includes(NavaddCustomerOptionId)
        ) {
          setHoldButton(true);
          setAddCustomerButton(true);
        } else if (
          !SelectedNavCheckValues?.includes(NavholdOptionId) &&
          SelectedNavCheckValues?.includes(NavaddCustomerOptionId)
        ) {
          setHoldButton(false);
          setAddCustomerButton(true);
        }
        break;
    }
  }, [SelectedNavCheckValues]);
  // CategoryCheckListselection
  const CategorySelectlistonChange = (checkedValues, key) => {
    let ImageValue = CategoryCheckList[0]?.ComponentOptionsDetails?.filter(
      (e) => e.OptionName === 'Image'
    );
    let Imgselect = checkedValues?.includes(ImageValue?.[0]?.OptionId);
    let ImageRight = CategoryCheckList?.[0]?.ComponentOptionsDetails?.filter(
      (e) => e.OptionName === 'ImageRight'
    );
    if (!Imgselect) {
      var checkedval = checkedValues?.filter(
        (k) => k !== parseInt(ImageRight?.[0]?.OptionId)
      );
    } else {
      var checkedval = checkedValues;
    }
    setSelectedCategoryCheckValues(checkedval);
    const obj = checkedval?.map((d) => ({ OptionId: d }));
    setSelectedCategoryCheckList(obj);
    dispatch(changeSelectedCategoryCheckedItems(obj));
    let CategoryOverall = CategoryCheckList[0]?.ComponentOptionsDetails?.filter(
      (e) => e.OptionName === 'OverallBackground'
    );
    let CategoryOverallSelect = checkedValues?.includes(
      CategoryOverall?.[0]?.OptionId
    );
    if (!CategoryOverallSelect) {
      dispatch(
        changeSelectedCatgColorDetail({
          catgColor: {
            BackgroundColor: GlobalCatgColorDetail?.['BackgroundColor'],
            FontColor: GlobalCatgColorDetail?.['FontColor'],
            OverallBackgroundColor: null,
          },
        })
      );
    } else {
      dispatch(
        changeSelectedCatgColorDetail({
          catgColor: {
            BackgroundColor: GlobalCatgColorDetail?.['BackgroundColor'],
            FontColor: GlobalCatgColorDetail?.['FontColor'],
            OverallBackgroundColor: CategoryOverallColorsList?.filter(
              (data) => data?.ColorId === dropdownCategoryOverallColor
            )?.[0]?.['BackgroundColor'],
          },
        })
      );
    }
  };

  // Subcategorychecklistselection
  const SubCategorySelectlistonChange = (checkedValues) => {
    setSelectedSubCategoryCheckValues(checkedValues);
    const obj = checkedValues?.map((d) => ({ OptionId: d }));
    setSelectedSubCategoryCheckList(obj);
    dispatch(changeSelectedSubCategoryCheckedItems(obj));
    let SubCategoryOverall =
      SubCategoryCheckList[0]?.ComponentOptionsDetails?.filter(
        (e) => e.OptionName === 'OverallBackground'
      );
    let SubCategoryOverallSelect = checkedValues?.includes(
      SubCategoryOverall?.[0]?.OptionId
    );
    if (!SubCategoryOverallSelect) {
      dispatch(
        changeSelectedSubCatgColorDetail({
          subCatgColor: {
            BackgroundColor: GlobalSubCatgColorDetail?.['BackgroundColor'],
            FontColor: GlobalSubCatgColorDetail?.['FontColor'],
            OverallBackgroundColor: null,
          },
        })
      );
    } else {
      dispatch(
        changeSelectedSubCatgColorDetail({
          subCatgColor: {
            BackgroundColor: GlobalSubCatgColorDetail?.['BackgroundColor'],
            FontColor: GlobalSubCatgColorDetail?.['FontColor'],
            OverallBackgroundColor: SubcategoryOverallColorsList?.filter(
              (data) => data?.ColorId === dropdownSubcategoryOverallColor
            )?.[0]?.['BackgroundColor'],
          },
        })
      );
    }
  };
  // Cardchecklistselection
  const CardSelectlistonChange = (checkedValues, key) => {
    setSelectedCardCheckValues(checkedValues);
    let SmallImageId = CardCheckList?.[0]?.ComponentOptionsDetails?.filter(
      (e) => e.OptionName === 'SmallImage'
    );
    let ImageLeft = CardCheckList?.[0]?.ComponentOptionsDetails?.filter(
      (e) => e.OptionName === 'ImageLeft'
    );
    let ImageRight = CardCheckList?.[0]?.ComponentOptionsDetails?.filter(
      (e) => e.OptionName === 'ImageRight'
    );
    let ImageUp = CardCheckList?.[0]?.ComponentOptionsDetails?.filter(
      (e) => e.OptionName === 'ImageUp'
    );
    let ImageDown = CardCheckList?.[0]?.ComponentOptionsDetails?.filter(
      (e) => e.OptionName === 'ImageDown'
    );
    let ImagePosition = CardCheckList?.[0]?.ComponentOptionsDetails?.filter(
      (e) =>
        e.OptionName.includes('Image') && !e.OptionName.includes('SmallImage')
    );
    let ImagePositionId = ImagePosition?.map((d) => d?.OptionId);
    let isthere = SelectAllPositionImage?.filter(
      (e) => !checkedValues?.some((e2) => e === e2)
    );
    setSelectfliterPositionImage(isthere);

    let SmallImageSelect = checkedValues?.includes(SmallImageId?.[0]?.OptionId);
    if (!SmallImageSelect) {
      var checkedval = checkedValues?.filter(
        (k) =>
          k !== parseInt(ImageRight?.[0]?.OptionId) &&
          k !== parseInt(ImageLeft?.[0]?.OptionId) &&
          k !== parseInt(ImageUp?.[0]?.OptionId) &&
          k !== parseInt(ImageDown?.[0]?.OptionId)
      );
    } else {
      var checkedval = checkedValues;
    }
    setSelectedCardCheckValues(checkedval);
    const obj = checkedValues?.map((d) => ({ OptionId: d }));
    setSelectedCardCheckList(obj);
    dispatch(changeSelectedCardCheckedItems(obj));
    let CardOverall = CardCheckList[0]?.ComponentOptionsDetails?.filter(
      (e) => e.OptionName === 'OverallBackground'
    );
    let CardOverallSelect = checkedValues?.includes(CardOverall?.[0]?.OptionId);
    if (!CardOverallSelect) {
      dispatch(
        changeSelectedCardColorDetail({
          cardColor: {
            BackgroundColor: GlobalCardColorDetail?.['BackgroundColor'],
            FontColor: GlobalCardColorDetail?.['FontColor'],
            OverallBackgroundColor: null,
          },
        })
      );
    } else {
      dispatch(
        changeSelectedCardColorDetail({
          cardColor: {
            BackgroundColor: GlobalCardColorDetail?.['BackgroundColor'],
            FontColor: GlobalCardColorDetail?.['FontColor'],
            OverallBackgroundColor: cardOverallColorsList?.filter(
              (data) => data?.ColorId === dropdownCardOverallColor
            )?.[0]?.['BackgroundColor'],
          },
        })
      );
    }
  };

  // Cardchecklistselection
  const BillTableSelectlistonChange = (checkedValues) => {
    setSelectedBillTableCheckValues(checkedValues);
    const obj = checkedValues?.map((d) => ({ OptionId: d }));
    setSelectedBillTableCheckList(obj);
    dispatch(changeSelectedBillTableCheckedItems(obj));
    let BillingOverall = BillTableCheckList[0]?.ComponentOptionsDetails?.filter(
      (e) => e.OptionName === 'OverallBackground'
    );
    let BillingOverallSelect = checkedValues?.includes(
      BillingOverall?.[0]?.OptionId
    );
    if (!BillingOverallSelect) {
      dispatch(
        changeSelectedBillingColorDetail({
          billingColor: {
            BackgroundColor: GlobalBillingColorDetail?.['BackgroundColor'],
            FontColor: GlobalBillingColorDetail?.['FontColor'],
            OverallBackgroundColor: null,
          },
        })
      );
    } else {
      dispatch(
        changeSelectedBillingColorDetail({
          billingColor: {
            BackgroundColor: GlobalBillingColorDetail?.['BackgroundColor'],
            FontColor: GlobalBillingColorDetail?.['FontColor'],
            OverallBackgroundColor: BillingOverallColorsList?.filter(
              (data) => data?.ColorId === dropdownBillingOverallColor
            )?.[0]?.['BackgroundColor'],
          },
        })
      );
    }
  };

  useEffect(() => {
    const addCustomerOptionId =
      BillTableCheckList[0]?.ComponentOptionsDetails?.find(
        (item) => item.OptionName === 'AddCustomer'
      )?.OptionId;
    const holdOptionId = BillTableCheckList[0]?.ComponentOptionsDetails?.find(
      (item) => item.OptionName === 'Hold'
    )?.OptionId;

    switch (true) {
      case SelectedBillTableCheckValues?.includes(addCustomerOptionId) &&
        SelectedBillTableCheckValues?.includes(holdOptionId):
        setNavHoldButton(true);
        setNavAddCustomerButton(true);
        break;

      case !SelectedBillTableCheckValues?.includes(addCustomerOptionId) &&
        !SelectedBillTableCheckValues?.includes(holdOptionId):
        setNavHoldButton(false);
        setNavAddCustomerButton(false);
        break;

      case SelectedBillTableCheckValues?.includes(addCustomerOptionId):
        if (
          SelectedBillTableCheckValues?.includes(addCustomerOptionId) &&
          SelectedBillTableCheckValues?.includes(holdOptionId)
        ) {
          setNavAddCustomerButton(true);
          setNavHoldButton(true);
        } else if (
          SelectedBillTableCheckValues?.includes(addCustomerOptionId) &&
          !SelectedBillTableCheckValues?.includes(holdOptionId)
        ) {
          setNavAddCustomerButton(true);
          setNavHoldButton(false);
        }
        break;

      case SelectedBillTableCheckValues?.includes(holdOptionId):
        if (
          SelectedBillTableCheckValues?.includes(addCustomerOptionId) &&
          SelectedBillTableCheckValues?.includes(holdOptionId)
        ) {
          setNavAddCustomerButton(true);
          setNavHoldButton(true);
        } else if (
          !SelectedBillTableCheckValues?.includes(addCustomerOptionId) &&
          SelectedBillTableCheckValues?.includes(holdOptionId)
        ) {
          setNavAddCustomerButton(false);
          setNavHoldButton(true);
        }
        setNavHoldButton(true);
        break;
    }
  }, [SelectedBillTableCheckValues]);

  // check category image
  const CategoryOption = (categoryvalue) => {
    if (categoryvalue === 'Image') {
      setCatImageSelection(!CatImageSelection);
    }
    if (categoryvalue === 'Background') {
      setCatbackgroundSelection(!CatbackgroundSelection);
    }
  };
  // check card small image
  const CardOption = (cardvalue, cardid) => {
    if (cardvalue === 'SmallImage') {
      setSmallImage(!SmallImage);
      let ImageNames = CardCheckList[0]?.ComponentOptionsDetails?.filter((a) =>
        a.OptionName.includes('Image')
      );
    }
    if (cardvalue === 'Background') {
      setCardSelection(!CardSelection);
    }
  };

  // onfinish function
  const onfinish = async (values) => {
    console.log(values, "valuesvalues")
    setFirstOnClick(true);
    let colorOriginalArray = [
      values.CatColor,
      values.SubCatColor,
      values.CardColor,
      values.TableColor,
      values.LayoutOverallBackground,
      values.CatOverallColor,
      values.SubCatOverallColor,
      values.CardOverallColor,
      values.BillingOverallColor,
    ];
    let colorFilteredArray = colorOriginalArray.filter(
      (value) => value !== undefined && value !== null
    );
    let fontOriginalArray = [
      values.FontCat,
      values.FontSubcat,
      values.FontCard,
      values.FontTable,
    ];
    let fontFilteredArray = fontOriginalArray.filter(
      (value) => value !== undefined && value !== null
    );
    const PostData = {};
    PostData['AppId'] = AppId;
    PostData['CompId'] = CompId;
    PostData['UserId'] = UserId;
    PostData['BranchId'] = BranchId;
    PostData['ColorId'] = colorFilteredArray;
    PostData['FontId'] = fontFilteredArray;
    PostData['CreatedBy'] = UserId;
    const tempData = [];
    const navbarCheckList = Array.from(
      new Map(
        SelectedNavCheckList?.map((item) => [item.OptionId, item])
      ).values()
    );

    setSelectedNavCheckList(navbarCheckList);
    let layoutselectid = ShowDropDownData?.map((d) => ({
      OptionId: d?.OptionId,
    }));
    tempData.push({
      ComponentId: SelectedLayoutId,
      ComponentDetails: layoutselectid != undefined ? layoutselectid : [],
    });
    tempData.push({
      ComponentId: SelectedNavbarId,
      ComponentDetails: navbarCheckList != undefined ? navbarCheckList : [],
    });
    tempData.push({
      ComponentId: SelectedCategoryId,
      ComponentDetails:
        SelectedCategoryCheckList != undefined ? SelectedCategoryCheckList : [],
    });

    ShowDropDownData?.find((a) => a.OptionName === 'SubCategory')
      ? tempData.push({
        ComponentId: SelectedSubCategoryId,
        ComponentDetails:
          SelectedSubCategoryCheckList != undefined
            ? SelectedSubCategoryCheckList
            : [],
      })
      : ''; // Shifayath Date:27/12/2023

    tempData.push({
      ComponentId: SelectedCardId,
      ComponentDetails:
        SelectedCardCheckList != undefined ? SelectedCardCheckList : [],
    });
    tempData.push({
      ComponentId: SelectedBillingTableId,
      ComponentDetails:
        SelectedBillTableCheckList != undefined
          ? SelectedBillTableCheckList
          : [],
    });
    const data = tempData
      ?.filter((item) => item.ComponentId !== undefined)
      .map((item) => ({
        ComponentId: item.ComponentId,
        ...(item?.ComponentDetails?.length > 0 && {
          ComponentDetails: item.ComponentDetails,
        }),
      }));

    PostData['TemplateDetails'] = data;

    const validComponents = data?.filter(
      (component) => component.ComponentId === null
    );
    // PostData["TemplateDetails"] = tempData;
    // const validComponents = tempData?.filter(component => component.ComponentId === null );
    // console.log(validComponents,tempData,"validComponents")
    if (validComponents?.length === 0) {
      if (Temptemplatedata) {
        var response = await dispatch(
          postSelectionComponentData(PostData)
        ).unwrap();
      } else {
        var response = await dispatch(
          putSelectionComponentData(PostData)
        ).unwrap();
      }
      if (response?.data?.statusCode == 1) {
        if (
          response?.data?.response === 'Application Template Already Exists'
        ) {
          setMessageType('warning');
          setMessageData('Application Template Already Exists');
          setFirstOnClick(false);
        } else {
          setMessageType('success');
          setMessageData('Template Details Added Successfully');
          setFirstOnClick(false);
        }
        dispatch(changeScanTemplate({}))

      } else {
        setMessageType('error');
        setMessageData(response?.data?.response);
        setFirstOnClick(false);
      }
    } else {
      setFirstOnClick(false);
    }
  };
  const openColour = (value) => {
    setcatColorType(value);
  };
  const openColour3 = (value) => {
    setCardColorType(value);
  };
  const openColour2 = (value) => {
    setSubCatColorType(value);
    console.log(value, 'value');
  };

  const openColour4 = (value) => {
    setTableColorType(value);
  };

  const isHexColor = (color) =>
    /^#([0-9A-F]{3}|[0-9A-F]{4}|[0-9A-F]{6}|[0-9A-F]{8})$/i.test(color);

  const handleOverallCheck = (e) => {
    setSelectOverallSelected(e.target.checked);
    let layoutOverallColorVal = LayoutOverallbackgroundlist?.filter(
      (data) => data?.ColorId === dropdownLayoutOverallColor
    );
    if (e.target.checked) {
      dispatch(
        changeSelectedLayoutColorDetail({
          layoutColor: {
            OverallBackgroundColor:
              layoutOverallColorVal?.[0]?.['BackgroundColor'],
          },
        })
      );
    } else {
      dispatch(
        changeSelectedLayoutColorDetail({
          layoutColor: {
            OverallBackgroundColor: null,
          },
        })
      );
    }
  };

  const handleLayoutOverallHexCode = (e) => {
    setLayoutOverallHexCode(e?.target?.value);
    if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
      e.target.value = '000000';
    }
    setLayoutOverallColor(`#${e.target.value}`);
  };

  const handleCategoryOverallHexCode = (e) => {
    setCategoryOverallHex(e?.target?.value);
    if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
      e.target.value = '000000';
    }
    setCategoryOverallColor(`#${e.target.value}`);
  };

  const handleSubCatOverallHexCode = (e) => {
    setSubCatOverallHex(e?.target?.value);
    if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
      e.target.value = '000000';
    }
    setSubcategoryOverallColor(`#${e.target.value}`);
  };

  const handleCardOverallHexCode = (e) => {
    setCardOverallHex(e?.target?.value);
    if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
      e.target.value = '000000';
    }
    setCardOverallColor(`#${e.target.value}`);
  };

  const handleBillingOverallHexCode = (e) => {
    setBillingOverallHex(e?.target?.value);
    if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
      e.target.value = '000000';
    }
    setBillingOverallColor(`#${e.target.value}`);
  };

  const handleSubCatHexChange = (e) => {
    if (SubCatColorType?.toLowerCase() === 'y') {
      setSubCatBGHex(e?.target?.value);
      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
        e.target.value = '009b00';
      }
      setSubcatbackgroundColor(`#${e.target.value}`);
    }
    if (SubCatColorType?.toLowerCase() === 'n') {
      setSubCatFontHex(e?.target?.value);
      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
        e.target.value = '000000';
      }
      setSubcatfontColor(`#${e.target.value}`);
    }
  };

  const handleCatHexChange = (e) => {
    if (CatColorType?.toLowerCase() === 'y') {
      setCatBGHex(e?.target?.value);
      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
        e.target.value = '009b00';
      }
      setCatbackgroundColor(`#${e.target.value}`);
    }
    if (CatColorType?.toLowerCase() === 'n') {
      setCatFontHex(e?.target?.value);
      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
        e.target.value = '000000';
      }
      setCatfontColor(`#${e.target.value}`);
    }
  };

  const handleCardHexChange = (e) => {
    if (CardColorType?.toLowerCase() === 'y') {
      setCardBGHex(e?.target?.value);
      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
        e.target.value = '009b00';
      }
      setCardbackgroundColor(`#${e.target.value}`);
    }
    if (CardColorType?.toLowerCase() === 'n') {
      setCardFontHex(e?.target?.value);
      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
        e.target.value = '000000';
      }
      setCardfontColor(`#${e.target.value}`);
    }
  };

  const handleTableHexChange = (e) => {
    if (TableColorType?.toLowerCase() === 'y') {
      setTableBGHex(e?.target?.value);
      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
        e.target.value = '009b00';
      }
      setTablebackgroundColor(`#${e.target.value}`);
    }
    if (TableColorType?.toLowerCase() === 'n') {
      setTableFontHex(e?.target?.value);
      if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) {
        e.target.value = '000000';
      }
      setTablefontColor(`#${e.target.value}`);
    }
  };

  return (
    <>
      <Messages
        messageType={messageType}
        messageData={messageData}
        onComplete={onComplete}
      />
      <div className="Selection-Component-OverallDiv">
        <Form form={form} ref={formRef} onFinish={onfinish} onValuesChange={onValuesChange}>
          {/* <div className="defaultandCustomisedTheme">
            <div
              className={activeTheme === 'default' ? 'selected' : ''}
              onClick={() => CustomisedthemeSelection('default')}
            >
              <HiOutlineSquares2X2 size={16} />
              Default Theme
            </div>
            <div
              className={activeTheme === 'customised' ? 'selected' : ''}
              onClick={() => CustomisedthemeSelection('customised')}
            >
              <HiSquaresPlus size={16} /> Customized Theme
            </div>
          </div> */}

          {/* {activeTheme === 'default' && (
            <div className="themeListmain">
              {DefaultThemes?.length > 0 && (
                <div className="themeList">
                  {DefaultThemes?.map((theme, index) => (
                    <div
                      key={index}
                      className={
                        theme?.TemplatePreferenceId == SelectedTheme?.ThemeId
                          ? 'themeListselected'
                          : ''
                      }
                      onClick={() => changeThemes(theme)}
                    >
                      {' '}
                      {theme?.ThemeName}
                    </div>
                  ))}
                </div>
              )}
              {OtherTemplateData?.length == 0 ? (
                <p
                  className="themeListOther"
                  onClick={() => GetOthersTemplate()}
                >
                  <div>Others</div>
                </p>
              ) : (
                <p
                  className="themeListOthersclose"
                  onClick={() => clearOtherTemplate()}
                >
                  <div>
                    <CloseOutlined />
                  </div>
                </p>
              )}
            </div>
          )}
          {OtherTemplateData?.length > 0 && activeTheme === 'default' && (
            <div className="themeListmain">
              <div className="themeList">
                {OtherTemplateData?.map((theme, index) => (
                  <div
                    key={index}
                    className={
                      theme?.TemplatePreferenceId == SelectedTheme?.ThemeId
                        ? 'themeListselected'
                        : ''
                    }
                    onClick={() => changeThemes(theme)}
                  >
                    {' '}
                    {theme?.ThemeName}
                  </div>
                ))}
              </div>
              <div className="LessMore">
                {OthersCount > 1 && (
                  <p
                    className="themeListOthers"
                    onClick={() => GetLessTemplate()}
                  >
                    <div>
                      {' '}
                      <BiSkipPrevious size={18} /> Previous
                    </div>
                  </p>
                )}
                {isNext && (
                  <p
                    className="themeListOthers1"
                    onClick={() => GetMoreTemplate()}
                  >
                    <div>
                      Next <BiSkipNext size={18} />
                    </div>
                  </p>
                )}
              </div>
            </div>
          )} */}
          <div className="Selection-Component-SubDivContainer">
            <div className="Selection-selectheading">
              Layout and Feature Settings
            </div>
            <div className="Selection-Component-InputDiv">
              {!(
                Object.keys(templateData)?.length == 0
              ) && (
                  <div>
                    <p className="Selection-Component-SubHeading">Layout</p>


                    <Form.Item
                      name="LayoutId"
                      rules={[
                        {
                          required: true,
                          message: 'Please Select Layout',
                        },
                      ]}
                    >
                      <DropDowns
                        options={LayoutData?.map((option) => ({
                          value: option.ComponentId,
                          label: option.ComponentName,
                        }))}
                        label="Layout"
                        onChangeFunction={selectLayout}
                        className="field-DropDown-Selection"
                        isOnchanges={SelectedLayoutId ? true : false}
                        valueData={SelectedLayoutId}
                      />
                    </Form.Item>
                  </div>
                )}

              <Modal
                open={UploadColor}
                title="Colors"
                closeIcon={<CloseOutlined onClick={CatonCancel} />}
                width={400}
                footer={null}
              >
                <div>
                  <div className="color-hex-select">
                    <RadioGrpButton
                      content={[
                        { value: 'Y', label: 'Background' },
                        { value: 'N', label: 'Font' },
                      ]}
                      fieldState={true}
                      defaultSelect={CatColorType}
                      onSelectFuntion={(e) => openColour(e)}
                    />
                    <div className="hex-input">
                      <InputField
                        prefix="#"
                        value={
                          CatColorType?.toLowerCase() === 'y'
                            ? catBGHex
                            : CatColorType?.toLowerCase() === 'n'
                              ? catFontHex
                              : ''
                        }
                        inputMode="numeric"
                        maxLength={8}
                        onChange={handleCatHexChange}
                      />
                    </div>
                  </div>

                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      gap: '1rem',
                      justifyContent: 'center',
                      marginTop: '10px',
                      borderRadius: '10px',
                      border: '1px solid #000',
                      padding: '10px',
                      width: '110%',
                    }}
                  >
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '0.5rem',
                      }}
                    >
                      <p style={{ fontSize: '10px', fontWeight: 700 }}>
                        {' '}
                        Selected Background Color :{' '}
                      </p>
                      <div
                        style={{
                          width: '35px',
                          height: '23px',
                          borderRadius: '5px',
                          backgroundColor: CatbackgroundColor
                            ? CatbackgroundColor
                            : null,
                        }}
                      ></div>
                      <>|</>
                    </div>
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '0.5rem',
                      }}
                    >
                      <p style={{ fontSize: '10px', fontWeight: 700 }}>
                        {' '}
                        Selected Font Color :{' '}
                      </p>
                      <div
                        style={{
                          width: '35px',
                          height: '23px',
                          borderRadius: '5px',
                          backgroundColor: CatfontColor ? CatfontColor : null,
                        }}
                      ></div>
                    </div>
                  </div>
                </div>


                <SwatchesPicker onChange={handleColorChange} />
                <div>
                  <button className="colorBtn" onClick={handleColorSubmit1}>
                    SAVE
                  </button>
                </div>
              </Modal>

              {ShowDropDownData?.find((a) => a.OptionName === 'Navbar') && (
                <div>
                  <p className="Selection-Component-SubHeading">NavBar</p>

                  <Form.Item
                    name="NavbarId"
                    rules={[
                      {
                        required: true,
                        message: 'Please Select Navbar',
                      },
                    ]}
                  >
                    <DropDowns
                      options={NavbarData?.map((option) => ({
                        value: option.ComponentId,
                        label: option.ComponentName,
                      }))}
                      label="NavBar"
                      onChangeFunction={selectNavbar}
                      className="field-DropDown-Selection"
                      isOnchanges={SelectedNavbarId ? true : false}
                      valueData={SelectedNavbarId}
                    />
                  </Form.Item>
                </div>
              )}

              {ShowDropDownData?.find((a) => a.OptionName === 'Category') && (
                <div>
                  <p className="Selection-Component-SubHeading">Category</p>

                  <Form.Item
                    name="CategoryId"
                    rules={[
                      {
                        required: true,
                        message: 'Please Select Category',
                      },
                    ]}
                  >
                    <DropDowns
                      options={CategoryData?.map((option) => ({
                        value: option.ComponentId,
                        label: option.ComponentName,
                      }))}
                      label="Category"
                      onChangeFunction={selectCategory}
                      className="field-DropDown-Selection"
                      isOnchanges={SelectedCategoryId ? true : false}
                      valueData={SelectedCategoryId}
                    />
                  </Form.Item>
                </div>
              )}
              {ShowDropDownData?.find(
                (a) => a.OptionName === 'SubCategory'
              ) && (
                  <div>
                    <p className="Selection-Component-SubHeading">Sub Category</p>

                    <Form.Item
                      name="SubCategoryId"
                      rules={[
                        {
                          required: true,
                          message: 'Please Select SubCategory',
                        },
                      ]}
                    >
                      <DropDowns
                        options={SubCategoryData?.map((option) => ({
                          value: option.ComponentId,
                          label: option.ComponentName,
                        }))}
                        label="Sub Category"
                        onChangeFunction={selectSubCategory}
                        className="field-DropDown-Selection"
                        isOnchanges={SelectedSubCategoryId ? true : false}
                        valueData={SelectedSubCategoryId}
                      />
                    </Form.Item>
                  </div>
                )}
              {ShowDropDownData?.find((a) => a.OptionName === 'Card') && (
                <div>
                  <p className="Selection-Component-SubHeading">Card</p>

                  <Form.Item
                    name="CardId"
                    rules={[
                      {
                        required: true,
                        message: 'Please Select Card',
                      },
                    ]}
                  >
                    <DropDowns
                      options={CardData?.map((option) => ({
                        value: option.ComponentId,
                        label: option.ComponentName,
                      }))}
                      label="Card"
                      onChangeFunction={selectCard}
                      className="field-DropDown-Selection"
                      isOnchanges={SelectedCardId ? true : false}
                      valueData={SelectedCardId}
                    />
                  </Form.Item>
                </div>
              )}
              {ShowDropDownData?.find((a) => a.OptionName === 'Billing') && (
                <div>
                  <p className="Selection-Component-SubHeading">Bill Table</p>


                  {/* <Form.Item
                    name="BillingTableId"
                    rules={[
                      {
                        required: true,
                        message: 'Please Select Bill Table',
                      },
                    ]}
                  >
                    <DropDowns
                      options={BillingTableData?.map((option) => ({
                        value: option.ComponentId,
                        label: option.ComponentName,
                      }))}
                      label="Bill Table"
                      onChangeFunction={selectBillingTable}
                      className="field-DropDown-Selection"
                      isOnchanges={SelectedBillingTableId ? true : false}
                      valueData={SelectedBillingTableId}
                    />
                  </Form.Item> */}
                  {(() => {
                    const selectedLayoutName = LayoutData?.find(l => l.ComponentId === SelectedLayoutId)?.ComponentName;
                    const filteredBillingTableData = (selectedLayoutName === 'Combo1' || selectedLayoutName === 'Combo2') ? BillingTableData : BillingTableData?.filter(b => b.ComponentName !== 'Billing8');
                    return (
                      <Form.Item
                        name="BillingTableId"
                        rules={[
                          {
                            required: true,
                            message: 'Please Select Bill Table',
                          },
                        ]}
                      >
                        <DropDowns
                          options={filteredBillingTableData?.map((option) => ({
                            value: option.ComponentId,
                            label: option.ComponentName,
                          }))}
                          label="Bill Table"
                          onChangeFunction={selectBillingTable}
                          className="field-DropDown-Selection"
                          isOnchanges={SelectedBillingTableId ? true : false}
                          valueData={SelectedBillingTableId}
                        />
                      </Form.Item>
                    );
                  })()}
                </div>
              )}

              {ShowDropDownData?.find(
                (a) => a.OptionName === 'OverallBackground'
              ) && (
                  <div>
                    <div>
                      <p className="Selection-Component-SubHeading">
                        <Checkbox onChange={handleOverallCheck} defaultChecked>
                          Overall Background
                        </Checkbox>
                      </p>
                    </div>

                    <div>
                      <Modal
                        open={UploadLayoutOverallBackground}
                        title="Overall Background"
                        closeIcon={
                          <CloseOutlined
                            onClick={() => {
                              setUploadLayoutOverallBackground(false);
                            }}
                          />
                        }
                        width={400}
                        footer={null}
                      >
                        <div>
                          <div style={{ display: 'flex' }}>
                            <div
                              style={{
                                display: 'flex',
                                align: 'center',
                                width: '60%',
                                gap: '0.5rem',
                                border: '1px solid black',
                                borderRadius: '10px',
                                padding: '10px',
                              }}
                            >
                              <p style={{ fontSize: '14px', fontWeight: 700 }}>
                                Selected Color:{' '}
                              </p>
                              <div
                                style={{
                                  width: '35px',
                                  height: '23px',
                                  borderRadius: '5px',
                                  backgroundColor: LayoutOverallColor
                                    ? LayoutOverallColor
                                    : null,
                                }}
                              />
                            </div>
                            <div className="hex-input">
                              <InputField
                                prefix="#"
                                value={layoutOverallHexCode}
                                inputMode="numeric"
                                maxLength={8}
                                onChange={handleLayoutOverallHexCode}
                              />
                            </div>
                          </div>
                        </div>


                        <SwatchesPicker
                          onChange={handleLayoutOverallColorChange}
                        />

                        <div>
                          <button
                            className="colorBtn"
                            onClick={handleLayoutOverallColorSubmit}
                          >
                            SAVE
                          </button>
                        </div>
                      </Modal>
                      {selectOverallSelected == true && (
                        <div
                          style={{
                            display: 'flex',
                            gap: '1rem',
                            flexWrap: 'nowrap',
                            alignItems: "center"
                          }}
                        >
                          <div className="colorDropdown">
                            <Form.Item name="LayoutOverallBackground">
                              <DropDowns
                                options={LayoutOverallbackgroundlist?.map(
                                  (option) => ({
                                    value: option.ColorId,
                                    label: (
                                      <div
                                        style={{ display: 'flex', gap: '0.5rem' }}
                                      >
                                        <div
                                          style={{
                                            width: '27px',
                                            height: '27px',
                                            borderRadius: '25.774192810058594px',
                                            backgroundColor:
                                              option.BackgroundColor,
                                          }}
                                        >
                                          <span
                                            style={{
                                              width: '27px',
                                              height: '27px',
                                              borderRadius: '50px',
                                              marginLeft: '15px',
                                              backgroundColor: option.FontColor,
                                            }}
                                          >
                                            &nbsp;&nbsp;&nbsp;
                                          </span>
                                        </div>
                                        <div>{option.ThemeName}</div>
                                      </div>
                                    ),
                                  })
                                )}
                                labelChange={true}
                                label={
                                  <p style={{ fontSize: '11px' }}>
                                    Overall Background
                                  </p>
                                }
                                className="field-DropDown-Selection"
                                onChangeFunction={selectLayoutOverallColor}
                                isOnchanges={
                                  dropdownLayoutOverallColor ? true : false
                                }
                                valueData={dropdownLayoutOverallColor}
                              />
                            </Form.Item>
                          </div>
                          <div className='addNewSalesFiledBTN' onClick={handleUploadLayoutOverallBackground}>
                            Add
                            <IoMdAdd
                              className="plusOutlinedIcon"
                            />
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                )}
            </div>
            <div className="Selection-Component-selectContainerDiv">
              {NavBarCheckList?.length > 0 &&
                ShowDropDownData?.find((a) => a.OptionName === 'Navbar') && (
                  <div className="Selection-Component-selectContainer">
                    <div className="Selection-Component-selectheadingMainDiv">
                      <span className="Selection-Component-selectheading">
                        Selected NavBar :
                        <span style={{ color: '#009b00' }}>
                          <TbLayoutNavbar />  {NavBarCheckList[0]?.ComponentName}
                        </span>
                      </span>
                    </div>

                    <Checkbox.Group
                      style={{
                        width: '100%',
                      }}
                      onChange={NavBarSelectlistonChange}
                      value={SelectedNavCheckValues}
                    >
                      <Row>
                        {NavBarCheckList?.[0]?.ComponentOptionsDetails?.map(
                          (value, key) => (
                            <Checkbox
                              style={{ padding: '12px' }}
                              value={value?.OptionId}
                              key={value?.OptionId}
                              disabled={
                                value.OptionName === 'Hold' && NavHoldButton
                                  ? true
                                  : value.OptionName === 'AddCustomer' &&
                                    NavAddCustomerButton
                                    ? true
                                    : value.OptionName === 'DineIn' &&
                                      (GlobalPreferenceData?.SettingValue !==
                                        'Y' ||
                                        GlobalPreferenceData?.length === 0)
                                      ? true
                                      : value.OptionName === 'Search'
                                        ? true
                                        : false
                              }
                            // onClick={() => holdoption(value.OptionName)}
                            >
                              {value.OptionName}
                            </Checkbox>
                          )
                        )}
                      </Row>
                    </Checkbox.Group>
                  </div>
                )}
              {CategoryCheckList?.length > 0 &&
                ShowDropDownData?.find((a) => a.OptionName === 'Category') && (
                  <div className="Selection-Component-selectContainer">
                    <div className="Selection-Component-selectheadingMainDiv">
                      <span className="Selection-Component-selectheading">
                        Selected Category:
                        <span style={{ color: '#009b00' }}>
                          <HiMenuAlt1 />  {CategoryCheckList[0]?.ComponentName}
                        </span>
                      </span>
                    </div>

                    <Checkbox.Group
                      style={{
                        width: '100%',
                      }}
                      onChange={CategorySelectlistonChange}
                      value={SelectedCategoryCheckValues}
                    >
                      <Row>
                        {CategoryCheckList?.[0]?.ComponentOptionsDetails?.map(
                          (value, key) => (
                            <Checkbox
                              style={{ padding: '12px' }}
                              value={value?.OptionId}
                              key={value?.OptionId}
                              disabled={
                                value.OptionName === 'ImageRight' &&
                                  !CatImageSelection
                                  ? true
                                  : false
                              }
                              onClick={() =>
                                CategoryOption(
                                  value?.OptionName,
                                  value?.OptionId
                                )
                              }
                            >
                              {value.OptionName}
                            </Checkbox>
                          )
                        )}
                      </Row>
                    </Checkbox.Group>
                    <div className='SlecteCatDiv'>
                      <div
                        style={{
                          display: 'flex',
                          flexWrap: 'wrap',
                          flexDirection: 'row',
                          alignItems: "center",
                          gap: "1rem"
                        }}
                      >
                        <div>
                          <Form.Item
                            name="FontCat"
                            rules={[
                              {
                                required: true,
                                message: 'Please Select Font',
                              },
                            ]}
                          >
                            <p className='Selection-Component-SubHeading'>
                              Category Font
                            </p>
                            <DropDowns
                              options={CatFontData?.map((option) => ({
                                value: option.FontId,
                                label: option.SessionFont,
                              }))}
                              label="Font"
                              onChangeFunction={selectFont0}
                              className="field-DropDown-Selection"
                              isOnchanges={selectedCatFont ? true : false}
                              valueData={selectedCatFont}
                            />
                          </Form.Item>
                        </div>
                        <div className='addNewSalesFiledBTN' onClick={CathandleUploadFonts}>
                          Add
                          <IoMdAdd
                            className="plusOutlinedIcon"

                          />
                          <DefaultModal
                            open={catModelOpen}
                            title="Fonts"
                            footer={true}
                            children={
                              <Form form={Catform}>
                                <div className="fontInputs">
                                  <div>
                                    <Form.Item
                                      name="CategoryFont"
                                      rules={[
                                        {
                                          required: true,
                                          pattern: /^(?!\s*$).+/,
                                          message: 'Please Enter Font',
                                        },
                                        {
                                          validator: async (_, value) => {
                                            await validateSafeInput(value); // To block HTML tags & SQL keywords
                                            return Promise.resolve();
                                          },
                                        },
                                      ]}
                                    >
                                      <InputField
                                        field="CategoryFont"
                                        label="Font"
                                        className="Input"
                                        fieldState={true}
                                        fieldApi={true}
                                        autoComplete="off"
                                      />
                                    </Form.Item>
                                  </div>
                                </div>
                                <p style={{ color: 'red' }}>
                                  * Google Fonts Only
                                </p>
                              </Form>
                            }
                            handleCancel={CathandleCancel}
                            handleSubmit={CathandleSubmit}
                            buttonText="SAVE"
                          />
                        </div>
                      </div>
                      {SelectedCategoryCheckValues?.filter(
                        (item) =>
                          item ==
                          CategoryCheckList?.[0]?.ComponentOptionsDetails?.filter(
                            (item) => item.OptionName == 'Background'
                          )?.[0]?.OptionId
                      )?.[0] != undefined ? (
                        <div>
                          <div
                            style={{
                              display: 'flex',
                              gap: '1rem',
                              flexWrap: 'nowrap',
                              alignItems: "center"
                            }}
                          >
                            <div className="colorDropdown">
                              <Form.Item
                                name="CatColor"
                                rules={[
                                  {
                                    required: true,
                                    message: 'Please Select Color',
                                  },
                                ]}
                              >
                                <p className='Selection-Component-SubHeading'>
                                  Category Background Color
                                </p>
                                <DropDowns
                                  options={CatColorData?.map((option) => ({
                                    value: option.ColorId,
                                    label: (
                                      <div
                                        style={{
                                          display: 'flex',
                                          gap: '0.5rem',
                                        }}
                                      >
                                        <div
                                          style={{
                                            width: '27px',
                                            height: '27px',
                                            borderRadius:
                                              '25.774192810058594px',
                                            backgroundColor:
                                              option.BackgroundColor,
                                          }}
                                        >
                                          <span
                                            style={{
                                              width: '27px',
                                              height: '27px',
                                              borderRadius: '50px',
                                              marginLeft: '15px',
                                              backgroundColor: option.FontColor,
                                            }}
                                          >
                                            &nbsp;&nbsp;&nbsp;
                                          </span>
                                        </div>
                                        <div>{option.ThemeName}</div>
                                      </div>
                                    ),
                                  }))}
                                  labelChange={true}
                                  label="Color"
                                  className="field-DropDown-Selection"
                                  onChangeFunction={selectCategoryColor}
                                  isOnchanges={SelectedCatColor ? true : false}
                                  valueData={SelectedCatColor}
                                />
                              </Form.Item>
                            </div>
                            <div className='addNewSalesFiledBTN' onClick={handleUploadColor}>
                              Add
                              <IoMdAdd
                                className="plusOutlinedIcon"

                              />
                            </div>
                          </div>
                        </div>
                      ) : null}
                      {SelectedCategoryCheckValues?.filter(
                        (item) =>
                          item ==
                          CategoryCheckList?.[0]?.ComponentOptionsDetails?.filter(
                            (item) => item.OptionName == 'OverallBackground'
                          )?.[0]?.OptionId
                      )?.[0] != undefined ? (
                        <div>
                          <Modal
                            open={CategoryUploadOverallColor}
                            title="Category Overall Background"
                            closeIcon={
                              <CloseOutlined
                                onClick={() => {
                                  setCategoryUploadOverallColor(false);
                                }}
                              />
                            }
                            width={400}
                            footer={null}
                          >
                            <div style={{ display: 'flex' }}>
                              <div
                                style={{
                                  display: 'flex',
                                  align: 'center',
                                  width: '60%',
                                  gap: '0.5rem',
                                  border: '1px solid black',
                                  borderRadius: '10px',
                                  padding: '10px',
                                }}
                              >
                                <p
                                  style={{ fontSize: '14px', fontWeight: 700 }}
                                >
                                  Selected Color:{' '}
                                </p>
                                <div
                                  style={{
                                    width: '35px',
                                    height: '23px',
                                    borderRadius: '5px',
                                    backgroundColor: CategoryOverallColor
                                      ? CategoryOverallColor
                                      : null,
                                  }}
                                ></div>
                              </div>
                              <div className="hex-input">
                                <InputField
                                  prefix="#"
                                  value={categoryOverallHex}
                                  inputMode="numeric"
                                  maxLength={8}
                                  onChange={handleCategoryOverallHexCode}
                                />
                              </div>
                            </div>

                            <SwatchesPicker
                              onChange={handleCategoryOverallColorChange}
                            />

                            <div>
                              <button
                                className="colorBtn"
                                onClick={handleCategoryOverallColorSubmit}
                              >
                                SAVE
                              </button>
                            </div>
                          </Modal>
                          <div
                            style={{
                              display: 'flex',
                              gap: '1rem',
                              flexWrap: 'nowrap',
                            }}
                          >
                            <div className="colorDropdown">
                              <Form.Item
                                name="CatOverallColor"
                                rules={[
                                  {
                                    required: true,
                                    message: 'Please Select Color',
                                  },
                                ]}
                              >
                                <p className='Selection-Component-SubHeading'>
                                  Category Overall-Background
                                </p>

                                <DropDowns
                                  options={CategoryOverallColorsList?.map(
                                    (option) => ({
                                      value: option.ColorId,
                                      label: (
                                        <div
                                          style={{
                                            display: 'flex',
                                            gap: '0.5rem',
                                          }}
                                        >
                                          <div
                                            style={{
                                              width: '27px',
                                              height: '27px',
                                              borderRadius:
                                                '25.774192810058594px',
                                              backgroundColor:
                                                option.BackgroundColor,
                                            }}
                                          >
                                            <span
                                              style={{
                                                width: '27px',
                                                height: '27px',
                                                borderRadius: '50px',
                                                marginLeft: '15px',
                                                backgroundColor:
                                                  option.FontColor,
                                              }}
                                            >
                                              &nbsp;&nbsp;&nbsp;
                                            </span>
                                          </div>
                                          <div>{option.ThemeName}</div>
                                        </div>
                                      ),
                                    })
                                  )}
                                  labelChange={true}
                                  label={
                                    <p style={{ fontSize: '11px' }}>
                                      Overall Background
                                    </p>
                                  }
                                  className="field-DropDown-Selection"
                                  onChangeFunction={selectCategoryOverallColor}
                                  isOnchanges={
                                    dropdownCategoryOverallColor ? true : false
                                  }
                                  valueData={dropdownCategoryOverallColor}
                                />
                              </Form.Item>
                            </div>
                            <div className='addNewSalesFiledBTN' onClick={handlecategoryUploadOverallColor}>
                              Add
                              <IoMdAdd
                                className="plusOutlinedIcon"

                              />
                            </div>
                          </div>
                        </div>
                      ) : null}
                    </div>
                  </div>
                )}
              {ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
                SubCategoryCheckList?.length > 0 && (
                  <div className="Selection-Component-selectContainer">
                    <div className="Selection-Component-selectheadingMainDiv">
                      <span className="Selection-Component-selectheading">
                        Selected SubCategory:
                        <span style={{ color: '#009b00' }}>
                          <HiMenuAlt1 />  {SubCategoryCheckList[0]?.ComponentName}
                        </span>
                      </span>
                    </div>

                    <Checkbox.Group
                      style={{
                        width: '100%',
                      }}
                      onChange={SubCategorySelectlistonChange}
                      value={SelectedSubCategoryCheckValues}
                    >
                      <Row>
                        {SubCategoryCheckList[0]?.ComponentOptionsDetails?.map(
                          (value, key) => (
                            <Checkbox
                              style={{ padding: '12px' }}
                              value={value?.OptionId}
                              key={value?.OptionId}
                            >
                              {value?.OptionName}
                            </Checkbox>
                          )
                        )}
                      </Row>
                    </Checkbox.Group>
                    <div
                      className='SlecteCatDiv'
                    >
                      <div
                        className='SlecteCatDivSub2'
                      >
                        <div>
                          <Form.Item
                            name="FontSubcat"
                            rules={[
                              {
                                required: true,
                                message: 'Please Select Font',
                              },
                            ]}
                          >
                            <DropDowns
                              options={SubCatFontData?.map((option) => ({
                                value: option.FontId,
                                label: option.SessionFont,
                              }))}
                              label="Font"
                              onChangeFunction={selectFont1}
                              className="field-DropDown-Selection"
                              isOnchanges={selectedSubCatFont ? true : false}
                              valueData={selectedSubCatFont}
                            />
                          </Form.Item>
                        </div>
                        <div className='addNewSalesFiledBTN' onClick={SubcathandleUploadFonts}>
                          Add
                          <IoMdAdd
                            className="plusOutlinedIcon"
                            onClick={SubcathandleUploadFonts}
                          />
                          <DefaultModal
                            open={subCatModelopen}
                            title="Fonts"
                            footer={true}
                            children={
                              <Form form={Subform}>
                                <div className="fontInputs">
                                  <div>
                                    <Form.Item
                                      name="SubcategoryFont"
                                      rules={[
                                        {
                                          required: true,
                                          pattern: /^(?!\s*$).+/,
                                          message: 'Please Enter Font',
                                        },
                                        {
                                          validator: async (_, value) => {
                                            await validateSafeInput(value); // To block HTML tags & SQL keywords
                                            return Promise.resolve();
                                          },
                                        },
                                      ]}
                                    >
                                      <InputField
                                        field="SubcategoryFont"
                                        label="Font"
                                        className="Input"
                                        fieldState={true}
                                        fieldApi={true}
                                        autoComplete="off"
                                      />
                                    </Form.Item>
                                  </div>
                                </div>
                                <p style={{ color: 'red' }}>
                                  * Google Fonts Only
                                </p>
                              </Form>
                            }
                            handleCancel={SubcathandleCancel}
                            handleSubmit={SubCathandleSubmit}
                            buttonText="SAVE"
                          />
                        </div>
                      </div>
                      {SelectedSubCategoryCheckValues?.filter(
                        (item) =>
                          item ==
                          SubCategoryCheckList[0]?.ComponentOptionsDetails?.filter(
                            (item) => item.OptionName == 'Background'
                          )?.[0]?.OptionId
                      )?.[0] != undefined ? (
                        <div>
                          <div
                            style={{
                              display: 'flex',
                              gap: '1rem',
                              flexWrap: 'nowrap',
                            }}
                          >
                            <div className="SubCatColor">
                              <Form.Item
                                name="SubCatColor"
                                rules={[
                                  {
                                    required: true,
                                    message: 'Please Select Color',
                                  },
                                ]}
                              >
                                <DropDowns
                                  options={SubcatColorData?.map((option) => ({
                                    value: option.ColorId,
                                    label: (
                                      <div
                                        style={{
                                          display: 'flex',
                                          gap: '0.5rem',
                                        }}
                                      >
                                        <div
                                          style={{
                                            width: '27px',
                                            height: '27px',
                                            borderRadius:
                                              '25.774192810058594px',
                                            backgroundColor:
                                              option.BackgroundColor,
                                          }}
                                        >
                                          <span
                                            style={{
                                              width: '27px',
                                              height: '27px',
                                              borderRadius: '50px',
                                              marginLeft: '15px',
                                              backgroundColor: option.FontColor,
                                            }}
                                          >
                                            &nbsp;&nbsp;&nbsp;
                                          </span>
                                        </div>
                                        <div>{option.ThemeName}</div>
                                      </div>
                                    ),
                                  }))}
                                  labelChange={true}
                                  label="Color"
                                  className="field-DropDown-Selection"
                                  onChangeFunction={selectSubCategoryColor}
                                  isOnchanges={
                                    SelectedSubCatColor ? true : false
                                  }
                                  valueData={SelectedSubCatColor}
                                />
                              </Form.Item>
                            </div>
                            <div className='addNewSalesFiledBTN' onClick={SubhandleUploadColor}>
                              Add
                              <IoMdAdd
                                className="plusOutlinedIcon"
                                onClick={SubhandleUploadColor}
                              />
                            </div>
                          </div>
                        </div>
                      ) : null}
                      {SelectedSubCategoryCheckValues?.filter(
                        (item) =>
                          item ==
                          SubCategoryCheckList[0]?.ComponentOptionsDetails?.filter(
                            (item) => item.OptionName == 'OverallBackground'
                          )?.[0]?.OptionId
                      )?.[0] != undefined ? (
                        <div>
                          <Modal
                            open={SubcategoryUploadOverallColor}
                            title=" SubCategory Overall Background"
                            closeIcon={
                              <CloseOutlined
                                onClick={() => {
                                  setSubcategoryUploadOverallColor(false);
                                }}
                              />
                            }
                            width={400}
                            footer={null}
                          >
                            <div style={{ display: 'flex' }}>
                              <div
                                style={{
                                  display: 'flex',
                                  align: 'center',
                                  width: '60%',
                                  gap: '0.5rem',
                                  border: '1px solid black',
                                  borderRadius: '10px',
                                  padding: '10px',
                                }}
                              >
                                <p
                                  style={{ fontSize: '14px', fontWeight: 700 }}
                                >
                                  Selected Color:{' '}
                                </p>
                                <div
                                  style={{
                                    width: '35px',
                                    height: '23px',
                                    borderRadius: '5px',
                                    backgroundColor: SubcategoryOverallColor
                                      ? SubcategoryOverallColor
                                      : null,
                                  }}
                                ></div>
                              </div>
                              <div className="hex-input">
                                <InputField
                                  prefix="#"
                                  value={subCatOverallHex}
                                  inputMode="numeric"
                                  maxLength={8}
                                  onChange={handleSubCatOverallHexCode}
                                />
                              </div>
                            </div>

                            <SwatchesPicker
                              onChange={handleSubcategoryOverallColorChange}
                            />

                            <div>
                              <button
                                className="colorBtn"
                                onClick={handleSubcategoryOverallColorSubmit}
                              >
                                SAVE
                              </button>
                            </div>
                          </Modal>
                          <div
                            style={{
                              display: 'flex',
                              gap: '1rem',
                              flexWrap: 'nowrap',
                            }}
                          >
                            <div className="SubCatColor">
                              <Form.Item
                                name="SubCatOverallColor"
                                rules={[
                                  {
                                    required: true,
                                    message: 'Please Select Color',
                                  },
                                ]}
                              >
                                <DropDowns
                                  options={SubcategoryOverallColorsList?.map(
                                    (option) => ({
                                      value: option.ColorId,
                                      label: (
                                        <div
                                          style={{
                                            display: 'flex',
                                            gap: '0.5rem',
                                          }}
                                        >
                                          <div
                                            style={{
                                              width: '27px',
                                              height: '27px',
                                              borderRadius:
                                                '25.774192810058594px',
                                              backgroundColor:
                                                option.BackgroundColor,
                                            }}
                                          >
                                            <span
                                              style={{
                                                width: '27px',
                                                height: '27px',
                                                borderRadius: '50px',
                                                marginLeft: '15px',
                                                backgroundColor:
                                                  option.FontColor,
                                              }}
                                            >
                                              &nbsp;&nbsp;&nbsp;
                                            </span>
                                          </div>
                                          <div>{option.ThemeName}</div>
                                        </div>
                                      ),
                                    })
                                  )}
                                  labelChange={true}
                                  label={
                                    <p style={{ fontSize: '11px' }}>
                                      Overall Background
                                    </p>
                                  }
                                  className="field-DropDown-Selection"
                                  onChangeFunction={
                                    selectSubcategoryOverallColor
                                  }
                                  isOnchanges={
                                    dropdownSubcategoryOverallColor
                                      ? true
                                      : false
                                  }
                                  valueData={dropdownSubcategoryOverallColor}
                                />
                              </Form.Item>
                            </div>
                            <div className='addNewSalesFiledBTN' onClick={handleSubcategoryUploadOverallColor}>
                              Add
                              <IoMdAdd
                                className="plusOutlinedIcon"
                                onClick={handleSubcategoryUploadOverallColor}
                              />
                            </div>
                          </div>
                        </div>
                      ) : null}
                    </div>
                    <Modal
                      open={UploadColorsubcat}
                      title="Colors"
                      closeIcon={<CloseOutlined onClick={SubCatonCancel2} />}
                      width={400}
                      footer={null}
                    >
                      <div>
                        <div className="color-hex-select">
                          <RadioGrpButton
                            content={[
                              { value: 'Y', label: 'Background' },
                              { value: 'N', label: 'Font' },
                            ]}
                            defaultSelect={SubCatColorType}
                            fieldState={true}
                            onSelectFuntion={(e) => openColour2(e)}
                          />
                          <div className="hex-input">
                            <InputField
                              prefix="#"
                              value={
                                SubCatColorType?.toLowerCase() === 'y'
                                  ? subCatBGHex
                                  : SubCatColorType?.toLowerCase() === 'n'
                                    ? subCatFontHex
                                    : ''
                              }
                              inputMode="numeric"
                              maxLength={8}
                              onChange={handleSubCatHexChange}
                            />
                          </div>
                        </div>

                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '1rem',
                            justifyContent: 'center',
                            marginTop: '10px',
                            borderRadius: '10px',
                            border: '1px solid #000',
                            padding: '10px',
                            width: '110%',
                          }}
                        >
                          <div
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              gap: '0.5rem',
                            }}
                          >
                            <p style={{ fontSize: '10px', fontWeight: 700 }}>
                              {' '}
                              Selected Background Color :{' '}
                            </p>
                            <div
                              style={{
                                width: '35px',
                                height: '23px',
                                borderRadius: '5px',
                                backgroundColor: SubcatbackgroundColor
                                  ? SubcatbackgroundColor
                                  : null,
                              }}
                            ></div>
                            <>|</>
                          </div>
                          <div
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              gap: '0.5rem',
                            }}
                          >
                            <p style={{ fontSize: '10px', fontWeight: 700 }}>
                              {' '}
                              Selected Font Color :{' '}
                            </p>
                            <div
                              style={{
                                width: '35px',
                                height: '23px',
                                borderRadius: '5px',
                                backgroundColor: SubcatfontColor
                                  ? SubcatfontColor
                                  : null,
                              }}
                            ></div>
                          </div>
                        </div>
                      </div>

                      <SwatchesPicker onChange={handleColorChange2} />

                      <div>
                        <button
                          className="colorBtn"
                          onClick={handleColorSubmit2}
                        >
                          SAVE
                        </button>
                      </div>
                    </Modal>
                  </div>
                )}
              {CardCheckList?.length > 0 &&
                ShowDropDownData?.find((a) => a.OptionName === 'Card') && (
                  <div className="Selection-Component-selectContainer">
                    <div className="Selection-Component-selectheadingMainDiv">
                      <span className="Selection-Component-selectheading">
                        Selected Card:
                        <span style={{ color: '#009b00' }}>
                          <LuCreditCard />  {CardCheckList[0]?.ComponentName}
                        </span>
                      </span>
                    </div>

                    <Checkbox.Group
                      style={{
                        width: '100%',
                      }}
                      onChange={CardSelectlistonChange}
                      value={SelectedCardCheckValues}
                    >
                      <Row>
                        {CardCheckList[0]?.ComponentOptionsDetails?.map(
                          (value, key) => (
                            <Checkbox
                              style={{ padding: '12px' }}
                              value={value?.OptionId}
                              key={value?.OptionId}
                              onClick={() =>
                                CardOption(value?.OptionName, value?.OptionId)
                              }
                              disabled={
                                !SmallImage
                                  ? SelectAllPositionImage?.includes(
                                    value?.OptionId
                                  )
                                    ? true
                                    : false
                                  : SelectfliterPositionImage?.length < 4
                                    ? SelectfliterPositionImage.includes(
                                      value?.OptionId
                                    )
                                      ? true
                                      : false
                                    : ''
                              }
                            >
                              {value.OptionName}
                            </Checkbox>
                          )
                        )}
                      </Row>
                    </Checkbox.Group>
                    <div
                      className='SlecteCatDiv'
                    >
                      <div
                        className='SlecteCatDivSub2'
                      >
                        <div>
                          <Form.Item
                            name="FontCard"
                            rules={[
                              {
                                required: true,
                                message: 'Please Select Font',
                              },
                            ]}
                          >
                            <p className='Selection-Component-SubHeading'>
                              Card Font
                            </p>
                            <DropDowns
                              options={CardFontData?.map((option) => ({
                                value: option.FontId,
                                label: option.SessionFont,
                              }))}
                              label="Font"
                              onChangeFunction={selectFont2}
                              className="field-DropDown-Selection"
                              isOnchanges={selectedCardFont ? true : false}
                              valueData={selectedCardFont}
                            />
                          </Form.Item>
                        </div>
                        <div className='addNewSalesFiledBTN' onClick={CardhandleUploadFonts}>
                          Add
                          <IoMdAdd
                            className="plusOutlinedIcon"
                            onClick={CardhandleUploadFonts}
                          />
                          <DefaultModal
                            open={CardModelopen}
                            title="Fonts"
                            footer={true}
                            children={
                              <Form form={Cardform}>
                                <div className="fontInputs">
                                  <div>
                                    <Form.Item
                                      name="CardFont"
                                      rules={[
                                        {
                                          required: true,
                                          pattern: /^(?!\s*$).+/,
                                          message: 'Please Enter Font',
                                        },
                                        {
                                          validator: async (_, value) => {
                                            await validateSafeInput(value); // To block HTML tags & SQL keywords
                                            return Promise.resolve();
                                          },
                                        },
                                      ]}
                                    >
                                      <InputField
                                        field="CardFont"
                                        label="Font"
                                        className="Input"
                                        fieldState={true}
                                        fieldApi={true}
                                        autoComplete="off"
                                      />
                                    </Form.Item>
                                  </div>
                                </div>
                                <p style={{ color: 'red' }}>
                                  * Google Fonts Only
                                </p>
                              </Form>
                            }
                            handleCancel={cardcathandleCancel}
                            handleSubmit={CardhandleSubmit}
                            buttonText="SAVE"
                          />
                        </div>
                      </div>

                      {SelectedCardCheckValues?.filter(
                        (item) =>
                          item ==
                          CardCheckList[0]?.ComponentOptionsDetails?.filter(
                            (item) => item.OptionName == 'Background'
                          )?.[0]?.OptionId
                      )?.[0] != undefined ? (
                        <div>
                          <div
                            style={{
                              display: 'flex',
                              gap: '1rem',
                              flexWrap: 'nowrap',
                              alignItems: "center"
                            }}
                          >
                            <div className="colorDropdown">
                              <Form.Item
                                name="CardColor"
                                rules={[
                                  {
                                    required: true,
                                    message: 'Please Select Color',
                                  },
                                ]}
                              >
                                <p className='Selection-Component-SubHeading'>
                                  Card Background Color
                                </p>
                                <DropDowns
                                  options={CardColorData?.map((option) => ({
                                    value: option.ColorId,
                                    label: (
                                      <div
                                        style={{
                                          display: 'flex',
                                          gap: '0.5rem',
                                        }}
                                      >
                                        <div
                                          style={{
                                            width: '27px',
                                            height: '27px',
                                            borderRadius:
                                              '25.774192810058594px',
                                            backgroundColor:
                                              option.BackgroundColor,
                                          }}
                                        >
                                          <span
                                            style={{
                                              width: '27px',
                                              height: '27px',
                                              borderRadius: '50px',
                                              marginLeft: '15px',
                                              backgroundColor: option.FontColor,
                                            }}
                                          >
                                            &nbsp;&nbsp;&nbsp;
                                          </span>
                                        </div>
                                        <div>{option.ThemeName}</div>
                                      </div>
                                    ),
                                  }))}
                                  labelChange={true}
                                  label="Color"
                                  className="field-DropDown-Selection"
                                  onChangeFunction={selectCardColor}
                                  isOnchanges={SelectedCardColor ? true : false}
                                  valueData={SelectedCardColor}
                                />
                              </Form.Item>
                            </div>
                            <div className='addNewSalesFiledBTN' onClick={handleUploadColorselectCard}>
                              Add
                              <IoMdAdd
                                className="plusOutlinedIcon"

                              />
                            </div>
                          </div>
                        </div>
                      ) : null}
                      {SelectedCardCheckValues?.filter(
                        (item) =>
                          item ==
                          CardCheckList[0]?.ComponentOptionsDetails?.filter(
                            (item) => item.OptionName == 'OverallBackground'
                          )?.[0]?.OptionId
                      )?.[0] != undefined ? (
                        <div>
                          <Modal
                            open={cardUploadOverallColor}
                            title="Card Overall Background Color"
                            closeIcon={
                              <CloseOutlined
                                onClick={() => {
                                  setcardUploadOverallColor(false);
                                }}
                              />
                            }
                            width={400}
                            footer={null}
                          >
                            <div style={{ display: 'flex' }}>
                              <div
                                style={{
                                  display: 'flex',
                                  align: 'center',
                                  width: '60%',
                                  gap: '0.5rem',
                                  border: '1px solid black',
                                  borderRadius: '10px',
                                  padding: '10px',
                                }}
                              >
                                <p
                                  style={{ fontSize: '14px', fontWeight: 700 }}
                                >
                                  Selected Color:{' '}
                                </p>
                                <div
                                  style={{
                                    width: '35px',
                                    height: '23px',
                                    borderRadius: '5px',
                                    backgroundColor: CardOverallColor
                                      ? CardOverallColor
                                      : null,
                                  }}
                                ></div>
                              </div>
                              <div className="hex-input">
                                <InputField
                                  prefix="#"
                                  value={cardOverallHex}
                                  inputMode="numeric"
                                  maxLength={8}
                                  onChange={handleCardOverallHexCode}
                                />
                              </div>
                            </div>

                            <SwatchesPicker
                              onChange={handleCardOverallColorChange}
                            />

                            <div>
                              <button
                                className="colorBtn"
                                onClick={handleCardOverallColorSubmit}
                              >
                                SAVE
                              </button>
                            </div>
                          </Modal>

                          <div
                            style={{
                              display: 'flex',
                              gap: '1rem',
                              flexWrap: 'nowrap',
                            }}
                          >
                            <div className="colorDropdown">
                              <Form.Item
                                name="CardOverallColor"
                                rules={[
                                  {
                                    required: true,
                                    message: 'Please Select Color',
                                  },
                                ]}
                              >
                                <p className='Selection-Component-SubHeading'>
                                  Card Overall-Background
                                </p>
                                <DropDowns
                                  options={cardOverallColorsList?.map(
                                    (option) => ({
                                      value: option.ColorId,
                                      label: (
                                        <div
                                          style={{
                                            display: 'flex',
                                            gap: '0.5rem',
                                          }}
                                        >
                                          <div
                                            style={{
                                              width: '27px',
                                              height: '27px',
                                              borderRadius:
                                                '25.774192810058594px',
                                              backgroundColor:
                                                option.BackgroundColor,
                                            }}
                                          >
                                            <span
                                              style={{
                                                width: '27px',
                                                height: '27px',
                                                borderRadius: '50px',
                                                marginLeft: '15px',
                                                backgroundColor:
                                                  option.FontColor,
                                              }}
                                            >
                                              &nbsp;&nbsp;&nbsp;
                                            </span>
                                          </div>
                                          <div>{option.ThemeName}</div>
                                        </div>
                                      ),
                                    })
                                  )}
                                  labelChange={true}
                                  label={
                                    <p style={{ fontSize: '11px' }}>
                                      Overall Background
                                    </p>
                                  }
                                  className="field-DropDown-Selection"
                                  onChangeFunction={selectCardOverallColor}
                                  isOnchanges={
                                    dropdownCardOverallColor ? true : false
                                  }
                                  valueData={dropdownCardOverallColor}
                                />
                              </Form.Item>
                            </div>
                            <div className='addNewSalesFiledBTN' onClick={handlecardUploadOverallColor}>
                              Add
                              <IoMdAdd
                                className="plusOutlinedIcon"

                              />
                            </div>
                          </div>
                        </div>
                      ) : null}
                    </div>
                  </div>
                )}

              <Modal
                open={UploadColorselectcard}
                title="Colors"
                closeIcon={<CloseOutlined onClick={CardonCancel3} />}
                width={400}
                footer={null}
              >
                <div>
                  <div className="color-hex-select">
                    <RadioGrpButton
                      content={[
                        { value: 'Y', label: 'Background' },
                        { value: 'N', label: 'Font' },
                      ]}
                      defaultSelect={CardColorType}
                      fieldState={true}
                      onSelectFuntion={(e) => openColour3(e)}
                    />
                    <div className="hex-input">
                      <InputField
                        prefix="#"
                        value={
                          CardColorType?.toLowerCase() === 'y'
                            ? cardBGHex
                            : CardColorType?.toLowerCase() === 'n'
                              ? cardFontHex
                              : ''
                        }
                        inputMode="numeric"
                        maxLength={8}
                        onChange={handleCardHexChange}
                      />
                    </div>
                  </div>

                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      gap: '1rem',
                      justifyContent: 'center',
                      marginTop: '10px',
                      borderRadius: '10px',
                      border: '1px solid #000',
                      padding: '10px',
                      width: '110%',
                    }}
                  >
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '0.5rem',
                      }}
                    >
                      <p style={{ fontSize: '10px', fontWeight: 700 }}>
                        {' '}
                        Selected Background Color :{' '}
                      </p>
                      <div
                        style={{
                          width: '35px',
                          height: '23px',
                          borderRadius: '5px',
                          backgroundColor: CardbackgroundColor
                            ? CardbackgroundColor
                            : null,
                        }}
                      ></div>
                      <>|</>
                    </div>
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '0.5rem',
                      }}
                    >
                      <p style={{ fontSize: '10px', fontWeight: 700 }}>
                        {' '}
                        Selected Font Color :{' '}
                      </p>
                      <div
                        style={{
                          width: '35px',
                          height: '23px',
                          borderRadius: '5px',
                          backgroundColor: CardfontColor ? CardfontColor : null,
                        }}
                      ></div>
                    </div>
                  </div>
                </div>

                <SwatchesPicker onChange={handleColorChange3} />

                <div>
                  <button className="colorBtn" onClick={handleColorSubmit3}>
                    SAVE
                  </button>
                </div>
              </Modal>

              {BillTableCheckList?.length > 0 &&
                ShowDropDownData?.find((a) => a.OptionName === 'Billing') && (
                  <div className="Selection-Component-selectContainer">
                    <div className="Selection-Component-selectheadingMainDiv">
                      <span className="Selection-Component-selectheading">
                        Selected BillTable:{' '}
                        <span style={{ color: '#009b00' }}>
                          <IoReceiptOutline />  {BillTableCheckList[0]?.ComponentName}
                        </span>
                      </span>
                    </div>

                    <Checkbox.Group
                      style={{
                        width: '100%',
                      }}
                      onChange={BillTableSelectlistonChange}
                      value={SelectedBillTableCheckValues}
                    >
                      <Row>
                        {BillTableCheckList[0]?.ComponentOptionsDetails?.map(
                          (value, key) => (
                            <Checkbox
                              style={{ padding: '12px' }}
                              value={value?.OptionId}
                              // onClick={() => Navholdoption(value.OptionName)}
                              key={value?.OptionId}
                              disabled={
                                value.OptionName === 'Hold' && HoldButton
                                  ? true
                                  : value.OptionName === 'AddCustomer' &&
                                    AddCustomerButton
                                    ? true
                                    : value.OptionName === 'Item'
                                      ? true
                                      : value.OptionName === 'UnpaidBill' &&
                                        !DineInChecked
                                        ? true
                                        : false
                              }
                            >
                              {value.OptionName}
                            </Checkbox>
                          )
                        )}
                      </Row>
                    </Checkbox.Group>
                    <div
                      className='SlecteCatDiv'
                    >
                      <div
                        className='SlecteCatDivSub2'
                      >
                        <div>
                          <Form.Item
                            name="FontTable"
                            rules={[
                              {
                                required: true,
                                message: 'Please Select Font',
                              },
                            ]}
                          >
                            <p className='Selection-Component-SubHeading'>
                              BillTable Font
                            </p>
                            <DropDowns
                              options={TableFontData?.map((option) => ({
                                value: option.FontId,
                                label: option.SessionFont,
                              }))}
                              label="Font"
                              onChangeFunction={selectFont3}
                              className="field-DropDown-Selection"
                              isOnchanges={selectedTableFont ? true : false}
                              valueData={selectedTableFont}
                            />
                          </Form.Item>
                        </div>
                        <div className='addNewSalesFiledBTN' onClick={TablehandleUploadFonts}>
                          Add
                          <IoMdAdd
                            className="plusOutlinedIcon"

                          />
                          
                        </div>
                        <DefaultModal
                            open={TableModelopen}
                            title="Fonts"
                            footer={true}
                            children={
                              <Form form={Tableform}>
                                <div className="fontInputs">
                                  <div>
                                    <Form.Item
                                      name="TableFont"
                                      rules={[
                                        {
                                          required: true,
                                          pattern: /^(?!\s*$).+/,
                                          message: 'Please Enter Font',
                                        },
                                        {
                                          validator: async (_, value) => {
                                            await validateSafeInput(value); // To block HTML tags & SQL keywords
                                            return Promise.resolve();
                                          },
                                        },
                                      ]}
                                    >
                                      <InputField
                                        field="TableFont"
                                        label="Font"
                                        className="Input"
                                        fieldState={true}
                                        fieldApi={true}
                                        autoComplete="off"
                                      />
                                    </Form.Item>
                                  </div>
                                </div>
                                <p style={{ color: 'red' }}>
                                  * Google Fonts Only
                                </p>
                              </Form>
                            }
                            handleCancel={TablehandleCancel}
                            handleSubmit={TablehandleSubmit}
                            buttonText="SAVE"
                          />
                      </div>
                      {SelectedBillTableCheckValues?.filter(
                        (item) =>
                          item ==
                          BillTableCheckList[0]?.ComponentOptionsDetails?.filter(
                            (item) => item.OptionName == 'Background'
                          )?.[0]?.OptionId
                      )?.[0] != undefined ? (
                        <div>
                          <div
                            style={{
                              display: 'flex',
                              gap: '1rem',
                              flexWrap: 'nowrap',
                              alignItems: "center"
                            }}
                          >
                            <div className="colorDropdown">
                              <Form.Item
                                name="TableColor"
                                rules={[
                                  {
                                    required: true,
                                    message: 'Please Select Color',
                                  },
                                ]}
                              >
                                <p className='Selection-Component-SubHeading'>
                                  BillTable Background Color
                                </p>
                                <DropDowns
                                  options={TableColorData?.map((option) => ({
                                    value: option.ColorId,
                                    label: (
                                      <div
                                        style={{
                                          display: 'flex',
                                          gap: '0.5rem',
                                        }}
                                      >
                                        <div
                                          style={{
                                            width: '27px',
                                            height: '27px',
                                            borderRadius:
                                              '25.774192810058594px',
                                            backgroundColor:
                                              option.BackgroundColor,
                                          }}
                                        >
                                          <span
                                            style={{
                                              width: '27px',
                                              height: '27px',
                                              borderRadius: '50px',
                                              marginLeft: '15px',
                                              backgroundColor: option.FontColor,
                                            }}
                                          >
                                            &nbsp;&nbsp;&nbsp;
                                          </span>
                                        </div>
                                        <div>{option.ThemeName}</div>
                                      </div>
                                    ),
                                  }))}
                                  labelChange={true}
                                  label="Color"
                                  className="field-DropDown-Selection"
                                  onChangeFunction={selectTableColor}
                                  isOnchanges={
                                    SelectedTableColor ? true : false
                                  }
                                  valueData={SelectedTableColor}
                                />
                              </Form.Item>
                            </div>
                            <div className='addNewSalesFiledBTN' onClick={BillhandleUploadColor}>
                              Add
                              <IoMdAdd
                                className="plusOutlinedIcon"

                              />
                            </div>
                          </div>
                        </div>
                      ) : null}
                      {SelectedBillTableCheckValues?.filter(
                        (item) =>
                          item ==
                          BillTableCheckList[0]?.ComponentOptionsDetails?.filter(
                            (item) => item.OptionName == 'OverallBackground'
                          )?.[0]?.OptionId
                      )?.[0] != undefined ? (
                        <div>
                          <Modal
                            open={BillingUploadOverallColor}
                            title="BillTable Overall Background Color"
                            closeIcon={
                              <CloseOutlined
                                onClick={() => {
                                  setBillingUploadOverallColor(false);
                                }}
                              />
                            }
                            width={400}
                            footer={null}
                          >
                            <div>
                              <div
                                style={{
                                  display: 'flex',
                                  align: 'center',
                                  width: '60%',
                                  gap: '0.5rem',
                                  border: '1px solid black',
                                  borderRadius: '10px',
                                  padding: '10px',
                                }}
                              >
                                <p
                                  style={{ fontSize: '14px', fontWeight: 700 }}
                                >
                                  Selected Color:{' '}
                                </p>
                                <div
                                  style={{
                                    width: '35px',
                                    height: '23px',
                                    borderRadius: '5px',
                                    backgroundColor: BillingOverallColor
                                      ? BillingOverallColor
                                      : null,
                                  }}
                                ></div>
                              </div>
                              <div className="hex-input">
                                <InputField
                                  prefix="#"
                                  value={billingOverallHex}
                                  inputMode="numeric"
                                  maxLength={8}
                                  onChange={handleBillingOverallHexCode}
                                />
                              </div>
                            </div>

                            <SwatchesPicker
                              onChange={handleBillingOverallColorChange}
                            />

                            <div>
                              <button
                                className="colorBtn"
                                onClick={handleBillingOverallColorSubmit}
                              >
                                SAVE
                              </button>
                            </div>
                          </Modal>
                          <div
                            style={{
                              display: 'flex',
                              gap: '1rem',
                              flexWrap: 'nowrap',
                              alignItems: "center"
                            }}
                          >
                            <div className="colorDropdown">
                              <Form.Item
                                name="BillingOverallColor"
                                rules={[
                                  {
                                    required: true,
                                    message: 'Please Select Color',
                                  },
                                ]}
                              >
                                <p className='Selection-Component-SubHeading'>
                                  BillTable Overall-Background
                                </p>
                                <DropDowns
                                  options={BillingOverallColorsList?.map(
                                    (option) => ({
                                      value: option.ColorId,
                                      label: (
                                        <div
                                          style={{
                                            display: 'flex',
                                            gap: '0.5rem',
                                          }}
                                        >
                                          <div
                                            style={{
                                              width: '27px',
                                              height: '27px',
                                              borderRadius:
                                                '25.774192810058594px',
                                              backgroundColor:
                                                option.BackgroundColor,
                                            }}
                                          >
                                            <span
                                              style={{
                                                width: '27px',
                                                height: '27px',
                                                borderRadius: '50px',
                                                marginLeft: '15px',
                                                backgroundColor:
                                                  option.FontColor,
                                              }}
                                            >
                                              &nbsp;&nbsp;&nbsp;
                                            </span>
                                          </div>
                                          <div>{option.ThemeName}</div>
                                        </div>
                                      ),
                                    })
                                  )}
                                  labelChange={true}
                                  label={
                                    <p style={{ fontSize: '11px' }}>
                                      Overall Background
                                    </p>
                                  }
                                  className="field-DropDown-Selection"
                                  onChangeFunction={selectBillingOverallColor}
                                  isOnchanges={
                                    dropdownBillingOverallColor ? true : false
                                  }
                                  valueData={dropdownBillingOverallColor}
                                />
                              </Form.Item>
                            </div>
                            <div className='addNewSalesFiledBTN' onClick={handleBillingUploadOverallColor}>
                              Add
                              <IoMdAdd
                                className="plusOutlinedIcon"
                                onClick={handleBillingUploadOverallColor}
                              />
                            </div>
                          </div>
                        </div>
                      ) : null}
                    </div>
                    <Modal
                      open={BillUploadColor}
                      title="Colors"
                      closeIcon={<CloseOutlined onClick={TableonCancel4} />}
                      width={400}
                      footer={null}
                    >
                      <div>
                        <div className="color-hex-select">
                          <RadioGrpButton
                            content={[
                              { value: 'Y', label: 'Background' },
                              { value: 'N', label: 'Font' },
                            ]}
                            defaultSelect={TableColorType}
                            fieldState={true}
                            onSelectFuntion={(e) => openColour4(e)}
                          />
                          <div className="hex-input">
                            <InputField
                              prefix="#"
                              value={
                                TableColorType?.toLowerCase() === 'y'
                                  ? tableBGHex
                                  : TableColorType?.toLowerCase() === 'n'
                                    ? tableFontHex
                                    : ''
                              }
                              inputMode="numeric"
                              maxLength={8}
                              onChange={handleTableHexChange}
                            />
                          </div>
                        </div>

                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'row',
                            gap: '1rem',
                            justifyContent: 'center',
                            marginTop: '10px',
                            borderRadius: '10px',
                            border: '1px solid #000',
                            padding: '10px',
                            width: '110%',
                          }}
                        >
                          <div
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              gap: '0.5rem',
                            }}
                          >
                            <p style={{ fontSize: '10px', fontWeight: 700 }}>
                              {' '}
                              Selected Background Color :{' '}
                            </p>
                            <div
                              style={{
                                width: '35px',
                                height: '23px',
                                borderRadius: '5px',
                                backgroundColor: TablebackgroundColor
                                  ? TablebackgroundColor
                                  : null,
                              }}
                            ></div>
                            <>|</>
                          </div>
                          <div
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              gap: '0.5rem',
                            }}
                          >
                            <p style={{ fontSize: '10px', fontWeight: 700 }}>
                              {' '}
                              Selected Font Color :{' '}
                            </p>
                            <div
                              style={{
                                width: '35px',
                                height: '23px',
                                borderRadius: '5px',
                                backgroundColor: TablefontColor
                                  ? TablefontColor
                                  : null,
                              }}
                            ></div>
                          </div>
                        </div>
                      </div>

                      <SwatchesPicker onChange={handleColorChange4} />

                      <div>
                        <button
                          className="colorBtn"
                          onClick={handleColorSubmit4}
                        >
                          SAVE
                        </button>
                      </div>
                    </Modal>
                  </div>
                )}
            </div>
          </div>
          {!(
            activeTheme === 'default' && Object.keys(templateData)?.length == 0
          ) &&
            !FirstOnClick && (
              <div className="SelectComp-SubmitButton">
                <Buttons
                  buttonText="Submit"
                  color="901D77"
                  disabled={
                    addnewAccess &&
                    Object.keys(templateData)?.length > 0 &&
                    !FirstOnClick
                  }
                  // disabled={!isFormValid ||
                  //   (UserType === "Super Admin" || UserType === "Admin") ? false : !((empData?.AddAccess === "Y" || SAAccessCommonMaster?.AddAccess === "Y") ||
                  //     (
                  //       (empData?.UpdateAccess === "Y" || SAAccessCommonMaster?.UpdateAccess === "Y") &&
                  //       Object.keys(templateData)?.length > 0
                  //     ))}
                  icon={<ArrowRightOutlined color='#fff' />}
                  htmlType={true}
                />
              </div>
            )}
        </Form>
      </div>
    </>
  );
});

export default SelectionComponent;