import React, { useEffect, useState, useRef } from 'react';
import { useDispatch } from 'react-redux';
import { Switch, Tooltip, Form, DatePicker } from 'antd';
import moment from 'moment';
import dayjs from 'dayjs';
import { DatePicProd } from '../../../Components/Forms/DatePickerProduct.jsx';
import { Tables } from '../../../Components/Tables/Table';
import { BiSolidPrinter, BiUpArrowCircle } from 'react-icons/bi';
import Denomination from '../Denomination/Denomination';
import { Popover } from 'antd';
import '../../../Styles/Reports/DateWiseReport/DateWiseReport.scss';
import { changeBreadCrumb } from '../../../Features/AppPage/CenterPage';
import {
  getEstimateDatewiseReport,
  getPreferenceData,
  PreferenceData,
  UserDataBasedOnBranchId,
} from '../../../Features/BookingScreen/BookingData/BookingData';
import { getSession, printDiv } from '../../../Services/WSOthers';
import DatewiseReportPdf from '../../paymentpdfPage/DateWiseReportPdf';
import { DropDowns } from '../../../Components/Forms/DropDown.jsx';
import { isMobile } from 'react-device-detect';
import logo from '../../../Images/pozologoimg.png';
import { RadioGrpButton } from '../../../Components/Forms/RadioGroup.jsx';
import { IoSearch } from 'react-icons/io5';
import { ExtractDateFormate } from '../../../Services/Others.js';
import { ReportMobilePDFPrint } from '../../paymentpdfPage/ReportMobilePDFPrint.js';
import { useSelector } from 'react-redux';
const subDirectory = import.meta.env.BASE_URL;

const { RangePicker } = DatePicker;

const EstimateDateWiseReport = () => {
  const [open, setOpen] = useState(false);
  const formRef = useRef();
  const dispatch = useDispatch();
  const [datewiseData, setDatewiseData] = useState();
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const UserRole = getSession('UserType');
  const AppId = getSession('AppId');
  const [OrderFromDate, setOrderFromDate] = useState();
  const [OrderToDate, setOrderToDate] = useState();
  const [UserId, setUserId] = useState(
    UserRole != 'Employee' ? 0 : getSession('UserId')
  );
  const [userDropDown, setuserDropDown] = useState([]);
  const [selectedUserData, setSelectedUserData] = useState(null);
  const [dataSource, setdataSource] = useState([]);
  const [page, setpage] = useState(1);
  const [receiptText, setreceiptText] = useState(null);

  const [TotalCashInHand, setTotalCashInHand] = useState([]);
  const [openDenomination, setOpenDenomination] = useState(false);
  const [Selecttype, setSelecttype] = useState('A');

  const [denominationData, setDenominationData] = useState({
    Amounts: {},
    OverAllTotal: 0,
  });
  const SettingDataSelector = useSelector(PreferenceData);
  const MobileA4Print = SettingDataSelector?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "mobilea4" && setting?.SettingValue === 'Y');
  const [allowDecimal, setAllowDecimal] = useState(false);

  useEffect(() => {
    if (dataSource.length > 0) {
      mobileDateWisePrintFun(dataSource);
    }
  }, [dataSource]);

  const reprintDate = (date) => {
    const salesDate = new Date(date);
    const formattedDate = salesDate.toLocaleDateString('en-GB', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    });
    return formattedDate;
  };
  const formatAmount = (value) => {
    return allowDecimal ? parseFloat(value || 0).toFixed(2) : Math.round(value || 0);
  };
  const getPreference = async () => {
    const data = { AppId: AppId, CompId: CompId, BranchId: BranchId ,UserId: UserId};
    const { data: res } = await dispatch(getPreferenceData(data)).unwrap()
    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find((setting) => setting?.SettingIdName?.toLowerCase() === "decimal" && setting?.SettingValue === 'Y');
    if (decimalSetting) {
      setAllowDecimal(true)
    }
  }
  function safeRound(amountStr) {
    if (amountStr == null) return allowDecimal ? '0.00' : '0';

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

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

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

  const mobileDateWisePrintFun = async (data) => {

    const Dataa = ["Cash", "Upi", "Card", "Credit"].map(method => {
      const amountKey = `${method}Amount`;
      const countKey = `${method}Count`;

      const total = dataSource?.reduce((acc, entry) => {
        acc.amount += entry[amountKey] || 0;
        acc.count += entry[countKey] || 0;
        return acc;
      }, { amount: 0, count: 0 });

      return {
        PaymentMethod: method,
        CountOfPaymentType: total.count,
        NetAmount: total.amount
      };
    })?.filter(entry => entry.NetAmount > 0);
    let Tabledata = Dataa?.map((data, index) => {
      const snoSpacing = Math.max(0, 3 - String(index + 1).length);
      // Calculate dynamic spacing for Rate
      const rateSpacing = Math.max(0, 9 - String(data?.NetAmount).length);
      const QtySpacing = Math.max(
        0,
        3 - String(data?.CountOfPaymentType).length
      );

      // Generate formatted string with dynamic spacings
      const formattedString =
        ' '.repeat(snoSpacing) +
        parseInt(index + 1) +
        '  ' +
        (data?.PaymentMethod + ' '.repeat(22)).substring(0, 22) +
        '  ' +
        ' '.repeat(QtySpacing) +
        String(data?.CountOfPaymentType) +
        ' ' +
        ' '.repeat(rateSpacing) +
        String(data?.NetAmount) +
        ' ' +
        '\n';

      return formattedString;
    });
    const AmountSpace = Math.max(
      0,
      6 - String(parseFloat(TotalBill).toFixed(2)).length
    );
    const Billamountspace = Math.max(
      0,
      6 - String((datewiseData?.[0]?.TotalBillAmount).toFixed(2)).length
    );
    const Taxamountspace = Math.max(
      0,
      6 - String((datewiseData?.[0]?.TaxAmount).toFixed(2)).length
    );
    const Netamountspace = Math.max(
      0,
      6 - String((datewiseData?.[0]?.TotalNetAmount).toFixed(2)).length
    );

    var receiptTextdata =
      "[C]<b><font size='big'>" +
      ' Estimate Datewise Sales' +
      '</font></b>\n' +
      '[L]<b>From Date :' +
      reprintDate(OrderFromDate) +
      '[R]<b>' +
      ' ' +
      'To Date :' +
      reprintDate(OrderToDate) +
      '</b>\n' +
      '[C]------------------------------------------------\n' +
      '[L]<b>' +
      '' +
      'S.No' +
      '   ' +
      '  Payment Type       ' +
      '  ' +
      'Count ' +
      '  ' +
      'Amount ' +
      '' +
      '</b>' +
      '[L]\n' +
      '[C]------------------------------------------------\n' +
      Tabledata.join('') +
      '[C]<b>------------------------------------------------</b>\n' +
      '[L]<b>' +
      'Total Orders:' +
      datewiseData?.[0]?.Orders +
      '</b>' +
      '[R]<b>' +
      'TotalAmount:' +
      parseFloat(TotalBill).toFixed(2) +
      ' '.repeat(AmountSpace) +
      '</b>\n' +
      '[R]<b>' +
      'Total Bill:' +
      parseFloat(datewiseData?.[0]?.TotalBillAmount).toFixed(2) +
      ' '.repeat(Billamountspace) +
      '</b>\n' +
      '[R]<b>' +
      'Total Tax:' +
      parseFloat(datewiseData?.[0]?.TaxAmount).toFixed(2) +
      ' '.repeat(Taxamountspace) +
      '</b>\n' +
      '[L]<b>------------------------------------------------</b>\n' +
      '[R]<b>' +
      'Net:' +
      parseFloat(datewiseData?.[0]?.TotalNetAmount).toFixed(2) +
      ' '.repeat(Netamountspace) +
      '</b>\n';

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

    // {
    //     name: "Estimate Date WiseReport",
    //     link: `${subDirectory}report/estimatedatewisereport`,
    // },
  ];
  const style = `<style>
    @import url('https://fonts.googleapis.com/css2?family=Podkova:wght@400..800&display=swap');  
             
           @media print {
                     body { 
                         font-family:"Podkova", serif; 
                         font-size: 13px; /* Adjust font size for print */
                         margin: 0;
                         padding: 0;
                     }
                 }    
          * {
                     margin: 0;
                     padding: 0;
                     box-sizing: border-box;
                     font-family:"Podkova", serif; 
                 }


  .imgDiv{
    height:50px;
    display: flex;
    justify-content: center;
  }
  .Dates{
    width:93%;
    display: flex;
    justify-content: space-between;
    alignItems:center;
    margin-left:15px;
  }
  .DatesStyle{
    display: flex;
    gap:0.3rem;
  }
  .p
  {
    font-size: 12px;
  }

  
  .totalAmount{
    width:95%;  
    display:flex;
    justify-content: flex-end;
    font-size:14px;
  }
  .totaldetails{
    width:95%;  
    display:flex;
    justify-content: flex-end;
     font-size:10px;
  }
  .Table ,.th ,.td {
    border: 1px solid black;
    border-collapse: collapse;
    font-size:10px;
  }
  .td{
    padding:10px
  }
  .th{
    padding:4px
  }
  .DateWiseSales{
   
    display: flex;
    justify-content: center;
    font-size: 15px

  }
  .Table{
    width:95%;
  }
  .Pdf-Table-Div
  {
    margin-left:15px;
  }
  

    </style>`;

  useEffect(() => {
    dispatch(changeBreadCrumb({ items: items }));
    fetchInitialData();
    if (UserRole != 'Employee') {
      userDropData();
    }
    getPreference()
  }, []);

  const userDropData = async () => {
    const gettinguserDropDown = await dispatch(
      UserDataBasedOnBranchId(BranchId)
    ).unwrap();
    if (gettinguserDropDown?.data?.statusCode === 1) {
      let finaluserDropDown = gettinguserDropDown?.data?.data?.filter(
        (value) => value.ActiveStatus === 'A'
      );
      finaluserDropDown.push({ UserId: 0, UserName: 'All User' });
      // let admindtl = {"UserId":finaluserDropDown?.[0]?.AdminDetail?.[0]?.UserId,
      // "UserName":finaluserDropDown?.[0]?.AdminDetail?.[0]?.UserName+' ('+"Admin"+')'};
      // finaluserDropDown.push(admindtl);

      setSelectedUserData(0);
      formRef.current?.setFieldsValue({
        UserId: 0,
      });

      setuserDropDown(finaluserDropDown);
    }
  };

  const fetchInitialData = async () => {
    let currentDate = new Date().toJSON().slice(0, 10);
    formRef?.current?.setFieldsValue({
      dateRange: [dayjs(currentDate, 'YYYY-MM-DD'), dayjs(currentDate, 'YYYY-MM-DD')],
    });
    setOrderFromDate(currentDate + 'T00:00:00');
    setOrderToDate(currentDate + 'T23:59:59');
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      OrderFromDate: currentDate,
      OrderToDate: currentDate,
      UserId: UserRole != 'Employee' ? 0 : UserId,
      type: 'E',
      filterType: Selecttype,
    };

    let response = await dispatch(getEstimateDatewiseReport(data)).unwrap();
    if (response?.data?.statusCode === 1) {
      setDatewiseData(response?.data?.data);
      setdataSource(response?.data?.data?.[0]?.OrderDetails);
      setTotalCashInHand(response?.data?.data?.[0]?.OrderDetails);
    } else {
      setDatewiseData([]);
      setdataSource([]);
    }
  };

  const columns = [
    {
      title: 'SL NO',
      dataIndex: 'SINO',
      key: 'SINO',
      align: 'center',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
      ),
    },
    {
      title: 'Payment Type',
      dataIndex: 'PaymentMethod',
      key: 'PaymentMethod',
    },
    {
      title: 'Count',
      dataIndex: 'TotalOrders',
      key: 'TotalOrders',
      align: 'right',
    },
    {
      title: 'Amount Collected',
      dataIndex: 'BillAmount',
      key: 'BillAmount',
      align: 'right',
      render: (text) => (
        <span style={{ color: 'black' }}>{safeRound(text)}</span>
      ),
    },
  ];

  // const onChange = (checked) => {
  //     setOpenDenomination(checked);
  // };

  const hide = () => {
    setOpen(false);
  };
  const handleOpenChange = (newOpen) => {
    setOpen(newOpen);
  };
  const OrderDateRangeFetch = (dates, dateStrings) => {
    const [from, to] = dates || [];
    const [fromStr, toStr] = dateStrings || [];

    if (!from || !fromStr) {
      setOrderFromDate(undefined);
      formRef.current?.setFieldsValue({ Fromdate: undefined });
    } else {
      const DateFrom = `${fromStr.split('-').reverse().join('-')}T00:00:00`;
      setOrderFromDate(DateFrom);
      formRef.current?.setFieldsValue({ Fromdate: DateFrom });
    }

    if (!to || !toStr) {
      setOrderToDate(undefined);
      formRef.current?.setFieldsValue({ Todate: undefined });
    } else {
      const toIso = `${toStr.split('-').reverse().join('-')}T23:59:59`;
      setOrderToDate(toIso);
      formRef.current?.setFieldsValue({ Todate: toIso });
    }
  };

  const UserDropDownChange = async (e) => {
    setUserId(e);
    let mob = userDropDown?.filter((item) => item?.UserId === e);
    formRef.current?.setFieldsValue({
      UserId: e,
      MobileNo: mob?.[0]?.MobileNo,
    });
    setSelectedUserData(e);
  };


  const Print = async () => {
    let LogoImage = '';
    let OrderId = '';
    let UpiId = '';
    let TokenData = '';
    let FooterPrint = '';
    if (isMobile) {
      if (MobileA4Print) {
        ReportMobilePDFPrint({
          printId: 'RePrint',
          printStyle: style,
        });
      }
      else {
        var textEncoded = encodeURI(receiptText);
        var TypeCheck = 'PrintReceipt';
        var scheme = 'pozoprinter';
        var packageName = 'com.example.pozoprinter';

        window.location.href =
          scheme +
          '://' +
          textEncoded +
          '#Intent;scheme=' +
          scheme +
          ';package=' +
          packageName +
          'ImgS' +
          LogoImage +
          'ImgE' +
          TypeCheck +
          'TokenS' +
          TokenData +
          'TokenE' +
          'EstimateS' +
          '' +
          'EstimateE' +
          'HasFooterTextS' +
          FooterPrint +
          'HasFooterTextE' +
          ';end;';
      }
    } else {
      await printDiv('RePrint', style);
    }
  };

  const onFinish = async (values) => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      OrderFromDate: OrderFromDate?.split('T')?.[0],
      OrderToDate: OrderToDate?.split('T')?.[0],
      UserId: UserId,
      type: 'E',
      filterType: Selecttype,
    };

    let response = await dispatch(getEstimateDatewiseReport(data)).unwrap();
    if (response?.data?.statusCode === 1) {
      setDatewiseData(response?.data?.data);
      setdataSource(response?.data?.data?.[0]?.OrderDetails);
    } else {
      setDatewiseData([]);
      setdataSource([]);
    }
  };
  const TotalBill = datewiseData?.[0]?.TotalBillAmount;

  const handleDenominationChange = (data) => {
    setDenominationData(data);
  };

  const selectdataType = (e) => {
    setSelecttype(e);
    // formRef.current?.resetFields()
  };

  return (
    <div className="DateWiseReport-container">
      <div style={{ display: 'none' }}>
        <DatewiseReportPdf
          OrderFromDate={OrderFromDate?.split('T')?.[0]}
          OrderToDate={OrderToDate?.split('T')?.[0]}
          dataSource={dataSource}
          TotalBill={TotalBill}
          datewiseData={datewiseData}
          TotalOrders={datewiseData?.[0]?.Orders}
          TotalBillAmount={datewiseData?.[0]?.TotalBillAmount}
          TaxAmount={datewiseData?.[0]?.TaxAmount}
          TotalNetAmount={datewiseData?.[0]?.TotalNetAmount}
        />
      </div>
      <Form ref={formRef} onFinish={onFinish}>
        <div
          className="DateWiseReport-dateandheading"
          style={{ display: 'flex' }}
        >
          <p className="DateWiseReport-heading">
            Estimate Daily Sales
          </p>

          <div className="DateWiseReport-dateaAnd-buttons">
            <div
              className="DateWiseReport-Date-picker"
              style={{ display: 'flex', flexDirection: 'row', rowGap: '1rem' }}
            >
              <div className="DateWiseReport-datepic">
                <div className="DateWiseReport-DateFrom">
                  <Form.Item
                    name="dateRange"
                    initialValue={[dayjs(), dayjs()]}
                    rules={[
                      {
                        required: true,
                        message: 'Please select From and To Dates',
                      },
                    ]}
                  >
                    <RangePicker
                      format="DD-MM-YYYY"
                      allowClear
                      disabledDate={(current) => current && current > dayjs()}
                      onChange={(dates, dateStrings) => {
                        OrderDateRangeFetch(dates, dateStrings);
                      }}
                      placeholder={['From Date', 'To Date']}
                    />
                  </Form.Item>
                </div>

                <div className="datewise-userDropDown">
                  {UserRole != 'Employee' && (
                    <Form.Item
                      name="UserId"
                      rules={[
                        {
                          required: true,
                          message: 'Please Select User Name',
                        },
                      ]}
                    >
                      <DropDowns
                        options={userDropDown?.map((option) => ({
                          value: option?.UserId,
                          label: option?.UserName,
                        }))}
                        label={<label>User Name</label>}
                        id="UserId"
                        field="UserId"
                        fieldState={true}
                        fieldApi={true}
                        className="field-DropDown-Emp"
                        onChangeFunction={(e) => UserDropDownChange(e)}
                        isOnchanges={selectedUserData ? true : false}
                        valueData={selectedUserData}
                      // defaultValue={LastSelectConfig}
                      />
                    </Form.Item>
                  )}
                </div>
                <Form.Item name="Select">
                  <RadioGrpButton
                    content={[
                      { value: 'A', label: 'All' },
                      { value: 'I', label: 'Individual' },
                    ]}
                    fieldState={true}
                    defaultSelect={Selecttype}
                    onSelectFuntion={(e) => selectdataType(e)}
                    onClickFunction={(e) => selectdataType(e)}
                  />
                </Form.Item>
              </div>
            </div>
            <div className="DateWiseReport-submit-prnt">
              <div>
                <Tooltip title="Submit to search">
                  <button
                    type="submit"
                    style={{
                      display: 'flex',
                      gap: '1rem',
                      alignItems: 'center',
                      fontFamily: 'Poppins, sans-serif',
                    }}
                    className="DateWiseReport-submit-btn"
                  >
                    SEARCH <IoSearch />
                  </button>
                </Tooltip>
              </div>
              <div>
                <Tooltip title="Print">
                  <BiSolidPrinter
                    className={
                      datewiseData?.length > 0
                        ? 'DateWiseReport-printerIcon'
                        : 'DateWiseReport-printerIcon-disabled'
                    }
                    onClick={Print}
                  />
                </Tooltip>
              </div>
            </div>
          </div>
        </div>

        <div className="DateWiseReport-coontent-body">
          <div
            className={
              openDenomination
                ? 'DateWiseReport-table-withDenom'
                : 'DateWiseReport-table-withoutDenom'
            }
          >
            {/* <div className="DateWiseReport-table">
                            <Tables columns={columns} data={dataSource} />
                        </div> */}

            <div className="DateWiseReport-table">
              <table className="custom-table">
                <thead>
                  <tr>
                    <th rowSpan="2" style={{ textAlign: 'center' }}>
                      S.No
                    </th>
                    {dataSource?.[0]?.Date && <th rowSpan="2" style={{ textAlign: 'center' }}>
                      Date
                    </th>}
                    <th colSpan="2" style={{ textAlign: 'center' }}>
                      Cash
                    </th>
                    <th colSpan="2" style={{ textAlign: 'center' }}>
                      UPI
                    </th>
                    <th colSpan="2" style={{ textAlign: 'center' }}>
                      Card
                    </th>
                    <th colSpan="2" style={{ textAlign: 'center' }}>
                      Credit
                    </th>
                    <th rowSpan="2" style={{ textAlign: 'center' }}>
                      Total
                    </th>
                  </tr>
                  <tr>
                    <th style={{ textAlign: 'center' }}>Count</th>
                    <th style={{ textAlign: 'center' }}>Amt</th>
                    <th style={{ textAlign: 'center' }}>Count</th>
                    <th style={{ textAlign: 'center' }}>Amt</th>
                    <th style={{ textAlign: 'center' }}>Count</th>
                    <th style={{ textAlign: 'center' }}>Amt</th>
                    <th style={{ textAlign: 'center' }}>Count</th>
                    <th style={{ textAlign: 'center' }}>Amt</th>
                  </tr>
                </thead>
                <tbody>
                  {dataSource && dataSource.length > 0 ? (
                    dataSource.map((row, idx) => {
                      const date = row.Date

                      const cashCount = row.CashCount || 0;
                      const cashAmount = safeRound(row.CashAmount || 0);
                      const upiCount = row.UpiCount || 0;
                      const upiAmount = safeRound(row.UpiAmount || 0);
                      const cardCount = row.CardCount || 0;
                      const cardAmount = safeRound(row.CardAmount || 0);
                      const creditCount = row.CreditCount || 0;
                      const creditAmount = safeRound(row.CreditAmount || 0);
                      const totalAmt =
                        Number(row.CashAmount || 0) +
                        Number(row.UpiAmount || 0) +
                        Number(row.CardAmount || 0) +
                        Number(row.CreditAmount || 0);

                      return (
                        <tr key={row.Date + idx}>
                          <td style={{ textAlign: 'center' }}>{idx + 1}</td>
                          {dataSource?.[0]?.Date && <td style={{ textAlign: 'center' }}>{ExtractDateFormate(date)}</td>}
                          <td style={{ textAlign: 'right' }}>{cashCount}</td>
                          <td style={{ textAlign: 'right' }}>{cashAmount}</td>
                          <td style={{ textAlign: 'right' }}>{upiCount}</td>
                          <td style={{ textAlign: 'right' }}>{upiAmount}</td>
                          <td style={{ textAlign: 'right' }}>{cardCount}</td>
                          <td style={{ textAlign: 'right' }}>{cardAmount}</td>
                          <td style={{ textAlign: 'right' }}>{creditCount}</td>
                          <td style={{ textAlign: 'right' }}>{creditAmount}</td>
                          <td style={{ textAlign: 'right' }}>
                            {safeRound(totalAmt)}
                          </td>
                        </tr>
                      );
                    })
                  ) : (
                    <tr>
                      <td
                        colSpan="11"
                        style={{ textAlign: 'center', padding: '10px' }}
                      >
                        No data found
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
            {/* <div className="DateWiseReport-mobile-screen-Denomination">
              <p>Denomination:</p>
              <Popover
                // content={<a onClick={hide}>Close</a>}
                content={<Denomination />}
                trigger="click"
                open={open}
                onOpenChange={handleOpenChange}
              >
                <div className="DateWiseReport-popup-button">
                                    <BiUpArrowCircle style={{ fontSize: "25px" }} />
                </div>
              </Popover>
                        </div> */}

            <div className="DateWiseReport-Amount-Collected-container">
              {!datewiseData?.[0]?.TotalOverallDisc && (
                <div className="DateWiseReport-total-amoutnt-container">
                  <p className="DateWiseReport-Amount-Collected">
                    Total Amount :
                    {safeRound(datewiseData?.[0]?.TotalBillAmount)}
                  </p>
                </div>
              )}

              {/* <div className="DateWiseReport-toggle-container">
                <p>Denomination</p> <Switch onChange={onChange} />
                            </div> */}

              <div className="DateWiseReport-Amount-Collected-table">
                <table className="DateWiseReport-Amount-Collected-table-div">
                  <thead>
                    <tr>
                      <th>Total Orders</th>
                      <th>{datewiseData?.[0]?.Orders}</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>Total Bill</td>
                      <td>{safeRound(datewiseData?.[0]?.TotalBillAmount)}</td>
                    </tr>

                    {datewiseData?.[0]?.TotalOverallDisc > 0 && (
                      <tr>
                        <td>Discount Amount</td>
                        <td>
                          {safeRound(datewiseData?.[0]?.TotalOverallDisc)}
                        </td>
                      </tr>
                    )}
                    {datewiseData?.[0]?.TaxAmount > 0 && (
                      <tr>
                        <td>Total Tax</td>
                        <td>{safeRound(datewiseData?.[0]?.TaxAmount)}</td>
                      </tr>
                    )}
                    <p className="DateWiseReport-border-dashed"></p>
                    <tr>
                      <td className="DateWiseReport-netAmount">Net</td>
                      <td className="DateWiseReport-netAmount">
                        {safeRound(datewiseData?.[0]?.TotalNetAmount)}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          {/* {openDenomination && (
            <div className="DateWiseReport-denomination-container">
              <div className="DateWiseReport-denomination">
                <>
                  <Denomination onchange={handleDenominationChange} />
                  {TotalCashInHand[0]?.PaymentMethod === 'Cash' &&
                    TotalCashInHand[0]?.NetAmount <
                      parseInt(denominationData?.OverAllTotal) &&
                    parseInt(denominationData?.OverAllTotal) > 0 && (
                      <div
                        className="amountMissmatch"
                        style={{
                          color: '#ff0000',
                          fontSize: '20px',
                          fontWeight: '600',
                          width: '100%',
                          textAlign: 'right',
                          backgroundColor: 'rgb(232, 236, 241)',
                        }}
                      >
                        Amount is Mismatching
                      </div>
                    )}
                </>
              </div>
            </div>
                    )} */}
        </div>
      </Form>
    </div>
  );
};

export default EstimateDateWiseReport;