{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Fulfilment{% endtrans %}{% endblock %}
{% block content %}
    <div id="app" class="{{ containerClass }}" style="background-color: black">
        <div class="row" style="background-color: #336f94; color: white">
            <div class="col-8 mt-2 mb-0">
                <p class="h5">{% trans %}Fulfilment{% endtrans %}</p>
            </div>
            <div class="col-4 mt-2 mb-0">
                ${ orderGroup ? orderGroup.rollRackBarcode + " (#" + orderGroup.id + ")" : '' }$
            </div>
        </div>
        <template v-if="orderGroup">
            <div class="row mb-3 mt-3 ml-0 mr-0" >
                <div class="col-9 align-middle" style="">
                    <b-progress :max="counterOrders" height="100%">
                        <b-progress-bar :value="counterOrdersDone" :label="counterOrdersDone + '/' +  counterOrders + ' '+ `${((counterOrdersDone / counterOrders) * 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-1 mt-1 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">
                            Col: ${locationColumn}$. Row: ${locationRow}$
                        </div>
                    </div>

                    <div class="row mb-1 mt-1 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 inactive" style="background-color: white; color: black">
                                ${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 inactive" style="background-color: white; color: black">${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 inactive" style="background-color: white; color: black">${locationRollRackIB}$</p>
                        </div>
                        <div class="col-1 text-center" style="background-color: rgb(51, 111, 148); color: white">
                            <b-button v-if="boxCount > 1" pill :disabled="boxCount < 2" v-on:click="nextBox">+${boxCount - 1}$</b-button>
                        </div>
                    </div>
                    <div class="row mb-1 mt-1 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">
                            <p :class="orderClass">Παραγγελία: ${locationOrder}$ ${ hasMissingMessage }$</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3" >
                <div class="col">
                    <table style="height: 20vh" class="table table-striped table-condensed table-dark justify-content-center">
                        <thead>
                            <tr>
                                <th>{% trans %}Περιγραφή{% endtrans %}</th>
                                <th></th>
                                <th>{% trans %}BARCODE{% endtrans %}</th>
                                <th>{% trans %}Ποσότητα{% endtrans %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr :class="g.active" v-for="(g,index) in this.table1">
                                <td>${ g.description }$</td>
                                <td><img @click="showModal(g.infoSKUImage, g.description)" v-if="g.infoSKUImage" class="img-thumbnail" style="height: 48px" :src="g.infoSKUImage"/></td>
                                <td>${ g.barcode }$</td>
                                <td>${ g.amount }$</td>
                                <td><b-button v-if="g.productIsGift" variant="outline-primary" :disabled="false" v-on:click="scanGift(g.barcode)">Δώρο</b-button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row mt-1" >
                <div class="col">
                    <table style="height: 20vh" class="table table-striped table-condensed table-dark justify-content-center">
                        <thead>
                            <tr>
                                <th>{% trans %}Περιγραφή{% endtrans %}</th>
                                <th></th>
                                <th>{% trans %}BARCODE{% endtrans %}</th>
                                <th>{% trans %}Ποσότητα{% endtrans %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr :class="g.active" v-for="(g,index) in this.table2">
                                <td>${ g.description }$</td>
                                <td><img @click="showModal(g.infoSKUImage, g.description)" v-if="g.infoSKUImage" class="img-thumbnail" style="height: 48px" :src="g.infoSKUImage"/></td>
                                <td>${ g.barcode }$</td>
                                <td>${ g.amount }$</td>
                                <td><b-button variant="outline-primary" :disabled="false" v-on:click="resetPackagedProduct(index)"><b-icon icon="x-circle" scale="2" variant="danger"></b-icon></b-button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row mt-1" >
                <div class="col-4">
                    <div class="text-left">
                        <b-button variant="light" pill :disabled="false" v-on:click="postponeOrder">{% trans %}Παράλειψη{% endtrans %}</b-button>
                    </div>
                </div>
                <div class="col-4">
                    <div class="text-center">
                        <b-button variant="light" pill :disabled="false" v-on:click="finishOrderWithMissing">{% trans %}Ολοκλήρωση με ελλείψεις{% endtrans %}</b-button>
                    </div>
                </div>
                <div class="col-4">
                    <div class="text-right">
                        <b-button variant="light" pill :disabled="lastPrintJob === null" v-on:click="reprintLabelAction">{% trans %}Επανεκτύπωση{% endtrans %}</b-button>
                    </div>
                </div>
            </div>
        </template>

        <div class="row mb-3 mt-3 ml-0 mr-0" >
            <div class="col-4 m-0">
                <b-form-input @keyup.enter="scanBarcode" :readonly="block" 
                               v-model="scannedBarcode" ref="barcode" placeholder="barcode"></b-form-input>
            </div>
            <div class="col-2">
                <p class="text-right">
                <b-button variant="light" pill :disabled="block" v-on:click="scanBarcode">
                    {% trans %}Έλεγχος{% endtrans %}</b-button>
                </p>
            </div>
            <div class="col">
                <p class="infoboxDarkGray">&nbsp;${ hint }$</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 v-if="infoSKUImage" class="img img-fluid" style="" :src="infoSKUImage"/>
                </div>
            </b-modal>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        var app = new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                block: false,

                indent: 0,
                debug: false,
                messages: [],

                counterOrdersDone: 0,
                counterOrders: 0,
                shortage: 0,
                boxCount: 0,
                boxIndex: 0,
                locationColumn: "",
                locationRow: "",
                locationRollRackPosition: "",
                locationRollRackCrate: "",
                locationRollRackIB: "",
                locationOrder: "",
                hint: "",
                hasMissingMessage: "",
                orderClass: "",

                table1: [],
                table2: [],

                scannedBarcode: "",

                orderGroup: null,
                orderIndex: -1,
                lastPrintJob: null,

                infoSKUImage: null,
                infoSKUDescription: null

            },
            mounted() {
                this.dlog("mounted");
                if (this.debug)
                {
                    this.scannedBarcode = "RR-10";
                }
                this.$nextTick(() => {
                    this.$refs.barcode.focus();
                });
            },
            watch: {
            },
            computed: {
            },
            methods: {
                scanGift: async function (barcode) {
                    this.scannedBarcode = barcode;
                    await this.scanBarcode();
                },
                nextBox: function () {
                    this.boxIndex++;
                    this.updateUI();
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                },
                reprintLabelAction: async function () {
                    this.dlog("reprintLabelAction");
                    if (this.block)
                        return;
                    this.dlog("reprintLabelAction: block");
                    this.block = true;

                    await this.reprintLabel();

                    this.block = false;
                    this.dlog("reprintLabelAction: unblock");
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                    return;
                },
                postponeOrder: function () {
                    this.dlog("postponeOrder");

                    if (this.block)
                        return;
                    this.dlog("postponeOrder: block");
                    this.block = true;


                    if (this.orderIndex === this.orderGroup.orders.length - 1) {
                        this.dlog("will not postpone last Order");
                    } else {
                        for (var i = 0; i < (this.orderGroup.orders.length); i++) {
                            this.dlog(this.orderGroup.orders[i].id);
                        }
                        var order = this.orderGroup.orders[this.orderIndex];
                        for (var i = this.orderIndex; i < (this.orderGroup.orders.length - 1); i++) {
                            this.orderGroup.orders[i] = this.orderGroup.orders[i + 1];
                        }
                        this.orderGroup.orders[this.orderGroup.orders.length - 1] = order;
                        for (var i = 0; i < (this.orderGroup.orders.length); i++) {
                            this.dlog(this.orderGroup.orders[i].id);
                        }
                        this.updateUI();
                    }

                    this.block = false;
                    this.dlog("postponeOrder: unblock");
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                },
                resetPackagedProduct: async function (index) {
                    this.dlog("resetPackagedProduct: " + index);

                    if (this.block)
                        return;
                    this.dlog("resetPackagedProduct: block");
                    this.block = true;

                    var result = await this.rpcUnpackageProduct(this.orderGroup.id,
                            this.orderGroup.orders[this.orderIndex].id,
                            this.table2[index].id, this.table2[index].orderHasProductId);
                    if (result) {
                        for (var i = 0; i < this.orderGroup.orders[this.orderIndex].product.length; i++) {
                            this.dlog("resetProduct: " + this.orderGroup.orders[this.orderIndex].product[i].productId + " ?");
                            if (this.orderGroup.orders[this.orderIndex].product[i].productId === this.table2[index].id) {
                                this.dlog("resetProduct: " + this.orderGroup.orders[this.orderIndex].product[i].packagedAmount + " -> 0");
                                this.orderGroup.orders[this.orderIndex].product[i].packagedAmount = 0;
                            }
                        }
                    }
                    this.updateUI();
                    this.block = false;
                    this.dlog("resetPackagedProduct: unblock");
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                },
                finishOrderWithMissing: async function () {

                    this.dlog("finishOrderWithMissing");

                    if (this.block)
                        return;
                    this.dlog("finishOrderWithMissing: block");
                    this.block = true;

                    var doskip = false;
                    await this.$bvModal.msgBoxConfirm('{% trans %}Να γίνει ολοκλήρωση με ελλείψεις;{% endtrans %}', {
                        title: '{% trans %}Επιβεβαίωση{% endtrans %}',
                        size: 'sm',
                        buttonSize: 'sm',
                        okVariant: 'danger',
                        okTitle: '{% trans %}ΝΑΙ{% endtrans %}',
                        cancelTitle: '{% trans %}ΌΧΙ{% endtrans %}',
                        footerClass: 'p-2',
                        hideHeaderClose: false,
                        centered: true
                    }).then(value => {
                        doskip = value;
                    }).catch(err => {
                    });

                    if (doskip !== true) {
                        this.dlog("finishOrderWithMissing: user pressed NO");
                    } else {
                        var order = this.orderGroup.orders[this.orderIndex];
                        var result = await this.rpcPackageOrderWithMissingProduct(this.orderGroup.id, order.id);
                        if (result) {
                            order.packaged = true;
                            await this.showOrderEndMessage(order);
                            var next = this.findNextOrder();
                            if (next === -1) {
                                this.$bvModal.msgBoxOk('Η ομάδα ολοκληρώθηκε');
                                this.orderGroup = null;
                            } else {
                                this.dlog("next order: " + next);
                                this.orderIndex = next;

                            }
                        }
                        this.updateUI();
                    }

                    this.block = false;
                    this.dlog("finishOrderWithMissing: unblock");
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });

                },

                scanBarcode: async function () {
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });

                    this.dlog("scanBarcode");
                    if (this.block)
                        return;
                    this.dlog("scanBarcode: block");
                    this.block = true;

                    if (this.orderGroup === null) {
                        this.dlog("scanBarcode: we need roll rack");
                        if (this.debug) {
                            if (this.scannedBarcode === "") {
                                this.scannedBarcode = "RR-01";
                            }
                        }
                        var barcode = this.scannedBarcode;
                        this.scannedBarcode = "";
                        await this.rpcGetOrderGroup(barcode);
                    } else {
                        if (this.debug) {
                            this.scannedBarcode = this.getNextProduct(this.orderGroup.orders[this.orderIndex]);
                        }
                        var barcode = this.scannedBarcode;
                        this.scannedBarcode = "";
                        var order = this.orderGroup.orders[this.orderIndex];
                        if (this.hasBarcode(order, barcode)) {
                            var result = await this.packBarcode(order, barcode);
                            if (result) {
                                this.updateUI(barcode);
                                if (!this.hasMoreProducts(order)) {
                                    result = await this.rpcPackageOrder(this.orderGroup.id, order.id);
                                    if (result) {
                                        order.packaged = true;
                                        await this.showOrderEndMessage(order);
                                        var next = this.findNextOrder();
                                        if (next === -1) {
                                            this.$bvModal.msgBoxOk('Η ομάδα ολοκληρώθηκε');
                                            this.orderGroup = null;
                                        } else {
                                            this.dlog("next order: " + next);
                                            this.orderIndex = next;
                                            this.updateUI();
                                        }
                                    }
                                }
                            }
                        } else {
                            this.$bvModal.msgBoxOk("Η παραγγελία δεν έχει αυτό το προϊόν");
                        }

                    }

                    this.block = false;
                    this.dlog("scanBarcode: unblock");
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });

                    return;
                },

                updateUI: function (barcode = null) {
                    this.dlog("updateUI");
                    if (this.orderGroup === null) {
                        return;
                    }
                    this.counterOrders = this.orderGroup.orders.length;
                    this.counterOrdersDone = 0;
                    for (var i = 0; i < this.orderGroup.orders.length; i++) {
                        if (this.orderGroup.orders[i].packaged)
                            this.counterOrdersDone++;
                    }
                    var order = this.orderGroup.orders[this.orderIndex];
                    var hasMissing = this.orderHasSortage(order);
                    if (hasMissing) {
                        this.hasMissingMessage = "Προσοχή: Η παραγγελία έχει ελλείψεις";
                        this.orderClass = "bg-warning";
                    } else {
                        this.hasMissingMessage = "";
                        this.orderClass = "";
                    }
                    this.boxCount = order.boxes.length;
                    var bidx = this.boxIndex % this.boxCount;
                    this.shortage = this.countOrdersWithSortage();
                    this.locationRow = order.boxes[bidx].position.substring(6, 8);
                    this.locationColumn = order.boxes[bidx].position.substring(5, 6);

                    this.locationRollRackPosition = order.boxes[bidx].position;
                    this.locationRollRackCrate = order.boxes[bidx].crate;
                    this.locationRollRackIB = order.boxes[bidx].box;

                    this.locationOrder = order.magentoOrder;
                    this.updateTables(barcode);
                },
                updateTables: function (barcode) {
                    this.dlog("updateTables");
                    this.table1 = [];
                    this.table2 = [];
                    if (this.orderGroup === null) {
                        return;
                    }
                    var order = this.orderGroup.orders[this.orderIndex];

                    for (var i = 0; i < order.product.length; i++) {
                        var e = {};
                            e.id = order.product[i].productId;
                            e.orderHasProductId = order.product[i].id;
                            e.description = order.product[i].productDescription;
                            e.barcode = order.product[i].productBarcode;
                            e.amount = (order.product[i].packagedAmount) + "/" + order.product[i].collectedAmount;
                            e.infoSKUImage = "https://www.galeriedebeaute.gr/images/products/"
                                    + order.product[i].productBarcode + "_01.jpg";

                            if (barcode === e.barcode)
                                e.active = 'bg-success';

                        if (order.product[i].collectedAmount !== order.product[i].packagedAmount) {
                            e.productIsGift = order.product[i].productIsGift;
                            this.table1.push(e);
                        } else {
                            this.table2.push(e);
                        }
                    }


                    setTimeout(() => {
                        for (var i = 0; i < this.table1.length; i++) {
                            this.table1[i].active = '';
                        }
                        //for (var i = 0; i < this.table2.length; i++) {
                        //this.table2[i].active = '';
                        //}
                    }, 3000);


                },
                packBarcode: async function (order, barcode) {
                    this.dlog("packBarcode");
                    var idx = -1;
                    for (var i = 0; i < order.product.length; i++) {
                        if (order.product[i].productBarcode === barcode) {
                            idx = i;
                            break;

                        }
                        for (var j = 0; j < order.product[i].productBarcodes.length; j++) {
                            if (barcode === order.product[i].productBarcodes[j]) {
                                idx = i;
                                break;
                            }
                        }
                        if (idx !== -1) {
                            break;
                        }
                    }
                    if (idx === -1) {
                        this.dlog("packBarcode: could not find product");
                        return false;
                    }
                    var result = await this.rpcPackageProduct(this.orderGroup.id, order.id, order.product[idx].id, order.product[idx].productId);
                    this.dlog("packBarcode:  rpcPackageProduct result: " + result);
                    if (result)
                        order.product[i].packagedAmount++;
                    else {
                        this.dlog("packBarcode: RPC FAILED");
                    }
                    return result;
                },

                hasBarcode: function (order, barcode) {
                    this.dlog("hasBarcode");
                    for (var i = 0; i < order.product.length; i++) {
                        if (order.product[i].productBarcode === barcode) {
                            return true;
                        }
                        for (var j = 0; j < order.product[i].productBarcodes.length; j++) {
                            if (barcode === order.product[i].productBarcodes[j]) {
                                return true;
                            }
                        }
                    }
                    return false;
                },
                countOrdersWithSortage: function () {
                    var r = 0;
                    for (var i = 0; i < this.orderGroup.orders.length; i++) {
                        var amount = this.getAmount(this.orderGroup.orders[i]);
                        var collected = this.getCollectedAmount(this.orderGroup.orders[i]);
                        if (amount !== collected)
                            r++;
                    }
                    return r;
                },
                orderHasSortage: function (order) {
                    var amount = this.getAmount(order);
                    var collected = this.getCollectedAmount(order);
                    if (amount !== collected)
                        return true;
                    return false;
                },
                getAmount: function (order) {
                    this.dlog("getAmount");
                    var amount = 0;
                    for (var i = 0; i < order.product.length; i++) {
                        amount += order.product[i].amount;

                    }
                    return amount;
                },
                getCollectedAmount: function (order) {
                    this.dlog("getCollectedAmount");
                    var amount = 0;
                    for (var i = 0; i < order.product.length; i++) {
                        amount += order.product[i].collectedAmount;

                    }
                    return amount;
                },
                getPackagedAmount: function (order) {
                    this.dlog("getCollectedAmount");
                    var amount = 0;
                    for (var i = 0; i < order.product.length; i++) {
                        amount += order.product[i].collectedAmount;

                    }
                    return amount;
                },
                hasMoreProducts: function (order) {
                    this.dlog("hasMoreProducts");
                    for (var i = 0; i < order.product.length; i++) {
                        if (order.product[i].packagedAmount < order.product[i].collectedAmount) {
                            return true;
                        }
                    }
                    return false;
                },
                getNextProduct: function (order) {
                    this.dlog("getNextProduct");
                    for (var i = 0; i < order.product.length; i++) {
                        if (order.product[i].packagedAmount < order.product[i].collectedAmount) {
                            return order.product[i].productBarcode;
                        }
                    }
                    return "";
                },
                findNextOrder: function () {
                    this.dlog("findNextOrder");
                    for (var i = 0; i < this.orderGroup.orders.length; i++) {
                        if (false === this.orderGroup.orders[i].packaged) {
                            return i;
                        }
                    }
                    return -1;
                },

                showOrderEndMessage: async function (order) {
                    this.dlog("showOrderEndMessage");
                    var amount = this.getAmount(order);
                    var packagedAmount = this.getPackagedAmount(order);

                    var magentoOrder = order.magentoOrder;
                    var isGift = order.isGift === "1";
                    var message = "Η παραγγελία " + magentoOrder + " ολοκληρώθηκε";
                    if (amount !== packagedAmount) {
                        message += " με ελλείψεις";
                    }
                    message += ". Πατήστε ΟΚ για εκτύπωση της ετικέτας.";
                    if (isGift) {
                        message += "\n\nΗ παραγγελία περιλαμβάνει συσκευασία δώρου.";
                    }
                    await this.$bvModal.msgBoxOk(message);
                    await this.printLabel();
                },
                rpcGetOrderGroup: async function (barcode) {
                    this.dlog("rpcPackageProduct");
                    var result = false;
                    var rpcerror = null;
                    await axios.post('{{ path('v2_api_pack_get_group') }}', {
                        barcode: barcode
                    }).then(response => {
                        this.dlog("rpcPackageProduct: success");
                        console.log(response);
                        result = true;
                        this.orderGroup = response.data;
                        this.orderIndex = 0;
                        var order = this.findNextOrder();
                        if (order === -1) {
                            this.orderGroup = null;
                        }
                        this.orderIndex = order;
                        this.updateUI();
                    }).catch(error => {
                        this.dlog("rpcPackageProduct: error");
                        console.log(error);
                        result = false;
                        rpcerror = error;
                    });
                    if (rpcerror !== null) {
                        var errorMessage = "";
                        if (rpcerror.response) {
                            if (rpcerror.response.status === 400) {
                                errorMessage = rpcerror.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + rpcerror.response.status);
                            }
                        } else if (rpcerror.request) {
                            errorMessage = ("Request ERROR: " + rpcerror.message);
                        } else {
                            errorMessage = ("ERROR: " + rpcerror.message);
                        }
                        this.$bvModal.msgBoxOk(errorMessage);
                    }

                    return result;
                },
                rpcPackageProduct: async function (groupId, orderId, orderHasProductId, productId) {
                    this.dlog("rpcPackageProduct");
                    var result = false;
                    var rpcerror = null;
                    await axios.post('{{ path('v2_api_pack_pack_product') }}', {
                        groupId: groupId,
                        orderId: orderId,
                        productId: productId,
                        orderHasProductId: orderHasProductId
                    }).then(response => {
                        this.dlog("rpcPackageProduct: success");
                        console.log(response);
                        result = true;
                    }).catch(error => {
                        this.dlog("rpcPackageProduct: error");
                        console.log(error);
                        result = false;
                        rpcerror = error;
                    });
                    if (rpcerror !== null) {
                        var errorMessage = "";
                        if (rpcerror.response) {
                            if (rpcerror.response.status === 400) {
                                errorMessage = rpcerror.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + rpcerror.response.status);
                            }
                        } else if (rpcerror.request) {
                            errorMessage = ("Request ERROR: " + rpcerror.message);
                        } else {
                            errorMessage = ("ERROR: " + rpcerror.message);
                        }
                        this.$bvModal.msgBoxOk(errorMessage);
                    }

                    return result;
                },
                rpcUnpackageProduct: async function (groupId, orderId, productId, orderHasProductId) {
                    this.dlog("rpcUnpackageProduct");
                    var result = false;
                    var rpcerror = null;
                    await axios.post('{{ path('v2_api_pack_unpack_product') }}', {
                        groupId: groupId,
                        orderId: orderId,
                        productId: productId,
                        orderHasProductId: orderHasProductId
                    }).then(response => {
                        this.dlog("rpcUnpackageProduct: success");
                        console.log(response);
                        result = true;
                    }).catch(error => {
                        this.dlog("rpcUnpackageProduct: error");
                        console.log(error);
                        result = false;
                        rpcerror = error;
                    });
                    if (rpcerror !== null) {
                        var errorMessage = "";
                        if (rpcerror.response) {
                            if (rpcerror.response.status === 400) {
                                errorMessage = rpcerror.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + rpcerror.response.status);
                            }
                        } else if (rpcerror.request) {
                            errorMessage = ("Request ERROR: " + rpcerror.message);
                        } else {
                            errorMessage = ("ERROR: " + rpcerror.message);
                        }
                        this.$bvModal.msgBoxOk(errorMessage);
                    }

                    return result;
                },
                rpcPackageOrder: async function (groupId, orderId) {
                    this.dlog("rpcPackageOrder");
                    var result = false;
                    var rpcerror = null;
                    await axios.post('{{ path('v2_api_pack_pack_order') }}', {
                        groupId: groupId,
                        orderId: orderId,
                        force: false
                    }).then(response => {
                        this.dlog("rpcPackageOrder: success");
                        console.log(response);
                        result = true;
                    }).catch(error => {
                        this.dlog("rpcPackageOrder: error");
                        console.log(error);
                        result = false;
                        rpcerror = error;
                    });
                    if (rpcerror !== null) {
                        var errorMessage = "";
                        if (rpcerror.response) {
                            if (rpcerror.response.status === 400) {
                                errorMessage = rpcerror.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + rpcerror.response.status);
                            }
                        } else if (rpcerror.request) {
                            errorMessage = ("Request ERROR: " + rpcerror.message);
                        } else {
                            errorMessage = ("ERROR: " + rpcerror.message);
                        }
                        this.$bvModal.msgBoxOk(errorMessage);
                    }

                    return result;
                },
                rpcPackageOrderWithMissingProduct: async function (groupId, orderId) {
                    this.dlog("rpcPackageOrderWithMissingproduct");
                    var result = false;
                    var rpcerror = null;
                    await axios.post('{{ path('v2_api_pack_pack_order') }}', {
                        groupId: groupId,
                        orderId: orderId,
                        force: true
                    }).then(response => {
                        this.dlog("rpcPackageOrderWithMissingproduct: success");
                        console.log(response);
                        result = true;
                    }).catch(error => {
                        this.dlog("rpcPackageOrderWithMissingproduct: error");
                        console.log(error);
                        result = false;
                        rpcerror = error;
                    });
                    if (rpcerror !== null) {
                        var errorMessage = "";
                        if (rpcerror.response) {
                            if (rpcerror.response.status === 400) {
                                errorMessage = rpcerror.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + rpcerror.response.status);
                            }
                        } else if (rpcerror.request) {
                            errorMessage = ("Request ERROR: " + rpcerror.message);
                        } else {
                            errorMessage = ("ERROR: " + rpcerror.message);
                        }
                        this.$bvModal.msgBoxOk(errorMessage);
                    }

                    return result;
                },

                reprintLabel: async function () {
                    this.dlog("reprintLabel");
                    if (this.lastPrintJob === null) {
                        return;
                    }
                    await this.sendDataToPrinter(this.lastPrintJob);
                },
                printLabel: async function () {
                    this.dlog("printLabel");

                    var order = this.orderGroup.orders[this.orderIndex];
                    var missing = false;
                    var missingAmount = 0;
                    for (var i = 0; i < order.product.length; i++) {
                        this.dlog("printLabel: amount: " + order.product[i].amount + " packagedAmount: " + order.product[i].packagedAmount);
                        if (order.product[i].amount !== order.product[i].packagedAmount) {
                            missing = true;
                            missingAmount += (order.product[i].amount - order.product[i].packagedAmount);
                        }
                    }
                    var string = "^XA\n";
                    if (missing) {
                        string += "^FO60,120\n"; //Field origin
                        string += "^BY2,2,60\n"; //Bar code field defaults
                        string += "^BC\n"; //Code 128 bar code
                        string += "^FD" + order.magentoOrder + "\n";//Field data
                        string += "^FS\n"; //Field separator

                        string += "^CF0,100^FO10,120^FD!^FS";

                        string += "^CF0,28\n"; //Change default font
                        
                        string += "^FO60,20\n"; //Field origin
                        string += "^FD"+order.shipping+"\n"; //Field data
                        string += "^FS\n"; //Field separator
                        
                        if (order.isGift === "1") {
                            string += "^FO160,20\n"; //Field origin
                            string += "^FDIS GIFT\n"; //Field data
                            string += "^FS\n"; //Field separator
                        }

                        string += "^FO60,50\n"; //Field origin
                        string += "^FDMISSING " + missingAmount + " ITEMS\n"; //Field data
                        string += "^FS\n"; //Field separator

                        string += "^FO60,80\n"; //Field origin
                        string += "^FDSTATION: " + this.orderGroup.rollRackBarcode + "\n"; //Field data
                        string += "^FS\n"; //Field separator
                    } else {
                        var string = "^XA\n";
                        string += "^FO40,20\n"; //Field origin
                        string += "^BY2,2,60\n"; //Bar code field defaults
                        string += "^BC\n"; //Code 128 bar code
                        string += "^FD" + order.magentoOrder + "\n";//Field data
                        string += "^FS\n"; //Field separator
                        string += "^CF0,28\n"; //Change default font
                        
                         string += "^FO60,120\n"; //Field origin
                         string += "^FD"+order.shipping+"\n"; //Field data
                         string += "^FS\n"; //Field separator
                        
                        if (order.isGift === "1") {
                            string += "^FO160,120\n"; //Field origin
                            string += "^FDIS GIFT\n"; //Field data
                            string += "^FS\n"; //Field separator
                        }
                        string += "^FO60,180\n"; //Field origin
                        string += "^FDSTATION: " + this.orderGroup.rollRackBarcode + "\n"; //Field data
                        string += "^FS\n"; //Field separator
                    }
                    string += "^XZ\n";
                    this.lastPrintJob = string;
                    await this.sendDataToPrinter(string);
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                },
                sendDataToPrinter: async function (label) {
                    if (this.debug === true)
                        return;
                    var printerDevice;
                    BrowserPrint.getDefaultDevice("printer", function (device)
                    {
                        printerDevice = device;
                        device.send(label, undefined, function (errorMessage) {
                            alert("Print Error: send: " + errorMessage);
                        });
                    }, function (error) {
                        alert("Print Error: getDefaultDevice: " + error);
                    });
                },
                dlog: function (msg) {
                    this.messages.push(msg);
                    console.log(msg);
                },
                showModal: function (infoSKUImage, infoSKUDescription) {
                    this.infoSKUImage = infoSKUImage;
                    this.infoSKUDescription = infoSKUDescription;
                    this.$refs['img-modal'].show();
                }
            }
        });
    </script>
{% endblock %}