import { Button, Card, Col, Collapse, Descriptions, Form, Input, Modal, Row, Select } from "antd"
import React, { useEffect, useState } from "react"
import './cost-sheet-format.css'
import { EnquiriesService } from "libs/shared-services/enquiry-management/src/lib/enquiries-service"
import {  ConfirmedContainersReq, CostingDestinationReq, EnquiryAssessmentUpdateReq, EnquiryIdreq, EnquiryLifecycleStatusEnum, OrderTypeEnum, ProductQuotePrices, QuoteRequest, StyleWeighmentEnum } from "@gtpl/shared-models/enquiry-management"
import TextArea from "antd/lib/input/TextArea"
import { ReasonsService } from "@gtpl/shared-services/masters"
import { ReasonCategoryDto } from "@gtpl/shared-models/masters"
import { GlobalVariableValues, ReasonCategoryEnum } from "@gtpl/shared-models/common-models"
import { AlertMessages } from "@gtpl/shared-utils/alert-messages"
import { CostingService } from "libs/shared-services/enquiry-management/src/lib/costing-service"
import moment from "moment"
import ContainerCapturingAgainstEnquiry from "../containers-capturing-info"
import './cost-sheet-format.css';
import { useHistory } from "react-router-dom"
import {DownOutlined,RightOutlined} from '@ant-design/icons'
import { UnitsOfWeightInput } from "@gtpl/shared-models/sale-management"
const { Panel } = Collapse;
const {Option} = Select
// export const getCssFromComponent = (fromDoc, toDoc) => {
    //     Array.from(fromDoc.styleSheets).forEach((styleSheet: any) => {
      //       if (styleSheet.cssRules) {
        //         // true for inline styles
        //         const newStyleElement = toDoc.createElement("style");
        //         Array.from(styleSheet.cssRules).forEach((cssRule: any) => {
          //           newStyleElement.appendChild(toDoc.createTextNode(cssRule.cssText));
        //         });
        //         toDoc.head.appendChild(newStyleElement);
      //       }
//     });
  //   };

      // Function to get and apply CSS styles from the main document to the print window
    //   const getCssFromComponent = (source, target) => {
    //     const stylesheets = source.styleSheets;
        
    //     for (let i = 0; i < stylesheets.length; i++) {
    //         const stylesheet = stylesheets[i];
    //         if (stylesheet.href) {
    //             const newLink = target.createElement('link');
    //             newLink.rel = 'stylesheet';
    //             newLink.href = stylesheet.href;
    //             target.head.appendChild(newLink);
    //         } else if (stylesheet.cssRules) {
    //             const newStyle = target.createElement('style');
    //             for (let j = 0; j < stylesheet.cssRules.length; j++) {
    //                 const rule = stylesheet.cssRules[j].cssText;
    //                 newStyle.appendChild(target.createTextNode(rule));
    //             }
    //             target.head.appendChild(newStyle);
    //         }
    //     }
    // };

// export const getCssFromComponent = (fromDoc, toDoc) => {
//         Array.from(fromDoc.styleSheets).forEach((styleSheet: any) => {
//           if (styleSheet.cssRules) {
//             // true for inline styles
//             const newStyleElement = toDoc.createElement("style");
//             Array.from(styleSheet.cssRules).forEach((cssRule: any) => {
//               newStyleElement.appendChild(toDoc.createTextNode(cssRule.cssText));
//             });
//             toDoc.head.appendChild(newStyleElement);
//           }
//         });
//       };

    

export interface CostSheetFormatProps{
    enquiryId: number,
    tabName: string,
    resetFields: () => void,
    tabDisplay:(val:boolean) => void,
    freezeStatus : boolean,
    buyerPriceDisplay:(val:boolean) => void,
    operation?:string,
    compId?: string
}

export const CostSheetFormat = (props:CostSheetFormatProps) => {
    const [enquiryInfo,setEnquiryInfo] = useState<any[]>([])
    const enquiryService = new EnquiriesService()
    const [productPriceDetails,setProductPriceDeatils] = useState<any[]>([])
    const [additionRmRate,setAdditionRmRate] = useState<number>()
    const [reduceRmRate,setReduceRmRate] = useState<number>()
    const [countPriceInfo,setCountPriceInfo] = useState<any[]>([])
    const [buyerPriceInfo,setBuyerPriceInfo] = useState<any[]>([])
    const [reasonModalVisible,setReasonModalVisible] = useState<boolean>(false)
    const [rejectreasons,setRejectReasons] = useState<any[]>([])
    const reasonService = new ReasonsService()
    const [rejectForm] = Form.useForm()
    const costingService = new CostingService()
    const logInUser = JSON.parse(localStorage.getItem('role'))
    const [generatedStatus,setGeneratedStatus] = useState<boolean>(false)
    const [buyerPriceExisted,setBuyerPriceExisted] = useState<boolean>(false)
    const [approveModalVisible,setApproveModalVisible] = useState<boolean>(false)
    const [productDetails,setProductDeatils] = useState<any[]>([])
    let contianersReq: ConfirmedContainersReq[] = []
    const [containersInfo,setContainersInfo] = useState<any[]>([])
    const [acceptButton,setAcceptButton] = useState<boolean>(false)
    const history = useHistory()
    const [approveDisable,setApproveDisable] = useState<boolean>(false)
    const [frozenYieldVisible,setFrozenYieldVisible] = useState<boolean>(true)
    const [isExpanded, setIsExpanded] = useState(false);
    const [destination,setdestination] = useState<any[]>([])
    const [form] = Form.useForm()
    const [isDestinationSelected, setIsDestinationSelected] = useState<boolean>(false);
    const [destinationInfo, setDestinationInfo] = useState<any[]>([]);
    const [costingApproveDisable,SetCostingApproveDisable] = useState<boolean>(false)

    useEffect(()=>{
        getCountPriceInfo()
    },[])

    useEffect(() => {
        if (enquiryInfo.length > 0) {
            getDestinationsForCostSheet();
        }
    }, [enquiryInfo]);
    
    const getRejectReasons = () => {
        const req = new ReasonCategoryDto(ReasonCategoryEnum.ENQUIRY_REJECT_REASON)
        reasonService.getReasonsAgainstCategory(req).then(res => {
            if(res.status){
                setRejectReasons(res.data)
            }
        })
    }

    const getCountPriceInfo = () => {
        enquiryService.getCountPricesInfo().then(res => {
            if(res.status){
                setCountPriceInfo(res.data)
            }
        })
    }
    const getDestinationsForCostSheet = () => {
        costingService.getDestinationsForCostSheet().then(res => {
            if (res.status) {
                const enquiryDestinations = enquiryInfo.map(info => info.destination);
                console.log(enquiryDestinations, "enquiryDestinations");
    
                const filteredDestinations = res.data?.filter((dest: any) =>
                    !enquiryDestinations.includes(dest.destinationName)
                );
    
                setdestination(filteredDestinations);
            }
        });
    };

    const evaluateApproveDisable = (productRates: any[]) => {
        const hasInvalidBuyerPrice = productRates.some(p => p.buyerOfferPrice <= 0);
        const hasInvalidQuotePrice = productRates.some(p => p.quotePrice <= 0);

        console.log("Buyer Prices:", productRates.map(p => p.buyerOfferPrice));

        if (!hasInvalidBuyerPrice && !hasInvalidQuotePrice) {
            setApproveDisable(false);
        } else {
            setApproveDisable(true);
        }
    };

    
 
    useEffect(() => {
        if(props.enquiryId){
            setEnquiryInfo([])
            const req = new EnquiryIdreq(props.enquiryId,null,props.operation)
            if((props.tabName == 'quotePriceUpdate' || props.operation == 'regenerate')&& (props.operation != 'view')){
                costingService.generateCostSheet(req).then(res => {
                    if(res.status){
                        for(const rec of res.data[0].productRates){
                            if(rec.buyerOfferPrice > 0){
                                const qty = rec.priceUOM == UnitsOfWeightInput.find(e => e.name == 'kg').value ? Number(rec.quantity) : Number(rec.quantity)/0.454
                                const incentives = rec.buyerOfferPrice > 0 ? Number(((( Number(rec.buyerOfferPrice)-(Number(res.data[0].OceanFrightInUSD)/(qty)))-((( Number(rec.buyerOfferPrice)-(Number(res.data[0].OceanFrightInUSD)/(qty))))*(1.35/100)))*(Number(GlobalVariableValues.incentiveFixedVariable)/100)).toFixed(2)) : 0
                                const adcvd = Number(res.data[0].ad) + Number(res.data[0].cvd)
                                let totalPL = 0
                                let plPercent = 0
                                let contriPercent = 0
                                let adCvdPerVal = 0
                                let totalCostOfSaleLb = 0
                                adCvdPerVal = Number(((Number(rec.buyerOfferPrice) - (Number(res.data[0].OceanFrightInUSD)/(Number(rec.quantity)/0.454))) * (adcvd/100)).toFixed(2))
                                totalCostOfSaleLb = Number(adCvdPerVal) + Number(rec.costOfSalesPerLBUSD)
                                const netPL = Number(rec.buyerOfferPrice)-Number(totalCostOfSaleLb)
                                totalPL = Number(rec.netPLOnBuyerPrice) + incentives
                                plPercent = (totalPL / Number(rec.buyerOfferPrice)) * 100
                                // let contriPercentCal = (Number(rec.costOfSalesPerKgINR) - Number(rec.fixedCost)) / res.data[0].exchangeRate * 0.454
                                // contriPercent = (((Number(rec.buyerOfferPrice) + incentives) - contriPercentCal) / (contriPercentCal)) * 100

                                if(UnitsOfWeightInput.find(e => e.value == rec.priceUOM).name == 'lb'){
                                    contriPercent = ((Number(incentives)+Number(rec.buyerOfferPrice))-((Number(rec.costOfSalesPerKgINR)-Number(rec.fixedCost))/Number(res.data[0].exchangeRate)*0.454))/((Number(incentives)+Number(rec.buyerOfferPrice)))
                                }else{
                                    contriPercent  = ((Number(incentives)+Number(rec.buyerOfferPrice))/0.454-((Number(rec.costOfSalesPerKgINR)-Number(rec.fixedCost))/Number(res.data[0].exchangeRate)))/((Number(incentives)+Number(rec.buyerOfferPrice))/0.454)
                        
                                }
                                rec.adCVDpercentageVal = adCvdPerVal
                                rec.totCostOfSalesPerLBUSD = totalCostOfSaleLb
                                rec.incentives = incentives
                                rec.totalProfitLoss = totalPL
                                rec.plPercentage = plPercent
                                rec.contributionPercentage = contriPercent * 100

                            }
                        }
                        setEnquiryInfo(res.data)
                        props.tabDisplay(true)
                        // evaluateApproveDisable(res.data[0].productRates);

                        const findQuoteInd = res.data[0].productRates.findIndex(e => {
                            return (
                                e.quotePrice <= 0
                            )
                        })
                        res.intlCode == 100 && findQuoteInd == -1 ? setGeneratedStatus(true) : setGeneratedStatus(false)
                        const findInd = res.data[0].productRates.findIndex(e => {
                            return (
                                e.buyerOfferPrice <= 0
                            )
                        })
                        if(findInd == -1 && res.data[0].enquiryStatus != EnquiryLifecycleStatusEnum.RENEGOTIATED){
                            setBuyerPriceExisted(true)
                            props.buyerPriceDisplay(true)
                        }
                        if(findInd == -1 && findQuoteInd == -1){
                            setApproveDisable(false)
                        }else{
                            setApproveDisable(true)
                        }

                        const frozenYieldInfo = res.data[0].productRates.filter(e => {return(e.styleWeighment != 'NWNC')})
                        if(frozenYieldInfo.length > 0){
                            setFrozenYieldVisible(true)
                        }else{
                            setFrozenYieldVisible(false)
                        }
                        AlertMessages.getSuccessMessage(res.internalMessage)
                    }else{
                        setEnquiryInfo([])
                        props.tabDisplay(false)
                        props.resetFields()
                    AlertMessages.getErrorMessage(res.internalMessage)
                    history.push('/freeze-unfreeze-info')
                    }
                })
            }
            else{
               getCostSheetInfo(req)
            }
        }

    },[props.enquiryId])

    const regenerateCostSheet = () => {
        const req = new EnquiryIdreq(props.enquiryId, null, props.operation);
      
        costingService.generateCostSheet(req).then(res => {
          if (res.status) {
            for (const rec of res.data[0].productRates) {
              if (rec.buyerOfferPrice > 0) {
                const qty =
                  rec.priceUOM === UnitsOfWeightInput.find(e => e.name === 'kg')?.value
                    ? Number(rec.quantity)
                    : Number(rec.quantity) / 0.454;
      
                const incentives =
                  ((Number(rec.buyerOfferPrice) - Number(res.data[0].OceanFrightInUSD) / qty -
                    ((Number(rec.buyerOfferPrice) - Number(res.data[0].OceanFrightInUSD) / qty) * (1.35 / 100))) *
                    (Number(GlobalVariableValues.incentiveFixedVariable) / 100)) || 0;
      
                const adcvd = Number(res.data[0].ad) + Number(res.data[0].cvd);
                const adCvdPerVal =
                  (Number(rec.buyerOfferPrice) - Number(res.data[0].OceanFrightInUSD) / (Number(rec.quantity) / 0.454)) *
                  (adcvd / 100);
                const totalCostOfSaleLb = Number(adCvdPerVal) + Number(rec.costOfSalesPerLBUSD);
                const totalPL = Number(rec.netPLOnBuyerPrice) + incentives;
                const plPercent = (totalPL / Number(rec.buyerOfferPrice)) * 100;
      
                let contriPercent = 0;
                if (UnitsOfWeightInput.find(e => e.value === rec.priceUOM)?.name === 'lb') {
                  contriPercent =
                    ((Number(incentives) + Number(rec.buyerOfferPrice)) -
                      ((Number(rec.costOfSalesPerKgINR) - Number(rec.fixedCost)) /
                        Number(res.data[0].exchangeRate)) *
                        0.454) /
                    (Number(incentives) + Number(rec.buyerOfferPrice));
                } else {
                  contriPercent =
                    (Number(incentives) + Number(rec.buyerOfferPrice)) / 0.454 -
                    (Number(rec.costOfSalesPerKgINR) - Number(rec.fixedCost)) / Number(res.data[0].exchangeRate);
                  contriPercent /= (Number(incentives) + Number(rec.buyerOfferPrice)) / 0.454;
                }
      
                rec.adCVDpercentageVal = adCvdPerVal;
                rec.totCostOfSalesPerLBUSD = totalCostOfSaleLb;
                rec.incentives = incentives;
                rec.totalProfitLoss = totalPL;
                rec.plPercentage = plPercent;
                rec.contributionPercentage = contriPercent * 100;
              }
            }
      
            setEnquiryInfo(res.data);
            props.tabDisplay(true);
            // evaluateApproveDisable(res.data[0].productRates);
      
            const findQuoteInd = res.data[0].productRates.findIndex(e => e.quotePrice <= 0);
            const findInd = res.data[0].productRates.findIndex(e => e.buyerOfferPrice <= 0);
      
            res.intlCode === 100 && findQuoteInd === -1
              ? setGeneratedStatus(true)
              : setGeneratedStatus(false);
      
            if (findInd === -1 && res.data[0].enquiryStatus !== EnquiryLifecycleStatusEnum.RENEGOTIATED) {
              setBuyerPriceExisted(true);
              props.buyerPriceDisplay(true);
            }
      
            if (findInd === -1 && findQuoteInd === -1) {
              setApproveDisable(false);
            } else {
              setApproveDisable(true);
            }
      
            const frozenYieldInfo = res.data[0].productRates.filter(e => e.styleWeighment !== 'NWNC');
            setFrozenYieldVisible(frozenYieldInfo.length > 0);
      
            AlertMessages.getSuccessMessage(res.internalMessage);
          } else {
            setEnquiryInfo([]);
            props.tabDisplay(false);
            props.resetFields();
            AlertMessages.getErrorMessage(res.internalMessage);
            history.push('/freeze-unfreeze-info');
          }
        });
      };
      

    const getCostSheetInfo = (req) => {
        setEnquiryInfo([])
        costingService.getCostSheetInfo(req).then(res => {
            if(res.status){
                setEnquiryInfo(res.data)
                props.tabDisplay(true)
                setGeneratedStatus(true)
                // evaluateApproveDisable(res.data[0].productRates);

                const findInd = res.data[0].productRates.findIndex(e => {
                    return (
                        e.buyerOfferPrice <= 0
                    )
                })
                if(findInd == -1 && res.data[0].enquiryStatus != EnquiryLifecycleStatusEnum.RENEGOTIATED){
                    setBuyerPriceExisted(true)
                    props.buyerPriceDisplay(true)
                }
                const frozenYieldInfo = res.data[0].productRates.filter(e => {return(e.styleWeighment != StyleWeighmentEnum.NWNC)})
                if(frozenYieldInfo.length > 0){
                    setFrozenYieldVisible(true)
                }else{
                    setFrozenYieldVisible(false)
                }
           
            AlertMessages.getSuccessMessage(res.internalMessage)

            }else{
                setEnquiryInfo([])
                props.tabDisplay(false)
                props.resetFields()
            AlertMessages.getSuccessMessage(res.internalMessage)
            }
        })
    }

    const generateCostSheetAgainstDestination = (req: CostingDestinationReq) => {
        setIsDestinationSelected(true); 
        costingService.generateCostSheetAgainstDestination(req).then((res) => {
            if(res.status){
                for (const rec of res.data[0].productRates) {
                    if (rec.buyerOfferPrice > 0) {
                        const qty = rec.priceUOM == UnitsOfWeightInput.find(e => e.name == 'kg').value 
                            ? Number(rec.quantity) 
                            : Number(rec.quantity) / 0.454;
                        const oceanFreight = Number(rec.oceanFreightInUsd); 
                        const incentives = ((Number(rec.buyerOfferPrice) - (oceanFreight / qty)) - 
                            ((Number(rec.buyerOfferPrice) - (oceanFreight / qty)) * (1.35 / 100))) * 
                            (Number(GlobalVariableValues.incentiveFixedVariable) / 100);
                        const adcvd = Number(res.data[0].ad) + Number(res.data[0].cvd);
                
                        const adCvdPerVal = (Number(rec.buyerOfferPrice) - (oceanFreight / (Number(rec.quantity) / 0.454))) * (adcvd / 100);

                        const totalCostOfSaleLb = Number(adCvdPerVal) + Number(rec.costOfSalesPerLBUSD);
                
                        const netPL = Number(rec.buyerOfferPrice) - totalCostOfSaleLb;
                
                        const totalPL = Number(rec.netPLOnBuyerPrice) + incentives;
                        
                        const plPercent = (totalPL / Number(rec.buyerOfferPrice)) * 100;
                
                        let contriPercent = 0;
                        if (UnitsOfWeightInput.find(e => e.value == rec.priceUOM).name == 'lb') {
                            contriPercent = (
                                (Number(incentives) + Number(rec.buyerOfferPrice)) - 
                                ((Number(rec.costOfSalesPerKgINR) - Number(rec.fixedCost)) / Number(res.data[0].exchangeRate) * 0.454)
                            ) / (Number(incentives) + Number(rec.buyerOfferPrice));
                        } else {
                            contriPercent = (
                                (Number(incentives) + Number(rec.buyerOfferPrice)) / 0.454 - 
                                ((Number(rec.costOfSalesPerKgINR) - Number(rec.fixedCost)) / Number(res.data[0].exchangeRate) * 0.454)
                            ) / ((Number(incentives) + Number(rec.buyerOfferPrice)) / 0.454);
                        }
                        rec.adCVDpercentageVal = adCvdPerVal
                        rec.totCostOfSalesPerLBUSD = totalCostOfSaleLb
                        rec.incentives = incentives
                        rec.totalProfitLoss = totalPL
                        rec.plPercentage = plPercent
                        rec.contributionPercentage = contriPercent * 100

                
                    }
                }                
                setDestinationInfo(res.data)
                props.tabDisplay(true)
                const findQuoteInd = res.data[0].productRates.findIndex(e => {
                    return (
                        e.quotePrice <= 0
                    )
                })
                res.intlCode == 100 && findQuoteInd == -1 ? setGeneratedStatus(true) : setGeneratedStatus(false)
                const findInd = res.data[0].productRates.findIndex(e => {
                    return (
                        e.buyerOfferPrice <= 0
                    )
                })
                if(findInd == -1 && res.data[0].enquiryStatus != EnquiryLifecycleStatusEnum.RENEGOTIATED){
                    setBuyerPriceExisted(true)
                    props.buyerPriceDisplay(true)
                }
                if(findInd == -1 && findQuoteInd == -1){
                    setApproveDisable(false)
                }else{
                    setApproveDisable(true)
                }

                const frozenYieldInfo = res.data[0].productRates.filter(e => {return(e.styleWeighment != 'NWNC')})
                if(frozenYieldInfo.length > 0){
                    setFrozenYieldVisible(true)
                }else{
                    setFrozenYieldVisible(false)
                }
                AlertMessages.getSuccessMessage(res.internalMessage)
            } else {
            setDestinationInfo([]);
            props.tabDisplay(false);
            props.resetFields();
            AlertMessages.getSuccessMessage(res.internalMessage);
          }
        });
      };
      const displayedData = isDestinationSelected ? destinationInfo : enquiryInfo;

    // const onPrint = () => {
       
    //     const divContents = document.getElementById('print').innerHTML;
    // const element = window.open('', '', 'height=700, width=1024');
    // element.document.write(divContents);
    // getCssFromComponent(document, element.document);
    // element.document.close();
    // element.print();
    // element.close(); // to close window when click on cancel/Save
    // }

    // const onPrint = () => {
    // const invoiceContent = document.getElementById("print");
    //     if (invoiceContent) {
    //         const devContent = invoiceContent.innerHTML;
    //         const printWindow = window.open("", "PRINT", "height=900,width=1600");
       
    //     printWindow.document.write(`
    //             <html>
    //                 <head>
    //                     <style>
    //                     @media print {
    //                         @page {
    //                             size: landscape;
    //                             margin: 20;
    //                         }
    //                         body {
    //                             height: initial !important
    //                             margin: 0;
    //                             transform: scale(1);
    //                             transform-origin: top center;
    //                             width:100%;
    //                         }
    //                     }
    //                     </style>
    //                 </head>
    //                 <body>${devContent}</body>
    //             </html>
    //         `);
    
    //         getCssFromComponent(document, printWindow.document);
    
    // printWindow.document.close();
    // setTimeout(function () {
    // printWindow.print();
    // printWindow.close();
    // }, 1000); // Add a delay to ensure all content is loaded
    // }
    // };


    
    const onQuotePriceChange = (e,productId,productName,category,styleWeighment,unitPrice,enquiryProductId,netWeight) => {
        if(e.target.value > 0){

            const productRateIndex = displayedData[0].productRates.findIndex(e => {
                return(e.productName === productName && e.category === category && e.styleWeighment == styleWeighment && e.buyerOfferPrice === unitPrice && e.netWeight == netWeight)
            })
            const qty = displayedData[0].productRates[productRateIndex].priceUOM == UnitsOfWeightInput.find(e => e.name == 'kg').value ? Number(displayedData[0].productRates[productRateIndex].quantity) : Number(displayedData[0].productRates[productRateIndex].quantity)/0.454
            const incentives = e.target.value > 0 ? ((( Number(e.target.value)-(Number(displayedData[0].OceanFrightInUSD)/(qty)))-((( Number(e.target.value)-(Number(displayedData[0].OceanFrightInUSD)/(qty))))*(1.35/100)))*(Number(GlobalVariableValues.incentiveFixedVariable)/100)).toFixed(2) : 0
            let totalPL = 0
            let plPercent = 0
            let contriPercent = 0
            let adCvdPerVal = 0
            let totalCostOfSaleLb = 0
            let totalCostOfSaleKG = 0
            let netPL = 0
            const adcvd = Number(displayedData[0].ad) + Number(displayedData[0].cvd)
            adCvdPerVal = Number(((Number(e.target.value) - (Number(displayedData[0].OceanFrightInUSD)/(Number(displayedData[0].productRates[productRateIndex].quantity)/0.454))) * (adcvd/100)).toFixed(2))
            totalCostOfSaleLb = Number(adCvdPerVal) + Number(displayedData[0].productRates[productRateIndex].costOfSalesPerLBUSD)
            totalCostOfSaleKG = Number(adCvdPerVal) + Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgUSD)
            const viewnetPL = Number((Number(e.target.value)-(displayedData[0].productRates[productRateIndex].priceUOM == UnitsOfWeightInput.find(e => e.name == 'lb').value ? Number(totalCostOfSaleLb) : Number(totalCostOfSaleKG))).toFixed(2))
            // let contriPercentCal = (Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR) - Number(displayedData[0].productRates[productRateIndex].fixedCost)) / displayedData[0].exchangeRate * 0.454
            const viewPlPercent = ((viewnetPL + Number(incentives)) / Number(e.target.value)) * 100
            // const viewcontriPercent = (((Number(e.target.value) + incentives) - contriPercentCal) / (contriPercentCal)) * 100
            let viewcontriPercent
            if(UnitsOfWeightInput.find(e => e.value == displayedData[0]?.productRates[0]?.priceUOM).name == 'lb'){
                // console.log(Number(e.target.value)+Number(incentives),'==========')
                // console.log(Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR)-Number(displayedData[0].productRates[productRateIndex].fixedCost),'****')
                // console.log(Number(displayedData[0].exchangeRate)*0.454,'-----------')
                viewcontriPercent = ((Number(e.target.value)+Number(incentives))-((Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR)-Number(displayedData[0].productRates[productRateIndex].fixedCost))/Number(displayedData[0].exchangeRate)*0.454))/((Number(e.target.value)+Number(incentives)))
                // console.log(viewcontriPercent,'viewcontriPercent')
                contriPercent = ((Number(displayedData[0].productRates[productRateIndex].buyerOfferPrice)+Number(incentives))-((Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR)-Number(displayedData[0].productRates[productRateIndex].fixedCost))/Number(displayedData[0].exchangeRate)*0.454))/((Number(displayedData[0].productRates[productRateIndex].buyerOfferPrice)+Number(incentives)))
            }else{
                viewcontriPercent = ((Number(e.target.value)+Number(incentives))/0.454-((Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR)-Number(displayedData[0].productRates[productRateIndex].fixedCost))/Number(displayedData[0].exchangeRate)))/((Number(e.target.value)+Number(incentives))/0.454)
                contriPercent  = ((Number(displayedData[0].productRates[productRateIndex].buyerOfferPrice)+Number(incentives))/0.454-((Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR)-Number(displayedData[0].productRates[productRateIndex].fixedCost))/Number(displayedData[0].exchangeRate)))/((Number(displayedData[0].productRates[productRateIndex].buyerOfferPrice)+Number(incentives))/0.454)
            }
    
            if(displayedData[0].productRates[productRateIndex].buyerOfferPrice == 0 && displayedData[0].productRates[productRateIndex].adCVDpercentageVal != 0){
                
                displayedData[0].productRates[productRateIndex].adCVDpercentageVal = adCvdPerVal
                displayedData[0].productRates[productRateIndex].totCostOfSalesPerLBUSD = totalCostOfSaleLb
            }
            // console.log(viewcontriPercent,'viewcontriPercent')
         
    
            if(displayedData[0].productRates[productRateIndex].buyerOfferPrice > 0){
                // netPL = Number((Number(displayedData[0].productRates[productRateIndex].buyerOfferPrice)-(displayedData[0].productRates[productRateIndex].priceUOM == UnitsOfWeightInput.find(e => e.name == 'lb').value ? Number(totalCostOfSaleLb) : Number(totalCostOfSaleKG))).toFixed(2))
                totalPL = Number(displayedData[0].productRates[productRateIndex].netPLOnBuyerPrice) + Number(incentives)
                plPercent = (totalPL / Number(displayedData[0].productRates[productRateIndex].buyerOfferPrice)) * 100
                
                // contriPercent = (((Number(displayedData[0].productRates[productRateIndex].buyerOfferPrice) + incentives) - contriPercentCal) / (contriPercentCal)) * 100
                // displayedData[0].productRates[productRateIndex].totalProfitLoss = totalPL
                // displayedData[0].productRates[productRateIndex].plPercentage = plPercent
                // displayedData[0].productRates[productRateIndex].contributionPercentage = contriPercent * 100
                adCvdPerVal =  displayedData[0].productRates[productRateIndex].adCVDpercentageVal 
                totalCostOfSaleLb = displayedData[0].productRates[productRateIndex].totCostOfSalesPerLBUSD 
            }
            displayedData[0].productRates[productRateIndex].netPLOnBuyerPrice = viewnetPL
            displayedData[0].productRates[productRateIndex].incentives =  Number(incentives)
            displayedData[0].productRates[productRateIndex].totalProfitLoss = (viewnetPL + Number(incentives))
            displayedData[0].productRates[productRateIndex].plPercentage = viewPlPercent
            displayedData[0].productRates[productRateIndex].contributionPercentage = viewcontriPercent * 100
            setEnquiryInfo([...displayedData])
          
            const productIndex = productPriceDetails.findIndex(e => {
                return(
                    e.productName === productName && e.category == category && e.styleWeighment == styleWeighment && e.buyerOfferPrice === unitPrice && e.netWeight == netWeight
                )
            })
            // const productIndex = productPriceDetails.findIndex(e => {
            //     return(
            //         e.enquiryProductId = enquiryProductId
            //     )
            // })
         
            if(productIndex != -1){
                // productPriceDetails.splice(productIndex,1)
                productPriceDetails[productIndex].quotePrice = Number(e.target.value)
                productPriceDetails[productIndex].incentives = incentives
                productPriceDetails[productIndex].totalPL = totalPL
                productPriceDetails[productIndex].plPercentage = plPercent
                productPriceDetails[productIndex].contributionPercentage = contriPercent * 100
                productPriceDetails[productIndex].productName = productName
                productPriceDetails[productIndex].category = category
                productPriceDetails[productIndex].styleWeighment = styleWeighment
                productPriceDetails[productIndex].adCvdPercent = adCvdPerVal
                productPriceDetails[productIndex].totalCostOfSalesPerLb = totalCostOfSaleLb
                productPriceDetails[productIndex].enquiryProductId = displayedData[0].productRates[productRateIndex].enquiryProductId
                productPriceDetails[productIndex].buyerOfferPrice = unitPrice
                productPriceDetails[productIndex].netWeight = netWeight
                setProductPriceDeatils([...productPriceDetails])
    
            }else{
                const productPriceReq = new ProductQuotePrices()
                productPriceReq.productId = productId
                productPriceReq.quotePrice = Number(e.target.value)
                productPriceReq.incentives = Number(incentives)
                productPriceReq.totalPL = totalPL
                productPriceReq.plPercentage = plPercent
                productPriceReq.contributionPercentage = contriPercent * 100
                productPriceReq.productName = productName
                productPriceReq.category = category
                productPriceReq.styleWeighment = styleWeighment
                productPriceReq.adCvdPercent = adCvdPerVal
                productPriceReq.enquiryProductId = enquiryProductId
                productPriceReq.totalCostOfSalesPerLb = totalCostOfSaleLb
                productPriceReq.buyerOfferPrice = unitPrice
                productPriceReq.netWeight = netWeight
    
    
                setProductPriceDeatils([...productPriceDetails,productPriceReq])
            }
        }
        
    }

    const onAdditionRmRateChange = (e) => {
        setAdditionRmRate(e.target.value)
        displayedData[0]?.productRates.map(rec => {
            let calVal = ((((Number(rec.prevailingRmRate) + Number(e.target.value))/ (Number(rec.yieldPer)/100) ) + Number(rec.totalExpenses) ) / Number(displayedData[0].exchangeRate) * 0.454)+Number(Number((rec.adCVDpercentageVal)).toFixed(2))
            // let calVal = ((((rec.prevailingRmRate + e.target.value) * 100) / rec.yield) + rec.totalExpenses)/(82* 0.454)
            rec.costOfSalesForAddedRmRate = calVal
            const productIndex = productPriceDetails.findIndex(e => {
                return(
                    e.productId === rec.productId
                )
            })
            if(productIndex != -1){
                productPriceDetails[productIndex].costOfSalesForAddedRmRate = calVal
                setProductPriceDeatils([...productPriceDetails])
            }else{
                const productPriceReq = new ProductQuotePrices()
                productPriceReq.costOfSalesForAddedRmRate = calVal
                productPriceReq.productId = rec.productId
                setProductPriceDeatils([...productPriceDetails,productPriceReq])
            }
        })
        setEnquiryInfo([...displayedData])
    }

    const onReduceRmRateChange = (e) => {
        setReduceRmRate(e.target.value)
        displayedData[0]?.productRates.map(rec => {
            // let calVal = (((Number(rec.prevailingRmRate) - Number(e.target.value)) * 100 / Number(rec.yieldPer) ) + Number(rec.totalExpenses) ) / (82 * 0.454)
            let calVal = ((((Number(rec.prevailingRmRate)-Number(e.target.value))/(Number(rec.yieldPer)/100))+Number(rec.totalExpenses))/Number(displayedData[0].exchangeRate) * 0.454)+Number(Number((rec.adCVDpercentageVal)).toFixed(2))
            rec.costOfSalesForReducedRmRate = calVal
            const productIndex = productPriceDetails.findIndex(e => {
                return(
                    e.productId === rec.productId
                )
            })
            if(productIndex != -1){
                productPriceDetails[productIndex].costOfSalesForReducedRmRate = calVal
                setProductPriceDeatils([...productPriceDetails])
            }else{
                const productPriceReq = new ProductQuotePrices()
                productPriceReq.costOfSalesForReducedRmRate = calVal
                productPriceReq.productId = rec.productId
                setProductPriceDeatils([...productPriceDetails,productPriceReq])
            }
            
        })
        setEnquiryInfo([...displayedData])
    }

    const onQuotePriceUpdate = () => {
        console.log(productPriceDetails,'productPriceDetails')
        const proPriceInfo = productPriceDetails.filter(e =>{ return(e.quotePrice != undefined)})
        if(proPriceInfo.length == displayedData[0].productRates.length){
            const req = new QuoteRequest(props.enquiryId,additionRmRate,reduceRmRate,EnquiryLifecycleStatusEnum.QUOTATION_SENT,productPriceDetails)
            costingService.UpdateEnquiry(req).then(res => {
                if(res.status){
                    AlertMessages.getSuccessMessage(res.internalMessage)
                   
                    if(form.getFieldValue('destinationId')){
                        const desReq=new CostingDestinationReq(props.enquiryId,form.getFieldValue('destinationId'))
                        generateCostSheetAgainstDestination(desReq)
                    }else{
                        const costReq = new EnquiryIdreq(props.enquiryId)
                        getCostSheetInfo(costReq)
                    }
                }else{
                    AlertMessages.getErrorMessage(res.internalMessage)
                }
            })
        }else{
            AlertMessages.getErrorMessage('Quote price should be given for all products')
        }

    }

    const onBuyerOfferPriceChange = (e,productId,productName,category,styleWeighment,unitPrice,enquiryProductId,netWeight) => {
        const productRateIndex = displayedData[0].productRates.findIndex(e => {
            return(e.productName === productName && e.category == category && e.styleWeighment == styleWeighment && e.netWeight == netWeight)
        })

        
        const buyerpriceincentives = e.target.value > 0 ? Number(((( Number(e.target.value)-(Number(displayedData[0].OceanFrightInUSD)/(Number(displayedData[0].productRates[productRateIndex].quantity)/0.454)))-((( Number(e.target.value)-(Number(displayedData[0].OceanFrightInUSD)/(Number(displayedData[0].productRates[productRateIndex].quantity)/0.454))))*(1.35/100)))*(Number(GlobalVariableValues.incentiveFixedVariable)/100)).toFixed(2)) : 0

        const adcvd = Number(displayedData[0].ad) + Number(displayedData[0].cvd)
        const adCvdPerVal = Number(((Number(e.target.value) - (Number(displayedData[0].OceanFrightInUSD)/(Number(displayedData[0].productRates[productRateIndex].quantity)/0.454))) * (adcvd/100)).toFixed(2))
        const totalCostOfSaleLb = Number(adCvdPerVal) + Number(displayedData[0].productRates[productRateIndex].costOfSalesPerLBUSD)

        const totalCostOfSaleKG = Number(adCvdPerVal) + Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgUSD)

        const netPL = Number((Number(e.target.value)-(displayedData[0].productRates[productRateIndex].priceUOM == UnitsOfWeightInput.find(e => e.name == 'lb').value ? Number(totalCostOfSaleLb) : Number(totalCostOfSaleKG))).toFixed(2))
        // console.log(netPL,'------netpl')
        const viewtotalPL = netPL + Number(buyerpriceincentives)
        const viewplPercent = ( netPL + Number(buyerpriceincentives))/ (Number(e.target.value))

        const quotePriceIncentive = Number(((( Number(displayedData[0].productRates[productRateIndex].quotePrice)-(Number(displayedData[0].OceanFrightInUSD)/(Number(displayedData[0].productRates[productRateIndex].quantity)/0.454)))-((( Number(e.target.value)-(Number(displayedData[0].OceanFrightInUSD)/(Number(displayedData[0].productRates[productRateIndex].quantity)/0.454))))*(1.35/100)))*(Number(GlobalVariableValues.incentiveFixedVariable)/100)).toFixed(2))
        const totalPL = netPL + Number(quotePriceIncentive)
        const plPercent = ( netPL + Number(displayedData[0].productRates[productRateIndex].incentives))/ (Number(e.target.value))
        // const contriPercent = ((Number(e.target.value) + Number(displayedData[0].productRates[productRateIndex].incentives)) - displayedData[0].productRates[productRateIndex].costOfProduction) / (displayedData[0].productRates[productRateIndex].costOfProduction)
        // const contriCal = (Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR) + Number(displayedData[0].productRates[productRateIndex].fixedCost)) /Number(displayedData[0].exchangeRate)* 0.454

        // const viewcontriPercent = ((Number(e.target.value) + Number(buyerpriceincentives)) - Number(contriCal)) / Number(contriCal)
        
        // const contriPercent = ((Number(e.target.value) + Number(displayedData[0].productRates[productRateIndex].incentives)) - Number(contriCal)) / Number(contriCal)
        let viewcontriPercent
        let contriPercent
        if(UnitsOfWeightInput.find(e => e.value == displayedData[0]?.productRates[0]?.priceUOM).name == 'lb'){
            viewcontriPercent = ((Number(buyerpriceincentives)+Number(e.target.value))-((Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR)-Number(displayedData[0].productRates[productRateIndex].fixedCost))/Number(displayedData[0].exchangeRate)*0.454))/((Number(buyerpriceincentives)+Number(e.target.value)))
            contriPercent = ((Number(displayedData[0].productRates[productRateIndex].incentives)+Number(e.target.value))-((Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR)-Number(displayedData[0].productRates[productRateIndex].fixedCost))/Number(displayedData[0].exchangeRate)*0.454))/((Number(displayedData[0].productRates[productRateIndex].incentives)+Number(e.target.value)))
        }else{
            viewcontriPercent = ((Number(buyerpriceincentives)+Number(e.target.value))/0.454-((Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR)-Number(displayedData[0].productRates[productRateIndex].fixedCost))/Number(displayedData[0].exchangeRate)))/((Number(buyerpriceincentives)+Number(e.target.value))/0.454)
            contriPercent  = ((Number(displayedData[0].productRates[productRateIndex].incentives)+Number(e.target.value))/0.454-((Number(displayedData[0].productRates[productRateIndex].costOfSalesPerKgINR)-Number(displayedData[0].productRates[productRateIndex].fixedCost))/Number(displayedData[0].exchangeRate)))/((Number(displayedData[0].productRates[productRateIndex].incentives)+Number(e.target.value))/0.454)
        }
       
        displayedData[0].productRates[productRateIndex].netPLOnBuyerPrice = netPL
        displayedData[0].productRates[productRateIndex].totalProfitLoss = viewtotalPL
        displayedData[0].productRates[productRateIndex].plPercentage = viewplPercent
        displayedData[0].productRates[productRateIndex].contributionPercentage = viewcontriPercent * 100
        displayedData[0].productRates[productRateIndex].adCVDpercentageVal = adCvdPerVal
        displayedData[0].productRates[productRateIndex].totCostOfSalesPerLBUSD = totalCostOfSaleLb
        displayedData[0].productRates[productRateIndex].incentives = buyerpriceincentives
        // console.log(displayedData,'displayedData')
        setEnquiryInfo([...displayedData])
        
        const index = buyerPriceInfo.findIndex(e => {
            return(
                e.productName === productName && e.category == category && e.styleWeighment == styleWeighment && e.netWeight == netWeight
            )
        })
        if(index != -1){
            buyerPriceInfo[index].buyerPrice = e.target.value
            buyerPriceInfo[index].totalPL = totalPL
            buyerPriceInfo[index].netPLOnBuyerPrice = netPL
            buyerPriceInfo[index].plPercentage = plPercent
            buyerPriceInfo[index].contributionPercentage = contriPercent * 100
            buyerPriceInfo[index].productName = productName
            buyerPriceInfo[index].category = category
            buyerPriceInfo[index].styleWeighment = styleWeighment
            buyerPriceInfo[index].adCvdPercent = adCvdPerVal
            buyerPriceInfo[index].totalCostOfSalesPerLb = totalCostOfSaleLb
            buyerPriceInfo[index].enquiryProductId = displayedData[0].productRates[productRateIndex].enquiryProductId
            buyerPriceInfo[index].buyerOfferPrice = unitPrice
            buyerPriceInfo[index].netWeight = netWeight

            setBuyerPriceInfo([...buyerPriceInfo])
        }else{
            const buyerPriceReq = new ProductQuotePrices()
            buyerPriceReq.productId = productId
            buyerPriceReq.buyerPrice = e.target.value
            buyerPriceReq.totalPL = totalPL
            buyerPriceReq.netPLOnBuyerPrice = netPL
            buyerPriceReq.plPercentage = plPercent
            buyerPriceReq.contributionPercentage = contriPercent * 100
            buyerPriceReq.productName = productName
            buyerPriceReq.category = category
            buyerPriceReq.styleWeighment = styleWeighment
            buyerPriceReq.adCvdPercent = adCvdPerVal
            buyerPriceReq.totalCostOfSalesPerLb = totalCostOfSaleLb
            buyerPriceReq.enquiryProductId = enquiryProductId
            buyerPriceReq.buyerOfferPrice = unitPrice
            buyerPriceReq.netWeight = netWeight
            setBuyerPriceInfo([...buyerPriceInfo,buyerPriceReq])
        }
       
      
    }

    const onBuyerPriceUpdate = () => {
        // console.log(buyerPriceInfo,'=================')
        const findIndex = buyerPriceInfo.findIndex(e => {return(e.buyerOfferPrice == 0 || e.buyerOfferPrice == undefined || e.buyerOfferPrice == null)})
        // console.log(findIndex,'===findindex')
        if(findIndex == -1){
            const req = new QuoteRequest(props.enquiryId,null,null,EnquiryLifecycleStatusEnum.ACCEPTANCE_PENDING,buyerPriceInfo)
            costingService.UpdateBuyerWisePrices(req).then(res => {
                if(res.status){
                    AlertMessages.getSuccessMessage(res.internalMessage)
    
                    if(form.getFieldValue('destinationId')){
                        const desReq=new CostingDestinationReq(props.enquiryId,form.getFieldValue('destinationId'))
                        generateCostSheetAgainstDestination(desReq)
                    }else{
                        const costReq = new EnquiryIdreq(props.enquiryId)
                        getCostSheetInfo(costReq)
                    }
                }else{
                    AlertMessages.getErrorMessage(res.internalMessage)
                }
            })
        }else{
            AlertMessages.getErrorMessage('Please enter buyer offer price for all products')
        }
    }

    const onEnquiryApprove = () => {
        enquiryService.getAllEnquiryDetailsById({enquiryid:props.enquiryId}).then(res =>{
            if(res.status){
                res.data[0]?.productDetails.map(e => {
                    e.confirmedContainers = e.noOfContainers
                })
                setProductDeatils(res?.data[0]?.productDetails)
                setApproveModalVisible(true)
            }else{
                setProductDeatils([])
            }
          })

    }

    const onEnquiryRenegotiate = () => {
        enquiryStatusUpdate(EnquiryLifecycleStatusEnum.RENEGOTIATED)
    }

    const onEnquiryReject = () => {
        getRejectReasons()
        setReasonModalVisible(true)
    }

    const onRejectReasonModalOk = () => {
        const rejectReason = rejectForm.getFieldValue('rejectReason');
        const rejectDescription = rejectForm.getFieldValue('rejectDescription');
    
        if (rejectReason !== undefined) {
            setReasonModalVisible(false);
            enquiryStatusUpdate(EnquiryLifecycleStatusEnum.REJECTED, rejectDescription);
        } else {
            AlertMessages.getErrorMessage('Please select reject reason');
        }
    };
    

    const enquiryStatusUpdate = (status, rejectDescription = null) => {
        const req = new EnquiryAssessmentUpdateReq(props.enquiryId, status, null, logInUser,null,rejectDescription);
    
        if (status === EnquiryLifecycleStatusEnum.REJECTED) {
            req.rejectReason = rejectForm.getFieldValue('rejectReason');
            req.rejectDescription = rejectDescription; 
        }
    
        costingService.UpdateCostingApproval(req).then(res => {
            if (res.status) {
                AlertMessages.getSuccessMessage(res.internalMessage);
                // location.reload();
                history.push('/freeze-unfreeze-info')
            } else {
                AlertMessages.getErrorMessage(res.internalMessage);
            }
        });
    };
    

    const onApproveModalOk = () => {
        console.log('approveee')
        setAcceptButton(true)
    }

    const closeApproveModal = () => {
        setApproveModalVisible(false)
        setAcceptButton(false)
        setProductDeatils([])
        // location.reload()
        history.push('/freeze-unfreeze-info')
    }

    return(
        <div>
            <style>
                {
                    `
                    .ant-collapse-content > .ant-collapse-content-box{
                        padding : 0px;
                    }
                        table {
                            display: table;
                            border-collapse: collapse;
                            font-weight: 500;
                        
                        }
                        :where(.css-dev-only-do-not-override-98ntnt).ant-descriptions .ant-descriptions-item-container .ant-descriptions-item-label {
                            display: inline-flex;
                            align-items: baseline;
                            font-weight: bold;
                            color: white;
                        }
                        :where(.css-dev-only-do-not-override-98ntnt).ant-descriptions .ant-descriptions-item-container .ant-descriptions-item-content {
                            display: inline-flex;
                            align-items: baseline;
                            color: rgb(7, 7, 7);
                            color: white;
                        }
                        
                        .ant-collapse > .ant-collapse-item > .ant-collapse-header{
                            padding: 3px 12px 3px 13px;
                        }
                        .ant-col-xl-24 {
                            display: block;
                            flex: 0 0 100%;
                            max-width: 100%;
                            padding: 2px 10px 2px 10px;
                        }
                        span.ant-descriptions-item-label {
                            font-weight: bold;
                            font-size: small;
                            padding-left: 15px;
                        }
                       
                        .table-column tr td:not(:first-child) {
                        text-align: center;
                        }
                        .top-header{
                            position: -webkit-sticky;
                            position: sticky;
                            top: 0;
                            z-index: 2;
                            background-color: rgb(105, 202, 165);
                        }
                             .column-horizontal{
                            position: -webkit-sticky;
                            position: sticky;
                            left: 0;
                            z-index: 1;
                            background-color: #fff;
                            
                        }
                        .header-scroll-left{
                            position: -webkit-sticky;
                            position: sticky;
                            left: 0;
                            z-index: 3;
                            background-color: rgb(105, 202, 165);
                        }
                         .quote{
                         position: -webkit-sticky;
                            position: sticky;
                            left: 0;
                            z-index: 2;
                            background-color:#ffa669;
                           
                         }
                        .quotecolor{
                        z-index: 0.9;
                        }
                        .buyer-offer-row{
                            position: -webkit-sticky;
                            position: sticky;
                            left: 0;
                            z-index: 2;
                            background-color:#8096a8;
                        }
                        .ant-tabs-top > .ant-tabs-nav, .ant-tabs-bottom > .ant-tabs-nav, .ant-tabs-top > div > .ant-tabs-nav, .ant-tabs-bottom > div > .ant-tabs-nav {
                        margin: 0 0 8px 0;
                        }
                        
                        .addoverFlow {
                            overflow-y: scroll; 
                            max-height: 595px;  
                        }

                    `
                }
            </style>
            {
                enquiryInfo.length> 0 ? (

                    <Card size='small'>
                    <div id={props.compId} className="costsheetPrint">
                    <div className="header">
                    <div className="header-wave">
                        <h2 className="header-title">Cost Sheet</h2>
                        <Row gutter={24}>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 24 }}>
                            <Collapse>
                            <Panel header="INFO" key={1} className="header">
                                <Descriptions column={4} className="header">
                                <Descriptions.Item label="Enquiry Number">{enquiryInfo[0]?.enquiryNumber || '-'}</Descriptions.Item>
                                <Descriptions.Item label="Agent Name">{enquiryInfo[0]?.agent || '-'}</Descriptions.Item>
                                <Descriptions.Item label="Buyer Name">{enquiryInfo[0]?.buyer || '-'}</Descriptions.Item>
                                <Descriptions.Item label="Country">{enquiryInfo[0]?.country || '-'}</Descriptions.Item>
                                <Descriptions.Item label="Destination">{enquiryInfo[0]?.destination || '-'}</Descriptions.Item>
                                <Descriptions.Item label="Shipment Terms">{enquiryInfo[0]?.shipmentTerms || '-'}</Descriptions.Item>
                                <Descriptions.Item label="Ocean Freight in USD">{enquiryInfo[0]?.OceanFrightInUSD ? Number(enquiryInfo[0]?.OceanFrightInUSD).toFixed(2) : '-'}</Descriptions.Item>
                                <Descriptions.Item label="Shipment Period">{enquiryInfo[0]?.shipmentPeriod ? moment(enquiryInfo[0]?.shipmentPeriod).format('YYYY-MM-DD') : '-'}</Descriptions.Item>
                                <Descriptions.Item label="No.of Containers">{enquiryInfo[0]?.noOfContainers || '-'}</Descriptions.Item>
                                <Descriptions.Item label="Enquiry Approved Date">{enquiryInfo[0]?.enquiryApprovedDate ? moment(enquiryInfo[0]?.enquiryApprovedDate).format('YYYY-MM-DD') : '-'}</Descriptions.Item>
                                <Descriptions.Item label="Enquiry Received Date">{enquiryInfo[0]?.enqReceivedDate ? moment(enquiryInfo[0]?.enqReceivedDate).format('YYYY-MM-DD') : '-'}</Descriptions.Item>
                                <Descriptions.Item label="Feasibility study Date">{enquiryInfo[0]?.assesmentApprovalDate ? moment(enquiryInfo[0]?.assesmentApprovalDate).format('YYYY-MM-DD') : '-'}</Descriptions.Item>
                                <Descriptions.Item label="Prices Quoted Date">{enquiryInfo[0]?.qouteDate ? moment(enquiryInfo[0]?.qouteDate).format('YYYY-MM-DD') : '-'}</Descriptions.Item>
                                </Descriptions>
                            </Panel>
                            </Collapse>
                        </Col>
                        </Row>
                    </div>
                    </div>
                    {/* {
  !freezeStatus && (
    <> */}
                   <br />
                   {!props.freezeStatus && (
  <Row gutter={16} align="middle">
    <Col span={6}>
      <Form form={form} layout="inline" className="destination-form">
        <Form.Item
          label="Destination"
          name="destinationId"
          className="form-inline-item"
        >
         <Select
  placeholder="Select"
  size="small"
  style={{ width: 150 }}
  showSearch
  allowClear
  optionFilterProp="children"
  onChange={(val) => {
    if (val) {
      // User selected a destination
      const req: CostingDestinationReq = {
        enquiryid: props.enquiryId,
        destinationId: Number(val),
      };
      generateCostSheetAgainstDestination(req);
    } else {
        setIsDestinationSelected(false)
        if ((props.tabName === 'quotePriceUpdate' || props.operation === 'regenerate') && props.operation !== 'view') {
            regenerateCostSheet();
          } else {
            const costReq = new EnquiryIdreq(props.enquiryId);
            getCostSheetInfo(costReq);
          }
    }
  }}
>
  {destination.map((item) => (
    <Option key={item.destinationId} value={item.destinationId}>
      {item.destinationName}
    </Option>
  ))}
</Select>

        </Form.Item>
      </Form>
    </Col>

    <Col span={12}>
      <Descriptions column={1}>
      <Descriptions.Item label="Ocean Freight Rate">
        {Number(displayedData[0]?.OceanFrightInUSD ?? 0).toFixed(2)}
        </Descriptions.Item>
      </Descriptions>
    </Col>
  </Row>
)}



                {/* </>
  )} */}
                    <br/>
                        <Row gutter={24}>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 19 }} style={{overflow:"auto",whiteSpace:"nowrap"}}>
                            <div style={{ overflowY: "scroll", maxHeight: "595px" }} className="addoverFlow">
                               <table style={{ tableLayout: 'fixed' }} className={"table-column"}>
                                <tr >
                                    <th className={'ta-b top-header header-scroll-left'} style={{ backgroundColor: 'rgb(105, 202, 165)' }}>PARTICULARS</th>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <th className={'ta-b top-header'} style={{ backgroundColor: 'rgb(105, 202, 165)',width:'100%',textAlign:'center' }}>{rec.productName}</th>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
  <td rowSpan={2} className={'ta-b column-horizontal'} style={{ borderBottom: "none" }}>
    Assortment
  </td>

  {
    displayedData[0]?.productRates.map((rec, index) => {
      const prevGroup = index === 0 ? null : displayedData[0]?.productRates[index - 1].group;
      const currentGroup = rec.group;
      const groupElements = displayedData[0]?.productRates.filter(e => e.group === currentGroup);

      const isFirstInGroup = prevGroup !== currentGroup;

      if (isDestinationSelected) {
        // If it's the first in its group
        if (isFirstInGroup) {
          // If group has only 1 item, just render its full container
          if (groupElements.length === 1) {
            return (
              <td key={index} className={'ta-b'} style={{ borderTop: 'none', borderLeft: 'none', textAlign: 'center' }}>
                {Number(rec.containers).toFixed(1)}
              </td>
            );
          } else {
            // Group has multiple items, so split containers equally
            const splitValue = (Number(groupElements[0].containers) / groupElements.length).toFixed(1);
            return groupElements.map((_, i) => (
              <td key={`${index}-${i}`} className={'ta-b'} style={{ borderTop: 'none', borderLeft: 'none', textAlign: 'center' }}>
                {splitValue}
              </td>
            ));
          }
        }

        return null; // Already rendered by group head
      }

      // If not isDestinationSelected, show merged cell for the group
      if (isFirstInGroup) {
        return (
          <td key={index} className={'ta-b'} colSpan={groupElements.length} style={{ borderTop: 'none', borderLeft: 'none', textAlign: 'center' }}>
            {groupElements[groupElements.length - 1].containers}
          </td>
        );
      }

      return null;
    })
  }
</tr>


                                <tr>
                                    
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                               
                                                <td className={'ta-b'} style={{borderBottom:'none',borderLeft:'none',textAlign:'center'}}>{rec.cartons ? rec.cartons : '-'}</td>
                                               
                                            )
                                        })
                                    }
                                    
                                </tr>
                                <tr>
    <td className={'ta-b column-horizontal'} style={{ borderTop: "none" }}>Total</td>
    {
        displayedData[0]?.productRates.map((rec, index) => {
            const groupElements = displayedData[0]?.productRates.filter(e => e.group === rec.group);
            const firstRowValue = groupElements[groupElements.length - 1]?.containers || 1; 
            const secondRowValue = rec.cartons || 0; 
            
            return (
                <td className={'ta-b'} style={{ borderBottom: 'none', borderLeft: 'none', textAlign: 'center' }}>
                    {firstRowValue * secondRowValue}
                </td>
            );
        })
    }
</tr>

                                <tr>
                                    <td className={'ta-b column-horizontal'}>Category</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b align-left'}>{rec.category ? rec.category :'-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>Style Weighment</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b align-left'}>{rec.styleWeighment ? rec.styleWeighment :'-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>Stock Status</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b align-left'}>{rec.leadType ? rec.leadType == OrderTypeEnum.STOCK ? 'Existing' : 'Fresh' : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>Quantity</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.netWeight ? rec.netWeight : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>YIELD</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.yieldPer ? rec.yieldPer : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                {
                                    frozenYieldVisible ? (<>
                                     <tr>
                                        <td className={'ta-b column-horizontal'}>Frozen YIELD</td>
                                        {
                                            displayedData[0]?.productRates.map(rec => {
                                                return(
                                                    <td className={'ta-b'}>{rec.styleWeighment == StyleWeighmentEnum.NWNC ?  '-' : rec.frozenYield}</td>
                                                )
                                            })
                                        }
                                    </tr>
                                    
                                    </>) : (<></>)
                                }
                               
                                <tr>
                                    <td className={'ta-b column-horizontal'}>PACK COUNT</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.packCount ? rec.packCount : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>RM COUNT</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.rmCount ? rec.rmCount : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'} style={{borderBottom:'none'}}>PREVAILING RM RATE</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{borderBottom:'none'}}>{rec.prevailingRmRate ? Number(rec.prevailingRmRate).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'} style={{backgroundColor:'rgb(105, 202, 165)',border:'1px solid black'}}><b>RM COST</b></td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-bb'}>{rec.rmCost ? Number(rec.rmCost).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>
                                    <button 
                                        onClick={() => setIsExpanded(!isExpanded)} 
                                        style={{background: "transparent", cursor: "pointer", marginRight: "8px",borderColor:'white' }}
                                        >
                                        {isExpanded ? <DownOutlined  size={16} style={{color:'red'}}/> : <RightOutlined size={16} style={{color:'red'}}/>}
                                        </button>
                                        MFG COST (Variable)</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.manufacturingCost ? Number(rec.manufacturingCost).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                {
                                    isExpanded ? (<>
                                     <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>Procurement Frieght</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.procurementFreight ? Number(rec.procurementFreight).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>Deheading Cost</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.deheadingCost ? Number(rec.deheadingCost).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>Peeling Cost</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.peelingCost ? Number(rec.peelingCost).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>Inhouse Labour Cost</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.inhouseLabourCost ? Number(rec.inhouseLabourCost).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>Soaking Cost</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.soakingCost ? Number(rec.soakingCost).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>Electricity Cost</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.electricityCost ? Number(rec.electricityCost).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>Boiler Fuel Cost</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.boilerFuelCost ? Number(rec.boilerFuelCost).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>QC Cost</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.qcCost ? Number(rec.qcCost).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>Consumable Cost</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.consumableCost ? Number(rec.consumableCost).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>Repairs And Maintainance</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.repairsAndMaintainance ? Number(rec.repairsAndMaintainance).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                <td className={'ta-b column-horizontal'} style={{backgroundColor:'#e2dfbf'}}>Other Direct Expenses</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{backgroundColor:'#e2dfbf'}}>{rec.otherDirectExpenses ? Number(rec.otherDirectExpenses).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                    </>) : (<></>)
                                }
                               
                                <tr>
                                    <td className={'ta-b column-horizontal'}>{`SALES COMISSION @ ${Number(displayedData[0]?.productRates[0]?.salesCommissionpercentage).toFixed(2)} CENTS PER LB`}</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.salesCommission ? Number(rec.salesCommission).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>PACKING MATERIAL</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.packingMaterial ? Number(rec.packingMaterial).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>FREIGHT & FORWARDING EXP</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.freightAndForwardExpenses ? Number(rec.freightAndForwardExpenses).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'} style={{borderBottom:'none'}}>FIXED COST</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{borderBottom:'none'}}>{rec.fixedCost ? rec.fixedCost : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}style={{backgroundColor:'rgb(105, 202, 165)',border:'1px solid black'}}><b>TOTAL EXPENSES (VARIABLE)</b></td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-bb'}>{rec.totalExpenses ? Number(rec.totalExpenses).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>COST OF SALES PER KG IN INR</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.costOfSalesPerKgINR ? Number(rec.costOfSalesPerKgINR).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>Exchange Rate</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{displayedData[0]?.exchangeRate ? Number(displayedData[0]?.exchangeRate).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>COST OF SALES PER KG IN USD @{Number(displayedData[0]?.exchangeRate)}/-</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.costOfSalesPerKgUSD ? Number(rec.costOfSalesPerKgUSD).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal' }>COST OF SALES PER LB IN USD @{Number(displayedData[0]?.exchangeRate)}/-</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.costOfSalesPerLBUSD ? Number(rec.costOfSalesPerLBUSD).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                {displayedData[0]?.country == 'USA' ? (<>
                                    <tr>
                                        <td className={'ta-b column-horizontal'} style={{borderBottom:'none'}}>AD @{Number(displayedData[0]?.ad)}% + CVD @{Number(displayedData[0]?.cvd)}%</td>
                                        {
                                            displayedData[0]?.productRates.map(rec => {
                                                return(
                                                    <td className={'ta-b'} style={{borderBottom:'none'}}>{rec.adCVDpercentageVal ? Number(rec.adCVDpercentageVal).toFixed(2) : '-'}</td>
                                                )
                                            })
                                        }
                                    </tr>
                                    <tr>
                                        <td className={'ta-b column-horizontal'} style={{backgroundColor:'rgb(105, 202, 165)',border:'1px solid black'}}><b>TOTAL COST OF SALES PER LB IN USD</b></td>
                                        {
                                            displayedData[0]?.productRates.map(rec => {
                                                return(
                                                    <td className={'ta-bb'}>{rec.totCostOfSalesPerLBUSD ? Number(rec.totCostOfSalesPerLBUSD).toFixed(2) : '-'}</td>
                                                )
                                            })
                                        }
                                    </tr>
                                </>) : (<></>)}
                                <tr >
                                    <td className={'ta-b quote'} >Quote Price ({UnitsOfWeightInput.find(e => e.value == displayedData[0]?.productRates[0]?.priceUOM)?.name})</td>
                                    {
                                        displayedData[0]?.productRates.map((rec,index) => {
                                            return(
                                                <td className={'ta-b quotecolor'} style={{backgroundColor:'#ffa669'}} >{rec.quotePrice > 0 ? rec.quotePrice : <Form.Item name={`quotePrice${rec.productId}`} style={{borderColor:'blue'}}><Input placeholder="Enter Quote Price" type="number" min={0} onBlur={(val) => onQuotePriceChange(val,rec.productId,rec.productName,rec.category,rec.styleWeighment,rec.buyerOfferPrice,rec.enquiryProductId,rec.netWeight)}/></Form.Item>}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr >
                                    <td className={'ta-b buyer-offer-row'} >Buyer Offer Prices ({UnitsOfWeightInput.find(e => e.value == displayedData[0]?.productRates[0]?.priceUOM)?.name})</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b quotecolor'} style={{backgroundColor:'#8096a8'}}>{rec.buyerOfferPrice > 0 && displayedData[0]?.enquiryStatus != EnquiryLifecycleStatusEnum.RENEGOTIATED? rec.buyerOfferPrice : rec.buyerOfferPrice <= 0 && props.tabName == 'quotePriceUpdate' ? rec.buyerOfferPrice : (rec.buyerOfferPrice <= 0 || displayedData[0]?.enquiryStatus == EnquiryLifecycleStatusEnum.RENEGOTIATED) && props.tabName == 'buyerPriceUpdate' ? <Input onChange={(e) => onBuyerOfferPriceChange(e,rec.productId,rec.productName,rec.category,rec.styleWeighment,Number(e.target.value),rec.enquiryProductId,rec.netWeight)} placeholder="Enter Buyer Price"/> : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>Net P&L</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.netPLOnBuyerPrice != undefined && rec.netPLOnBuyerPrice != null ? Number(rec.netPLOnBuyerPrice).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'} >Incentives @ {Number(GlobalVariableValues.incentivePerLabel)}%</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} >{rec.incentives ? Number(rec.incentives).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'} style={{borderBottom:'none'}}>Total P&L</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'} style={{borderBottom:'none'}}>{rec.totalProfitLoss ? Number(rec.totalProfitLoss).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'} style={{borderBottom:'none'}}>Total P&L Value IN RUPEES</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            const qtyUOMId = UnitsOfWeightInput.find(e => e.value == rec.qtyUOM).name == 'lb' ||  UnitsOfWeightInput.find(e => e.value == rec.qtyUOM).name == 'oz' ? UnitsOfWeightInput.find(e => e.name == 'lb')?.value : UnitsOfWeightInput.find(e => e?.name == 'kg')?.value
                                            let weight
                                            if(qtyUOMId != rec.priceUOM){
                                                if(rec.priceUOM == UnitsOfWeightInput?.find(e => e.name == 'lb')?.value){
                                                    weight = Number(rec.netWeight) / 0.454
                                                }else{
                                                    weight = Number(rec.netWeight) * 0.454
                                                }
                                            } else{
                                                weight = rec.netWeight
                                            }
                                            const totalPL = Number(rec.totalProfitLoss).toFixed(2)
                                            return(
                                                <td className={'ta-b'} style={{borderBottom:'none'}}>{rec.totalProfitLoss ? Number(Number(weight) * (Number(totalPL)) * 85).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'} style={{backgroundColor:'rgb(105, 202, 165)',border:'1px solid black'}}><b>P&L %</b></td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-bb'}>{rec.plPercentage ? `${Number(rec.plPercentage).toFixed(2)}%` : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>Contribution %</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.contributionPercentage ? `${Number(rec.contributionPercentage).toFixed(2)}%` : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <br/>
                                <tr>
                                    <th className={'ta-b '} colSpan={displayedData[0]?.productRates.length + 1} style={{textAlign:'center',backgroundColor:'rgb(105, 202, 165)'}}>ANALYSIS</th>
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>COST OF SALES PER LB @ rm rate + Rs. {displayedData[0]?.productRates[0]?.addedPriceToRmrate > 0 ? displayedData[0]?.productRates[0]?.addedPriceToRmrate : <Input style={{width:'60px',borderColor:'white',backgroundColor: '#c7c7c7'}} onChange={onAdditionRmRateChange}/>}</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.costOfSalesForAddedRmRate ? Number(rec.costOfSalesForAddedRmRate).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>COST OF SALES PER LB @ rm rate - Rs. {displayedData[0]?.productRates[0]?.reducedPriceToRmRate > 0 ? displayedData[0]?.productRates[0]?.reducedPriceToRmRate : <Input style={{width:'60px',borderColor:'white',backgroundColor: '#c7c7c7'}} onChange={onReduceRmRateChange}/>}</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.costOfSalesForReducedRmRate ? Number(rec.costOfSalesForReducedRmRate).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>PREVIOUS CONFIRMED AVG. PRICE</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.prevConfirmedPrice ? Number(rec.prevConfirmedPrice).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b column-horizontal'}>PREVALLING EXPORT MARKET RATE</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.prevailingMarketRate ? rec.prevailingMarketRate : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                
                            </table>
                            </div>
                            {/* <br/>
                            <div>
                            <table className={'ta-b table-column'} >
                                <tr>
                                    <th className={'ta-b'} colSpan={displayedData[0]?.productRates.length + 1} style={{textAlign:'center',backgroundColor:'rgb(105, 202, 165)'}}>ANALYSIS</th>
                                </tr>
                                <tr>
                                    <td className={'ta-b'}>COST OF SALES PER LB @ rm rate + Rs. {displayedData[0]?.productRates[0]?.addedPriceToRmrate > 0 ? displayedData[0]?.productRates[0]?.addedPriceToRmrate : <Input style={{width:'60px',borderColor:'white'}} onChange={onAdditionRmRateChange}/>}</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.costOfSalesForAddedRmRate ? Number(rec.costOfSalesForAddedRmRate).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b'}>COST OF SALES PER LB @ rm rate - Rs. {displayedData[0]?.productRates[0]?.reducedPriceToRmRate > 0 ? displayedData[0]?.productRates[0]?.reducedPriceToRmRate : <Input style={{width:'60px',borderColor:'white'}} onChange={onReduceRmRateChange}/>}</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.costOfSalesForReducedRmRate ? Number(rec.costOfSalesForReducedRmRate).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b'}>PREVIOUS CONFIRMED AVG. PRICE</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.prevConfirmedPrice ? Number(rec.prevConfirmedPrice).toFixed(2) : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                                <tr>
                                    <td className={'ta-b'}>PREVALLING EXPORT MARKET RATE</td>
                                    {
                                        displayedData[0]?.productRates.map(rec => {
                                            return(
                                                <td className={'ta-b'}>{rec.prevailingMarketRate ? rec.prevailingMarketRate : '-'}</td>
                                            )
                                        })
                                    }
                                </tr>
                            </table>
                            </div> */}
                        </Col>
                        <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 5 }} className="countpage">
                        <div className="side-table">
                            {/* <b>RM Rate Chart</b>
                            <br/><br/> */}
                            <b>Uploaded Date : {countPriceInfo[0]?.uploadedDate}</b>
                            <table className={'ta-b bordertable'} style={{ width: '100%', tableLayout: 'fixed' }}>
                                <tr style={{backgroundColor:'#34a594'}}>
                                    <th className={'ta-b'}>COUNT</th>
                                    <th className={'ta-b'} >RM RATE</th>
                                </tr>
                                    {
                                        countPriceInfo.map(rec => {

                                            // const obj = rec.count.split('-')
                                            // const count = obj[0] == obj[1] ? obj[0] : rec.count
                                            return(
                                                <>
                                                <tr style={{backgroundColor: rec.colorVar ? '#90d6cc' : ''}}>
                                                <td className={'ta-b'}>{rec.count ? rec.count : '-'}</td>
                                                <td className={'ta-b'}>{rec.price ? rec.price : '-'}</td>
                                                </tr>
                                                </>
                                            )
                                        })
                                    }
                            </table>
                        </div>
                        </Col>
                        </Row>
                    </div>
                    <br/>
                        <Row justify="end">
                            {
                                props.tabName == 'quotePriceUpdate' && generatedStatus == false && isDestinationSelected == false? (<Button type="primary" onClick={onQuotePriceUpdate}>Update Quote Price</Button>) : (<></>)
                            }
                            {
                                props.tabName == 'buyerPriceUpdate' && (!buyerPriceExisted || enquiryInfo[0]?.enquiryStatus == EnquiryLifecycleStatusEnum.RENEGOTIATED)? (<Button type="primary" onClick={onBuyerPriceUpdate}>Update Buyer Price</Button>) : (<></>)
                            }
                            {
                                props.tabName == 'approval' ? (
                                <Row gutter={24}>
                                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 8 }}>
                                    <Button style={{backgroundColor:'#8ac926'}} onClick={onEnquiryApprove} disabled={approveDisable}>Approve</Button>
                                    </Col>
                                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 8 }}>
                                    <Button style={{backgroundColor:'yellow'}} onClick={onEnquiryRenegotiate}>ReNegotiate</Button>
                                    </Col>
                                    <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 8 }}>
                                    <Button style={{backgroundColor:'#ff595e'}} onClick={onEnquiryReject}>Reject</Button>
                                    </Col>
                                </Row>
                               ) : (<></>)
                            }
                        </Row>
                    </Card>
                ) : (<></>)
            }
         
            <Modal visible={reasonModalVisible} width={'60%'} title={'Reject Reason'} onCancel={() => setReasonModalVisible(false)} footer={[<Button onClick={onRejectReasonModalOk}>Submit</Button>]}>
                <Form form={rejectForm} layout="vertical">
                    <Row gutter={24}>
                    <Col xs={{ span: 8 }} sm={{ span: 8 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 8 }}>
                        <Form.Item name='rejectReason' label='Reject Reason' rules={[{required:true,message:'Reject Reason is mandatory'}]}>
                            {/* <TextArea rows={4}/> */}
                            <Select showSearch allowClear placeholder="Select Reject Reason">
                                {rejectreasons.map(e => {
                                    return(
                                        <Option key={e.reasonId} value={e.reasonId}>{e.reasonName} </Option>
                                    )
                                })}
                            </Select>
                        </Form.Item>
                       
                    </Col>
                    <Col xs={{ span: 8 }} sm={{ span: 8 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 8 }}>
                    <Form.Item name='rejectDescription' label='Description'
                        //  rules={[{required:true,message:'Reject Reason is mandatory'}]}
                         >
                            <TextArea placeholder="Enter Description"/>
                        </Form.Item>
                    </Col>
                    </Row>
                </Form>
            </Modal>
            <Modal visible={approveModalVisible} width={'90%'} title={'Containers Info'} onCancel={() => setApproveModalVisible(false)} footer={[<Button onClick={onApproveModalOk} disabled={costingApproveDisable}>Approve</Button>]}>
                <ContainerCapturingAgainstEnquiry productsInfo={productDetails} pageName="CostSheet" acceptButton={acceptButton} enquiryId={props.enquiryId} closeModal={closeApproveModal} costingApproval={(e) => SetCostingApproveDisable(e)}/>
            </Modal>
        </div>
    )

}

export default CostSheetFormat