Untitled

mail@pastecode.io avatar
unknown
plain_text
3 years ago
129 kB
2
Indexable
Never
import React, { Component } from 'react';
import {
  Text, TouchableOpacity, Image, View, StyleSheet, TextInput, KeyboardAvoidingView,
  FlatList, ScrollView, Dimensions, Modal, Alert, AsyncStorage, Clipboard
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { Autocomplete, withKeyboardAwareScrollView } from "react-native-dropdown-autocomplete";
import { Header, Left, Right, Body, Footer, Container } from 'native-base';
import LinearGradient from 'react-native-linear-gradient';
import { Dropdown } from 'react-native-material-dropdown';
import Icon1 from 'react-native-vector-icons/Ionicons';
import { lan_en, lan_ch } from '../Component/Language';
import moment from 'moment';
import Loader from '../Component/Loader';
import Service from '../Service/Service';
import Toast from 'react-native-simple-toast'

import PageFooter from './PageFooter';
const sv = new Service();
const Route = [{ from: 'USPEF', to: 'INDEL', route: 'road' }, { from: 'INDEL', to: 'IMDSD', route: 'ship', service: 'SVC' },
{ from: 'IMDSD', to: 'SGSIN', route: 'rail' }]
const portdatas = [];
var pla1 = "";
var pld1 = "";

var a;
var schedule3;
class Booking extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      custname: '',
      polarray: [],
      customerdetails: [],
      customer: [],
      equipmentType: [],
      equipment: [],
      isLoading: false,
      isVisible: false,
      orgin: '',
      delivery: '',
      equipmentType1: [],
      argparty: '',
      eqptype1: 'Type',
      eqptype2: 'Type',
      eqptype3: 'Type',
      pol: '',
      pod: '',
      pla: '',
      pld: '',
      qty1: '1',
      qty2: '1',
      qty3: '1',
      language: '',
      generatebookno: '',
      statuslabel: '',
      recentbooknos: [],
      recentbooknos1: [],
      customercode: '',
      customername: '',
      custview: 'N',
      cust: '',
      agency_code: '',
      agency_loginname: '',
      agency_country: '',
      rateno: '',
      itemno: '0',
      plarate1: '',
      pldrate1: '',
      tableData: [],
      disable: false,
      ratecust: '',
      agrcust: '',
      disablerates: true,
      apcust: '',
      accessmenu: [],
      restoredArray: [],
      raterule: '',
      ratetype: '',
      routearray: [],
      portpair: [],
      extradata: false,
      ratesscreen: 'N',
      ratesscreen1: 'N',
      ratesscreen2: 'N',
      route_isVisible: false,
      route_fromdate: '',
      route_todate: '',
      etd1: '',
      eta1: '',
      nor: '',
      nor1: '',
      nor2: '',
      ratetype3: '',
      ratetype1: '',
      ratetype2: '',
      itemno1: '',
      itemno2: '',
      itemno3: '',
      raterule1: '',
      raterule2: '',
      raterule3: '',
      soc1: '',
      soc2: '',
      soc3: '',
      dg1: '',
      dg2: '',
      dg3: '',
      oog1: '',
      oog2: '',
      oog3: '',
      rateflag: "N",
      resetview: 'Y',

    }
  }

  onPreviouspage() {
    this.props.navigation.navigate('Landing');
  }


  componentDidMount() {
    AsyncStorage.getItem('lang').then((value) => {
      console.log("----language---", value)
      if (value == 'lang_ch') {
        this.setState({ language: "lang_ch" })
      } else {
        this.setState({ language: "lang_en" })
      }

    })

    AsyncStorage.getItem("screenmenu_cache").then((value) => {

      console.log("-----------  access screens 1----------", value)



      this.setState({ restoredArray: JSON.parse(value) })

      for (let i = 0; i < this.state.restoredArray.length; i++) {

        this.state.accessmenu.push(this.state.restoredArray[i].module_name)

      }

      console.log("-----------  access screens 2----------", this.state.restoredArray)

      console.log("-----------  access screens 3----------", this.state.accessmenu)

      if (this.state.accessmenu.includes("Booking")) {



      } else {

        this.props.navigation.navigate('Info', { header: 'Booking', pagename: 'Landing', comments: 'accessdenied' });

      }



    })
    AsyncStorage.getItem('agency_countrycode').then(value => {
      // console.log('value---------rrrrrr', value);
      this.setState({ agency_country: value })
    })
    AsyncStorage.getItem('agency_loginname').then(value => {
      // console.log('value---------rrrrrr', value);
      this.setState({ agency_loginname: value })
    })
    AsyncStorage.getItem('agency_code').then(value => {
      // console.log('value---------rrrrrr', value);
      this.setState({ agency_code: value })
    })
    AsyncStorage.getItem('agency_usertype').then(value => {
      // console.log('agency_usertype', value);
      this.setState({ agencytype: value })
      if ("a" + this.state.agencytype.trim() + "b" == 'aLb') {
        this.props.navigation.navigate('Info', { header: 'Booking', pagename: 'Landing' });
      } else {

        AsyncStorage.getItem('mycust_bb').then(value => {
          // console.log('value---------rrrrrr schedule sub ', this.props.navigation.state.params.rateno,this.props.navigation.state.params.eqptype);
          this.setState({ rateflag: value });
          if (value == 'S') {
            AsyncStorage.getItem('rateno').then(value => {
              this.setState({ "rateno": value })
            })
            AsyncStorage.getItem('eqptype').then(value => {
              console.log("Value...", value)
              this.setState({ "eqptype1": value })
            })
            this.setState({ custview: 'S' })
            AsyncStorage.getItem('mycustomer').then(value => {
              // console.log('value---------rrrrrr', value); 
              this.setState({ argparty: value })
              this.setState({ cust: value })
              var s = value
              var a = s.substring(0, s.indexOf("["));
              s = s.substring(s.indexOf("[") + 1);
              s = s.substring(0, s.indexOf("]"));
              // console.log("**U***",s)
              // console.log("**U***",a)

              this.setState({ customercode: s })
              this.setState({ customername: a })
              this.setState({ disablerates: false })
            })
          }
          else {
            this.setState({ "rateno": '' })
            this.setState({ "eqptype1": 'Type', "eqptype2": 'Type', "eqptype3": 'Type' })
          }

        })
        AsyncStorage.getItem('RecentBookingNO1').then((value) => {
          if (value != null) {
            // console.log("recent book", value)
            var myArray = value.split('+');
            for (let i = 0; i < myArray.length; i++) {
              if (myArray[i] != null)
                this.state.recentbooknos.push({ "rr": myArray[i] });
            }
            // console.log("recent book", this.state.recentbooknos)
            this.setState({ recentbooknos1: this.state.recentbooknos })
          }
        })

        if (this.props.navigation.state.params.previousscreen == "agency") {
          // this.setState({ isVisible: !this.state.isVisible })
          this.props.navigation.navigate('Schedule');
          AsyncStorage.setItem('backnavigate_booking', 'S');
        }
        else if (this.props.navigation.state.params.previousscreen == "schedule") {

          console.log("inside booking routelist >>>>", this.props.navigation.state.params.routelist);
          AsyncStorage.setItem('etd', this.props.navigation.state.params.routelist.etd);
          a = this.props.navigation.state.params.routelist.portpair.length - 1;

          pla1 = this.props.navigation.state.params.routelist.portpair[0].pol_name + "(" + this.props.navigation.state.params.routelist.portpair[0].pol + ")";
          pld1 = this.props.navigation.state.params.routelist.portpair[a].pod_name + "(" + this.props.navigation.state.params.routelist.portpair[a].pod + ")";
          console.log("inside the logg.....", pla1, pld1, a)
          this.setState({ pla: pla1 });
          this.setState({ pld: pld1 });
          this.setState({ pol: pla1 });
          this.setState({ pod: pld1 });
          this.setState({ etd1: this.props.navigation.state.params.routelist.etd })
          this.setState({ eta1: this.props.navigation.state.params.routelist.eta })
          schedule3 = this.state.pod;
          var a = schedule3.substring(0, schedule3.indexOf("("));
          schedule3 = schedule3.substring(schedule3.indexOf("(") + 1);
          schedule3 = schedule3.substring(0, schedule3.indexOf(")"));
          console.log("s3333.....", schedule3);

          this.setState({ routearray: this.props.navigation.state.params.routelist.portpair })
          console.log("inside the routerarray...", this.state.routearray);
          this.setState({ extradata: !this.state.extradata });
          console.log("routing details----", this.props.navigation.state.params.routelist.portpair[0].pol_name + "(" + this.props.navigation.state.params.routelist.portpair[0].pol + ")");
          console.log("routing details----", this.props.navigation.state.params.routelist.portpair[0].pod_name + "(" + this.props.navigation.state.params.routelist.portpair[0].pod + ")");

          this.setState({ isLoading: true });
          sv.getports(this.func3.bind(this));

          // sv.getcustomerdetails(this.getcustomerdetailsResponse.bind(this));
          sv.getapcustomers(this.getcustomerdetailsResponse.bind(this), this.state.agency_country);
          sv.get_equipmentType(this.getequipmentTypeResponse.bind(this));
          var b = this.props.navigation.state.params.routelist.portpair.length - 1;
          sv.get_defaultRoute1(this.defaultRoutingResponse.bind(this), this.props.navigation.state.params.routelist.portpair[0].pol, this.props.navigation.state.params.routelist.portpair[b].pod, this.props.navigation.state.params.routelist.service_code);
          this.setState({ isLoading: false });

          this.setState({ "ratesscreen": 'N', "ratesscreen1": 'N', "ratesscreen2": 'N' })
        }
      }

    })


    AsyncStorage.getItem('mycust_rate').then(value => {
      console.log("inside the customer >>>>", value);
      if (value == 'S') {
        this.setState({ isLoading: true });
        console.log("=====" + "--------" + this.props.navigation.state.params.ap_cust)
        AsyncStorage.getItem('nor').then(value => {
          if (value == null) {
            this.setState({ "nor": '' })
          } else {
            this.setState({ "nor": value })
            console.log("inside the log", this.state.nor);
          }
        })

        AsyncStorage.getItem('nor1').then(value => {
          if (value == null) {
            this.setState({ "nor1": '' })
          } else {
            this.setState({ "nor1": value })
            console.log("inside the log", this.state.nor);
          }
        })

        AsyncStorage.getItem('nor2').then(value => {
          if (value == null) {
            this.setState({ "nor2": '' })
          } else {
            this.setState({ "nor2": value })
            console.log("inside the log", this.state.nor);
          }
        })

        AsyncStorage.getItem('ratetype3').then(value => {
          if (value == null) {
            this.setState({ "ratetype3": '' })
          } else {
            this.setState({ ratetype3: value })
            console.log("inside the ratetype", this.state.ratetype3);
          }
        })

        AsyncStorage.getItem('ratetype1').then(value => {
          if (value == null) {
            this.setState({ "ratetype1": '' })
          } else {
            this.setState({ ratetype1: value })
            console.log("inside the ratetype1", this.state.ratetype1);
          }
        })

        AsyncStorage.getItem('ratetype2').then(value => {
          if (value == null) {
            this.setState({ "ratetype2": '' })
          } else {
            this.setState({ ratetype2: value })
            console.log("inside the ratetype2", this.state.ratetype2);
          }
        })


        AsyncStorage.getItem('itemno1').then(value => {
          if (value == null) {
            this.setState({ "itemno1": '' })
          } else {
            this.setState({ itemno1: value })
            console.log("inside the itemno1", this.state.itemno1);
          }
        })

        AsyncStorage.getItem('itemno2').then(value => {
          if (value == null) {
            this.setState({ "itemno2": '' })
          } else {
            this.setState({ itemno2: value })
            console.log("inside the itemno2", this.state.itemno2);
          }
        })

        AsyncStorage.getItem('itemno3').then(value => {
          if (value == null) {
            this.setState({ "itemno3": '' })
          } else {
            this.setState({ itemno3: value })
            console.log("inside the itemno3", this.state.itemno3);
          }
        })

        AsyncStorage.getItem('raterule1').then(value => {
          if (value == null) {
            this.setState({ "raterule1": '' })
          } else {
            this.setState({ raterule1: value })
            console.log("inside the raterule1", this.state.raterule1);
          }
        })
        AsyncStorage.getItem('raterule2').then(value => {
          if (value == null) {
            this.setState({ "raterule2": '' })
          } else {
            this.setState({ raterule2: value })
            console.log("inside the raterule2", this.state.raterule2);
          }
        })
        AsyncStorage.getItem('raterule3').then(value => {
          if (value == null) {
            this.setState({ "raterule3": '' })
          } else {
            this.setState({ raterule3: value })
            console.log("inside the raterule3", this.state.raterule3);
          }
        })
        AsyncStorage.getItem('soc1').then(value => {
          if (value == null) {
            this.setState({ "soc1": '' })
          } else {
            this.setState({ soc1: value })
            console.log("inside the soc1", this.state.soc1);
          }
        })
        AsyncStorage.getItem('soc2').then(value => {
          if (value == null) {
            this.setState({ "soc2": '' })
          } else {
            this.setState({ soc2: value })
            console.log("inside the soc2", this.state.soc2);
          }
        })
        AsyncStorage.getItem('soc3').then(value => {
          if (value == null) {
            this.setState({ "soc3": '' })
          } else {
            this.setState({ soc3: value })
            console.log("inside the soc3", this.state.soc3);
          }
        })

        AsyncStorage.getItem('dg1').then(value => {
          if (value == null) {
            this.setState({ "dg1": '' })
          } else {
            this.setState({ dg1: value })
            console.log("inside the soc3", this.state.dg1);
          }
        })

        AsyncStorage.getItem('dg2').then(value => {
          if (value == null) {
            this.setState({ "dg2": '' })
          } else {
            this.setState({ dg2: value })
            console.log("inside the dg2", this.state.dg2);
          }
        })

        AsyncStorage.getItem('dg3').then(value => {
          if (value == null) {
            this.setState({ "dg3": '' })
          } else {
            this.setState({ dg3: value })
            console.log("inside the dg3", this.state.dg3);
          }
        })

        AsyncStorage.getItem('oog1').then(value => {
          if (value == null) {
            this.setState({ "oog1": '' })
          } else {
            this.setState({ oog1: value })
            console.log("inside the oog1", this.state.oog1);
          }
        })

        AsyncStorage.getItem('oog2').then(value => {
          if (value == null) {
            this.setState({ "oog2": '' })
          } else {
            this.setState({ oog2: value })
            console.log("inside the oog2", this.state.oog2);
          }
        })

        AsyncStorage.getItem('oog3').then(value => {
          if (value == null) {
            this.setState({ "oog3": '' })
          } else {
            this.setState({ oog3: value })
            console.log("inside the oog3", this.state.oog3);
          }
        })



        AsyncStorage.getItem('rateno').then(value => {
          if (value == null) {

            console.log("inull value rateno...", value);
            this.setState({ "ratesscreen": 'N' })
            this.setState({ "rateno": '' })
          } else {
            this.setState({ "ratesscreen": 'Y' })
            this.setState({ "rateno": value })
          }
        })
        AsyncStorage.getItem('rateno1').then(value => {
          if (value == null) {
            console.log("inull value rateno1...", value);
            this.setState({ "ratesscreen1": 'N' })
            this.setState({ "rateno1": '' })
          } else {
            this.setState({ "ratesscreen1": 'Y' })
            this.setState({ "rateno1": value })
          }
        })
        AsyncStorage.getItem('rateno2').then(value => {
          if (value == null) {
            console.log("inull value rateno2...", value);
            this.setState({ "ratesscreen2": 'N' })
            this.setState({ "rateno2": '' })
          } else {
            this.setState({ "ratesscreen2": 'Y' })
            this.setState({ "rateno2": value })
          }
        })
        AsyncStorage.getItem('eqptype').then(value => {
          console.log("Value...eqptype", value)
          if (value == null || value == "Type") {
            this.setState({ "ratesscreen": 'N' })
            this.setState({ "eqptype1": 'Type' })
          } else {
            this.setState({ "ratesscreen": 'Y' })
            this.setState({ "eqptype1": value })
          }

        })
        AsyncStorage.getItem('eqptype1').then(value => {
          console.log("Value...eqptype1", value)
          if (value == null || value == "Type") {
            this.setState({ "ratesscreen1": 'N' })
            this.setState({ "eqptype2": 'Type' })
          } else {
            this.setState({ "ratesscreen1": 'Y' })
            this.setState({ "eqptype2": value })
          }
        })
        AsyncStorage.getItem('eqptype2').then(value => {
          console.log("eqptype2 Value...", value)
          if (value == null || value == "Type") {
            this.setState({ "ratesscreen2": 'N' })
            this.setState({ "eqptype3": 'Type' })
          } else {
            this.setState({ "ratesscreen2": 'Y' })
            this.setState({ "eqptype3": value })
          }
        })
        AsyncStorage.getItem('ratetype').then(value => {
          console.log("ratetype...", value)
          if (value == null) {
            this.setState({ "ratetype": '' })
          } else {
            this.setState({ "ratetype": value })
          }
        })
        AsyncStorage.getItem('raterule').then(value => {
          console.log("raterule...", value)
          if (value == null) {
            this.setState({ "raterule": '' })
          } else {
            this.setState({ "raterule": value })
          }
        })
        this.setState({ isLoading: false });
      }
      else {
        this.setState({ "rateno": '' })
        this.setState({ "rateno1": '' })
        this.setState({ "rateno2": '' })
        this.setState({ "eqptype1": 'Type' })
        this.setState({ "eqptype2": 'Type' })
        this.setState({ "eqptype3": 'Type' })
      }
    })

    // AsyncStorage.getItem('agrcust').then(value => {
    //   this.setState({"agrcust":value})
    //   console.log("inside the agr customer ...",this.state.agrcust);
    //   // console.log("----customer", item)
    //     this.setState({ argparty: this.state.agrcust })
    //     var s=this.state.agrcust;
    //     var a= s.substring(0,s.indexOf("("));
    //     s = s.substring(s.indexOf("(") + 1);
    //  s = s.substring(0, s.indexOf(")"));
    //  console.log("customer code ...",s)
    //  console.log("customer name ...",a)

    //  this.setState({customercode:s})
    //  this.setState({customername:a})
    // })
    AsyncStorage.getItem('itemno').then(value => {
      console.log("inside the item noo...", value);
      if (value == null) {
        console.log("inside the item noo...1", value);
        this.setState({ "itemno": '0' })
      }
      else {
        console.log("inside the item ", value);
        this.setState({ "itemno": value })
      }
    })

    AsyncStorage.getItem('mycust_rate').then(value => {
      console.log("inside the customer >>>>", value);
      if (value == 'S') {
        AsyncStorage.getItem('customer').then(value => {
          console.log('value---------rrrrrr', value);
          if (value != null) {
            this.setState({ custview: 'S' })
            this.setState({ argparty: value })
            this.setState({ cust: value })
            var s = value
            var a = s.substring(0, s.indexOf("["));
            s = s.substring(s.indexOf("[") + 1);
            s = s.substring(0, s.indexOf("]"));
            console.log("**U***", s)
            console.log("**U***", a)

            this.setState({ customercode: s })
            this.setState({ customername: a })
            sv.getapcustomer(this.apcustomer.bind(this), this.state.customercode);
            this.setState({ disablerates: false })
          }
          else {
            this.setState({ custview: 'N' })
          }
        })

      }
    })
    this.setState({ disable: false })
    console.log("inside the state...", this.state.rateno, this.state.itemno);
  }

  Ratespage() {
    this.setState({ isLoading: true });
    // AsyncStorage.setItem('customercode',this.state.customercode );
    AsyncStorage.setItem('customername', this.state.customername);

    var s = this.state.pla;
    var a = s.substring(0, s.indexOf("("));
    s = s.substring(s.indexOf("(") + 1);
    s = s.substring(0, s.indexOf(")"));
    this.setState({ "plarate1": s })

    var s1 = this.state.pld;
    console.log("isnide the code pla...", s1);
    var a = s1.substring(0, s1.indexOf("("));
    s1 = s1.substring(s1.indexOf("(") + 1);
    s1 = s1.substring(0, s1.indexOf(")"));
    this.setState({ "pldrate1": s1 })

    var s2 = this.state.pol;
    var a = s2.substring(0, s2.indexOf("("));
    s2 = s2.substring(s2.indexOf("(") + 1);
    s2 = s2.substring(0, s2.indexOf(")"));

    var s3 = this.state.pod;
    console.log("isnide the code pla...", s3);
    var a = s3.substring(0, s3.indexOf("("));
    s3 = s3.substring(s3.indexOf("(") + 1);
    s3 = s3.substring(0, s3.indexOf(")"));

    AsyncStorage.setItem('customercode', this.state.customercode);
    AsyncStorage.setItem('pla', s);
    AsyncStorage.setItem('pld', s1);
    AsyncStorage.setItem('pol', s2);
    AsyncStorage.setItem('pod', s3);

    sv.getquickbookingrates(this.func.bind(this), this.state.customercode, s, s1, s2, s3);
    // sv.getquickbookingrates(this.func.bind(this),this.state.customercode,this.state.pla,this.state.pld,this.state.pol,this.state.pod);
    console.log("inside the log...", this.state.customercode, s, s1, s2, s3)
    // this.props.navigation.navigate('Ratereferencesearch');
  }
  func(responseJson) {
    AsyncStorage.setItem('routeOrigin', this.state.routeOrigin);
    AsyncStorage.setItem('routeDelivery', this.state.routeDelivery);
    AsyncStorage.setItem('routeService', this.state.routeService);
    AsyncStorage.setItem('routepol', this.state.routepol);
    AsyncStorage.setItem('routepod', this.state.routepod);
    AsyncStorage.setItem('routepolterminal', this.state.routepolterminal);
    AsyncStorage.setItem('routepodterminal', this.state.routepodterminal);
    AsyncStorage.setItem('routecost', this.state.routecost);
    AsyncStorage.setItem('routetranstime', this.state.routetranstime);
    AsyncStorage.setItem('routeMode', this.state.routeMode);
    AsyncStorage.setItem('route_fromdate', this.state.route_fromdate);
    AsyncStorage.setItem('route_todate', this.state.route_todate);
    this.setState({
      tableData: responseJson.list,
    })
    console.log("inside the rates table data...", this.state.tableData)
    this.props.navigation.navigate('Ratereferencesearch', {
      tableData: responseJson.list,
    })
    this.setState({ isLoading: false });
    // for (let i = 0; i < this.state.tableData.length; i++) {

    //   // this.state.polarray1.push(this.state.polarray[i].portname);
    //   autorate.push(this.state.tableData[i].srrno );
    //   console.log("autorate ",autorate);
    // }
  }

  func3(response) {
    if (portdatas.length > 0 && portdatas != null) {
      console.log("already added ")

    } 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 + "(" + this.state.polarray[i].portcode + ")");
      }
      console.log("++++++++++++++++", portdatas)


    }
  }

  resetRouting() {
    if (this.state.defaultrouting.length != 0) {
      this.setState({ route_isVisible: !this.state.route_isVisible })
    } else {
      Toast.show("No Routes Available")
    }

  }
  defaultRoutingResponse(response,) {

    if (response == "Norecord") {
      console.log("=----get Default Route ---=", response)
      Alert.alert("No Routing Available")

      this.setState({ defaultrouting: [] })
      this.setState({ routeOrigin: "" })
      this.setState({ routeDelivery: "" })
      this.setState({ routeService: "" })
      this.setState({ routepol: "" })
      this.setState({ routepod: "" })
      this.setState({ routepolterminal: "" })
      this.setState({ routepodterminal: "" })
      this.setState({ routecost: "" })
      this.setState({ routetranstime: "" })
      this.setState({ routeMode: "" })

    } else {
      console.log("=----else ---=", response)
      this.setState({ defaultrouting: response })
      this.setState({ routeOrigin: response[0].origin })
      this.setState({ routeDelivery: response[0].delivery })
      this.setState({ routeService: response[0].mainsvc })
      this.setState({ routepol: response[0].blpol })
      this.setState({ routepod: response[0].blpod })
      this.setState({ routepolterminal: response[0].blpolter })
      this.setState({ routepodterminal: response[0].blpodter })
      this.setState({ routecost: response[0].cost20 })
      this.setState({ routetranstime: response[0].transittime })
      this.setState({ routeMode: response[0].mode })
      this.setState({ route_fromdate: response[0].fromdate })
      this.setState({ route_todate: response[0].todate })




      if (response != "Norecord") {
        console.log("=----seelsdms ---=", response)

      }


      this.setState({ surchargeview: true });
    }


    if (this.props.navigation.state.params.flag == 'rate') {
      AsyncStorage.getItem('routeOrigin').then(value => {
        if (value == null) {
          this.setState({ routeOrigin: '' })
        }
        else {
          this.setState({ routeOrigin: value })
        }
      })

      AsyncStorage.getItem('routeDelivery').then(value => {
        if (value == null) {
          this.setState({ routeDelivery: '' })
        }
        else {
          this.setState({ routeDelivery: value })
        }
      })

      AsyncStorage.getItem('routeService').then(value => {
        if (value == null) {
          this.setState({ routeService: '' })
        }
        else {
          this.setState({ routeService: value })
        }
      })

      AsyncStorage.getItem('routepol').then(value => {
        if (value == null) {
          this.setState({ routepol: '' })
        }
        else {
          this.setState({ routepol: value })
        }
      })

      AsyncStorage.getItem('routepod').then(value => {
        if (value == null) {
          this.setState({ routepod: '' })
        }
        else {
          this.setState({ routepod: value })
        }
      })

      AsyncStorage.getItem('routepolterminal').then(value => {
        if (value == null) {
          this.setState({ routepolterminal: '' })
        }
        else {
          this.setState({ routepolterminal: value })
        }
      })

      AsyncStorage.getItem('routepodterminal').then(value => {
        if (value == null) {
          this.setState({ routepodterminal: '' })
        }
        else {
          this.setState({ routepodterminal: value })
        }
      })

      AsyncStorage.getItem('routecost').then(value => {
        if (value == null) {
          this.setState({ routecost: '' })
        }
        else {
          this.setState({ routecost: value })
        }
      })

      AsyncStorage.getItem('routetranstime').then(value => {
        if (value == null) {
          this.setState({ routetranstime: '' })
        }
        else {
          this.setState({ routetranstime: value })
        }
      })

      AsyncStorage.getItem('routeMode').then(value => {
        if (value == null) {
          this.setState({ routeMode: '' })
        }
        else {
          this.setState({ routeMode: value })
        }
      })

      AsyncStorage.getItem('route_fromdate').then(value => {
        if (value == null) {
          this.setState({ route_fromdate: '' })
        }
        else {
          this.setState({ route_fromdate: value })
        }
      })

      AsyncStorage.getItem('route_todate').then(value => {
        if (value == null) {
          this.setState({ route_todate: '' })
        }
        else {
          this.setState({ route_todate: value })
        }
      })


    }

  }


  selectedRoute(origin, delivery, mainsvc, blpolter, blpodter, mode, cost20, transittime, blpol, blpod, fromdate, todate) {
    this.setState({ routeOrigin: origin })
    this.setState({ routeDelivery: delivery })
    this.setState({ routeService: mainsvc })
    this.setState({ routepol: blpol })
    this.setState({ routepod: blpod })
    this.setState({ routepolterminal: blpolter })
    this.setState({ routepodterminal: blpodter })
    this.setState({ routecost: cost20 })
    this.setState({ routetranstime: transittime })
    this.setState({ routeMode: mode })
    this.setState({ route_fromdate: fromdate })
    this.setState({ route_todate: todate })

    AsyncStorage.setItem('routeOrigin', origin);
    AsyncStorage.setItem('routeDelivery', delivery);
    AsyncStorage.setItem('routeService', mainsvc);
    AsyncStorage.setItem('routepol', blpol);
    AsyncStorage.setItem('routepod', blpod);
    AsyncStorage.setItem('routepolterminal', blpolter);
    AsyncStorage.setItem('routepodterminal', blpodter);
    AsyncStorage.setItem('routecost', cost20);
    AsyncStorage.setItem('routetranstime', transittime);
    AsyncStorage.setItem('routeMode', mode);
    AsyncStorage.setItem('route_fromdate', fromdate);
    AsyncStorage.setItem('route_todate', todate);



    this.setState({ route_isVisible: !this.state.route_isVisible })
    if (this.state.routeService != '') {
      this.setState({ surchargeview: false });
      // this.onSurchargeView();
    }

    // this.setState({ surchargeview: true});
    // this.setState({ default: 'N' })

  }
  getcustomerdetailsResponse(response) {
    console.log("----getcustomerdetailsResponse", response);
    this.setState({ customerdetails: response })
    for (let i = 0; i < this.state.customerdetails.length; i++) {
      this.state.customer.push(this.state.customerdetails[i].custname.trim() + "[" + this.state.customerdetails[i].custcode.trim() + "]")
    }

  }
  newbook() {
    this.props.navigation.navigate('Schedule');
  }
  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].equipdesc + ")" + this.state.equipmentType[i].equiptype)
    }
    temparray = this.state.equipment.map(item => ({
      value: item
    }))
    this.setState({ equipmentType1: temparray })
  }
  onschedule() {
    this.props.navigation.navigate('Schedule');
    AsyncStorage.setItem('Booking', 'S');

  }
  saveBooking() {
    console.log("inside the state save...", this.state.rateno, this.state.rateno1, this.state.rateno2, this.state.eqptype1, this.state.eqptype2, this.state.eqptype3);
    console.log("save method-----", this.state.argparty)
    if (this.state.argparty != '') {
      if (this.state.apcust == 'VAL' || this.state.apcust == 'POT' || this.state.apcust == 'VER') {

        if (this.state.pol != '') {
          if (this.state.pod != '') {
            if (this.state.pla != '') {
              if (this.state.pld != '') {
                if ((this.state.eqptype1 != 'Type' && this.state.eqptype1 != '') || (this.state.eqptype2 != 'Type' && this.state.eqptype2 != '') || (this.state.eqptype3 != 'Type' && this.state.eqptype3 != '')) {
                  if ((this.state.eqptype1 != 'Type' && this.state.eqptype1 != '' && this.state.qty1 != '') || (this.state.eqptype2 != 'Type' && this.state.eqptype2 != '' && this.state.qty2 != '') || (this.state.eqptype3 != 'Type' && this.state.eqptype3 != '')) {
                    if ((this.state.qty1 != '' || this.state.qty2 != '' || this.state.qty3 != '')) {
                      if ((this.state.qty1 != "0" && this.state.qty2 != "0" && this.state.qty3 != "0")) {
                        if (this.state.eqptype1 == 'Type' || this.state.eqptype1 == ' ' || this.state.qty1 == '' || this.state.qty1 == '0') {
                          this.state.eqptype1 = 'Type';
                          this.state.qty1 = "";
                          console.log("inside the booking 1...", this.state.eqptype1, this.state.qty1);
                        }
                        if (this.state.eqptype2 == 'Type' || this.state.eqptype2 == ' ' || this.state.qty2 == '' || this.state.qty2 == '0') {
                          this.state.eqptype2 = 'Type';
                          this.state.qty2 = "";
                          console.log("inside the booking 2 ...", this.state.eqptype2, this.state.qty2);
                        }
                        if (this.state.eqptype3 == 'Type' || this.state.eqptype3 == ' ' || this.state.qty3 == '' || this.state.qty3 == '0') {
                          this.state.eqptype3 = 'Type';
                          this.state.qty3 = "";
                          console.log("inside the booking 3...", this.state.eqptype3, this.state.qty3);
                        }


                        //  if(this.state.eqptype1 == 'Type' && ( this.state.qty1 == ''||this.state.qty1 =='0'))
                        //  {
                        //   this.state.eqptype1 = 'Type';
                        //   this.state.qty1 = "0";

                        //    console.log("inside the booking 1...",this.state.eqptype1 ,this.state.qty1);
                        //  }
                        //  if(this.state.eqptype2 == 'Type'  && ( this.state.qty2 == ''||this.state.qty2 =='0'))
                        //  {
                        //   this.state.eqptype2 = 'Type';
                        //   this.state.qty2 = "0";
                        //   console.log("inside the booking 2 ...",this.state.eqptype2 ,this.state.qty2);
                        //  }
                        //  if(this.state.eqptype3 == 'Type' && ( this.state.qty3 == ''||this.state.qty3 =='0'))
                        //  {
                        //   this.state.eqptype3 = 'Type';
                        //   this.state.qty3 = "0";
                        //   console.log("inside the booking 3...",this.state.eqptype3 ,this.state.qty3);
                        //  }





                        this.setState({ isLoading: true });
                        console.log("inside the log .....", this.state.eqptype1.indexOf("("));

                        if (this.state.eqptype1.indexOf("(") == -1 && this.state.eqptype2.indexOf("(") == -1 && this.state.eqptype3.indexOf("(") == -1) {
                          var eqp1 = this.state.eqptype1;
                          var eqp2 = this.state.eqptype2;
                          var eqp3 = this.state.eqptype3;
                        }
                        else if (this.state.eqptype1.indexOf("(") > -1 && this.state.eqptype2.indexOf("(") > -1 && this.state.eqptype3.indexOf("(") == -1) {
                          var eqp1 = this.state.eqptype1.substring(this.state.eqptype1.indexOf(")") + 1, this.state.eqptype1.length);
                          var eqp2 = this.state.eqptype2.substring(this.state.eqptype2.indexOf(")") + 1, this.state.eqptype2.length);
                          var eqp3 = this.state.eqptype3;
                        }
                        else if (this.state.eqptype1.indexOf("(") == -1 && this.state.eqptype2.indexOf("(") > -1 && this.state.eqptype3.indexOf("(") > -1) {
                          var eqp1 = this.state.eqptype1;
                          var eqp2 = this.state.eqptype2.substring(this.state.eqptype2.indexOf(")") + 1, this.state.eqptype2.length);
                          var eqp3 = this.state.eqptype3.substring(this.state.eqptype3.indexOf(")") + 1, this.state.eqptype3.length);
                        }
                        else if (this.state.eqptype1.indexOf("(") > -1 && this.state.eqptype2.indexOf("(") == -1 && this.state.eqptype3.indexOf("(") > -1) {
                          var eqp1 = this.state.eqptype1.substring(this.state.eqptype1.indexOf(")") + 1, this.state.eqptype1.length);
                          var eqp2 = this.state.eqptype2;
                          var eqp3 = this.state.eqptype3.substring(this.state.eqptype3.indexOf(")") + 1, this.state.eqptype3.length);
                        }
                        else if (this.state.eqptype1.indexOf("(") > -1 && this.state.eqptype2.indexOf("(") == -1 && this.state.eqptype3.indexOf("(") == -1) {
                          var eqp1 = this.state.eqptype1.substring(this.state.eqptype1.indexOf(")") + 1, this.state.eqptype1.length);
                          var eqp2 = this.state.eqptype2;
                          var eqp3 = this.state.eqptype3;
                        }
                        else if (this.state.eqptype1.indexOf("(") == -1 && this.state.eqptype2.indexOf("(") > -1 && this.state.eqptype3.indexOf("(") == -1) {
                          var eqp1 = this.state.eqptype1;
                          var eqp2 = this.state.eqptype2.substring(this.state.eqptype2.indexOf(")") + 1, this.state.eqptype2.length);
                          var eqp3 = this.state.eqptype3;
                        }
                        else if (this.state.eqptype1.indexOf("(") == -1 && this.state.eqptype2.indexOf("(") == -1 && this.state.eqptype3.indexOf("(") > -1) {
                          var eqp1 = this.state.eqptype1;
                          var eqp2 = this.state.eqptype2;
                          var eqp3 = this.state.eqptype3.substring(this.state.eqptype3.indexOf(")") + 1, this.state.eqptype3.length);
                        }
                        else {
                          var eqp1 = this.state.eqptype1.substring(this.state.eqptype1.indexOf(")") + 1, this.state.eqptype1.length);
                          var eqp2 = this.state.eqptype2.substring(this.state.eqptype2.indexOf(")") + 1, this.state.eqptype2.length);
                          var eqp3 = this.state.eqptype3.substring(this.state.eqptype3.indexOf(")") + 1, this.state.eqptype3.length);
                          this.setState({ rateno: "", itemno: "" })
                        }

                        console.log("containertype----", eqp1, eqp2, eqp3)

                        if (this.state.customercode + "[" + this.state.customername + "]" != null) {
                          this.setState({ custview: 'S' })
                          this.setState({ argparty: this.state.customername + "[" + this.state.customercode + "]" })
                          this.setState({ cust: this.state.customername + "[" + this.state.customercode + "]" })
                          var s = this.state.ratecust
                          var a = s.substring(0, s.indexOf("["));
                          s = s.substring(s.indexOf("[") + 1);
                          s = s.substring(0, s.indexOf("]"));
                          console.log("**U***", s)
                          console.log("**U***", a)

                          this.setState({ customercode: s })
                          this.setState({ customername: a })

                        }
                        console.log("nor >>>>>", this.state.nor);
                        console.log("nor1 >>>>>", this.state.nor1);
                        console.log("nor2 >>>>>", this.state.nor2);
                        console.log("--------service_code=====", this.props.navigation.state.params.routelist.service_code)
                        console.log("--------route service_code=====", this.state.routeService)
                        console.log("SAVE BOOKING >>>>>", this.props.navigation.state.params.routelist.portpair[0].pol, this.props.navigation.state.params.routelist.etd, schedule3, this.props.navigation.state.params.routelist.eta, this.props.navigation.state.params.routelist.service_code, this.props.navigation.state.params.vessel, this.props.navigation.state.params.voyage, this.props.navigation.state.params.bound, this.props.navigation.state.params.routelist.load_callid, this.state.ratetype1, this.state.ratetype2, this.state.ratetype3, this.state.itemno1, this.state.itemno2, this.state.itemno3, this.state.raterule1, this.state.raterule2, this.state.raterule3, this.state.soc1, this.state.soc2, this.state.soc3, this.state.dg1, this.state.dg2, this.state.dg3, this.state.oog1, this.state.oog2, this.state.oog3,);
                        sv.Save_quickbooking(this.bookresponse.bind(this), this.state.customercode, this.state.customername, this.props.navigation.state.params.routelist.portpair[0].pol, this.props.navigation.state.params.routelist.etd, schedule3, this.props.navigation.state.params.routelist.eta, this.props.navigation.state.params.routelist.service_code, this.props.navigation.state.params.vessel, this.props.navigation.state.params.voyage, this.props.navigation.state.params.bound, eqp1, eqp2, eqp3, this.state.qty1, this.state.qty2, this.state.qty3, this.state.agency_code, this.state.agency_loginname, this.state.rateno, this.state.rateno1, this.state.rateno2, this.state.itemno, this.state.ratetype, this.state.raterule, this.props.navigation.state.params.routelist.load_callid, this.state.nor, this.state.nor1, this.state.nor2, this.state.routepol, this.state.routepod, this.state.routepolterminal, this.state.routepodterminal, this.state.ratetype1, this.state.ratetype2, this.state.ratetype3, this.state.itemno1, this.state.itemno2, this.state.itemno3, this.state.raterule1, this.state.raterule2, this.state.raterule3, this.state.soc1, this.state.soc2, this.state.soc3, this.state.dg1, this.state.dg2, this.state.dg3, this.state.oog1, this.state.oog2, this.state.oog3,);
                        Toast.show("Booking saved successfully");
                        this.setState({ itemno: "0", disable: "true", disablerates: "true" })



                      }
                      else {
                        Toast.show("Enter Equipment Quantity")
                      }
                    }
                    else {
                      Toast.show("Enter Equipment Type or Equipment Quantity")
                    }
                  }
                  else {
                    Toast.show("Enter Equipment Quantity")
                  }

                } else {
                  Toast.show("Select Equipment Type")
                }

              } else {
                Toast.show("Enter PLD")
              }

            } else {
              Toast.show("Enter PLA")
            }

          } else {
            Toast.show("Enter POD")
          }

        } else {
          Toast.show("Enter POL")
        }


      } else if (this.state.apcust == 'PRO') {
        Toast.show("AP Customer should be validated");
      }
    } else {
      Toast.show("Enter Agr.Party")
    }
  }
  bookresponse(response) {
    console.log("---Book No----", response)
    var s = response;

    s = s.substring(s.indexOf("=") + 1);
    s = s.substring(0, s.indexOf("}"));
    console.log("**U***", s)
    this.setState({ generatebookno: s })
    this.setState({ isLoading: false });
    this.setState({ statuslabel: 'Draft' })
    this.setState({ resetview: 'N' })
    AsyncStorage.getItem('RecentBookingNO1').then((value) => {


      AsyncStorage.setItem('RecentBookingNO1', this.state.generatebookno + "+" + value)


    })


    // Alert.alert("Book No: ", s)

  }
  oncustomer(item) {
    console.log("----customer", item)
    this.setState({ argparty: item })
    console.log("----customer", this.state.argparty)
    var s = item;
    var a = s.substring(0, s.indexOf("["));
    s = s.substring(s.indexOf("[") + 1);
    s = s.substring(0, s.indexOf("]"));
    console.log("**U***", s)
    console.log("**U***", a)

    this.setState({ customercode: s })
    this.setState({ customername: a })
    this.setState({ disablerates: false })

    this.setState({ custview: 'N' })
    //  this.setState({ argparty: '' })

    //  this.setState({customercode:''})
    //  this.setState({customername:''})
    this.setState({ "rateno": '' })
    this.setState({ "eqptype1": 'Type', "eqptype2": 'Type', "eqptype3": 'Type' })
    this.setState({ ratesscreen: 'N' })
    this.setState({ ratesscreen1: 'N' })
    this.setState({ ratesscreen2: 'N' })


    sv.getapcustomer(this.apcustomer.bind(this), this.state.customercode);
  }

  apcustomer(response) {
    if (response != [] || response.length != 0) {
      console.log("inside the ap customer ...", response, response[0].custposition);
      this.setState({ apcust: response[0].custposition })
      console.log("ap cust...", this.state.apcust);
    } else {

    }

  }

  recentbooking() {
    this.setState({ recentbooknos: [] })
    AsyncStorage.getItem('RecentBookingNO1').then((value) => {
      if (value != null) {
        console.log("recent book", value)
        var myArray = value.split('+');
        for (let i = 0; i < myArray.length; i++) {
          if (myArray[i] != 'null' && myArray[i].length >= 5)
            this.state.recentbooknos.push({ "rr": myArray[i] });
        }

        console.log("recent book", this.state.recentbooknos)
        this.setState({ recentbooknos1: this.state.recentbooknos })
      }
    })

    this.setState({ isVisible: !this.state.isVisible })
  }
  modalclose() {
    this.setState({ route_isVisible: !this.state.route_isVisible })
  }
  onTextChanged1(value) {
    // code to remove non-numeric characters from text
    // console.log("inside the text field",value,value[0])
    if (value[0] != "0") {
      this.setState({ qty1: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
    } else {
      Toast.show("Quantity should not be 0 prefix");
    }
  }
  onTextChanged2(value) {
    // code to remove non-numeric characters from text
    if (value[0] != "0") {
      this.setState({ qty2: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
    } else {
      Toast.show("Quantity should not be 0 prefix");
    }
  }
  onTextChanged3(value) {
    // code to remove non-numeric characters from text
    if (value[0] != "0") {
      this.setState({ qty3: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
    } else {
      Toast.show("Quantity should not be 0 prefix");
    }
  }
  clearapcust() {
    this.setState({ custview: 'N' })
    this.setState({ argparty: '' })

    this.setState({ customercode: '' })
    this.setState({ customername: '' })
    this.setState({ "rateno": '' })
    this.setState({ "eqptype1": 'Type', "eqptype2": 'Type', "eqptype3": 'Type' })
    this.setState({ ratesscreen: 'N' })
    this.setState({ ratesscreen1: 'N' })
    this.setState({ ratesscreen2: 'N' })
    this.setState({ disablerates: true })


  }


  oneqp1(value) {
    console.log("inside rthe oneqp1 >>>", value.eqptype1);
    this.setState({ eqptype1: value.eqptype1, rateno: "", itemno: "0" })
  }
  oneqp2(value) {
    console.log("inside rthe oneqp1 >>>", value.eqptype1);
    this.setState({ eqptype2: value.eqptype2, rateno1: "", itemno: "0" })
  }
  oneqp3(value) {
    console.log("inside rthe oneqp1 >>>", value.eqptype3);
    this.setState({ eqptype3: value.eqptype3, rateno2: "", itemno: "0" })
  }
  copymethod(item) {
    Clipboard.setString(item);
    console.log("isnide the copymethod ...", Clipboard.setString(item));
    Toast.show("Recent Booking No Copied")
  }
  render() {
    // console.log("render----------",this.state.argparty)
    return (
      <View style={{ flex: 1, backgroundColor: '#ffff' }}>
        {/* <View> */}

        <Header androidStatusBarColor="#112d51"
          style={{
            marginHorizontal: -2,
            marginTop: -2,
            backgroundColor: '#112d51',
            height: 60,
            bottom: 25
          }}>
          <Left>
            <TouchableOpacity onPress={this.onPreviouspage.bind(this)} style={{
              position: 'relative',
              width: "100%",
              height: "100%",
              right: "5%",
            }} >

              <Icon style={{ fontSize: 30, top: "20%", color: '#ffffff' }} name="arrow-back" />
            </TouchableOpacity>

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

          </Body>
          <Right>
            <TouchableOpacity onPress={this.recentbooking.bind(this)} style={{
              position: 'relative',
              width: "75%",
              height: "100%",

            }} >

              <Icon style={{ fontSize: 30, color: '#ffff', left: '70%' }} name="history" />
            </TouchableOpacity>
          </Right>
        </Header>

        <Modal
          transparent={true}
          animationType={'none'}
          visible={this.state.route_isVisible}
          onRequestClose={() => { console.log("Modal has been closed.") }}>
          <View style={styles.glasspane}>
            <View style={styles.activityIndicatorWrapper}  >
              <View style={{ height: 40, flexDirection: 'row' }}>
                <View style={{ flex: 0.75, justifyContent: 'center', alignItems: 'center' }}>
                  <Text style={{ fontSize: 15, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}> Available Routes</Text>
                </View>
                <TouchableOpacity onPress={this.modalclose.bind(this)} style={{ flex: 0.25, backgroundColor: '#bbb', justifyContent: 'center', alignItems: 'center', height: 30 }}>
                  <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>CLOSE</Text>
                </TouchableOpacity>
              </View>

              {/* <View style={{ flex: 1, flexDirection: 'column', backgroundColor: '#ffff' }}> */}
              <FlatList
                data={this.state.defaultrouting}
                renderItem={({ item, some }) =>
                  <TouchableOpacity onPress={this.selectedRoute.bind(this, item.origin, item.delivery, item.mainsvc, item.blpolter, item.blpodter, item.mode, item.cost20, item.transittime, item.blpol, item.blpod, item.fromdate, item.todate)}>

                    <View style={{
                      flex: 1,
                      position: 'relative',
                      flexDirection: 'column',
                      borderColor: '#dcdcdc',
                      borderWidth: 3,
                      padding: 10,
                      width: 300,
                      // paddingHorizontal: 20,
                      // paddingVertical: 20,
                      elevation: 11,
                      // height:,
                      marginHorizontal: '3%',
                      marginVertical: '2%',
                      backgroundColor: '#ffff',
                      borderRadius: 8,
                      right: 0
                    }}>




                      <View style={{ flex: 0.5, flexDirection: 'row', elevation: 0, marginHorizontal: '2%', borderRadius: 10, backgroundColor: '#ffff' }}>
                        <View style={{ flex: 0.4, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>

                          <Text style={{ fontSize: 12, color: '#2052AA', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.origin}</Text>
                          <Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#6C6666' }} />
                          <Text style={{ fontSize: 12, color: '#1B4441', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpolter}</Text>
                          {/* <Text style={{ fontSize: 10, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{moment([item.fromdate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY')}</Text> */}


                        </View>
                        <View style={{ flex: 0.2, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>

                          <Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#6C6666' }} />
                          <Text style={{ fontSize: 12, color: '#D62206', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.mainsvc}</Text>
                        </View>
                        <View style={{ flex: 0.4, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>

                          <Text style={{ fontSize: 12, color: '#2052AA', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.delivery}</Text>
                          <Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#6C6666' }} />
                          <Text style={{ fontSize: 12, color: '#1B4441', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpodter}</Text>
                          {/* <Text style={{ fontSize: 10, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{moment([item.todate], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY')}</Text> */}


                        </View>
                      </View>


                      <View style={{ flex: 0.1, flexDirection: 'row' }}>
                        <View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>

                          <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>MODE</Text>


                        </View>
                        <View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                          <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>POL</Text>

                        </View>

                        <View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>

                          <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>POD</Text>



                        </View>
                        <View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                          <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>COST</Text>

                        </View>
                        <View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                          <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>T.TIME</Text>
                        </View>
                      </View>
                      <View style={{ flex: 0.15, flexDirection: 'row' }}>
                        <View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>

                          <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.mode}</Text>


                        </View>
                        <View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                          <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpol}</Text>

                        </View>

                        <View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>

                          <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpod}</Text>



                        </View>
                        <View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                          <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.cost20}</Text>

                        </View>
                        <View style={{ flex: 0.20, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                          <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.transittime}</Text>
                        </View>
                      </View>

                      {/* <View style={{ flex: 0.3, flexDirection: 'row' }}>
                                                <View style={{ flex: 0.20, flexDirection: 'column', justifyContent: 'center' }}>

                                                    <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>MODE</Text>
                                                    <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>POL</Text>
                                                    <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>POD</Text>
                                                </View>
                                                <View style={{ flex: 0.25, flexDirection: 'column', justifyContent: 'center' }}>
                                                    <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.mode}</Text>
                                                    <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpol}</Text>
                                                    <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.blpod}</Text>

                                                </View>

                                                <View style={{ flex: 0.3, flexDirection: 'column', justifyContent: 'center' }}>


                                                    <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>COST</Text>
                                                    <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}>TRANS.TIME</Text>
                                                    <Text style={{ fontSize: 12, color: '#5A5F62', fontFamily: 'Montserrat-Medium', marginVertical: 5 }}></Text>
                                                </View>
                                                <View style={{ flex: 0.2, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>

                                                    <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.cost20}</Text>
                                                    <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{item.transittime}</Text>
                                                    <Text style={{ fontSize: 12, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}></Text>
                                                </View>
                                            </View> */}


                    </View>
                  </TouchableOpacity>
                }
              >


              </FlatList>

            </View>


          </View>


          {/* </View> */}
        </Modal>

        <ProgressDialog
          visible={this.state.progressVisible}
          title="Loading"
          message="Please, wait..."
          titleStyle={{ fontFamily: 'Montserrat-Medium' }}
        />
        <Modal
          transparent={true}
          animationType={'none'}
          visible={this.state.isVisible}
          onRequestClose={() => { console.log("Modal has been closed.") }}>
          <View style={styles.glasspane}>
            <View style={styles.activityIndicatorWrapper} >
              <View style={{ flexDirection: 'row' }}>
                <View style={{ flexDirection: 'column', flex: 3 }}>
                  {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 13, color: '#000000', width: "100%", marginHorizontal: "30%", marginVertical: '1%', marginTop: "5%", justifyContent: 'center', alignItems: 'center', fontFamily: 'Montserrat-Bold' }}>{lan_en[0].recentbookingno}</Text>) :
                    (<Text style={{ fontSize: 13, color: '#000000', width: "100%", marginHorizontal: "30%", marginVertical: '1%', marginTop: "5%", justifyContent: 'center', alignItems: 'center', fontFamily: 'Montserrat-Bold' }}>{lan_ch[0].recentbookingno}</Text>)}
                  {/* <Text style={{ fontSize: 13, color: '#000000',width:"100%", marginHorizontal:"30%", marginVertical: '1%',marginTop:"5%", justifyContent: 'center', alignItems: 'center',fontFamily: 'Montserrat-Bold' }}>RECENT BOOKING NO</Text> */}
                </View>
                <View style={{ flexDirection: 'column', flex: 0.5 }}>
                  <TouchableOpacity style={{}} onPress={this.recentbooking.bind(this)}>
                    <Icon style={{ fontSize: 20, color: 'black', marginVertical: '10%', marginHorizontal: "15%", marginTop: "5%" }} name="close" />
                  </TouchableOpacity>
                </View>
              </View>
              <ScrollView>
                <FlatList
                  data={this.state.recentbooknos1}
                  renderItem={({ item, some }) =>
                    <TouchableOpacity onPress={this.copymethod.bind(this, item.rr)} style={{ flex: 1, backgroundColor: '#bfd1dd', padding: 7, flexDirection: 'row', width: '130%', height: '70%', marginVertical: '3%', borderRadius: 0, justifyContent: 'center', alignItems: 'center', }}>
                      <View style={{ flex: 0.2, flexDirection: 'column', bottom: 5 }}>
                        <Icon style={{ fontSize: 20, color: '#112d51' }} name="library-books" />
                      </View>
                      <View style={{ flex: 0.7, flexDirection: 'column', justifyContent: 'center' }}>
                        <Text selectable={true} style={{ color: '#112d51', fontSize: 12, fontFamily: 'Montserrat-Bold', bottom: 5 }}>{item.rr}</Text>


                      </View>


                    </TouchableOpacity>
                  }
                >
                </FlatList>
              </ScrollView>
            </View>





          </View>
        </Modal>
        <KeyboardAvoidingView
          behavior={Platform.OS === "ios" ? "padding" : null}
          style={{ flex: 1 }}
        >
          <Loader isLoading={this.state.isLoading} />
          {/* <ScrollView keyboardShouldPersistTaps={true} > */}
          <View style={{ backgroundColor: '#112d51', height: 60 }}>

            <View style={{ flexDirection: 'row', marginHorizontal: '4.1%', height: 45 }} >

              <View style={{ flexDirection: 'column', flex: 0.5, justifyContent: 'center', backgroundColor: '#bfd1dd', alignItems: 'center', marginHorizontal: 0 }} >
                {/* <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>Book No</Text> */}
                {this.state.language != "lang_ch" ? (<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_en[0].bookno}</Text>) :
                  (<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_ch[0].bookno}</Text>)}
                <Text selectable={true} style={{ fontFamily: 'Montserrat-Bold', fontSize: 12, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{this.state.generatebookno}</Text>
              </View>
              <View style={{ flexDirection: 'column', flex: 0.25, justifyContent: 'center', backgroundColor: '#bfd1dd', alignItems: 'center', marginHorizontal: 1 }} >
                {/* <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>Agency</Text> */}
                {this.state.language != "lang_ch" ? (<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_en[0].agency}</Text>) :
                  (<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_ch[0].agency}</Text>)}
                <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 12, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{this.state.agency_code}</Text>
              </View>
              <View style={{ flexDirection: 'column', flex: 0.25, justifyContent: 'center', backgroundColor: '#bfd1dd', alignItems: 'center', marginHorizontal: 1 }} >
                {/* <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>Status</Text> */}
                {this.state.language != "lang_ch" ? (<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_en[0].status}</Text>) :
                  (<Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 10, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{lan_ch[0].status}</Text>)}
                <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 12, alignContent: 'center', justifyContent: 'center', color: 'black' }}>{this.state.statuslabel}</Text>
              </View>
            </View>
          </View>

          <View style={{ backgroundColor: '#ffff', flex: 0.9 }}>
            <View style={{ flexDirection: 'row', marginHorizontal: '4%', marginVertical: '1%', left: 1 }} >

              {/* <View style={{ flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', backgroundColor: '#ecf5f9', height: 41.5, top: 4.7 }} >
              <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51' }}>Agr.Party </Text>
            </View> */}
              {this.state.custview == 'N' ? (<View style={{ flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center' }} >
                <Autocomplete
                  //  nestedScrollEnabled={true}

                  data={this.state.customer}
                  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: 55, alignItems: 'center', justifyContent: 'center', right: '5%' }}
                  placeholder="Agr.Party"
                  initialValue={this.props.navigation.state.params.ap_cust}
                  // placeholderColor='#6C6666'
                  handleSelectItem={(item, id) => this.oncustomer(item)}
                  inputStyle={{ fontFamily: 'Montserrat-Medium', borderRadius: 5, fontSize: 13, borderColor: '#6C6666', right: 3, backgroundColor: '#ffff' }}


                />




              </View>) : (

                <View style={{ flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center' }} >
                  <Autocomplete
                    //  nestedScrollEnabled={true}

                    data={this.state.customer}
                    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: 55, alignItems: 'center', justifyContent: 'center', right: '5%' }}
                    placeholder="Agr.Party"
                    initialValue={this.props.navigation.state.params.ap_cust}

                    // placeholderColor='#6C6666'
                    handleSelectItem={(item, id) => this.oncustomer(item)}
                    inputStyle={{ fontFamily: 'Montserrat-Medium', borderRadius: 5, fontSize: 13, borderColor: '#6C6666', right: 3, backgroundColor: '#ffff' }}


                  />




                </View>
                //              <View style={{flexDirection:'row' ,flex: 1,}}>

                // <View style={{
                //               flexDirection: 'column', flex: 0.9, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
                //               borderColor: '#6C6666',
                //               backgroundColor: '#ffff',
                //               borderRadius:5,width:'105%',
                //               borderWidth: 1,top:5,height:41,
                //             }} >
                //               <TextInput
                //                 style={{height: 40,
                //                   width: '88%',
                //                   left: 14,
                //                   fontSize: 13,
                //                   color: '#000000',
                //                   fontFamily: 'Montserrat-Medium',
                //               }}
                //                 editable={false}
                //                 onChangeText={(cust) => this.oncustomer({ cust })}
                //                 value={this.state.cust}
                //               />
                //             </View>
                //             <TouchableOpacity onPress={this.clearapcust.bind(this)} style={{flexDirection:'column',flex:0.1 ,backgroundColor:'#ffff' ,alignItems:'center',justifyContent:'center',padding:5,borderWidth:0,borderRadius:10}}>
                //             <Image resizeMode="contain" source={require('../Images/menu_img/pencil.png')} style={{ height:20, width:45,}} />
                //             </TouchableOpacity>
                //                </View>

              )}

            </View>
            <ScrollView keyboardShouldPersistTaps="always" style={{ zIndex: -1 }} >
              <View style={{ zIndex: -1 }}>
                <View style={{ flexDirection: 'row', marginHorizontal: '4%', zIndex: -1, marginVertical: 5 }} >

                  {/* <View style={{
              flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
              borderColor: '#ecf5f9',
              backgroundColor: '#ecf5f9',
              borderWidth: 1,
            }} >
              <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51' }}>PLA </Text>
            </View> */}
                  <View style={{
                    flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center', borderRadius: 5,
                    borderColor: '#6C6666',
                    backgroundColor: '#ffff',
                    borderWidth: 1,
                  }} >
                    <TextInput
                      style={styles.input}
                      editable={false}
                      onChangeText={(pla) => this.setState({ pla })}
                      value={this.state.pla}
                    />
                  </View></View>
                <View style={{ flexDirection: 'row', marginHorizontal: '4%', zIndex: -1, marginVertical: 5 }} >

                  {/* <View style={{
              flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
              borderColor: '#ecf5f9',
              backgroundColor: '#ecf5f9',
              borderWidth: 1,
            }} >
              <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51' }}>POL </Text>
            </View> */}
                  <View style={{
                    flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center', borderRadius: 5,
                    borderColor: '#6C6666',
                    backgroundColor: '#ffff',
                    borderWidth: 1,
                  }} >
                    <TextInput
                      style={styles.input}
                      editable={false}
                      onChangeText={(pol) => this.setState({ pol })}
                      value={this.state.pol}
                    />
                  </View></View>
                <View style={{ flexDirection: 'row', marginHorizontal: '4%', zIndex: -1, marginVertical: 5 }} >

                  {/* <View style={{
              flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
              borderColor: '#ecf5f9',
              backgroundColor: '#ecf5f9',
              borderWidth: 1,
            }} >
              <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51' }}>POD</Text>
            </View> */}
                  <View style={{
                    flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center', borderRadius: 5,
                    borderColor: '#6C6666',
                    backgroundColor: '#ffff',
                    borderWidth: 1,
                  }} >
                    <TextInput
                      style={styles.input}
                      editable={false}
                      onChangeText={(pod) => this.setState({ pod })}
                      value={this.state.pod}
                    />
                  </View></View>
                <View style={{ flexDirection: 'row', marginHorizontal: '4%', zIndex: -1, marginVertical: 5 }} >

                  {/* <View style={{
              flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
              borderColor: '#ecf5f9',
              backgroundColor: '#ecf5f9',
              borderWidth: 1,
            }} >
              <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51' }}>PLD </Text>
            </View> */}
                  <View style={{
                    flexDirection: 'column', flex: 1, alignItems: 'center', justifyContent: 'center', borderRadius: 5,
                    borderColor: '#6C6666',
                    backgroundColor: '#ffff',
                    borderWidth: 1,
                  }} >
                    <TextInput
                      style={styles.input}
                      editable={false}
                      onChangeText={(pld) => this.setState({ pld })}
                      value={this.state.pld}
                    />
                  </View></View>
                <View style={{ flexDirection: 'row', marginHorizontal: '4%', zIndex: -1, marginVertical: 5 }} >

                  <View style={{
                    flexDirection: 'column', flex: 0.2, alignItems: 'center', justifyContent: 'center', borderRadius: 0,
                    borderColor: '#ffff',
                    // backgroundColor:'#ffff',
                    borderWidth: 0,
                  }} >
                  </View></View>
              </View>

              <View style={{ flexDirection: 'column', paddingVertical: 5, backgroundColor: '#ffff' }}>
                <View style={styles.routingcontainer}>
                  <View style={{ flex: 0.3, flexDirection: 'row' }}>
                    <View style={{ flex: 0.2, flexDirection: 'column' }}>
                      <Image resizeMode="contain" source={require('../Images/footer_icons/routing.png')} style={{ height: 30, width: 40, tintColor: '#112d51', top: 5 }} />
                    </View>
                    <View style={{ flex: 0.7, flexDirection: 'column' }}>
                      {/* <Text style={{ fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Bold', alignItems: "center", top: 10 }}>Routing</Text> */}
                      {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Bold', alignItems: "center", top: 10 }}>{lan_en[0].routing}</Text>) :
                        (<Text style={{ fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Bold', alignItems: "center", top: 10 }}>{lan_ch[0].routing}</Text>)}
                    </View>
                  </View>
                  <LinearGradient colors={['#bfd1dd', '#bfd1dd', '#bfd1dd']} style={{ flex: 0.8, borderRadius: 10, }}>

                    {/* <View style={{ flex: 0.8, flexDirection: 'column', alignItems: 'center' }}>
                <FlatList
                  data={this.state.routearray}
                  extraData={this.state.extradata}
                  horizontal={true}
                  renderItem={({ item }) => (
                    <View style={{ flexDirection: 'row', top: 10, marginHorizontal: 5 }}>
                      <View style={{ flexDirection: 'column', marginHorizontal: 5, flexDirection: 'column', alignItems: 'center' }}>
                        <Text style={{ fontSize: 12, color: '#112d51', fontFamily: 'Montserrat-Bold', bottom: 1 }}>{item.pol}</Text>
                        <Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#112d51' }} />
                        <Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', }}>{moment([item.etd], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY mm:ss')}</Text>
                        
                      </View>
                      <View style={{ flexDirection: 'column', marginHorizontal: 15, bottom: 3, flexDirection: 'column', alignItems: 'center' }}>
                        <Text></Text>
                        {item.schedule_type == 'Mainline' ? (<Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#112d51' }} />) : null}
                        {item.schedule_type == 'Feeder' ? (<Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#112d51' }} />) : null}
                        {item.schedule_type == 'Rail' ? (<Image resizeMode="contain" source={require('../Images/footer_icons/train7.png')} style={{ height: 20, width: 50, tintColor: '#112d51' }} />) : null}
                        {item.schedule_type == 'Road' ? (<Image resizeMode="contain" source={require('../Images/footer_icons/truck.png')} style={{ height: 20, width: 50, tintColor: '#112d51' }} />) : null}

                        <Text style={{ fontSize: 12, color: '#112d51', fontFamily: 'Montserrat-Bold', bottom: 1 }}>{item.service_code}</Text>
                      </View>
                      <View style={{ flexDirection: 'column', marginHorizontal: 5, flexDirection: 'column', alignItems: 'center' }}>
                        <Text style={{ fontSize: 12, color: '#112d51', fontFamily: 'Montserrat-Bold', bottom: 1 }}>{item.pod}</Text>
                        <Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#112d51' }} />
                        <Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 0 }}>{moment([item.eta], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY mm:ss')}</Text>
                      </View>
                    </View>


                  )}
                />
              </View> */}
                    <View style={{ flex: 0.8, paddingVertical: 10, flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                      {/* <FlatList
                                            data={Route}
                                            horizontal={true}
                                            renderItem={({ item }) => ( */}
                      <View style={{ flexDirection: 'row', marginHorizontal: 5, alignItems: 'center', justifyContent: 'center', top: 5 }}>
                        <View style={{ flexDirection: 'column', marginHorizontal: 5, alignItems: 'center', justifyContent: 'center' }}>
                          <Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 3 }}>{this.state.routeOrigin}</Text>
                          <Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#112d51' }} />
                          <Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 3 }}>{this.state.routepolterminal}</Text>
                          <Text style={{ fontSize: 10, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 0 }}>{moment([this.state.etd1], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY')}</Text>

                        </View>
                        <View style={{ flexDirection: 'column', marginHorizontal: 5, marginVertical: 3, alignItems: 'center', justifyContent: 'center' }}>
                          <Text></Text>
                          {/* {item.route == 'ship' ? (<Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#ffff' }} />) : null}
                                                        {item.route == 'rail' ? (<Image resizeMode="contain" source={require('../Images/footer_icons/train7.png')} style={{ height: 20, width: 50, tintColor: '#ffff' }} />) : null}
                                                        {item.route == 'road' ? (<Image resizeMode="contain" source={require('../Images/footer_icons/truck.png')} style={{ height: 20, width: 50, tintColor: '#ffff' }} />) : null} */}
                          <Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#112d51' }} />
                          <Text style={{ fontSize: 12, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 3 }}>{this.state.routeService}</Text>
                        </View>
                        <View style={{ flexDirection: 'column', marginHorizontal: 5, alignItems: 'center', justifyContent: 'center' }}>
                          <Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 3 }}>{this.state.routeDelivery}</Text>
                          <Image resizeMode="contain" source={require('../Images/footer_icons/Tracking.png')} style={{ height: 20, width: 30, tintColor: '#112d51' }} />
                          <Text style={{ fontSize: 10, color: '#112d51', fontFamily: 'Montserrat-Bold', marginVertical: 5 }}>{this.state.routepodterminal}</Text>
                          <Text style={{ fontSize: 10, color: '#000000', fontFamily: 'Montserrat-Bold', marginVertical: 0 }}>{moment([this.state.eta1], 'YYYY/MM/DD mm:ss').format('DD-MMM-YYYY')}</Text>
                        </View>
                        {this.state.resetview != 'N' ? <TouchableOpacity onPress={this.resetRouting.bind(this)} style={{ flexDirection: 'column', marginHorizontal: 5, alignItems: 'center', justifyContent: 'center', backgroundColor: '#112d51', height: 25, left: 20, borderRadius: 10, width: 70 }}>
                          <Text style={{ color: '#ffff', fontFamily: 'Montserrat-Medium', }}>Reset</Text>
                        </TouchableOpacity> : <View style={{ flexDirection: 'column', marginHorizontal: 5, alignItems: 'center', justifyContent: 'center', backgroundColor: '#7D848C', height: 25, left: 20, borderRadius: 10, width: 70 }}>
                          <Text style={{ color: '#ffff', fontFamily: 'Montserrat-Medium', }}>Reset</Text>
                        </View>}
                      </View>



                    </View>
                    <View style={{ borderTopColor: '#112d51', borderTopWidth: 1, marginHorizontal: 5, flexDirection: 'column', top: "5%" }}>

                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                      <Text style={{ fontFamily: 'Montserrat-Bold', fontSize: 13, color: '#112d51', marginBottom: 5, left: 10, top: 10 }}>{this.props.navigation.state.params.vessel} | {this.props.navigation.state.params.voyage} | {this.props.navigation.state.params.bound}</Text>
                      {/* <TouchableOpacity style={{left:130,top:10}}>
                                 <Text style={{ fontSize: 12, color: '#ffff', fontFamily: 'Montserrat-Bold',textDecorationLine:'underline'}}>Transhipment</Text>  
                                     </TouchableOpacity>    */}
                    </View>
                  </LinearGradient></View>
              </View>

              {this.state.disablerates == false ?
                <View style={{ flexDirection: 'row' }}>
                  <View style={{ flex: 0.75, }}>
                    {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].equipmentdetails}</Text>) :
                      (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].equipmentdetails}</Text>)}
                    {/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>EQUIPMENT DETAILS</Text> */}
                  </View>

                  <TouchableOpacity style={{ flexDirection: 'row', height: 35, flex: 0.25, justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent', width: '100%', marginHorizontal: '7%', borderColor: '#112d51', borderWidth: 1, borderRadius: 7 }} onPress={this.Ratespage.bind(this)}>
                    <View style={{ flex: 0.4, alignItems: 'center', justifyContent: 'center' }}>
                      <Icon1 style={{ fontSize: 20, color: '#112d51' }} name="ios-pricetags" />
                    </View>
                    <View style={{ flex: 0.6, alignItems: 'center', justifyContent: 'center' }}>
                      {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 13, color: '#112d51', fontFamily: 'Montserrat-Medium' }}>{lan_en[0].rates}</Text>) :
                        (<Text style={{ fontSize: 13, color: '#112d51', fontFamily: 'Montserrat-Medium' }}>{lan_ch[0].rates}</Text>)}
                    </View>
                  </TouchableOpacity>
                </View>
                :
                <View style={{ flexDirection: 'row' }}>
                  <View style={{ flex: 0.75, }}>
                    {/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>EQUIPMENT DETAILS</Text> */}
                    {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].equipmentdetails}</Text>) :
                      (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].equipmentdetails}</Text>)}
                  </View>

                  <View style={{ flexDirection: 'row', height: 35, flex: 0.25, justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent', width: '100%', marginHorizontal: '7%', borderColor: '#bbb', borderWidth: 1, borderRadius: 7 }}>
                    <View style={{ flex: 0.4, alignItems: 'center', justifyContent: 'center' }}>
                      <Icon1 style={{ fontSize: 20, color: '#bbb' }} name="ios-pricetags" />
                    </View>
                    <View style={{ flex: 0.6, alignItems: 'center', justifyContent: 'center' }}>
                      {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 13, color: '#bbb', fontFamily: 'Montserrat-Medium' }}>{lan_en[0].rates}</Text>) :
                        (<Text style={{ fontSize: 13, color: '#bbb', fontFamily: 'Montserrat-Medium' }}>{lan_ch[0].rates}</Text>)}
                      {/* <Text style={{ fontSize: 15, color: '#112d51', fontFamily: 'Montserrat-Medium'}}>Rates</Text>            */}
                    </View>
                  </View>
                </View>
              }
              {/* <View style={{ flexDirection: 'row'}}>
          
          <View style={{ flex:0.7,  }}>
      <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>EQUIPMENT DETAILS</Text>
      </View>
      <TouchableOpacity style={{ flex:0.3, justifyContent: 'center',alignItems:'center',backgroundColor:'#112d51',width:'86%',marginHorizontal:'7%' }} onPress={this.Ratespage.bind(this)}>
          
              <Text style={{ fontSize: 17, color: '#fff' }}>Rates</Text>
           
          </TouchableOpacity>
      </View> */}

              {this.state.ratesscreen == 'N' ?
                <View style={{ flexDirection: 'row', backgroundColor: '#ffff' }} >

                  <View style={{ flexDirection: 'column', flex: 0.7, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%' }}>
                    {/* <Autocomplete
              data={this.state.equipment}
              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', marginHorizontal: '3%', right: 5 }}
              placeholder="Eqp.Type"
              placeholderColor='#000000'
              handleSelectItem={(item, id) => this.onfromLocation(item)}
              inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13, backgroundColor: '#ffff', borderColor: '#bbb' }}
              initialValue={this.state.fromLocation}

            /> */}
                    {this.state.disable == false ?
                      <Dropdown
                        data={this.state.equipmentType1}
                        dropdownOffset={{ top: 5 }}
                        containerStyle={{
                          borderRadius: 5,
                          borderColor: '#bbb',
                          borderWidth: 1,
                          marginVertical: '1%',
                          fontSize: 13,
                          color: '#000000',
                          width: '100%',
                          fontFamily: 'Montserrat-Medium',
                        }}
                        labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
                        inputContainerStyle={{
                          fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10,
                          borderBottomColor: 'transparent', width: Platform.OS === 'ios' ? '80%' : '90%', fontFamily: 'Montserrat-Medium', justifyContent: 'flex-end', alignItems: 'flex-start',
                        }}
                        value={this.state.eqptype1}
                        onChangeText={(eqptype1) => this.oneqp1({ eqptype1 })}
                        label=''
                      />
                      :
                      <Dropdown
                        data={this.state.equipmentType1}
                        dropdownOffset={{ top: 5 }}
                        disabled={true}
                        containerStyle={{
                          borderRadius: 5,
                          borderColor: '#bbb',
                          borderWidth: 1,
                          marginVertical: '1%',
                          fontSize: 13,
                          color: '#000000',
                          width: '100%',
                          fontFamily: 'Montserrat-Medium',
                        }}
                        labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
                        inputContainerStyle={{
                          fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10, 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 style={{
                    flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
                    borderRadius: 5,
                    borderColor: '#bbb',
                    backgroundColor: '#ffff', borderWidth: 1
                  }}>
                    {this.state.disable == false ?
                      <TextInput
                        style={styles.input2}
                        placeholder="QTY"
                        placeholderTextColor="#000000"
                        keyboardType='numeric'
                        maxLength={4}
                        // onChangeText={(qty1) => this.setState({ qty1 })}
                        onChangeText={value => this.onTextChanged1(value)}
                        value={this.state.qty1}
                      />
                      :
                      <TextInput
                        style={styles.input1}
                        editable={false}
                        placeholder="QTY"
                        placeholderTextColor="#A9A9A9"
                        keyboardType='numeric'
                        maxLength={4}
                        onChangeText={(qty1) => this.setState({ qty1 })}
                        value={this.state.qty1}
                      />
                    }
                  </View>



                </View>
                :
                <View
                  style={styles.list}
                >
                  <View style={{ flexDirection: 'row' }}>
                    <View style={{ flex: 0.75, }}>
                      <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Eqptype</Text>
                      {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].eqptype1}</Text>) :
                        (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].eqptype1}</Text>)}
                    </View>
                    <View style={{ flex: 0.75, }}>
                      <Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 45, marginVertical: '4%' }}>{this.state.eqptype1}</Text>
                    </View>
                    <View style={{
                      flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
                      borderRadius: 5,
                      borderColor: '#bbb',
                      backgroundColor: '#ffff', borderWidth: 1
                    }}>
                      {this.state.disable == false ?
                        <TextInput
                          style={styles.input2}
                          placeholder="QTY"
                          placeholderTextColor="#000000"
                          keyboardType='numeric'
                          maxLength={4}
                          // onChangeText={(qty1) => this.setState({ qty1 })}
                          onChangeText={value => this.onTextChanged1(value)}
                          value={this.state.qty1}
                        />
                        :
                        <TextInput
                          style={styles.input1}
                          editable={false}
                          placeholder="QTY"
                          placeholderTextColor="#A9A9A9"
                          keyboardType='numeric'
                          maxLength={4}
                          onChangeText={(qty1) => this.setState({ qty1 })}
                          value={this.state.qty1}
                        />
                      }
                    </View>
                  </View>
                  <View style={{ flexDirection: 'row' }}>
                    <View style={{ flex: 0.75, }}>
                      {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_en[0].rateno}</Text>) :
                        (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_ch[0].rateno}</Text>)}
                    </View>
                    <View style={{ flex: 0.75, }}>
                      <Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, bottom: 10 }}>{this.state.rateno}</Text>
                    </View>
                  </View>
                </View>
              }
              <View style={{ flexDirection: 'row' }}>
                {/* <View style={{ flex:0.75,  }}>
             {/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Rate No.</Text> */}
                {/* {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].rateno}</Text>) : */}
                {/* (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].rateno}</Text>)} */}
                {/* </View>  */}
                {/* <View style={{ flex:0.75,  }}> */}
                {/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, marginVertical: '4%' }}>{this.state.rateno}</Text> */}
                {/* </View> */}
              </View>

              {this.state.ratesscreen1 == "N" ?
                <View style={{ flexDirection: 'row', backgroundColor: '#ffff' }} >
                  <View style={{ flexDirection: 'column', flex: 0.7, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%' }}>
                    {/* <Autocomplete
              data={this.state.equipment}
              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', marginHorizontal: '3%', right: 5 }}
              placeholder="Eqp.Type"
              placeholderColor='#000000'
              handleSelectItem={(item, id) => this.onfromLocation(item)}
              inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13, backgroundColor: '#ffff', borderColor: '#bbb' }}
              initialValue={this.state.fromLocation}

            /> */}
                    {this.state.disable == false ?
                      <Dropdown
                        data={this.state.equipmentType1}
                        dropdownOffset={{ top: 5 }}
                        containerStyle={{
                          borderRadius: 5,
                          borderColor: '#bbb',
                          borderWidth: 1,
                          marginVertical: '1%',
                          fontSize: 13,
                          color: '#000000',
                          width: '100%',
                          fontFamily: 'Montserrat-Medium',
                        }}
                        labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
                        inputContainerStyle={{
                          fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10,
                          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=''
                      />
                      :
                      <Dropdown
                        data={this.state.equipmentType1}
                        dropdownOffset={{ top: 5 }}
                        disabled={true}
                        containerStyle={{
                          borderRadius: 5,
                          borderColor: '#bbb',
                          borderWidth: 1,
                          marginVertical: '1%',
                          fontSize: 13,
                          color: '#000000',
                          width: '100%',
                          fontFamily: 'Montserrat-Medium',
                        }}
                        labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
                        inputContainerStyle={{
                          fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10,
                          borderBottomColor: 'transparent', width: Platform.OS === 'ios' ? '80%' : '90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
                        }}
                        value={this.state.eqptype2}
                        onChangeText={(eqptype2) => this.setState({ eqptype2 })}
                        label=''
                      />
                    }
                  </View>
                  <View style={{
                    flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
                    borderRadius: 5,
                    borderColor: '#bbb',
                    backgroundColor: '#ffff', borderWidth: 1
                  }}>
                    {this.state.disable == false ?
                      <TextInput
                        style={styles.input2}
                        placeholder="QTY"
                        placeholderTextColor="#000000"
                        keyboardType='numeric'
                        maxLength={4}
                        // onChangeText={(qty2) => this.setState({ qty2 })}
                        onChangeText={value => this.onTextChanged2(value)}
                        value={this.state.qty2}
                      />
                      :
                      <TextInput
                        style={styles.input1}
                        editable={false}
                        placeholder="QTY"
                        placeholderTextColor="#A9A9A9"
                        keyboardType='numeric'
                        maxLength={4}
                        onChangeText={(qty2) => this.setState({ qty2 })}
                        value={this.state.qty2}
                      />
                    }
                  </View>



                </View>
                :
                <View
                  style={styles.list}
                >
                  <View style={{ flexDirection: 'row' }}>
                    <View style={{ flex: 0.75, }}>
                      <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Eqptype</Text>
                      {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].eqptype2}</Text>) :
                        (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].eqptype2}</Text>)}
                    </View>
                    <View style={{ flex: 0.75, }}>
                      <Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 45, marginVertical: '4%' }}>{this.state.eqptype2}</Text>
                    </View>
                    <View style={{
                      flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
                      borderRadius: 5,
                      borderColor: '#bbb',
                      backgroundColor: '#ffff', borderWidth: 1
                    }}>
                      {this.state.disable == false ?
                        <TextInput
                          style={styles.input2}
                          placeholder="QTY"
                          placeholderTextColor="#000000"
                          keyboardType='numeric'
                          maxLength={4}
                          // onChangeText={(qty1) => this.setState({ qty1 })}
                          onChangeText={value => this.onTextChanged2(value)}
                          value={this.state.qty2}
                        />
                        :
                        <TextInput
                          style={styles.input1}
                          editable={false}
                          placeholder="QTY"
                          placeholderTextColor="#A9A9A9"
                          keyboardType='numeric'
                          maxLength={4}
                          onChangeText={(qty2) => this.setState({ qty2 })}
                          value={this.state.qty2}
                        />
                      }
                    </View>
                  </View>
                  <View style={{ flexDirection: 'row' }}>
                    <View style={{ flex: 0.75, }}>
                      {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_en[0].rateno}</Text>) :
                        (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_ch[0].rateno}</Text>)}
                    </View>
                    <View style={{ flex: 0.75, }}>
                      <Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, bottom: 10 }}>{this.state.rateno1}</Text>
                    </View>
                  </View>
                </View>
              }
              {/* <View style={{ flexDirection: 'row'}}>
        <View style={{ flex:0.75,  }}> */}
              {/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Rate No.</Text> */}
              {/* {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].rateno1}</Text>) :
                            (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].rateno1}</Text>)} */}
              {/* </View>
      <View style={{ flex:0.75,  }}>
              <Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, marginVertical: '4%' }}>{this.state.rateno1}</Text>
      </View> */}
              {/* </View> */}
              {this.state.ratesscreen2 == "N" ?
                <View style={{ flexDirection: 'row', backgroundColor: '#ffff' }} >
                  <View style={{ flexDirection: 'column', flex: 0.7, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%' }}>
                    {/* <Autocomplete
              data={this.state.equipment}
              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', marginHorizontal: '3%', right: 5 }}
              placeholder="Eqp.Type"
              placeholderColor='#000000'
              handleSelectItem={(item, id) => this.onfromLocation(item)}
              inputStyle={{ fontFamily: 'Montserrat-Medium', fontSize: 13, backgroundColor: '#ffff', borderColor: '#bbb' }}
              initialValue={this.state.fromLocation}

            /> */}
                    {this.state.disable == false ?
                      <Dropdown
                        data={this.state.equipmentType1}
                        dropdownOffset={{ top: 5 }}
                        containerStyle={{
                          borderRadius: 5,
                          borderColor: '#bbb',
                          borderWidth: 1,
                          marginVertical: '1%',
                          fontSize: 13,
                          color: '#000000',
                          width: '100%',
                          fontFamily: 'Montserrat-Medium',
                        }}
                        labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
                        inputContainerStyle={{
                          fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10,
                          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=''
                      />
                      :
                      <Dropdown
                        data={this.state.equipmentType1}
                        dropdownOffset={{ top: 5 }}
                        disabled={true}
                        containerStyle={{
                          borderRadius: 5,
                          borderColor: '#bbb',
                          borderWidth: 1,
                          marginVertical: '1%',
                          fontSize: 13,
                          color: '#000000',
                          width: '100%',
                          fontFamily: 'Montserrat-Medium',
                        }}
                        labelTextStyle={{ labelFontSize: 12, fontFamily: 'Montserrat-Medium' }}
                        inputContainerStyle={{
                          fontSize: 10, left: Platform.OS === 'ios' ? 10 : 10,
                          borderBottomColor: 'transparent', width: Platform.OS === 'ios' ? '80%' : '90%', fontFamily: 'Montserrat-Medium', justifyContent: 'center', alignItems: 'center',
                        }}
                        value={this.state.eqptype3}
                        onChangeText={(eqptype3) => this.setState({ eqptype3 })}
                        label=''
                      />
                    }
                  </View>
                  <View style={{
                    flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
                    borderRadius: 5,
                    borderColor: '#bbb',
                    backgroundColor: '#ffff', borderWidth: 1
                  }}>
                    {this.state.disable == false ?
                      <TextInput
                        style={styles.input2}
                        placeholder="QTY"
                        placeholderTextColor="#000000"
                        keyboardType='numeric'
                        // onChangeText={(qty3) => this.setState({ qty3 })}
                        onChangeText={value => this.onTextChanged3(value)}
                        maxLength={4}
                        value={this.state.qty3}
                      />
                      :
                      <TextInput
                        style={styles.input1}
                        editable={false}
                        placeholder="QTY"
                        placeholderTextColor="#A9A9A9"
                        keyboardType='numeric'
                        onChangeText={(qty3) => this.setState({ qty3 })}
                        maxLength={4}
                        value={this.state.qty3}
                      />
                    }
                  </View>



                </View >
                :
                <View
                  style={styles.list}
                >
                  <View style={{ flexDirection: 'row' }}>
                    <View style={{ flex: 0.75, }}>
                      <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Eqptype</Text>
                      {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].eqptype3}</Text>) :
                        (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].eqptype3}</Text>)}
                    </View>
                    <View style={{ flex: 0.75, }}>
                      <Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 45, marginVertical: '4%' }}>{this.state.eqptype3}</Text>
                    </View>
                    <View style={{
                      flexDirection: 'column', flex: 0.3, alignItems: 'center', justifyContent: 'center', marginHorizontal: '3%', height: 40, top: 5,
                      borderRadius: 5,
                      borderColor: '#bbb',
                      backgroundColor: '#ffff', borderWidth: 1
                    }}>
                      {this.state.disable == false ?
                        <TextInput
                          style={styles.input2}
                          placeholder="QTY"
                          placeholderTextColor="#000000"
                          keyboardType='numeric'
                          maxLength={4}
                          // onChangeText={(qty1) => this.setState({ qty1 })}
                          onChangeText={value => this.onTextChanged3(value)}
                          value={this.state.qty3}
                        />
                        :
                        <TextInput
                          style={styles.input1}
                          editable={false}
                          placeholder="QTY"
                          placeholderTextColor="#A9A9A9"
                          keyboardType='numeric'
                          maxLength={4}
                          onChangeText={(qty3) => this.setState({ qty3 })}
                          value={this.state.qty3}
                        />
                      }
                    </View>
                  </View>
                  <View style={{ flexDirection: 'row' }}>
                    <View style={{ flex: 0.75, }}>
                      {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_en[0].rateno}</Text>) :
                        (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#000', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, bottom: 10 }}>{lan_ch[0].rateno}</Text>)}
                    </View>
                    <View style={{ flex: 0.75, }}>
                      <Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, bottom: 10 }}>{this.state.rateno2}</Text>
                    </View>
                  </View>
                </View>
              }
              {/* <View style={{ flexDirection: 'row'}}>
        <View style={{ flex:0.75,  }}> */}
              {/* <Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>Rate No.</Text> */}
              {/* {this.state.language != "lang_ch" ? (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_en[0].rateno2}</Text>) :
                            (<Text style={{ alignContent: 'center', justifyContent: 'center', color: '#112d51', fontFamily: 'Montserrat-Bold', fontSize: 13, left: 20, marginVertical: '4%' }}>{lan_ch[0].rateno2}</Text>)}
      </View> */}
              {/* <View style={{ flex:0.75,  }}>
              <Text style={{ alignContent: 'center', justifyContent: 'center', color: 'black', fontFamily: 'Montserrat-Bold', fontSize: 13, right: 90, marginVertical: '4%' }}>{this.state.rateno2}</Text>
      </View> */}
              {/* </View> */}
              {/* <LinearGradient colors={['#F9C773', '#FDB53B', '#FCA004']} style={{ zIndex: -1, flexDirection: 'column', flex: 0.3, borderRadius: 10, marginHorizontal: 30, marginVertical: 10, paddingVertical: 5 }}> */}
              <View style={{ height: "10%", top: "1%" }}>
                {this.state.generatebookno.length == '' ? (<TouchableOpacity onPress={this.saveBooking.bind(this)} style={{
                  flex: 0.5,
                  flexDirection: 'column',
                  width: '50%',
                  backgroundColor: '#4F6878',
                  height: '100%',
                  //    marginHorizontal:30,
                  //    marginVertical:5,
                  left: '27%',
                  top: '2%',
                  borderRadius: 0,
                  alignItems: 'center',
                  justifyContent: 'center'
                }}>
                  {/* <Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>BOOK</Text> */}
                  {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>{lan_en[0].book}</Text>) :
                    (<Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>{lan_ch[0].book}</Text>)}
                </TouchableOpacity>) : (<TouchableOpacity onPress={this.newbook.bind(this)} style={{
                  flex: 0.5,
                  flexDirection: 'column',
                  width: '50%',
                  backgroundColor: '#5F8D48',
                  height: '80%',
                  //    marginHorizontal:30,
                  //    marginVertical:5,
                  left: '27%',
                  top: '2%',
                  borderRadius: 0,
                  alignItems: 'center',
                  justifyContent: 'center'
                }}>
                  {/* <Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>New Book</Text> */}
                  {this.state.language != "lang_ch" ? (<Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>{lan_en[0].newbook}</Text>) :
                    (<Text style={{ fontSize: 15, color: '#ffff', fontFamily: 'Montserrat-Bold' }}>{lan_ch[0].newbook}</Text>)}
                </TouchableOpacity>)}
              </View>
              <View style={{ marginVertical: 50 }}>
                <Text> </Text>
              </View>

            </ScrollView >
          </View>
          <View style={{ flex: 0.1, flexDirection: 'column' }}>
            <PageFooter navigation={this.props.navigation} page={'schedule'}>

            </PageFooter>
          </View>
          {/* </LinearGradient> */}
        </KeyboardAvoidingView>
      </View>


    );
  }
}
export default Booking;
const styles = StyleSheet.create({
  input: {
    height: 41,
    width: '90%',
    left: 14,
    fontSize: 13,
    color: '#000000',
    fontFamily: 'Montserrat-Medium',
  },
  input1: {
    height: 41,
    width: '90%',
    left: 14,
    fontSize: 13,
    color: '#A9A9A9',
    borderColor: "lightgrey",
    fontFamily: 'Montserrat-Medium',
  },
  input2: {
    height: 41,
    width: '90%',
    left: 14,
    fontSize: 13,
    color: '#000000',
    fontFamily: 'Montserrat-Medium',
  },
  list: {
    flex: 0.85,
    marginHorizontal: '2%',
    // width: '90%',
    marginVertical: '2%',
    elevation: 5,
    height: "100%",
    paddingVertical: 10,
    // backgroundColor: colors[index % colors.length],
    backgroundColor: '#fff',
    borderRadius: 5,
    borderColor: "#000",
    height: "100%",
    elevation: 10,
    shadowColor: '#000',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity: 0.4,
    shadowRadius: 3,
    // borderWidth:1
    // left:"2%"
  },
  calenderbox: {

    width: '100%',
    backgroundColor: '#ffff',
    height: 40,
    borderRadius: 5,
    borderColor: '#ffff',
    borderWidth: 1,
    zIndex: -1,

  },
  container: {
    width: '92%',
    marginHorizontal: '4%',
    // paddingVertical:20
    // marginVertical: '1%',

    // backgroundColor:'#112d51'



  },
  routingcontainer: {
    zIndex: -1,
    backgroundColor: '#ffff',
    height: 150,
    borderRadius: 10,
    borderColor: '#112d51',
    borderWidth: 0.5,
    marginHorizontal: '3%'
  },
  glasspane: {
    flex: 1,
    backgroundColor: 'rgba(52, 52, 52, 0.8)',

    width: '100%'
  },
  activityIndicatorWrapper: {
    flex: 0.5,
    backgroundColor: '#FFFFFF',
    marginHorizontal: '0%',
    justifyContent: 'center',
    alignItems: 'center',

    width: '100%',
    height: "100%",

    top: "15%",
    // borderColor: '#ecf5f9',
    borderRadius: 8,
    justifyContent: 'center',

  },

})