@extends('layouts.main')

@section("content")

    <page-content :event="eventListener"></page-content>
@endsection
@include("components.export_excel_v1")
@section("components_declarations")


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


                        <v-card flat d-flex>
                            <v-card-text>
                                <v-layout row wrap>
                                    <v-spacer></v-spacer>
                                     <v-flex xs12 sm4 md3 lg3 pr-2>
                                        <v-autocomplete
                                                label="{{__("Bescs")}}"
                                                item-value="id"
                                                item-text="reference"
                                                :items="bescs"
                                                v-model="bescs_ids"
                                                :loading="searching"
                                                outline
                                                persistent-hint
                                                multiple
                                                :auto-grow="false"
                                                clearable
                                                :search-input.sync="search"
                                                                           
                                        >
                                        </v-autocomplete>
                                    </v-flex>
                                    <v-flex xs12 sm4 md3 lg2 pr-2>
                                        <div >
                                           <div></div><label for="date_start">{{__("Date Start")}}</label></div>
                                           <div style="display: flex; align-items: center; gap: 8px;">
                                                 <input type="datetime-local" id="date_start" v-model="date_start">
                                            <button v-if="date_start" @click="date_start = ''">Clear</button>
                                           </div>
                                          
                                          </div>


                                            
                                        {{--<v-menu
                                                ref="date_dialog_start"
                                                v-model="date_modal_start"
                                                lazy
                                                transition="scale-transition"
                                                full-width
                                                min-width="290px"
                                                :close-on-content-click="false"
                                        >
                                            <v-text-field
                                                    slot="activator"
                                                    v-model="date_start"
                                                    label="{{__("Date Start")}}"
                                                    prepend-icon="event"
                                                    readonly
                                            ></v-text-field>
                                            <v-date-picker v-model="date_start"
                                                           scrollable>
                                                <v-spacer></v-spacer>
                                                <v-btn flat color="primary"
                                                       @click="date_modal_start = false">
                                                    {{__("Cancel")}}
                                                </v-btn>
                                                <v-btn flat color="primary"
                                                       @click="$refs.date_dialog_start.save(date_start)">
                                                    {{__("OK")}}
                                                </v-btn>
                                            </v-date-picker>
                                        </v-menu>
                                        --}}
                                    </v-flex>
                                    <v-flex xs12 sm4 md3 lg2 pr-2>
                                            <div>
                                                <div><label for="date_end">{{__("Date End")}}</label></div>
                                                 <div style="display: flex; align-items: center; gap: 8px;">
                                                 <input type="datetime-local" id="date_end" v-model="date_end">
                                            <button v-if="date_end" @click="date_end = ''">Clear</button>
                                           </div>
                                                
                                          </div>
                                        {{--<v-menu
                                                ref="date_dialog_end"
                                                v-model="date_modal_end"
                                                lazy
                                                transition="scale-transition"
                                                full-width
                                                min-width="290px"
                                                :close-on-content-click="false"
                                        >
                                            <v-text-field
                                                    slot="activator"
                                                    v-model="date_end"
                                                    label="{{__("Date End")}}"
                                                    prepend-icon="event"
                                                    readonly
                                            ></v-text-field>
                                            <v-date-picker v-model="date_end"
                                                           scrollable>
                                                <v-spacer></v-spacer>
                                                <v-btn flat color="primary"
                                                       @click="date_modal_end = false">
                                                    {{__("Cancel")}}
                                                </v-btn>
                                                <v-btn flat color="primary"
                                                       @click="$refs.date_dialog_end.save(date_end)">
                                                    {{__("OK")}}
                                                </v-btn>
                                            </v-date-picker>
                                        </v-menu>
                                         --}}
                                    </v-flex>
                                    <v-flex xs12 sm4 md3 lg2 pr-2>
                                        <v-select
                                                label="{{__("Type")}}"
                                                item-value="id"
                                                item-text="name"
                                                :items="types"
                                                v-model="type"
                                                multiple
                                                clearable
                                        ></v-select>
                                    </v-flex>
                                    {{--
                                    @roles(["admin","validator","consultant"])
                                    <v-flex xs12 sm4 md3 lg2 pr-2>
                                        <v-select
                                                label="{{__("Agency")}}"
                                                item-value="id"
                                                item-text="name"
                                                :items="agencies"
                                                v-model="agency"
                                                clearable
                                        ></v-select>
                                    </v-flex>
                                    @endif
                                    <v-flex xs12 sm4 md3 lg2 pr-2>
                                        <v-autocomplete
                                                label="{{__("Shipment Method")}}"
                                                item-value="id"
                                                item-text="name"
                                                :items="shipment_methods"
                                                v-model="shipment"
                                                :auto-grow="false"
                                                multiple
                                                clearable
                                        ></v-autocomplete>
                                    </v-flex>
                                    <v-flex xs12 sm4 md3 lg2 pr-2>
                                        <v-autocomplete
                                                label="{{__("Port of loading")}}"
                                                item-value="id"
                                                item-text="name"
                                                :items="ports"
                                                v-model="port_load"
                                                persistent-hint
                                                multiple
                                                :auto-grow="false"
                                                clearable
                                        >
                                        </v-autocomplete>
                                    </v-flex>
                                    <v-flex xs12 sm4 md3 lg2 pr-2>
                                        <v-autocomplete
                                                label="{{__("Port of discharge")}}"
                                                item-value="id"
                                                item-text="name"
                                                :items="ports"
                                                v-model="port_discharge"
                                                persistent-hint
                                                multiple
                                                clearable
                                        >
                                        </v-autocomplete>
                                    </v-flex>
                                     --}}
                                     
                                    <v-flex xs12 sm4 md3>
                                        <v-btn :href="reporturl" small outline color="primary">{{__("Refresh")}}</v-btn>
                                    </v-flex>
                                </v-layout>
                                <br/>
                                <v-layout row wrap>
                                    <v-flex xs12 pa-1>
                                        <v-card flat :elevation="0" class="">
                                            <v-toolbar card prominent dense>


                                                <v-toolbar-title>
                                                    @role("public")
                                                    {{__("User ECTNS From :date_start To :date_end",[
                                                    "date_start" => $date_start,
                                                    "date_end" => $date_end,
                                                    ])}}
                                                    @else
                                                        {{__("ECTNS From :date_start To :date_end",[
                                                   "date_start" => $date_start,
                                                   "date_end" => $date_end,
                                                   ])}}
                                                    @endif
                                                </v-toolbar-title>

                                                <v-spacer></v-spacer>
                                               <v-btn color="primary" small depress depressed @click="transferData()" :loading="loading">{{ __("Transfer") }}</v-btn>


                                            </v-toolbar>

                                            <v-divider></v-divider>

                                            <v-data-table
                                                    :elevation="0"
                                                    :headers="headers"
                                                    :items="items"
                                                    item-key="id"

                                            >

                                                <template slot="items" slot-scope="props">
                                                    <tr>
                                                        <td>@{{ props.item.reference}}</td>
                                                        <td>@{{ formatDate(props.item.created_at) }}</td>
                                                        <td>@{{
                                                            getItem(shipment_methods,"id",props.item.shipment_method).name
                                                            }}
                                                        </td>
                                                        <td>@{{ getValue(props.item,"agency.name")}}</td>
                                                        <td>@{{ getValue(props.item,"loadport.name")}}, @{{
                                                            getValue(props.item,"loadport.country")}}
                                                        </td>
                                                        <td>@{{ props.item.total | formatNumber}}EUR</td>
                                                        <td>
                                                            <v-btn icon small flat outline color="info"
                                                                   :href="'{{url("bescs/","")}}/'+props.item.id"
                                                                   title="{{__("View")}}">
                                                                <v-icon small>library_books</v-icon>
                                                            </v-btn>
                                                            <v-btn icon target="_blank" small flat outline color="warning"
                                                                   :href="'{{url("bescs/pdf/","")}}/'+props.item.id"
                                                                   title="{{__("Print")}}">
                                                                <v-icon small>print</v-icon>
                                                            </v-btn>
                                                        </td>

                                                </template>

                                                <template slot="no-data">
                                                    <v-alert :value="true" color="error" icon="warning">
                                                        {{__("Sorry, nothing to display here")}} 😞
                                                    </v-alert>

                                                </template>
                                            </v-data-table>
                                        </v-card>
                                    </v-flex>


                                </v-layout>

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

<v-snackbar v-model="snackbar.active" :color="snackbar.color">
    @{{ snackbar.text }}
</v-snackbar>
                    </v-flex>
                </v-layout>
            </v-container>


        </v-content>
    </template>
    
    <!-- Graphs -->
  {{--  <script src="{{asset("js/to_excel.js")}}"></script>--}}
    <script>
       
        Vue.filter("formatNumber", function (value) {
            return value.toLocaleString(
                    @if(app()->getLocale() == "en")
                        'en-US',
                    @else// leave undefined to use the browser's locale,
                'fr-FR',
                    @endif// leave undefined to use the browser's locale,
                // or use a string like 'en-US' to override it.
                { minimumFractionDigits: 2 }
            ); // displaying other groupings/separators is possible, look at the docs
        });
        const PageContent = {
            template: "#page-content",
            components: {ExportExcel},
            data: () => ({
                snackbar: {active: false, text: '', color: 'success'},
                searching: null,
                loading: null,
                ports: @json(\App\Port::all()),
                agencies: @json(\App\Agency::all()),
                worksheet: "Bescs",
                worksheet_containers: "Containers",
                worksheet_vehicles: "Vehicles",
                search: '',
                bescs: @json(\App\Besc::whereIn('id',$bescs_ids)->get()),
              
                filename: "{{__("ECTNS From :date_start To :date_end",["date_start" => $date_start,"date_end" => $date_end])}}.xls",
                filename_containers: "{{__("ECTNS Containers From :date_start To :date_end",["date_start" => $date_start,"date_end" => $date_end])}}.xls",
                filename_vehicles: "{{__("ECTNS Vehicles From :date_start To :date_end",["date_start" => $date_start,"date_end" => $date_end])}}.xls",
                types: [
                    {id: "import", name: "{{__("Import")}}"},
                    {id: "export", name: "{{__("Export")}}"},
                    {id: "regularisation", name: "{{__("Regularisation")}}"}
                ],
                shipment_methods: [
                        @foreach(__("_shipment_methods") as $key=>$value)
                    {
                        id: '{{$key}}', name: '{{$value}}'
                    },
                    @endforeach
                ],
                chunk_size: 100,
                loading: false,
                date_modal_start: false,
                date_modal_end: false,
                date_start: "{{ $date_start ?? \Carbon\Carbon::now()->startOfMonth()->toDateString() }}",
                date_end: "{{ $date_end ?? \Carbon\Carbon::now()->toDateString() }}",
                bescs_ids: @json(isset($bescs_ids) && $bescs_ids != null ?  $bescs_ids:[] ),
                type:@json($type),
                shipment: @json($shipment),
                @roles(["admin", "validator", "consultant"])
                agency:{!! $agency ?? 0 !!},
                @endif
                port_load: [],
                port_discharge: [],
                port_load1: @json($port_load ?? []),
                port_discharge1: @json($port_discharge ?? []),
                @if(!empty($setting))
                setting:{!! json_encode($setting) !!},
                @else
                setting: {},
                @endif

                headers: [
                    {text: '{{__("Reference")}}', value: 'reference'},
                    {text: '{{__("Created at")}}', value:'created_at'},
                    {text: '{{__("Shipment method")}}', sortable: false, value: "shipment_method"},
                    @roles(["admin", "validator", "consultant"])
                    {text: '{{__("Agency")}}', sortable: false},
                        @endif

                    {text: '{{__("Loading port")}}', sortable: false},

                    {text: '{{__("Total")}}', sortable: false},
                    {text: '{{__("Action")}}', sortable: false},
                ],
                items:@json($data),
                items_containers: [],
                items_vehicles: [],
                json_fields: {
                    '{{__("Reference")}}': 'reference',
                    '{{__("Type")}}': 'type',
                    '{{__("Shipment method")}}': 'shipment_method_name',
                    '{{__("Loading port")}}': 'port_load_name',
                    '{{__("Discharge port")}}': 'port_discharge_name',
                    @roles(["admin", "validator", "consultant"])
                    '{{__("Agency")}}': {
                        field: 'agency', callback: (value) => {
                            return `${value.name || ''}`;
                        }
                    },
                    @endif

                    '{{__("Shipper")}}': 'shipper.name',
                    '{{__("Notifiy Party")}}': 'notifyparty.name',
                    '{{__("Consignee")}}': 'consignee.name',
                    '{{__("Carrier")}}': 'carrier.name',
                    '{{__("Vessel")}}': 'vessel.name',
                    '{{__("Incoterm")}}': 'incoterm.name',
                    '{{__("Voyage number")}}': 'voyage_number',
                    '{{__("Bill of lading number")}}': 'bill_of_lading_number',
                    '{{__("Final place of delivery")}}': 'bill_of_lading_number',
                    '{{__("Description")}}': 'description',
                    '{{__("Commercial invoice value")}}': 'commercial_invoice_value',
                    '{{__("Sea freight")}}': 'sea_freight',
                    '{{__("Fob costs")}}': 'fob_costs',
                    '{{__("Others costs")}}': 'others',
                    '{{__("Documents fee")}}': 'documents_fee',
                    '{{__("Fee per shipment")}}': 'fee_per_shipment',
                    '{{__("Total")}}': {
                        field: 'total', callback: (value) => {
                            return `${value} EUR`;
                        }
                    },
                    '{{__("Volume")}}/m3': 'volume',
                    '{{__("Gross Weight")}}/kg': 'gross_weight',
                    '{{__("20' containers")}}': 'nb_containers_20',
                    '{{__("40' containers")}}': 'nb_containers_40',
                    '{{__("Vehicles 1")}}': 'nb_vehicles1',
                    '{{__("Vehicles 2")}}': 'nb_vehicles2',
                    '{{__("Date Shipped")}}': {
                        field: 'date_shipped', callback: (value) => {
                            return formatDate(value);
                        }
                    },
                    '{{__("Created at")}}': {
                        field: 'created_at', callback: (value) => {
                            return formatDate(value);
                        }
                    },
                    '{{__("Validated at")}}': {
                        field: 'validated_at', callback: (value) => {
                            return formatDate(value);
                        }
                    },
                },
                json_containers_fields: {
                    '{{__("Reference")}}': 'reference',
                    '{{__("Container No")}}': 'container_number',
                    '{{__("Seal")}}': 'seal',
                    '{{__("Container Type")}}': 'type',
                    '{{__("Container Size")}}': 'size',
                },
                json_vehicles_fields: {
                    '{{__("Reference")}}': 'reference',
                    '{{__("Chassi no")}}': 'chassi',
                    '{{__("Gross weight")}}': 'weight',
                    '{{__("Description")}}': 'description',
                },

                json_data: [
                    {
                        'name': 'Tony Peña',
                        'city': 'New York',
                        'country': 'United States',
                        'birthdate': '1978-03-15',
                        'phone': {
                            'mobile': '1-541-754-3010',
                            'landline': '(541) 754-3010'
                        }
                    },
                    {
                        'name': 'Thessaloniki',
                        'city': 'Athens',
                        'country': 'Greece',
                        'birthdate': '1987-11-23',
                        'phone': {
                            'mobile': '+1 855 275 5071',
                            'landline': '(2741) 2621-244'
                        }
                    }
                ],
                json_meta: [
                    [
                        {
                            'key': 'charset',
                            'value': 'utf-8'
                        }
                    ]
                ],

            }),
            props: {
                source: String,
                context: Object,
                item: {},
                event: {
                    type: Function,
                    default: function (event, data) {
                    }
                },

            },
            computed: {
                reporturl() {
                    var url = "{{route("transfer")}}?";
                    url += "&date_start=" + this.date_start;
                    url += "&date_end=" + this.date_end;
                    if (this.type) {
                        url += "&type=" + this.type;
                    }
                    if (this.bescs_ids) {
                        url += "&bescs_ids=" + this.bescs_ids;
                    }
                    
                @roles(["admin", "validator", "consultant"])
                if
                    (this.agency)
                    {
                        url += "&agency=" + this.agency;
                    }
                    @endif
                    if (this.shipment) {
                        url += "&shipment=" + this.shipment;
                    }
                    if (this.port_load) {
                        url += "&port_load=" + this.port_load;
                    }
                    if (this.port_discharge) {
                        url += "&port_discharge=" + this.port_discharge;
                    }
                    return url;
                },
                excel_sheets() {
                    return [
                        {name: "{{__("ECTNS")}}", fields: this.json_fields, data: this.items},
                        {
                            name: "{{__("Containers")}}",
                            fields: this.json_containers_fields,
                            data: this.items_containers
                        },
                        {name: "{{__("Vehicles")}}", fields: this.json_vehicles_fields, data: this.items_vehicles},
                    ];
                },
                 params1(nv) {
                    return {
                        query: this.search
                    };
                },

            },
            watch: {
                params1: {
                    handler() {
                        if(this.search && this.search.length > 0){
                            this.getBescs(this.search);
                        }
                    },
                    deep: true
                },
            },
            mounted() {
                for (var i = 0; i < this.items.length; i++) {
                    var item = this.items[i];

                    if (item.shipment_method === "ro_ro") {
                        for (var j = 0; j < item.vehicles.length; j++) {
                            item.vehicles[j].reference = item.reference || "";
                        }
                        this.items_vehicles = this.items_vehicles.concat(item.vehicles)
                    }
                    
                    if (item.shipment_method === "fcl_container") {
                        for (var j = 0; j < item.containers.length; j++) {
                            item.containers[j].reference = item.reference || "";
                        }
                        this.items_containers = this.items_containers.concat(item.containers)
                    }

                }
                for (var i = 0; i < this.port_load1.length; i++) {
                    this.port_load.push(parseInt(this.port_load1[i]));
                }
                for (var i = 0; i < this.port_discharge1.length; i++) {
                    this.port_discharge.push(parseInt(this.port_discharge1[i]));
                }

            },
            methods: {
                eventListener(event, data) {
                    switch (event) {
                        case "mastermind":
                            this.pushItem(data);
                            break;
                        default:
                            (this.event)(event, data);

                            break;
                    }
                },
                getBescs(dis_str){
                    this.searching = true;
                  axios.get("{{route("bescs.index")}}?&term="+dis_str).then((response)=>{
                      this.bescs = response.data.data;
                      this.searching = false;
                  })
                },
                transferData() {
                         this.loading = true;
                    axios.post(this.reporturl + "&transfer=1").then((response)=>{
                      this.toast("{{__("Data transferred successfully")}}", "success");
                      this.loading = false;
                      
                  }).then(() => {
                       this.loading = false;
                  }).catch((error) => {
                       this.loading = false;
                  })
                },
                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);
                    })


                },


                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,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)
                },
                getValue(model, str) {
                    if (str.indexOf(".") < 0) {
                        return model[str] || "";
                    } else {
                        let current = str.slice(0, (str.indexOf(".")));
                        let next = str.slice((str.indexOf(".")) + 1);
                        model = model[current];
                        return (model) ? getValue(model, next) : "";
                    }

                }
            },
        }
    </script>
@endsection
@section("components_instances")
    PageContent
@endsection