{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Fulfilment{% endtrans %}{% endblock %}
{% block content %}
    {% include 'v2/flashcss.html.twig' %}
    <div id="app" class="{{ containerClass }}" style="background-color: black">
        <div class="row" style="background-color: #336f94; color: white">
            <div class="col-9 mt-2 mb-0">
                <p class="h5" >{% trans %}Fulfilment{% endtrans %}</p>
            </div>
            <div class="col mt-2 mb-0">
                <p class="h5 text-right" v-if="orderGroup">Group #${orderGroup.id}$</p>
            </div>
        </div>

        <div class="row mb-3 mt-3 ml-0 mr-0" >
            <div class="col-9">
                <b-progress :max="progressMax" height="100%">
                    <b-progress-bar :value="progressValue" :label="progressValue + '/' +  progressMax + ' '+ `${((progressValue / progressMax) * 100).toFixed(2)}%`"></b-progress-bar>
                </b-progress>
            </div>
            <div class="col-3 text-center" style="color: white">
                <p class="h3 inactive">Ελλείψεις: ${shortage}$</p>
            </div>
        </div>

        <div class="row mb-3 mt-3 ml-0 mr-0" style="background-color: rgb(51, 111, 148); color: white">
            <div class="col-12" style="background-color: rgb(51, 111, 148); color: white">
                <div class="row mb-3 mt-3 ml-0 mr-0" style="background-color: rgb(51, 111, 148); color: white">
                    <div class="col-6" style="background-color: rgb(51, 111, 148); color: white">
                        <p class="h4 inactive">
                            Side: ${locationSide}$.
                            Col: ${locationColumn}$.
                            Row: ${locationRow}$
                        </p>
                    </div>
                    <div class="col-6 text-right" style="background-color: rgb(51, 111, 148); color: white">
                        <p class="h4 inactive">
                            Τεμάχια:
                            Crate: ${locationAmountCrate}$,
                            IB: ${locationAmountBox}$
                        </p>
                    </div>
                </div>

                <div class="row mb-3 mt-3 ml-0 mr-0" style="background-color: rgb(51, 111, 148); color: white">
                    <div class="col-3 text-center " style="background-color: rgb(51, 111, 148); color: white">
                        <p class="h3" :class="locationRollRackPositionClass">
                            ${locationRollRackPosition}$
                        </p>
                    </div>
                    <div class="col-1 text-center" style="background-color: rgb(51, 111, 148); color: white">
                        <span class="h3 text-center" style="color: orangered">
                            <i class="bi bi-arrow-right"></i>
                        </span>
                    </div>
                    <div class="col-3 text-center" style="background-color: rgb(51, 111, 148); color: white">
                        <p class="h3" :class="locationRollRackCrateClass">
                            ${locationRollRackCrate}$
                        </p>
                    </div>
                    <div class="col-1 text-center" style="background-color: rgb(51, 111, 148); color: white">
                        <span class="h3 text-center" style="color: orangered">
                            <i class="bi bi-arrow-right"></i>
                        </span> 
                    </div>
                    <div class="col-3 text-center" style="background-color: rgb(51, 111, 148); color: white">
                        <p class="h3" :class="locationRollRackIBClass">
                            ${locationRollRackIB}$ 
                        </p>
                    </div>
                    <div class="col-1 text-center" style="background-color: rgb(51, 111, 148); color: white">

                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-3 mt-3 ml-0 mr-0" >
            <div class="col-7"  style="background-color: rgb(51, 111, 148); color: white">
                <div class="row">
                    <div class="col-12 m-2" >
                        <p class="h3" :class="productBarcodeClass">${productDescription}$</p>
                    </div>
                    <div class="col-12  m-2" >
                        <p class="h3" :class="productBarcodeClass">${productBarcode}$</p>
                    </div>
                    <div class="col-6" >
                        <p class="h3 text-left">Ποσότητα:</p>
                    </div>
                    <div class="col-6" >
                        <p class="h3 inactive text-center">${productAmountCollected}$/${productAmountTotal}$</p>
                    </div>
                </div>
            </div>
            <div :class="productImageClass" style="">
                <img @click="showModal" v-if="infoSKUImage" class="img-thumbnail" style="" :src="infoSKUImage"/>
            </div>
        </div>

        <div class="row mb-3 mt-3 ml-0 mr-0">
            <div class="col  ">
                <div class="row ">
                    <div class="col-3 pt-3" style="background-color: rgb(51, 111, 148); color: white">
                        <p class="h3 text-center">Παραγγελία:</p>
                    </div>
                    <div class="col-3 pt-3" style="border-right: 10px solid black; background-color: rgb(51, 111, 148); color: white" >
                        <p class="h3 inactive text-center">${currentProductOrderIndex}$/${currentProductTotalOrders}$</p>
                    </div>
                    <div class="col-3 pt-3" style="border-left: 10px solid black; background-color: rgb(51, 111, 148); color: white" >
                        <p class="h3  text-center">Ποσότητα:</p>
                    </div>
                    <div class="col-3 pt-3" style="background-color: rgb(51, 111, 148); color: white" >
                        <p class="h3 inactive text-center">${orderProductAmountCollected}$/${orderProductAmountTotal}$</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-3" style="background-color: rgb(51, 111, 148); color: white">
                        <p class="h3 text-center">Θέση:</p>
                    </div>
                    <div class="col-3" style="border-right: 10px solid black; background-color: rgb(51, 111, 148); color: white">
                        <p class="h3 inactive text-center">${orderPosition}$</p>
                    </div>
                    <div class="col-6" style="border-left: 10px solid black; background-color: rgb(51, 111, 148); color: white">
                    </div>
                </div>
                <div class="row">
                    <div class="col-6" style="border-right: 10px solid black; background-color: rgb(51, 111, 148); color: white">
                        <p class="h3 text-center" :class="orderBoxClass"><span v-if="scannedBufferBarcode">${scannedBufferBarcode}$ /</span> ${orderBox}$</p>
                    </div>
                    <div class="col-6" style="border-left: 10px solid black; background-color: rgb(51, 111, 148); color: white">
                        <p class="text-center h3" style="height:100%">
                        <b-button variant="light" pill :disabled="block" v-on:click="skip">
                            {% trans %}Παράλειψη SKU{% endtrans %}</b-button>
                        </p>
                    </div>
                </div>

            </div>
        </div>

        <div class="row mb-3 mt-3 ml-0 mr-0" >
            <div class="col-6" >
                <div class="row">
                    <div class="col-8">
                        <p class="text-center h3 mb-0 pb-0 align-middle">
                        <b-form-input @keyup.enter="enterClicked" :readonly="false" 
                                       v-model="scannedBarcode" ref="barcode" placeholder="barcode"></b-form-input>
                        </p>
                    </div>
                    <div class="col-4 text-left" style="color: white">
                        <p class="m-0 p-0 text-left">
                        <b-button variant="light" pill :disabled="block" v-on:click="enterClicked">
                            {% trans %}Επιβεβαίωση{% endtrans %}</b-button>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-6 align-items-center" style="color: white">
                <p class="align-self-center h-100 align-items-center"><span class="align-middle">${hint}$</span></p>
            </div>
        </div>

        <div class="row mb-3 mt-3 ml-0 mr-0" >
            <div class="col-6" >
                <p class="text-left h3">
                <b-button variant="light" pill :disabled="block" v-on:click="viewPrevious">
                    {% trans %}Επισκόπηση προηγούμενου IB{% endtrans %}</b-button>
                </p>
            </div>
            <div class="col-6" >
                <p class="text-right h3">
                <b-button variant="light" pill :disabled="block" v-on:click="postpone">
                    {% trans %}Αναβολή{% endtrans %}</b-button>
                </p>
            </div>
        </div>

        <!-- modals -->

        <div>
            <b-modal return-focus="barcode" ref="img-modal" hide-footer size="lg" :title="infoSKUDescription">
                <div class="d-block text-center">
                    <img @click="hideModal" v-if="infoSKUImage" class="img img-fluid" style="" :src="infoSKUImage"/>
                </div>
            </b-modal>
        </div>

        <div>
            <b-modal return-focus="barcode" ref="skip-modal" id="skip-modal" 
                     @ok="skipSKUHandleOk" @cancel="skipSKUHandleCancel" @hide="skipSKUHandleCancel">
                <template #modal-header>
                    {#<b-button size="sm" variant="outline-danger" @click="close()">
                        Close Modal
                    </b-button>#}
                    <h5>{% trans %}Επιβεβαίωση{% endtrans %}</h5>
                </template>

                <template #default>
                    <p>{% trans %}Να γίνει παράλειψη του SKU;{% endtrans %}</p>
                    {#<b-button @click="hide()">Hide Modal</b-button>#}
                    <b-form-select v-model="skipSelect" :options="skipSelectOptions" size="sm" class="mt-3"></b-form-select>
                </template>

                {#<template #modal-footer="{ ok, cancel, hide }">#}
                <template #modal-footer="{ ok, cancel }">
                    {#<b>Custom Footer</b>#}
                    <!-- Emulate built in modal footer ok and cancel button actions -->
                    <b-button size="sm" variant="success" @click="ok()">
                        {% trans %}Παράλειψη{% endtrans %}
                    </b-button>
                    <b-button size="sm" variant="danger" @click="cancel()">
                        {% trans %}Ακύρωση{% endtrans %}
                    </b-button>
                    <!-- Button with custom close trigger value -->
                    {#<b-button size="sm" variant="outline-secondary" @click="hide('forget')">
                        Forget it
                    </b-button>#}
                </template>
            </b-modal>
        </div>

        {#
        <div class="row mt-3 mb-1" >
            <div class="col">
                <ul>
                    <li v-for="line in messages" >
                        ${ line }$
                    </li>
                </ul>
            </div>
        </div>
        #}
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>

        var app = new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                block: false,

                indent: 0,
                debug: false,
                messages: [],
                productImageClass: "col-5",

                activeOrderGroups: [],
                orderGroup: null,
                pathIndex: -1,

                progressValue: 0,
                progressMax: 0,
                shortage: "",
                hint: "",

                locationRollRackPositionClass: 'inactive',
                locationRollRackCrateClass: 'inactive',
                locationRollRackIBClass: 'inactive',

                locationSide: null,
                locationColumn: null,
                locationRow: null,
                locationAmountCrate: null,
                locationAmountBox: null,
                locationRollRackPosition: null,
                locationRollRackCrate: null,
                locationRollRackIB: null,

                productDescription: null,
                productBarcode: null,
                productBarcodeClass: 'inactive',
                productAmountCollected: null,
                productAmountTotal: null,

                currentProductOrderIndex: null,
                currentProductTotalOrders: null,
                orderPosition: null,
                orderBox: null,
                orderBoxClass: 'inactive',
                orderProductAmountCollected: null,
                orderProductAmountTotal: null,

                infoSKUDescription: null,
                scanVisionButtonDisabled: null,
                scannerInputDisabled: null,
                infoSKUImage: null,

                scannedBarcode: "",
                scannedCrateBarcode: null,
                scannedBoxBarcode: null,
                scannedDestinationBarcode: null,
                scannedBufferBarcode: null,
                scannedSkuBarcode: null,

                skipSelect: null,
                skipSelectOptions: [
                    {value: null, text: 'Επιλέξτε'},
                    {value: 'skip', text: 'Παράλειψη χωρίς μηδενισμό αποθέματος του ΙΒ'},
                    {value: 'skipAndSetZero', text: 'Παράλειψη και μηδενισμός αποθέματος του ΙΒ'}
                ]
            },
            async mounted() {
                this.dlog("mounted");
                if ("{{ app.request.schemeAndHttpHost }}".includes("localhost") || "{{ app.request.schemeAndHttpHost }}".includes("127.0.0.1")) {
                    this.productImageClass = "col-1";
                }

                if (this.debug) {
                    this.scannedBarcode = "RR-10";
                }
                this.$nextTick(() => {
                    this.$refs.barcode.focus();
                });
            },
            watch: {

            },
            computed: {
            },
            methods: {
                dlog: function (msg) {
                    //this.messages.push(msg);
                    console.log(msg);
                },
                findNextInPhase: function (phase, idx) {
                    var current = idx;
                    var currentPhase = phase;
                    var next = null;
                    console.log("findNextInPhase: try1");
                    for (var i = idx; i < this.orderGroup.path.length; i++) {
                        if (this.orderGroup.path[i].phase !== currentPhase) {
                            console.log("findNextInPhase: phase !== currentPhase");
                            continue;
                        }
                        if ((this.orderGroup.path[i].collected + this.orderGroup.path[i].cancelled) === this.orderGroup.path[i].reservedInventory) {
                            console.log("#" + i);
                            continue;
                        }
                        next = i;
                        break;
                    }
                    if (next === null) {
                        console.log("findNextInPhase: try2");
                        for (var i = 0; i < idx; i++) {
                            if (this.orderGroup.path[i].phase !== currentPhase) {
                                console.log("findNextInPhase: phase !== currentPhase");
                                continue;
                            }
                            if ((this.orderGroup.path[i].collected + this.orderGroup.path[i].cancelled) === this.orderGroup.path[i].reservedInventory) {
                                console.log("#" + i);
                                continue;
                            }
                            next = i;
                            break;
                        }
                    }

                    console.log("findNextInPhase: @" + current + " -> " + next);
                    if (next !== null) {
                        return next;
                    }
                    return -1;
                },
                goToFirstUncollected: function () {
                    this.dlog("goToFirstUncollected");

                    for (var i = 0; i < this.orderGroup.path.length; i++) {
                        var phase = this.orderGroup.path[i].phase;
                        if (phase !== 0 && phase !== 1 && phase !== 2) {
                            alert("internal error: phase not between 0 - 2");
                        }
                    }
                    for (var i = 1; i < this.orderGroup.path.length; i++) {
                        var p1 = this.orderGroup.path[i - 1].phase;
                        var p2 = this.orderGroup.path[i].phase;
                        if (p1 === p2)
                            continue;
                        if ((p2 - p1) === 1)
                            continue;
                        if ((p2 - p1) === 2)
                            continue;
                        alert("internal error: phase not sorted");
                    }

                    var phaseCountDone = [0, 0, 0];
                    var phaseCountRemaining = [0, 0, 0];
                    var phaseOffset = [-1, -1, -1];


                    for (var i = 0; i < this.orderGroup.path.length; i++) {
                        var p = this.orderGroup.path[i];
                        if ((p.collected + p.cancelled) === p.reservedInventory) {
                            phaseCountDone[p.phase]++;
                        } else {
                            phaseCountRemaining[p.phase]++;
                        }
                        if (phaseOffset[p.phase] === -1)
                            phaseOffset[p.phase] = i;
                    }


                    if (phaseCountRemaining[0] === 0 && phaseCountRemaining[1] === 0 && phaseCountRemaining[2] === 0) {
                        this.dlog("all pathIndex are collected");
                        this.pathIndex = this.orderGroup.path.length;
                        this.rcpFinishGroup();
                        return;
                    }

                    phase = this.orderGroup.lastPhase;
                    //alert(this.orderGroup.lastPhase + "|" + this.orderGroup.lastRackBarcode);
                    var next = this.findNextInPhase(phase, this.pathIndex);
                    if (next === -1) {
                        if (phase === 2) {
                            next = this.findNextInPhase(0, 0);
                            if (next === -1) {
                                next = this.findNextInPhase(1, 0);
                            }
                        }
                        if (phase === 0) {
                            next = this.findNextInPhase(1, 0);
                            if (next === -1) {
                                next = this.findNextInPhase(2, 0);
                            }
                        }
                        if (phase === 1) {
                            next = this.findNextInPhase(0, 0);
                            if (next === -1) {
                                next = this.findNextInPhase(2, 0);
                            }
                        }
                    }
                    if (next === -1) {
                        this.dlog("all pathIndex are collected");
                        this.pathIndex = this.orderGroup.path.length;
                    } else {
                        this.pathIndex = next;
                    }
                    return;

                    for (var i = this.pathIndex; i < this.orderGroup.path.length; ) {
                        if (i > 0 && this.orderGroup.path[i].phase === 2
                                && this.orderGroup.path[i - 1].phase === 1
                                && phaseCountRemaining[1] !== 0
                                ) {
                            i = phaseOffset[1];
                            console.log("1->2");
                        } else if (i > 0 && this.orderGroup.path[i].phase === 2
                                && this.orderGroup.path[i - 1].phase === 0
                                && phaseCountRemaining[2] !== 0 && phaseCountDone[2] !== 0
                                ) {
                            i = phaseOffset[2];
                            console.log("2->2");
                        } else if (i > 0 && this.orderGroup.path[i].phase === 2
                                && this.orderGroup.path[i - 1].phase === 0
                                && phaseCountRemaining[0] !== 0
                                ) {
                            i = 0;
                            console.log("0->2");
                        } else if (this.orderGroup.path[i].phase === 2
                                && i === this.orderGroup.path.length - 1
                                && phaseCountRemaining[2] !== 0
                                ) {
                            console.log("LAST with items");
                            if ((this.orderGroup.path[i].collected + this.orderGroup.path[i].cancelled) === this.orderGroup.path[i].reservedInventory) {
                                i = phaseOffset[2];
                            }

                        } else if (this.orderGroup.path[i].phase === 2
                                && i === this.orderGroup.path.length - 1
                                && phaseCountRemaining[2] === 0
                                && phaseCountRemaining[0] + phaseCountRemaining[1] !== 0
                                ) {
                            console.log("LAST ok");

                            i = 0;
                        } else if (i > 0 && this.orderGroup.path[i].phase !== 0
                                && this.orderGroup.path[i - 1].phase === 0
                                && phaseCountRemaining[0] !== 0
                                ) {
                            console.log("0->12");
                            i = 0;
                        }
                        if ((this.orderGroup.path[i].collected + this.orderGroup.path[i].cancelled) === this.orderGroup.path[i].reservedInventory) {
                            console.log(i + " is collected, try next");
                        } else {
                            this.pathIndex = i;
                            break;
                        }
                        i++;
                        if (i === this.orderGroup.path.length) {
                            this.dlog("all pathIndex are collected");
                            this.pathIndex = i;
                            this.rcpFinishGroup();
                            break;
                        }
                    }

                    if (false)
                        while ((
                                (this.orderGroup.path[this.pathIndex].collected + this.orderGroup.path[this.pathIndex].cancelled)
                                === this.orderGroup.path[this.pathIndex].reservedInventory)) {
                            this.dlog("pathIndex " + this.pathIndex + " is collected");
                            this.pathIndex++;
                            if (this.pathIndex === this.orderGroup.path.length) {
                                this.dlog("all pathIndex are collected");
                                this.rcpFinishGroup();
                                break;
                            }
                        }
                    this.dlog("goToFirstUncollected: pathIndex = " + this.pathIndex);
                },
                updateUI: function () {
                    this.dlog("updateUI");
                    this.goToFirstUncollected();
                    if (this.pathIndex === this.orderGroup.path.length) {
                        this.$bvModal.msgBoxOk("ΤΕΛΟΣ");
                        this.block = true;
                        this.progress();
                        return;
                    }

                    var path = this.orderGroup.path[this.pathIndex];
                    this.messages = [];
                    for (var i = 0; i < this.orderGroup.path.length; i++) {

                        var col = this.orderGroup.path[i].collected + this.orderGroup.path[i].cancelled
                                === this.orderGroup.path[i].reservedInventory;
                        var p = "";
                        if (col)
                            p = "*";
                        if (i === this.pathIndex)
                            p = " -> ";
                        this.messages.push(p + this.orderGroup.path[i].position + "|" + col + "|" + this.orderGroup.path[i].reservedInventory);
                    }
                    var state = 0;
                    if (this.scannedBoxBarcode === null || this.scannedBoxBarcode !== path.box) {
                        state = 2;
                        this.hint = "Σάρωσε το IB του προϊόντος";
                        if ('DX-A12-01' === path.box) {
                            this.scannedBarcode = path.box;
                        }
                    } else if (this.scannedDestinationBarcode === null || this.scannedDestinationBarcode !== path.orderBox) {
                        state = 1;
                        this.hint = "Σάρωσε το IB της παραγγελίας";
                    } else {
                        state = 0;
                        this.hint = "Σάρωσε το προϊόν";
                        if ('DX-A12-01' === path.box) {
                            this.scannedBarcode = path.productBarcode;
                        }
                    }

                    this.shortage = this.orderGroup.ordersWithMissing.length;

                    this.locationSide = path.position.substring(3, 4);
                    this.locationColumn = path.position.substring(4, 6);
                    this.locationRow = path.position.substring(7, 9);


                    this.locationAmountCrate = path.cratesInRackAmount;
                    this.locationAmountBox = path.boxesInCrateAmount;

                    if (path.position !== path.box || path.crate !== path.box) {
                        if (this.locationRollRackPosition !== path.position) {
                            this.locationRollRackPositionClass = 'flash';
                            setTimeout(() => {
                                this.locationRollRackPositionClass = 'inactive';
                            }, 3000);
                        }
                        this.locationRollRackPosition = path.position;

                        if (this.locationRollRackCrate !== path.crate) {
                            this.locationRollRackCrateClass = 'flash';
                            setTimeout(() => {
                                this.locationRollRackCrateClass = 'inactive';
                            }, 3000);
                        }
                        this.locationRollRackCrate = path.crate;
                    } else {
                        this.locationRollRackPosition = "";
                        this.locationRollRackCrate = "";
                    }

                    if (this.locationRollRackIB !== path.box) {
                        this.locationRollRackIBClass = 'flash';
                        setTimeout(() => {
                            this.locationRollRackIBClass = 'inactive';
                        }, 3000);
                    }
                    this.locationRollRackIB = path.box;

                    if (this.productBarcode !== path.productBarcode) {
                        this.productBarcodeClass = 'flash';
                        setTimeout(() => {
                            this.productBarcodeClass = 'inactive';
                        }, 3000);
                    }

                    if (state === 2) {
                        this.productDescription = path.productDescription;
                        this.productBarcode = path.productBarcode;

                        this.infoSKUImage = "https://www.galeriedebeaute.gr/images/products/" + path.productBarcode + "_01.jpg";
                        this.productAmountCollected = this.countProductAmountCollected(path.boxId, path.productId);
                        this.productAmountTotal = this.countProductAmountTotal(path.boxId, path.productId);

                        this.currentProductOrderIndex = "";
                        this.currentProductTotalOrders = "";
                        this.orderPosition = "";

                        this.orderBox = "";

                        this.orderProductAmountCollected = "";
                        this.orderProductAmountTotal = "";
                    } else if (state === 1) {
                        this.productDescription = path.productDescription;
                        this.productBarcode = path.productBarcode;


                        this.infoSKUImage = "https://www.galeriedebeaute.gr/images/products/" + path.productBarcode + "_01.jpg";
                        this.productAmountCollected = this.countProductAmountCollected(path.boxId, path.productId);
                        this.productAmountTotal = this.countProductAmountTotal(path.boxId, path.productId);

                        this.currentProductOrderIndex = path.currentProductOrderIndex;
                        this.currentProductTotalOrders = path.currentProductTotalOrders;
                        this.orderPosition = path.orderBoxposition;

                        if (this.orderBox !== path.orderBox) {
                            this.orderBoxClass = 'flash';
                            setTimeout(() => {
                                this.orderBoxClass = 'inactive';
                            }, 3000);
                        }
                        this.orderBox = path.orderBox;

                        this.orderProductAmountCollected = path.totalOrderAmount;
                        this.orderProductAmountTotal = path.reservedInventory;
                    } else {
                        this.productDescription = path.productDescription;
                        this.productBarcode = path.productBarcode;


                        this.infoSKUImage = "https://www.galeriedebeaute.gr/images/products/" + path.productBarcode + "_01.jpg";
                        this.productAmountCollected = this.countProductAmountCollected(path.boxId, path.productId);
                        this.productAmountTotal = this.countProductAmountTotal(path.boxId, path.productId);

                        this.currentProductOrderIndex = path.currentProductOrderIndex;
                        this.currentProductTotalOrders = path.currentProductTotalOrders;
                        this.orderPosition = path.orderBoxposition;

                        if (this.orderBox !== path.orderBox) {
                            this.orderBoxClass = 'flash';
                            setTimeout(() => {
                                this.orderBoxClass = 'inactive';
                            }, 3000);
                        }
                        this.orderBox = path.orderBox;

                        this.orderProductAmountCollected = path.totalOrderAmount;
                        this.orderProductAmountTotal = path.reservedInventory;

                        this.productBarcodeClass = 'flash';
                        setTimeout(() => {
                            this.productBarcodeClass = 'inactive';
                        }, 3000);
                    }

                    this.progress();

                    if (this.debug) {
                        //if (this.scannedCrateBarcode === null || this.scannedCrateBarcode !== path.crate) {
                        //this.scannedBarcode = path.crate;
                        //} else
                        if (this.scannedBoxBarcode === null || this.scannedBoxBarcode !== path.box) {
                            this.scannedBarcode = path.box;
                        } else if (this.scannedDestinationBarcode === null || this.scannedDestinationBarcode !== path.orderBox) {
                            this.scannedBarcode = path.orderBox;
                            //this.scannedBarcode = "C1111";
                        } else {
                            this.scannedBarcode = path.productBarcode;
                        }
                        this.$nextTick(() => {
                            this.$refs.barcode.focus();
                        });
                    }

                },
                countProductAmountCollected: function (boxId, productId) {
                    var r = 0;
                    for (var i = 0; i < this.orderGroup.path.length; i++) {
                        if (this.orderGroup.path[i].boxId === boxId && this.orderGroup.path[i].productId === productId) {
                            r += this.orderGroup.path[i].collected;
                        }

                    }
                    return r;
                },
                countProductAmountTotal: function (boxId, productId) {
                    var r = 0;
                    for (var i = 0; i < this.orderGroup.path.length; i++) {
                        if (this.orderGroup.path[i].boxId === boxId && this.orderGroup.path[i].productId === productId) {
                            r += this.orderGroup.path[i].reservedInventory;
                        }
                    }
                    return r;
                },

                showModal: function () {
                    console.log("showModal");
                    this.$refs['img-modal'].show();
                },
                hideModal: function () {
                    console.log("hideModal");
                    this.$refs['img-modal'].hide();
                },

                findOrder: function (orderId) {
                    for (var i = 0; i < this.orderGroup.orders.length; i++) {
                        if (this.orderGroup.orders[i].id === orderId) {
                            return this.orderGroup.orders[i];
                        }
                    }
                    return null;
                },
                orderMainBox: function (orderId) {
                    for (var i = 0; i < this.orderGroup.orders.length; i++) {
                        if (this.orderGroup.orders[i].id === orderId) {
                            return this.orderGroup.orders[i].mainBox;
                        }
                    }
                    return false;
                },
                scanBarcode: async function () {
                    var path = this.orderGroup.path[this.pathIndex];

                    var scannedBarcode = this.scannedBarcode;
                    this.scannedBarcode = "";

                    /*if (this.scannedCrateBarcode === null || this.scannedCrateBarcode !== path.crate) {
                     this.dlog("user must scan crate " + path.crate);
                     if (scannedBarcode !== path.crate) {
                     alert("ERROR");
                     return;
                     }
                     this.scannedCrateBarcode = path.crate;
                     return;
                     } else */
                    if (this.scannedDestinationBarcode === null)
                        this.dlog("this.scannedDestinationBarcode === null");
                    if (this.scannedDestinationBarcode !== path.orderBox)
                        this.dlog("this.scannedDestinationBarcode !== path.orderBox");
                    if (false === this.rollRackHasBufferBox(this.scannedDestinationBarcode))
                        this.dlog("false === this.rollRackHasBufferBox(this.scannedDestinationBarcode)");


                    if (this.scannedDestinationBarcode !== path.orderBox) {

                        if (scannedBarcode === this.orderMainBox(path.orderId)
                                || this.rollRackHasBufferBox(scannedBarcode))
                            this.scannedDestinationBarcode = null;
                    }

                    if (this.scannedBoxBarcode === null || this.scannedBoxBarcode !== path.box) {
                        this.dlog("user must scan box " + path.box);
                        if (scannedBarcode !== path.box) {
                            this.$bvModal.msgBoxOk("Λάθος IB");

                            return;
                        }
                        this.scannedBoxBarcode = path.box;
                        this.updateUI();
                        return;
                    }

                    if (this.scannedDestinationBarcode === null
                            || this.scannedDestinationBarcode !== path.orderBox
                            || this.rollRackHasBufferBox(scannedBarcode)
                            ) {
                        this.dlog("this.scannedDestinationBarcode " + this.scannedDestinationBarcode);
                        this.dlog("this.rollRackHasBufferBox(scannedBarcode) " + this.rollRackHasBufferBox(scannedBarcode));
                        this.dlog("user must scan ROLL BOX " + path.orderBox);
                        var r = this.rollRackHasBox(scannedBarcode);
                        if (r === false) {
                            this.$bvModal.msgBoxOk("ERROR: Wrong Box: Box not in RollRack");
                            return;
                        }

                        if (scannedBarcode !== path.orderBox && false === this.rollRackHasBufferBox(scannedBarcode)) {
                            this.$bvModal.msgBoxOk("ERROR: Wrong Box");
                            return;
                        }
                        this.scannedDestinationBarcode = path.orderBox;
                        if (this.rollRackHasBufferBox(scannedBarcode))
                            this.scannedBufferBarcode = scannedBarcode;
                        else
                            this.scannedBufferBarcode = null;
                        this.updateUI();
                        return;
                    } else {
                        this.dlog("user must scan product " + path.productBarcode);

                        var sameBarcode = scannedBarcode === path.productBarcode;
                        if (!sameBarcode) {
                            var i;
                            for (i = 0; i < path.productBarcodes.length; i++) {
                                if (path.productBarcodes[i] === scannedBarcode) {
                                    sameBarcode = true;
                                    break;
                                }
                            }
                        }
                        if (!sameBarcode) {
                            this.$bvModal.msgBoxOk("ERROR: Wrong Product: scannedBarcode = <" + scannedBarcode + ">, path.productBarcode = <" + path.productBarcode + ">");
                            return;
                        }

                        this.scannedSkuBarcode = path.productBarcode;

                        if (this.orderProductAmountCollected < this.orderProductAmountTotal) {

                            var result = await this.rpcUpdateReservation(path.orderBox, path.reservationId, this.scannedBufferBarcode);
                            this.scannedBufferBarcode = null;
                            if (result) {
                                path.totalOrderAmount++;
                                path.collected++;
                            }
                        } else {
                            //error
                        }
                        this.updateUI();
                        return;
                    }
                },
                rollRackHasBox: function (box) {
                    for (var i = 0; i < this.orderGroup.rollRackBoxes.length; i++) {
                        if (this.orderGroup.rollRackBoxes[i].box === box)
                            return true;
                    }
                    return false;
                },
                rollRackHasBufferBox: function (box) {
                    for (var i = 0; i < this.orderGroup.bufferBoxes.length; i++) {
                        if (this.orderGroup.bufferBoxes[i].box === box)
                            return true;
                    }
                    return false;
                },
                skipSKUHandleCancel: async function () {
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                    this.dlog("skipSKU: CANCEL: unblock");
                    this.block = false;
                },
                skipSKUHandleOk: async function (bvModalEvt) {

                    this.dlog("skipSKU: OK");
                    if (this.skipSelect === null) {
                        bvModalEvt.preventDefault();
                        return;
                    }
                    this.dlog("skipSKU: add order to skipped orders list");
                    if (false === this.skippedOrderCount.includes(this.currentOrder.id)) {
                        this.skippedOrderCount.push(this.currentOrder.id);
                    }

                    this.dlog("skipSKU: post");

                    var box = '';
                    if (this.currentPositionInfo !== null)
                    {
                        box = this.currentPositionInfo.box
                    }

                    await axios.post('{{ path('v2_api_pick_skip') }}', {
                        orderId: this.currentOrder.id,
                        productId: this.currentOrder.product[this.currentProductIndex].product.id,
                        setAmountToZero: this.skipSelect === 'skipAndSetZero',
                        box: box
                    }).then(response => {
                        console.log(response);
                    }).catch(function (error) {
                        console.log(error);
                    });
                    this.dlog("skipSKU: moveToNextState");
                    await this.moveToNextState(true);
                    this.dlog("skipSKU: skipped");

                    this.dlog("skipSKU: unblock");
                    this.block = false;
                },
                skipSKU: async function () {
                    this.block = true;
                    this.dlog("skipSKU: block");
                    this.skipSelect = null;
                    this.$refs['skip-modal'].show();
                },
                hasBarcode: function (product, barcode) {
                    if (product.barcode === barcode)
                        return true;
                    for (var i = 0; i < product.barcodes.length; i++) {
                        if (barcode === product.barcodes[i])
                            return true;
                    }
                    return false;
                },
                progress: function () {
                    if (this.orderGroup === null) {
                        this.progressValue = 0;
                        this.progressMax = 0;
                    } else {
                        var r = 0;
                        var v = 0;
                        for (var i = 0; i < this.orderGroup.path.length; i++) {
                            r += this.orderGroup.path[i].collected;
                            v += this.orderGroup.path[i].reservedInventory;
                            v -= this.orderGroup.path[i].cancelled;
                        }
                        this.progressValue = r;
                        this.progressMax = v;
                    }
                },

                doViewPrevious: async function () {
                    this.dlog("doViewPrevious");
                    var pathIndex = this.pathIndex - 1;
                    if (pathIndex < 0) {
                        this.$bvModal.msgBoxOk("this is the first box");
                    } else {
                        var path = this.orderGroup.path[pathIndex];
                        var order = this.findOrder(path.orderId);
                        var msg = "POSITION: " + path.position + ", Crate: " + path.crate + ", BOX: " + path.box;
                        msg += ", Order: " + order.magentoOrder + ", Order Box: " + order.boxes[0].box;
                        this.$bvModal.msgBoxOk(msg);
                    }
                },

                scanRollRackBarcode: async function () {
                    this.dlog("scanRollRackBarcode");

                    var barcode = this.scannedBarcode;
                    this.scannedBarcode = "";
                    var result = await this.rpcAssignRollRackToOrderGroup(barcode);
                },

                rpcAssignRollRackToOrderGroup: async function (barcode) {
                    this.dlog("rpcAssignRollRackToOrderGroup");
                    var result = null;
                    await axios.post('{{ path('v2_api_pick_assign') }}', {
                        //orderGroupId: this.orderGroup.id,
                        barcode: barcode
                    }).then(response => {
                        this.dlog("rpcAssignRollRackToOrderGroup got response");
                        result = true;
                        this.orderGroup = response.data;
                        this.pathIndex = 0;
                        this.updateUI();
                    }).catch(error => {
                        console.log(error);
                        var errorMessage = "";
                        if (error.response) {
                            if (error.response.status === 400) {
                                errorMessage = error.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            errorMessage = ("Request ERROR: " + error.message);
                        } else {
                            errorMessage = ("ERROR: " + error.message);
                        }
                        this.$bvModal.msgBoxOk(errorMessage);
                        result = false;
                    });
                    this.dlog("rpcAssignRollRackToOrderGroup returns");
                    return result;
                },
                rcpSkip: async function () {
                    //skip crate not ib
                    this.dlog("rcpSkip");
                    var result = null;
                    await axios.post('{{ path('v2_api_pick_skip') }}', {
                        orderGroupId: this.orderGroup.id,
                        boxId: this.orderGroup.path[this.pathIndex].boxId,
                        productId: this.orderGroup.path[this.pathIndex].productId,
                        reservationId: this.orderGroup.path[this.pathIndex].reservationId,

                    }).then(response => {
                        this.dlog("rcpSkip got response");
                        this.orderGroup = response.data;
                        this.updateUI();
                        result = true;
                    }).catch(error => {
                        result = false;
                        console.log(error);
                        var errorMessage = "";
                        if (error.response) {
                            if (error.response.status === 400) {
                                errorMessage = error.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            errorMessage = ("Request ERROR: " + error.message);
                        } else {
                            errorMessage = ("ERROR: " + error.message);
                        }
                        this.$bvModal.msgBoxOk(errorMessage);
                    });
                    this.dlog("rcpSkip returns");
                    return result;
                },

                rpcUpdateReservation: async function (boxBarcode, reservationId, buffer) {
                    var result = false;
                    this.dlog("rpcUpdateReservation: box: " + boxBarcode + ", reservationId: " + reservationId);
                    await axios.post('{{ path('v2_api_pick_get_product') }}', {
                        boxBarcode: buffer ? buffer : boxBarcode,
                        reservationId: reservationId
                    }).then(response => {
                        result = true;
                        this.dlog("rpcUpdateReservation got response");
                        this.orderGroup.lastRackBarcode = response.data.lastRackBarcode;
                        this.orderGroup.lastPhase = response.data.lastPhase;
                    }).catch(error => {
                        result = false;
                        console.log(error);
                        var errorMessage = "";
                        if (error.response) {
                            if (error.response.status === 400) {
                                errorMessage = error.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            errorMessage = ("Request ERROR: " + error.message);
                        } else {
                            errorMessage = ("ERROR: " + error.message);
                        }
                        this.$bvModal.msgBoxOk(errorMessage);
                    });
                    this.dlog("rpcUpdateReservation returns " + result);
                    return result;

                },
                rcpFinishGroup: function () {
                    this.dlog("rcpFinishGroup");
                    var result = null;
                    axios.post('{{ path('v2_api_pick_finalize_group') }}', {
                        id: this.orderGroup.id,
                    }).then(response => {
                        result = true;
                        this.dlog("rcpFinishGroup got response");
                    }).catch(error => {
                        result = false;
                        console.log(error);
                        var errorMessage = "";
                        if (error.response) {
                            if (error.response.status === 400) {
                                errorMessage = error.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            errorMessage = ("Request ERROR: " + error.message);
                        } else {
                            errorMessage = ("ERROR: " + error.message);
                        }
                        this.$bvModal.msgBoxOk(errorMessage);
                    });
                    this.dlog("rcpFinishGroup returns");
                    return result;
                },
                skip: async function () {

                    var confirmResult = null;
                    await this.$bvModal.msgBoxConfirm('Είσαστε σίγουροι;')
                            .then(value => {
                                confirmResult = value;
                            })
                            .catch(err => {
                                // An error occurred
                            });
                    if (true !== confirmResult) {
                        return;
                    }
                    this.dlog("skip");
                    if (this.block)
                        return;
                    this.dlog("skip: block");
                    this.block = true;
                    await this.rcpSkip();
                    this.block = false;
                    this.dlog("skip: unblock");
                },
                viewPrevious: async function () {
                    this.dlog("viewPrevious");
                    if (this.block)
                        return;
                    this.dlog("viewPrevious: block");
                    this.block = true;
                    await this.doViewPrevious();
                    this.block = false;
                    this.dlog("viewPrevious: unblock");
                },
                postpone: async function () {
                    this.dlog("postpone");
                    if (this.block)
                        return;
                    this.dlog("postpone: block");
                    this.block = true;

                    var current = this.pathIndex;
                    var currentPhase = this.orderGroup.path[this.pathIndex].phase;
                    var currentCrate = this.orderGroup.path[this.pathIndex].crate;

                    var next = null;

                    console.log("Postpone: try1");
                    for (var i = this.pathIndex; i < this.orderGroup.path.length; i++) {
                        if (this.orderGroup.path[i].phase !== currentPhase) {
                            console.log("Postpone: phase !== currentPhase");
                            break;
                        }
                        if ((this.orderGroup.path[i].collected + this.orderGroup.path[i].cancelled) === this.orderGroup.path[i].reservedInventory) {
                            console.log("#" + i);
                            continue;
                        }
                        if (this.orderGroup.path[i].crate !== currentCrate) {
                            next = i;
                            break;
                        }
                    }
                    if (next === null) {
                        console.log("Postpone: try2");
                        for (var i = 0; i < this.pathIndex; i++) {
                            if (this.orderGroup.path[i].phase !== currentPhase) {
                                console.log("Postpone: phase !== currentPhase");
                                continue;
                            }
                            if ((this.orderGroup.path[i].collected + this.orderGroup.path[i].cancelled) === this.orderGroup.path[i].reservedInventory) {
                                console.log("#" + i);
                                continue;
                            }
                            if (this.orderGroup.path[i].crate !== currentCrate) {
                                next = i;
                                break;
                            }
                        }
                    }

                    console.log("Postpone: @" + current + " -> " + next);
                    if (next !== null) {
                        this.pathIndex = next;
                        this.updateUI();
                    }

                    this.block = false;
                    this.dlog("postpone: unblock");
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                },
                enterClicked: async function () {
                    this.dlog("enterClicked");
                    if (this.block)
                        return;
                    this.dlog("enterClicked: block");
                    this.block = true;
                    if (this.orderGroup === null) {
                        await this.scanRollRackBarcode();
                    } else {
                        await this.scanBarcode();
                    }
                    this.block = false;
                    this.dlog("enterClicked: unblock");
                }

            }
        });
    </script>
{% endblock %}