import React, { useState, useEffect, useCallback } from 'react';
import { Collapse, Radio } from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import Emi from '../../../../Images/PayOptImgs/emi.png';
import CrediCard from '../../../../Images/PayOptImgs/creditcard.png';
import DebitCard from '../../../../Images/PayOptImgs/debitcard.png';
import CashCard from '../../../../Images/PayOptImgs/cashcard.png';
import NetBank from '../../../../Images/PayOptImgs/netbank.png';
import Wallet from '../../../../Images/PayOptImgs/wallet.png';
import Upi from '../../../../Images/PayOptImgs/upi.png';
import { IoPhonePortraitOutline } from 'react-icons/io5';
import { AiOutlineFileDone } from 'react-icons/ai';
import { CgMoreO } from 'react-icons/cg';
import '../../../../Styles/BookingScreen/Components/UtillComponents/PricingPage.scss';
import { CiSearch } from 'react-icons/ci';
import TextAreaInput from '../../../../Components/Forms/TextArea';
import Search from '../../../../Components/Forms/Search';
import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
import { InputField } from '../../../../Components/Forms/InputField';
import {
  CheckPaymentStatus,
  getccavenuePaymentDetails,
  getPricingType,
  getPurchasedAppDetails,
  getUserDetails,
  postInvoice,
} from '../../../../Features/BookingScreen/Pricing/Pricing';
import Buttons from '../../../../Components/Forms/Buttons';
import {
  getPreferenceData,
  GlobalAppExpDateData,
} from '../../../../Features/BookingScreen/BookingData/BookingData';
import { Messages } from '../../../../Components/Notifications/Messages';
import CryptoJS from 'crypto-js';
import { GenerateLogout } from '../../../../Features/BrachLogin/BranchLogin';
import { getActivePaymentUpiDetails, sendSms } from '../../../../Features/Payment/PaymentDetails/PaymentDetails';
import {
  clearSession,
  encryptedValuesUrlFun,
  getSession,
} from '../../../../Services/Others';
import PaymentGatewayEmbedded from './PaymentGatewayEmbedded';

const SECRET_KEY = import.meta.env.ENV_SECRET_KEY;
const commonSubDir = import.meta.env.ENV_COMMON_BASE_URL;
const CustomPaymentUrl = import.meta.env.ENV_CUSTOM_PAYMENT_URL;
const subDirectory = import.meta.env.ENV_BASE_URL;
const PricingPage = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const [PricingId, setPricingId] = useState(
    getSession('PricingId') ? getSession('PricingId') : null
  );
  const [activeBusinessUpiDetails, setActiveBusinessUpiDetails] = useState([]);
  const AppExpDate = useSelector(GlobalAppExpDateData);
  const UserType = getSession('UserType');
  const UserId =
    UserType == 'Admin' ? getSession('UserId') : AppExpDate?.UserId;
  const CompId = getSession('CompId');
  const AppName = getSession('AppName');
  const AppId = getSession('AppId');
  const BranchId = getSession('BranchId');
  const [MobileNo, setMobileNo] = useState(getSession('MobileNo'));
  const [invoiceDetails, setinvoiceDetails] = useState([]);
  const [UserDetails, setUserDetails] = useState([]);
  const [BookingId, setBookingId] = useState(null);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [timeLeft, setTimeLeft] = useState(null);
  const [Buttondisabled, setButtondisabled] = useState(false);
  const [CompanyName, setCompanyName] = useState(null);
  const [zipcode, setzipcode] = useState(null);
  const [address, setaddress] = useState(null);
  const [City, setCity] = useState(null);
  const [Dist, setDist] = useState(null);
  const [State, setState] = useState(null);
  const [email, setemail] = useState(null);
  const [zipcondit, setZipcondit] = useState(true);
  const [gstcondit, setgstcondit] = useState(true);
  const [emailcondit, setemailcondit] = useState(true);
  const [citycondit, setcitycondit] = useState(true);
  const [statecondit, setstatecondit] = useState(true);
  const [addresscondit, setaddresscondit] = useState(true);
  const [gst, setgst] = useState(null);
  const [PaymentDetails, setPaymentDetails] = useState();
  const [selectedOption, setselectedOption] = useState();
  const [value, setValue] = useState();
  const [itemsdata, setItemsdata] = useState();
  const [dataAccept, setDataAccept] = useState();
  const [cardName, setCardName] = useState();
  const [moreInfo, setmoreInfo] = useState(false);
  const [currentDate, setCurrentDate] = useState('');
  const [PurchasedDetails, setPurchasedDetails] = useState([]);
  const [Companydetails, setCompanydetails] = useState([]);
  const [delay, setDelay] = useState(null);
  const [businessUpiModal, setBusinessUpiModal] = useState(false);
  const [paymentSucess, setPaymentSuccess] = useState(false);
  const [OrderId, setOrderId] = useState(null);
  const [PaymentPageLink, setPaymentPageLink] = useState(null);
  const Gstpattern =
    /^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Za-z]{1}[Z]{1}[0-9A-Za-z]{1}$/;
  const numberPattern = /^[0-9]+$/;
  const [PayableAmount, setPayableAmount] = useState(0);

  useEffect(() => {
    setPayableAmount(invoiceDetails[0]?.NetPrice);
  }, [invoiceDetails]);
  useEffect(() => {
    if (!paymentSucess) return;

    const timeoutId = setTimeout(() => {
      setPaymentSuccess(false);
      redirectAfterPay();
    }, 3000);

    return () => clearTimeout(timeoutId);

  }, [paymentSucess]);
  const redirectAfterPay = () => {
    navigate(`${subDirectory}sales`);
  }
  useEffect(() => {
    fetchData();
    GetPaymentDetails();
    fetchUpiDetails()

  }, []);
  async function fetchUpiDetails() {
    try {
      const response = await dispatch(getActivePaymentUpiDetails()).unwrap();
      if (response?.data?.statusCode == 1) {
        setActiveBusinessUpiDetails(response?.data?.data?.filter((e) => e?.DetailType == "BU"));
      }
    }
    catch (error) {
      console.log(error, "errorerrorerror")
    }

  }
  useEffect(() => {
    if (UserDetails?.[0]?.MailId) {
      setemail(UserDetails?.[0]?.MailId);
    }
  }, [UserDetails]);

  let GetPaymentDetails = async () => {
    const response = await dispatch(getccavenuePaymentDetails()).unwrap();
    if (response?.data?.statusCode == 1) {
      setPaymentDetails(response?.data?.data);
      let index = await response?.data?.data?.findIndex(
        (item) => item.MethodName == 'NetBanking'
      );
      setselectedOption(index);
      setItemsdata(response?.data?.data?.[index]?.Details);
    }
  };
  let fetchData = async () => {
    let response = await dispatch(
      getPurchasedAppDetails({ AppId, UserId })
    ).unwrap();
    let response1 = await dispatch(
      getPreferenceData({ AppId, BranchId, CompId,UserId })
    ).unwrap();
    setPurchasedDetails(response?.data?.data);
    setCompanydetails(response1?.data?.data);
    setPricingId(response?.data?.data?.[0]?.PricingId);
  };
  useEffect(() => {
    const timer = setInterval(() => {
      setDelay(delay - 1);
    }, 1000);
    if (BookingId != null) {
      checkPayment();
    }

    if (delay === 0) {
      UpdatePaymentStatus();
      clearInterval(timer);
    }

    if (delay === null) {
      clearInterval(timer);
    }

    return () => {
      clearInterval(timer);
    };
  }, [delay]);

  const handleCancel = () => {
    setmoreInfo(false);
  };

  const encryptedValuesFun = (value) => {
    const encryptedValue = CryptoJS.AES.encrypt(
      JSON.stringify(value),
      SECRET_KEY
    ).toString();

    if (encryptedValue) {
      return encryptedValue
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=+$/, ''); // Base64 URL-safe encoding
    }
  };
  const UpdatePaymentStatus = async () => {
    let putdata = {};
    putdata['UpdatedBy'] = getSession('UserId');
    putdata['PaymentStatus'] = 'F';
    putdata['UniqueId'] = BookingId;
  };

  const checkPayment = async () => {
    let response = await dispatch(CheckPaymentStatus(BookingId)).unwrap();
    if (response?.data?.statusCode === 1) {
      setprintdata(response?.data?.data);
      setPaymentStatus(true);
      setDelay(null);
      setMessageType('success');
      setMessageData('Payment Success!');
      setTimeout(() => {
        redirectAfterPay();
      }, 15000);
    }
  };

  useEffect(() => {
    if (timeLeft === 0) {
      setButtondisabled(false);

      setTimeLeft(null);
    }

    // exit early when we reach 0
    if (!timeLeft) return;

    // save intervalId to clear the interval when the
    // component re-renders
    const intervalId = setInterval(() => {
      setTimeLeft(timeLeft - 1);
    }, 1000);

    // clear interval on re-render to avoid memory leaks
    return () => clearInterval(intervalId);
  }, [timeLeft]);

  useEffect(() => {
    fetchFeature(PricingId);
  }, [PricingId]);

  useEffect(() => {
    getUserDetail();
  }, []);

  const fetchFeature = async (PricingId) => {
    const response = await dispatch(getPricingType(PricingId)).unwrap();
    if (response?.data?.statusCode === 1) {
      setinvoiceDetails(response?.data?.data);
    }
  };

  const getUserDetail = async () => {
    const response = await dispatch(getUserDetails(UserId)).unwrap();
    if (response?.data?.statusCode === 1) {
      setUserDetails(response?.data?.data ? response?.data?.data : []);
      setMobileNo(
        response?.data?.data?.[0]?.MobileNo > 0
          ? response?.data?.data?.[0]?.MobileNo
          : getSession('MobileNo')
      );
    }
  };

  function addDays(dateString, days) {
    const currentDate = new Date(dateString);
    currentDate.setDate(currentDate.getDate() + days);

    // Extract individual date components
    const year = currentDate.getFullYear();
    const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
    const day = currentDate.getDate().toString().padStart(2, '0');
    const hours = currentDate.getHours().toString().padStart(2, '0');
    const minutes = currentDate.getMinutes().toString().padStart(2, '0');
    const seconds = currentDate.getSeconds().toString().padStart(2, '0');
    const milliseconds = currentDate
      .getMilliseconds()
      .toString()
      .padStart(3, '0');

    // Construct the formatted date string
    const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}.${milliseconds}`;

    return formattedDate;
  }

  const onSubmit = async () => {
    let bankDetails = {
      PayOpt: PaymentDetails?.[selectedOption]?.PayOpt,
      CardType: PaymentDetails?.[selectedOption]?.CardType,
      cardName:
        PaymentDetails?.[selectedOption]?.CardType != 'UPI' ? cardName : 'UPI',
    };
    if (!email) {
      setMessageType('error');
      setMessageData('Please Enter Email');
    } else {
      if (
        bankDetails?.PayOpt != undefined &&
        bankDetails?.CardType != undefined &&
        bankDetails?.cardName != undefined
      ) {
        let postData = {};
        postData['UserId'] = UserId;
        postData['AppId'] = getSession('AppId');
        postData['PricingId'] = PurchasedDetails?.[0]?.PricingId;
        postData['PurDate'] = currentDate;
        postData['NoofDays'] = PurchasedDetails?.[0]?.NoOfDays;
        postData['PaymentMode'] = 27;
        postData['PaymentStatus'] = 'P';
        postData['LicenseStatus'] = PurchasedDetails?.[0]?.LicenseStatus;
        postData['Price'] = PurchasedDetails?.[0]?.Price
          ? PurchasedDetails?.[0]?.Price
          : 0;
        postData['TaxId'] = PurchasedDetails?.[0]?.TaxId
          ? PurchasedDetails?.[0]?.TaxId
          : 0;
        postData['NetPrice'] = PurchasedDetails?.[0]?.ExistingPlanNetPrice
          ? PurchasedDetails?.[0]?.ExistingPlanNetPrice
          : 0;
        postData['ValidityStart'] = currentDate;
        postData['ValidityEnd'] = addDays(
          currentDate,
          PurchasedDetails?.[0]?.NoOfDays
        );
        postData['CreatedBy'] = getSession('UserId');
        postData['TaxAmount'] = PurchasedDetails?.[0]?.TaxAmount
          ? PurchasedDetails?.[0]?.TaxAmount
          : 0;
        postData['MobileNo'] = getSession('MobileNo');
        postData['MailId'] = email;
        postData['Gst'] = Gstpattern?.test(gst) ? gst : null;
        postData['BillingName'] = Companydetails?.[0]?.CompName;
        postData['Zip'] = numberPattern.test(zipcode) ? zipcode : null;
        postData['City'] = City;
        postData['State'] = State;
        postData['Address'] = address;
        postData['District'] = Dist;

        let response = await dispatch(postInvoice(postData)).unwrap();
        if (response?.data?.statusCode == 1) {
          if (response?.data?.SMSbody) {
            const postData = {
              body: response?.data?.SMSbody,
            };
            await dispatch(sendSms(postData));
          }
          setBookingId(response?.data?.BookingId);
          const form = document.createElement('form');
          form.method = 'POST';
          form.action = `${CustomPaymentUrl}/ccavRequestHandler`;
          form.style.display = 'none'; // Hide the form

          const data1 = {
            merchant_id: '15191',
            order_id: response?.data?.OrderId,
            currency: 'INR',
            amount: PayableAmount,
            redirect_url:
              'https://pozo.app/CustomPaymentGateway/CustomPaymentGateway/ccavResponseHandler',
            cancel_url:
              'https://pozo.app/CustomPaymentGateway/CustomPaymentGateway/ccavResponseHandler',
            payment_option: PaymentDetails?.[selectedOption]?.PayOpt,
            card_type: PaymentDetails?.[selectedOption]?.CardType,
            card_name:
              PaymentDetails?.[selectedOption]?.CardType != 'UPI'
                ? cardName
                : 'UPI',
            data_accept: dataAccept,
            language: 'EN',
            billing_name:
              Companydetails?.[0]?.CompName != null
                ? Companydetails?.[0]?.CompName
                : 'User',
            billing_address: address != null ? address : 'xyz',
            billing_city: City != null ? City : 'xyz',
            billing_state: State != null ? State : 'xyz',
            billing_zip: zipcode != null ? zipcode : '000000',
            billing_country: 'India',
            billing_tel: MobileNo,
            billing_email: email,
            delivery_name: 'R',
            delivery_address: 'N',
            delivery_city: Dist != null ? Dist : 'xyz',
            delivery_zip: 'O',
            delivery_country: 'India',
            delivery_tel: Gstpattern?.test(gst) ? gst : null,
            merchant_param1: getSession('SessionId'),
            merchant_param2: response?.data?.BookingId,
            merchant_param3: getSession('UserId'),
            merchant_param4: invoiceDetails?.[0]?.PricingName,
            merchant_param5: 'paymentHandler.html',
            promo_code: '',
            customer_identifier: '',
          };

          Object.keys(data1).forEach((key) => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = encryptedValuesFun(data1[key]);
            form.appendChild(input);
          });

          document.body.appendChild(form);

          form.submit();
        }
      } else {
        setMessageType('error');
        setMessageData('Please Select the Payment');
      }
    }
  };
  const onSubmitBusinessUpi = async () => {
    let bankDetails = {
      PayOpt: PaymentDetails?.[selectedOption]?.PayOpt,
      CardType: PaymentDetails?.[selectedOption]?.CardType,
      cardName:
        PaymentDetails?.[selectedOption]?.CardType != 'UPI' ? cardName : 'UPI',
    };
    if (!email) {
      setMessageType('error');
      setMessageData('Please Enter Email');
    } 
    else {
     
        let postData = {};
        postData['UserId'] = UserId;
        postData['AppId'] = getSession('AppId');
        postData['PricingId'] = PurchasedDetails?.[0]?.PricingId;
        postData['PurDate'] = currentDate;
        postData['NoofDays'] = PurchasedDetails?.[0]?.NoOfDays;
        postData['PaymentMode'] = 27;
        postData['PaymentStatus'] = 'P';
        postData['LicenseStatus'] = PurchasedDetails?.[0]?.LicenseStatus;
        postData['Price'] = PurchasedDetails?.[0]?.Price
          ? PurchasedDetails?.[0]?.Price
          : 0;
        postData['TaxId'] = PurchasedDetails?.[0]?.TaxId
          ? PurchasedDetails?.[0]?.TaxId
          : 0;
        postData['NetPrice'] = PurchasedDetails?.[0]?.ExistingPlanNetPrice
          ? PurchasedDetails?.[0]?.ExistingPlanNetPrice
          : 0;
        postData['ValidityStart'] = currentDate;
        postData['ValidityEnd'] = addDays(
          currentDate,
          PurchasedDetails?.[0]?.NoOfDays
        );
        postData['CreatedBy'] = getSession('UserId');
        postData['TaxAmount'] = PurchasedDetails?.[0]?.TaxAmount
          ? PurchasedDetails?.[0]?.TaxAmount
          : 0;
        postData['MobileNo'] = getSession('MobileNo');
        postData['MailId'] = email;
        postData['Gst'] = Gstpattern?.test(gst) ? gst : null;
        postData['BillingName'] = Companydetails?.[0]?.CompName;
        postData['Zip'] = numberPattern.test(zipcode) ? zipcode : null;
        postData['City'] = City;
        postData['State'] = State;
        postData['Address'] = address;
        postData['District'] = Dist;
        postData["PaymentOptionType"] = "BU";
        postData["MerchantId"] = activeBusinessUpiDetails?.[0]?.MerchantId;
        postData["PaymentType"] = activeBusinessUpiDetails?.[0]?.MerchantNameId;

        let response = await dispatch(postInvoice(postData)).unwrap();
        if (response?.data?.statusCode == 1) {
          if (response?.data?.SMSbody) {
            const postData = {
              body: response?.data?.SMSbody,
            };
            await dispatch(sendSms(postData));
          }
          setBusinessUpiModal(true)
          setOrderId(response?.data?.OrderId)
          setPaymentPageLink(response?.data?.PaymentPageLink)
        }
      
       
    }
  };

  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);

  const setCompanyNames = async (e) => {
    setCompanyName(e?.target?.value);
  };

  const setCitys = async (e) => {
    setCity(e?.target?.value);
    setcitycondit(true);
  };
  const setStates = async (e) => {
    setState(e?.target?.value);
    setstatecondit(true);
  };

  const setgsts = async (e) => {
    setgst(e);
  };
  function checkCondition1(input) {
    if (input?.length === 15 && Gstpattern?.test(input)) {
      setgstcondit(true);
      setgsts(input);
    } else if (input?.length === 0) {
      setgstcondit(true);
    } else {
      setgstcondit(false);
    }
    setgsts(input);
  }

  function isValidEmail(email) {
    const emailRegex =
      /^[a-zA-Z0-9._%+-]{1,64}@[a-zA-Z0-9.-]{1,255}\.[a-zA-Z]{2,}$/;
    return emailRegex.test(email);
  }

  const getViewMore = () => {
    setmoreInfo(!moreInfo);
  };

  function handleInputChange(event) {
    // setemail(event?.target?.value)
    if (isValidEmail(event?.target?.value)) {
      setemailcondit(true);
      setEmailValue(event?.target?.value);
    } else {
      setemail(undefined);
      setemailcondit(false);
    }
  }

  const setaddresss = async (e) => {
    setaddress(e?.target?.value);
    setaddresscondit(true);
  };
  const setzipcodes = async (e) => {
    setzipcode(e);
  };
  const setEmailValue = async (e) => {
    setemail(e);
  };

  const getPincodeValues = async (pinCode) => {
    let response = '';
    await fetch(`https://api.postalpincode.in/pincode/${pinCode}`)
      .then((res) => res.text())
      .then((text) => (response = JSON.parse(text)));

    if (response[0]['Status'] === 'Success') {
      setCity(response[0]['PostOffice'][0]['Block']);
      setDist(response[0]['PostOffice'][0]['District']);
      setState(response[0]['PostOffice'][0]['State']);
      setcitycondit(true);
      setstatecondit(true);
    }
  };

  async function checkCondition(input) {
    if (input?.length === 6 && numberPattern.test(input)) {
      setZipcondit(true);
      setzipcodes(input);
      await getPincodeValues(input);
    } else if (input?.length === 0) {
      setZipcondit(true);
    } else {
      setZipcondit(false);
      setCity(null);
      setState(null);
    }
    setzipcodes(input);
  }

  const onChange = (e) => {
    setValue(e?.target?.value);
    setDataAccept(
      itemsdata?.[e.target.value]?.dataAcceptedAt == 'CCAvenue' ? 'Y' : 'N'
    );
    setCardName(itemsdata?.[e.target.value]?.cardName);
  };

  const onSearchChange = (e) => {
    let Details = PaymentDetails?.[selectedOption]?.Details;
    let searchTerm = e.target.value?.toLowerCase();

    let updated = Details.filter((item) =>
      item.cardName?.toLowerCase().startsWith(searchTerm)
    );

    setItemsdata(updated);
  };

  const items = [
    {
      key: '1',
      label: `${
        PaymentDetails?.[selectedOption]?.CardType == 'CRDC' ||
        PaymentDetails?.[selectedOption]?.CardType == 'DBCRD'
          ? 'Choose Your Card'
          : PaymentDetails?.[selectedOption]?.CardType == 'WLT'
            ? 'Choose Your Wallet'
            : 'Choose Your Bank'
      } `,
      children: (
        <Radio.Group
          onChange={onChange}
          value={value}
          style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}
        >
          {itemsdata?.map((item, index) => {
            return (
              <>
                <Radio
                  value={index}
                  style={{
                    width: '106%',
                    marginLeft: '-15px',
                    borderBottom: '1px solid #dadada',
                  }}
                >
                  {item.cardName}
                </Radio>
              </>
            );
          })}
        </Radio.Group>
      ),
    },
  ];
  useEffect(() => {
    const fetchDate = () => {
      const now = new Date();
      // const formattedDate = now.toISOString();
      const formattedDate = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')} ${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}.${now.getMilliseconds().toString().padStart(3, '0')}`;

      setCurrentDate(formattedDate);
    };

    fetchDate();
  }, []);

  //  const navigatetoPricing = async () => {
  //      // navigate(`${commonSubDir}/home/${AppName}`, { state: { AppName: AppName } })
  //      // window.location.reload();
  //      const UserId = getSession('UserId')
  //      const status = "N"; // replace with your actual status
  //      const res = await dispatch(GenerateLogout({UserId,status})).unwrap();
  //      if (res?.data?.statusCode === 1) {
  //       window.location.replace(`${commonSubDir}/home/${AppName}`, { state: { AppName: AppName } });
  //      }
  //   }
  const navigatetoPricing = async () => {
    // navigate(`${commonSubDir}/home/${AppName}`, { state: { AppName: AppName } })
    // window.location.reload();
    const MobileNo = encryptedValuesUrlFun(getSession('MobileNo'));
    const userName = encryptedValuesUrlFun(getSession('userName'));
    const UserId = encryptedValuesUrlFun(getSession('UserId'));
    const UserType = encryptedValuesUrlFun(getSession('UserType'));
    const CompId = encryptedValuesUrlFun(getSession('CompId'));
    const CompName = encryptedValuesUrlFun(getSession('CompName'));
    const SessionId = encryptedValuesUrlFun(getSession('SessionId'));
    const AdminId = encryptedValuesUrlFun(
      UserType == 'Admin' ? getSession('UserId') : AppExpDate?.UserId
    );
    if (sessionStorage.getItem('BranchId') !== null) {
      clearSession('BranchId');
    }
    if (sessionStorage.getItem('AppId') !== null) {
      clearSession('AppId');
    }
    if (sessionStorage.getItem('hasRefreshed') !== null) {
      sessionStorage.removeItem('hasRefreshed');
    }
    const param = {
      MN: MobileNo,
      UN: userName,
      UD: UserId,
      UT: UserType,
      CD: CompId,
      CN: CompName,
      SD: SessionId,
      AD: AdminId,
    };
    const queryParams = new URLSearchParams(param).toString();
    window.location.replace(`${commonSubDir}/home/${AppName}?${queryParams}`);
  };

  return (
    <>
      <div className="Invoice-details-bg">
        <div className="Invoice-details-pricedetails">
          <Messages
            messageType={messageType}
            messageData={messageData}
            onComplete={onComplete}
          />
          <div className="pricedetails-div">
            <div
              style={{
                background: ' ',
                display: 'flex',
                flexDirection: 'row',
                justifyContent: 'space-around',
              }}
            >
              {activeBusinessUpiDetails?.length == 0 && <div
                style={{
                  background: ' ',
                  display: 'flex',
                  flexDirection: 'column',
                  rowGap: '1rem',
                }}
              >
                <div
                  style={{
                    backgroundColor: '#52c41a2e',
                    padding: '1rem 1rem',
                    borderRadius: '10px',
                    display: 'flex',
                    flexDirection: 'row',
                    rowGap: '2rem',
                    justifyContent: 'space-between',
                  }}
                >
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      rowGap: '0.2rem',
                    }}
                  >
                    <div>
                      <button
                        className="planchange-btn"
                        onClick={navigatetoPricing}
                      >
                        Change Plan
                      </button>
                    </div>

                    <div
                      style={{
                        display: 'flex',
                        fontFamily: 'Gilroy',
                        fontSize: 'clamp(18px, 2.5vw, 25px)',
                        fontWeight: '600',
                        color: 'green',
                        borderRadius: '3px',
                        alignItems: 'center',
                        columnGap: '0.2rem',
                      }}
                    >
                      <AiOutlineFileDone />
                      {PurchasedDetails?.[0]?.PricingName} /{' '}
                      {PurchasedDetails?.[0]?.NoOfDays > 30
                        ? 'Yearly'
                        : 'Monthly'}
                    </div>
                    <div>
                      <div
                        style={{
                          display: 'flex',
                          alignItems: 'center',
                          columnGap: '0.5rem',
                          color: 'green',
                        }}
                      >
                        <p
                          style={{
                            fontSize: 'clamp(16px, 2.5vw, 20px)',
                            fontWeight: '500',
                          }}
                        >
                          {PurchasedDetails?.[0]?.ExistingPlanNetPrice > 0
                            ? `₹ ${PurchasedDetails?.[0]?.ExistingPlanNetPrice}`
                            : '₹ 0.00'}
                        </p>
                        <p> to Pay </p>
                      </div>
                    </div>
                  </div>

                  <div>
                    <div className={emailcondit ? 'NoError' : 'ShowError'}>
                      {UserDetails?.[0]?.MailId ? (
                        <p
                          style={{
                            fontSize: 'clamp(16px, 2.5vw, 17px)',
                            fontWeight: '500',
                            color: 'green',
                          }}
                        >
                          {UserDetails?.[0]?.MailId}
                        </p>
                      ) : (
                        <div>
                          <InputField
                            fieldState={true}
                            fieldApi={true}
                            autocomplete="off"
                            value={email}
                            label="Email"
                            className="mailInpt"
                            id="Email"
                            field="Email"
                            onChange={handleInputChange}
                          />
                          {emailcondit ? (
                            ''
                          ) : (
                            <p
                              style={{
                                color: '#FF4D4F',
                                fontSize: '12px',
                                margin: '-10px 0px 0px 13px',
                              }}
                            >
                              Enter Valid Email
                            </p>
                          )}
                        </div>
                      )}
                    </div>

                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        columnGap: '0.2rem',
                        fontSize: '20px',
                        fontWeight: '600',
                        color: 'green',
                      }}
                    >
                      <IoPhonePortraitOutline />
                      <p
                        style={{
                          fontFamily: 'Poppins',
                          fontSize: 'clamp(16px, 2.5vw, 20px)',
                          fontWeight: '500',
                          color: 'green',
                          borderRadius: '3px',
                        }}
                      >
                        {' '}
                        {MobileNo ? MobileNo : ''}
                      </p>
                    </div>

                    <div
                      style={{
                        display: 'flex',
                        justifyContent: 'flex-end',
                        textDecoration: 'underline',
                        color: 'green',
                        fontSize: '12px',
                        cursor: 'pointer',
                        columnGap: '0.2rem',
                        alignItems: 'center',
                      }}
                      onClick={getViewMore}
                    >
                      More Info <CgMoreO />{' '}
                    </div>

                    {moreInfo && (
                      <>
                        <DefaultModal
                          open={moreInfo}
                          footer={false}
                          children={
                            <>
                              <div>
                                <div
                                  style={{
                                    display: 'flex',
                                    flexWrap: 'wrap',
                                    gap: '1rem',
                                  }}
                                  className="adduserinfo"
                                >
                                  <div>
                                    <InputField
                                      fieldState={true}
                                      fieldApi={true}
                                      autocomplete="off"
                                      label="Company / Billing Name"
                                      id="Company"
                                      field="Company"
                                      value={CompanyName}
                                      isOnChange={CompanyName ? true : false}
                                      onChange={(e) => setCompanyNames(e)}
                                    />
                                  </div>
                                  <div
                                    className={
                                      addresscondit ? 'NoError' : 'ShowError'
                                    }
                                  >
                                    <div>
                                      <TextAreaInput
                                        field="Address"
                                        autoComplete="off"
                                        label="Address"
                                        fieldState={true}
                                        fieldApi={true}
                                        value={address}
                                        isOnChange={address ? true : false}
                                        onChange={(e) => setaddresss(e)}
                                      />
                                      {addresscondit ? (
                                        ''
                                      ) : (
                                        <p
                                          style={{
                                            color: '#FF4D4F',
                                            fontSize: '12px',
                                            margin: '-10px 0px 0px 13px',
                                          }}
                                        >
                                          Enter Address
                                        </p>
                                      )}
                                    </div>
                                  </div>

                                  <div
                                    className={
                                      gstcondit ? 'NoError' : 'ShowError'
                                    }
                                  >
                                    <div>
                                      <InputField
                                        fieldState={true}
                                        fieldApi={true}
                                        autocomplete="off"
                                        type="numeric"
                                        label="GST"
                                        value={gst}
                                        isOnChange={gst ? true : false}
                                        onChange={(e) =>
                                          checkCondition1(e?.target?.value)
                                        }
                                      />
                                      {gstcondit ? (
                                        ''
                                      ) : (
                                        <p
                                          style={{
                                            color: '#FF4D4F',
                                            fontSize: '12px',
                                            margin: '-10px 0px 0px 13px',
                                          }}
                                        >
                                          Enter Valid Gst
                                        </p>
                                      )}
                                    </div>
                                  </div>

                                  <div
                                    className={
                                      zipcondit ? 'NoError' : 'ShowError'
                                    }
                                  >
                                    <div>
                                      <InputField
                                        fieldState={true}
                                        fieldApi={true}
                                        autocomplete="off"
                                        type="numeric"
                                        label="Zip"
                                        maxLength="6"
                                        value={zipcode}
                                        isOnChange={zipcode ? true : false}
                                        onChange={(e) =>
                                          checkCondition(e?.target?.value)
                                        }
                                      />
                                      {zipcondit ? (
                                        ''
                                      ) : (
                                        <p
                                          style={{
                                            color: '#FF4D4F',
                                            fontSize: '12px',
                                            margin: '-10px 0px 0px 13px',
                                          }}
                                        >
                                          Enter Valid Zipcode
                                        </p>
                                      )}
                                    </div>
                                  </div>

                                  <div
                                    className={
                                      citycondit ? 'NoError' : 'ShowError'
                                    }
                                  >
                                    <div>
                                      <InputField
                                        fieldState={City ? City : false}
                                        fieldApi={true}
                                        autocomplete="off"
                                        label="City"
                                        id="city"
                                        field="city"
                                        onChange={(e) =>
                                          setCitys(e?.target?.value)
                                        }
                                        value={City}
                                        isOnChange={City ? true : false}
                                        disabled={City ? true : false}
                                      />
                                      {citycondit ? (
                                        ''
                                      ) : (
                                        <p
                                          style={{
                                            color: '#FF4D4F',
                                            fontSize: '12px',
                                            margin: '-10px 0px 0px 13px',
                                          }}
                                        >
                                          Enter City
                                        </p>
                                      )}
                                    </div>
                                  </div>

                                  <div
                                    className={
                                      statecondit ? 'NoError' : 'ShowError'
                                    }
                                  >
                                    <div>
                                      <InputField
                                        fieldState={State ? State : false}
                                        fieldApi={true}
                                        autocomplete="off"
                                        label="State"
                                        id="state"
                                        field="state"
                                        onChange={(e) =>
                                          setStates(e?.target?.value)
                                        }
                                        value={State}
                                        isOnChange={State ? true : false}
                                        disabled={State ? true : false}
                                      />
                                      {statecondit ? (
                                        ''
                                      ) : (
                                        <p
                                          style={{
                                            color: '#FF4D4F',
                                            fontSize: '12px',
                                            margin: '-10px 0px 0px 13px',
                                          }}
                                        >
                                          Enter State
                                        </p>
                                      )}
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </>
                          }
                          handleCancel={handleCancel}
                        />
                      </>
                    )}
                  </div>
                </div>

                <div style={{ background: ' ' }}>
                  <div className="Invoice-PaymentOption-MasterDiv">
                    <div className="Invoice-PaymentOption-Div">
                      <div className="Invoice-PaymentOption" style={{}}>
                        Payment options
                      </div>
                      {PaymentDetails?.map((item, index) => (
                        <div
                          className="Invoice-PaymentOptions"
                          key={index}
                          style={{
                            borderLeft:
                              selectedOption === index
                                ? '5px solid #52C41A'
                                : 'none',
                            backgroundColor:
                              selectedOption === index ? ' #52c41a2e' : ' ',
                            color: selectedOption === index ? ' #000' : ' ',
                          }}
                          onClick={() => {
                            setselectedOption(index);
                            setItemsdata(PaymentDetails?.[index]?.Details);
                            setCardName();
                            setValue();
                          }}
                        >
                          <div>
                            {item?.MethodName == 'EMI' && (
                              <img src={Emi} alt="emi" />
                            )}
                            {item?.MethodName == 'CreditCard' && (
                              <img src={CrediCard} alt="CrediCard" />
                            )}
                            {item?.MethodName == 'DebitCard' && (
                              <img src={DebitCard} alt="DebitCard" />
                            )}
                            {item?.MethodName == 'NetBanking' && (
                              <img src={NetBank} alt="NetBanking" />
                            )}
                            {item?.MethodName == 'CashCard' && (
                              <img src={CashCard} alt="CashCard" />
                            )}
                            {item?.MethodName == 'Wallet' && (
                              <img src={Wallet} alt="Wallet" />
                            )}
                            {item?.MethodName == 'UPI' && (
                              <img src={Upi} alt="Wallet" />
                            )}
                          </div>
                          <div class="paymentoptions">
                            <div style={{ fontSize: '16px' }}>
                              {item?.MethodName}
                            </div>
                            <div
                              style={{
                                fontSize: '10px',
                                fontWeight: '400',
                                fontFamily: 'Poppins',
                              }}
                            >
                              Google Pay PhonePe & More
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>

                    <div className="Invoice-PaymentProcess-Div">
                      {selectedOption != undefined && (
                        <div className="Invoice-PaymentProcess-UPI">
                          {PaymentDetails?.[selectedOption]?.CardType !=
                            'UPI' && (
                            <Search
                              placeholder={
                                PaymentDetails?.[selectedOption]?.CardType ==
                                  'CRDC' ||
                                PaymentDetails?.[selectedOption]?.CardType ==
                                  'DBCRD'
                                  ? 'Search Your Card'
                                  : PaymentDetails?.[selectedOption]
                                        ?.CardType == 'WLT'
                                    ? 'Search Your Wallet'
                                    : 'Search Your Bank'
                              }
                              onSearchChange={onSearchChange}
                              prefix={<CiSearch />}
                            />
                          )}

                          <div className="Invoice-PaymentProcess-UPI-collapse">
                            {PaymentDetails?.[selectedOption]?.CardType !=
                              'UPI' && (
                              <Collapse
                                items={items}
                                defaultActiveKey={['1']}
                              />
                            )}
                          </div>
                          <div className="Invoice-PaymentProcess-UPI-body">
                            <div className="OverallAMtCount">
                              {' '}
                              INR
                              {PurchasedDetails?.[0]?.ExistingPlanNetPrice > 0
                                ? `₹ ${PurchasedDetails?.[0]?.ExistingPlanNetPrice}`
                                : '₹ 0.00'}
                            </div>
                            <div className="pricedetails-prcedbutton">
                              <div>
                                <Buttons
                                  type="submit"
                                  buttonText="PROCEED TO PAY"
                                  className="sbmt-btn"
                                  handleSubmit={onSubmit}
                                  icon={<ArrowRightOutlined />}
                                ></Buttons>

                                <a className="prcdPay">
                                  {' '}
                                  By proceeding, you agree to our Privacy
                                  Policy{' '}
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>}


              {activeBusinessUpiDetails?.length > 0 &&
                <>

                  <div style={{ display: "flex", flexDirection: "column", width: "70%" }}>
                    <div
                      style={{
                        background: ' ',
                        display: 'flex',
                        flexDirection: 'column',
                        rowGap: '1rem',
                      }}
                    >
                      <div
                        style={{
                          backgroundColor: '#52c41a2e',
                          padding: '1rem 1rem',
                          borderRadius: '10px',
                          display: 'flex',
                          flexDirection: 'row',
                          rowGap: '2rem',
                          justifyContent: 'space-between',
                          flexWrap: "wrap"
                        }}
                      >
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'column',
                            rowGap: '0.2rem',
                          }}
                        >
                          <div>
                            <button
                              className="planchange-btn"
                              onClick={navigatetoPricing}
                            >
                              Change Plan
                            </button>
                          </div>

                          <div
                            style={{
                              display: 'flex',
                              fontFamily: 'Gilroy',
                              fontSize: 'clamp(18px, 2.5vw, 25px)',
                              fontWeight: '600',
                              color: 'green',
                              borderRadius: '3px',
                              alignItems: 'center',
                              columnGap: '0.2rem',
                            }}
                          >
                            <AiOutlineFileDone />
                            {PurchasedDetails?.[0]?.PricingName} /{' '}
                            {PurchasedDetails?.[0]?.NoOfDays > 30
                              ? 'Yearly'
                              : 'Monthly'}
                          </div>
                          <div>
                            <div
                              style={{
                                display: 'flex',
                                alignItems: 'center',
                                columnGap: '0.5rem',
                                color: 'green',
                              }}
                            >
                              <p
                                style={{
                                  fontSize: 'clamp(16px, 2.5vw, 20px)',
                                  fontWeight: '500',
                                }}
                              >
                                {PurchasedDetails?.[0]?.ExistingPlanNetPrice > 0
                                  ? `₹ ${PurchasedDetails?.[0]?.ExistingPlanNetPrice}`
                                  : '₹ 0.00'}
                              </p>
                              <p> to Pay </p>
                            </div>
                          </div>
                        </div>

                        <div>
                          <div className={emailcondit ? 'NoError' : 'ShowError'}>
                            {UserDetails?.[0]?.MailId ? (
                              <p
                                style={{
                                  fontSize: 'clamp(16px, 2.5vw, 17px)',
                                  fontWeight: '500',
                                  color: 'green',
                                }}
                              >
                                {UserDetails?.[0]?.MailId}
                              </p>
                            ) : (
                              <div>
                                <InputField
                                  fieldState={true}
                                  fieldApi={true}
                                  autocomplete="off"
                                  value={email}
                                  label="Email"
                                  className="mailInpt"
                                  id="Email"
                                  field="Email"
                                  onChange={handleInputChange}
                                />
                                {emailcondit ? (
                                  ''
                                ) : (
                                  <p
                                    style={{
                                      color: '#FF4D4F',
                                      fontSize: '12px',
                                      margin: '-10px 0px 0px 13px',
                                    }}
                                  >
                                    Enter Valid Email
                                  </p>
                                )}
                              </div>
                            )}
                          </div>

                          <div
                            style={{
                              display: 'flex',
                              alignItems: 'center',
                              columnGap: '0.2rem',
                              fontSize: '20px',
                              fontWeight: '600',
                              color: 'green',
                            }}
                          >
                            <IoPhonePortraitOutline />
                            <p
                              style={{
                                fontFamily: 'Poppins',
                                fontSize: 'clamp(16px, 2.5vw, 20px)',
                                fontWeight: '500',
                                color: 'green',
                                borderRadius: '3px',
                              }}
                            >
                              {' '}
                              {MobileNo ? MobileNo : ''}
                            </p>
                          </div>

                          <div
                            style={{
                              display: 'flex',
                              justifyContent: 'flex-end',
                              textDecoration: 'underline',
                              color: 'green',
                              fontSize: '12px',
                              cursor: 'pointer',
                              columnGap: '0.2rem',
                              alignItems: 'center',
                            }}
                            onClick={getViewMore}
                          >
                            More Info <CgMoreO />{' '}
                          </div>

                          {moreInfo && (
                            <>
                              <DefaultModal
                                open={moreInfo}
                                footer={false}
                                children={
                                  <>
                                    <div>
                                      <div
                                        style={{
                                          display: 'flex',
                                          flexWrap: 'wrap',
                                          gap: '1rem',
                                        }}
                                        className="adduserinfo"
                                      >
                                        <div>
                                          <InputField
                                            fieldState={true}
                                            fieldApi={true}
                                            autocomplete="off"
                                            label="Company / Billing Name"
                                            id="Company"
                                            field="Company"
                                            value={CompanyName}
                                            isOnChange={CompanyName ? true : false}
                                            onChange={(e) => setCompanyNames(e)}
                                          />
                                        </div>
                                        <div
                                          className={
                                            addresscondit ? 'NoError' : 'ShowError'
                                          }
                                        >
                                          <div>
                                            <TextAreaInput
                                              field="Address"
                                              autoComplete="off"
                                              label="Address"
                                              fieldState={true}
                                              fieldApi={true}
                                              value={address}
                                              isOnChange={address ? true : false}
                                              onChange={(e) => setaddresss(e)}
                                            />
                                            {addresscondit ? (
                                              ''
                                            ) : (
                                              <p
                                                style={{
                                                  color: '#FF4D4F',
                                                  fontSize: '12px',
                                                  margin: '-10px 0px 0px 13px',
                                                }}
                                              >
                                                Enter Address
                                              </p>
                                            )}
                                          </div>
                                        </div>

                                        <div
                                          className={
                                            gstcondit ? 'NoError' : 'ShowError'
                                          }
                                        >
                                          <div>
                                            <InputField
                                              fieldState={true}
                                              fieldApi={true}
                                              autocomplete="off"
                                              type="numeric"
                                              label="GST"
                                              value={gst}
                                              isOnChange={gst ? true : false}
                                              onChange={(e) =>
                                                checkCondition1(e?.target?.value)
                                              }
                                            />
                                            {gstcondit ? (
                                              ''
                                            ) : (
                                              <p
                                                style={{
                                                  color: '#FF4D4F',
                                                  fontSize: '12px',
                                                  margin: '-10px 0px 0px 13px',
                                                }}
                                              >
                                                Enter Valid Gst
                                              </p>
                                            )}
                                          </div>
                                        </div>

                                        <div
                                          className={
                                            zipcondit ? 'NoError' : 'ShowError'
                                          }
                                        >
                                          <div>
                                            <InputField
                                              fieldState={true}
                                              fieldApi={true}
                                              autocomplete="off"
                                              type="numeric"
                                              label="Zip"
                                              maxLength="6"
                                              value={zipcode}
                                              isOnChange={zipcode ? true : false}
                                              onChange={(e) =>
                                                checkCondition(e?.target?.value)
                                              }
                                            />
                                            {zipcondit ? (
                                              ''
                                            ) : (
                                              <p
                                                style={{
                                                  color: '#FF4D4F',
                                                  fontSize: '12px',
                                                  margin: '-10px 0px 0px 13px',
                                                }}
                                              >
                                                Enter Valid Zipcode
                                              </p>
                                            )}
                                          </div>
                                        </div>

                                        <div
                                          className={
                                            citycondit ? 'NoError' : 'ShowError'
                                          }
                                        >
                                          <div>
                                            <InputField
                                              fieldState={City ? City : false}
                                              fieldApi={true}
                                              autocomplete="off"
                                              label="City"
                                              id="city"
                                              field="city"
                                              onChange={(e) =>
                                                setCitys(e?.target?.value)
                                              }
                                              value={City}
                                              isOnChange={City ? true : false}
                                              disabled={City ? true : false}
                                            />
                                            {citycondit ? (
                                              ''
                                            ) : (
                                              <p
                                                style={{
                                                  color: '#FF4D4F',
                                                  fontSize: '12px',
                                                  margin: '-10px 0px 0px 13px',
                                                }}
                                              >
                                                Enter City
                                              </p>
                                            )}
                                          </div>
                                        </div>

                                        <div
                                          className={
                                            statecondit ? 'NoError' : 'ShowError'
                                          }
                                        >
                                          <div>
                                            <InputField
                                              fieldState={State ? State : false}
                                              fieldApi={true}
                                              autocomplete="off"
                                              label="State"
                                              id="state"
                                              field="state"
                                              onChange={(e) =>
                                                setStates(e?.target?.value)
                                              }
                                              value={State}
                                              isOnChange={State ? true : false}
                                              disabled={State ? true : false}
                                            />
                                            {statecondit ? (
                                              ''
                                            ) : (
                                              <p
                                                style={{
                                                  color: '#FF4D4F',
                                                  fontSize: '12px',
                                                  margin: '-10px 0px 0px 13px',
                                                }}
                                              >
                                                Enter State
                                              </p>
                                            )}
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </>
                                }
                                handleCancel={handleCancel}
                              />
                            </>
                          )}
                        </div>
                      </div>

                    </div>

                    <div className="pricedetails-prcedbutton" style={{ gap: "10px" }}>
                      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", paddingTop: "10px" }}>
                        <Buttons
                          type="submit"
                          buttonText="PROCEED TO PAY"
                          className="sbmt-btn"
                          handleSubmit={onSubmitBusinessUpi}
                          icon={<ArrowRightOutlined />}
                        ></Buttons>

                        {/* <a className="prcdPay">
                          {' '}
                          By proceeding, you agree to our Privacy
                          Policy{' '}
                        </a> */}
                      </div>
                    </div>
                  </div>

                </>

              }
            </div>
          </div>
        </div>
        <DefaultModal
          open={businessUpiModal}
          handleCancel={() => { }}
          footer={false}
          width={500}
          children={<>
            <PaymentGatewayEmbedded
              orderId={OrderId}
              setBusinessUPIOrderId={setOrderId}
              businessUPILink={PaymentPageLink}
              setBusinessUPI={setBusinessUpiModal}
              setPaymentSuccess={setPaymentSuccess}
              paymentSucess={paymentSucess}
              ClearAllGlobalStateDatas={() => { }}
              Type='P'

            />
          </>}
        />
      </div>
    </>
  );
};

export default PricingPage;