@extends('layouts.main')

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

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

                        <template>
                            <v-card flat>
                                @include("bescs.alerts")
                                <v-card-title
                                        color="grey"
                                        class="grey lighten-2"
                                        light
                                        flat
                                >
                                    <sapn>{{__("View ECTN")}}</sapn>

                                    <v-spacer></v-spacer>
                                    <span v-if="besc.id">{{__("Besc:")}}@{{ besc.reference }} - &euro;@{{ besc.total }}</span>
                                </v-card-title>
                                <v-card-text>
                                    <v-layout row wrap class="align-content-center text-center">

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

                                                        <strong>
                                                            @{{ besc.shipper.name }}
                                                        </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>
                                                    {{__("Consignee")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">
                                                        <strong>
                                                            @{{ besc.consignee.name }}
                                                        </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>
                                                    {{__("Notify party")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">
                                                        <strong>
                                                            @{{ besc.notifyparty.name }}
                                                        </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>
                                                            {{ $besc->loadport->name }}, {{ $besc->loadport->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>
                                                    {{__("Port of discharge")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">
                                                        <strong>
                                                            {{ $besc->dischargeport->name }}, {{ $besc->dischargeport->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>
                                                    {{__("Carrier")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">
                                                        <strong>
                                                            {{ $besc->carrier->name }}
                                                        </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>
                                                    {{__("Vessel")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">
                                                        <strong>
                                                            {{ $besc->vessel->name }}
                                                        </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>
                                                    {{__("Voyage number")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">
                                                        <strong>
                                                            {{ $besc->voyage_number }}
                                                        </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>
                                                    {{__("Date shipped on board")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">
                                                        <strong>
                                                            {{ \Illuminate\Support\Carbon::parse( $besc->date_shipped)->toDateString()  }}
                                                        </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>
                                                    {{__("Final place of delivery")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">
                                                        <strong>
                                                            {{ $besc->final_place_of_delivery  }}
                                                        </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>
                                                    {{__("Bill of lading Number")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">
                                                        <strong>
                                                            {{ $besc->bill_of_lading_number }}
                                                        </strong>
                                                    </v-layout>

                                                </v-flex>
                                            </v-layout>
                                        </v-flex>
                                        <v-flex xs12><v-divider></v-divider></v-flex>
                                        </template>
                                        <template>
                                            <v-flex xs12>
                                                <v-layout row justify-center>
                                                    <v-flex shrink>
                                                        {{__("Incoterm")}}
                                                    </v-flex>
                                                    <v-flex grow>
                                                        <v-layout justify-end class="align-content-end">
                                                            <strong>
                                                                {{ $besc->incoterm->name ?? "-" }}
                                                            </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>
                                                        {{__("Sea freight")}}
                                                    </v-flex>
                                                    <v-flex grow>
                                                        <v-layout justify-end class="align-content-end">
                                                            <strong>
                                                                {{ $besc->sea_freight ?? "0" }}{{\App\Currency::where("id",$besc->sea_freight_currency_id)->first()->name ?? ""}}
                                                            </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>
                                                        {{__("FOB Costs")}}
                                                    </v-flex>
                                                    <v-flex grow>
                                                        <v-layout justify-end class="align-content-end">
                                                            <strong>
                                                                {{ $besc->fob_costs ?? "0" }}{{\App\Currency::where("id",$besc->fob_costs_currency_id)->first()->name ?? ""}}
                                                            </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>
                                                        {{__("Others")}}
                                                    </v-flex>
                                                    <v-flex grow>
                                                        <v-layout justify-end class="align-content-end">
                                                            <strong>
                                                                {{ $besc->others ?? "0" }}{{\App\Currency::where("id",$besc->others_currency_id)->first()->name ?? ""}}
                                                            </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>
                                                        {{__("Commercial Invoice value")}}
                                                    </v-flex>
                                                    <v-flex grow>
                                                        <v-layout justify-end class="align-content-end">
                                                            <strong>
                                                                {{ $besc->commercial_invoice_value ?? "0" }}{{\App\Currency::where("id",$besc->commercial_invoice_value_currency_id)->first()->name ?? ""}}
                                                            </strong>
                                                        </v-layout>

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

                                        <template>
                                        <v-flex xs12>
                                            <v-layout row justify-center>
                                                <v-flex shrink>
                                                    {{__("Created at")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">

                                                        <strong>
                                                            @{{ formatDate(besc.created_at) }}
                                                        </strong>
                                                    </v-layout>

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

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

                                                        <strong>
                                                            @{{ formatDate(besc.submitted_at) }}
                                                        </strong>
                                                    </v-layout>

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

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

                                                        <strong>
                                                            @{{ formatDate(besc.validated_at) }}
                                                        </strong>
                                                    </v-layout>

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

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

                                                        <strong>
                                                            @{{  formatDate(besc.delivered_at) }}
                                                        </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>
                                                    {{__("Volume")}}
                                                </v-flex>
                                                <v-flex grow>
                                                    <v-layout justify-end class="align-content-end">
                                                        <strong>@{{ besc.volume
                                                            }}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 }}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>
                                                                @{{
                                                                getItems(besc.containers,'size',20).length
                                                                }}
                                                            </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>
                                                                @{{
                                                                getItems(besc.containers,'size',40).length
                                                                }}
                                                            </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>
                                                                @{{ total_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>
                                                                @{{ total_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.document_fee
                                                            }}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 }}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>@{{ total +
                                                            parseInt(price("document_fee_"))
                                                            }}EUR</strong> --}}
                                                        <strong>@{{ besc.total }}EUR</strong>
                                                    </v-layout>

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

                                    </v-layout>
                                    <br/>
                                    <br/>




                                </v-card-text>

                                <v-card-actions>
                                    <v-btn
                                            flat
                                            href="{{route("bescs.index")}}"
                                    >
                                        {{__("Back")}}
                                    </v-btn>

                                    <v-spacer></v-spacer>
                                    @if($besc->documents->count()>0)
                                        <v-btn color="info"
                                               flat
                                               mr-2
                                               @click="documents_dialog=true"
                                        >
                                            {{__("View Documents")}}
                                        </v-btn>
                                    @endif


                                    @if($besc->shipment_method == "fcl_container")
                                        <v-btn color="info"
                                                flat
                                                @click="containers_dialog=true"
                                        >
                                            {{__("View Containers")}}
                                        </v-btn>
                                    @else
                                        <v-btn color="info"
                                               flat
                                               @click="vehicles_dialog=true"
                                        >
                                            {{__("View Vehicles")}}
                                        </v-btn>
                                    @endif

                                    <v-btn v-if="besc.state >= 2" icon target="_blank" small flat outline color="warning"
                                           :href="'{{url("bescs/pdf/","")}}/'+besc.id"
                                           title="{{__("Print")}}">
                                        <v-icon small>print</v-icon>
                                    </v-btn>
                                    <v-btn v-if="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>





                                </v-card-actions>
                            </v-card>
                        </template>
                    </v-flex>
                </v-layout>
            </v-container>
            <v-dialog v-model="documents_dialog" width="500" persistent>
                <v-card>
                    <v-card-title
                            class="grey lighten-4 title"
                    >
                        <span>{{__("Documents")}}</span>
                        <v-spacer></v-spacer>
                        <v-btn icon @click="documents_dialog = false">
                            <v-icon>close</v-icon>
                        </v-btn>
                    </v-card-title>
                    <v-card-text>
                        <v-layout row wrap class="align-content-center text-center">
                            <v-col xs12>
                                @foreach($besc->documents as $doc)
                                    <v-btn block flat depressed target="_blank" href="{{$doc->path}}">{{$doc->name}}</v-btn>
                                    <br/>
                                @endforeach
                            </v-col>
                        </v-layout>
                    </v-card-text>
                </v-card>
            </v-dialog>
            <v-dialog v-model="containers_dialog" width="500" persistent>
                <v-card>
                    <v-card-title
                            class="grey lighten-4 title"
                    >
                        <span>{{__("Containers")}}</span>
                        <v-spacer></v-spacer>
                        <v-btn icon @click="containers_dialog = false">
                            <v-icon>close</v-icon>
                        </v-btn>
                    </v-card-title>
                    <v-card-text>
                        <table style="width:100%" boder="1">

                                <thead>
                                <tr>
                                    <th>{{__("Container No")}}</th>
                                    <th>{{__("Seal")}}</th>
                                    <th>{{__("Container Type")}}</th>
                                    <th>{{__("Container Size")}}</th>
                                </tr>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($besc->containers as $container)
                                    <tr>
                                        <td>{{ $container->container_number }}</td>
                                        <td>{{ $container->seal }}</td>
                                        <td>{{ $container->type }}</td>
                                        <td>{{ $container->size }}</td>
                                    </tr>
                                @endforeach
                                </tbody>

                        </table>
                    </v-card-text>
                </v-card>
            </v-dialog>
            <v-dialog v-model="vehicles_dialog" width="500" persistent>
                <v-card>
                    <v-card-title
                            class="grey lighten-4 title"
                    >
                        <span>{{__("Vehicles")}}</span>
                        <v-spacer></v-spacer>
                        <v-btn icon @click="vehicles_dialog = false">
                            <v-icon>close</v-icon>
                        </v-btn>
                    </v-card-title>
                    <v-card-text>
                        <table style="width:100%" boder="1">

                                <thead>
                                <tr>
                                    <th>{{__("Chassi no")}}</th>
                                    <th>{{__("Gross Weight")}}</th>
                                    <th>{{__("Description")}}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($besc->vehicles as $vehicle)
                                    <tr>
                                        <td>{{$vehicle->chassi}}</td>
                                        <td>{{$vehicle->weight}}</td>
                                        <td>{{$vehicle->description}}</td>
                                    </tr>
                                @endforeach
                                </tbody>

                        </table>
                    </v-card-text>
                </v-card>
            </v-dialog>
            @if(Auth::user()->role->name == "admin")
                <v-dialog v-model="tariff_confirm" width="500px" persistent>
                    <v-card>
                        <v-card-title
                                class="grey lighten-4 py-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 py-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 py-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 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: 0,
                confirm: false,
                confirmObject: {action: '', text: '', active: false},
                shipper_dialog_title: "New shipper",
                shipper_dialog_source: "shipper",
                documents_dialog: false,
                containers_dialog: false,
                vehicles_dialog: false,
                tariff_dialog: false,
                tariff_confirm: false,
                shipper_dialog: false,
                vessel_dialog: false,
                carrier_dialog: false,
                total_consolidation: 0,
                total_containers: 0,
                total_vehicles1: 0,
                total_vehicles2: 0,
                total_nb_vehicles1:0,
                total_nb_vehicles2:0,
                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 !!},
                tariff:@json($besc->tariff),
                @else
                tariff:@json($tariff ?? \App\Tariff::where("name",$type ?? 'import')->first()),
                besc: {type: '{{ $type ?? 'import' }}', 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")}}'],
                @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.volumne);
                        var gw = Math.ceil(this.besc.gross_weight / 1000);
                        var price1 = v * this.tariff["bulk_" + zone] || 0;
                        var price2 = gw * this.tariff["bulk_" + zone] || 0;
                        this.total_consolidation = price1 > price2 ? price1 : price2;
                        this.total_consolidation = this.total_consolidation < 50 ? 50 : this.total_consolidation;
                        sum += this.total_consolidation;
                    }

                    return sum;
                },
            },
            watch: {},
            mounted() {

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


            },
            methods: {
                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;
                },
                validateStep3() {


                    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);
                },
                @if(Auth::user()->role->name == "admin")
                validate: function () {
                    this.besc.validate = true;
                    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.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;
                                (_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;
                    }

                },


                /*
                    format tweet created_at date to a nice string date
                     */
                formatDate(date_string,format) {
                    if(!date_string || date_string.trim().length == 0){
                        return "-";
                    }
                    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(format || "DD-MM-Y");
                    //}

                    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