import React, { useCallback, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { Tooltip, Badge, Popconfirm, DatePicker } from 'antd';
import moment from 'moment';
import { isMobile } from 'react-device-detect';
import BSNavbar1 from '../../Components/BSNavbar/BSNavbar1';
import BSNavbar2 from '../../Components/BSNavbar/BSNavbar2';
import BSBillingTable1 from '../../Components/BSBillingTables/BSBillingTable1/BSBTOverall1';
import BSBillingTable2 from '../../Components/BSBillingTables/BSBillingTable2/BSBillingTable2';
import BSBillingTable3 from '../../Components/BSBillingTables/BSBillingTable3/BSBillingTable3overall';
import BSBillingTable4 from '../../Components/BSBillingTables/BSBillingTable4/BSBillingTable4Full';
import BSBillingTable5 from '../../Components/BSBillingTables/BSBillingTable5/BSBillingTable5';
import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BSBTOverall6';
import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
import { ArrowUpOutlined } from '@ant-design/icons';
import BSItemCard from '../../Components/BSItemCards/BSItemCard';
import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
import SubCategoryVertical from '../../Components/BSSubCategories/BSSubCategoryVertical';
import { dynamicComponentProps } from '../DynamicComponentProps.js';
import {
  SelectedGlobalLayoutColorDetail,
  SelectedGlobalCatgColorDetail,
  SelectedGlobalCardColorDetail,
  SelectedGlobalSubCatgColorDetail,
  GlobalPricingAppPricingName,
  StoredSessionData,
  getTemplateData,
  SelectedGlobalBillingColorDetail,
} from '../../../../Features/ThemeChange/ThemeChange';
import '../../../../Styles/BookingScreen/Template/BSLayout1/BSLayout1.scss';
import {
  GlobalSalesDetailData,
  getSalesDetailData,
  GlobalCombosearch,
  GlobalOrderCardDetails,
  GlobalOrderStatus,
  PreferenceData,
  GlobalAppExpDateData,
  GlobalBtoBQuickProductTransfer,
  GlobalOtherSevices,
} from '../../../../Features/BookingScreen/BookingData/BookingData.js';
import { getSession } from '../../../../Services/Others.js';
import { Messages } from '../../../../Components/Notifications/Messages.jsx';
import BSKioskCounterPayment from '../../Components/UtillComponents/BSKioskCounterPayment.jsx';
import {
  getKioskDatas,
  globalKioskSalesCount,
} from '../../../../Features/Kiosk/kiosk.js';
import SalesCountComponent from '../SalesCountComponent.jsx';
import PozoKioskIcon from '../../Components/UtillComponents/Pozo retail icons/PozoKioskIcon.jsx';
import {
  GLobalSadminUserPin,
  putSadminUserExit,
  checkSession,
  ApplicationPreferences,
} from '../../../../Features/BrachLogin/BranchLogin';
import SAdminUserNotification from '../../Components/BookingFunctionality/SAdminUserNotification.jsx';
import {
  getBookingStatus,
  GlobalBookingStatus,
} from '../../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip.jsx';
import RetailBookingClosing from '../RetailBookingClose.jsx';
import { PutBookingClose } from '../../../../Features/BookingScreen/RetailBookingClose.js';
import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx';
import ListOfSalesInvoices from '../../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
import BSEwayBillicon from '../../Components/UtillComponents/BSEwayBillicon.jsx';
import BSComboItemCard from '../../Components/BSItemCards/BSComboItemCard.jsx';
import BranchTransferComponent from '../../Components/UtillComponents/BSQuickBranchToBranchTransferComponent.jsx';
import BSExpireProductsList from '../../Components/UtillComponents/BSExpireProductsList.jsx';

import BSOtherServiceItemCard from '../../Components/BSItemCards/BSOtherServiceItemCard.jsx';
import BSOtherServicesHorizontalcat from '../../Components/BSCategories/BSOtherServicesHorizontalcat';
import BSNavbar3 from '../../Components/BSNavbar/BSNavbar3.jsx';
import SalesCountForStandard from '../SalesCountForStandard.jsx';
import StandardTable from '../../Components/BSBillingTables/StandardTable/StandardTable.jsx';
import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
import dayjs from 'dayjs';
import BsBookingitemCard from '../../Components/BSItemCards/BsBookingitemCard.jsx';
import { CiShop } from 'react-icons/ci';
import BranchName from '../BranchName.jsx';
import ComboSalesBillTable from '../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx';

const subDirectory = import.meta.env.BASE_URL;
const commonDirectory = import.meta.env.COMMON_BASE_URL;

const BSLayout1 = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { selectedDate, setSelectedDate } = useDateStore();
  const SessionData = useSelector(StoredSessionData);
  const AppId = SessionData?.AppId;
  const CompId = SessionData?.CompId;
  const BranchId = SessionData?.BranchId;
  const UserId = SessionData?.UserId;
  const UserType = SessionData?.UserType;
  const AppName = SessionData?.AppName;

  const GlobalLayoutColorDetail = useSelector(SelectedGlobalLayoutColorDetail);
  const GlobalsalesDetailData = useSelector(GlobalSalesDetailData);
  const SelectedCatgColor = useSelector(SelectedGlobalCatgColorDetail);
  const SelectedCardColor = useSelector(SelectedGlobalCardColorDetail);
  const SelectedSubCatgColor = useSelector(SelectedGlobalSubCatgColorDetail);
  const SettingDataSelector = useSelector(PreferenceData);
  const badgeCount = useSelector(globalKioskSalesCount);
  const Comboglobal = useSelector(GlobalCombosearch);
  const BSLayout1Data = useSelector(getTemplateData);
  const OrderStatus = useSelector(GlobalOrderStatus);
  const BookingStatus = useSelector(GlobalBookingStatus);
  const tableData = useSelector(GlobalOrderCardDetails);
  const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
  const SAdminuserPin = useSelector(GLobalSadminUserPin);
  const AppExpDate = useSelector(GlobalAppExpDateData);
  const { action, selectedProducts } = useSelector(
    GlobalBtoBQuickProductTransfer
  );

  const OtherServicesglobal = useSelector(GlobalOtherSevices);

  const CheckBookingStatus =
    BookingStatus?.find((item) => item.ScreenType === 'Booking')
      ?.ScreenStatus ?? 'Open';
  const BookingNavbar = BSLayout1Data?.BookingNavbar?.[0];
  const BookingCategory = BSLayout1Data?.BookingCategory;
  const BookingSubCategory = BSLayout1Data?.BookingSubCategory;
  const BookingCard = BSLayout1Data?.BookingCard;
  const BookingBilling = BSLayout1Data?.BookingBilling?.[0];
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  // const [AppExpDate, setAppExpDate] = useState(0);
  const [screenHeight, setScreenHeight] = useState(window.innerHeight);
  const [Kioskopen, setKioskopen] = useState(false);
  const [ListOfInvoices, setListOfInvoices] = useState(false);

  const SelectedBillColor = useSelector(SelectedGlobalBillingColorDetail);

  const currentDateValue = moment().format('YYYY-MM-DD HH:mm:ss');
  const [count, setcount] = useState(0);
  const [popOverOpen, setPopOverOpen] = useState(false);
  const appPreferences = useSelector(ApplicationPreferences);
  const salespagefields = appPreferences?.find(
    (pref) => pref?.PreferredCatName === 'Sales Page Fields'
  )?.PreferenceCatDetails;
  const AvailableDate = salespagefields?.find(
    (type) =>
      type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
      type?.PreferredStatus === 'Y'
  );

  const commonModulePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Common Module'
  )?.PreferenceCatDetails;
  const sportsAppPreference = commonModulePreference?.find(
    (preference) =>
      preference?.PreferredSubCatName === 'SportsApp' &&
      preference?.PreferredStatus == 'Y'
  );
  const [BookingModalOpen, setBookingModalOpen] = useState(false);
  const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
    (i) => i.SettingIdName === 'DineIn'
  )?.[0];
  let containerHeight = isMobile
    ? AppExpDate?.RemainingDays <= 7
      ? '575px'
      : '595px'
    : UserType != 'Super Admin' &&
        UserType != 'Super Admin User' &&
        AppExpDate?.RemainingDays <= 7
      ? '96vh'
      : '99vh';
  const animations = ['example1', 'example2', 'example3'];
  let ss = animations[count];

  useEffect(() => {
    if (AppId && CompId && BranchId && UserId) {
      fetchBookingStatus();
    }
  }, [AppId, CompId, BranchId, UserId]);
  // Fetch data when the component is rendered
  useEffect(() => {
    fetchAmount();
    if (
      SessionData?.FeatureAddonData?.FeatureDtls?.find(
        (item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
      )
    ) {
      fetchKioskDatas();
    }
  }, [SessionData]);
  useEffect(() => {
    if (!selectedDate) {
      setSelectedDate(dayjs());
    }
  }, [selectedDate, setSelectedDate]);
  const fetchAmount = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
      FromDate: currentDateValue,
      ToDate: currentDateValue,
    };

    await dispatch(getSalesDetailData(data)).unwrap();
  };
  const fetchBookingStatus = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
    };
    await dispatch(getBookingStatus(data));
  };
  // Example usage
  const fetchKioskDatas = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: 0,
    };

    // let response =
    await dispatch(getKioskDatas(data));
    // const length = response?.payload?.data?.data?.length || 0;
    // setBadgeCount(length);
  };

  useEffect(() => {
    if (AppExpDate?.RemainingDays <= 7) {
      const interval = setInterval(() => {
        setcount((prevCount) => (prevCount >= 2 ? 0 : prevCount + 1));
      }, 22000);
      return () => clearInterval(interval);
    }
  }, [count == 2]);

  const navigateFun = () => {
    navigate(`${subDirectory}PricingPage`, { state: { AppName: AppName } });
  };

  const navigatePublicFun = () => {
    navigate(`${commonDirectory}`);
  };

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

  const openModalKiosk = () => {
    setKioskopen(true);
  };

  const closeModalKiosk = () => {
    setKioskopen(false);
  };

  const handlePopOverOpen = () => {
    setPopOverOpen(!popOverOpen);
  };
  const disablePastDates = (current) => {
    return current && current < moment().startOf('day');
  };
  const handleSupportUser = async () => {
    let response = await dispatch(
      putSadminUserExit({
        AppId: AppId,
        CompId: CompId,
        BranchId: BranchId,
        UserId: UserId,
        UpdatedBy: UserId,
      })
    ).unwrap();
    if (response?.data?.statusCode == 1) {
      setMessageData('success');
      setMessageType(response?.data?.data);
      setPopOverOpen(false);
      const UserId = getSession('UserId');
      const sessionId = getSession('SessionId');
      await dispatch(checkSession({ UserId, sessionId })).unwrap();
    } else {
      setMessageData('error');
      setMessageType(response?.data?.data);
    }
  };

  const BookingOpenFun = async (status) => {
    let Postdata = {
      AppId: AppId,
      CompId: CompId,
      BranchId: BranchId,
      UserId: UserId,
      ScreenType: 'Booking',
      ScreenStatus: status,
      CreatedBy: UserId,
      Date: new Date(),
    };
    let Postresponse = await dispatch(PutBookingClose(Postdata)).unwrap();
    if (Postresponse?.data?.statusCode === 1) {
      fetchBookingStatus();
    }
  };
  const OpenBookingModal = () => {
    setBookingModalOpen(true);
  };
  const HandleBookingModalClose = () => {
    setBookingModalOpen(false);
  };
  const OpenListOfInvoices = () => {
    setListOfInvoices(true);
  };
  const handleInvoiceClose = () => {
    setListOfInvoices(false);
  };
  // BSLayout1Data?.BookingNavbar?.[1]?.some((item) => item?.OptionName === "AddCustomer")
  return (
    <>
      <Messages
        messageType={messageType}
        messageData={messageData}
        onComplete={onComplete}
      />
      {UserType != 'Super Admin' &&
        UserType != 'Super Admin User' &&
        (AppExpDate?.RemainingDays <= 7 || AppExpDate === 'undefined') && (
          <div className={`${ss}`}>
            <p>
              {(AppExpDate?.RemainingDays < 1 &&
                AppExpDate?.RemainingHours < 1 &&
                AppExpDate?.RemainingMinutes < 1 &&
                AppExpDate?.RemainingSeconds < 1) ||
              AppExpDate === 'undefined' ? (
                <span className="ExpiredMessage">
                  Subscription expired &nbsp;
                  <a
                    onClick={() => {
                      navigatePublicFun();
                    }}
                    className="upgrdbtn"
                  >
                    RENEWAL NOW <ArrowUpOutlined />
                  </a>
                </span>
              ) : AppExpDate?.RemainingDays < 1 ? (
                <p>
                  Your application subscription will expire within &nbsp;
                  <span className="Expired">
                    {AppExpDate?.RemainingHours >= 1
                      ? AppExpDate?.RemainingHours
                      : AppExpDate?.RemainingMinutes}
                  </span>{' '}
                  {AppExpDate?.RemainingHours >= 1 ? 'Hrs' : 'Min'} . &nbsp;
                  <a
                    onClick={() => {
                      navigateFun();
                    }}
                    className="upgrdbtn"
                  >
                    RENEWAL NOW <ArrowUpOutlined />
                  </a>
                </p>
              ) : (
                <p>
                  Your application subscription will expire within &nbsp;
                  <span className="NosDays">
                    {AppExpDate?.RemainingDays}
                  </span>{' '}
                  days. &nbsp;
                  <a
                    onClick={() => {
                      navigateFun();
                    }}
                    className="upgrdbtn"
                  >
                    RENEWAL NOW <ArrowUpOutlined />
                  </a>
                </p>
              )}
            </p>
          </div>
        )}
      <div
        className="BSLayout1-Master"
        style={{ height: containerHeight, overflow: 'hidden' }}
      >
        <div className="BSLayout1-NavBar">
          {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
          {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
          {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
        </div>
        <div
          className={
            BookingNavbar != 'Navbar3' ? 'BSLayout1' : 'BSLayout1Standard'
          }
          style={{
            backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
          }}
        >
          {BookingNavbar != 'Navbar3' ? (
            <div className="Layout-bill-container" style={{ marginTop: '9px' }}>
              <div
                className="Layout-bill-Subcontainer"
                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
              >
                {UserType !== 'Employee' && (
                  <div className="pricing-name-details">
                    {PricingAppPricingName?.[0]?.PricingName +
                      ' / ' +
                      PricingAppPricingName?.[0]?.Type}
                  </div>
                )}
                {AvailableDate && (
                  <div
                    style={{
                      padding: '3px 5px',
                      marginLeft: '1rem',
                    }}
                  >
                    <DatePicker
                      disabledDate={disablePastDates}
                      // defaultValue={moment()} // today’s date
                      format="DD-MMM-YYYY"
                      value={selectedDate ? dayjs(selectedDate) : null}
                      onChange={(date) => setSelectedDate(date)}
                    />
                  </div>
                )}
                {!OtherServicesglobal && (
                  <SalesCountComponent
                    DineInAccess={DineInAccess}
                    GlobalsalesDetailData={GlobalsalesDetailData}
                  />
                )}
                {SessionData?.FeatureAddonData?.FeatureDtls?.find(
                  (item) =>
                    item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
                ) &&
                  !sportsAppPreference && (
                    <div
                      style={{
                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
                        opacity: OrderStatus > 0 ? 0.5 : 1,
                      }}
                    >
                      {!OtherServicesglobal && (
                        <Tooltip title={'Kiosk Sales'}>
                          <Badge
                            count={badgeCount}
                            offset={[-10, 3]}
                            size="small"
                          >
                            <PozoKioskIcon
                              onClick={() => openModalKiosk()}
                              style={{ cursor: 'pointer', fontSize: '1.5rem' }}
                              className="iconsize"
                            />
                          </Badge>
                        </Tooltip>
                      )}
                    </div>
                  )}
                {!OtherServicesglobal && (
                  <TooltipWrapper
                    title={'Low Stock Alerts'}
                    isMobile={isMobile}
                  >
                    {' '}
                    <BSExpireProductsList />
                  </TooltipWrapper>
                )}
                {Kioskopen && (
                  <BSKioskCounterPayment
                    Kioskopen={Kioskopen}
                    closeKioskModal={closeModalKiosk}
                  />
                )}
                {SAdminuserPin?.length > 0 &&
                  UserType != 'Super Admin User' && (
                    <div>
                      <SAdminUserNotification
                        SAdminuserPin={SAdminuserPin}
                        popOverOpen={popOverOpen}
                        handleSupportUser={handleSupportUser}
                        handlePopOverOpen={handlePopOverOpen}
                      />
                    </div>
                  )}
                {!OtherServicesglobal && (
                  <>
                    <div>
                      {CheckBookingStatus == 'Open' ? (
                        <div style={{ marginLeft: '10px' }}>
                          <TooltipWrapper
                            title={'Booking Close'}
                            isMobile={isMobile}
                          >
                            {' '}
                            <BookingCloseIcon
                              onClick={OpenBookingModal}
                              bgFill={'#52c41a'}
                              style={{
                                fontSize: '16px',
                                marginTop: '4px',
                                color: '#52c41a',
                                cursor: 'pointer',
                              }}
                            />
                          </TooltipWrapper>
                        </div>
                      ) : (
                        <div style={{ marginLeft: '10px' }}>
                          <TooltipWrapper
                            title="Booking Open"
                            isMobile={isMobile}
                          >
                            <Popconfirm
                              placement="leftTop"
                              title="Booking Open"
                              description="Are you sure you want to Open the sales?"
                              okText="Yes"
                              cancelText="No"
                              onConfirm={() => BookingOpenFun('Open')}
                            >
                              <span>
                                <BookingCloseIcon
                                  bgFill="red"
                                  style={{
                                    fontSize: '16px',
                                    marginTop: '4px',
                                    color: '#52c41a',
                                    cursor: 'pointer',
                                  }}
                                />
                              </span>
                            </Popconfirm>
                          </TooltipWrapper>
                        </div>
                      )}
                    </div>
                    <div style={{ marginLeft: '10px' }}>
                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
                        {''}
                        <BSEwayBillicon
                          style={{ cursor: 'pointer', marginTop: '5px' }}
                          onClick={OpenListOfInvoices}
                        />
                      </TooltipWrapper>
                    </div>
                  </>
                )}
              </div>
            </div>
          ) : (
            <SalesCountForStandard
              PricingAppPricingName={PricingAppPricingName}
              DineInAccess={DineInAccess}
              GlobalsalesDetailData={GlobalsalesDetailData}
            />
          )}
          <div className="BSLayout1-ContentDiv">
            <div className="BSCategory1-Contentcont">
              <div
                style={{
                  backgroundColor:
                    SelectedCatgColor?.['OverallBackgroundColor'],
                }}
              >
                {!OtherServicesglobal && (
                  <CategoryHorizontal
                    categoryFunction={dynamicComponentProps(
                      'Category',
                      BSLayout1Data?.BookingCategory?.[1],
                      BSLayout1Data?.BookingCategory?.[0]
                    )}
                  />
                )}
                {OtherServicesglobal && (
                  <BSOtherServicesHorizontalcat
                    categoryFunction={dynamicComponentProps(
                      'Category',
                      BSLayout1Data?.BookingCategory?.[1],
                      BSLayout1Data?.BookingCategory?.[0]
                    )}
                  />
                )}
              </div>

              <div className="BSCategory1-Cardcont">
                <div
                  style={{
                    backgroundColor:
                      SelectedSubCatgColor?.['OverallBackgroundColor'],
                  }}
                >
                  {Comboglobal === false && !OtherServicesglobal && (
                    <SubCategoryVertical
                      categoryFunction={dynamicComponentProps(
                        'SubCategory',
                        BSLayout1Data?.BookingSubCategory?.[1],
                        BSLayout1Data?.BookingSubCategory?.[0]
                      )}
                    />
                  )}
                </div>

                <div
                  className="layout1-card-content"
                  style={{
                    backgroundColor:
                      SelectedCardColor?.['OverallBackgroundColor'],
                    width: '100vw',
                    display: 'flex',
                  }}
                >
                  {Comboglobal === false &&
                    !OtherServicesglobal &&
                    (AvailableDate ? (
                      <BsBookingitemCard
                        screenHeight={screenHeight}
                        cardFunctionality={dynamicComponentProps(
                          'Card',
                          BSLayout1Data?.BookingCard?.[1],
                          BSLayout1Data?.BookingCard?.[0]
                        )}
                      />
                    ) : (
                      <BSItemCard
                        screenHeight={screenHeight}
                        cardFunctionality={dynamicComponentProps(
                          'Card',
                          BSLayout1Data?.BookingCard?.[1],
                          BSLayout1Data?.BookingCard?.[0]
                        )}
                      />
                    ))}
                  {Comboglobal === true && !OtherServicesglobal && (
                    <BSComboItemCard
                      screenHeight={screenHeight}
                      cardFunctionality={dynamicComponentProps(
                        'Card',
                        BSLayout1Data?.BookingCard?.[1],
                        BSLayout1Data?.BookingCard?.[0]
                      )}
                    />
                  )}
                  {OtherServicesglobal && (
                    <BSOtherServiceItemCard
                      screenHeight={screenHeight}
                      cardFunctionality={dynamicComponentProps(
                        'Card',
                        BSLayout1Data?.BookingCard?.[1],
                        BSLayout1Data?.BookingCard?.[0]
                      )}
                    />
                  )}
                </div>
              </div>
            </div>
            <div className="BSCategory1-tablecont">
              {action ? (
                <BranchTransferComponent />
              ) : (
                <>
                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing1' && (
                    <BSBillingTable1 />
                  )}
                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing2' && (
                    <BSBillingTable2 />
                  )}
                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing3' && (
                    <BSBillingTable3 />
                  )}
                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing4' && (
                    <BSBillingTable4 />
                  )}
                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing5' && (
                    <BSBillingTable5 />
                  )}
                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing6' && (
                    <BSBillingTable6 />
                  )}
                  {BSLayout1Data?.BookingBilling?.[0] == 'Billing7' && (
                    <BSBillingTable7 />
                  )}
                  {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
                  {BSLayout1Data?.BookingBilling?.[0] == 'StandardBilling' && (
                    <div className="BSCategory2New">
                      <StandardTable />
                    </div>
                  )}
                </>
              )}
              {/* <div className="salesStoreName"
                style={{
                  color: SelectedBillColor?.['FontColor'],
                  backgroundColor: SelectedBillColor?.['BackgroundColor'],
                }}>
              <BranchName/>
              </div> */}
            </div>
          </div>
        </div>
      </div>
      {BookingModalOpen && (
        <RetailBookingClosing
          PaymentOpen={BookingModalOpen}
          PaymentClose={HandleBookingModalClose}
        />
      )}
      {ListOfInvoices && (
        <ListOfSalesInvoices
          ListOfInvoicesOpen={ListOfInvoices}
          handleInvoiceClose={handleInvoiceClose}
        />
      )}
    </>
  );
};

export default BSLayout1;
