{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Ολοκλήρωση ελλιπούς παραγγελίας{% endtrans %}{% endblock %}
{% block content %}
    <div id="app" class="{{ containerClass }}">
        <div class="row">
            <div class="col">
                <p class="h5 p-1 mt-2 mb-2 infoboxBlue">{% trans %}Ολοκλήρωση ελλιπούς παραγγελίας{% endtrans %}</p>
            </div>
        </div>
        <template v-if="true">
            <div v-if="true" class="row mt-3 mb-3">
                <div class="col">
                    <b-form-input :state="skuInputState" @keyup.enter="skuScannerInputEnterClicked()" :disabled="skuScannerInputDisabled" 
                                  v-model="skuScannerInputValue" ref="skuScannerInput" id="skuScannerInput" placeholder="barcode"></b-form-input>
                    <b-form-invalid-feedback id="skuScannerInput-feedback">
                        ${ skuScannerInputError }$
                    </b-form-invalid-feedback>
                </div>
            </div>

            <div class="row mt-3" >
                <div class="col">
                    <div lass="p-3" :class="">
                        <div class="row" >
                            <div class="col">
                                <p v-if="this.currentOrder" class="h4 p-1 mt-1 mb-1 infoboxBlue">
                                    {% trans %}Λίστα προϊόντων παραγγελίας{% endtrans %} ${ this.currentOrder.magentoOrder }$ (${ this.currentOrder.erpOrder }$)
                                    <span style="background-color: magenta" v-if="this.currentOrder.isGift == '1'">ΣΥΣΚΕΥΑΣΙΑ ΔΩΡΟΥ</span>
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <table v-if="this.currentOrder" class="table table-striped table-condensed table-dark">
                                    <thead>
                                        <tr>
                                            <th>{% trans %}ID{% endtrans %}</th>
                                            <th>{% trans %}Product{% endtrans %}</th>
                                            <th>{% trans %}Name{% endtrans %}</th>
                                            <th>{% trans %}SKU{% endtrans %}</th>
                                            <th>{% trans %}BARCODE{% endtrans %}</th>
                                            <th>{% trans %}Απαιτούμενη ποσότητα{% endtrans %}</th>
                                            <th>{% trans %}Συλλεγμένη ποσότητα{% endtrans %}</th>
                                            <th>{% trans %}Απόθεμα{% endtrans %}</th>
                                            <th>{% trans %}Θέσεις{% endtrans %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr :class="(index === selectedProduct) ? 'bg-primary': ((g.amount === g.packagedAmount ? 'bg-success' : ''))" v-for="(g,index) in this.currentOrder.products">
                                            <td>${ g.id }$</td>
                                            <td><img @click="showModal(g)" class="img-thumbnail" style="width:64px; height: 64px" :src="imageUrl(g.productBarcode)"/></td>
                                            <td>${ g.productDescription }$</td>
                                            <td>${ g.productSKU }$</td>
                                            <td>${ g.productBarcode }$</td>
                                            <td>${ g.amount }$</td>
                                            <td>${ g.packagedAmount }$</td>
                                            <td>${ countSkuPositions(g.positions, index) }$</td>
                                            <td>
                                    <b-button v-if="g.amount !== g.packagedAmount" size="sm" :variant="countSkuPositions(g.positions, index) === 0 ? 'light' : 'success'" pill v-on:click="showSkuPositions(g.positions, index)">Θέσεις</b-button>
                                    </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-1" >
                <div class="col">
                    <table class="table table-striped table-condensed table-dark justify-content-center">
                        <thead>
                            <tr>
                                <th>{% trans %}Position{% endtrans %}</th>
                                <th>{% trans %}Crate{% endtrans %}</th>
                                <th>{% trans %}Box{% endtrans %}</th>
                                <th>{% trans %}Amount{% endtrans %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(g,index) in this.allPositions">
                                <td>${ g.position }$</td>
                                <td>${ g.crate }$</td>
                                <td>${ g.box }$</td>
                                <td>${ g.amount }$</td>
                                <td><b-button v-if="g.amount" size="sm" variant="light" pill v-on:click="moveOne(index)">Μείωση αποθ. κατά 1</b-button></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </template>
        <div class="row mt-3 mb-1" >
            <div class="col">
                <p class="infoboxDarkGray">&nbsp;${ hint }$</p>
            </div>
        </div>
        <div>
            <b-modal ref="img-modal" hide-footer size="lg" :title="modaldescription">
                <div class="d-block text-center">
                    <img class="img img-fluid" style="" :src="imageUrl(modalbarcode)"/>
                </div>
            </b-modal>
        </div>
    </div>
{% endblock %}
{% block js %}
    {{ parent() }}
    <script>
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                currentOrder: null,
                selectedProduct: -1,
                skuScannerInputValue: "",
                skuInputState: null,
                skuScannerInputError: "",
                allPositions: [],
                modalbarcode: "",
                modaldescription: ""
            },
            mounted() {
                this.$nextTick(() => {
                    this.$refs.skuScannerInput.focus();
                });
            },
            computed: {

                skuScannerInputDisabled: function () {
                    return false;
                },
                hint: function () {
                    return "";
                }
            },
            watch: {
            },
            methods: {
                imageUrl: function (skuBarcode) {
                    return "https://www.galeriedebeaute.gr/images/products/"
                             + skuBarcode + "_01.jpg";
                },
                skuScannerInputEnterClicked: function () {
                    //skuScannerInputValue: "1000224721";
                    this.allPositions = [];
                    this.selectedProduct = -1;
                    this.currentOrder = null;
                    this.skuScannerInputError = "";
                    this.modalbarcode = "";
                    this.modaldescription = "";

                    this.skuInputState = null;
                    if (this.skuScannerInputValue === "")
                        return;
                    axios.post('{{ path('api_get_partial_order') }}', {
                        magento: this.skuScannerInputValue
                    }).then(response => {
                        console.log(response);
                        this.skuScannerInputValue = "";
                        this.currentOrder = response.data;
                    }).catch(error => {
                        this.skuInputState = false;
                        this.skuScannerInputValue = "";
                        console.log(error);
                        if (error.response) {
                            // The request was made and the server responded with a status code
                            // that falls out of the range of 2xx
                            console.log(error.response.data);
                            console.log(error.response.status);
                            //console.log(error.response.headers);
                            if (error.response.status === 400) {
                                this.skuScannerInputError = error.response.data.message;
                            } else {
                                alert("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            // The request was made but no response was received
                            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                            // http.ClientRequest in node.js
                            console.log(error.request);
                            alert("Request ERROR: " + error.message);
                        } else {
                            // Something happened in setting up the request that triggered an Error
                            console.log('Error', error.message);
                            alert("ERROR: " + error.message);
                        }
                        this.$nextTick(() => {
                            this.$refs.skuScannerInput.focus();
                        });
                    });
                },

                moveOne: async function (index) {
                    var ret = await this.showConfirm('{% trans %}Είστε σίγουροι;{% endtrans %}');
                    if (ret === false) {
                        return;
                    }

                    await axios.post('{{ path('api_partial_order_move') }}', {
                        productBoxId: this.allPositions[index].pboxId,
                        orderId: this.currentOrder.id,
                        orderProductId: this.currentOrder.products[this.selectedProduct].id,
                    }).then(response => {
                        console.log(response);
                        this.allPositions[index].amount = response.data.available;
                        this.currentOrder.products[this.selectedProduct].packagedAmount = response.data.packaged;
                        if (this.currentOrder.products[this.selectedProduct].packagedAmount === this.currentOrder.products[this.selectedProduct].amount) {
                            this.selectedProduct = -1;
                        }
                        this.allPositions = [];
                    }).catch(error => {
                        console.log(error);
                        if (error.response) {
                            // The request was made and the server responded with a status code
                            // that falls out of the range of 2xx
                            console.log(error.response.data);
                            console.log(error.response.status);
                            //console.log(error.response.headers);
                            if (error.response.status === 400) {
                                alert("Response ERROR: " + error.response.data.message);
                            } else {
                                alert("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            // The request was made but no response was received
                            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                            // http.ClientRequest in node.js
                            console.log(error.request);
                            alert("Request ERROR: " + error.message);
                        } else {
                            // Something happened in setting up the request that triggered an Error
                            console.log('Error', error.message);
                            alert("ERROR: " + error.message);
                        }
                    });
                },

                updatePosition: function (barcode) {
                    var position = -1;
                    for (var i = 0; i < this.currentOrder.boxes.length; i++) {
                        if (barcode === this.currentOrder.boxes[i].box) {
                            position = i;
                            break;
                        }
                    }
                    return position;
                },
                showModal: function (barcode) {
                    this.modalbarcode = barcode.productBarcode;
                    this.modaldescription = barcode.productDescription;
                    this.$refs['img-modal'].show();
                },
                showSkuPositions: async function (positions, index) {
                    this.selectedProduct = index;
                    this.allPositions = positions;
                },
                countSkuPositions: function (positions, index) {
                    var amount = 0;
                    for (var i = 0; i < positions.length; i++) {
                        amount += positions[i].amount;
                    }
                    return amount;
                },
                showConfirm: async function (msg) {
                    var retval = false;
                    await  this.$bvModal.msgBoxConfirm(msg, {
                        title: '{% trans %}Please Confirm{% endtrans %}',
                        size: 'sm',
                        buttonSize: 'sm',
                        okVariant: 'danger',
                        okTitle: '{% trans %}ΝΑΙ{% endtrans %}',
                        cancelTitle: '{% trans %}ΌΧΙ{% endtrans %}',
                        footerClass: 'p-2',
                        hideHeaderClose: false,
                        centered: true,
                        returnFocus: 'scannerInput'
                    }).then(value => {
                        retval = value;
                    }).catch(err => {
                        // An error occurred
                        retval = false;
                    });
                    return retval;
                }
            }
        });
    </script>
{% endblock %}