@extends('layouts.main')

@section("content")
    <page-content :event="eventListener"></page-content>
@endsection
@include("shippers.shipper_form")
@include("carriers.carrier_form")
@include("vessels.vessel_form")
@section("components_declarations")

    <template id="page-content">
        <v-content>
            <v-container fluid fill-height>
                <v-layout justify-center>
                    <v-flex>

                        <template>
                            <v-card flat>
                                <v-toolbar
                                    color="grey"
                                    class="lighten-2"
                                    light
                                    flat
                                >
                                    <v-toolbar-title v-if="besc.id">{{__("Edit ECTN")}}</v-toolbar-title>
                                    <v-toolbar-title v-else>{{__("New ECTN")}}</v-toolbar-title>


                                </v-toolbar>
                                <v-card-text>
                                    <template>
                                        <v-stepper v-model="step" >
                                            <v-stepper-header>
                                                <v-stepper-step :complete="step > 1" step="1">Shipper and Receiver
                                                </v-stepper-step>

                                                <v-divider></v-divider>
                                                <v-stepper-step :editable="besc.status > 0" :complete="step > 2"
                                                                step="2">Shipment Details
                                                </v-stepper-step>
                                                <v-divider></v-divider>
                                                <v-stepper-step :editable="besc.status > 0" :complete="step > 3"
                                                                step="3">Mode of shipment
                                                </v-stepper-step>
                                                <v-divider></v-divider>
                                                <v-stepper-step :editable="besc.status > 0" :complete="step > 4"
                                                                step="4">Description of goods
                                                </v-stepper-step>
                                                <v-divider></v-divider>
                                                <v-stepper-step :editable="besc.status > 0" :complete="step > 5"
                                                                step="5">Freight and Charges
                                                </v-stepper-step>
                                                <v-divider></v-divider>
                                                <v-stepper-step step="6" :editable="besc.status > 0" :complete="step > 6">Documents</v-stepper-step>
                                                <v-divider></v-divider>
                                                <v-stepper-step :editable="besc.status > 0" step="7">Details</v-stepper-step>
                                            </v-stepper-header>

                                            <v-stepper-items>
                                                <v-stepper-content step="1">
                                                    <v-form ref="form" v-model="valid1" lazy-validation>
                                                        <v-card

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

                                                                    <v-flex xs12>
                                                                        <v-layout>
                                                                            <v-flex grow>
                                                                                <v-autocomplete
                                                                                    v-model="besc.shipper_id"
                                                                                    :items="shippers"
                                                                                    item-text="name"
                                                                                    label="{{__("Shipper")}}"
                                                                                    item-value="id"
                                                                                    persistent-hint
                                                                                    :auto-grow="true"
                                                                                    :rules="shipperRules"
                                                                                >
                                                                                </v-autocomplete>
                                                                            </v-flex>
                                                                            <v-flex shrink>
                                                                                <v-btn @click="newShipper('shipper')"
                                                                                       icon
                                                                                       small tile outline primary>
                                                                                    <v-icon small>add</v-icon>
                                                                                </v-btn>
                                                                            </v-flex>
                                                                        </v-layout>
                                                                    </v-flex>
                                                                    <v-flex xs12>
                                                                        <v-layout>
                                                                            <v-flex grow>
                                                                                <v-autocomplete
                                                                                    v-model="besc.consignee_id"
                                                                                    :items="shippers"
                                                                                    item-text="name"
                                                                                    label="{{__("Consignee")}}"
                                                                                    item-value="id"
                                                                                    persistent-hint
                                                                                    :auto-grow="true"
                                                                                    :rules="consigneeRules"
                                                                                >
                                                                                </v-autocomplete>
                                                                            </v-flex>
                                                                            <v-flex shrink>
                                                                                <v-btn @click="newShipper('consignee')"
                                                                                       icon
                                                                                       small tile outline primary>
                                                                                    <v-icon small>add</v-icon>
                                                                                </v-btn>
                                                                            </v-flex>
                                                                        </v-layout>
                                                                    </v-flex>
                                                                    <v-flex xs12>
                                                                        <v-layout>
                                                                            <v-flex grow>
                                                                                <v-autocomplete
                                                                                    v-model="besc.notify_party_id"
                                                                                    :items="shippers"
                                                                                    item-text="name"
                                                                                    label="{{__("Notify party")}}"
                                                                                    item-value="id"
                                                                                    persistent-hint
                                                                                    :auto-grow="true"
                                                                                    :rules="notifyRules"
                                                                                >
                                                                                </v-autocomplete>
                                                                            </v-flex>
                                                                            <v-flex shrink>
                                                                                <v-btn @click="newShipper('notify')"
                                                                                       icon
                                                                                       small tile outline primary>
                                                                                    <v-icon small>add</v-icon>
                                                                                </v-btn>
                                                                            </v-flex>
                                                                        </v-layout>
                                                                    </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-content step="2">
                                                    <v-form ref="form" v-model="valid2" lazy-validation>
                                                        <v-card>
                                                            <v-card-text>
                                                                <v-layout row wrap>
                                                                    <v-flex xs12 md6 pr-2>
                                                                        <v-autocomplete
                                                                            v-model="besc.port_load_id"
                                                                            :items="ports"
                                                                            item-text="name"
                                                                            label="{{__("Port of loading")}}"
                                                                            item-value="id"
                                                                            persistent-hint
                                                                            :auto-grow="true"
                                                                            :rules="portloadingRules"
                                                                        >
                                                                            <template v-slot:item="data">
                                                                                <span>@{{data.item.name}}, @{{data.item.country}}</span>
                                                                            </template>
                                                                        </v-autocomplete>

                                                                    </v-flex>
                                                                    <v-flex xs12 md6>
                                                                        <v-autocomplete
                                                                            v-model="besc.port_discharge_id"
                                                                            :items="ports"
                                                                            item-text="name"
                                                                            label="{{__("Port of discharge")}}"
                                                                            item-value="id"
                                                                            persistent-hint
                                                                            :auto-grow="true"
                                                                            :rules="portdischargeRules"
                                                                        >
                                                                            <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-layout>
                                                                            <v-flex grow>
                                                                                <v-autocomplete
                                                                                    v-model="besc.vessel_id"
                                                                                    :items="vessels"
                                                                                    item-text="name"
                                                                                    label="{{__("Vessel")}}"
                                                                                    item-value="id"
                                                                                    persistent-hint
                                                                                    :auto-grow="true"
                                                                                    :rules="vesselRules"
                                                                                >
                                                                                </v-autocomplete>
                                                                            </v-flex>
                                                                            <v-flex shrink>
                                                                                <v-btn @click="newVessel" icon small
                                                                                       tile
                                                                                       outline primary>
                                                                                    <v-icon small>add</v-icon>
                                                                                </v-btn>
                                                                            </v-flex>
                                                                        </v-layout>
                                                                    </v-flex>
                                                                    <v-flex xs12 md6>
                                                                        <v-layout>
                                                                            <v-flex grow>
                                                                                <v-autocomplete
                                                                                    v-model="besc.carrier_id"
                                                                                    :items="carriers"
                                                                                    item-text="name"
                                                                                    label="{{__("Carrier")}}"
                                                                                    item-value="id"
                                                                                    persistent-hint
                                                                                    :auto-grow="true"
                                                                                    :rules="carrierRules"
                                                                                >
                                                                                </v-autocomplete>
                                                                            </v-flex>
                                                                            <v-flex shrink>
                                                                                <v-btn @click="newCarrier" icon small
                                                                                       tile
                                                                                       outline primary>
                                                                                    <v-icon small>add</v-icon>
                                                                                </v-btn>
                                                                            </v-flex>
                                                                        </v-layout>
                                                                    </v-flex>
                                                                    <v-flex xs12 md6 pr-2>
                                                                        <v-dialog
                                                                            ref="date_dialog"
                                                                            v-model="date_modal"
                                                                            :return-value.sync="besc.date_shipped"
                                                                            persistent
                                                                            lazy
                                                                            full-width
                                                                            width="290px"
                                                                        >
                                                                            <v-text-field
                                                                                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>
                                                                                <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>
                                                                        <v-text-field
                                                                            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 v-model="besc.voyage_number"
                                                                                      label="{{__("Voyage Number")}}"
                                                                                      :rules="voyage_numberRules"
                                                                        ></v-text-field>
                                                                    </v-flex>
                                                                    <v-flex xs12 md6>
                                                                        <v-text-field
                                                                            v-model="besc.final_place_of_delivery"
                                                                            label="{{__("Final place of delivery")}}"
                                                                            :rules="final_place_of_deliveryRules"
                                                                        ></v-text-field>
                                                                    </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
                                                                    color="primary"
                                                                    @click="step = 3"
                                                                    :disabled="!valid2"
                                                                >
                                                                    Continue
                                                                </v-btn>

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

                                                </v-stepper-content>
                                                <v-stepper-content step="3">
                                                    <v-form ref="form" v-model="valid3" lazy-validation>
                                                        <v-card>
                                                            <v-card-text>
                                                                <template>
                                                                    <v-expansion-panel>
                                                                        <v-expansion-panel-content
                                                                            expand-icon="mdi-menu-down"
                                                                        >
                                                                            <template v-slot:header>
                                                                                <v-checkbox
                                                                                    v-model="besc.shipment_method"
                                                                                    value="fcl_container"
                                                                                    label="I - {{__("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
                                                                                                        label="{{__("Container No")}}"
                                                                                                        v-model="container.container_number"
                                                                                                    ></v-text-field>
                                                                                                </v-flex>
                                                                                                <v-flex shrink pr-1>
                                                                                                    <v-text-field
                                                                                                        label="{{__("Seal")}}"
                                                                                                        v-model="container.seal"
                                                                                                    ></v-text-field>
                                                                                                </v-flex>
                                                                                                <v-flex shrink pr-1>
                                                                                                    <v-select
                                                                                                        label="{{__("Container Type")}}"
                                                                                                        :items="container_types"
                                                                                                        v-model="container.type"
                                                                                                    ></v-select>
                                                                                                </v-flex>
                                                                                                <v-flex shrink pr-1>
                                                                                                    <v-select
                                                                                                        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 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 small color="primary"
                                                                                                   @click="besc.containers.push({})">{{__("Add container")}}</v-btn>
                                                                                        </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
                                                                                    v-model="besc.shipment_method"
                                                                                    value="consolidation"
                                                                                    label="II - {{__("Consolidation")}}"></v-checkbox>
                                                                            </template>
                                                                            <v-card>
                                                                                <v-card-text class="grey lighten-3">
                                                                                    <v-layout row wrap>
                                                                                        @include("components.common_form_elements")
                                                                                    </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
                                                                                    v-model="besc.shipment_method"
                                                                                    value="ro_ro"
                                                                                    label="III - {{__("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
                                                                                                        label="{{__("Chassi nr")}}"
                                                                                                        v-model="vehicle.chassi"
                                                                                                    ></v-text-field>
                                                                                                </v-flex>
                                                                                                <v-flex shrink pr-1>
                                                                                                    <v-text-field
                                                                                                        type="number"
                                                                                                        label="{{__("Gross weight")}}"
                                                                                                        v-model="vehicle.gross_weight"
                                                                                                        suffix="kg"
                                                                                                    ></v-text-field>
                                                                                                </v-flex>
                                                                                                <v-flex grow pr-1>
                                                                                                    <v-text-field
                                                                                                        label="{{__("Description")}}"
                                                                                                        v-model="vehicle.description"
                                                                                                    ></v-text-field>
                                                                                                </v-flex>

                                                                                                <v-flex shrink>
                                                                                                    <v-btn 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 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-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 box v-model="besc.description"
                                                                                    label="{{__("Description of Goods")}}"
                                                                                    :rules="descriptionRules"
                                                                        ></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-content step="5">
                                                    <v-form ref="form" v-model="valid5" lazy-validation>
                                                        <v-card>
                                                            <v-card-text>
                                                                <v-layout row wrap>
                                                                    <v-flex xs12 md6 pr-2>
                                                                        <v-autocomplete
                                                                            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>
                                                                        <v-autocomplete
                                                                            v-model="besc.currency_id"
                                                                            :items="currencies"
                                                                            item-text="name"
                                                                            label="{{__("Currency")}}"
                                                                            item-value="id"
                                                                            persistent-hint
                                                                            :auto-grow="true"
                                                                            :rules="currencyRules"
                                                                        >
                                                                        </v-autocomplete>

                                                                    </v-flex>
                                                                    <v-flex xs12 md6 pr-2>
                                                                        <v-text-field
                                                                            label="{{__("Sea freight")}}"
                                                                            type="number" v-model="besc.sea_freight"
                                                                            :rules="sea_freightRules"
                                                                            :suffix="getItem(currencies,'id',besc.currency_id).code || 'USD'"
                                                                        ></v-text-field>

                                                                    </v-flex>
                                                                    <v-flex xs12 md6 pr-2>
                                                                        <v-text-field
                                                                            label="{{__("FOB Costs")}}"
                                                                            type="number" v-model="besc.fob_costs"
                                                                            :rules="fob_costsRules"
                                                                            :suffix="getItem(currencies,'id',besc.currency_id).code || 'USD'"
                                                                        ></v-text-field>

                                                                    </v-flex>
                                                                    <v-flex xs12 md6 pr-2>
                                                                        <v-text-field
                                                                            label="{{__("Others")}}"
                                                                            type="number" v-model="besc.others"

                                                                            :suffix="getItem(currencies,'id',besc.currency_id).code || 'USD'"
                                                                        ></v-text-field>

                                                                    </v-flex>
                                                                    <v-flex xs12 md6 pr-2>
                                                                        <v-text-field
                                                                            label="{{__("Commercial Invoice value")}}"
                                                                            type="number"
                                                                            v-model="besc.commercial_invoice_value"
                                                                            :rules="commercial_invoice_valueRules"
                                                                            :suffix="getItem(currencies,'id',besc.currency_id).code || 'USD'"
                                                                        ></v-text-field>

                                                                    </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"
                                                                >
                                                                    Continue
                                                                </v-btn>

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

                                                </v-stepper-content>
                                                <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
                                                                                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 v-model="doc.path" label="{{__("Choose document")}}" :path="doc.path"  folder="documents/" :btn="true"
                                                                                         :extra="false" :hideLabel="false" inputname="file"
                                                                                         :event="eventListener"
                                                                            ></file-upload>

                                                                        </v-flex>
                                                                        <v-flex shrink>
                                                                            <v-btn 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 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"

                                                            >
                                                                Continue
                                                            </v-btn>

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


                                                </v-stepper-content>
                                                <v-stepper-content step="7">

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

                                                            </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="save"
                                                                :loading="loading"

                                                            >
                                                                Save
                                                            </v-btn>
                                                            <v-btn
                                                                color="primary"
                                                                @click="submit"
                                                                :loading="loading"
                                                                v-if="!besc.state"

                                                            >
                                                                Submit
                                                            </v-btn>
                                                        </v-card-actions>
                                                    </v-card>


                                                </v-stepper-content>
                                            </v-stepper-items>
                                        </v-stepper>
                                    </template>
                                </v-card-text>

                            </v-card>
                        </template>
                    </v-flex>
                </v-layout>
            </v-container>
            <v-dialog v-model="shipper_dialog" width="500px" persistent>
                <v-card>
                    <v-card-title
                        class="grey lighten-4 py-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="{}" :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 py-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="{}" :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 py-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="{}" :event="eventListener"/>
                    </v-container>

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

        </v-content>
    </template>
    <script>

        const PageContent = {
            template: "#page-content",
            components: {ShipperForm, VesselForm, CarrierForm,FileUpload},
            data: () => ({
                step: 6,
                shipper_dialog_title: "New shipper",
                shipper_dialog_source: "shipper",
                shipper_dialog: false,
                vessel_dialog: false,
                carrier_dialog: false,
                shippers:@json(\App\Shipper::all()),
                ports:@json(\App\Port::all()),
                vessels:@json(\App\Vessel::all()),
                carriers:@json(\App\Carrier::all()),
                currencies:@json(\App\Currency::all()),
                incoterms:@json(\App\Incoterm::all()),
                loading: false,
                @if(isset($besc))
                besc:{!! $besc !!},
                @else
                besc: {containers: [{}], vehicles: [{}], documents: [{}]},
                @endif
                date_modal: false,
                container_types: [
                    "{{__("Dry/GP")}}",
                    "{{__("Open-top/OT")}}",
                    "{{__("Reefer/RT")}}",
                    "{{__("High Cube/HC")}}",
                    "{{__("Tank/TO")}}",
                ],
                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")}}'],
                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")}}'],
            }),
            props: {
                source: String,
                context: Object,
                item: {},

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

            },
            computed: {},
            watch: {},
            mounted() {

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


            },
            methods: {
                validateStep3() {
                    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.seal) {
                                (this.event)("toast", {
                                    message: "{{__("Please enter container seal for ")}}" + (i + 1),
                                    color: "red"
                                });
                                return false;
                            }
                            if (!cont.type) {
                                (this.event)("toast", {
                                    message: "{{__("Please enter container type 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 === "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.gross_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;
                },
                newShipper(source) {
                    this.shipper_dialog_source = source;
                    switch (source) {
                        case "shipper":
                            shipper_dialog_title = "{{__("New Shipper")}}";
                            break;
                        case "consignee":
                            shipper_dialog_title = "{{__("New Consignee")}}";
                            break;
                        case "notify":
                            shipper_dialog_title = "{{__("New Notify Party")}}";
                            break;
                    }
                    this.shipper_dialog = true;
                },
                newVessel() {

                    this.vessel_dialog = true;
                },
                newCarrier() {

                    this.carrier_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.shippers.unshift(data);
                            break;
                        case "vessel":
                            this.besc.vessel_id = data.id;
                            this.vessels.unshift(data);
                            break;
                        case "carrier":
                            this.besc.carrier_id = data.id;
                            this.carriers.unshift(data);
                            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.persist('post', "{{route("bescs.store")}}", this.besc);
                },
                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;
                                (_this.event)("toast", {message: "Success", color: 'success'});

                            }


                        }).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;
                    }

                },


                actionOnMultiple(action) {
                    if (this.selected.length === 0) {
                        this.snackbar.text = "{{__("components.Select items")}}";
                        this.snackbar.color = "dark";
                        this.snackbar.active = true;
                        return false;
                    }

                    let _this = this;
                    let IDS = [];
                    for (let i = 0; i < this.selected.length; i++) {
                        IDS.push(this.selected[i].id);
                    }

                    this.loading = true;

                    axios.post('/certificates/action/' + action, {ids: IDS})
                        .then(response => {

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

                                if (action == "delete") {
                                    for (let i = 0; i < IDS.length; i++) {
                                        _this.items.splice(_this.getIndex(_this.items, "id", IDS[i]), 1);
                                    }
                                } else {
                                    for (let i = 0; i < data.length; i++) {
                                        let object = data[i];
                                        let index = _this.getIndex(_this.items, "id", object.id);

                                        if (index > -1) {
                                            Vue.set(_this.items, index, object);
                                        } else {
                                            _this.items.unshift(object);
                                        }
                                    }
                                }
                                _this.confirm = false;
                                _this.selected = [];
                                this.loading = false;
                            } else {
                                this.snackbar.text = "{{__("components.An error occurred")}}";
                                this.snackbar.color = "red";
                                this.snackbar.active = true;
                                _this.confirm = false;
                                this.loading = false;
                            }
                        });
                },


                /*
                    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