@extends('layouts.main')

@section("content")
    <page-content :event="eventListener"></page-content>
@endsection

@section("components_declarations")
    @include("shippers.shipper_form")
    @include("carriers.carrier_form")
    @include("places.place_form")
    @include("vessels.vessel_form")
    <template id="page-content">
        <v-content>
            <v-container fluid fill-height>
                <v-layout justify-center>
                    <v-flex>

                        <template>
                            <v-card flat>
                                @include("bescs.alerts")
                                <v-card-title
                                        color="grey"
                                        class="grey lighten-2"
                                        light
                                        flat
                                >
                                    <span v-if="besc.id">{{__("Edit ECTN")}}</span>
                                    <span v-else>
                                        @if(isset($type) && $type == "export")
                                            {{__("New ECTN Export")}}
                                        @else
                                            @if(isset($type) && $type == "import")
                                                {{__("New ECTN Import")}}
                                            @else
                                                {{__("New ECTN Regularisation")}}
                                            @endif
                                        @endif
                                    </span>
                                    <v-spacer></v-spacer>
                                    <span v-if="besc.id">{{__("Besc:")}}@{{ besc.reference }} - &euro;@{{ besc.total }}</span>


                                </v-card-title>
                                <v-card-text>

                                    <template>
                                        <v-stepper v-model="step" vertical>

                                            <v-stepper-step :editable="besc.id" :complete="step > 1"
                                                            step="1">{{__("Shipper and Receiver")}}
                                            </v-stepper-step>
                                            <v-stepper-content step="1">
                                                <v-form ref="form" v-model="valid1" :lazy-validation="false">
                                                    <v-card

                                                    >
                                                        <v-card-text>
                                                            <v-layout row wrap>

                                                                <v-flex xs12>
                                                                    <v-autocomplete
                                                                            :disabled="besc.state === 2"
                                                                            v-model="besc.shipper_id"
                                                                            :items="shippers"
                                                                            :search-input.sync="search['shipper']"
                                                                            item-text="name"
                                                                            label="{{__("Shipper")}}"
                                                                            item-value="id"
                                                                            persistent-hint
                                                                            :auto-grow="true"
                                                                          :rules="shipperRules"
                                                                          clearable
                                                                    >{{--
                                                                    <template v-slot:append>
                                                                            <v-btn :disabled="besc.state === 2"
                                                                                   @click.prevent="newShipper('shipper',search['shipper'])"
                                                                                   icon
                                                                                   small >
                                                                                <v-icon color="primary">add</v-icon>
                                                                            </v-btn>
                                                                        </template>
                                                                        --}}
                                                                        <template v-slot:selection="data">
                                                                            <span>@{{data.item.name}}{{--  @{{data.item.address}}--}}</span>
                                                                        </template>
                                                                        <template v-slot:item="data">
                                                                            <span>@{{data.item.name}}{{--  @{{data.item.address}}--}}</span>
                                                                        </template>
                                                                        <template v-slot:no-data>
                                                                            <div><strong>@{{search['shipper']}}</strong> {{__("was not found")}}
                                                                                <v-btn 
                                                                                :disabled="besc.state === 2"
                                                                                        @mousedown="newShipper('shipper',search['shipper'])"
                                                                                         {{--   @click="newShipper('shipper',search['shipper'])"--}}
                                                                                       small deppressed
                                                                                       color="primary" >
                                                                                <v-icon >add</v-icon> {{__("Click to create")}}
                                                                            </v-btn></div>
                                                                        </template>
                                                                    </v-autocomplete>
                                                                </v-flex>
                                                                <v-flex xs12>
                                                                    <v-autocomplete
                                                                            :disabled="besc.state === 2"
                                                                            v-model="besc.consignee_id"
                                                                            :items="shippers"
                                                                            :search-input.sync="search['consignee']"
                                                                            item-text="name"
                                                                            label="{{__("Consignee")}}"
                                                                            item-value="id"
                                                                            persistent-hint
                                                                            :auto-grow="true"
                                                                            :rules="consigneeRules"
                                                                            clearable
                                                                    >{{--
                                                                        <template v-slot:append>
                                                                            <v-btn :disabled="besc.state === 2"
                                                                                   @click="newShipper('consignee')"
                                                                                   icon
                                                                                   small >
                                                                                <v-icon color="primary">add</v-icon>
                                                                            </v-btn>
                                                                        </template>--}}
                                                                        <template v-slot:selection="data">
                                                                            <span>@{{data.item.name}}  @{{data.item.address}}</span>
                                                                        </template>
                                                                        <template v-slot:item="data">
                                                                            <span>@{{data.item.name}}  @{{data.item.address}}</span>
                                                                        </template>
                                                                        <template v-slot:no-data>
                                                                            <span><strong>@{{search['consignee']}}</strong> {{__("was not found")}}
                                                                                <v-btn :disabled="besc.state === 2"
                                                                                @mousedown="newShipper('consignee',search['consignee'])"
                                                                                    {{--   @click="newShipper('consignee',search['consignee'])"--}}
                                                                                       small deppressed
                                                                                       color="primary" >
                                                                                <v-icon >add</v-icon> {{__("Click to create")}}
                                                                            </v-btn></span>
                                                                        </template>
                                                                    </v-autocomplete>
                                                                </v-flex>
                                                                <v-flex xs12>

                                                                            <v-autocomplete
                                                                                    :disabled="besc.state === 2"
                                                                                    v-model="besc.notify_party_id"
                                                                                    :items="shippers"
                                                                                    item-text="name"
                                                                                    label="{{__("Notify party")}}"
                                                                                    item-value="id"
                                                                                    persistent-hint
                                                                                    :auto-grow="true"
                                                                                    {{--:rules="notifyRules"--}}
                                                                                    :search-input.sync="search['notify']"
                                                                                    clearable
                                                                            >
                                                                                {{--<template v-slot:append>
                                                                                    <v-btn :disabled="besc.state === 2"
                                                                                           @click="newShipper('notify')"
                                                                                           icon
                                                                                           small >
                                                                                        <v-icon color="primary">add</v-icon>
                                                                                    </v-btn>
                                                                                </template>--}}
                                                                                <template v-slot:selection="data">
                                                                                    <span>@{{data.item.name}}  @{{data.item.address}}</span>
                                                                                </template>
                                                                                <template v-slot:item="data">
                                                                                    <span>@{{data.item.name}}  @{{data.item.address}}</span>
                                                                                </template>
                                                                                <template v-slot:no-data>
                                                                                    <span><strong>@{{search['notify']}}</strong> {{__("was not found")}}
                                                                                <v-btn :disabled="besc.state === 2"
                                                                                @mousedown="newShipper('notify',search['notify'])"
                                                                                       {{-- @click="newShipper('notify',search['notify'])"--}}
                                                                                       small deppressed
                                                                                       color="primary" >
                                                                                <v-icon>add</v-icon> {{__("Click to create")}}
                                                                            </v-btn></span>
                                                                                </template>
                                                                            </v-autocomplete>


                                                                </v-flex>

                                                            </v-layout>
                                                        </v-card-text>
                                                        <v-card-actions>
                                                            <v-btn
                                                                    color="primary"
                                                                    @click="step = 2"
                                                                    :disabled="!valid1"
                                                            >
                                                                {{__("Continue")}}
                                                            </v-btn>


                                                        </v-card-actions>
                                                    </v-card>
                                                </v-form>

                                            </v-stepper-content>

                                            <v-stepper-step :editable="besc.id" :complete="step > 2"
                                                            step="2">{{__("Shipment Details")}}
                                            </v-stepper-step>
                                            <v-stepper-content step="2">
                                                <v-form ref="form" v-model="valid2" :lazy-validation="false">
                                                    <v-card>
                                                        <v-card-text>
                                                            <v-layout row wrap>
                                                                <v-flex xs12 md6 pr-2>
                                                                    <v-autocomplete
                                                                            :disabled="besc.state === 2"
                                                                            v-model="besc.port_load_id"
                                                                            :items="portsLoad"
                                                                            item-text="name"
                                                                            label="{{__("Port of loading")}}"
                                                                            item-value="id"
                                                                            :search-input.sync="search_ports_load"
                                                                            persistent-hint
                                                                            :auto-grow="true"
                                                                            :rules="portloadingRules"
                                                                            clearable
                                                                    >
                                                                        <template v-slot:selection="data">
                                                                            <span>@{{data.item.name}}, @{{data.item.country}}</span>
                                                                        </template>
                                                                        <template v-slot:item="data">
                                                                            <span>@{{data.item.name}}, @{{data.item.country}}</span>
                                                                        </template>

                                                                    </v-autocomplete>

                                                                </v-flex>
                                                                <v-flex xs12 md6>
                                                                    <v-autocomplete
                                                                            :disabled="besc.state === 2"
                                                                            v-model="besc.port_discharge_id"
                                                                            :items="portsDischarge"
                                                                            item-text="name"
                                                                            label="{{__("Port of discharge")}}"
                                                                            item-value="id"
                                                                            :search-input.sync="search_ports_discharge"
                                                                            persistent-hint
                                                                            :auto-grow="true"
                                                                            :rules="portdischargeRules"
                                                                            clearable
                                                                    >
                                                                        <template v-slot:selection="data">
                                                                            <span>@{{data.item.name}}, @{{data.item.country}}</span>
                                                                        </template>
                                                                        <template v-slot:item="data">
                                                                            <span>@{{data.item.name}}, @{{data.item.country}}</span>
                                                                        </template>
                                                                    </v-autocomplete>

                                                                </v-flex>
                                                                <v-flex xs12 md6 pr-2>
                                                                            <v-autocomplete
                                                                                    :disabled="besc.state === 2"
                                                                                    v-model="besc.vessel_id"
                                                                                    :items="vessels"
                                                                                    item-text="name"
                                                                                    label="{{__("Vessel")}}"
                                                                                    item-value="id"
                                                                                    persistent-hint
                                                                                    :auto-grow="true"
                                                                                    :rules="vesselRules"
                                                                                    :search-input.sync="search['vessel']"
                                                                                    clearable
                                                                            >

                                                                                <template v-slot:no-data>
                                                                                    <span><strong>@{{search['vessel']}}</strong> {{__("was not found")}}
                                                                                <v-btn :disabled="besc.state === 2"
                                                                                       @mousedown="newVessel(search['vessel'])"
                                                                                       small deppressed
                                                                                       color="primary" >
                                                                                <v-icon>add</v-icon> {{__("Click to create")}}
                                                                            </v-btn></span>
                                                                                </template>
                                                                            </v-autocomplete>

                                                                </v-flex>
                                                                <v-flex xs12 md6 >

                                                                            <v-autocomplete
                                                                                    :disabled="besc.state === 2"
                                                                                    v-model="besc.carrier_id"
                                                                                    :items="carriers"
                                                                                    item-text="name"
                                                                                    label="{{__("Carrier")}}"
                                                                                    item-value="id"
                                                                                    persistent-hint
                                                                                    :auto-grow="true"
                                                                                    {{--:rules="carrierRules"--}}
                                                                                    :search-input.sync="search['carrier']"
                                                                                    clearable
                                                                            >

                                                                                <template v-slot:no-data>
                                                                                    <span><strong>@{{search['carrier']}}</strong> {{__("was not found")}}
                                                                                <v-btn :disabled="besc.state === 2"
                                                                                       @mousedown="newCarrier(search['carrier'])"
                                                                                       small deppressed
                                                                                       color="primary" >
                                                                                <v-icon>add</v-icon> {{__("Click to create")}}
                                                                            </v-btn></span>
                                                                                </template>
                                                                            </v-autocomplete>

                                                                </v-flex>
                                                                <v-flex xs12 md6 pr-2>
                                                                    <v-dialog
                                                                            :disabled="besc.state === 2"
                                                                            ref="date_dialog"
                                                                            v-model="date_modal"
                                                                            :return-value.sync="besc.date_shipped"

                                                                            lazy
                                                                            full-width
                                                                            width="290px"
                                                                    >
                                                                        <v-text-field
                                                                                :disabled="besc.state === 2"
                                                                                slot="activator"
                                                                                v-model="besc.date_shipped"
                                                                                label="{{__("Date shipped on board")}}"
                                                                                prepend-icon="event"
                                                                                readonly
                                                                                {{--:rules="date_shippedRules"--}}
                                                                        ></v-text-field>
                                                                        <v-date-picker v-model="besc.date_shipped"
                                                                                       scrollable @input="$refs.date_dialog.save(besc.date_shipped)">
                                                                            {{--<v-spacer></v-spacer>
                                                                            <v-btn flat color="primary"
                                                                                   @click="date_modal = false">
                                                                                {{__("Cancel")}}
                                                                            </v-btn>
                                                                            <v-btn flat color="primary"
                                                                                   @click="$refs.date_dialog.save(besc.date_shipped)">
                                                                                {{__("OK")}}
                                                                            </v-btn>--}}
                                                                        </v-date-picker>
                                                                    </v-dialog>
                                                                </v-flex>
                                                                <v-flex xs12 md6 pr-2>
                                                                    <v-text-field
                                                                            :disabled="besc.state === 2"
                                                                            v-model="besc.bill_of_lading_number"
                                                                            label="{{__("Bill of lading Number")}}"
                                                                            :rules="bill_of_lading_numberRules"
                                                                    ></v-text-field>
                                                                </v-flex>
                                                                <v-flex xs12 md6 pr-2>
                                                                    <v-text-field :disabled="besc.state === 2"
                                                                                  v-model="besc.voyage_number"
                                                                                  label="{{__("Voyage Number")}}"
                                                                            {{--:rules="voyage_numberRules"--}}
                                                                    ></v-text-field>
                                                                </v-flex>
                                                                <v-flex xs12 md6>
                                                                    <v-autocomplete
                                                                            :disabled="besc.state === 2"
                                                                            v-model="besc.place_id"
                                                                            :items="places"
                                                                            item-text="name"
                                                                            label="{{__("Final place of delivery")}}"
                                                                            item-value="id"
                                                                            persistent-hint
                                                                            :auto-grow="true"
                                                                            {{--:rules="carrierRules"--}}
                                                                            :search-input.sync="search['place']"
                                                                    >
                                                                        <template v-slot:no-data>
                                                                            <span><strong>@{{search['place']}}</strong> {{__("was not found")}}
                                                                                <v-btn :disabled="besc.state === 2"
                                                                                       @mousedown="newPlace(search['place'])"
                                                                                       small deppressed
                                                                                       color="primary" >
                                                                                <v-icon>add</v-icon> {{__("Click to create")}}
                                                                            </v-btn></span>
                                                                        </template>
                                                                    </v-autocomplete>
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-card-text>
                                                        <v-card-actions>
                                                            <v-btn
                                                                    flat
                                                                    @click="step = 1"
                                                            >
                                                                {{__("Back")}}
                                                            </v-btn>
                                                            <v-spacer></v-spacer>
                                                            <v-btn
                                                            :loading="loadingSearch"
                                                                    color="primary"
                                                                    @click="submitShipmentDetails"
                                                                    :disabled="!valid2"
                                                            >
                                                                {{__("Continue")}}
                                                            </v-btn>

                                                        </v-card-actions>
                                                    </v-card>
                                                </v-form>
                                            </v-stepper-content>

                                            <v-stepper-step :editable="besc.id" :complete="step > 3"
                                                            step="3">{{__("Mode of shipment")}}
                                            </v-stepper-step>
                                            <v-stepper-content step="3">
                                                <v-form ref="form" v-model="valid3" :lazy-validation="false">
                                                    <v-card>
                                                        <v-card-text>
                                                            <template>
                                                                <v-expansion-panel>
                                                                    <v-expansion-panel-content
                                                                            expand-icon="mdi-menu-down"
                                                                    >
                                                                        <template v-slot:header>
                                                                            <v-checkbox
                                                                                    :disabled="besc.state === 2"
                                                                                    v-model="besc.shipment_method"
                                                                                    value="fcl_container"
                                                                                    label="I - {{__("_shipment_methods.fcl_container")}}"></v-checkbox>
                                                                        </template>
                                                                        <v-card>
                                                                            <v-card-text class="grey lighten-3">
                                                                                <v-layout row wrap>
                                                                                    @include("components.common_form_elements")
                                                                                    <v-flex xs12 mb-3>
                                                                                        <h4>{{__("Container numbers")}}
                                                                                            (@{{besc.containers.length}})</h4>
                                                                                    </v-flex>
                                                                                    <v-flex xs12
                                                                                            v-for="(container,index) in besc.containers">
                                                                                        <v-layout>
                                                                                            <v-flex shrink pr-1>
                                                                                                <v-text-field
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Container No")}}"
                                                                                                        v-model="container.container_number"
                                                                                                ></v-text-field>
                                                                                            </v-flex>
                                                                                            <v-flex shrink pr-1>
                                                                                                <v-text-field
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Seal")}}"
                                                                                                        v-model="container.seal"
                                                                                                ></v-text-field>
                                                                                            </v-flex>
                                                                                            <v-flex shrink pr-1>
                                                                                                <v-select
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Container Type")}}"
                                                                                                        :items="container_types"
                                                                                                        v-model="container.type"
                                                                                                ></v-select>
                                                                                            </v-flex>
                                                                                            <v-flex shrink pr-1>
                                                                                                <v-select
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Container Size")}}"
                                                                                                        :items="[{id:20,name:'20\''},{id:40,name:'40\''}]"
                                                                                                        item-text="name"
                                                                                                        item-value="id"
                                                                                                        v-model="container.size"
                                                                                                ></v-select>
                                                                                            </v-flex>
                                                                                            <v-flex shrink>
                                                                                                <v-btn
                                                                                                        :disabled="besc.state === 2"
                                                                                                        icon small
                                                                                                        @click="besc.containers.splice(index,1)">
                                                                                                    <v-icon
                                                                                                            color="red">
                                                                                                        close
                                                                                                    </v-icon>
                                                                                                </v-btn>
                                                                                            </v-flex>
                                                                                        </v-layout>
                                                                                    </v-flex>
                                                                                    <v-flex xs12>
                                                                                        <v-btn
                                                                                                :disabled="besc.state === 2"
                                                                                                small color="primary"
                                                                                                @click="besc.containers.push({})">{{__("Add container")}}</v-btn>

                                                                                        <v-btn
                                                                                            :disabled="besc.state === 2"
                                                                                            small color="info"
                                                                                            target="_blank"
                                                                                            href="{{asset(__("sample.csv"))}}">{{ __("Download sample csv file") }}</v-btn>

                                                                                        <v-btn
                                                                                            :disabled="besc.state === 2"
                                                                                            small color="success"
                                                                                            @click="trigger">{{__("Upload containers csv file")}}</v-btn>
                                                                                        <input type="file" style="display: none;" accept="*.csv" :multiple="false"
                                                                                               ref="fileInput" @change="onFileChange"/>
                                                                                    </v-flex>
                                                                                    <v-flex xs12>
                                                                                        <p class="font-italic">{{ __("The file must be a comma ',' seperated file.") }}</p>
                                                                                    </v-flex>
                                                                                </v-layout>
                                                                            </v-card-text>
                                                                        </v-card>
                                                                    </v-expansion-panel-content>
                                                                    <v-expansion-panel-content
                                                                            expand-icon="mdi-menu-down"
                                                                    >
                                                                        <template v-slot:header>
                                                                            <v-checkbox
                                                                                    :disabled="besc.state === 2"
                                                                                    v-model="besc.shipment_method"
                                                                                    value="consolidation"
                                                                                    label="II - {{__("_shipment_methods.consolidation")}}"></v-checkbox>
                                                                        </template>
                                                                        <v-card>
                                                                            <v-card-text class="grey lighten-3">
                                                                                <v-layout row wrap>
                                                                                    @include("components.common_form_elements")
                                                                                    <v-flex xs12 mb-3>
                                                                                        <h4>{{__("Container number")}}</h4>
                                                                                    </v-flex>
                                                                                    <v-flex xs12
                                                                                            v-for="(container,index) in consolidationcontainers">
                                                                                        <v-layout>
                                                                                            <v-flex shrink pr-1>
                                                                                                <v-text-field
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Container No")}}"
                                                                                                        v-model="container.container_number"
                                                                                                ></v-text-field>
                                                                                            </v-flex>
                                                                                            <v-flex shrink pr-1>
                                                                                                <v-text-field
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Seal")}}"
                                                                                                        v-model="container.seal"
                                                                                                ></v-text-field>
                                                                                            </v-flex>
                                                                                            <v-flex shrink pr-1>
                                                                                                <v-select
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Container Type")}}"
                                                                                                        :items="container_types"
                                                                                                        v-model="container.type"
                                                                                                ></v-select>
                                                                                            </v-flex>
                                                                                            <v-flex shrink pr-1>
                                                                                                <v-select
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Container Size")}}"
                                                                                                        :items="[{id:20,name:'20\''},{id:40,name:'40\''}]"
                                                                                                        item-text="name"
                                                                                                        item-value="id"
                                                                                                        v-model="container.size"
                                                                                                ></v-select>
                                                                                            </v-flex>
                                                                                            {{--<v-flex shrink>
                                                                                                <v-btn
                                                                                                        :disabled="besc.state === 2"
                                                                                                        icon small
                                                                                                        @click="besc.containers.splice(index,1)">
                                                                                                    <v-icon
                                                                                                            color="red">
                                                                                                        close
                                                                                                    </v-icon>
                                                                                                </v-btn>
                                                                                            </v-flex>--}}
                                                                                        </v-layout>
                                                                                    </v-flex>
                                                                                </v-layout>
                                                                            </v-card-text>
                                                                        </v-card>
                                                                    </v-expansion-panel-content>
                                                                    <v-expansion-panel-content
                                                                            expand-icon="mdi-menu-down"
                                                                    >
                                                                        <template v-slot:header>
                                                                            <v-checkbox
                                                                                    :disabled="besc.state === 2"
                                                                                    v-model="besc.shipment_method"
                                                                                    value="bulk"
                                                                                    label="III - {{__("_shipment_methods.bulk")}}"></v-checkbox>
                                                                        </template>
                                                                        <v-card>
                                                                            <v-card-text class="grey lighten-3">
                                                                                <v-layout row wrap>
                                                                                    @include("components.common_form_elements")
                                                                                        @if(isset($type) && $type == "export")
                                                                                            <v-flex xs12 md6>
                                                                                                <v-switch v-model='besc.petrole' :true-value='1' :false-value='0' label="{{__('Please check if crude oil.') }}" />
                                                                                            </v-flex>
                                                                                            <v-flex xs12 md6 pr-2>
                                                                                               <v-alert v-if='besc.petrole == 1' icon="mdi-alert" type="warning" value="1" dismissible color="warning">
                                                                                                    {{ __("Crude oil option checked")}}
                                                                                                </v-alert>
                                                                                                                                                                                    
                                                                                            </v-flex>
                                                                                        @endif
                                                                                </v-layout>
                                                                            </v-card-text>
                                                                        </v-card>
                                                                    </v-expansion-panel-content>
                                                                    <v-expansion-panel-content
                                                                            expand-icon="mdi-menu-down"
                                                                    >
                                                                        <template v-slot:header>

                                                                            <v-checkbox
                                                                                    :disabled="besc.state === 2"
                                                                                    v-model="besc.shipment_method"
                                                                                    value="ro_ro"
                                                                                    label="IV - {{__("_shipment_methods.ro_ro")}}"></v-checkbox>
                                                                        </template>
                                                                        <v-card>
                                                                            <v-card-text class="grey lighten-3">
                                                                                <v-layout row wrap>
                                                                                    @include("components.common_form_elements")
                                                                                    <v-flex xs12 mb-3>
                                                                                        <h4>{{__("Chassis numbers")}}
                                                                                            (@{{besc.vehicles.length}})</h4>
                                                                                    </v-flex>
                                                                                    <v-flex xs12
                                                                                            v-for="(vehicle,index) in besc.vehicles">
                                                                                        <v-layout>
                                                                                            <v-flex shrink pr-1>
                                                                                                <v-text-field
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Chassi no")}}"
                                                                                                        v-model="vehicle.chassi"
                                                                                                ></v-text-field>
                                                                                            </v-flex>
                                                                                            <v-flex shrink pr-1>
                                                                                                <v-text-field
                                                                                                        type="number"
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Gross weight")}}"
                                                                                                        v-model="vehicle.weight"
                                                                                                        suffix="kg"
                                                                                                ></v-text-field>
                                                                                            </v-flex>
                                                                                            <v-flex grow pr-1>
                                                                                                <v-text-field
                                                                                                        :disabled="besc.state === 2"
                                                                                                        label="{{__("Description")}}"
                                                                                                        v-model="vehicle.description"
                                                                                                ></v-text-field>
                                                                                            </v-flex>

                                                                                            <v-flex shrink>
                                                                                                <v-btn
                                                                                                        :disabled="besc.state === 2"
                                                                                                        icon small
                                                                                                        @click="besc.vehicles.splice(index,1)">
                                                                                                    <v-icon
                                                                                                            color="red">
                                                                                                        close
                                                                                                    </v-icon>
                                                                                                </v-btn>
                                                                                            </v-flex>
                                                                                        </v-layout>
                                                                                    </v-flex>
                                                                                    <v-flex xs12>
                                                                                        <v-btn
                                                                                                :disabled="besc.state === 2"
                                                                                                small color="primary"
                                                                                                @click="besc.vehicles.push({})">{{__("Add Vehicles")}}</v-btn>
                                                                                    </v-flex>
                                                                                </v-layout>
                                                                            </v-card-text>
                                                                        </v-card>
                                                                    </v-expansion-panel-content>

                                                                </v-expansion-panel>
                                                            </template>
                                                        </v-card-text>

                                                        <v-card-actions>
                                                            <v-btn
                                                                    flat
                                                                    @click="step = 2"
                                                            >
                                                                {{__("Back")}}
                                                            </v-btn>
                                                            <v-spacer></v-spacer>
                                                            <v-btn
                                                                    color="primary"
                                                                    @click="validateStep3"
                                                                    :disabled="!valid3"

                                                            >
                                                                {{__("Continue")}}
                                                            </v-btn>

                                                        </v-card-actions>
                                                    </v-card>
                                                </v-form>

                                            </v-stepper-content>

                                            <v-stepper-step :editable="besc.id" :complete="step > 4"
                                                            step="4">{{__("Description of goods")}}
                                            </v-stepper-step>
                                            <v-stepper-content step="4">
                                                <v-form ref="form" v-model="valid4" lazy-validation>
                                                    <v-card>
                                                        <v-card-text>
                                                            <v-layout row wrap>
                                                                <v-flex xs12>
                                                                    <v-textarea :disabled="besc.state === 2" box
                                                                                v-model="besc.description"
                                                                                label="{{__("Description of Goods")}}"

                                                                    ></v-textarea>
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-card-text>
                                                        <v-card-actions>
                                                            <v-btn
                                                                    flat
                                                                    @click="step = 3"
                                                            >
                                                                {{__("Back")}}
                                                            </v-btn>
                                                            <v-spacer></v-spacer>
                                                            <v-btn
                                                                    color="primary"
                                                                    @click="step = 5"
                                                                    :disabled="!valid4"
                                                            >{{__("Continue")}}
                                                            </v-btn>

                                                        </v-card-actions>
                                                    </v-card>
                                                </v-form>

                                            </v-stepper-content>

                                            <v-stepper-step :editable="besc.id" :complete="step > 5"
                                                            step="5">{{__("Freight and Charges")}}
                                            </v-stepper-step>
                                            <v-stepper-content step="5">
                                                <v-form ref="form" v-model="valid5" class="currencies" lazy-validation>
                                                    <v-card>
                                                        <v-card-text>
                                                            <v-layout row wrap>

                                                                <v-flex xs12 v-if="besc.fob_costs_currency_id != null">
                                                                    <v-btn  flat small color="primary" @click="applyCurrency">{{__("Same currency as FOB Currency")}}</v-btn>
                                                                </v-flex>
                                                                <v-flex xs12 md6 pr-2>
                                                                    <v-autocomplete
                                                                            :disabled="besc.state === 2"
                                                                            v-model="besc.incoterm_id"
                                                                            :items="incoterms"
                                                                            item-text="name"
                                                                            label="{{__("Incoterm")}}"
                                                                            item-value="id"
                                                                            persistent-hint
                                                                            :auto-grow="true"
                                                                            :rules="incotermRules"

                                                                    >
                                                                    </v-autocomplete>

                                                                </v-flex>

                                                                <v-flex xs12 md6 pr-2>
<v-layout row wrap>
    <v-flex xs6>
        <v-text-field
                                                                            :disabled="besc.state === 2"
                                                                            label="{{__("FOB Costs")}}"
                                                                            type="number"
                                                                            v-model="besc.fob_costs"
                                                                            {{--  :rules="fob_costsRules"--}}

                                                                            class="pr-1"
                                                                    >
                                                                        <template v-slot:append>
                                                                            
                                                                        </template>
                                                                    </v-text-field>
    </v-flex>
    <v-flex xs6>
        <v-autocomplete
                                                                                    :disabled="besc.state === 2"
                                                                                    v-model="besc.fob_costs_currency_id"
                                                                                    :items="currencies"
                                                                                    item-text="code"
                                                                                    item-value="id"
                                                                                    :dense="true"
                                                                                    :hide-details="true"
                                                                                    label="{{__("Currency")}}"
                                                                                    clearable

                                                                            >
                                                                                <template v-slot:item="data">
                                                                                    <span>@{{data.item.code}} - @{{data.item.name}}</span>
                                                                                </template>
                                                                                <template v-slot:selection="data">
                                                                                    <span>@{{data.item.code}}</span>
                                                                                </template>
                                                                            </v-autocomplete>
    </v-flex>
</v-layout>
                                                                    

                                                                </v-flex>
                                                                <v-flex xs12 md6 pr-2>
                                                                    <v-layout row wrap>
                                                                        <v-flex xs6>
                                                                             <v-text-field
                                                                                    :disabled="besc.state === 2"
                                                                                    label="{{__("Sea freight")}}"
                                                                                    type="number"
                                                                                    v-model="besc.sea_freight"
                                                                                    {{-- :rules="sea_freightRules"--}}
                                                                                    class="pr-1"
                                                                            >
                                                                                <template v-slot:append>
                                                                                    
                                                                                </template>
                                                                            </v-text-field>
                                                                        </v-flex>
                                                                        <v-flex xs6>
                                                                            <v-autocomplete
                                                                                            :disabled="besc.state === 2"
                                                                                            v-model="besc.sea_freight_currency_id"
                                                                                            :items="currencies"
                                                                                            item-text="code"
                                                                                            label="{{__("Currency")}}"
                                                                                            item-value="id"
                                                                                            :dense="true"
                                                                                            :hide-details="true"
                                                                                            clearable
                                                                                    >
                                                                                        <template v-slot:item="data">
                                                                                            <span>@{{data.item.code}} - @{{data.item.name}}</span>
                                                                                        </template>
                                                                                        <template v-slot:selection="data">
                                                                                            <span>@{{data.item.code}}</span>
                                                                                        </template>
                                                                                    </v-autocomplete>
    </v-flex>
</v-layout>
                                                                 


                                                                </v-flex>
                                                                <v-flex xs12 md6 pr-2>

                                                                        <v-layout row wrap>
                                                                            <v-flex xs6>
                                                                                <v-text-field
                                                                                    :disabled="besc.state === 2"
                                                                                    label="{{__("Sea Insurance")}}"
                                                                                    type="number"
                                                                                    v-model="besc.sea_insurance"
                                                                                    {{--  :rules="fob_costsRules"--}}

                                                                                    class="pr-1"
                                                                            >
                                                                                <template v-slot:default="data">
                                                                                    @{{ data }}
                                                                                </template>
                                                                                
                                                                            </v-text-field>
                                                                            </v-flex>
                                                                            <v-flex xs6>
                                                                                <v-autocomplete
                                                                                            :disabled="besc.state === 2"
                                                                                            v-model="besc.sea_insurance_currency_id"
                                                                                            :items="currencies"
                                                                                            item-text="code"
                                                                                            item-value="id"
                                                                                            :dense="true"
                                                                                            :hide-details="true"
                                                                                            label="{{__("Currency")}}"
                                                                                            clearable
                                                                                    >
                                                                                        <template v-slot:item="data">
                                                                                            <span>@{{data.item.code}} - @{{data.item.name}}</span>
                                                                                        </template>
                                                                                        <template v-slot:selection="data">
                                                                                            <span>@{{data.item.code}}</span>
                                                                                        </template>
                                                                                    </v-autocomplete>
                                                                                </v-flex>
                                                                            </v-layout>
                                                                </v-flex>
                                                                <v-flex xs12 md6 pr-2>
                                                                    
                                                                    <v-layout row wrap>
                                                                            <v-flex xs6>
                                                                                <v-text-field
                                                                                    :disabled="besc.state === 2"
                                                                                    label="{{__("Others")}}"
                                                                                    type="number" v-model="besc.others"
                                                                                    class="pr-1"
                                                                            >
                                                                            </v-text-field>
                                                                            </v-flex>
                                                                            <v-flex xs6>
                                                                                <v-autocomplete
                                                                                            :width="70"
                                                                                            :disabled="besc.state === 2"
                                                                                            v-model="besc.others_currency_id"
                                                                                            :items="currencies"
                                                                                            item-text="code"
                                                                                            item-value="id"
                                                                                            :dense="true"
                                                                                            :hide-details="true"
                                                                                            clearable
                                                                                    >
                                                                                        <template v-slot:item="data">
                                                                                            <span>@{{data.item.code}} - @{{data.item.name}}</span>
                                                                                        </template>
                                                                                        <template v-slot:selection="data">
                                                                                            <span>@{{data.item.code}}</span>
                                                                                        </template>
                                                                                    </v-autocomplete>
                                                                                </v-flex>
                                                                            </v-layout>

                                                                    
                                                                </v-flex>
                                                                <v-flex xs12 md6 pr-2>
                                                                    
                                                                    <v-layout row wrap>
                                                                            <v-flex xs6>
                                                                                 <v-text-field
                                                                                    :disabled="besc.state === 2"
                                                                                    label="{{__("Commercial Invoice value")}}"
                                                                                    type="number"
                                                                                    v-model="besc.commercial_invoice_value"
                                                                                    {{--:rules="commercial_invoice_valueRules"--}}
                                                                                    class="pr-1"
                                                                            >
                                                                            </v-text-field>
                                                                            </v-flex>
                                                                            <v-flex xs6>
                                                                                <v-autocomplete
                                                                                            :disabled="besc.state === 2"
                                                                                            v-model="besc.commercial_invoice_value_currency_id"
                                                                                            :items="currencies"
                                                                                            item-text="code"
                                                                                            label="{{__("Currency")}}"
                                                                                            item-value="id"
                                                                                            :dense="true"
                                                                                            :hide-details="true"
                                                                                            clearable
                                                                                    >
                                                                                        <template v-slot:item="data">
                                                                                            <span>@{{data.item.code}} - @{{data.item.name}}</span>
                                                                                        </template>
                                                                                        <template v-slot:selection="data">
                                                                                            <span>@{{data.item.code}}</span>
                                                                                        </template>
                                                                                    </v-autocomplete>
                                                                                </v-flex>
                                                                            </v-layout>

                                                                   
                                                                </v-flex>
                                                            </v-layout>
                                                        </v-card-text>
                                                        <v-card-actions>
                                                            <v-btn
                                                                    flat
                                                                    @click="step = 4"
                                                            >
                                                                {{__("Back")}}
                                                            </v-btn>
                                                            <v-spacer></v-spacer>
                                                            <v-btn
                                                                    color="primary"
                                                                    @click="step = 6;current_action='charges_save';save"
                                                            >
                                                                {{__("Continue")}}
                                                            </v-btn>

                                                        </v-card-actions>
                                                    </v-card>
                                                </v-form>

                                            </v-stepper-content>

                                            <v-stepper-step step="6" :editable="besc.id" :complete="step > 6">
                                                Documents
                                            </v-stepper-step>
                                            <v-stepper-content step="6">

                                                <v-card>
                                                    <v-card-text>
                                                        <v-layout row wrap>
                                                            <v-flex xs12 mb-3>
                                                                <h4>{{__("Attached documents")}}
                                                                    (@{{besc.documents.length}})</h4>
                                                            </v-flex>
                                                            <v-flex xs12
                                                                    v-for="(doc,index) in besc.documents">
                                                                <v-layout>

                                                                    <v-flex shrink pr-1>
                                                                        <v-select
                                                                                :disabled="besc.state === 2"
                                                                                label="{{__("Document Type")}}"
                                                                                item-value="id"
                                                                                item-text="name"
                                                                                :items="document_types"
                                                                                v-model="doc.type"
                                                                        ></v-select>
                                                                    </v-flex>

                                                                    <v-flex shrink>

                                                                        <file-upload :disabled="besc.state === 2"
                                                                                     v-if="besc.state !== 2"
                                                                                     v-model="doc.path"
                                                                                     label="{{__("Choose document")}}"
                                                                                     :path="doc.path"
                                                                                     folder="documents/" :btn="true"
                                                                                     :extra="false" :hide-label="false"
                                                                                     inputname="file"
                                                                                     :event="eventListener"
                                                                        ></file-upload>

                                                                    </v-flex>
                                                                    <v-flex shrink>
                                                                        <v-btn :disabled="besc.state === 2" icon small
                                                                               @click="besc.documents.splice(index,1)">
                                                                            <v-icon
                                                                                    color="red">
                                                                                close
                                                                            </v-icon>
                                                                        </v-btn>
                                                                    </v-flex>
                                                                </v-layout>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-btn :disabled="besc.state === 2" small
                                                                       color="primary"
                                                                       @click="besc.documents.push({})">{{__("Add document")}}</v-btn>
                                                            </v-flex>
                                                        </v-layout>
                                                    </v-card-text>
                                                    <v-card-actions>
                                                        <v-btn
                                                                flat
                                                                @click="step = 5"
                                                        >
                                                            {{__("Back")}}
                                                        </v-btn>
                                                        <v-spacer></v-spacer>
                                                        <v-btn
                                                                color="primary"
                                                                @click="step = 7;current_action='documents_save';save"

                                                        >
                                                            {{__("Continue")}}
                                                        </v-btn>

                                                    </v-card-actions>
                                                </v-card>


                                            </v-stepper-content>

                                            <v-stepper-step step="7" :editable="besc.id" :complete="step > 7">
                                                Contact
                                            </v-stepper-step>
                                            <v-stepper-content step="7">

                                                <v-card>
                                                    <v-card-text>
                                                        <v-layout row wrap>
                                                            <v-flex xs6 pr-2>
                                                                <v-text-field label="{{ __("Phone 1") }}" v-model="besc.phone1"></v-text-field>
                                                            </v-flex>
                                                            <v-flex xs6 >
                                                                <v-text-field label="{{ __("Phone 2") }}" v-model="besc.phone2"></v-text-field>
                                                            </v-flex>
                                                            <v-flex xs6 pr-2>
                                                                <v-text-field type="email" label="{{ __("Email 1") }}" v-model="besc.email1"></v-text-field>
                                                            </v-flex>
                                                            <v-flex xs6 >
                                                                <v-text-field type="email" label="{{ __("Email 2") }}" v-model="besc.email2"></v-text-field>
                                                            </v-flex>
                                                        </v-layout>
                                                    </v-card-text>
                                                    <v-card-actions>
                                                        <v-btn
                                                                flat
                                                                @click="step = 6"
                                                        >
                                                            {{__("Back")}}
                                                        </v-btn>
                                                        <v-spacer></v-spacer>
                                                        <v-btn
                                                                color="primary"
                                                                @click="step = 8;current_action='contacts_save';save"

                                                        >
                                                            {{__("Continue")}}
                                                        </v-btn>

                                                    </v-card-actions>
                                                </v-card>


                                            </v-stepper-content>

                                            <v-stepper-step :editable="besc.id"
                                                            step="8">{{__("Details")}}</v-stepper-step>
                                            <v-stepper-content step="8">

                                                <v-card>
                                                    <v-card-text>
                                                        <v-layout row wrap class="align-content-center text-center">

                                                            <v-flex xs12
                                                                    v-if="besc.reference">
                                                                <v-layout row justify-center>
                                                                    <v-flex shrink>
                                                                        {{__("Reference")}}
                                                                    </v-flex>
                                                                    <v-flex grow>
                                                                        <v-layout justify-end class="align-content-end">

                                                                            <strong>
                                                                                @{{ besc.reference }}
                                                                            </strong>
                                                                        </v-layout>

                                                                    </v-flex>
                                                                </v-layout>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-divider></v-divider>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-layout row justify-center>
                                                                    <v-flex shrink>
                                                                        {{__("Mode of shipment")}}
                                                                    </v-flex>
                                                                    <v-flex grow>
                                                                        <v-layout justify-end class="align-content-end">
                                                                            <strong
                                                                                    v-if="besc.shipment_method === 'fcl_container'">
                                                                                {{ __("_shipment_methods.fcl_container") }}
                                                                            </strong>
                                                                            <strong
                                                                                    v-if="besc.shipment_method === 'consolidation'">
                                                                                {{ __("_shipment_methods.consolidation") }}
                                                                            </strong>
                                                                            <strong
                                                                                    v-if="besc.shipment_method === 'ro_ro'">
                                                                                {{ __("_shipment_methods.ro_ro") }}
                                                                            </strong>
                                                                            <strong
                                                                                    v-if="besc.shipment_method === 'bulk'">
                                                                                {{ __("_shipment_methods.bulk") }}
                                                                            </strong>
                                                                        </v-layout>

                                                                    </v-flex>
                                                                </v-layout>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-divider></v-divider>
                                                            </v-flex>

                                                            <v-flex xs12>
                                                                <v-layout row justify-center>
                                                                    <v-flex shrink>
                                                                        {{__("Port of loading")}}
                                                                    </v-flex>
                                                                    <v-flex grow>
                                                                        <v-layout justify-end class="align-content-end">
                                                                            <strong>
                                                                                @{{
                                                                                getItem(portsLoad,'id',besc.port_load_id).name
                                                                                }}, @{{
                                                                                getItem(portsLoad,'id',besc.port_load_id).country
                                                                                }}
                                                                            </strong>
                                                                        </v-layout>

                                                                    </v-flex>
                                                                </v-layout>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-divider></v-divider>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-layout row justify-center>
                                                                    <v-flex shrink>
                                                                        {{__("Volume")}}
                                                                    </v-flex>
                                                                    <v-flex grow>
                                                                        <v-layout justify-end class="align-content-end">
                                                                            <strong v-if='besc.petrole == 1'>@{{ besc.volume | formatNumber
                                                                                }} bbl</strong>
                                                                             <strong v-else>@{{ besc.volume | formatNumber
                                                                                }} m<sup>3</sup></strong>
                                                                        </v-layout>

                                                                    </v-flex>
                                                                </v-layout>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-divider></v-divider>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-layout row justify-center>
                                                                    <v-flex shrink>
                                                                        {{__("Gross weight")}}
                                                                    </v-flex>
                                                                    <v-flex grow>
                                                                        <v-layout justify-end class="align-content-end">
                                                                            <strong>@{{ besc.gross_weight | formatNumber }} kg</strong>
                                                                        </v-layout>

                                                                    </v-flex>
                                                                </v-layout>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-divider></v-divider>
                                                            </v-flex>

                                                            <template v-if="besc.shipment_method === 'fcl_container'">


                                                                <v-flex xs12>
                                                                    <v-layout row justify-center>
                                                                        <v-flex shrink>
                                                                            {{__("Number of 20' containers")}}
                                                                        </v-flex>
                                                                        <v-flex grow>
                                                                            <v-layout justify-end
                                                                                      class="align-content-end">
                                                                                <strong>
                                                                                    @{{
                                                                                    besc.nb_containers_20
                                                                                    }}
                                                                                </strong>
                                                                            </v-layout>

                                                                        </v-flex>
                                                                    </v-layout>
                                                                </v-flex>
                                                                <v-flex xs12>
                                                                    <v-divider></v-divider>
                                                                </v-flex>
                                                                <v-flex xs12>
                                                                    <v-layout row justify-center>
                                                                        <v-flex shrink>
                                                                            {{__("Number of 40' containers")}}
                                                                        </v-flex>
                                                                        <v-flex grow>
                                                                            <v-layout justify-end
                                                                                      class="align-content-end">
                                                                                <strong>
                                                                                    @{{ besc.nb_containers_40 }}
                                                                                </strong>
                                                                            </v-layout>

                                                                        </v-flex>
                                                                    </v-layout>
                                                                </v-flex>
                                                                <v-flex xs12>
                                                                    <v-divider></v-divider>
                                                                </v-flex>
                                                            </template>
                                                            <template v-if="besc.shipment_method === 'ro_ro'">
                                                                <v-flex xs12>
                                                                    <v-layout row justify-center>
                                                                        <v-flex shrink>
                                                                            {{__("Number of vehicles 1")}}
                                                                        </v-flex>
                                                                        <v-flex grow>
                                                                            <v-layout justify-end
                                                                                      class="align-content-end">
                                                                                <strong>
                                                                                    @{{ besc.nb_vehicles1 }}
                                                                                </strong>
                                                                            </v-layout>

                                                                        </v-flex>
                                                                    </v-layout>
                                                                </v-flex>
                                                                <v-flex xs12>
                                                                    <v-divider></v-divider>
                                                                </v-flex>
                                                                <v-flex xs12>
                                                                    <v-layout row justify-center>
                                                                        <v-flex shrink>
                                                                            {{__("Number of vehicles 2")}}
                                                                        </v-flex>
                                                                        <v-flex grow>
                                                                            <v-layout justify-end
                                                                                      class="align-content-end">
                                                                                <strong>
                                                                                    @{{ besc.nb_vehicles2 }}
                                                                                </strong>
                                                                            </v-layout>

                                                                        </v-flex>
                                                                    </v-layout>
                                                                </v-flex>
                                                                <v-flex xs12>
                                                                    <v-divider></v-divider>
                                                                </v-flex>
                                                            </template>
                                                            <v-flex xs12>
                                                                <v-layout row justify-center>
                                                                    <v-flex shrink>
                                                                        {{__("Document fee")}}
                                                                    </v-flex>
                                                                    <v-flex grow>
                                                                        <v-layout justify-end class="align-content-end">
                                                                            <strong>@{{ besc.documents_fee | formatNumber
                                                                                }} EUR</strong>
                                                                        </v-layout>

                                                                    </v-flex>
                                                                </v-layout>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-divider></v-divider>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-layout row justify-center>
                                                                    <v-flex shrink>
                                                                        {{__("Fee per shipment")}}
                                                                    </v-flex>
                                                                    <v-flex grow>
                                                                        <v-layout justify-end class="align-content-end">
                                                                            <strong>@{{ besc.fee_per_shipment | formatNumber }} EUR</strong>
                                                                        </v-layout>

                                                                    </v-flex>
                                                                </v-layout>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-divider></v-divider>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-layout row justify-center>
                                                                    <v-flex shrink>
                                                                        {{__("Total")}}
                                                                    </v-flex>
                                                                    <v-flex grow>
                                                                        <v-layout justify-end class="align-content-end">
                                                                            <strong>@{{ besc.total | formatNumber
                                                                                }} EUR</strong>
                                                                        </v-layout>

                                                                    </v-flex>
                                                                </v-layout>
                                                            </v-flex>
                                                            <v-flex xs12>
                                                                <v-divider></v-divider>
                                                            </v-flex>
                                                        </v-layout>
                                                    </v-card-text>
                                                    <v-card-actions>
                                                        <v-btn
                                                                flat
                                                                @click="step = 7"
                                                        >
                                                            {{__("Back")}}
                                                        </v-btn>
                                                        <v-spacer></v-spacer>
                                                         <v-btn v-if="besc.id && besc.state <= 1" icon target="_blank" small flat outline color="info"
                                                               :href="'{{url("bescs/draft/","")}}/'+besc.id"
                                                               title="{{__("Draft")}}">
                                                            <v-icon small>print</v-icon>
                                                        </v-btn>
                                                        @if(isset($besc->id)  && $besc->user_id == Auth::id() && $besc->paid == 0 && Auth::user()->must_pay == 1 )
                                                            <v-btn
                                                                    color="success"
                                                                    href="{{route("bescs.pay",$besc)}}"
                                                                    :loading="loading"

                                                            >
                                                                {{__("Pay")}}
                                                            </v-btn>
                                                        @endif
                                                        @if(($type == "import" && Auth::user()->can_import) || ($type == "export" && Auth::user()->can_export) || ($type == "regularisation" && Auth::user()->can_regularisation))
                                                            <v-btn
                                                                    color="primary"
                                                                    @click="save"
                                                                    :loading="loading"

                                                            >
                                                                {{__("Save")}}
                                                            </v-btn>
                                                            <v-btn
                                                                    color="primary"
                                                                    @click="submit"
                                                                    :loading="loading"
                                                                    v-if="besc.state <= 0"

                                                            >
                                                                {{__("Submit")}}
                                                            </v-btn>
                                                        @endif
                                                        {{--                         @if(Auth::user()->role->name == "admin")--}}


                                                    </v-card-actions>
                                                </v-card>


                                            </v-stepper-content>

                                        </v-stepper>
                                    </template>
                                    @include("bescs.alerts")
                                </v-card-text>

                            </v-card>
                        </template>
                    </v-flex>
                </v-layout>
            </v-container>
            @if(Auth::user()->role->name == "admin")
                <v-dialog v-model="tariff_confirm" width="500px" persistent>
                    <v-card>
                        <v-card-title
                                class="grey lighten-4 title"
                        >
                            <span>{{__("Confirm")}}</span>
                            <v-spacer></v-spacer>
                            <v-btn icon @click="tariff_confirm = false">
                                <v-icon>close</v-icon>
                            </v-btn>
                        </v-card-title>
                        <v-container grid-list-sm class="pa-4">
                            <v-layout row wrap>
                                <v-flex xs12>
                                    <p>{{__("Are you to sure to set the following tariff?")}}</p>
                                    <p><strong>@{{getItem(tariffs,"id",besc.tariff_id).name}}</strong></p>
                                </v-flex>
                            </v-layout>
                        </v-container>
                        <v-card-actions>
                            <v-btn @click="tariff_confirm = false" flat class="default" small>{{__("Cancel")}}</v-btn>
                            <v-spacer></v-spacer>
                            <v-btn class="primary" small @click="changetariff">{{__("Yes Continue")}}</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <v-dialog v-model="tariff_dialog" width="500px" persistent>
                    <v-card>
                        <v-card-title
                                class="grey lighten-4 title"
                        >
                            <span>{{__("Please select a tariff")}}</span>
                            <v-spacer></v-spacer>
                            <v-btn icon @click="tariff_dialog = false">
                                <v-icon>close</v-icon>
                            </v-btn>
                        </v-card-title>
                        <v-container grid-list-sm class="pa-4">
                            <v-layout row wrap>
                                <v-flex xs12>
                                    <v-radio-group v-model="besc.tariff_id">
                                        <v-radio v-for="t in tariffs" :value="t.id" :label="t.name"></v-radio>
                                    </v-radio-group>
                                </v-flex>
                            </v-layout>
                        </v-container>
                        <v-card-actions>
                            <v-btn @click="tariff_dialog = false" flat class="default" small>{{__("Cancel")}}</v-btn>
                            <v-spacer></v-spacer>
                            <v-btn class="primary" small
                                   @click="tariff_dialog = false;tariff_confirm = true">{{__("Confirm")}}</v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <v-dialog v-model="confirm" width="300px">
                    <v-card>
                        <v-card-title
                                class="grey lighten-4 title"
                        >
                            {{__("Confirm")}}
                        </v-card-title>
                        <v-container grid-list-sm class="pa-4">
                            <v-layout row wrap>
                                <v-flex xs12 align-center justify-space-between>
                                    <v-layout align-center>
                                        @{{confirmObject.text}}
                                    </v-layout>
                                </v-flex>
                                <v-flex v-if="confirmObject.action === 'reject'" xs12 align-center
                                        justify-space-between>
                                    <v-textarea label="Comment" v-model="confirmObject.comment" box></v-textarea>
                                </v-flex>
                            </v-layout>
                        </v-container>
                        <v-card-actions>


                            <v-btn flat @click="confirm = !confirm">{{__("components.Cancel")}}</v-btn>
                            <v-spacer></v-spacer>
                            <v-btn flat color="primary" :loading="loading"
                                   @click="actionOnMultiple(confirmObject.action)">{{__("components.Continue")}}
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            @endif

            <v-dialog v-model="shipper_dialog" width="500px" persistent>
                <v-card>
                    <v-card-title
                            class="grey lighten-4 title"
                    >
                        <span>@{{ shipper_dialog_title }}</span>
                        <v-spacer></v-spacer>
                        <v-btn icon @click="shipper_dialog = false">
                            <v-icon>close</v-icon>
                        </v-btn>
                    </v-card-title>
                    <v-container grid-list-sm class="pa-4">
                        <shipper-form :shipper="{name:string}" :event="eventListener"/>
                    </v-container>

                </v-card>
            </v-dialog>

            <v-dialog v-model="vessel_dialog" width="500px" persistent>
                <v-card>
                    <v-card-title
                            class="grey lighten-4  title"
                    >
                        <span>{{__("New Vessel")}}</span>
                        <v-spacer></v-spacer>
                        <v-btn icon @click="vessel_dialog = false">
                            <v-icon>close</v-icon>
                        </v-btn>
                    </v-card-title>
                    <v-container grid-list-sm class="pa-4">
                        <vessel-form :vessel="{name:string}" :event="eventListener"/>
                    </v-container>

                </v-card>
            </v-dialog>

            <v-dialog v-model="carrier_dialog" width="500px" persistent>
                <v-card>
                    <v-card-title
                            class="grey lighten-4   title"
                    >
                        <span>{{__("New Carrier")}}</span>
                        <v-spacer></v-spacer>
                        <v-btn icon @click="carrier_dialog = false">
                            <v-icon>close</v-icon>
                        </v-btn>
                    </v-card-title>
                    <v-container grid-list-sm class="pa-4">
                        <carrier-form :carrier="{name:string}" :event="eventListener"/>
                    </v-container>

                </v-card>
            </v-dialog>

            <v-dialog v-model="place_dialog" width="500px" persistent>
                <v-card>
                    <v-card-title
                            class="grey lighten-4   title"
                    >
                        <span>{{__("New Final Place of Delivery")}}</span>
                        <v-spacer></v-spacer>
                        <v-btn icon @click="place_dialog = false">
                            <v-icon>close</v-icon>
                        </v-btn>
                    </v-card-title>
                    <v-container grid-list-sm class="pa-4">
                        <place-form :place="{name:string}" :event="eventListener"></place-form>
                    </v-container>

                </v-card>
            </v-dialog>
            
            <v-dialog v-model="samebescDialog" width="500px" persistent>
                <v-card v-if="samebesc != null && samebesc.id">
                    <v-card-title
                            class="grey lighten-4   title"
                    >
                        <span>{{__("ECTN already created")}}</span>
                        <v-spacer></v-spacer>
                        <v-btn icon @click="samebescDialog = false">
                            <v-icon>close</v-icon>
                        </v-btn>
                    </v-card-title>
                    <v-container grid-list-sm class="pa-4" >
                        <div>{{ __("A similar ECTN is already created.") }}</div>
                       <div>{{ __("Reference:") }} <strong>#@{{ samebesc.reference }}</strong></div>
                       <div>{{ __("Created at:") }} <strong>@{{ samebesc.created_at }}</strong></div>
                    </v-container>
                    <v-card-actions>
                         <v-btn @click="samebescDialog = false" flat target="_blanc" :href="'{{ route('bescs.show','')}}/'+samebesc.id">{{ __("View") }}</v-btn>
                           <v-spacer></v-spacer>
                          <v-btn @click="step = 3;samebescDialog = false" color="primary">{{ __("Continue") }}</v-btn>
                    </v-card-actions>

                </v-card>
            </v-dialog>


        </v-content>
    </template>
    <script>
        Vue.filter("formatNumber", function (value) {
            if(!value){
                return "0";
            }
            return value.toLocaleString(
                @if(app()->getLocale() == "en")
                'en-US',
                @else// leave undefined to use the browser's locale,
                'fr-FR',
                @endif// leave undefined to use the browser's locale,
                // or use a string like 'en-US' to override it.
                { minimumFractionDigits: 2 }
            ); // displaying other groupings/separators is possible, look at the docs
        });
        const PageContent = {
            template: "#page-content",
            components: {ShipperForm, VesselForm, CarrierForm,PlaceForm, FileUpload},
            data: () => ({
                step: 0,
                confirm: false,
                loadingSearch: false,
                samebesc: null,
                samebescDialog:false,
                confirmObject: {action: '', text: '', active: false},
                shipper_dialog_title: "New shipper",
                shipper_dialog_source: "shipper",
                search_shipper: "",
                search:['shipper','consignee','notify'],
                string: "",
                current_action:null,
                tariff_confirm: false,
                tariff_dialog: false,
                shipper_dialog: false,
                vessel_dialog: false,
                carrier_dialog: false,
                place_dialog: false,
                total_consolidation: 0,
                total_containers: 0,
                total_vehicles1: 0,
                total_vehicles2: 0,
                total_nb_vehicles1: 0,
                total_nb_vehicles2: 0,
                @if(Auth::user()->role->name == "admin")
                shippers:@json(\App\Shipper::all()),
                @else
                shippers:@json(\App\Shipper::where("user_id", Auth::id())->get()),
                @endif
                ports:@json(\App\Port::take(10)->get()),
                portsLoad:@json(\App\Port::take(10)->get()),
                portsDischarge:@json(\App\Port::take(10)->get()),
                search_ports_load:"",
                search_ports_discharge:"",

                vessels:@json(\App\Vessel::all()),
                carriers:@json(\App\Carrier::all()),
                places:@json(\App\Place::all()),
                currencies:@json(\App\Currency::all()),
                incoterms:@json(\App\Incoterm::all()),
                loading: false,
                @if(isset($besc))
                besc:{!! $besc !!},
                tariff:@json($besc->tariff),
                portLoad:@json($besc->loadport),
                portDischarge:@json($besc->dischargeport),
                @else
                tariff:@json($tariff ?? \App\Tariff::where("name",$type ?? 'import')->first()),
                besc: {type: '{{ $type ?? 'import' }}', containers: [{}], vehicles: [{}], documents: [{}]},
                @endif
                date_modal: false,
                container_types: [
                    @foreach(__("_containers") as $key=>$value)
                       '{{$key}}',
                    @endforeach
                ],
                document_types: [
                        @foreach(__("_documents") as $key=>$value)
                    {
                        id: '{{$key}}', name: '{{$value}}'
                    },
                    @endforeach
                ],
                valid1: false, valid2: false, valid3: false, valid4: false, valid5: false,
                shipperRules: [
                    v => !!v || '{{__("Shipper is required")}}',
                ],
                consigneeRules: [
                    v => !!v || '{{__("Consignee is required")}}',
                ],
                notifyRules: [
                    v => !!v || '{{__("Notify party is required")}}',
                ],
                portloadingRules: [v => !!v || '{{__("Port of loading is required")}}'],
                portdischargeRules: [v => !!v || '{{__("Port of discharge is required")}}'],
                vesselRules: [v => !!v || '{{__("Vessel is required")}}'],
                carrierRules: [v => !!v || '{{__("Carrier is required")}}'],
                placeRules: [v => !!v || '{{__("Carrier is required")}}'],
                date_shippedRules: [v => !!v || '{{__("Date shipped is required")}}'],
                bill_of_lading_numberRules: [v => !!v || '{{__("Bill of lading number is required")}}'],
                voyage_numberRules: [v => !!v || '{{__("Voyage number is required")}}'],
                final_place_of_deliveryRules: [v => !!v || '{{__("Final place of delivery is required")}}'],
                volumeRules: [v => !!v || '{{__("Volume is required")}}'],
                gross_weightRules: [v => !!v || '{{__("Gross weight is required")}}'],
                descriptionRules: [v => !!v || '{{__("Description of goods is required")}}'],
                incotermRules: [v => !!v || '{{__("Incoterm is required")}}'],
                currencyRules: [v => !!v || '{{__("Currency is required")}}'],
                sea_freightRules: [v => !!v || '{{__("Sea freight is required")}}'],
                fob_costsRules: [v => !!v || '{{__("FOB COSTS is required")}}'],
                commercial_invoice_valueRules: [v => !!v || '{{__("Commercial invoice value is required")}}'],
                @if(Auth::user()->role->name == "admin")
                tariffs: @json(\App\Tariff::all()),
                @endif
                con20: 0,
                con40: 0,
            }),
            props: {
                source: String,
                context: Object,
                item: {},

                event: {
                    type: Function,
                    default: function (event, data) {
                    }
                },

            },
            computed: {

                total: function () {
                    let p = getItem(this.ports, "id", this.besc.port_load_id);
                    let zone = p.zone;
                    let sum = 0;

                    if (this.besc.shipment_method === "fcl_container") {
                        this.con20 = 0;
                        this.con40 = 0;
                        this.con20 = this.getItems(this.besc.containers, "size", 20).length * this.tariff["container_20_" + zone];
                        this.con40 = this.getItems(this.besc.containers, "size", 40).length * this.tariff["container_40_" + zone];
                        this.total_containers = this.con20 + this.con40;
                        sum += this.con20 + this.con40;
                    }

                    if (this.besc.shipment_method === 'ro_ro') {
                        this.total_vehicles1 = 0;
                        this.total_vehicles2 = 0;
                        this.total_nb_vehicles1 = 0;
                        this.total_nb_vehicles2 = 0;
                        for (var i = 0; i < this.besc.vehicles.length; i++) {
                            var vehicle = this.besc.vehicles[i];
                            if (vehicle.weight < 5000) {
                                this.total_vehicles1 += parseInt(this.tariff["vehicle1_" + zone]);
                                this.total_nb_vehicles1 += 1;
                            } else {
                                this.total_vehicles2 += parseInt(this.tariff["vehicle2_" + zone]);
                                this.total_nb_vehicles2 += 1;
                            }
                        }
                        sum += this.total_vehicles1 + this.total_vehicles2;
                    }
                    if (this.besc.shipment_method === 'consolidation' || this.besc.shipment_method === 'bulk') {
                        this.total_consolidation
                        var v = Math.ceil(this.besc.volume);
                        var gw = Math.ceil(this.besc.gross_weight / 1000);
                        var price1 = v * this.tariff["bulk_" + zone];
                        var price2 = gw * this.tariff["bulk_" + zone];
                        if(this.besc.petrole == 1) {
                            price1 = v * this.tariff["petrole_" + zone];
                            price2 = v * this.tariff["petrole_" + zone];
                        }
                        this.total_consolidation = price1 > price2 ? price1 : price2;
                        this.total_consolidation = this.total_consolidation < this.tariff['minimum_amount'] ? this.tariff['minimum_amount'] : this.total_consolidation;
                        sum += this.total_consolidation;
                    }

                    return sum;
                },
                params(nv) {
                    return {
                        query: this.search_ports_load
                    };
                },
                params1(nv) {
                    return {
                        query: this.search_ports_discharge
                    };
                },
                consolidationcontainers() {
                    return [this.besc.containers[0] || {}];
                },
            },
            watch: {
                params: {
                    handler() {
                        if(this.search_ports_load && this.search_ports_load.length > 0){
                            this.getPortsLoad(this.search_ports_load);
                        }
                    },
                    deep: true
                },
                params1: {
                    handler() {
                        if(this.search_ports_discharge && this.search_ports_discharge.length > 0){
                            this.getPortsDischarge(this.search_ports_discharge);
                        }
                    },
                    deep: true
                },
               /* conso: {
                    handler() {
                        if (this.besc.shipment_method === 'consolidation'){
                            this.besc.containers = [this.besc.containers[0] || {}];
                        }
                    },
                    deep: true
                },*/
            },
            mounted() {

                if (localStorage.getItem('settings')) this.settings = JSON.parse(localStorage.getItem('settings')) || this.settings;
                this.pagination = {rowsPerPage: 10, page: 1};


            },
            created() {

                @if(isset($besc))
                    this.portsLoad.push(this.portLoad);
                    this.portsDischarge.push(this.portDischarge);
                @endif


            },
            methods: {
                trigger() {
                    this.$refs.fileInput.value = null;
                    this.$refs.fileInput.click()
                },
                 getFormData(files) {
                    const data = new FormData()
                    for (let file of files) {
                        data.append(this.inputname, file, file.name)
                    }
                    return data
                },
                onFileChange($event) {
                    const files = $event.target.files || $event.dataTransfer.files
                    var that = this;
                    // read first file to into a json array and then add to the form data
                    if (files && files[0]) {
                        var reader = new FileReader();
                        reader.addEventListener("load", () => {
                            console.log(reader.result.toString());
                            // this will then display a text file
                            let csv = reader.result;
                            // Convert the data to String and
                            // split it in an array
                            var array = csv.toString().split("\r");

                            // All the rows of the CSV will be
                            // converted to JSON objects which
                            // will be added to result in an array
                            let result = [];

                            // The array[0] contains all the
                            // header columns so we store them
                            // in headers array
                            let headers = array[0].split(",")
                            console.log(headers);
                            // Since headers are separated, we
                            // need to traverse remaining n-1 rows.
                            for (let i = 1; i < array.length - 1; i++) {
                                let obj = {}

                                // Create an empty object to later add
                                // values of the current row to it
                                // Declare string str as current array
                                // value to change the delimiter and
                                // store the generated string in a new
                                // string s
                                let str = array[i]
                                let s = ''

                                var o = str.split(',');
                                that.besc.containers.push({
                                    container_number: o[0] || null,
                                    seal: o[1] || null,
                                    type: o[2] || null,
                                    size: parseInt(o[3] || 0 ) || null,
                                });
                            }
                        }, false);
                        reader.readAsText(files[0])


                    }


                },
                applyCurrency(){

                    this.besc.others_currency_id =  this.besc.fob_costs_currency_id;
                    this.besc.commercial_invoice_value_currency_id = this.besc.fob_costs_currency_id;
                    this.besc.sea_insurance_currency_id = this.besc.fob_costs_currency_id;
                    this.besc.sea_freight_currency_id = this.besc.fob_costs_currency_id;

                },
                getPortsLoad(dis_str){
                  axios.get("{{route("ports.search")}}?&term="+dis_str).then((response)=>{
                      this.portsLoad = response.data;
                  })
                },
                getPortsDischarge(dis_str){
                  axios.get("{{route("ports.search")}}?&term="+dis_str).then((response)=>{
                      this.portsDischarge = response.data;
                  })
                },
                price(type) {
                    let p = getItem(this.ports, "id", this.besc.port_load_id);
                    let zone = p.zone;
                    return this.tariff[type + zone];
                },
                getItems(data, field, value) {
                    var d = [];
                    for (var i = 0; i < data.length; i++) {
                        if (data[i][field] === value) {
                            d.push(data[i]);
                        }
                    }
                    return d;
                },
                submitShipmentDetails(){
                    if(this.besc.id == null /*&& this.besc.voyage_number.trim().length > 3*/) {
                        this.loadingSearch = true;
                        axios.get("/besc/search",
                        {params: {voyage_number: this.besc.voyage_number, 
                        bill_of_lading_number: this.besc.bill_of_lading_number,
                        vessel_id: this.besc.vessel_id}})
                        .then((response)=>{
                            this.loadingSearch = false;
                            if(response.data && response.data.id){
                                this.samebesc = response.data;
                                this.samebescDialog = true;
                                console.log(this.response.data)
                            }else{
                                this.step = 3;
                            }
                        }).then(()=> {
                            this.loadingSearch = false;
                        })
                    }else{
                        this.step = 3;
                    }
                },
                validateStep3() {
                    if (!this.besc.volume && !this.besc.gross_weight) {
                        (this.event)("toast", {
                            message: "{{__("Please enter the shipment volume or gross weight ")}}",
                            color: "red"
                        });
                        return false;
                    }
                    if (!this.besc.shipment_method) {
                        (this.event)("toast", {message: "{{__("Please select a payment method")}}", color: "red"});
                        return false;
                    }
                    if (this.besc.shipment_method === "fcl_container") {
                        if (this.besc.containers.length === 0) {
                            (this.event)("toast", {message: "{{__("Enter containers")}}", color: "red"});
                            return false;
                        }
                        for (var i = 0; i < this.besc.containers.length; i++) {
                            var cont = this.besc.containers[i];
                            if (!cont.container_number) {
                                (this.event)("toast", {
                                    message: "{{__("Please enter container number for ")}}" + (i + 1),
                                    color: "red"
                                });
                                return false;
                            }

                            if (!cont.size) {
                                (this.event)("toast", {
                                    message: "{{__("Please enter container size for ")}}" + (i + 1),
                                    color: "red"
                                });
                                return false;
                            }
                        }
                    }
                    if (this.besc.shipment_method === "consolidation") {
                        if (this.consolidationcontainers.length === 0) {
                            (this.event)("toast", {message: "{{__("Enter container")}}", color: "red"});
                            return false;
                        }
                        for (var i = 0; i < 1; i++) {
                            var cont = this.consolidationcontainers[i];
                            if (!cont.container_number) {
                                (this.event)("toast", {
                                    message: "{{__("Please enter container number")}}",
                                    color: "red"
                                });
                                return false;
                            }

                            if (!cont.size) {
                                (this.event)("toast", {
                                    message: "{{__("Please enter container size")}}",
                                    color: "red"
                                });
                                return false;
                            }
                            this.besc.containers = [cont];
                        }
                    }
                    if (this.besc.shipment_method === "ro_ro") {
                        if (this.besc.vehicles.length === 0) {
                            (this.event)("toast", {message: "{{__("Enter vehicles")}}", color: "red"});
                            return false;
                        }
                        for (var i = 0; i < this.besc.vehicles.length; i++) {
                            var vehicle = this.besc.vehicles[i];
                            if (!vehicle.chassi) {
                                (this.event)("toast", {
                                    message: "{{__("Please enter vehicle number for ")}}" + (i + 1),
                                    color: "red"
                                });
                                return false;
                            }
                            if (!vehicle.weight) {
                                (this.event)("toast", {
                                    message: "{{__("Please enter vehicle gross weight for ")}}" + (i + 1),
                                    color: "red"
                                });
                                return false;
                            }
                            {{--if (!vehicle.description) {
                                (this.event)("toast", {
                                    message: "{{__("Please enter vehicle description for ")}}" + (i + 1),
                                    color: "red"
                                });
                                return false;
                            }
                            --}}

                        }
                    }

                    this.step = 4;
                    this.current_action = "shipment";
                    this.save();
                },
                testClick() {
                    console.log("clicked");
                },
                newShipper(source,text) {
                    console.log('new shipper');
                    this.shipper_dialog_source = source;
                    this.string = text;
                    switch (source) {
                        case "shipper":
                            this.shipper_dialog_title = "{{__("New Shipper")}}";
                            break;
                        case "consignee":
                            this.shipper_dialog_title = "{{__("New Consignee")}}";
                            break;
                        case "notify":
                            this.shipper_dialog_title = "{{__("New Notify Party")}}";
                            break;
                    }
                    this.shipper_dialog = true;
                },
                newVessel(text) {
                    this.string = text;
                    this.vessel_dialog = true;
                },
                newCarrier(text) {
                    this.string = text;
                    this.carrier_dialog = true;
                },
                newPlace(text) {
                    this.string = text;
                    this.place_dialog = true;
                },
                eventListener(event, data) {
                    switch (event) {
                        case "mastermind":
                            this.pushItem(data);
                            break;
                        case "shipper":

                            switch (this.shipper_dialog_source) {
                                case "shipper":
                                    this.besc.shipper_id = data.id;
                                    break;
                                case "consignee":
                                    this.besc.consignee_id = data.id;
                                    break;
                                case "notify":
                                    this.besc.notify_party_id = data.id;
                                    break;
                            }
                            this.shipper_dialog = false;
                            this.shippers.unshift(data);
                            break;
                        case "vessel":
                            this.besc.vessel_id = data.id;
                            this.vessel_dialog = false;
                            this.vessels.unshift(data);
                            break;
                        case "carrier":
                            this.besc.carrier_id = data.id;
                            this.carriers.unshift(data);
                            this.carrier_dialog = false;
                            break;
                        case "place":
                            this.besc.place_id = data.id;
                            this.places.unshift(data);
                            this.place_dialog = false;
                            break;
                        default:
                            (this.event)(event, data);

                            break;
                    }
                },
                getData() {
                    this.loading = true;
                    return new Promise((resolve, reject) => {
                        var _this = this;
                        const rowsPerPage = this.pagination.rowsPerPage;
                        const page = this.pagination.page;
                        // get by search keyword
                        axios.get("{{route("certificates.index")}}", {
                            params: {
                                term: this.search,
                                orderBy: this.pagination.sortBy,
                                page: this.pagination.page,
                                direction: this.pagination.descending ? "DESC" : "ASC",
                                per_page: this.pagination.rowsPerPage
                            }
                        })
                            .then(res => {
                                let items = res.data.data;


                                const total = res.data.total;
                                this.loading = false;
                                resolve({
                                    items,
                                    total
                                })

                            })
                            .catch(err => console.log(err))
                            .finally(() => _this.loading = false);
                    })


                },

                submit: function () {
                    this.besc.submit = true;
                    this.current_action = "besc_submitted";
                    this.persist('post', "{{route("bescs.store")}}", this.besc);
                },
                @if(Auth::user()->role->name == "admin")
                validate: function () {
                    this.besc.validate = true;
                    this.current_action = "besc_validated";
                    this.persist('post', "{{route("bescs.store")}}", this.besc);
                },
                changetariff: function () {
                    this.tariff_confirm = false;
                    this.besc.changetariff = true;
                    this.tariff = getItem(this.tariffs, "id", this.besc.tariff_id)
                    this.change_tariff = true;
                    this.current_action = "tariff_changed";
                    this.persist('post', "{{route("bescs.store")}}", this.besc);
                },
                activateItem() {

                    this.confirmObject.text = "{{__("Are you sure to activate?")}}";
                    this.confirmObject.action = "activate";
                    this.confirm = true;

                },
                deliverItem() {

                    this.confirmObject.text = "{{__("Are you sure to mark item as delivered?")}}";
                    this.confirmObject.action = "deliver";
                    this.confirm = true;

                },
                validateItem() {

                    this.confirmObject.text = "{{__("Are you sure to validate?")}}";
                    this.confirmObject.action = "validate";
                    this.confirm = true;

                },
                rejectItem() {
                    this.confirmObject.text = "{{__("Are you sure to reject?")}}";
                    this.confirmObject.action = "reject";
                    this.confirm = true;
                },
                actionOnMultiple(action) {


                    let _this = this;
                    let IDS = [this.besc.id];


                    this.loading = true;
                    var obj = {ids: IDS};
                    if (action === "reject") {
                        obj.comment = this.confirmObject.comment;
                    }
                    axios.post('/bescs/action/' + action, obj)
                        .then(response => {

                            if (response.data) {
                                let data = response.data;


                                this.besc = data[0];

                                _this.confirm = false;

                                this.loading = false;
                            } else {
                                this.snackbar.text = "{{__("An error occurred")}}";
                                this.snackbar.color = "red";
                                this.snackbar.active = true;
                                _this.confirm = false;
                                this.loading = false;
                            }
                        });
                },
                @endif
                save: function () {
                    this.persist('post', "{{route("bescs.store")}}", this.besc);
                },
                persist(method, uri, object) {


                    this.form = {};
                    var errors = false;
                    if (!object.shipper_id || object.shipper_id === null) {
                        (this.event)("toast", {message: "{{__("Please enter a shipper field")}}", color: 'red'});
                        return false;
                    }
                    if (!object.consignee_id || object.consignee_id === null) {
                        (this.event)("toast", {message: "{{__("Please enter a consignee field")}}", color: 'red'});
                        return false;
                    }

                    var _this = this;
                    this.loading = true;
                    axios[method](uri, object)
                        .then(response => {
                            _this.loading = false;

                            if (response.data.error) {
                                (_this.event)("toast", {message: response.data.message, color: 'red'});
                            } else {
                                this.besc = response.data;
                                history.pushState(null, 'Besc - '+this.besc.reference, "{{url("bescs/","")}}/"+this.besc.id+"/edit");
                                if(_this.current_action){

                                    switch(_this.current_action){
                                        {{--case "shipment":
                                         (_this.event)("toast", {message: "{{__("Shipment method saved")}}", color: 'success'});
                                            break;
                                        case "besc_validated":
                                            (_this.event)("toast", {message: "{{__("ECTN Validated successfully")}}", color: 'success'});
                                            break;
                                            --}}
                                        case "besc_submitted":
                                            (_this.event)("toast", {message: "{{__("ECTN Submitted successfully. Reference: ")}}"+this.besc.reference, color: 'success'});
                                            break;
                                        case "tariff_changed":
                                            (_this.event)("toast", {message: "{{__("ECTN tariff changed successfully. Reference: ")}}"+this.besc.reference, color: 'success'});
                                            break;
                                            {{--case "charges_save":
                                                (_this.event)("toast", {message: "{{__("Freight and Charges saved successfully")}}", color: 'success'});
                                                break;
                                            case "contacts_save":
                                                (_this.event)("toast", {message: "{{__("Contacts saved successfully")}}", color: 'success'});
                                                break;
                                            case "documents_save":
                                                (_this.event)("toast", {message: "{{__("Documents saved successfully")}}", color: 'success'});
                                                break;
                                            default:--}}
                                                //(_this.event)("toast", {message: "{{__("Success")}}", color: 'success'});

}

}else{
(_this.event)("toast", {message: "{{__("ECTN saved successfully. Reference: ")}} "+this.besc.reference, color: 'success'});
}

_this.current_action = null;


}





}).catch(error => {

// if (typeof error.response.data === 'object') {
//     form.errors = _.flatten(_.toArray(error.response.data));
// } else {
//     form.errors = ['Something went wrong. Please try again.'];
// }


(_this.event)("toast", {message: "{{__("Something happened")}}", color: 'red'});
_this.loading = false
});


},
newItem() {

this.item = this.defaultItem;
this.dialog = true;
},
updateItems() {
if (this.selected.length == 0) {
this.toast("{{__("components.Select items")}}", "red");
return false;
}
this.update_dialog = true;
},
editItem(item) {

this.item = item;
this.dialog = true;
},
viewItem(item) {
this.item = item;
this.view_dialog = true;
},
editPayment(item) {

this.payment = item;
},
deleteItems() {
if (this.selected.length !== 0) {
this.confirmObject.text = "{{__("components.Are you sure to delete")}} " + this.selected.length + " certificates";
this.confirmObject.action = "delete";
this.confirm = true;
}

},


/*
format tweet created_at date to a nice string date
*/
formatDate(date_string) {
var REFERENCE = moment(date_string);
var TODAY = moment();
var YESTERDAY = moment().subtract(1, 'day');
/*
if the time is creater than a day show the month and day
*/
if (moment(date_string).isSame(TODAY, 'd') || moment(date_string).isSame(YESTERDAY, 'd')) {
return moment(date_string).fromNow()
} else {
return REFERENCE.format("MMM DD")
}

return
},
/*
method to get index of an item in an array
using a field and a value of comparison
*/
getIndex(items, field, value) {
for (var i = 0; i < items.length; i++) {
if (items[i][field] == value) {
return i;
}
}
return -1;
},
/*
method to get an item in an array
using a field and a value of comparison
*/
getItem(items, field, value) {
for (var i = 0; i < items.length; i++) {
if (items[i][field] == value) {
return items[i];
}
}
return false;
},
pushItem(item) {


for (var i = 0; i < this.items.length; i++) {
if (item.id === this.items[i].id) {
Vue.set(this.items, i, item);
return true;
}
}
this.items.unshift(item)

this.dialog = false;
},
toast(message, color) {

this.snackbar.text = message;
this.snackbar.color = color;
this.snackbar.active = true;


},
close() {
this.dialog = false
setTimeout(() => {
this.item = Object.assign({}, this.defaultItem)
}, 300)
},
},
}
</script>
@endsection
@section("components_instances")
PageContent
@endsection