import { useState, useEffect, useCallback } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import {
  PlusOutlined,
  EditFilled,
  ConsoleSqlOutlined,
  ArrowRightOutlined,
} from '@ant-design/icons';
import { Messages } from '../../Components/Notifications/Messages';
import FormHeader from '../PageComponents/FormHeader.jsx';
import Search from '../../Components/Forms/Search.jsx';
import Buttons from '../../Components/Forms/Buttons';
import {
  dateFormatChange,
  ExtractDateFormate,
  getSession,
  pdfDiv,
  printDiv,
} from '../../Services/Others.js';
import { changeBreadCrumb } from '../../Features/AppPage/CenterPage.js';
import { Tables } from '../../Components/Tables/Table.jsx';
import {
  Emailsend,
  getPurcQuotation,
} from '../../Features/PurchaseQuotation/PurchaseQuotation.js';
import { IoEye } from 'react-icons/io5';
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
import { Input, Table, Form, Button } from 'antd';
import { MdOutlineMail } from 'react-icons/md';
import { FaPrint } from 'react-icons/fa';
import PurchaseQuotationPrint from './PurchaseQuotationPrint.jsx';
import { getAllCustomer } from '../../Features/BookingScreen/BookingData/BookingData.js';
import { getPrintSelectionComponentData } from '../../Features/ThemeChange/ThemeChange.js';
import { PrintStyleFunction } from '../paymentpdfPage/PrintStyleFunction.js';
import { isMobile } from 'react-device-detect';
import { MobilePdfPrint } from '../BookingScreen/Components/BookingFunctionality/MobilePdfPrint.js';
import { PurchaseQtMobilePrint } from './PurchaseQtMobilePrint.js';
const subDirectory = import.meta.env.BASE_URL;
const PurchaseQuotationList = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useDispatch();
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [page, setpage] = useState(1);
  const [QuotationData, setQuotationData] = useState([]);
  const [QuotationProductdata, setQuotationProductdata] = useState([]);
  const [searchedText, setSearchedText] = useState('');
  const [OrderDataModel, setOrderDataModal] = useState(false);
  const [usrMailDataModel, setusrMailDataModel] = useState(false);
  const [PrintData, setPrintData] = useState([]);
  const [AllCustomer, setAllCustomer] = useState(null);
  const [EnteredMailId, setEnteredMailId] = useState(null);
  const [PrintTempData, setPrintTempData] = useState();

  const [form] = Form.useForm();

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

    {
      name: 'Sales Quotation',
      link: `${subDirectory}setting/sales-quotation`,
    },
  ];

  useEffect(() => {
    dispatch(changeBreadCrumb({ items: items }));
  }, []);

  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);
  const fetchdata = async () => {
    try {
      const res = await dispatch(
        getAllCustomer({ CompId: CompId, AppId: AppId, branchId: BranchId })
      ).unwrap();
      setAllCustomer(res?.data?.data || []);
      const Data = { AppId, CompId, BranchId };

      const printtemp = await dispatch(
        getPrintSelectionComponentData(Data)
      ).unwrap();
      const printTypeName = printtemp?.data?.data
        ?.flatMap((template) => template.ComponentDetails || [])
        ?.find(
          (comp) =>
            comp.SetasDefault === 'Y' &&
            comp.PrintTypeName === 'Sales Quotation'
        );
      setPrintTempData(printTypeName);
    } catch (error) {
      console.error('Failed to fetch customers:', error);
    }
  };

  useEffect(() => {
    fetchdata();
  }, [CompId, AppId, BranchId]); // refetch if any of these change

  const handelAddButton = () => {
    navigate(`${subDirectory}setting/sales-quotation`);
  };
  const handlePageChange = (current) => {
    setpage(current);
  };
  useEffect(() => {
    getQuotationData();
  }, []);
  const ViewOrderdetails = (orderdetails) => {
    setQuotationProductdata(orderdetails);
    setOrderDataModal(true);
  };
  const onSearch = (value) => {
    setSearchedText(value);
  };
  const onSearchChange = (e) => {
    setSearchedText(e?.target?.value);
  };
  const handleOrdermodalCancel = () => {
    setOrderDataModal(false);
    setQuotationProductdata([]);
  };
  const handleUserMailmodalCancel = () => {
    setusrMailDataModel(false);
    setEnteredMailId(null);
    form.resetFields();
    // setQuotationProductdata([])
  };

  const onChangeprodFunction = (value) => {
    setEnteredMailId(value);
    form.resetFields();
    form.setFieldsValue({ email: value });
  };

  const emailSubmit = (values) => {
    let data = {
      ...PrintData?.[0],
      CustMail: values.email,
      Email: values.email,
    };
    setPrintData([data]);
    handleEmailClick('', data);
    setEnteredMailId(null);
    form.resetFields();
    form.setFieldsValue({ email: '' });
    setusrMailDataModel(false);
  };
  //   const QuotationStyle = `<style>
  //     .Quo-Print-Body{
  //       height: 100%;
  //       margin: 0vw 0vh;
  //     }
  //     .page {

  //       page-break-after: always;
  //       page-break-inside: avoid;
  //   }

  //     .Quo-Print-Content{
  //       display:flex;
  //       flex-direction:column;
  //       height:95vh;
  //       width:93vw;
  //       border:0.5px solid rgb(170, 164, 164);
  //       margin:2rem 1rem 1rem 1rem;
  //       gap:1.5rem;
  //       page-break-after: always;

  //     }
  //     .Quo-print-Logo{
  //       width: 50px ;
  //       height: 50px;
  //       margin:10px 0 0 10px;
  //      }
  //     .Quo-Print-ComCus{
  //     display:flex;
  //     flex-direction:column;
  //       height:18vh;
  //       justify-content:space-between;
  //     }
  //     .Quo-Print-Tabsum{
  //       display:flex;
  //       flex-direction:column;
  //       justify-content:space-between;
  //       gap:1rem;
  //       height:60vh;
  //     }
  //     .Quo-Print-Header{
  //       display: flex;
  //       flex-direction: row;
  //       justify-content: space-between;

  //     }

  //     .Quo-Print-Company{
  //       display:flex;
  //       flex-direction:column;
  //       padding:10px;
  //       gap:0.1rem;
  //     }
  //     .Quo-Print-Cname{
  //         font-size:25px;
  //     }
  //     .Quo-Print-address{
  //       font-size:22px;
  //       display:flex;
  //       flex-wrap:wrap;
  //     }
  //     .Quo-Print-Qno{
  //       display:flex;
  //       flex-direction:column;
  //       padding:10px;
  //       gap:0.1rem;
  //     }
  //     .Quo-Print-Customer{
  //       display:flex;
  //       flex-direction:Column;
  //       padding-left:10px;
  //       gap:0.1rem;
  //     }
  //     .Horizondal-line{
  //       border-bottom: 0.5px solid rgb(170, 164, 164);
  //     }
  //     .Quo-Print-Table{
  //       display:flex;
  //     }

  //     .Quo-Print-ProTable{
  //       width:100%;
  //       border-collapse: collapse;
  //     }
  //     .Quo-Print-DataRow{
  //       line-height:2rem;
  //     }
  //     .Quo-Print-tableheader{
  //       border-top:0.5px solid rgb(170, 164, 164);
  //       border-bottom: 0.5px solid rgb(170, 164, 164);
  //       line-height:4rem;
  //     }
  //     .Quo-Print-TableData{
  //       text-align:right;
  //       padding:1px;
  //       font-size:20px;

  //     }
  //     .Quo-Print-TableDataSno{
  //       text-align:center;
  //       padding:1px;
  //       font-size:20px;

  //     }

  //     .Quo-Print-TableDataName{
  //       text-align:left;
  //       padding-left:1px;
  //       font-size:20px;
  //     }
  //     .Quo-Print-headingData{
  //       text-align:center;
  //       padding:1px;
  //       font-size:22px;
  //     }
  //     .Quo-Print-TableDataAmt{
  //       text-align:right;
  //       padding-right:5px;
  //       font-size:20px;
  //     }
  //     .Quo-Print-Summary{
  //       display:flex;
  //       flex-direction:row;
  //       justify-content: flex-end;

  //     }
  //     .Quo-Print-SummTableData{
  //       text-align:right;
  //       padding:1px;
  //       font-size:20px;

  //     }
  //     .Quo-Print-Total{
  //       display:flex;
  //       justify-content:flex-end;
  //       border:0.5px solid black;
  //       width:300px;
  //       margin-right: 10px;
  //       font-size:20px;
  //     }

  //     }

  // </style>`;

  //   const QuotationStylepdf = `<style>
  //   * {
  //     box-sizing: border-box;
  //     font-family: 'Poppins', sans-serif;
  //   }

  //   body {
  //     margin: 0;
  //     padding: 0;
  //     font-size: 12px;
  //   }

  //   .Quo-Print-Body {
  //     padding: 20px;
  //     width: 100%;
  //   }

  //   .Quo-Print-Content {
  //     border: 1px solid #aaa;
  //     padding: 16px;
  //     margin-bottom: 24px;
  //     page-break-after: always;
  //   }

  //   .Quo-print-Logo {
  //     width: 50px;
  //     height: 50px;
  //     margin: 10px;
  //   }

  //   .Quo-Print-Header {
  //     display: flex;
  //     justify-content: space-between;
  //     align-items: flex-start;
  //   }

  //   .Quo-Print-Company, .Quo-Print-Qno {
  //     font-size: 12px;
  //   }

  //   .Quo-Print-Cname {
  //     font-size: 16px;
  //     font-weight: bold;
  //   }

  //   .Quo-Print-address {
  //     font-size: 12px;
  //   }

  //   .Horizondal-line {
  //     border-bottom: 1px solid #aaa;
  //     margin: 8px 0;
  //   }

  //   .Quo-Print-Customer {
  //     font-size: 12px;
  //     margin-top: 8px;
  //   }

  //   .Quo-Print-Table {
  //     margin-top: 12px;
  //     overflow-x: auto;
  //   }

  //   .Quo-Print-ProTable {
  //     width: 100%;
  //     border-collapse: collapse;
  //     font-size: 11px;
  //     table-layout: fixed;
  //   }

  //   .Quo-Print-ProTable th,
  //   .Quo-Print-ProTable td {
  //     border: 1px solid #aaa;
  //     padding: 6px;
  //     word-wrap: break-word;
  //   }

  //   .Quo-Print-headingData {
  //     background-color: #f2f2f2;
  //     font-weight: bold;
  //     text-align: center;
  //   }

  //   .Quo-Print-TableDataSno,
  //   .Quo-Print-TableDataName,
  //   .Quo-Print-TableData,
  //   .Quo-Print-TableDataAmt {
  //     text-align: left;
  //   }

  //   .Quo-Print-TableDataAmt {
  //     text-align: right;
  //   }

  //   .Quo-Print-Summary {
  //     margin-top: 16px;
  //     display: flex;
  //     justify-content: flex-end;
  //   }

  //   .Quo-Print-Total {
  //     width: 280px;
  //     border: 1px solid #000;
  //     padding: 8px;
  //     font-size: 12px;
  //   }

  //   .Quo-Print-Total table {
  //     width: 100%;
  //   }

  //   .Quo-Print-SummTableData {
  //     text-align: right;
  //     padding: 4px 6px;
  //   }
  // </style>`;

  // const getQuotationData = async () => {
  //   let quoationData = await dispatch(getPurcQuotation({ CompId: CompId, BranchId: BranchId, AppId: AppId })).unwrap();
  //   if (quoationData?.data?.statusCode === 1) {
  //     // Flatten ProductDetails from all quotations
  //     const flatData = quoationData?.data?.data?.flatMap(q =>
  //       (q.ProductDetails || []).map(p => ({
  //         ...p,
  //         QuotationNo: q.QuotationNo,
  //         QuotationDate: q.QuotationDate,
  //         CustId: q.CustId,
  //         UserName: q.UserName,
  //         // Add more fields from quotation if needed
  //       }))
  //     );
  //     setQuotationData(flatData);
  //     console.log(flatData, "Flat table data");
  //   } else {
  //     setQuotationData([]);
  //   }
  // }

  const PurchaseOrderStyle = `<style>
    @media print {
      @page {
        size: A4;
        margin: 0;
      }
      
      .Quo-Print-Body {
        width: 195mm;
        margin: 0 auto;
        // padding: 10mm;
      }
    }
    
    .Quo-Print-Body {
      margin: 0;
      padding: 10px;
      background: white;
    }
  
    .Quo-Print-Content {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 200mm;
      margin: 0 auto;
      border: 1px solid rgb(170, 164, 164);
      padding: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    
    }
    .Quo-print-Logo{
      width: 50px ;
      height: 50px;
      margin:5px 0 0 5;
     }
    .Quo-Print-ComCus{
    display:flex;
    flex-direction:column;
      height:18vh;
      justify-content:space-between;
    }
    .Quo-Print-Tabsum{
      display:flex;
      flex-direction:column;
      justify-content:space-between; 
      gap:1rem;
      height:60vh;
    }
    .Quo-Print-Header{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    
    }

    .Quo-Print-Company{
      display:flex;
      flex-direction:column;
      padding:10px;
      gap:0.1rem;
    }
    .Quo-Print-Cname{
        font-size:25px;
    }
    .Quo-Print-address{
      font-size:22px;
      display:flex;
      flex-wrap:wrap;
    }
    .Quo-Print-Qno{
      display:flex;
      flex-direction:column;
      padding:10px;
      gap:0.1rem;
    }
    .Quo-Print-Customer{
      display:flex;
      flex-direction:Column;
      padding-left:10px;
      gap:0.1rem;
    }
    .Horizondal-line{
      border-bottom: 0.5px solid rgb(170, 164, 164);
    }
    .Quo-Print-Table{
      display:flex;
    }    .Quo-Print-ProTable {
      width: 100%;
      border-collapse: collapse;
      margin-top: 15px;
    }
    
    .Quo-Print-DataRow {
    //   line-height: 2.5rem;
      border-bottom: 1px solid #eee;
    }
    
    .Quo-Print-tableheader {
      background-color: #f8f9fa;
      border-top: 1px solid rgb(170, 164, 164);
      border-bottom: 1px solid rgb(170, 164, 164);
      line-height: 3rem;
    }
    
    .Quo-Print-TableData {
      text-align: right;
      padding: 8px;
      font-size: 14px;
    }
    
    .Quo-Print-TableDataSno {
      text-align: center;
      padding: 8px;
      font-size: 14px;
      width: 60px;
    }

    .Quo-Print-TableDataName {
      text-align: left;
      padding: 8px;
      font-size: 14px;
    }
    
    .Quo-Print-headingData {
      text-align: center;
      padding: 8px;
      font-size: 14px;
      font-weight: bold;
    }
    .Quo-Print-TableDataAmt{
      text-align:right;
      padding-right:5px;
      font-size:25px;
    }
    .Quo-Print-Summary{
      display:flex;
      flex-direction:row;
      justify-content: flex-end;
      
    }
    .Quo-Print-SummTableData{
      text-align:right;
      padding:1px;
      font-size:22px;
      
    }
    .Quo-Print-Total{
      display:flex;
      justify-content:flex-end;
      border:0.5px solid black;
      width:300px;
      margin-right: 10px;
      font-size:20px;
    }
   
 
    }

</style>`;

  const getQuotationData = async () => {
    let quoationData = await dispatch(
      getPurcQuotation({ CompId: CompId, BranchId: BranchId, AppId: AppId })
    ).unwrap();
    if (quoationData?.data?.statusCode === 1) {
      setQuotationData(quoationData?.data?.data);
    } else {
      setPurOrderData([]);
    }
  };

  const handlePrint = (ProductDetails, record) => {
    const orderData = {
      ...record,
      customerName: record?.CustName || '',
      customerAddress: record?.Address1 || '',
      customerMobile: record?.MobileNo || '',
    };
    if (isMobile) {
      setPrintData([orderData]);
      PurchaseQtMobilePrint({
        PrintTempData: PrintTempData,
        PrintOrderDetails: orderData,
        setPrintOrderDetails: setPrintTempData,
        UserId: UserId,
        dispatch,
      });
    } else {
      setPrintData([orderData]);
      Print();
    }
  };

  const Print = async () => {
    const style = await PrintStyleFunction(
      PrintTempData?.StyleName == undefined
        ? 'Style 13'
        : PrintTempData?.StyleName,
      'Quotation'
    );
    const stylesMap = {
      'Style 1': 'SQPrintStyle1',
      'Style 2': 'SQPrintStyle2',
      'Style 3': 'SQPrintStyle3',
      'Style 4': 'SQPrintStyle4',
      'Style 5': 'SQPrintStyle5',
      'Style 6': 'SQPrintStyle6',
      'Style 7': 'SQPrintStyle7',
      'Style 8': 'SQPrintStyle8',
      'Style 9': 'SQPrintStyle9',
      'Style 10': 'SQPrintStyle10',
      'Style 11': 'SQPrintStyle11',
      'Style 12': 'SQPrintStyle12',
      'Style 13': 'Pur-Quot-Print',
      A4: 'SQPrintStyleA4',
      A5: 'SQPrintStyleA5',
      A4Standard: 'SQA4Standard',
      TaxInvoice: 'TaxInvoice',
    };

    const selectedStyle =
      stylesMap[
        PrintTempData?.StyleName == undefined
          ? 'Style 13'
          : PrintTempData?.StyleName
      ];

    if (selectedStyle) {
      await printDiv(`${selectedStyle}`, style);
    }
  };

  //     if (selectedStyle) {
  //       await printDiv(`${selectedStyle}`, style); // Use unique IDs for each print
  //     }
  //     // settable2Data({});
  //     // setPrintData();
  // };

  const handleEmailClick = async (ProductDetails, record) => {
    const orderData = {
      ...record,
      customerName: record?.CustName || '',
      customerAddress: record?.CustomerDetails?.[0]?.Address1 || '',
      Address1: record?.CustomerDetails?.[0]?.Address1 || '',
      customerMobile: record?.MobileNo || '',
      CustMail: record?.CustMail || record?.Email || '',
      ProductDetails: record?.ProductDetails || ProductDetails || [],
      TaxDetails: record?.TaxDetails || [],
      AddressDetails: record?.AddressDetails || [],
      CustomerDetails: record?.CustomerDetails || [],
    };

    setPrintData([orderData]);

    if (record?.Email) {
      setTimeout(async () => {
        try {
          const blob = await pdfDiv('Pur-Quot-Print', PurchaseOrderStyle);

          const payload = {
            fileBlob: blob,
            toEmail: record?.Email,
            type: 'Quotation',
            messageTemplatesList: [],
          };

          const res = await dispatch(Emailsend(payload)).unwrap();
          if (res?.data?.status === 1) {
            setMessageData(res?.data?.response);
            setMessageType('success');
          } else {
            setMessageData(res?.data?.response);
            setMessageType('error');
          }

          // setMessageData("Email sent successfully");
          // setMessageType('success');
        } catch (error) {
          console.error('❌ Email send failed:', error);
          // alert('❌ Email failed to send');
          setMessageData('Email failed to send');
          setMessageType('error');
        }
      }, 300);
    } else {
      setusrMailDataModel(true);
    }
  };

  const columns = [
    {
      title: 'SL.NO',
      key: 'sno',
      align: 'center',
      render: (text, object, index) => (
        <span style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</span>
      ),
    },
    {
      title: 'Quotation No',
      key: 'QuotationNo',
      dataIndex: 'QuotationNo',
      align: 'center',
      render: (text) => <span style={{ color: 'black' }}>{text}</span>,
    },
    {
      title: 'Customer Name',
      key: 'CustName',
      dataIndex: 'CustName',
      // align: "center",
      render: (text, row) => (
        <a style={{ color: 'black' }}>{`${text ? text : row?.MobileNo} `} </a>
      ),
      filteredValue: [searchedText], // comes from a search input state
      onFilter: (value, record) => {
        return String(record?.CustName)
          ?.toLowerCase()
          ?.includes(value?.toLowerCase());
      },
    },
    {
      title: 'Date',
      key: 'QuotationDate',
      dataIndex: 'QuotationDate',
      align: 'center',
      render: (text) => (
        <a style={{ color: 'black' }}>{ExtractDateFormate(text)}</a>
      ),
    },
    {
      title: 'Amount',
      key: 'BillAmount',
      dataIndex: 'BillAmount',
      align: 'center',
    },
    {
      title: 'Product Details',
      key: 'ProductDetails',
      dataIndex: 'ProductDetails',

      align: 'center',
      render: (ProductDetails, record) => (
        <IoEye
          style={{ color: '#1292EE', fontSize: '25px', cursor: 'pointer' }}
          onClick={() => ViewOrderdetails(ProductDetails)}
        />
      ),
    },

    {
      title: 'Shared Product Details',
      key: 'OrderDetails',
      dataIndex: 'OrderDetails',
      align: 'center',
      render: (ProductDetails, record) => (
        <div style={{ display: 'flex', justifyContent: 'center', gap: '12px' }}>
          <MdOutlineMail
            size={30}
            color="#25D366"
            style={{ cursor: 'pointer' }}
            title="Share by Email"
            onClick={() => handleEmailClick(ProductDetails, record)}
          />
          <FaPrint
            size={25}
            color="#1292EE"
            style={{ cursor: 'pointer' }}
            title="Print"
            onClick={() => handlePrint(ProductDetails, record)}
          />
        </div>
      ),
    },
  ];

  const QuoationDataColumns = [
    {
      title: 'SL.NO',
      key: 'sno',
      align: 'center',

      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
      ),
    },
    {
      title: 'Product Name',
      dataIndex: 'ProdName',
      key: 'ProdName',
      align: 'left',
      render: (text, row) => (
        <a style={{ color: 'black' }}>
          {row.ProdName} ({row.ProdVariantName})
        </a>
      ),
    },
    {
      title: 'Qnt',
      dataIndex: 'Qty',
      key: 'Qty',
      render: (text) => <a style={{ color: 'black' }}>{`${text} `}</a>,
    },
    {
      title: 'UOM',
      dataIndex: 'UomName',
      key: 'UomName',
      width: '80px',
      align: 'center',
      render: (text) => <a style={{ color: 'black' }}>{`${text} `}</a>,
    },
  ];

  useEffect(() => {
    if (usrMailDataModel) {
      form.resetFields();
    }
  }, [usrMailDataModel]);

  return (
    <div className="userPageTable">
      <div className="userPageContent">
        <Messages
          messageType={messageType}
          messageData={messageData}
          onComplete={onComplete}
        />
        <div className="formAddNew">
          <div>
            <FormHeader title={'Sales Quotation'} />
          </div>
          <div className="searchAddDiv">
            <div className="formSearch">
              <Search
                placeholder="Search by Customer Name"
                onSearch={onSearch}
                onSearchChange={onSearchChange}
              />
            </div>
            <div style={{ display: 'flex' }}>
              {/* <TertiaryButton
                  buttonText="IMPORT / EXPORT EXCEL"
                  className="tertiary_Button"
                  handleSubmit={openModal}
                ></TertiaryButton> */}
              <Buttons
                buttonText={'Add New'}
                handleSubmit={() => handelAddButton()}
                color="901D77"
                icon={<PlusOutlined />}
              >
                ADD
              </Buttons>
            </div>
          </div>
          <div>
            <DefaultModal
              open={OrderDataModel}
              title="Product Details"
              handleCancel={handleOrdermodalCancel}
              footer={false}
              children={
                <div style={{ height: '400px', overflowY: 'scroll' }}>
                  <Table
                    dataSource={QuotationProductdata}
                    columns={QuoationDataColumns}
                    pagination={handlePageChange}
                  />
                </div>
              }
            />
            <DefaultModal
              width={400}
              open={usrMailDataModel}
              title="User Mail"
              handleCancel={handleUserMailmodalCancel}
              footer={false}
              children={
                <div>
                  <Form form={form} layout="vertical" onFinish={emailSubmit}>
                    <Form.Item
                      label="Mail ID"
                      name="email"
                      rules={[
                        { required: true, message: 'Email is required' },
                        {
                          type: 'email',
                          message: 'Enter a valid email address',
                        },
                      ]}
                    >
                      <Input placeholder="Enter your email" />
                    </Form.Item>

                    <Button type="primary" htmlType="submit">
                      Submit
                    </Button>
                  </Form>
                </div>
              }
            />
          </div>
        </div>
        <div>
          <Tables
            dataSource={QuotationData}
            data={QuotationData}
            columns={columns}
            pagination={handlePageChange}
          />
        </div>
        <div style={{ display: 'none' }}>
          <PurchaseQuotationPrint
            PrintingData={PrintData}
            PrintTempData={PrintTempData}
          />
        </div>
      </div>
    </div>
  );
};
export default PurchaseQuotationList;
