import { useEffect, useState, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { FaChartLine, FaRupeeSign } from 'react-icons/fa';
import { Badge, DatePicker, Popconfirm, Tooltip } from 'antd';
import { isMobile } from 'react-device-detect';
import { ApplicationPreferences } from '../../../Features/BrachLogin/BranchLogin';
import {
  getPreferenceData,
  GlobalOrderStatus,
  GlobalOtherSevices,
  GlobalSalesDetailData,
} from '../../../Features/BookingScreen/BookingData/BookingData';
import { extractLastNumberOrderId, getSession } from '../../../Services/Others';
import { useDateStore } from '../../../Features/BookingScreen/BookingData/DateStore';
import dayjs from 'dayjs';
import moment from 'moment';
import { BsUiChecks } from 'react-icons/bs';
import { FaCheckToSlot } from 'react-icons/fa6';
import PozoKioskIcon from '../Components/UtillComponents/Pozo retail icons/PozoKioskIcon';
import { globalKioskSalesCount } from '../../../Features/Kiosk/kiosk';
import BSKioskCounterPayment from '../Components/UtillComponents/BSKioskCounterPayment';
import BSExpireProductsList from '../Components/UtillComponents/BSExpireProductsList';
import TooltipWrapper from '../../../Components/Tooltip/Tooltip';
import { StoredSessionData } from '../../../Features/ThemeChange/ThemeChange';
import BookingCloseIcon from '../Components/UtillComponents/BookingCloseIcon';
import RetailBookingClosing from './RetailBookingClose';
import {
  getBookingStatus,
  GlobalBookingStatus,
} from '../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail';
import { PutBookingClose } from '../../../Features/BookingScreen/RetailBookingClose';
import BSEwayBillicon from '../../BookingScreen/Components/UtillComponents/BSEwayBillicon.jsx';
import ListOfSalesInvoices from '../Components/BSBillingTables/ListofInvoices/ListOfSalesInvoices.jsx';
import { DefaultModal } from '../../../Components/Modal/DefaultModal.jsx';

const SalesCountForStandard = ({
  DineInAccess,
  GlobalsalesDetailData,
  PricingAppPricingName,
}) => {
  const dispatch = useDispatch();

  const AppId = getSession('AppId');
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const UserId = getSession('UserId');
  const [allowDecimal, setAllowDecimal] = useState(false);
  const [BookingModalOpen, setBookingModalOpen] = useState(false);
  const [ListOfInvoices, setListOfInvoices] = useState(false);
  const { selectedDate, setSelectedDate } = useDateStore();
  const [Kioskopen, setKioskopen] = useState(false);
  const badgeCount = useSelector(globalKioskSalesCount);
  const OtherServicesglobal = useSelector(GlobalOtherSevices);
  const appPreferences = useSelector(ApplicationPreferences);
  const SessionData = useSelector(StoredSessionData);
  const OrderStatus = useSelector(GlobalOrderStatus);
  const dailySalesData = useSelector(GlobalSalesDetailData);

  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isNetAmtModalOpen, setIsNetAmtModalOpen] = useState(false);

  const bookings = dailySalesData?.[0]?.BookedDetails;
  const orderDetails = dailySalesData?.[0]?.OrderDetails;
  const [currentPage, setCurrentPage] = useState(1);
  const rowsPerPage = 10;

  const totalPages = Math.ceil((bookings?.length || 0) / rowsPerPage);
  const startIndex = (currentPage - 1) * rowsPerPage;
  const currentData = bookings?.slice(startIndex, startIndex + rowsPerPage);

  console.log(dailySalesData, 'dailySalesDatadailySalesData', bookings);

  const bookingTypePreference =
    appPreferences?.find((p) => p?.PreferredCatName === 'Booking Type')
      ?.PreferenceCatDetails || [];

  const dinePreference = bookingTypePreference.find(
    (p) =>
      p?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
      p?.PreferredStatus === 'Y'
  );
  const takeAwayPreference = bookingTypePreference.find(
    (p) =>
      p?.PreferredSubCatName?.toLowerCase() === 'take away' &&
      p?.PreferredStatus === 'Y'
  );
  const commonModulePreference = appPreferences?.find(
    (preference) => preference?.PreferredCatName === 'Common Module'
  )?.PreferenceCatDetails;
  const sportsAppPreference = commonModulePreference?.find(
    (preference) =>
      preference?.PreferredSubCatName === 'SportsApp' &&
      preference?.PreferredStatus === 'Y'
  );
  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 { isBulk, setIsBulk } = useDateStore();
  const BookingStatus = useSelector(GlobalBookingStatus);
  const CheckBookingStatus =
    BookingStatus?.find((item) => item.ScreenType === 'Booking')
      ?.ScreenStatus ?? 'Open';

  const sales = GlobalsalesDetailData?.[0] || {};
  const {
    DineInOrderCount = 0,
    TakeAwayOrderCount = 0,
    OverAllOrderCount = 0,
    SelfDineInOrderCount = 0,
    SelfTakeAwayOrderCount = 0,
    DineInAmount = 0,
    TakeAwayAmount = 0,
    OverAllTakeAwayOfferAmount = 0,
    OverAllDineInOfferAmount = 0,
    SelfTakeAwayAmount = 0,
    SelfDineInAmount = 0,
    PreOrderAmount = 0,
  } = sales;

  useEffect(() => {
    (async () => {
      const { data: res } = await dispatch(
        getPreferenceData({ AppId, CompId, BranchId })
      ).unwrap();
      const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
        (s) =>
          s?.SettingIdName?.toLowerCase() === 'decimal' &&
          s?.SettingValue === 'Y'
      );
      setAllowDecimal(!!decimalSetting);
    })();
  }, []);
  // useEffect(() => {
  //     if (!selectedDate || (Array.isArray(selectedDate) && selectedDate.length === 0)) {
  //         setSelectedDate(dayjs());
  //     }
  // }, [selectedDate, setSelectedDate]);
  useEffect(() => {
    if (AppId && CompId && BranchId && UserId) {
      fetchBookingStatus();
    }
  }, [AppId, CompId, BranchId, UserId]);
  const safeRound = (value) => {
    const num = Number(String(value).replace(/[^0-9.-]+/g, ''));
    if (isNaN(num)) return allowDecimal ? '0.00' : '0';
    return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
  };
  const disablePastDates = (current) => {
    return current && current < moment().startOf('day');
  };
  const totalTakeAway =
    TakeAwayAmount +
    SelfTakeAwayAmount +
    PreOrderAmount -
    OverAllTakeAwayOfferAmount;
  const totalDineIn =
    DineInAmount + SelfDineInAmount - OverAllDineInOfferAmount;
  const netAmount = totalTakeAway + totalDineIn;

  const showSalesTooltip = useMemo(() => {
    return (
      DineInAccess?.SettingValue === 'Y' &&
      DineInOrderCount +
        TakeAwayOrderCount +
        SelfTakeAwayOrderCount +
        SelfDineInOrderCount >
        0 &&
      (takeAwayPreference || dinePreference)
    );
  }, [DineInAccess, sales, dinePreference, takeAwayPreference]);

  const renderBreakdown = (labelMap) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
      <div style={{ display: 'flex', gap: '1rem' }}>
        <div>
          {labelMap.map(
            (item) => item.value !== 0 && <p key={item.label}>{item.label}</p>
          )}
        </div>
        <div style={{ textAlign: 'right' }}>
          {labelMap.map(
            (item) =>
              item.value !== 0 && (
                <p key={item.label}>{safeRound(item.value)}</p>
              )
          )}
        </div>
      </div>
      <div style={{ borderBottom: '1px dotted #fff', height: 0 }} />
      <div
        style={{
          display: 'flex',
          justifyContent: 'flex-end',
          gap: '1rem',
          fontSize: '16px',
          fontWeight: '600',
          fontFamily: 'Poppins',
        }}
      >
        <div>Total</div>
        <div>
          {safeRound(
            labelMap.reduce(
              (sum, item) => sum + (item.includeInTotal ? item.value : 0),
              0
            )
          )}
        </div>
      </div>
    </div>
  );

  // Fix: Convert string dates to dayjs objects for the DatePicker
  const getDatePickerValue = () => {
    if (!selectedDate) return isBulk ? [] : null;
    console.log(selectedDate, 'selectedDate');
    if (isBulk) {
      // For bulk mode, convert string array to dayjs objects array
      if (Array.isArray(selectedDate)) {
        return selectedDate.map((date) => dayjs(date));
      }
      return [];
    } else {
      // For single date mode, handle both string and dayjs object
      if (Array.isArray(selectedDate) && selectedDate.length > 0) {
        return dayjs(selectedDate[0]);
      }
      return dayjs(selectedDate);
    }
  };

  const handleDateChange = (dateOrDates) => {
    if (isBulk) {
      // For bulk mode, convert dayjs objects to string format
      const formattedDates = dateOrDates
        ? dateOrDates.map((d) => d.format('YYYY-MM-DD'))
        : [];
      setSelectedDate(formattedDates);
    } else {
      // For single date mode
      if (dateOrDates) {
        setSelectedDate(dateOrDates);
      } else {
        setSelectedDate([]);
      }
    }
  };
  const fetchBookingStatus = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      UserId: UserId,
    };
    await dispatch(getBookingStatus(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();
    } else {
    }
  };
  const openModalKiosk = () => {
    setKioskopen(true);
  };
  const closeModalKiosk = () => {
    setKioskopen(false);
  };

  const OpenBookingModal = () => {
    setBookingModalOpen(true);
  };
  const HandleBookingModalClose = () => {
    setBookingModalOpen(false);
  };

  const OpenListOfInvoices = () => {
    setListOfInvoices(true);
  };
  const handleInvoiceClose = () => {
    setListOfInvoices(false);
  };
  return (
    <div className="NewLayoutBillContainer">
      <div className="LicenseActive">
        {/* { AvailableDate && <div>
                   {isBulk ?  <BsUiChecks size={28}   onClick={() => {
                    setIsBulk(!isBulk);
                    setSelectedDate([]);
                }} /> : <FaCheckToSlot size={25} onClick={() => {
                    setIsBulk(!isBulk);
                    setSelectedDate([]);
                }} />}
             </div>} */}

        {/* <div>
                    {AvailableDate && !isBulk &&
                        <div style={{ padding: '3px 5px', marginLeft: '1rem' }}>
                            <DatePicker
                                disabledDate={disablePastDates}
                                format="DD-MMM-YYYY"
                                value={getDatePickerValue()}
                                onChange={handleDateChange}
                            />
                        </div>
                    }

                    {isBulk && AvailableDate && (
                        <div style={{ padding: '3px 5px', marginLeft: '1rem' }}>
                            <DatePicker
                                multiple
                                value={getDatePickerValue()}
                                onChange={handleDateChange}
                                format="DD-MMM-YYYY"
                                placeholder="Select multiple dates"
                                style={{ height: 30, fontSize: 12 }}
                                disabledDate={disablePastDates}
                            />
                        </div>
                    )}
                </div> */}
        <div>
          {showSalesTooltip ? (
            <Tooltip
              className="NetAmountNew"
              placement="bottom"
              title={
                <div style={{ display: 'flex', gap: '1rem' }}>
                  {takeAwayPreference && (
                    <div style={{ display: 'flex', gap: '5px' }}>
                      <div>Takeaway:</div>
                      <div>{TakeAwayOrderCount + SelfTakeAwayOrderCount}</div>
                    </div>
                  )}
                  {dinePreference && (
                    <div style={{ display: 'flex', gap: '5px' }}>
                      <div>Dine-in:</div>
                      <div>{DineInOrderCount + SelfDineInOrderCount}</div>
                    </div>
                  )}
                </div>
              }
              onClick={() =>
                OverAllOrderCount || (0 > 0 && setIsModalOpen(true))
              }
            >
              <FaChartLine color="#ffffffff" />
              <div className="NetAmountNew">
                {isMobile ? 'Count' : 'Sales Count'} : {OverAllOrderCount}
              </div>
            </Tooltip>
          ) : (
            <div
              style={{
                display: 'flex',
                gap: '5px',
                alignItems: 'center',
                fontSize: '0.9rem',
                cursor: 'pointer',
              }}
              onClick={() =>
                OverAllOrderCount || (0 > 0 && setIsModalOpen(true))
              }
            >
              <FaChartLine color="#ffffffff" />
              <div className="NetAmountNew">
                {isMobile ? 'Count' : 'Sales Count'} : {OverAllOrderCount}
              </div>
            </div>
          )}
        </div>
      </div>

      {/* Rest of your component remains the same */}
      {DineInAccess?.SettingValue === 'Y' &&
        takeAwayPreference &&
        (TakeAwayOrderCount || SelfTakeAwayOrderCount || PreOrderAmount) >
          0 && (
          <Tooltip
            className="standardTooltipDineIN"
            title={renderBreakdown([
              {
                label: 'Admin + Staff :',
                value: TakeAwayAmount,
                includeInTotal: true,
              },
              {
                label: 'Self Booking :',
                value: SelfTakeAwayAmount,
                includeInTotal: true,
              },
              {
                label: 'Preorder :',
                value: PreOrderAmount,
                includeInTotal: true,
              },
              {
                label: 'Offer(-) :',
                value: -OverAllTakeAwayOfferAmount,
                includeInTotal: true,
              },
            ])}
          >
            <div
              className="standardTooltipDineIN"
              style={{
                display: 'flex',
                gap: '5px',
                fontSize: '14px',
                color: '#fff',
              }}
            >
              <div>{isMobile ? 'TA' : 'Take Away'} : </div>
              <div>{`₹ ${safeRound(totalTakeAway)}`}</div>
            </div>
          </Tooltip>
        )}

      {DineInAccess?.SettingValue === 'Y' &&
        dinePreference &&
        (DineInOrderCount || SelfDineInOrderCount) > 0 && (
          <Tooltip
            className="standardTooltipDineIN"
            title={renderBreakdown([
              {
                label: 'Admin + Staff :',
                value: DineInAmount,
                includeInTotal: true,
              },
              {
                label: 'Self Booking :',
                value: SelfDineInAmount,
                includeInTotal: true,
              },
              {
                label: 'Offer(-) :',
                value: -OverAllDineInOfferAmount,
                includeInTotal: true,
              },
            ])}
          >
            <div
              className="standardTooltipDineIN"
              style={{
                display: 'flex',
                gap: '5px',
                fontSize: '14px',
                color: '#fff',
              }}
            >
              <div>{isMobile ? 'DI' : 'Dine In'} : </div>
              <div>{`₹ ${safeRound(totalDineIn)}`}</div>
            </div>
          </Tooltip>
        )}

      <div className="NetAmountIcons-Main">
        <div
          className="FaRupeeSign"
          onClick={() => netAmount > 0 && setIsNetAmtModalOpen(true)}
          style={{ cursor: 'pointer' }}
        >
          <FaRupeeSign color="#ffffffff" />
          <div className="NetAmountNew">
            {isMobile ? 'NA' : 'Net Amount'} : ₹ {safeRound(netAmount)}
          </div>
        </div>
      </div>

      <div style={{ display: 'flex', alignItems: 'center' }}>
        {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>
          )}
        {Kioskopen && (
          <BSKioskCounterPayment
            Kioskopen={Kioskopen}
            closeKioskModal={closeModalKiosk}
          />
        )}
        {!OtherServicesglobal && !sportsAppPreference && (
          <TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
            {' '}
            <BSExpireProductsList />
          </TooltipWrapper>
        )}

        {!OtherServicesglobal && (
          <>
            {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' }}>
                <Popconfirm
                  placement="leftTop"
                  title="Booking Open"
                  description="Are you sure you want to Open the sales?"
                  okText="Yes"
                  cancelText="No"
                  onConfirm={() => BookingOpenFun('Open')}
                >
                  <TooltipWrapper title={'Booking Open'} isMobile={isMobile}>
                    <BookingCloseIcon
                      bgFill={'red'}
                      style={{
                        fontSize: '16px',
                        marginTop: '4px',
                        color: '#52c41a',
                        cursor: 'pointer',
                      }}
                    />

                    {/* <button className="BookingOpenButton">Booking Open</button> */}
                    {/* <button onClick={OpenPaymentModal} className='entryActioncloseBTN-resSales'><IoClose size={15} /></button> */}
                  </TooltipWrapper>
                </Popconfirm>
              </div>
            )}
            {!sportsAppPreference && (
              <div style={{ marginLeft: '10px' }}>
                <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
                  {''}
                  <BSEwayBillicon
                    style={{ cursor: 'pointer', marginTop: '5px' }}
                    onClick={OpenListOfInvoices}
                  />
                </TooltipWrapper>
              </div>
            )}
          </>
        )}

        {BookingModalOpen && (
          <RetailBookingClosing
            PaymentOpen={BookingModalOpen}
            PaymentClose={HandleBookingModalClose}
          />
        )}
        {ListOfInvoices && (
          <ListOfSalesInvoices
            ListOfInvoicesOpen={ListOfInvoices}
            handleInvoiceClose={handleInvoiceClose}
          />
        )}
      </div>

      {/* Modal with table for multiple bookings */}
      <DefaultModal
        open={isModalOpen}
        title="Sales Details"
        handleCancel={() => setIsModalOpen(false)}
        handleSubmit={() => setIsModalOpen(false)}
        width={700}
        footer={false}
      >
        <div style={{ overflowX: 'auto' }}>
          <table
            style={{
              width: '100%',
              borderCollapse: 'collapse',
              fontFamily: "'Segoe UI', Roboto, sans-serif",
              fontSize: '14px',
              borderRadius: '8px',
              overflow: 'hidden',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
            }}
          >
            <thead>
              <tr style={{ backgroundColor: '#003366', color: '#fff' }}>
                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                  S.No
                </th>
                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                  Order ID
                </th>
                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                  Customer
                </th>
                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                  Mobile
                </th>
                {/* <th style={{ border: "1px solid #ddd", padding: "10px" }}>Booked By</th> */}
                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                  Payment Type
                </th>
                <th style={{ border: '1px solid #ddd', padding: '10px' }}>
                  Amount (₹)
                </th>
              </tr>
            </thead>

            <tbody>
              {currentData?.length > 0 ? (
                currentData?.map((item, index) => (
                  <tr
                    key={item.OrderId}
                    style={{
                      backgroundColor: index % 2 === 0 ? '#f7faff' : '#e9f1ff',
                      textAlign: 'center',
                      transition: 'background 0.3s',
                    }}
                    onMouseEnter={(e) =>
                      (e.currentTarget.style.backgroundColor = '#d6e4ff')
                    }
                    onMouseLeave={(e) =>
                      (e.currentTarget.style.backgroundColor =
                        index % 2 === 0 ? '#f7faff' : '#e9f1ff')
                    }
                  >
                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
                      {startIndex + index + 1}
                    </td>
                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
                      {extractLastNumberOrderId(item.OrderId)}
                    </td>
                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
                      {item.CustName || '—'}
                    </td>
                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
                      {item.CustMobile || '—'}
                    </td>
                    {/* <td style={{ border: "1px solid #ddd", padding: "8px" }}>
                                            {item.BookedBy || "—"}
                                        </td> */}
                    <td style={{ border: '1px solid #ddd', padding: '8px' }}>
                      {item.PaymentTypeName || '—'}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        padding: '8px',
                        fontWeight: '600',
                        color: '#2e7d32',
                        backgroundColor: '#eaf6ea',
                      }}
                    >
                      ₹{item.Amount?.toLocaleString()}
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td
                    colSpan="7"
                    style={{
                      textAlign: 'center',
                      padding: '12px',
                      border: '1px solid #ddd',
                      color: '#888',
                    }}
                  >
                    No booking data available
                  </td>
                </tr>
              )}
            </tbody>
          </table>

          {/* Pagination */}
          {totalPages > 1 && (
            <div
              style={{
                marginTop: '12px',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                gap: '8px',
              }}
            >
              {currentPage == 1 ? (
                ''
              ) : (
                <button
                  onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
                  disabled={currentPage === 1}
                  style={{
                    padding: '5px 10px',
                    backgroundColor: '#003366',
                    color: '#fff',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
                    opacity: currentPage === 1 ? 0.5 : 1,
                  }}
                >
                  Prev
                </button>
              )}

              <span style={{ fontWeight: '600' }}>
                Page {currentPage} of {totalPages}
              </span>

              <button
                onClick={() =>
                  setCurrentPage((p) => Math.min(p + 1, totalPages))
                }
                disabled={currentPage === totalPages}
                style={{
                  padding: '5px 10px',
                  backgroundColor: '#003366',
                  color: '#fff',
                  border: 'none',
                  borderRadius: '4px',
                  cursor:
                    currentPage === totalPages ? 'not-allowed' : 'pointer',
                  opacity: currentPage === totalPages ? 0.5 : 1,
                }}
              >
                Next
              </button>
            </div>
          )}
        </div>
      </DefaultModal>

      {/* Modal with table for multiple Net Amt */}
      <DefaultModal
        open={isNetAmtModalOpen}
        title="Sales Net Amount"
        handleCancel={() => setIsNetAmtModalOpen(false)}
        handleSubmit={() => setIsNetAmtModalOpen(false)}
        width={800}
        footer={false}
      >
        <div style={{ overflowX: 'auto' }}>
          <table
            style={{
              width: '100%',
              borderCollapse: 'collapse',
              textAlign: 'center',
              fontFamily: "'Segoe UI', Roboto, sans-serif",
              fontSize: '14px',
              borderRadius: '8px',
              overflow: 'hidden',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
            }}
          >
            <thead>
              <tr style={{ backgroundColor: '#003366', color: '#fff' }}>
                <th
                  colSpan="2"
                  style={{ border: '1px solid #ddd', padding: '10px' }}
                >
                  Cash
                </th>
                <th
                  colSpan="2"
                  style={{ border: '1px solid #ddd', padding: '10px' }}
                >
                  UPI
                </th>
                <th
                  colSpan="2"
                  style={{ border: '1px solid #ddd', padding: '10px' }}
                >
                  Card
                </th>
                <th
                  colSpan="2"
                  style={{ border: '1px solid #ddd', padding: '10px' }}
                >
                  Credit
                </th>
                <th
                  colSpan="2"
                  style={{ border: '1px solid #ddd', padding: '10px' }}
                >
                  Business UPI
                </th>
                <th
                  rowSpan="2"
                  style={{
                    border: '1px solid #ddd',
                    padding: '10px',
                    backgroundColor: '#002244',
                    color: '#fff',
                  }}
                >
                  Total
                </th>
              </tr>
              <tr style={{ backgroundColor: '#004080', color: '#fff' }}>
                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                  Count
                </th>
                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                  Amt
                </th>
                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                  Count
                </th>
                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                  Amt
                </th>
                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                  Count
                </th>
                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                  Amt
                </th>
                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                  Count
                </th>
                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                  Amt
                </th>
                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                  Count
                </th>
                <th style={{ border: '1px solid #ddd', padding: '8px' }}>
                  Amt
                </th>
              </tr>
            </thead>

            <tbody>
              {orderDetails?.map((item, index) => {
                const total =
                  (item.CashAmount || 0) +
                  (item.UpiAmount || 0) +
                  (item.CardAmount || 0) +
                  (item.CreditAmount || 0);

                return (
                  <tr
                    key={index}
                    style={{
                      backgroundColor: index % 2 === 0 ? '#f7faff' : '#ffffff',
                      transition: 'background 0.3s',
                    }}
                    onMouseEnter={(e) =>
                      (e.currentTarget.style.backgroundColor = '#e6f2ff')
                    }
                    onMouseLeave={(e) =>
                      (e.currentTarget.style.backgroundColor =
                        index % 2 === 0 ? '#f7faff' : '#ffffff')
                    }
                  >
                    <td
                      style={{
                        border: '1px solid #ddd',
                        fontWeight: '700',
                        padding: '8px',
                      }}
                    >
                      {item.CashCount}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        fontWeight: '700',
                        padding: '8px',
                      }}
                    >
                      {item.CashAmount}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        fontWeight: '700',
                        padding: '8px',
                      }}
                    >
                      {item.UpiCount}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        fontWeight: '700',
                        padding: '8px',
                      }}
                    >
                      {item.UpiAmount}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        fontWeight: '700',
                        padding: '8px',
                      }}
                    >
                      {item.CardCount}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        fontWeight: '700',
                        padding: '8px',
                      }}
                    >
                      {item.CardAmount}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        fontWeight: '700',
                        padding: '8px',
                      }}
                    >
                      {item.CreditCount}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        fontWeight: '700',
                        padding: '8px',
                      }}
                    >
                      {item.CreditAmount}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        fontWeight: '700',
                        padding: '8px',
                      }}
                    >
                      {item.BusinessUpiCount}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        fontWeight: '700',
                        padding: '8px',
                      }}
                    >
                      {item.BusinessUpiAmount}
                    </td>
                    <td
                      style={{
                        border: '1px solid #ddd',
                        padding: '8px',
                        fontWeight: '700',
                        backgroundColor: '#eaf6ea',
                        color: '#2e7d32',
                      }}
                    >
                      {total}
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </DefaultModal>
    </div>
  );
};

export default SalesCountForStandard;