import { Button, Card, Col, DatePicker, Form, Input, Row, Select, Table ,Typography} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { SaleOrderService } from '@gtpl/shared-services/sale-management';
import { DownloadOutlined, SearchOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { SortOrder } from 'antd/lib/table/interface';
import { Excel } from 'antd-table-saveas-excel';
import form from 'antd/lib/form';
import { useForm } from 'antd/lib/form/Form';
import { UnitcodeService } from '../../../../../../shared-services/masters/src/lib/unit-code.services'
import { AgingReq, DutyDrawBackReportReq } from '@gtpl/shared-models/finance';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { PlantsDropDown } from '@gtpl/shared-models/masters';
import moment from 'moment';
import { Tabs } from 'antd';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
const { TabPane } = Tabs;
import { CollectionsService } from '@gtpl/shared-services/finance';
const InvoiceWiseAgingReport = () => {
  const [page, setPage] = React.useState(1);
  const CollectionService = new CollectionsService();
  const [searchText, setSearchText] = useState('');
  const [plantData, setPlantData] = useState<PlantsDropDown[]>([]);
  const [searchedColumn, setSearchedColumn] = useState('');
  const [unitId, setUnitId] = useState<number>(0);
  const [unitCodes,setUnitCodes]=useState([])
  const saleOrderService = new SaleOrderService();
  const { RangePicker } = DatePicker;
  const unitsService = new UnitcodeService()
  const searchInput = useRef(null);
  const { Text } = Typography;
  const { Option } = Select;
    const [reportRMData, setReportRMData] = useState([]);
      const [reportPMData, setReportPMData] = useState([]);
const [activeTab, setActiveTab] = useState("1");
const [rmForm] = Form.useForm();
const [pmForm] = Form.useForm();

  const [form ] = useForm()
  useEffect(() => {
    getRMInvoiceWiseData()
    getPMInvoiceWiseData()
    getAllPlants()
  }, []);


const getRMInvoiceWiseData = () => {
 const dateRange = rmForm.getFieldValue('invoiceDate');
  const fromDate = dateRange ? dateRange[0].format('YYYY-MM-DD') : '';
  const toDate = dateRange ? dateRange[1].format('YYYY-MM-DD') : '';
  const req = new AgingReq(
    fromDate,
    toDate,
    rmForm.getFieldValue('unitId') || undefined
  );

  CollectionService.getRMInvoiceWiseData(req)
    .then(res => {
      console.log(req, 'rmmmmmmmmmmm');
      if (res.status) {
        if (res.data && res.data.length > 0) {
          setReportRMData(res.data);
        } else {
          setReportRMData([]);
          AlertMessages.getErrorMessage("No data available for the selected criteria.");
        }
      } else {
        setReportRMData([]);
        AlertMessages.getErrorMessage(res.internalMessage || "Something went wrong.");
      }
    })
    .catch(err => {
      setReportRMData([]);
      AlertMessages.getErrorMessage(err.message || "Failed to fetch data.");
    });
};

const getPMInvoiceWiseData= () => {
  const dateRange = pmForm.getFieldValue('invoiceDate');
  const fromDate = dateRange?.[0]?.format('YYYY-MM-DD') || '';
  const toDate = dateRange?.[1]?.format('YYYY-MM-DD') || '';
  const unitId = pmForm.getFieldValue('unitId') || undefined;
  const req = new AgingReq(fromDate, toDate, unitId);
   CollectionService.getPMInvoiceWiseData(req).then(res => {
    console.log(req,'pmmmmmmmmmm')
      if (res.status) {
        if (res.data && res.data.length > 0) {
          setReportPMData(res.data);
        } else {
          setReportPMData([]);
          AlertMessages.getErrorMessage("No data available for the selected criteria.");
        }
      } else {
        setReportPMData([]);
        AlertMessages.getErrorMessage(res.internalMessage || "Something went wrong.");
      }
    })
    .catch(err => {
      setReportPMData([]);
      AlertMessages.getErrorMessage(err.message || "Failed to fetch data.");
    });
};
  const getColumnSearchProps = (dataIndex: string) => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
      <div style={{ padding: 8 }}>
        <Input
          ref={searchInput}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => (
      <SearchOutlined type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
    ),
    onFilter: (value, record) =>
      record[dataIndex]
        ? record[dataIndex]
          .toString()
          .toLowerCase()
          .includes(value.toLowerCase())
        : false,
    onFilterDropdownVisibleChange: visible => {
      if (visible) { setTimeout(() => searchInput.current.select()); }
    },
    render: text =>
      text ? (
        searchedColumn === dataIndex ? (
          <Highlighter
            highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
            searchWords={[searchText]}
            autoEscape
            textToHighlight={text.toString()}
          />
        ) : text
      ) : null
  });

  const getAllPlants = () => {
    unitsService.getAllMainPlants().then((res) => {
        if (res.status) {
            setPlantData(res.data);
        } else {
            setPlantData([]);
        }
    }).catch(err => {
        AlertMessages.getErrorMessage(err.message);
        setPlantData([]);
    })
}

  function handleSearch(selectedKeys, confirm, dataIndex) {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  function handleReset(clearFilters) {
    clearFilters();
  };

 

  const onReset = () => {
  rmForm.resetFields();
  pmForm.resetFields();
  getRMInvoiceWiseData();
  getPMInvoiceWiseData();
  setPage(1);
};


 
  const formatINR = (amount: number) => {
    if (!amount) return '0';
    return `₹${new Intl.NumberFormat('en-IN').format(amount)}`;
  };

  const handleUnit = (value) => {
    setUnitId(value)
     rmForm.setFieldsValue({ unitId: value }); 
    pmForm.setFieldsValue({ unitId: value }); 
  
  }

  const getTotal = (pageData, key) => {
    return pageData.reduce((total, record) => total + (Number(record[key]) || 0), 0);
  };
  const handleTabChange = (key) => {
  setActiveTab(key);
};

  const rmcolumns = [
    {
      title: 'S No',
      key: 'sno',
      width: '70px',
      render: (text, record, index) => (page - 1) * 10 + (index + 1),
    },
    {title:'Unit' ,
      dataIndex:'unitName',
      width: '240px',
      sorter: (a, b) => a.unitName?.localeCompare(b.unitName),
      sortDirections: ['descend', 'ascend'] as SortOrder[],
      ...getColumnSearchProps('unitName'),
       render:(text)=> text || '-',
    },
    {
      title:'Invoice Date' ,
       dataIndex:'invoiceDate' ,
       width: '120px',
       sorter: (a, b) => moment(a.invoiceDate).valueOf() - moment(b.invoiceDate).valueOf(),
       sortDirections: ['descend', 'ascend'] as SortOrder[],     
       render: (text) => text ? moment(text).format('DD-MM-YYYY') : '-'
      },
      {title:'Invoice Number' ,
      dataIndex:'invNo',
      width: '240px',
      sorter: (a, b) => a.invNo.localeCompare(b.invNo),
      sortDirections: ['descend', 'ascend'] as SortOrder[],
      ...getColumnSearchProps('invNo'),
    },
   {
  title: 'Farmer Name',
  dataIndex: 'farmerName', 
  key: 'farmerName',
  width: '240px',
  sorter: (a, b) => {
    const nameA = a.farmerName || a.farmerName || '';
    const nameB = b.farmerName || b.farmerName || '';
    return nameA.localeCompare(nameB);
  },
  sortDirections: ['descend', 'ascend'] as SortOrder[],
  ...getColumnSearchProps('farmerName'), 
  render: (_: any, record: any) => {
    return record.farmerName || record.farmerName || '-';
  },
},
{
      title: 'total Amount',
      dataIndex: 'totalAmount',
      key: 'totalAmount',
      width: '140px',
      sorter: (a, b) => a.totalAmount - b.totalAmount,
 render: (rec,value) => Number(Number(value.totalAmount)-Number(value.tdsAmount))
    },

    {
      title: 'Due Amount',
      dataIndex: 'pending',
      key: 'pending',
      width: '140px',
      sorter: (a, b) => a.pending - b.pending,
render: (value) =>
    new Intl.NumberFormat('en-IN', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(value)    },
    {
      title: '0-10',
      dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '0-10' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }    },
    {
      title: '10-20',
     dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '10-20' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }    
    },
    {
      title: '20-30',
       dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '20-30' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
    {
      title: '30-40',
      dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '30-40' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
    {
      title: '40-50',
       dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '40-50' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
    {
      title: '50-60',
        dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '50-60' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
     {
      title: '60-80',
      dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '60-80' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
     {
      title: 'above 80',
       dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '80+' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
  ];
  const pmcolumns = [
    {
      title: 'S No',
      key: 'sno',
      width: '70px',
      render: (text, record, index) => (page - 1) * 10 + (index + 1),
    },
    {title:'Unit' ,
      dataIndex:'unitName',
      width: '240px',
      sorter: (a, b) => a.unitName.localeCompare(b.unitName),
      sortDirections: ['descend', 'ascend'] as SortOrder[],
      ...getColumnSearchProps('unitName'),
       render:(text)=> text || '-',
    },
    {
      title:'Invoice Date' ,
       dataIndex:'invoiceDate' ,
       width: '120px',
       sorter: (a, b) => moment(a.invoiceDate).valueOf() - moment(b.invoiceDate).valueOf(),
       sortDirections: ['descend', 'ascend'] as SortOrder[],     
       render: (text) => text ? moment(text).format('DD-MM-YYYY') : '-'
      },
      {title:'Invoice Number' ,
      dataIndex:'invNo',
      width: '240px',
      sorter: (a, b) => a.invNo.localeCompare(b.invNo),
      sortDirections: ['descend', 'ascend'] as SortOrder[],
      ...getColumnSearchProps('invNo'),
    },
   {
  title: 'Vendor Name',
  dataIndex: 'vendorName', 
  key: 'vendorName',
  width: '240px',
  ...getColumnSearchProps('vendorName'), 
},
{
      title: 'total Amount',
      dataIndex: 'totalAmount',
      key: 'totalAmount',
      width: '140px',
      sorter: (a, b) => a.totalAmount - b.totalAmount,
 render: (rec,value) => Number(Number(value.totalAmount)-Number(value.tdsAmount))
    },

    {
      title: 'Due Amount',
      dataIndex: 'pending',
      key: 'pending',
      width: '140px',
      sorter: (a, b) => a.pending - b.pending,
render: (value) => Number(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    },
     {
      title: '0-10',
      dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '0-10' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }    },
    {
      title: '10-20',
     dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '10-20' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }    
    },
    {
      title: '20-30',
       dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '20-30' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
    {
      title: '30-40',
      dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '30-40' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
    {
      title: '40-50',
       dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '40-50' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
    {
      title: '50-60',
        dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '50-60' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
     {
      title: '60-80',
      dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '60-80' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
     {
      title: 'above 80',
       dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '80+' ? record.pending || 0 : 0;
    return (
      <span>
        {new Intl.NumberFormat('en-IN', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        }).format(amount)}
      </span>
    );
  }      
    },
  ];
const getExcelData = (columns, data, page = 1) => {
  const headers = columns.map(col => col.title);

  const rows = data.map((record, index) => {
    return columns.map(col => {
      const key = col.dataIndex || col.key;
      if (typeof col.render === 'function') {
        if (key === 'sno') {
          return col.render(null, record, index); 
        }
        return col.render(record[key], record, index);
      }
      let value = record[key];
      if (typeof value === 'number') return value;
      if (typeof value === 'string') return value;
      if (value == null) return '';
      return value.toString();
    });
  });

  return [headers, ...rows];
};

  const rmExcelColumns = [
    {
      title: 'S No',
      key: 'sno',
      render: (text, record, index) => (page - 1) * 10 + (index + 1),
    },
    {title:'Unit' ,
      dataIndex:'unitName',
     render:(text)=> text || '-',
    },
    {
      title:'Invoice Date' ,
       dataIndex:'invoiceDate' ,
       render: (text) => text ? moment(text).format('DD-MM-YYYY') : '-'
      },
      {title:'Invoice Number' ,
      dataIndex:'invNo',
       },
   {
  title: 'Farmer Name',
  dataIndex: 'farmerName', 
 render: (_: any, record: any) => {
    return record.farmerName || record.farmerName || '-';
  },
},
{
      title: 'total Amount',
      dataIndex: 'totalAmount',
     render: (value) =>
    new Intl.NumberFormat('en-IN', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(value)
    },

    {
      title: 'Due Amount',
      dataIndex: 'pending',
     render: (value) =>
    new Intl.NumberFormat('en-IN', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    }).format(value)    },
    {
      title: '0-10',
      dataIndex: 'agingBucket',
render: (text, record) => {
    const amount = record.agingBucket === '0-10' ? record.pending || 0 : 0;
    return amount
  }    },
    {
      title: '10-20',
     dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '10-20' ? record.pending || 0 : 0;
    return amount
  }    
    },
    {
      title: '20-30',
       dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '20-30' ? record.pending || 0 : 0;
    return amount
  }      
    },
    {
      title: '30-40',
      dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '30-40' ? record.pending || 0 : 0;
    return amount
  }      
    },
    {
      title: '40-50',
       dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '40-50' ? record.pending || 0 : 0;
    return amount
  }      
    },
    {
      title: '50-60',
        dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '50-60' ? record.pending || 0 : 0;
    return amount
  }      
    },
     {
      title: '60-80',
      dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '60-80' ? record.pending || 0 : 0;
    return amount
  }      
    },
     {
      title: 'above 80',
       dataIndex: 'agingBucket',
      width: '120px',
render: (text, record) => {
    const amount = record.agingBucket === '80+' ? record.pending || 0 : 0;
    return amount
  }      
    },
  ];
    const pmExcelColumns = [
    {
      title: 'S No',
      key: 'sno',
      render: (text, record, index) => (page - 1) * 10 + (index + 1),
    },
    {title:'Unit' ,
      dataIndex:'unitName',
      render:(text)=> text || '-',
    },
    {
      title:'Invoice Date' ,
       dataIndex:'invoiceDate' ,
     render: (text) => text ? moment(text).format('DD-MM-YYYY') : '-'
      },
      {title:'Invoice Number' ,
      dataIndex:'invNo',
    },
   {
  title: 'Vendor Name',
  dataIndex: 'vendorName', 
 
},
{
      title: 'total Amount',
      dataIndex: 'totalAmount',
    render: (value) => Number(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    },

    {
      title: 'Due Amount',
      dataIndex: 'pending',
     render: (value) => Number(value).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    },
     {
      title: '0-10',
      dataIndex: 'agingBucket',
render: (text, record) => {
    const amount = record.agingBucket === '0-10' ? record.pending || 0 : 0;
    return amount
  }    },
    {
      title: '10-20',
     dataIndex: 'agingBucket',
render: (text, record) => {
    const amount = record.agingBucket === '10-20' ? record.pending || 0 : 0;
    return amount
  }    
    },
    {
      title: '20-30',
       dataIndex: 'agingBucket',
render: (text, record) => {
    const amount = record.agingBucket === '20-30' ? record.pending || 0 : 0;
    return amount
  }      
    },
    {
      title: '30-40',
      dataIndex: 'agingBucket',
render: (text, record) => {
    const amount = record.agingBucket === '30-40' ? record.pending || 0 : 0;
    return amount
  }      
    },
    {
      title: '40-50',
       dataIndex: 'agingBucket',
render: (text, record) => {
    const amount = record.agingBucket === '40-50' ? record.pending || 0 : 0;
    return amount
  }      
    },
    {
      title: '50-60',
        dataIndex: 'agingBucket',
render: (text, record) => {
    const amount = record.agingBucket === '50-60' ? record.pending || 0 : 0;
    return amount
  }      
    },
     {
      title: '60-80',
      dataIndex: 'agingBucket',
render: (text, record) => {
    const amount = record.agingBucket === '60-80' ? record.pending || 0 : 0;
    return amount
  }      
    },
     {
      title: 'above 80',
       dataIndex: 'agingBucket',
render: (text, record) => {
    const amount = record.agingBucket === '80+' ? record.pending || 0 : 0;
    return amount
  }      
    },
  ];
const exportExcel = () => {
  const rmData = getExcelData(rmExcelColumns, reportRMData, page);
  const pmData = getExcelData(pmExcelColumns, reportPMData, page);

  const workbook = XLSX.utils.book_new();

  const rmSheet = XLSX.utils.aoa_to_sheet(rmData);
  XLSX.utils.book_append_sheet(workbook, rmSheet, 'RM Data');

  const pmSheet = XLSX.utils.aoa_to_sheet(pmData);
  XLSX.utils.book_append_sheet(workbook, pmSheet, 'PM Data');

  const excelBuffer = XLSX.write(workbook, {
    bookType: 'xlsx',
    type: 'array'
  });

  const fileData = new Blob([excelBuffer], { type: 'application/octet-stream' });
  saveAs(fileData, 'InvoiceWiseReport.xlsx');
};


  return (
    <div>
      <Card
        size="small"
        title={<span style={{ color: 'white' }}>Invoice Aging Wise Report</span>}
        style={{ textAlign: 'center' }}
        headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
        extra={
          <div>
            <Button
              icon={<DownloadOutlined />}
            onClick={exportExcel}
              style={{ marginRight: 30 }}
            >
              Get Excel
            </Button>
          </div>
        }
      >
         <div className="card-container">
          <Tabs  type={'card'} tabPosition={'top'} activeKey={activeTab} onChange={handleTabChange}>
            <TabPane
                key="1"
                tab={<span>{'RM'}</span>}
              >
         <Form form={rmForm} onFinish={getRMInvoiceWiseData}>
                        <Row gutter={24}>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
                        <Form.Item
                        name="unitId"
                        
                        label="Unit"
                        rules={[
                            {
                                required: false, message: 'Select Unit',
                            },
                        ]}
                    >
                        <Select
                            showSearch
                            optionFilterProp="children"
                            filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            placeholder="Select Unit"
                            allowClear
                            style={{ width: '100%' }}
                            onChange={handleUnit}
                            // disabled={Number(localStorage.getItem('unit_id')) != 5 ? true : false}
                        >
                            {plantData.map(dropData => {
                                return <Option value={dropData.plantId}>{dropData.plantCode}</Option>
                            })}
                        </Select>
                    </Form.Item>
                </Col>
        
                          <Col>
                            <Form.Item label="Invoice Date" name="invoiceDate">
                              <RangePicker
                                />
                            </Form.Item>
                          </Col>
                          <Col>
                            <Form.Item>
                              <Button
                                type="primary"
                                htmlType="submit"
                                style={{ width: "100%" }}
                              >
                                Search
                              </Button>
                            </Form.Item>
                          </Col>
                          <Col>
                            <Form.Item>
                              <Button
                                danger
                                // icon={<UndoOutlined />}
                                onClick={onReset}
                                style={{ width: "100%" }}
                              >
                                Reset
                              </Button>
                            </Form.Item>
                          </Col>
                        </Row>
                      </Form>
        
        <Table
          style={{ padding: '5px ' }}
          size="small"
          columns={rmcolumns}
          dataSource={reportRMData}
          scroll={{ x: true }}
          bordered
          pagination={{
            // pageSize: 10,
            current: page,
            onChange: (currentPage) => setPage(currentPage),
          }}
              summary={(pageData) => {
                          let due = 0;
                          let totalAmt = 0;
                        
                          pageData.forEach(({ pending,totalAmount}) => {
                             totalAmt += parseFloat(totalAmount) || 0;
                              due+=parseFloat(pending) || 0;
                           });
                        
                          return (
                            <Table.Summary.Row>
                              <Table.Summary.Cell index={5} colSpan={5}>
                                Total
                              </Table.Summary.Cell>
                              <Table.Summary.Cell index={6}>
                                {totalAmt.toFixed(2)}
                              </Table.Summary.Cell>
                              <Table.Summary.Cell index={7}>
                                {due.toFixed(2)}
                              </Table.Summary.Cell>
                              
                              <Table.Summary.Cell index={8}></Table.Summary.Cell>
                              <Table.Summary.Cell index={9}></Table.Summary.Cell>
                              <Table.Summary.Cell index={10}></Table.Summary.Cell>
                              <Table.Summary.Cell index={11}></Table.Summary.Cell>
                              <Table.Summary.Cell index={12}></Table.Summary.Cell>
                              <Table.Summary.Cell index={13}></Table.Summary.Cell>
                              <Table.Summary.Cell index={14}></Table.Summary.Cell>
                              {/* <Table.Summary.Cell index={9}>
                              </Table.Summary.Cell> */}
                            </Table.Summary.Row>
                          );
                        }} 
         
         
        /></TabPane>
        <TabPane
          key="2"
                tab={<span>{'Packing'}</span>}>
                   <Form form={pmForm} onFinish={getPMInvoiceWiseData} >
                        <Row gutter={24}>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
                        <Form.Item
                        name="unitId"
                        label="Unit"
                        rules={[
                            {
                                required: false, message: 'Select Unit',
                            },
                        ]}
                    >
                        <Select
                            showSearch
                            optionFilterProp="children"
                            filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            placeholder="Select Unit"
                            allowClear
                            style={{ width: '100%' }}
                            onChange={handleUnit}
                            // disabled={Number(localStorage.getItem('unit_id')) != 5 ? true : false}
                        >
                            {plantData.map(dropData => {
                                return <Option value={dropData.plantId}>{dropData.plantCode}</Option>
                            })}
                        </Select>
                    </Form.Item>
                </Col>
        
                          <Col>
                            <Form.Item label="Invoice Date" name="invoiceDate">
                              <RangePicker
                                />
                            </Form.Item>
                          </Col>
                          <Col>
                            <Form.Item>
                              <Button
                                type="primary"
                                htmlType="submit"
                                style={{ width: "100%" }}
                              >
                                Search
                              </Button>
                            </Form.Item>
                          </Col>
                          <Col>
                            <Form.Item>
                              <Button
                                danger
                                // icon={<UndoOutlined />}
                                onClick={onReset}
                                style={{ width: "100%" }}
                              >
                                Reset
                              </Button>
                            </Form.Item>
                          </Col>
                        </Row>
                      </Form>
        
        <Table
          style={{ padding: '5px ' }}
          size="small"
          columns={pmcolumns}
          dataSource={reportPMData}
          scroll={{ x: true }}
          bordered
          pagination={{
            // pageSize: 10,
            current: page,
            onChange: (currentPage) => setPage(currentPage),
          }}
            summary={(pageData) => {
                          let due = 0;
                          let totalAmt = 0;
                        
                          pageData.forEach(({ pending,totalAmount}) => {
                             totalAmt += parseFloat(totalAmount) || 0;
                              due+=parseFloat(pending) || 0;
                           });
                        
                          return (
                            <Table.Summary.Row>
                              <Table.Summary.Cell index={5} colSpan={5}>
                                Total
                              </Table.Summary.Cell>
                              <Table.Summary.Cell index={6}>
                                {totalAmt.toFixed(2)}
                              </Table.Summary.Cell>
                              <Table.Summary.Cell index={7}>
                                {due.toFixed(2)}
                              </Table.Summary.Cell>
                              <Table.Summary.Cell index={8}></Table.Summary.Cell>
                              <Table.Summary.Cell index={9}></Table.Summary.Cell>
                              <Table.Summary.Cell index={10}></Table.Summary.Cell>
                              <Table.Summary.Cell index={11}></Table.Summary.Cell>
                              <Table.Summary.Cell index={12}></Table.Summary.Cell>
                              <Table.Summary.Cell index={13}></Table.Summary.Cell>
                              <Table.Summary.Cell index={14}></Table.Summary.Cell>

                              {/* <Table.Summary.Cell index={9}>
                              </Table.Summary.Cell> */}
                            </Table.Summary.Row>
                          );
                        }} 
         
        />
          </TabPane></Tabs></div>
      </Card>
    </div>
  );
};


export default InvoiceWiseAgingReport;