Untitled

mail@pastecode.io avatar
unknown
plain_text
3 years ago
61 kB
2
Indexable
Never
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
 TouchableOpacity,
  Image,
  AsyncStorage,
 SafeAreaView,
 Alert
} from 'react-native';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { Dropdown } from 'react-native-material-dropdown';
import { Header, Left, Right, Body, Footer, Container, Tabs, Tab, TabHeading, Row } from 'native-base';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Autocomplete, withKeyboardAwareScrollView } from "react-native-dropdown-autocomplete";
import DatePicker from 'react-native-datepicker';
import Service from '../Service/Service';
import Toast from 'react-native-simple-toast';
import moment from 'moment';
// import PageFooter from './PageFooter';
import { lan_en, lan_ch } from '../Component/Language';
import Loader from '../Component/Loader';

const sv = new Service();

var poldata = [];
const portdatas = [];
const vesseldatas = [];
var sharedata="";
var a='';

class Ecom_tariff extends React.Component {
  onLogin() {
              
    try {
    //   if(this.props.navigation.state.params.landingpage=='L'){
    //     this.props.navigation.navigate('Landing');
    // }else  if(this.props.navigation.state.params.landingpage=='A'){
    //     this.props.navigation.navigate('Agencydashboard');
    // }else(
      AsyncStorage.getItem('backnavigate_booking').then(value => {
        console.log('value---------rrrrrr',"a"+value+"b"); 
       if("a"+value.trim()+"b" === "aSb")
       {
        this.props.navigation.navigate('Landing');
       }else{
        this.props.navigation.navigate('Landing');
       }
    })
        
    // )
  
    } catch (error) {
      this.props.navigation.navigate('Landing');
    }

   
   
   

  }
  constructor(props) {
    super(props);
 
    var today = new Date();
   var ddd= moment(today).format("YYYY-MM-DD");
   var dddd= moment(today).add(3, 'months').format("YYYY-MM-DD");
   
   
   
    this.state = {
      polarray1: [],
      pol: '',
      pod: '',
      fromdate: '',
      fromdate1: '',
      fromdate2: '',
      todate: '',
      polpoddetails: [],
      progressVisible: false,
      swap: false,
      temp: '',
      portdetails:[],
      isLoading:false,

     locationfromdate: moment(today),
      locationtodate:moment(today).add(3, 'months'),
      fromLocation:'',
      toLocation:'',
      fromLocation1:'',
      toLocation1:'',
      fromLocation2:'',
      toLocation2:'',
      vesselfromdate: moment(today),
      vesseltodate:moment(today).add(3, 'months'),
      selectVessel:'',
      portfromdate: moment(today),
      porttodate:moment(today).add(3, 'months'),
      selectPort:'',
      vesselarray:[],
      polarray: [],
      swapvisibility:false,
      schedulelist2:[],
      a:'',
      language:'',
      loc_head:'',
     port_head:'',
     vessel_head:'',
     placeholder_port:'',
     placeholder_vessel:'',
     equipmentType1: [],
     equipment:[],
     Commodity:[],
     commoditycode:'',
     commoditycode1:'',
     commoditycode2:'',
     eqptype2:'',
     eqptype3:'',

    }
  }
  traiffmethod()
  {
    this.props.navigation.navigate('Ecom_tariffsearch', { origincode :this.state.origincode,deliverycode :this.state.deliverycode,eqptype1:this.state.eqptype1, fromdate:moment(this.state.fromdate).format('YYYY-MM-DD'),custcode:this.state.custcode,commoditycode:this.state.commoditycode});
    // this.props.navigation.navigate('Ecom_tariffsearch',)
    // sv.gettariffecom(this.func1.bind(this),this.state.origincode,this.state.deliverycode,this.state.eqptype1, moment(this.state.fromdate).format('YYYY-MM-DD'),this.state.custcode,this.state.commoditycode);
             
  }
  traiffmethod1()
  {
    this.props.navigation.navigate('Ecom_contract', { origincode :this.state.origincode,deliverycode :this.state.deliverycode,eqptype1:this.state.eqptype1, fromdate:moment(this.state.fromdate).format('YYYY-MM-DD'),custcode:this.state.custcode,commoditycode:this.state.commoditycode});
    // this.props.navigation.navigate('Ecom_tariffsearch',)
    // sv.gettariffecom(this.func1.bind(this),this.state.origincode,this.state.deliverycode,this.state.eqptype1, moment(this.state.fromdate).format('YYYY-MM-DD'),this.state.custcode,this.state.commoditycode);
             
  }
  traiffmethod2()
  {
    this.props.navigation.navigate('Ecom_surcharge', { origincode :this.state.origincode,deliverycode :this.state.deliverycode,eqptype1:this.state.eqptype1, fromdate:moment(this.state.fromdate).format('YYYY-MM-DD'),custcode:this.state.custcode,commoditycode:this.state.commoditycode});
    // this.props.navigation.navigate('Ecom_tariffsearch',)
    // sv.gettariffecom(this.func1.bind(this),this.state.origincode,this.state.deliverycode,this.state.eqptype1, moment(this.state.fromdate).format('YYYY-MM-DD'),this.state.custcode,this.state.commoditycode);
             
  }
  onsearch(){

   
    // this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.indexOf(")"));
    console.log("inside the rates eqp...",this.state.eqptype1,this.state.fromLocation,this.state.deliverycode,this.state.commodity,this.state.custcode);
    if(this.state.fromLocation != ""&&this.state.fromLocation !=null &&this.state.fromLocation !=undefined){
      if(this.state.toLocation != ""&&this.state.toLocation !=null){
        if(this.state.fromdate != ""&&this.state.fromdate !=null){
          if(this.state.eqptype1 != ""&&this.state.eqptype1 != null){
            // if(this.state.commoditycode != ""&&this.state.commoditycode !=null){

            this.traiffmethod();
             
               
            // }else{
            //   Toast.show("Enter Commodity")
            // }
            }else{
              Toast.show("Enter Equipment")
            }
            }else{
              Toast.show("Enter Shipment Date")
            }
            }else{
              Toast.show("Enter Delivery")
            }
          }else{
            Toast.show("Enter Origin")
          }
          this.setState({search : true})
    
  }

  onsearch1(){

   
    // this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.indexOf(")"));
    console.log("inside the rates eqp...",this.state.eqptype1,this.state.fromLocation,this.state.deliverycode,this.state.commodity,this.state.custcode);
    if(this.state.fromLocation1 != ""&&this.state.fromLocation1 !=null &&this.state.fromLocation1 !=undefined){
      if(this.state.toLocation1 != ""&&this.state.toLocation1 !=null){
        if(this.state.fromdate1 != ""&&this.state.fromdate1 !=null){
          if(this.state.eqptype2 != ""&&this.state.eqptype2 != null){
            // if(this.state.commoditycode != ""&&this.state.commoditycode !=null){

            this.traiffmethod1();
             
               
            // }else{
            //   Toast.show("Enter Commodity")
            // }
            }else{
              Toast.show("Enter Equipment")
            }
            }else{
              Toast.show("Enter Shipment Date")
            }
            }else{
              Toast.show("Enter Delivery")
            }
          }else{
            Toast.show("Enter Origin")
          }
          this.setState({search : true})
    
  }

  onsearch2(){

   
    // this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.indexOf(")"));
    console.log("inside the rates eqp...",this.state.eqptype1,this.state.fromLocation,this.state.deliverycode,this.state.commodity,this.state.custcode);
    if(this.state.fromLocation2 != ""&&this.state.fromLocation2 !=null &&this.state.fromLocation2 !=undefined){
      if(this.state.toLocation2 != ""&&this.state.toLocation2 !=null){
        if(this.state.fromdate2 != ""&&this.state.fromdate2 !=null){
          if(this.state.eqptype3 != ""&&this.state.eqptype3 != null){
            // if(this.state.commoditycode != ""&&this.state.commoditycode !=null){

            this.traiffmethod2();
             
               
            // }else{
            //   Toast.show("Enter Commodity")
            // }
            }else{
              Toast.show("Enter Equipment")
            }
            }else{
              Toast.show("Enter Shipment Date")
            }
            }else{
              Toast.show("Enter Delivery")
            }
          }else{
            Toast.show("Enter Origin")
          }
          this.setState({search : true})
    
  }

  vesselnameDetails(response) {
  
    if(vesseldatas.length>0&&vesseldatas!=null)
    {
      console.log("already added ")
     
    }
    else{
      this.setState({ vesselarray: response.vesselmaster })
      for (let i = 0; i < this.state.vesselarray.length; i++) {
  
        this.state.polarray1.push(this.state.vesselarray[i].vesselname);
        vesseldatas.push(this.state.vesselarray[i].vesselname+"["+this.state.vesselarray[i].vesselcode+"]");
      }
     
      
    }
   
  }
  componentDidMount() {
    this.setState({ isLoading: true });
    sv.get_commodity(this.get_commodityResponse.bind(this))
    AsyncStorage.getItem('lang').then((value) => {
      console.log("----language---", value)
      if (value == 'lang_ch') {
          this.setState({ language: "lang_ch" })
          this.setState({ loc_head:lan_ch[0].location})
          this.setState({port_head:lan_ch[0].port})
          this.setState({ vessel_head:lan_ch[0].vessel})
          this.setState({placeholder_port:lan_ch[0].port})
          this.setState({ placeholder_vessel:lan_ch[0].vessel})
          this.setState({placeholder_from:lan_ch[0].portoforigin})
          this.setState({ placeholder_to:lan_ch[0].portofdestination})
      
         
      } else {
          this.setState({ language: "lang_en" })
          this.setState({loc_head:lan_en[0].location})
          this.setState({port_head:lan_en[0].port})
          this.setState({vessel_head:lan_en[0].vessel})
          this.setState({placeholder_port:lan_en[0].port1})
          this.setState({ placeholder_vessel:lan_en[0].vessel1})
          this.setState({placeholder_from:lan_en[0].portoforigin})
          this.setState({ placeholder_to:lan_en[0].portofdestination})
         
      }

  })
    sv.getports(this.portnameDetails.bind(this));
    sv.getvessels(this.vesselnameDetails.bind(this));
    this.setState({ isLoading: false });
    sv.get_equipmentType(this.getequipmentTypeResponse.bind(this));
    AsyncStorage.setItem('eqptype','Type')
    AsyncStorage.setItem('customer', '' );
    AsyncStorage.setItem('mycust_rate', 'N' );
}
get_commodityResponse(response) {
    console.log("inside the response ...",response);
    for (let i = 0; i < response.length; i++) {
        this.state.Commodity.push(response[i].comdtyname + "[" + response[i].comdtycode + "]")
    }
  
  }

oneqp2(value){
  console.log("inside rthe oneqp1 >>>",value.eqptype2);
  this.setState({eqptype2:value.eqptype2})
  // this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.length);
  var s = this.state.eqptype2;
  var a = s.substring(0, s.indexOf("("));
  s = s.substring(s.indexOf("(") + 1);
  s = s.substring(0, s.indexOf(")"));
  this.setState({eqptype2:s})
}

oneqp3(value){
  console.log("inside rthe oneqp1 >>>",value.eqptype3);
  this.setState({eqptype3:value.eqptype3})
  // this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.length);
  var s = this.state.eqptype3;
  var a = s.substring(0, s.indexOf("("));
  s = s.substring(s.indexOf("(") + 1);
  s = s.substring(0, s.indexOf(")"));
  this.setState({eqptype3:s})
}
oneqp1(value){
  console.log("inside rthe oneqp1 >>>",value.eqptype1);
  this.setState({eqptype1:value.eqptype1})
  // this.state.eqptype1.substring(this.state.eqptype1.indexOf("("),this.state.eqptype1.length);
  var s = this.state.eqptype1;
  var a = s.substring(0, s.indexOf("("));
  s = s.substring(s.indexOf("(") + 1);
  s = s.substring(0, s.indexOf(")"));
  this.setState({eqptype1:s})
}
getequipmentTypeResponse(response) {
      console.log("----get_equipmentType", response);
      this.setState({ equipmentType: response })
      for (let i = 0; i < this.state.equipmentType.length; i++) {
        this.state.equipment.push("(" +  this.state.equipmentType[i].equiptype + ")" +  this.state.equipmentType[i].equipdesc)
      }
      temparray = this.state.equipment.map(item => ({
        value: item
      }))
      this.setState({ equipmentType1: temparray })
    }

portnameDetails(response) {
  if(portdatas.length>0&&portdatas!=null)
  {
    console.log("already added ")
    this.setState({ isLoading: false });
  }else{
    poldata=[];

    console.log("---------ports names in func3----" + JSON.stringify(response.ports[0].portname))

    this.setState({ polarray: response.ports })
    for (let i = 0; i < this.state.polarray.length; i++) {

      this.state.polarray1.push(this.state.polarray[i].portname);
      portdatas.push(this.state.polarray[i].portname.trim()+"["+this.state.polarray[i].portcode.trim()+"]");
    }
    console.log("++++++++++++++++",portdatas)
    poldata = this.state.polarray1.map(item => ({
      value: item
    }))
    this.setState({ comboListStateArray: poldata })
    this.setState({ isLoading: false });
  }
 
}

 
 

  onviewdetails(from,to,fromdate,todate) {
console.log(" datas --------------",from,to,fromdate,todate);

    if (this.state.fromLocation != '' && this.state.fromLocation != null  ) {
      if (this.state.toLocation != '' && this.state.toLocation != null ) {
        if (this.state.locationfromdate != '' && this.state.locationfromdate != null) {
          if (this.state.locationtodate != '' && this.state.locationtodate != null) {
            if(Date.parse(this.state.locationfromdate)<=(Date.parse(this.state.locationtodate))){

              this.setState({ isLoading: true });
              var s = from;
  
              s = s.substring(s.indexOf("[") + 1);
              s = s.substring(0, s.indexOf("]"));
              console.log("**U***", s)
  
              var s1 = to;
  
              s1 = s1.substring(s1.indexOf("[") + 1);
              s1 = s1.substring(0, s1.indexOf("]"));
              console.log("**U***", s1)
              var fromdate1=moment(fromdate).format("YYYY-MM-DD");
              var todate1=moment(todate).format("YYYY-MM-DD");
  
              sv.getpolpoddetails(s,s1 ,fromdate1, todate1, this.func4.bind(this));
            }else{
              Toast.show("Select Valid Date")
            }

          } else {
            Toast.show("Select the To Date")
          }

        } else {
          Toast.show("Select the From Date")
        }
      }
      else {
        Toast.show("Select POD")
      }
    } else {
      Toast.show("Select POL")
    }
  
  }


  onviewdetailsport(port,fromdate,todate) {
    console.log(" datas --------------",port,fromdate,todate);
    
    
          if (this.state.selectPort!= '' && this.state.selectPort!= null ) {
            if (this.state.portfromdate != '' && this.state.portfromdate != null) {
              if (this.state.porttodate != '' && this.state.porttodate != null) {
                if(Date.parse(this.state.portfromdate)<=(Date.parse(this.state.porttodate))){
                  this.setState({ isLoading: true });
                  var s = port;
      
                  s = s.substring(s.indexOf("[") + 1);
                  s = s.substring(0, s.indexOf("]"));
                  console.log("**U***", s)
      
                  var fromdate1=moment(fromdate).format("YYYY-MM-DD");
                      var todate1=moment(todate).format("YYYY-MM-DD");
      
      
                  sv.getscheduleportdetails(s,fromdate1, todate1, this.func5.bind(this));
                }
                else{
                  Toast.show("Select  Valid Date")
                }
               
              } else {
                Toast.show("Select  To Date")
              }
    
            } else {
              Toast.show("Select  From Date")
            }
          }
          else {
            Toast.show("Select Port")
          }
       
        // sv.getpolpoddetails(this.state.fromdate,this.state.todate,this.state.pol,this.state.pod,this.func4.bind(this));
      }

 




      onviewdetailsvessel(vessel,fromdate,todate) {
        console.log(" datas --------------",vessel,fromdate,todate);
        
        
              if (this.state.selectVessel!= '' && this.state.selectVessel!= null) {
                if (this.state.vesselfromdate != '' && this.state.vesselfromdate != null) {
                  if (this.state.vesseltodate != '' && this.state.vesseltodate != null) {
                    if(Date.parse(this.state.vesselfromdate)<=(Date.parse(this.state.vesseltodate))){
                      this.setState({ isLoading: true });
                      var s = vessel;
          
                      s = s.substring(s.indexOf("[") + 1);
                      s = s.substring(0, s.indexOf("]"));
                      console.log("**U***", s)
          
                      var fromdate1=moment(fromdate).format("YYYY-MM-DD");
                      var todate1=moment(todate).format("YYYY-MM-DD");
          
                      sv.getschedulevesseldetails(s,fromdate1, todate1, this.func6.bind(this));
                    }else{
                      Toast.show("Select Valid Date") 
                    }
                 
                  } else {
                    Toast.show("Select  To Date")
                  }
        
                } else {
                  Toast.show("Select  From Date")
                }
              }
              else {
                Toast.show("Select Vessel")
              }
           
            // sv.getpolpoddetails(this.state.fromdate,this.state.todate,this.state.pol,this.state.pod,this.func4.bind(this));
          }
  func4(response) {
   
   
      console.log("--------onviewdetails------", response)
      this.setState({ polpoddetails: response })
      var schedulelist=[];
          
      for(let i=0;i<response.length;i++)
      {
        
        schedulelist.push(' '+"*"+response[i].service_name+'*'+"\n");
       
        schedulelist.push(' '+"*"+"ETD"+"*"+ response[i].etd+''+"\n");
  
        schedulelist.push(' '+"*"+"ETA"+"*"+ response[i].eta+''+"\n");
       
        schedulelist.push(''+"_*"+response[i].vessel_name+'|'+ response[i].voyage_number+'|'+response[i].bound+'|'+response[i].transit_time+'D'+"*_"+"\n");
     
        schedulelist.push("-------------------------------------------\n");
        
          
         
      }
      for(let i=0;i<schedulelist.length;i++){
        sharedata=sharedata+""+schedulelist[i]
    }    
              this.state.schedulelist2.push(schedulelist);  
              console.log("----->>>>>>>",this.state.schedulelist2)
    
      this.props.navigation.navigate('Schedulereport', { parent: 'Loginscreen', schedulereport: this.state.polpoddetails,sharelist:sharedata });
  
      this.setState({ isLoading: false });
  }

  func5(response) {
    try {
      if(response.rs0.length!=0)
      console.log("--------onviewdetails------", response.rs0.length)
      this.setState({ portdetails: response.rs0 })
      this.setState({ isLoading: false });
  this.props.navigation.navigate('Schedulereport1', { parent: 'Loginscreen', schedulereport1: this.state.portdetails });
    } catch (error) {
      this.setState({ isLoading: false });
      Alert.alert("No Record")
    }
   
  }

  func6(response) {
    try {
      if(response.length!=null)
      console.log("--------onviewdetails------", response)
      this.setState({ vesseldetails: response.rs0 })
      this.setState({ isLoading: false });
  this.props.navigation.navigate('Schedulereport2', { schedulereport2: this.state.vesseldetails ,language:this.state.language});
    } catch (error) {
      this.setState({ isLoading: false });
      Alert.alert("No Record")
    }
   
  }


  onswap(){
    console.log("before swap",this.state.swapvisibility)
       this.setState({swapvisibility:!this.state.swapvisibility})
       var a = this.state.fromLocation

       this.setState({ fromLocation: this.state.toLocation })
       this.setState({ toLocation: a })
       console.log("after swap",this.state.swapvisibility)
  }

  onfromLocation(item){
    this.setState({fromLocation:item})  
}
ontoLocation(item){
  this.setState({toLocation:item})  
}


onswap1(){
  console.log("before swap",this.state.swapvisibility)
     this.setState({swapvisibility:!this.state.swapvisibility})
     var a = this.state.fromLocation1

     this.setState({ fromLocation1: this.state.toLocation1 })
     this.setState({ toLocation1: a })
     console.log("after swap",this.state.swapvisibility)
}

onfromLocation1(item){
  this.setState({fromLocation1:item})  
}
ontoLocation1(item){
this.setState({toLocation1:item})  
}


onswap2(){
  console.log("before swap",this.state.swapvisibility)
     this.setState({swapvisibility:!this.state.swapvisibility})
     var a = this.state.fromLocation2

     this.setState({ fromLocation2: this.state.toLocation2 })
     this.setState({ toLocation2: a })
     console.log("after swap",this.state.swapvisibility)
}

onfromLocation2(item){
  this.setState({fromLocation2:item})  
}
ontoLocation2(item){
this.setState({toLocation2:item})  
}
onautocompletechange(){
  this.setState({swapvisibility:!this.state.swapvisibility})
}
  onvesselselect(item){
        this.setState({selectVessel:item})  
  }
  onportselect(item){
    this.setState({selectPort:item})  
}
onCommodityDetails(item) {

      console.log("----Commodity", item)
      this.setState({ commodity: item })
      var s1 = item;
      s1 = s1.substring(s1.indexOf("[") + 1);
      s1 = s1.substring(0, s1.indexOf("]"));
      console.log("**Commodity***", s1)
      this.setState({ commoditycode: s1 })
  }
  onCommodityDetails1(item) {

    console.log("----Commodity", item)
    this.setState({ commodity1: item })
    var s1 = item;
    s1 = s1.substring(s1.indexOf("[") + 1);
    s1 = s1.substring(0, s1.indexOf("]"));
    console.log("**Commodity***", s1)
    this.setState({ commoditycode1: s1 })
}
onCommodityDetails2(item) {

  console.log("----Commodity", item)
  this.setState({ commodity2: item })
  var s1 = item;
  s1 = s1.substring(s1.indexOf("[") + 1);
  s1 = s1.substring(0, s1.indexOf("]"));
  console.log("**Commodity***", s1)
  this.setState({ commoditycode2: s1 })
}
  
  render() {
  //  this.setState({a:moment(this.state.portfromdate).add(3, 'months')})
  

    return (
      <View style={{ flex: 1 }}>
     <Header androidStatusBarColor="#112d51"
          style={{
            marginHorizontal: -2,
            marginTop: -2,
            backgroundColor: '#112d51',
            height: 60,
            bottom: 25
          }}>
          <Left>
            <TouchableOpacity onPress={this.onLogin.bind(this)} style={{
              position: 'relative',
              width: "100%",
              height: "100%",
              right: "5%",
              paddingVertical: "6%",
            }} >
              <Icon style={{ fontSize: 30,top:"20%", color: '#ffffff' }} name="arrow-back"  />
              {/* <Image resizeMode="contain" source={require('../Images/menu_img/backnew.png')} style={{ height: '50%', width: "40%", right: 10,tintColor:'#ffff' }} /> */}
            </TouchableOpacity>

          </Left>
          <Body>
          <Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right:  Platform.OS == 'ios' ? "30%":15,width:"120%" }}>RATES</Text>
          {/* {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right:  Platform.OS == 'ios' ? "30%":15,width:"120%" }}>TARIFF</Text>) :
                                        (<Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right:  Platform.OS == 'ios' ? "30%":15,width:"120%" }}>{lan_ch[0].schedule}</Text>)} */}

            {/* <Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right:15 }}>SCHEDULE</Text> */}
          </Body>
          <Right>
          {/* <Image resizeMode="contain" source={require('../Images/icons/Schedule.png')} style={{  height:30, width:50,tintColor:'#ffff',right:10}} />           */}
                        </Right>
        </Header>

        <ProgressDialog
visible={this.state.progressVisible}
title="Loading"
message="Please, wait..."
titleStyle={{fontFamily:'Montserrat-Medium'}}
/>
<Loader isLoading={this.state.isLoading} />
         
               {/* <View style={{backgroundColor:'#112d51'}} > */}
               <Tabs tabContainerStyle={{ height: 40, backgroundColor: '#112d51', }}  tabBarUnderlineStyle={{backgroundColor:'white' }} >
   
               <Tab heading='TARIFF' style={styles.tabBody} tabStyle={{ backgroundColor: '#112d51', }} textStyle={{ color: '#ffff', fontSize: 13,fontFamily:'Montserrat-Medium' }} activeTabStyle={{ backgroundColor: '#112d51' }} activeTextStyle={{ color: '#ffff', fontSize:15,fontFamily:'Montserrat-Bold'}} >
               
                               <View style={{backgroundColor:'#112d51'}} >
                                      <View style={{backgroundColor:'#ffff',marginHorizontal:'5%',marginVertical:'5%',borderRadius:10}} >
                                    
                           <View style={{flexDirection:'row',zIndex:2}} >
            
            <View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:1}} >
            <Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />
            </View>
            {this.state.swapvisibility!=true? (  <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
            <Autocomplete
                        data={portdatas}
                        valueExtractor={item => item}
                        minimumCharactersCount={0}
                        inputContainerStyle={{
                          zIndex: -1,
                          flexDirection: "row",
                          flexWrap: "wrap",
                          alignItems: "center",
                          fontFamily: 'Montserrat-Medium', fontSize: 15,
                          // paddingHorizontal: 10,
                          // paddingBottom: 10,
                          width: "100%",
                          borderColor: '#000000',
                          justifyContent: "center",
                        }}
                        containerStyle={{ position: 'absolute', top:60,alignItems:'center',justifyContent:'center',right:50}}
                        placeholder={this.state.placeholder_from}
                        placeholderColor='#000000'
                        handleSelectItem={(item, id) => this.onfromLocation(item)}
                        inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
                        initialValue={this.state.fromLocation}
                     
                      />
            
            
            </View>):( <View style={{flexDirection:'column',flex:0.9,height:45}} >
            
            <TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
                      <Text style={{top:15,left:20}}>{this.state.fromLocation}</Text>
            </TouchableOpacity>
            
            </View>)}
            </View>
            <View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
              
              </View>
            <View style={{flexDirection:'row',zIndex:1}} >
            
            <View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:-1}} >
                       <Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />


            </View>
            {this.state.swapvisibility!=true? (   <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:-1}} >
            <Autocomplete
                        data={portdatas}
                        valueExtractor={item => item}
                        minimumCharactersCount={0}
                        inputContainerStyle={{
                          zIndex: -1,
                          flexDirection: "row",
                          flexWrap: "wrap",
                          alignItems: "center",
                          fontFamily: 'Montserrat-Medium', fontSize: 15,
                          // paddingHorizontal: 10,
                          // paddingBottom: 10,
                          width: "100%",
                          borderColor: '#000000',
                          justifyContent: "center",
                        }}
                        containerStyle={{ position: 'absolute', top:60,alignItems:'center',justifyContent:'center',right:50}}
                        placeholder={this.state.placeholder_to}
                        placeholderColor='#000000'
                        handleSelectItem={(item, id) => this.ontoLocation(item)}
                        inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
                        initialValue={this.state.toLocation}
                     
                      />
            
            
            
            
            </View>):(<View style={{flexDirection:'column',flex:0.9,height:45}} >
            <TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
                      <Text style={{top:15,left:20}}>{this.state.toLocation}</Text>
            </TouchableOpacity>
            
            </View>)}
            </View>
            {(this.state.fromLocation!=""&&this.state.toLocation!="" )?(  <TouchableOpacity onPress={this.onswap.bind(this)} style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#000000', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
                          <Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
                          {/* position: 'absolute',left:10,top:6 */}
                        </TouchableOpacity>):( <View  style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#dcdcdc', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
                          <Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
                          {/* position: 'absolute',left:10,top:6 */}
                        </View>)}
            <View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
              
            </View>
            <View style={{flexDirection:'row'}} >
            <View style={{flexDirection:'row',flex:1}} >
           
            <View style={{flexDirection:'column',flex:0.8,}} >
            <DatePicker
                    style={{width: '100%', display: "flex",alignItems:'center',justifyContent:'center',width:"100%", zIndex:-1,marginVertical:'2%', borderColor: '#ffff',backgroundColor:'#ffff',height: 40,borderRadius:15,position:'relative',paddingHorizontal:10 ,borderWidth:0}}
                    date={this.state.fromdate}
                    mode="date"
                    placeholder="Shipment Date"
                    format="DD-MMM-YYYY"
                  showIcon={false}
                    // minDate={this.state.locationfromdate}
                   
                    confirmBtnText="Confirm"
                    cancelBtnText="Cancel"
                    customStyles={{
                      
                      dateInput: {
                        borderRadius: 4,
                        color: '#ff6666',
                        fontSize:10,
                        borderColor: '#ffff'
                      },
                      dateText: {
                      fontSize:13,
                      right:'10%'
                      },
                      placeholderText:{
                        color:'#000000',
                        fontFamily: 'Montserrat-Medium'
            
                      }
                      
                    }}
                    onDateChange={(date) => { this.setState({ fromdate: date }) }}
                  />
            </View>
            <View style={{flexDirection:'column',flex:0.3,alignItems:'center',justifyContent:'center'}} >
            <Image resizeMode="contain" source={require('../Images/menu_img/calendar.png')} style={{ height:30, width:25,zIndex:-1}} />
            </View> 
            
            </View>
             
          
            </View> 
            <View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
              
            </View>
            
            <View style={{flexDirection:'row',zIndex:-1}} >
            <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
            <Dropdown
     data={this.state.equipmentType1}
     dropdownOffset={{ top: 5 }}
     placeholder="Select Equipment"
     placeholderTextColor="#000"
     containerStyle={{
       borderRadius: 5,
       borderColor: 'transparent',
       borderWidth: 1,
       marginVertical: '1%',
       fontSize: 10,
       color: 'transparent',
       width: '95%',
       fontFamily: 'Montserrat-Medium',
       
       
     }}
     labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
     inputContainerStyle={{
       fontSize: 10,left:"20%",borderRadius:5,
       borderBottomColor: 'transparent', width: Platform.OS === 'ios' ?'80%' :'90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
     }}
     value={this.state.eqptype1}
     onChangeText={(eqptype1) => this.oneqp1({ eqptype1 })}
     label=''
   />
            
            </View>
            </View>
            <View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
              
              </View>
                    
            <View style={{flexDirection:'row',zIndex:-1}} >
            <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1,left:"35%"}} >
            <Autocomplete
                       data={this.state.Commodity}
                       valueExtractor={item => item}
                       minimumCharactersCount={0}
                       ref={(ref) => this.componentRefcommodity = ref}
                       inputContainerStyle={{
                           zIndex: -1,
                           flexDirection: "row",
                           flexWrap: "wrap",
                           alignItems: "center",
                           borderColor:"transparent",
                           width: "95%",
                            bottom:"2%",
                           justifyContent: "center",
                       }}
                       containerStyle={{ borderColor:"transparent",position: 'relative', alignItems: 'center', justifyContent: 'center', right:"35%" }}
                       // placeholder={this.state.placeholder_commodity}
                       placeholder="Commodity"
                       placeholderColor="#000"
                       handleSelectItem={(item, id) => this.onCommodityDetails(item)}
                       inputStyle={{borderColor:"transparent", fontFamily: 'Montserrat-Medium', fontSize: 13 }}
                   />
            
            </View>
            </View>
            <View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
              
              </View>
            
            <TouchableOpacity onPress={this.onsearch.bind(this)}  style={{
                  width: "80%",
                  height:50,
                  backgroundColor: '#112d51',
                 zIndex:-1,
                  borderWidth: 1,
                  borderColor: '#112d51',
                  borderRadius: 0,
                  marginVertical:10,
                  marginHorizontal: "10%", bottom:10,justifyContent:'center',alignItems:'center'
                }}
                >
                  
               {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_en[0].search}</Text>) :
                                      (<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_ch[0].search}</Text>)}
                  {/* <Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>SEARCH</Text> */}
                </TouchableOpacity>
                    </View>
                    </View>
                    </Tab>
   <Tab heading='CONTRACT' style={styles.tabBody} tabStyle={{ backgroundColor: '#112d51', }} textStyle={{ color: '#ffff', fontSize: 13,fontFamily:'Montserrat-Medium' }} activeTabStyle={{ backgroundColor: '#112d51' }} activeTextStyle={{ color: '#ffff', fontSize:15,fontFamily:'Montserrat-Bold'}} >
   
                   <View style={{backgroundColor:'#112d51'}} >
                          <View style={{backgroundColor:'#ffff',marginHorizontal:'5%',marginVertical:'5%',borderRadius:10}} >
                        
               <View style={{flexDirection:'row',zIndex:2}} >

<View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />
</View>
{this.state.swapvisibility!=true? (  <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Autocomplete
            data={portdatas}
            valueExtractor={item => item}
            minimumCharactersCount={0}
            inputContainerStyle={{
              zIndex: -1,
              flexDirection: "row",
              flexWrap: "wrap",
              alignItems: "center",
              fontFamily: 'Montserrat-Medium', fontSize: 15,
              // paddingHorizontal: 10,
              // paddingBottom: 10,
              width: "100%",
              borderColor: '#000000',
              justifyContent: "center",
            }}
            containerStyle={{ position: 'absolute', top:60,alignItems:'center',justifyContent:'center',right:50}}
            placeholder={this.state.placeholder_from}
            placeholderColor='#000000'
            handleSelectItem={(item, id) => this.onfromLocation1(item)}
            inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
            initialValue={this.state.fromLocation1}
         
          />


</View>):( <View style={{flexDirection:'column',flex:0.9,height:45}} >

<TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
          <Text style={{top:15,left:20}}>{this.state.fromLocation1}</Text>
</TouchableOpacity>

</View>)}
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
  
  </View>
<View style={{flexDirection:'row',zIndex:1}} >

<View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:-1}} >
           <Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />


</View>
{this.state.swapvisibility!=true? (   <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:-1}} >
<Autocomplete
            data={portdatas}
            valueExtractor={item => item}
            minimumCharactersCount={0}
            inputContainerStyle={{
              zIndex: -1,
              flexDirection: "row",
              flexWrap: "wrap",
              alignItems: "center",
              fontFamily: 'Montserrat-Medium', fontSize: 15,
              // paddingHorizontal: 10,
              // paddingBottom: 10,
              width: "100%",
              borderColor: '#000000',
              justifyContent: "center",
            }}
            containerStyle={{ position: 'absolute', top:60,alignItems:'center',justifyContent:'center',right:50}}
            placeholder={this.state.placeholder_to}
            placeholderColor='#000000'
            handleSelectItem={(item, id) => this.ontoLocation1(item)}
            inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
            initialValue={this.state.toLocation1}
         
          />




</View>):(<View style={{flexDirection:'column',flex:0.9,height:45}} >
<TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
          <Text style={{top:15,left:20}}>{this.state.toLocation1}</Text>
</TouchableOpacity>

</View>)}
</View>
{(this.state.fromLocation1!=""&&this.state.toLocation1!="" )?(  <TouchableOpacity onPress={this.onswap1.bind(this)} style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#000000', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
              <Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
              {/* position: 'absolute',left:10,top:6 */}
            </TouchableOpacity>):( <View  style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#dcdcdc', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
              <Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
              {/* position: 'absolute',left:10,top:6 */}
            </View>)}
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
  
</View>
<View style={{flexDirection:'row'}} >
<View style={{flexDirection:'row',flex:1}} >

<View style={{flexDirection:'column',flex:0.8,}} >
<DatePicker
        style={{width: '100%', display: "flex",alignItems:'center',justifyContent:'center',width:"100%", zIndex:-1,marginVertical:'2%', borderColor: '#ffff',backgroundColor:'#ffff',height: 40,borderRadius:15,position:'relative',paddingHorizontal:10 ,borderWidth:0}}
        date={this.state.fromdate1}
        mode="date"
        placeholder="Shipment Date"
        format="DD-MMM-YYYY"
      showIcon={false}
        // minDate={this.state.locationfromdate}
       
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          
          dateInput: {
            borderRadius: 4,
            color: '#ff6666',
            fontSize:10,
            borderColor: '#ffff'
          },
          dateText: {
          fontSize:13,
          right:'10%'
          },
          placeholderText:{
            color:'#000000',
            fontFamily: 'Montserrat-Medium'

          }
          
        }}
        onDateChange={(date) => { this.setState({ fromdate1: date }) }}
      />
</View>
<View style={{flexDirection:'column',flex:0.3,alignItems:'center',justifyContent:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/calendar.png')} style={{ height:30, width:25,zIndex:-1}} />
</View> 

</View>
 

</View> 
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
  
</View>

<View style={{flexDirection:'row',zIndex:-1}} >
<View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
placeholder="Select Equipment"
placeholderTextColor="#000"
containerStyle={{
borderRadius: 5,
borderColor: 'transparent',
borderWidth: 1,
marginVertical: '1%',
fontSize: 10,
color: 'transparent',
width: '95%',
fontFamily: 'Montserrat-Medium',


}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10,left:"20%",borderRadius:5,
borderBottomColor: 'transparent', width: Platform.OS === 'ios' ?'80%' :'90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
}}
value={this.state.eqptype2}
onChangeText={(eqptype2) => this.oneqp2({ eqptype2 })}
label=''
/>

</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
  
  </View>
        
<View style={{flexDirection:'row',zIndex:-1}} >
<View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1,left:"35%"}} >
<Autocomplete
           data={this.state.Commodity}
           valueExtractor={item => item}
           minimumCharactersCount={0}
           ref={(ref) => this.componentRefcommodity = ref}
           inputContainerStyle={{
               zIndex: -1,
               flexDirection: "row",
               flexWrap: "wrap",
               alignItems: "center",
               borderColor:"transparent",
               width: "95%",
                bottom:"2%",
               justifyContent: "center",
           }}
           containerStyle={{ borderColor:"transparent",position: 'relative', alignItems: 'center', justifyContent: 'center', right:"35%" }}
           // placeholder={this.state.placeholder_commodity}
           placeholder="Commodity"
           placeholderColor="#000"
           handleSelectItem={(item, id) => this.onCommodityDetails1(item)}
           inputStyle={{borderColor:"transparent", fontFamily: 'Montserrat-Medium', fontSize: 13 }}
       />

</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
  
  </View>

<TouchableOpacity onPress={this.onsearch1.bind(this)} style={{
      width: "80%",
      height:50,
      backgroundColor: '#112d51',
     zIndex:-1,
      borderWidth: 1,
      borderColor: '#112d51',
      borderRadius: 0,
      marginVertical:10,
      marginHorizontal: "10%", bottom:10,justifyContent:'center',alignItems:'center'
    }}
    >
      
   {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_en[0].search}</Text>) :
                          (<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_ch[0].search}</Text>)}
      {/* <Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>SEARCH</Text> */}
    </TouchableOpacity>
        </View>
        </View>
        </Tab>
      
   <Tab heading='SURCHARGE' style={styles.tabBody} tabStyle={{ backgroundColor: '#112d51', }} textStyle={{ color: '#ffff', fontSize: 13,fontFamily:'Montserrat-Medium' }} activeTabStyle={{ backgroundColor: '#112d51' }} activeTextStyle={{ color: '#ffff', fontSize:15,fontFamily:'Montserrat-Bold'}} >
   
                   <View style={{backgroundColor:'#112d51'}} >
                          <View style={{backgroundColor:'#ffff',marginHorizontal:'5%',marginVertical:'5%',borderRadius:10}} >
                        
               <View style={{flexDirection:'row',zIndex:2}} >

<View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />
</View>
{this.state.swapvisibility!=true? (  <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Autocomplete
            data={portdatas}
            valueExtractor={item => item}
            minimumCharactersCount={0}
            inputContainerStyle={{
              zIndex: -1,
              flexDirection: "row",
              flexWrap: "wrap",
              alignItems: "center",
              fontFamily: 'Montserrat-Medium', fontSize: 15,
              // paddingHorizontal: 10,
              // paddingBottom: 10,
              width: "100%",
              borderColor: '#000000',
              justifyContent: "center",
            }}
            containerStyle={{ position: 'absolute', top:60,alignItems:'center',justifyContent:'center',right:50}}
            placeholder={this.state.placeholder_from}
            placeholderColor='#000000'
            handleSelectItem={(item, id) => this.onfromLocation2(item)}
            inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
            initialValue={this.state.fromLocation2}
         
          />


</View>):( <View style={{flexDirection:'column',flex:0.9,height:45}} >

<TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
          <Text style={{top:15,left:20}}>{this.state.fromLocation2}</Text>
</TouchableOpacity>

</View>)}
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
  
  </View>
<View style={{flexDirection:'row',zIndex:1}} >

<View style={{flexDirection:'column',flex:0.1,alignItems:'center',justifyContent:'center',zIndex:-1}} >
           <Image resizeMode="contain" source={require('../Images/Ecom/Location.png')} style={{ height: 20, width: 20, zIndex: -1 ,tintColor:'#112d51'}} />


</View>
{this.state.swapvisibility!=true? (   <View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:-1}} >
<Autocomplete
            data={portdatas}
            valueExtractor={item => item}
            minimumCharactersCount={0}
            inputContainerStyle={{
              zIndex: -1,
              flexDirection: "row",
              flexWrap: "wrap",
              alignItems: "center",
              fontFamily: 'Montserrat-Medium', fontSize: 15,
              // paddingHorizontal: 10,
              // paddingBottom: 10,
              width: "100%",
              borderColor: '#000000',
              justifyContent: "center",
            }}
            containerStyle={{ position: 'absolute', top:60,alignItems:'center',justifyContent:'center',right:50}}
            placeholder={this.state.placeholder_to}
            placeholderColor='#000000'
            handleSelectItem={(item, id) => this.ontoLocation2(item)}
            inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13 ,borderColor:'#ffff',right:10}}
            initialValue={this.state.toLocation2}
         
          />




</View>):(<View style={{flexDirection:'column',flex:0.9,height:45}} >
<TouchableOpacity onPress={this.onautocompletechange.bind(this)}>
          <Text style={{top:15,left:20}}>{this.state.toLocation2}</Text>
</TouchableOpacity>

</View>)}
</View>
{(this.state.fromLocation2!=""&&this.state.toLocation2!="" )?(  <TouchableOpacity onPress={this.onswap2.bind(this)} style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#000000', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
              <Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
              {/* position: 'absolute',left:10,top:6 */}
            </TouchableOpacity>):( <View  style={{ position: 'absolute', height: "13%", width: "13%", backgroundColor: '#dcdcdc', borderRadius: 100, zIndex: -1, left: "80%" ,top:30,justifyContent:'center',alignItems:'center'}} >
              <Image resizeMode="contain" source={require('../Images/menu_img/swap1.png')} style={{ height: "70%", width: "50%", tintColor: "#ffff",}} />
              {/* position: 'absolute',left:10,top:6 */}
            </View>)}
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
  
</View>
<View style={{flexDirection:'row'}} >
<View style={{flexDirection:'row',flex:1}} >

<View style={{flexDirection:'column',flex:0.8,}} >
<DatePicker
        style={{width: '100%', display: "flex",alignItems:'center',justifyContent:'center',width:"100%", zIndex:-1,marginVertical:'2%', borderColor: '#ffff',backgroundColor:'#ffff',height: 40,borderRadius:15,position:'relative',paddingHorizontal:10 ,borderWidth:0}}
        date={this.state.fromdate2}
        mode="date"
        placeholder="Shipment Date"
        format="DD-MMM-YYYY"
      showIcon={false}
        // minDate={this.state.locationfromdate}
       
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
          
          dateInput: {
            borderRadius: 4,
            color: '#ff6666',
            fontSize:10,
            borderColor: '#ffff'
          },
          dateText: {
          fontSize:13,
          right:'10%'
          },
          placeholderText:{
            color:'#000000',
            fontFamily: 'Montserrat-Medium'

          }
          
        }}
        onDateChange={(date) => { this.setState({ fromdate2: date }) }}
      />
</View>
<View style={{flexDirection:'column',flex:0.3,alignItems:'center',justifyContent:'center'}} >
<Image resizeMode="contain" source={require('../Images/menu_img/calendar.png')} style={{ height:30, width:25,zIndex:-1}} />
</View> 

</View>
 

</View> 
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
  
</View>

<View style={{flexDirection:'row',zIndex:-1}} >
<View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1}} >
<Dropdown
data={this.state.equipmentType1}
dropdownOffset={{ top: 5 }}
placeholder="Select Equipment"
placeholderTextColor="#000"
containerStyle={{
borderRadius: 5,
borderColor: 'transparent',
borderWidth: 1,
marginVertical: '1%',
fontSize: 10,
color: 'transparent',
width: '95%',
fontFamily: 'Montserrat-Medium',


}}
labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
inputContainerStyle={{
fontSize: 10,left:"20%",borderRadius:5,
borderBottomColor: 'transparent', width: Platform.OS === 'ios' ?'80%' :'90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
}}
value={this.state.eqptype3}
onChangeText={(eqptype3) => this.oneqp3({ eqptype3 })}
label=''
/>

</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
  
  </View>
        
<View style={{flexDirection:'row',zIndex:-1}} >
<View style={{flexDirection:'column',flex:0.9,alignItems:'center',justifyContent:'center',zIndex:1,left:"35%"}} >
<Autocomplete
           data={this.state.Commodity}
           valueExtractor={item => item}
           minimumCharactersCount={0}
           ref={(ref) => this.componentRefcommodity = ref}
           inputContainerStyle={{
               zIndex: -1,
               flexDirection: "row",
               flexWrap: "wrap",
               alignItems: "center",
               borderColor:"transparent",
               width: "95%",
                bottom:"2%",
               justifyContent: "center",
           }}
           containerStyle={{ borderColor:"transparent",position: 'relative', alignItems: 'center', justifyContent: 'center', right:"35%" }}
           // placeholder={this.state.placeholder_commodity}
           placeholder="Commodity"
           placeholderColor="#000"
           handleSelectItem={(item, id) => this.onCommodityDetails2(item)}
           inputStyle={{borderColor:"transparent", fontFamily: 'Montserrat-Medium', fontSize: 13 }}
       />

</View>
</View>
<View style={{zIndex:-1,borderBottomWidth:1,borderBottomColor:'#dcdcdc',marginBottom:10}}>
  
  </View>

<TouchableOpacity onPress={this.onsearch2.bind(this)} style={{
      width: "80%",
      height:50,
      backgroundColor: '#112d51',
     zIndex:-1,
      borderWidth: 1,
      borderColor: '#112d51',
      borderRadius: 0,
      marginVertical:10,
      marginHorizontal: "10%", bottom:10,justifyContent:'center',alignItems:'center'
    }}
    >
      
   {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_en[0].search}</Text>) :
                          (<Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>{lan_ch[0].search}</Text>)}
      {/* <Text style={{ fontSize: 18, color: '#fff', fontFamily: 'Montserrat-Bold', }}>SEARCH</Text> */}
    </TouchableOpacity>
        </View>
        </View>
        </Tab>
                    </Tabs>
                   
                  
   
  
  
  
     
{/* <View style={{ flex: 0.1, flexDirection: 'column' }}>
<PageFooter navigation={this.props.navigation}  page={'schedule'}> 
                      
                      </PageFooter>
                </View> */}

               
              
</View>

     
  )
}
}
       
       
       
export default Ecom_tariff
const styles = StyleSheet.create({
  searchInput: {
    borderColor: '#999',
    borderWidth: 1,
    height: 40,
    width: 400,
    right: 100,
    borderRadius: 4,
    paddingHorizontal: 10,
    backgroundColor: '#fff'
  },
  labelText: {
    fontSize: Platform.OS === 'ios' ? 18 : 18,
    color: '#112d51',
    top: 75,
    left: 40
  },
  search_btn: {
    backgroundColor: '#A80000',
    height: 40,
    width: 40,
    left: 300,
    borderWidth: 1,
    borderColor: '#1E61CC',
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: 10
  },
  tabBody: {
    // marginTop:"2%",
    // marginVertical:'5%',
    
    backgroundColor: 'transparent',
   
},
  inputContainer: {
    position: 'absolute',
    borderBottomColor: '#112d51',
    borderTopColor: '#112d51',
    backgroundColor: '#fff',
    borderRadius: 10,
    borderBottomWidth: 1,
    borderTopWidth: 1,
    borderRightWidth: 1,
    borderLeftWidth: 1,
    borderRightColor: '#112d51',
    borderLeftColor: '#112d51',
    width: 480,
    height: 120,
    top: 70,
    left: 30,
    flexDirection: 'row',
    alignItems: 'center',

  },
  dropdownField: {

    borderWidth: 1,
    borderColor: '#ffffff',
    borderRadius: 4,
    paddingLeft: 10,
    backgroundColor: '#fff',
    height: 40,
    width: 200,

    marginHorizontal: 10,

  },
  fieldSet: {

    position: 'absolute',
    paddingHorizontal: 15,
    paddingVertical: 15,
    borderRadius: 4,
    borderWidth: 1,
    marginTop: 10,
    height: 180,
    width: 450,
    left: 30


  },
  container_box: {
    flex: 0.5,
    flexDirection: 'column',
    width: '100%',
    borderColor: '#aaa',
    borderWidth: 1,
    paddingHorizontal: 15,
    paddingVertical: 10,
    marginBottom: 15,
    top: 350,
    backgroundColor: '#fff',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 3,
    height: 175
  },
  container: {
    
    width: '100%',
    backgroundColor: "#4573c3",
 
  },
  legend: {
    position: 'absolute',
    top: -13,
    left: 10,
    fontWeight: 'bold',
    color: '#ffff',
    borderRadius: 10,
    backgroundColor: '#4573c3',
    paddingHorizontal: 6,
    fontSize: Platform.OS === 'ios' ? 18 : 18
  },
})