import React, { useEffect, useRef, useState } from 'react';
import { Card, Tabs, Table, Button, Col, Form, Row, Select, DatePicker, Input } from 'antd';
import { CollectionsService } from '@gtpl/shared-services/finance';
import { Link } from 'react-router-dom';
import { PayableFilterRequest } from '@gtpl/shared-models/finance';
import { useForm } from 'antd/lib/form/Form';
import moment from 'moment';
import { get } from 'http';
import { BarcodeOutlined, SearchOutlined, UndoOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { ColumnProps } from 'antd/lib/table';
import { CompanyTypeEnum, PlantsDropDown } from '@gtpl/shared-models/masters';
import { UnitcodeService } from '@gtpl/shared-services/masters';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';


const { TabPane } = Tabs;

const PayablesView = () => {
     const service = new CollectionsService()
     const [packingData, setpackingData] = useState([])
     const [rmData, setrmData] = useState([])
     const [vendors, setVendors] = useState([])
     const [invoices, setInvoices] = useState([])
const [activeTab, setActiveTab] = useState('1')
     const [rmForm] =useForm()
     const [packingForm] =useForm()
     const {Option} = Select
        const { RangePicker } = DatePicker;
        const [searchText, setSearchText] = useState('');
            const [searchedColumn, setSearchedColumn] = useState('');
    const searchInput = useRef(null);
  const [page, setPage] = React.useState(1);
   const [plantData, setPlantData] = useState<PlantsDropDown[]>([]);
    const unitsService = new UnitcodeService();



     useEffect(()=>{
               getInvoices(activeTab)
        getVendors(activeTab)
        getPayablesForRM()
        getPayablesForPacking()
        getAllPlants()
        // if(activeTab === '1'){
        // }else{
        //   console.log(activeTab,'ooooooooooo');
          
        // }
     },[])

          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();
        setSearchText('');
      };


    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 getInvoices=(val)=>{
      const type = val === '1' ? 'RM' : 'PACKING'
      const req= new PayableFilterRequest()
      req.type = type
      service.getPayablesInvoices(req).then(res=>{
        if(res.status){
          setInvoices(res.data)
        }else{
          setInvoices([])
        }
      })
     }
       const getVendors=(val)=>{
              const type = val === '1' ? 'RM' : 'PACKING'
      const req= new PayableFilterRequest()
      req.type = type
      service.getPayablesSuppliers(req).then(res=>{
        if(res.status){
          setVendors(res.data)
        }else{
          setVendors([])
        }
      })
     }
     const getPayablesForPacking =()=>{
      const req = new PayableFilterRequest()
      console.log(packingForm.getFieldValue('vendorId'),'pppppppppppppppppppppppp');
      console.log(packingForm.getFieldValue('invoiceDate'),'pppppppppppppppppppppppp');

      
      if(packingForm.getFieldValue('vendorId') != undefined){
        req.supplierId= packingForm.getFieldValue('vendorId')
      }
      if(packingForm.getFieldValue('invoiceNumber') != undefined){
        req.invoiceNumber= packingForm.getFieldValue('invoiceNumber')
      }
         if(packingForm.getFieldValue('unit') != undefined){
        req.unit= packingForm.getFieldValue('unit')
         }
      
       if(packingForm.getFieldValue('invoiceDate')!= undefined){
            req.invoiceFromDate = moment(packingForm.getFieldValue('invoiceDate')[0]).format('YYYY-MM-DD')
            req.invoiceToDate = moment(packingForm.getFieldValue('invoiceDate')[1]).format('YYYY-MM-DD')
          }
          if(packingForm.getFieldValue('receivedDate')!= undefined){
            req.receivedFromDate = moment(packingForm.getFieldValue('receivedDate')[0]).format('YYYY-MM-DD')
            req.receivedToDate = moment(packingForm.getFieldValue('receivedDate')[1]).format('YYYY-MM-DD')
          }
          console.log(req,'ooooooooooooooo');
          
      service.getPayablesForPacking(req).then(res=>{
            if(res.status){
              setpackingData(res.data)
            }else{
              setpackingData([])
            }
      })
    }

    const getPayablesForRM =()=>{
         const req = new PayableFilterRequest()
      if(rmForm.getFieldValue('vendorId') != undefined){
        req.supplierId= rmForm.getFieldValue('vendorId')
      }
      if(rmForm.getFieldValue('invoiceNumber') != undefined){
        req.invoiceNumber= rmForm.getFieldValue('invoiceNumber')
      }
       if(rmForm.getFieldValue('invoiceDate')!= undefined){
            req.invoiceFromDate = moment(rmForm.getFieldValue('invoiceDate')[0]).format('YYYY-MM-DD')
            req.invoiceToDate = moment(rmForm.getFieldValue('invoiceDate')[1]).format('YYYY-MM-DD')
          }
          if(rmForm.getFieldValue('receivedDate')!= undefined){
            req.receivedFromDate = moment(rmForm.getFieldValue('receivedDate')[0]).format('YYYY-MM-DD')
            req.receivedToDate = moment(rmForm.getFieldValue('receivedDate')[1]).format('YYYY-MM-DD')
          }
      if(rmForm.getFieldValue('unit') != undefined){
        req.unit= rmForm.getFieldValue('unit')
      }
          console.log(req,'uuuuuuuuuuuuuuuuuuuuuu');
          
        service.getPayablesForRM(req).then(res=>{
              if(res.status){
                setrmData(res.data)
              }else{
                setrmData([])
              }
        })
      }
  const rmColumns:ColumnProps<any>[] = [
    {
      title: 'S.No',
      dataIndex: 'key',
      key: 'sno',
      render: (text, record, index) => index + 1,
    },
   
   
     {
          title:'Supplier',
          dataIndex:'vendorName',
 sorter: (a, b) => a.vendorName?.localeCompare(b.vendorName),
            sortDirections: ['descend', 'ascend'],
      },
      {
        title:'Batch No',
        dataIndex:'batch',
        sorter: (a, b) => a.batch?.localeCompare(b.batch),
            sortDirections: ['descend', 'ascend'],
    },
    {
        title:'Invoice No',
        dataIndex:'invoiceNumber',
        sorter: (a, b) => a.invoiceNumber?.localeCompare(b.invoiceNumber),
            sortDirections: ['descend', 'ascend'],
    },
     {
          title:'Invoice Date',
          dataIndex:'invoiceDate',
           sorter: (a, b) => a.invoiceDate?.localeCompare(b.invoiceDate),
            sortDirections: ['descend', 'ascend'],
          render:(text,record)=>{
          return record.invoiceDate?moment(record.invoiceDate).format('DD-MM-YYYY'):'-'
        }

      },
     {
          title:'Indent No',
          dataIndex:'indentCode',
           sorter: (a, b) => a.indentCode?.localeCompare(b.indentCode),
            sortDirections: ['descend', 'ascend'],
...getColumnSearchProps('indentCode'),
      },
      {
          title:'Count',
          dataIndex:'products',
           render: (text, record) => {
    if (record.products && record.products.length > 0) {
      return record.products.map((item, index) => (
        <div key={index}>{Number(item.count).toFixed(2)}</div>
      ));
    }
    return null;
  }
      },
    
      {
          title:'Quantity',
          dataIndex:'products',
           render: (text, record) => {
    if (record.products && record.products.length > 0) {
      return record.products.map((item, index) => (
        <div key={index}>{Number(item.quantity).toFixed(2)}</div>
      ));
    }
    return null;
  }
      },
      {
          title:'Amount',
          dataIndex:'products',
          render: (text, record) => {
    if (record.products && record.products.length > 0) {
      return record.products.map((item, index) => (
        <div key={index}>{Number(item.amount).toFixed(2)}</div>
      ));
    }
    return null;
  }
      },
      {
          title:'Deduction',
          dataIndex:'products',
           render: (text, record) => {
    if (record.products && record.products.length > 0) {
      const uniqueGrnMap = new Map();

      record.products.forEach(item => {
        if (!uniqueGrnMap.has(item.grnItemId)) {
          uniqueGrnMap.set(item.grnItemId, item);
        }
      });

      return Array.from(uniqueGrnMap.values()).map(item => (
        <div key={item.grnItemId}>
          {item.deduction ? Number(item.deduction).toFixed(2) : 0}
        </div>
      ));
    }
    return null;
  }
      },
      {
          title:'Final Amount',
          dataIndex:'finalAmount',
         sorter: (a, b) => a.finalAmount?.localeCompare(b.finalAmount),
            sortDirections: ['descend', 'ascend'],
...getColumnSearchProps('finalAmount'),
render:(val,rec)=>{
  return rec.finalAmount?Number(rec.finalAmount).toFixed(2):'0'
}
  // dataIndex:'payments',
  //         render: (text, record) => {
  //   if (record.payments && record.payments.length > 0) {
  //     return record.payments.map((item, index) => (
  //       <div key={index}>{Number(item.finalAmount).toFixed(2)}</div>
  //     ));
  //   }
  //   return null;
      
  //      }
      },
  //     {
  //         title:'Payment',
  //         dataIndex:'products',
  //         render: (text, record) => {
  //   if (record.products && record.products.length > 0) {
  //     return record.products.map((item, index) => (
  //       <div key={index}>{item.payment}</div>
  //     ));
  //   }
  //   return null;
  // }
  //     },
  //   {
  //       title:'Status',
  // dataIndex:'products',
  //         render: (text, record) => {
  //   if (record.products && record.products.length > 0) {
  //     return record.products.map((item, index) => (
  //       <div key={index}>{item.status}</div>
  //     ));    }
  //   }
  // }
        {
        title:'Payment',
//         dataIndex:'payment',
//          sorter: (a, b) => a.payment?.localeCompare(b.payment),
//             sortDirections: ['descend', 'ascend'],
// ...getColumnSearchProps('payment'),
      dataIndex:'payments',
          render: (text, record) => {
    if (record.payments && record.payments.length > 0) {
      return record.payments.map((item, index) => (
        <div key={index}>{Number(item.payment).toFixed(2)}</div>
      ));
    }
    return null;
      
       }
      },
       {
        title:'Payment Date',
        // dataIndex:'receivedDate',
        //  sorter: (a, b) => a.receivedDate?.localeCompare(b.receivedDate),
        //     sortDirections: ['descend', 'ascend'],
        // render:(text,record)=>{
        //   return record.receivedDate?moment(record.receivedDate).format('DD-MM-YYYY'):'-'
        // }
        dataIndex:'payments',
          render: (text, record) => {
    if (record.payments && record.payments.length > 0) {
      return record.payments.map((item, index) => (
        <div key={index}>{item.receivedDate?moment(item.receivedDate).format('DD-MM-YYYY'):'-'}</div>
      ));
    }
    return null;
      
       }

    },
       {
        title:'Status',
        render: (text, record) => {
    if (record.payments && record.payments.length > 0) {
      return record.payments.map((item, index) => (
        <div key={index}>{item.status}</div>
      ));
    }
    return null;
      
       }
      },
  ];

  const purchaseColumns:ColumnProps<any>[] = [
    {
        title: 'S.No',
        dataIndex: 'key',
        key: 'sno',
        render: (text, record, index) => index + 1,
      },
        {
          title:'Vendor',
          dataIndex:'vendorName',
 sorter: (a, b) => a.vendorName?.localeCompare(b.vendorName),
            sortDirections: ['descend', 'ascend'],
      },
     
      {
          title:'Invoice No',
          dataIndex:'invoiceNumber',
 sorter: (a, b) => a.invoiceNumber?.localeCompare(b.invoiceNumber),
            sortDirections: ['descend', 'ascend'],
      },
      {
          title:'Invoice Date',
          dataIndex:'invoiceDate',
           sorter: (a, b) => a.invoiceDate?.localeCompare(b.invoiceDate),
            sortDirections: ['descend', 'ascend'],
          render:(text,record)=>{
          return record.invoiceDate?moment(record.invoiceDate).format('DD-MM-YYYY'):'-'
        }
      },
      {
        title:'Purchase Order No',
        dataIndex:'poNumber',
         sorter: (a, b) => a.poNumber?.localeCompare(b.poNumber),
            sortDirections: ['descend', 'ascend'],
...getColumnSearchProps('poNumber'),

      },
     
           {
        title:'Item',
        dataIndex:'products',
        render: (text, record) => {
          if (record.products && record.products.length > 0) {
            return record.products.map((item, index) => (
              <div key={index}>{(item.itemName)}</div>
            ));
    }
    return null;
  }
      },
      {
        title:'Quantity',
        dataIndex:'products',
        render: (text, record) => {
          if (record.products && record.products.length > 0) {
            return record.products.map((item, index) => (
              <div key={index}>{Number(item.quantity).toFixed(2)}</div>
            ));
    }
    return null;
  }
      },
      {
          title:'Amount',
          dataIndex:'products',
          render: (text, record) => {
    if (record.products && record.products.length > 0) {
      return record.products.map((item, index) => (
        <div key={index}>{Number(item.amount).toFixed(2)}</div>
      ));
    }
    return null;
  }
      },
           {
          title:'Tax',
          dataIndex:'products',
          render: (text, record) => {
    if (record.products && record.products.length > 0) {
      return record.products.map((item, index) => (
        <div key={index}>{item.taxAmount?Number(item.taxAmount).toFixed(2):''}</div>
      ));
    }
    return null;
  }
      },
      {
          title:'Deduction',
          dataIndex:'products',
          render: (text, record) => {
    if (record.products && record.products.length > 0) {
      return record.products.map((item, index) => (
        <div key={index}>{item.deduction?Number(item.deduction).toFixed(2):'0'}</div>
      ));
    }
    return null;
  }
      },
      {
          title:'Final Amount',
            dataIndex:'finalAmount',
         sorter: (a, b) => a.finalAmount?.localeCompare(b.finalAmount),
            sortDirections: ['descend', 'ascend'],
...getColumnSearchProps('finalAmount'),
render:(val,rec)=>{
  return rec.finalAmount?Number(rec.finalAmount).toFixed(2):'0'
}
    //        dataIndex:'payments',
    //       render: (text, record) => {
    // if (record.payments && record.payments.length > 0) {
    //   return record.payments.map((item, index) => (
    //     <div key={index}>{Number(item.finalAmount).toFixed(2)}</div>
    //   ));
    // }
    // return null;
      
      //  }

      },
      {
        title:'Payment',
       dataIndex:'payments',
          render: (text, record) => {
    if (record.payments && record.payments.length > 0) {
      return record.payments.map((item, index) => (
        <div key={index}>{Number(item.payment).toFixed(2)}</div>
      ));
    }
    return null;
      
       }
      },
       {
          title:'Payment Date',
           dataIndex:'payments',
          render: (text, record) => {
    if (record.payments && record.payments.length > 0) {
      return record.payments.map((item, index) => (
        <div key={index}>{item.receivedDate?moment(item.receivedDate).format('DD-MM-YYYY'):'-'}</div>
      ));
    }
    return null;
      
       }
      },
       {
        title:'Status',
       dataIndex:'payments',
          render: (text, record) => {
    if (record.payments && record.payments.length > 0) {
      return record.payments.map((item, index) => (
        <div key={index}>{item.status}</div>
      ));
    }
    return null;
      
       }

      },
  //     {
  //         title:'Payment',
  //         dataIndex:'products',
  //         render: (text, record) => {
  //   if (record.products && record.products.length > 0) {
  //     return record.products.map((item, index) => (
  //       <div key={index}>{item.payment}</div>
  //     ));
  //   }
  //   return null;
  // }
  //     },
  //        {
  //       title:'Status',
  // dataIndex:'products',
  //         render: (text, record) => {
  //   if (record.products && record.products.length > 0) {
  //     return record.products.map((item, index) => (
  //       <div key={index}>{item.status}</div>
  //     ));    }
  //   }
  // }
  ];
 const onReset = () => {
    rmForm.resetFields();
    packingForm.resetFields();
    if(activeTab === '1'){
      getPayablesForRM()
    }else{
      getPayablesForPacking()
    }
  };
  const tabChange =(val) =>{
setActiveTab(val)
getInvoices(val)
getVendors(val)

  }
  return (
    <div>
      <Card size="small" title={<span style={{ color: 'white',fontSize:"20px" }} >Payables</span>}
                style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
                extra={
              <Link to="/payables">
              <Button className="panel_button">Create </Button>
              </Link>}>
        <Tabs defaultActiveKey="1"
  onChange={(key)=>tabChange(key)}>
          <TabPane tab="RM" key="1">
               <Form form={rmForm} layout="vertical" onFinish={getPayablesForRM}>
                <Row gutter={24}>
                  <Col xs={24} sm={24} md={4} lg={4} xl={4}>
                                        <Form.Item name='unit' label='Unit'>
                                          <Select showSearch allowClear optionFilterProp='children' placeholder='Select Unit'
                                          dropdownMatchSelectWidth={false}
                  
                                          >
                                            {Object.values(CompanyTypeEnum).map(e => {
                                              return (
                                                <Option key={e} value={e}>{e}</Option>
                                              );
                                            })}
                                          </Select>
                                        </Form.Item>
                                  </Col>
                <Col span={4}>
                  <Form.Item name="vendorId" label="Supplier" rules={[{ required: false }]}>
                          <Select
                                    showSearch
                                    optionFilterProp="children"
                                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                    placeholder=" Select Supplier Name"
                                    // onChange={handleSupplier}
                                    allowClear
                                    dropdownMatchSelectWidth={false}
                                >
                                  {/* <Option key={0} value={null}>Select All End Customer</Option> */}
                                  {vendors?vendors.map(val => {
                                  return <Option key={val.vendorId}  value={val.vendorId}>{val.vendorName}</Option>
                                }):""} 
            
                                </Select>
                                </Form.Item>
            
                                </Col >
            
                <Col span={3}>
                            <Form.Item name="invoiceNumber" label="Batch Number" rules={[{ required: false }]}>
                                <Select
                                    showSearch
                                    optionFilterProp="children"
                                    // filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                    placeholder="Select Batch Number"
                                    dropdownMatchSelectWidth={false}
                                    showArrow
                                    // onChange={handleUnit}
                                    allowClear
                                >
                                  {/* <Option key={0} value={null}>Select Unit</Option> */}
                                  {invoices?invoices.map(plant => {
                                  return <Option key={plant.batch}  value={plant.invoiceNumber}>{plant.batch}-{plant.year}</Option>
                                }):""}
            
                                </Select>
                            </Form.Item>
                            
                          </Col>
                               
                <Col span={4}>
                    <Form.Item
                    name="invoiceDate"
                    label="Invoice Date"
                    rules={[
                        {
                        required: false,
                        message: "Select date range"
                        }
                    ]}
                    >
                    <RangePicker  />
                    </Form.Item>
                </Col>
                <Col span={4}>
                    <Form.Item
                    name="receivedDate"
                    label="Payment Date"
                    rules={[
                        {
                        required: false,
                        message: "Select date range"
                        }
                    ]}
                    >
                    <RangePicker  />
                    </Form.Item>
                </Col>
                <Col span={2} style={{marginTop: '30px' }}>
                            {/* <Form.Item name="invoiceNumber" label="Invoice Number" rules={[{ required: false }]}> */}
                               <Button type='primary' htmlType='submit'>Submit</Button>
                            {/* </Form.Item> */}
                            
                          </Col>
                           <Col style={{ paddingLeft: '10px', marginTop: '30px' }}>
                                <Button 
                                
                                type="primary" 
                                
                                onClick={onReset}
                                > 
                                Reset 
                                </Button>
                             </Col>
                          </Row>
                          </Form>
            <Table
            size='small'
              dataSource={rmData}
              columns={rmColumns}
              scroll={{x:true}}
             pagination={{
                  onChange(current) {
                    setPage(current);
                  }}}
            
            />
          </TabPane>
          <TabPane tab="PACKING" key="2">
                 <Form form={packingForm  } layout="vertical" onFinish={getPayablesForPacking}>
                <Row gutter={24}>
                  <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }}>
                                        <Form.Item
                                          name="unit"
                                          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%' }}
                                          >
                                            {plantData.map(dropData => {
                                                  return <Option value={dropData.plantId}>{dropData.plantCode}</Option>
                                              })}
                                          </Select>
                                        </Form.Item>
                                      </Col>
                <Col span={4}>
                 <Form.Item name="vendorId" label="Vendor" rules={[{ required: false }]}>
                                <Select
                                    showSearch
                                    optionFilterProp="children"
                                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                    placeholder=" Select Vendor"
                                    // onChange={handleSupplier}
                                    allowClear
                                    dropdownMatchSelectWidth={false}
                                >
                                  {/* <Option key={0} value={null}>Select All End Customer</Option> */}
                                  {vendors?vendors.map(val => {
                                  return <Option key={val.vendorId}  value={val.vendorId}>{val.vendorName}</Option>
                                }):""} 
            
                                </Select>
                                </Form.Item>
            
            
            
                                </Col >
            
                                <Col span={3}>
                            <Form.Item name="invoiceNumber" label="Invoice Number" rules={[{ required: false }]}>
                                <Select
                                    showSearch
                                    optionFilterProp="children"
                                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                    placeholder="Select Invoice Number"
                                    // onChange={handleUnit}
                                    dropdownMatchSelectWidth={false}

                                    allowClear
                                >
                                  {/* <Option key={0} value={null}>Select Unit</Option> */}
                                  {invoices?invoices.map(plant => {
                                  return <Option key={plant.invoiceNumber}  value={plant.invoiceNumber}>{plant.invoiceNumber}</Option>
                                }):""}
            
                                </Select>
                            </Form.Item>
                            
                          </Col>
                           
                   <Col span={4}>
                    <Form.Item
                    name="invoiceDate"
                    label="Invoice Date"
                    rules={[
                        {
                        required: false,
                        message: "Select date range"
                        }
                    ]}
                    >
                    <RangePicker  />
                    </Form.Item>
                </Col>
                  <Col span={4}>                    
                  <Form.Item
                    name="receivedDate"
                    label="Payment Date"
                    rules={[
                        {
                        required: false,
                        message: "Select date range"
                        }
                    ]}
                    >
                    <RangePicker  />
                    </Form.Item>
                </Col>
<Col span={2} style={{marginTop: '30px' }}>                            {/* <Form.Item name="invoiceNumber" label="Invoice Number" rules={[{ required: false }]}> */}
                               <Button type='primary' htmlType='submit'>Submit</Button>
                            {/* </Form.Item> */}
                            
                          </Col>
                           <Col style={{ paddingLeft: '10px', marginTop: '30px' }}>
                    <Button 
                    
                    type="primary" 
                    
                    onClick={onReset}
                    > 
                    Reset 
                    </Button>
                </Col>
                          </Row>
                          </Form>
            <Table
            size='small'
             scroll={{x:true}}
              dataSource={packingData}
              columns={purchaseColumns}
              pagination={{
                  onChange(current) {
                    setPage(current);
                  }}}
            />
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default PayablesView;