Untitled

mail@pastecode.io avatar
unknown
plain_text
3 years ago
65 kB
1
Indexable
Never
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TextInput,
    Button,
    FlatList,
    TouchableHighlight,
    TouchableOpacity,
    Image,
    ImageBackground,
    Linking,
    Alert, Modal, AsyncStorage
} from 'react-native';
import Icon1 from 'react-native-vector-icons/Ionicons';
import { lan_en, lan_ch } from '../Component/Language';
import { Header, Left, Right, Body, Footer, Container } from 'native-base';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { ProgressDialog } from 'react-native-simple-dialogs';
import Service from '../Service/Service';
import { ScrollView } from 'react-native-gesture-handler';
import Icon5 from 'react-native-vector-icons/MaterialCommunityIcons'
// import PageFooter from '../View/PageFooter';
import moment from 'moment';
import Loader from '../Component/Loader';
import Ecom_service from '../Service/Ecom_service';
import Ecom_Bookingdetails from './Ecom_Bookingdetails';
const sv = new Ecom_service();
var obj =[];
var obj1 =[];
var obj2 =[];
class Ecom_BookingView extends React.Component {
    onLogin1() {
        // this.props.navigation.navigate('Home', { parent: 'HoseUsage' });
        // this.props.navigation.openDrawer();
        this.setState({ isVisible: !this.state.isVisible })
    }
    
    onratessidemenu()
    {
        if(this.state.viewcontent == true){
        this.setState({viewcontent : false})
        }else{
            this.setState({viewcontent : true})
        }
    }

    state = {
        searchTerm: '',
        newsdetails: [],
        isVisible: false,
        name: '',
        progressVisible: false,
        isLoading: false,
        language: '',
        shipmmentdetails: [],
        viewcontent:false,
        custcode:'',
        custname:'',
        bookingview:[],
        bookingviewcargo:[],
        bookingviewroute:[]
    }
    componentDidMount() {
        console.log("BOOK NO ...",this.props.navigation.state.params.bookno,this.props.navigation.state.params.lrpbookno);
    sv.getecom_booking1(this.func2.bind(this),this.props.navigation.state.params.bookno,this.props.navigation.state.params.status,this.props.navigation.state.params.lrpecombookno,this.props.navigation.state.params.lrpbookno,this.props.navigation.state.params.appversion);
        // this.setState({ isLoading: true});
     
    }
    func2(response)
    {
        console.log("response view...",response.cargooutput);
      obj = JSON.parse(response.bkgoutput);
     this.setState({bookingview :obj})
     console.log("Booking View....",obj);
     obj1 = JSON.parse(response.cargooutput);
     this.setState({bookingviewcargo :obj1})
     console.log("Booking View....",obj1);
     obj2 = JSON.parse(response.routeoutput);
     this.setState({bookingviewroute :obj2})
     console.log("Booking View....",obj2);
     
    }
    
    render() {

        return (

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

<Header androidStatusBarColor="#112d51"
                    style={{
                        marginHorizontal: -2,
                        marginTop: -2,
                        backgroundColor: '#112d51',
                        height: 60,
                        bottom: 25
                    }}>
                    <Left>
                        <View style={{ flexDirection: 'row' }}>
                        <View style={{ flexDirection: 'column' }}>
                        <TouchableOpacity  onPress={() => this.props.navigation.navigate('Ecom_Bookingdetails')} style={{
                            position: 'relative',
                            width: "100%",
                            height: "100%",
                            right: "5%",
                        }} >
                          
                            <Icon style={{ fontSize: 30, top: "20%", color: '#ffffff' }} name="arrow-back" />
                        </TouchableOpacity>
                        </View>
                        <View style={{ flexDirection: 'column' ,top:"15%"}}>
                        {/* <Image resizeMode="contain"
                    source={require('../Images/Ecom/Tariff.png')} style={{ width: 35, height: 35}}
                      /> */}
                      </View>
                    </View>
                    </Left>
                    <Body >
                  
                    <Text style={{ fontSize: 15, color: '#ffffff', fontFamily: 'Montserrat-Bold', alignItems: "center",right:  Platform.OS == 'ios' ? "30%":15,width:"120%" }}>BOOKING</Text>
                     
                    </Body>
                    <Right>
                    {/* <Image resizeMode="contain"
                    source={require('../Images/icons/customerlogin.png')} style={{ width: 35, height: 35,tintColor:'#bbb'}}
                      /> */}
                    </Right>
                </Header>
              
                <Loader isLoading={this.state.isLoading} />
                <ScrollView>
                <View style={{ flex: 1 }}>
              
                    <FlatList
                        data={this.state.bookingview}
                        renderItem={({ item, some }) =>
                      
                            <View style={{
                                    position: 'relative',
                                    flexDirection: 'column',

                                    padding: 10,
                                    elevation: 5,

                                    backgroundColor: '#ffff',

                                    marginHorizontal: '3%',

                                    marginVertical: '1.5%',

                                    borderRadius: 0,
                                    borderTopColor: '#167bcd',
                                    borderTopWidth: 50,
                                    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 10,
    borderTopLeftRadius:10,
    borderTopRightRadius:10,
    width:"95%",
                            }}>
                               

<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold', color: '#fff', bottom:50,left:80}}>Master Details</Text>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Online BOOKING NO</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{this.props.navigation.state.params.bookno}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>LRP BOOKING NO</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{this.props.navigation.state.params.lrpbookno}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Agreement Party</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_bookingparty_desc}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Origin</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{this.props.navigation.state.params.origin}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Delivery</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_delivery}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Cargo Ready Date</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{(moment([item.ebook_date], 'YYYY-MM-DD mm:ss').format('DD-MMM-YYYY'))}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Haulage Origin</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>NA</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Haulage Delivery</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>NA</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Carriage Contract</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>CY/CY</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Rate Reference</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_rate_reference}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Agency Ref No.</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_agency_reference}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Ocean Freight</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>Prepaid</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Place of Final Receipt</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.podintransit}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>NAT Code</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebooking_nor}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Haulage Type</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_haulagetype}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Pickup Date</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_pickup_date}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Drop Date</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_drop_date}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Haulier Code</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_haulercode}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Customer PO</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.customerpo}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Release Type</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>Normal</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Export Reference</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.exportref}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Empty Place of Pickup</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.emptyPickup}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Date</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.date}</Text>
</View>
</View>



                       
                          </View>                 }
                    >
                    </FlatList> 

                    <FlatList
                        data={this.state.bookingviewroute}
                        renderItem={({ item, some }) =>
                            <View style={{
                                    flex: 1,
                                    position: 'relative',
                                    flexDirection: 'column',

                                    padding: 1,
                                    elevation: 5,

                                    backgroundColor: '#ffff',

                                    marginHorizontal: '3%',

                                    marginVertical: '1.5%',

                                    borderRadius: 0,
                                    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 10,
    borderTopLeftRadius:1,
    borderTopRightRadius:1,
    width:"95%",
                            }}>
                      
                    <View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#e1ad01',borderBottomWidth:40,bottom:30}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold',top:30, color: '#fff',left:80}}>Vessel Schedule Details</Text>
                         </View>
                                       <View style={{ flex: 0.3, flexDirection: 'row' ,marginHorizontal:"5%",bottom:20}}>

<View style={{ flex: 0.5, flexDirection: 'column'  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Departure</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', left:"35%"}}>Arrival</Text>
</View>
</View>
      <View style={{ flex: 0.3, flexDirection: 'row',marginHorizontal:"5%",bottom:20 }}>
  
<View style={{ flex: 0.5, flexDirection: 'column' }}>

                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{(moment([item.ETD1], 'YYYY-MM-DD mm:ss').format('DD-MMM-YYYY'))}</Text>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' }}>

<Image resizeMode="contain" source={require('../Images/menu_img/s4.png')} style={{ height: 20, width: 50, tintColor: '#000' }} />
</View>

<View style={{ flex: 0.5, flexDirection: 'column' }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', left:"15%" }}>{(moment([item.ETA1], 'YYYY-MM-DD mm:ss').format('DD-MMM-YYYY'))}</Text>
</View>
</View>

      <View style={{ flex: 0.3, flexDirection: 'row',marginHorizontal:"5%",bottom:20 }}>

<View style={{ flex: 0.5, flexDirection: 'column'  }}>

                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.loadport}</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column'}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', left:"35%" }}>{item.disport}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' ,marginHorizontal:"5%"}}>
<View style={{ flex: 0.1, flexDirection: 'column'  }}>
<Image resizeMode="contain" source={require('../Images/menu_img/b2.png')} style={{ height:17, width:17,tintColor:'#000'}} />
</View>

<View style={{ flex: 0.5, flexDirection: 'column'  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Vessel</Text>
</View>
<View style={{ flex: 0.0, flexDirection: 'column'  }}>
<Image resizeMode="contain" source={require('../Images/menu_img/compass.png')} style={{ height:17, width:17,tintColor:'#9e9e9e'}} />
</View>

<View style={{ flex: 0.5, flexDirection: 'column' }}>
    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', left:"15%"  }}>Transit Time</Text>
</View>
</View>
      <View style={{ flex: 0.3, flexDirection: 'row',marginHorizontal:"10%" }}>

<View style={{ flex: 0.5, flexDirection: 'column' }}>

                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.vessel}</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', marginHorizontal:"30%"}}>{Math.abs(new Date(item.ETD1)- new Date(item.ETA1) / (1000 * 60 * 60 * 24))
}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'row' ,marginHorizontal:"10%",}}>

<View style={{ flex: 0.5, flexDirection: 'column'  }}>

                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.voyage}{item.bound}</Text>
</View>

</View>

<TouchableOpacity   style={{
    position: 'relative',
    width: "100%",
    height: "100%",
  left:"25%"
}} >
  {item.transhipment == 0 ? 
  <Text style={{ fontSize: 15, fontFamily: 'Montserrat-Bold', color: 'blue',textDecorationLine:"underline" }}>Direct Shipment</Text>
:<Text style={{ fontSize: 15, fontFamily: 'Montserrat-Bold', color: 'blue',textDecorationLine:"underline" }}>TRANSHIPPMENT(1)</Text>}
  </TouchableOpacity>                    
</View>          


}
>
</FlatList> 
                    <FlatList
                        data={this.state.bookingview}
                        renderItem={({ item, some }) =>
                            <View style={{
                                    flex: 1,
                                    position: 'relative',
                                    flexDirection: 'column',

                                    padding: 10,
                                    elevation: 5,

                                    backgroundColor: '#ffff',

                                    marginHorizontal: '3%',

                                    marginVertical: '1.5%',

                                    borderRadius: 0,
                                    borderTopColor: '#167bcd',
                                    borderTopWidth: 50,
                                    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 10,
    borderTopLeftRadius:10,
    borderTopRightRadius:10,
    width:"95%",
                            }}>
                               

<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold', color: '#fff', bottom:50,left:80}}>Customer Details</Text>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#e1ad01',borderBottomWidth:40,bottom:30}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold',top:30, color: '#fff',left:80}}>Booking Party</Text>
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Name</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingname}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingaddress}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View> 
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address1</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingaddress1}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>City</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
<Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingcity_desc}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Country</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingcountry}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Telephone</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingphone}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Fax</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingfax}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Email</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingemail}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>State</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_bookingstate}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#e1ad01',borderBottomWidth:40,bottom:30}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold',top:30, color: '#fff',left:80}}>Agreement Party</Text>
                         </View>


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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Name</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreename}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreeaddress}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View> 
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address1</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreeaddress1}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>City</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreecity_desc}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Country</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreecountry_desc}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Telephone</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreephone}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Fax</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreefax}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Email</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreeemail}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>State</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_agreestate}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#e1ad01',borderBottomWidth:40,bottom:30}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold',top:30, color: '#fff',left:80}}>Shipper</Text>
                         </View>


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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Name</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shippername}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperaddress}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View> 
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address1</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperaddress}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>City</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shippercity}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Country</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shippercountry}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Telephone</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperphone}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Fax</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperfax}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Email</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperemail}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>State</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_shipperstate}</Text>
</View>
</View>
                         <View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#e1ad01',borderBottomWidth:40,bottom:30}}>
<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold',top:30, color: '#fff',left:80}}>Consignee</Text>
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Name</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneename}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneeaddress}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View> 
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Address1</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneeaddress1}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>City</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneecity_desc}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Country</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneecountry}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Telephone</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneephone}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Fax</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneefax}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Email</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneeemail}</Text>
</View>
</View>

<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>State</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>{item.ebook_consigneestate}</Text>
</View>
</View>
                         </View> 
                       
                    }
                    >
                    </FlatList> 
                    <FlatList
                        data={this.state.bookingviewcargo}
                        renderItem={({ item, some }) =>

<View style={{
                                    flex: 1,
                                    position: 'relative',
                                    flexDirection: 'column',

                                    padding: 10,
                                    elevation: 5,

                                    backgroundColor: '#ffff',

                                    marginHorizontal: '3%',

                                    marginVertical: '1.5%',

                                    borderRadius: 0,
                                    borderTopColor: '#167bcd',
                                    borderTopWidth: 50,
                                    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 10,
    borderTopLeftRadius:10,
    borderTopRightRadius:10,
    width:"95%",
                            }}>
                               

<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold', color: '#fff', bottom:50,left:80}}>Cargo Details</Text>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Equipment</Text>
</View>
{item.ebook_eqp_type == "D" ?
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>DRY</Text>
</View>
:
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_eqp_type}</Text>
</View>}
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Eqp. Qty.</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_eqp_qty}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Eqp. Size.</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_eqp}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Eqp. Status</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_equiptype}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>SOC</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.soc}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Hazardous</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_hazardous}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Cargo Weight</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_cargoweight}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Net Weight</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_netweight}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Tare Weight</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_tareweight}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Gross Weight</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_grossweight}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>

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

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Package Type</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_eqp_qty}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>No of Packages</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_eqp_qty}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Volume</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebook_cargovolume}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Commodity</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.ebooking_commodity}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         <View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>HS Code</Text>
</View>
<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%"}}>
                        <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#000', }}>{item.hscode}</Text>
</View>
</View>
<View style={{ flex: 0.3, flexDirection: 'column' ,borderBottomColor:'#bbb',borderBottomWidth:1}}>
                         
                         </View>
                         
                    
                       
                            </View>
                              }
                              >
                              </FlatList> 
                       
                              <FlatList
                        data={this.state.bookingview}
                        renderItem={({ item, some }) =>
<View style={{
                                    flex: 1,
                                    position: 'relative',
                                    flexDirection: 'column',

                                    padding: 10,
                                    elevation: 5,

                                    backgroundColor: '#ffff',

                                    marginHorizontal: '3%',

                                    marginVertical: '1.5%',

                                    borderRadius: 0,
                                    borderTopColor: '#167bcd',
                                    borderTopWidth: 50,
                                    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 10,
    borderTopLeftRadius:10,
    borderTopRightRadius:10,
    width:"95%",
                            }}>
                               

<Text style={{ fontSize: 17, fontFamily: 'Montserrat-Bold', color: '#fff', bottom:50,left:80}}>Addtional Remarks</Text>
<View style={{ flex: 0.3, flexDirection: 'row' }}>

<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Comments on Rates</Text>
</View>

</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
<TextInput
                  placeholder="Enter Comments"
                  onChangeText={data => this.setState({ textInputHolder: data })}
               
                  keyboardType="number-pad"
                  style={styles.textInputStyle}
                  underlineColorAndroid='transparent'
                />
</View>

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

<View style={{ flex: 0.5, flexDirection: 'column' ,marginVertical:"3%" }}>

    <Text style={{ fontSize: 12, fontFamily: 'Montserrat-Bold', color: '#9e9e9e', }}>Additional Information</Text>
</View>

</View>
<View style={{ flex: 0.5, flexDirection: 'column',marginVertical:"3%"  }}>
<TextInput
                  placeholder={item.ebook_status_remarks}
                  onChangeText={data => this.setState({ textInputHolder: data })}
               
                  keyboardType="number-pad"
                  style={styles.textInputStyle}
                  underlineColorAndroid='transparent'
                />
</View> 

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

            </View>
        )
    }
}
export default Ecom_BookingView
const styles = StyleSheet.create({
  textInputStyle: {
    textAlign: 'auto',
    height: 40,
    width: "100%",
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 7,
  },
})