import styles from "./finalConfirmation.module.scss";
import cx from "classnames";
import { useEffect, useState, useRef } from "react";
import { baseUrl } from "../../../../constants/urls";
import { statesList } from "../../../../constants/IndianStates";

const FinalConfirmation = (props: any) => {
  const [formDataFromSteps, setFormData] = useState<any>(props.steps);  
  const [phoneNumber, setphoneNumber] = useState("");
  const [email, setEmail] = useState("");

  const bas_u = `${baseUrl}/storage/`;
  const getproductSectors = (productSectors:any,type:string) => {
    const _c:any = [];
    productSectors.map((c:any) => {
      if(type == 'parent'){
        if(c && c.parent)
        _c.push(c.parent.name);
      }else if (type=="child"){
        if(c && c.child)
        _c.push(c.child.name);
      } else{
        if(c&& c.brands)
        _c.push(c.brands)
      }
    });
    return _c.join(',');
  }
  const getVendorOnboardingdata=()=>{
    const _keydata:any = (sessionStorage.getItem('VendorOnBoarding'));
    if(_keydata != ''){
     const data =  JSON.parse(_keydata);
     setphoneNumber(data.phone);
     setEmail(data.email);
    }    
   }
   const getStateValue=(state:string)=>{
    const _state = statesList.filter((_s:any) => {
      return _s.value == state;
    });
    if(_state.length > 0){
      return _state[0].label;
    }
    return '';
   }
   const getPreviewFile = (file: string) => {
    if(file.includes('.pdf')){
      return '/images/pdf.png';
    }
    return file;
   }

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

  return (
    
    <>
         <div className={ (props.current == 5 ? cx("ant-row gutterRow") : ' hidden')}>
        <div
          className={cx(
            "ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-18 gutterCol"
          )}
        >
          <h2 className={styles.leftTitle}>Final Confirmation</h2>
          {formDataFromSteps[4].formData ? (
          <div className={cx("ant-row gutterRow")}>

            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
              <h4 className={styles.subTitlehead}>Step 1 - OTP Verifications </h4>              
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Phone</label>
              <div  className={styles.inputValue}>{phoneNumber}</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Email</label>
              <div  className={styles.inputValue}>{email}</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
            <hr/>
            </div>

            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
            <h4 className={styles.subTitlehead}>Step 2 - About Business</h4>              
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>Store Name</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[1] && formDataFromSteps[1]?.formData?.shop_title != '') ? formDataFromSteps[1]?.formData?.shop_title: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>Select Product Sector </label>
              <div  className={styles.inputValue}>
              {(formDataFromSteps && formDataFromSteps[1]?.formData && formDataFromSteps[1]?.formData?.productSectors) ? <span>{getproductSectors(formDataFromSteps[1]?.formData?.productSectors,'parent')}</span> : ''}
              </div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>Select Product Category </label>
              <div  className={styles.inputValue}>
              {(formDataFromSteps && formDataFromSteps[1]?.formData && formDataFromSteps[1]?.formData?.productSectors) ? <span>{getproductSectors(formDataFromSteps[1]?.formData?.productSectors,'child')}</span> : ''}
              </div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>Select Brand </label>
              <div  className={styles.inputValue}>
              {(formDataFromSteps && formDataFromSteps[1]?.formData && formDataFromSteps[1]?.formData?.productSectors) ? <span>{getproductSectors(formDataFromSteps[1]?.formData?.productSectors,'brands')}</span> : ''}
              </div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
            <hr/>
            </div>

            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
              <h4 className={styles.subTitlehead}>Step 3 - Upload Set of Documents</h4>              
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>PAN Card</label>
              <div  className={styles.inputValue}>
              {formDataFromSteps && formDataFromSteps[2]?.formData?.PANCARD && formDataFromSteps[2]?.formData?.PANCARD?.length > 0 && formDataFromSteps[2]?.formData?.PANCARD?.map((_f:any,idx: number)=>{
                  return(<div key={idx} className={styles.subTitleImage}>
                      <a target="_blank" href={(_f.response) ? bas_u+_f?.response?.file :  bas_u+_f} rel="noreferrer">
                        <img src={(_f.response) ? getPreviewFile(bas_u+_f?.response?.file) :  getPreviewFile(bas_u+_f)} />
                      </a>
                    </div>)
                })}
              </div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>GST Certificate</label>
              <div  className={styles.inputValue}>
              {formDataFromSteps && formDataFromSteps[2].formData.GSTCertificate && formDataFromSteps[2].formData.GSTCertificate.length > 0 && formDataFromSteps[2].formData.GSTCertificate.map((_f:any,idx: number)=>{
                  return(<div key={idx} className={styles.subTitleImage}>
                      <a target="_blank" href={(_f.response) ? bas_u+_f.response.file :  bas_u+_f} rel="noreferrer">
                        <img src={(_f.response) ? getPreviewFile(bas_u+_f.response.file) :  getPreviewFile(bas_u+_f)} />
                      </a>
                    </div>)
                })}
              </div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>Certificate of Incorporation</label>
              <div  className={styles.inputValue}>
              {formDataFromSteps && formDataFromSteps[2].formData.CertificateofIncorporation && formDataFromSteps[2].formData.CertificateofIncorporation.length > 0 && formDataFromSteps[2].formData.CertificateofIncorporation.map((_f:any,idx: number)=>{
                  return(<div key={idx} className={styles.subTitleImage}>
                      <a target="_blank" href={(_f.response) ? bas_u+_f.response.file :  bas_u+_f} rel="noreferrer">
                        <img src={(_f.response) ? getPreviewFile(bas_u+_f.response.file) :  getPreviewFile(bas_u+_f)} />
                      </a>
                    </div>)
                })}
              </div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label} title="Canceled Cheque / Letter from Bank">Canceled Cheque / Letter from Bank</label>
              <div  className={styles.inputValue}>
              {formDataFromSteps && formDataFromSteps[2].formData.CancelledCheque && formDataFromSteps[2].formData.CancelledCheque.length > 0 && formDataFromSteps[2].formData.CancelledCheque.map((_f:any,idx: number)=>{
                  return(<div key={idx} className={styles.subTitleImage}>
                      <a target="_blank" href={(_f.response) ? bas_u+_f.response.file :  bas_u+_f} rel="noreferrer">
                        <img src={(_f.response) ? getPreviewFile(bas_u+_f.response.file) :  getPreviewFile(bas_u+_f)} />
                      </a>
                    </div>)
                })}
              </div>
            </div>
            {formDataFromSteps && formDataFromSteps[2].formData.hasISO == 1 &&
            <>
             <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 gutterCol")}>
              <label  className={styles.label}>ISO Number</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[2] && formDataFromSteps[2].formData.ISONumber != '') ? formDataFromSteps[2].formData.ISONumber: '' }</div>              
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-24 ant-col-xl-24 gutterCol")}>
              <label  className={styles.label}>ISO Certificate</label>
              <div  className={styles.inputValue}>
              {formDataFromSteps && formDataFromSteps[2].formData.ISOCertificate && formDataFromSteps[2].formData.ISOCertificate.length > 0 && formDataFromSteps[2].formData.ISOCertificate.map((_f:any,idx: number)=>{
                  return(<div key={idx} className={styles.subTitleImage}>
                      <a target="_blank" href={(_f.response) ? bas_u+_f.response.file :  bas_u+_f} rel="noreferrer">
                        <img src={(_f.response) ? getPreviewFile(bas_u+_f.response.file) :  getPreviewFile(bas_u+_f)} />
                      </a>
                    </div>)
                })}
              </div>
            </div>
            </>            
            }
            {formDataFromSteps && formDataFromSteps[2].formData.SSIrMSME && formDataFromSteps[2].formData.SSIrMSME.length > 0 &&  
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>SSI/MSME</label>
              <div  className={styles.inputValue}>
              {formDataFromSteps && formDataFromSteps[2].formData.SSIrMSME && formDataFromSteps[2].formData.SSIrMSME.length > 0 && formDataFromSteps[2].formData.SSIrMSME.map((_f:any,idx: number)=>{
                  return(<div key={idx} className={styles.subTitleImage}>
                      <a target="_blank" href={(_f.response) ? bas_u+_f.response.file :  bas_u+_f} rel="noreferrer">
                        <img src={(_f.response) ? getPreviewFile(bas_u+_f.response.file) :  getPreviewFile(bas_u+_f)} />
                      </a>
                    </div>)
                })}
              </div>
            </div>
            }
            {formDataFromSteps && formDataFromSteps[2].formData.CompanyAuthorisedDealerCertificate && formDataFromSteps[2].formData.CompanyAuthorisedDealerCertificate.length > 0 && 
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label} title="Company Authorised Dealer Certificate">Company Authorised Dealer Certificate</label>
              <div  className={styles.inputValue}>
              {formDataFromSteps && formDataFromSteps[2].formData.CompanyAuthorisedDealerCertificate && formDataFromSteps[2].formData.CompanyAuthorisedDealerCertificate.length > 0 && formDataFromSteps[2].formData.CompanyAuthorisedDealerCertificate.map((_f:any,idx: number)=>{
                  return(<div key={idx} className={styles.subTitleImage}>
                      <a target="_blank" href={(_f.response) ? bas_u+_f.response.file :  bas_u+_f} rel="noreferrer">
                        <img src={(_f.response) ? getPreviewFile(bas_u+_f.response.file) :  getPreviewFile(bas_u+_f)} />
                      </a>
                    </div>)
                })}
              </div>
            </div>
            }
            {formDataFromSteps && formDataFromSteps[2].formData.OtherCertificates && formDataFromSteps[2].formData.OtherCertificates.length > 0 && 
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>Other Certificates</label>
              <div  className={styles.inputValue}>
              {formDataFromSteps && formDataFromSteps[2].formData.OtherCertificates && formDataFromSteps[2].formData.OtherCertificates.length > 0 && formDataFromSteps[2].formData.OtherCertificates.map((_f:any,idx: number)=>{
                  return(<div key={idx} className={styles.subTitleImage}>
                      <a target="_blank" href={(_f.response) ? bas_u+_f.response.file :  bas_u+_f} rel="noreferrer">
                        <img src={(_f.response) ? getPreviewFile(bas_u+_f.response.file) :  getPreviewFile(bas_u+_f)} />
                      </a>
                    </div>)
                })}
              </div>
            </div>
            }
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
            <hr/>
            </div>
            {/* <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
              <h4 className={styles.subTitlehead}>Step 4 - TAX Details</h4>              
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>GST Number</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.gstin_number != '') ? formDataFromSteps[3].formData.gstin_number: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>PAN Number</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.pan_number != '') ? formDataFromSteps[3].formData.pan_number: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>Seller Legal Name </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.seller_legal_name != '') ? formDataFromSteps[3].formData.seller_legal_name: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>Address</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.gstin_address != '') ? formDataFromSteps[3].formData.gstin_address: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>State</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.gstin_state != '') ? formDataFromSteps[3].formData.gstin_state: '' }</div>
            </div> */}
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
            <h4 className={styles.subTitlehead}>Step 4 - Personal Details</h4>              
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>Contact Number 1</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.contact_number_1 != '') ? formDataFromSteps[3].formData.contact_number_1: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>WhatsApp Number</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.whatsapp_number != '') ? formDataFromSteps[3].formData.whatsapp_number: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>Contact Number 2 </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.contact_number_3 != '') ? formDataFromSteps[3].formData.contact_number_3: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>Contact Number 3 </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.contact_number_4 != '') ? formDataFromSteps[3].formData.contact_number_4: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
            <label  className={styles.label}>Are you a?</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.are_you_a != '') ? formDataFromSteps[3].formData.are_you_a: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-6 gutterCol")}>
              <label  className={styles.label}>Logo</label>
              <div  className={styles.inputValue}>
              {formDataFromSteps && formDataFromSteps[3].formData.logo && formDataFromSteps[3].formData.logo.length > 0 && formDataFromSteps[3].formData.logo.map((_f:any,idx: number)=>{
                  return(<div key={idx} className={styles.subTitleImage}>
                      <a target="_blank" href={(_f) ? bas_u+_f :  ''} rel="noreferrer">
                        <img src={(_f) ? bas_u+_f :  ''} />
                      </a>
                    </div>)
                })}
              </div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
             <h2 className={styles.subTitlehead}>Social Handles</h2>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Twitter URL</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.twitter != '') ? formDataFromSteps[3].formData.twitter: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Facebook URL </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.facebook != '') ? formDataFromSteps[3].formData.facebook: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
             <h2 className={styles.subTitlehead}>Billing Address </h2>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Room/Floor Building Number </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.address1 != '') ? formDataFromSteps[3].formData.address1: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Street /Locality / Landmark </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.address2 != '') ? formDataFromSteps[3].formData.address2: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>State </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.state != '') ? getStateValue(formDataFromSteps[3].formData.state): '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>City</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.city != '') ? formDataFromSteps[3].formData.city: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>Pincode </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.postcode != '') ? formDataFromSteps[3].formData.postcode: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
            <hr/>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
             <h2 className={styles.subTitlehead}>Pickup Address </h2>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Contact Name </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.p_contact_name != '') ? formDataFromSteps[3].formData.p_contact_name: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Contact Email </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.p_contact_email != '') ? formDataFromSteps[3].formData.p_contact_email: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Contact Number </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.p_contact_number != '') ? formDataFromSteps[3].formData.p_contact_number: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Latitude </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.p_longitude != '') ? formDataFromSteps[3].formData.p_longitude: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Longitude </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.p_longitude != '') ? formDataFromSteps[3].formData.p_longitude: '' }</div>
            </div>


            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Room/Floor Building Number </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.p_address1 != '') ? formDataFromSteps[3].formData.p_address1: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-12 gutterCol")}>
              <label  className={styles.label}>Street /Locality / Landmark </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.p_address2 != '') ? formDataFromSteps[3].formData.p_address2: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>State </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.p_state != '') ? getStateValue(formDataFromSteps[3].formData.p_state): '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>City</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.p_city != '') ? formDataFromSteps[3].formData.p_city: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>Pincode </label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[3] && formDataFromSteps[3].formData.p_postcode != '') ? formDataFromSteps[3].formData.p_postcode: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
            <hr/>
            </div>

            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
              <h4 className={styles.subTitlehead}>Step 5 - Bank Details </h4>              
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>Bank Name</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[4] && formDataFromSteps[4].formData.bank_name != '') ? formDataFromSteps[4].formData.bank_name: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>Bank Account Number</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[4] && formDataFromSteps[4].formData.bank_account_number != '') ? formDataFromSteps[4].formData.bank_account_number: '' }</div>
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-8 gutterCol")}>
              <label  className={styles.label}>Bank IFSC Code</label>
              <div  className={styles.inputValue}>{(formDataFromSteps && formDataFromSteps[4] && formDataFromSteps[4].formData.bank_ifsc_code != '') ? formDataFromSteps[4].formData.bank_ifsc_code: '' }</div>
            </div>
            {/* <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
              <h4 className={styles.subTitlehead}>Step 7 - Signature </h4>              
            </div>
            <div className={cx("ant-col ant-col-xs-24 ant-col-sm-24 ant-col-md-12 ant-col-xl-24 gutterCol")}>
            <div  className={styles.inputValue}>
              {(formDataFromSteps && formDataFromSteps[3].formData && formDataFromSteps[3].formData.signatureType != '' && formDataFromSteps[3].formData.signatureType == "draw") &&  
                  <img src={formDataFromSteps[3].formData.signature} />
              }
                { formDataFromSteps && formDataFromSteps[3].formData &&  formDataFromSteps[3].formData.signatureType != '' && formDataFromSteps[3].formData.signatureType == "file" && formDataFromSteps[3].formData.signature.length > 0 && formDataFromSteps[3].formData.signature.map((_f:any,idx: number)=>{
                  return(<div key={idx} className={styles.subTitleImage}>
                      <a target="_blank" href={(_f.response) ? bas_u+_f.response.file :  bas_u+_f}>
                        <img src={(_f.response) ? getPreviewFile(bas_u+_f.response.file) :  getPreviewFile(bas_u+_f)} />
                      </a>
                    </div>)
                })}
              </div> 

            </div>*/}
            </div>
          ) : null}

        </div>
      </div>
    </>
  );
};
export default FinalConfirmation;