{% 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  class="col">
                    <b-button v-if="true" :disabled="nextSKUButtonDisabled" variant="primary" v-on:click="nextSKUClicked">
                        {% trans %}Επόμενο SKU{% endtrans %}</b-button>
                </div>
            </div>
            <div class="row mt-3" >
                <div class="col">
                    <div class="p-3" :class="skuInfoBox">
                        <div class="row" >
                            <div class="col-1">
                                SKU
                            </div>
                            <div class="col col-4 align-self-center"  >
                                Barcode
                            </div>
                            <div class="col col-7 align-self-center" >
                                Προϊόν
                            </div>
                        </div>
                        <div class="row " >
                            <div class="col-1">
                                <img @click="showModal" v-if="infoSKUImage" class="img-thumbnail" style="" :src="infoSKUImage"/>
                            </div>
                            <div class="col col-4 align-self-center"  >
                                <p class="h4 align-self-center" :class="infoSKUClass">&nbsp;${infoSKU}$</p>
                            </div>
                            <div class="col col-7 align-self-center" >
                                <p class="h4 align-self-center"  :class="infoSKUClass2">&nbsp;${infoSKUDescription}$</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-3" >
                <div class="col">
                    <div  class="p-3" :class="positionsInfoBox">
                        <div class="row" >
                            <div class="col">
                                Insert box / Crate / Dexion
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <table v-if="this.currentProduct" class="table table-striped table-condensed table-dark">
                                    <thead>
                                        <tr>
                                            <th>{% trans %}IB{% endtrans %}</th>
                                            <th>{% trans %}Crate{% endtrans %}</th>
                                            <th>{% trans %}Θέση{% endtrans %}</th>
                                            <th>{% trans %}Απόθεμα{% endtrans %}</th>
                                            <th>{% trans %}Αναπλήρωση{% endtrans %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr :class="(index === selectedPosition) ? 'bg-primary': ((index === selectedDestination ? 'bg-success' : ''))" v-for="(g,index) in this.currentProduct.boxes">
                                            <td>${ g.box }$</td>
                                            <td>${ g.crate }$</td>
                                            <td>${ g.position }$</td>
                                            <td>${ g.avail }$</td>
                                            <td>${ g.replenished }$</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-3" >
                <div class="col">
                    <div class="p-3" :class="totalInfoBox">
                        <div class="row" >
                            <div class="col">
                                Προέλευση
                            </div>
                        </div>
                        <div class="row" >
                            <div class="col">
                                <p class="h4 align-self-center infoboxGray">
                                <b-form-input :state="fromState" @keyup.enter="fromScannerInputEnterClicked()" :disabled="fromScannerInputDisabled" 
                                              v-model="fromScannerInputValue" id="fromScannerInput" ref="fromScannerInput" placeholder="barcode"></b-form-input>
                                <b-form-invalid-feedback id="fromScannerInput-feedback">
                                    ${ fromScannerInputError }$
                                </b-form-invalid-feedback>
                                </p>
                            </div>
                            <div class="col-3" >
                                <b-button class="float-right" v-if="true" :disabled="fromPositionClearButtonDisabled" variant="primary"
                                          v-on:click="fromPositionClearClicked">
                                    {% trans %}X{% endtrans %}</b-button>
                            </div>
                        </div>
                        <div class="row" >
                            <div class="col">
                                Ποσότητα
                            </div>
                        </div>
                        <div class="row" >
                            <div class="col" >
                                <p class="h4 align-self-center infoboxGray">
                                <b-form-input :state="fromAmountState" @keyup.enter="fromAmountScannerInputEnterClicked()" :disabled="fromAmountScannerInputDisabled" 
                                              v-model="fromAmountScannerInputValue" id="fromAmountScannerInput" ref="fromAmountScannerInput" placeholder="ποσότητα"></b-form-input>
                                <b-form-invalid-feedback id="fromAmountScannerInput-feedback">
                                    ${ fromAmountScannerInputError }$
                                </b-form-invalid-feedback>
                                </p>
                            </div>
                            <div class="col-6" >
                                <b-button class="float-right" v-if="true" :disabled="fromPositionButtonDisabled" variant="primary"
                                          v-on:click="fromPositionClicked">
                                    {% trans %}Επιβεβαίωση{% endtrans %}</b-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="p-3" :class="totalInfoBox">
                        <div class="row" >
                            <div class="col">
                                Προορισμός
                            </div>
                        </div>
                        <div class="row" >
                            <div class="col">
                                <p class="h4 align-self-center infoboxGray"  >
                                <b-form-input :state="toState" @keyup.enter="toScannerInputEnterClicked()" :disabled="toScannerInputDisabled" 
                                              v-model="toScannerInputValue" id="toScannerInput" ref="toScannerInput" placeholder="barcode"></b-form-input>
                                <b-form-invalid-feedback id="toScannerInput-feedback">
                                    ${ toScannerInputError }$
                                </b-form-invalid-feedback>
                                </p>
                            </div>
                            <div class="col-3" >
                                <b-button class="float-right" v-if="true" :disabled="toPositionClearButtonDisabled" variant="primary"
                                          v-on:click="toPositionClearClicked">
                                    {% trans %}X{% endtrans %}</b-button>
                            </div>
                        </div>
                        <div class="row" >
                            <div class="col">Ποσότητα</div>
                        </div>
                        <div class="row" >
                            <div class="col" >
                                <p class="h4 align-self-center infoboxGray"  >
                                <b-form-input :state="toAmountState" @keyup.enter="toAmountScannerInputEnterClicked()" :disabled="toAmountScannerInputDisabled" 
                                              v-model="toAmountScannerInputValue" id="toAmountScannerInput" ref="toAmountScannerInput" placeholder="ποσότητα"></b-form-input>
                                <b-form-invalid-feedback id="toAmountScannerInput-feedback">
                                    ${ toAmountScannerInputError }$
                                </b-form-invalid-feedback>
                                </p>
                            </div>
                            <div class="col-6" >
                                <b-button class="float-right" v-if="true" :disabled="toPositionButtonDisabled" variant="primary"
                                          v-on:click="toPositionClicked">
                                    {% trans %}Επιβεβαίωση{% endtrans %}</b-button>
                            </div>
                        </div>
                    </div>
                </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="infoSKUDescription">
                <div class="d-block text-center">
                    <img @click="showModal" v-if="infoSKUImage" class="img img-fluid" style="" :src="infoSKUImage"/>
                </div>
            </b-modal>
        </div>
    </div>
{% endblock %}
{% block js %}
    {{ parent() }}
    <script>
        const State = Object.freeze({
            NeedSKU: 0, NeedPosition: 1, NeedPositionAmount: 2, NeedDestination: 3, NeedDestinationAmount: 4, NetworkRequest: 5
        });
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                state: State.NeedSKU,
                currentProduct: null,
                selectedPosition: -1,
                selectedDestination: -1,
                infoSKUClass: "infoboxGray",
                infoSKUClass2: "infoboxGray",
                skuScannerInputValue: "",
                fromScannerInputValue: "",
                toScannerInputValue: "",
                fromAmountScannerInputValue: "",
                toAmountScannerInputValue: "",
                skuInputState: null,
                skuScannerInputError: "",
                fromState: null,
                fromScannerInputError: "",
                toState: null,
                toScannerInputError: ""
            },
            mounted() {
                this.$nextTick(() => {
                    this.$refs.skuScannerInput.focus();
                });
            },
            computed: {
                fromAmountState: function () {
                    if (this.state !== State.NeedPositionAmount) {
                        return null;
                    }
                    var val = this.fromAmountScannerInputValue;
                    if (val === "") {
                        return null;
                    }
                    if (false === /^\d+$/.test(val)) {
                        return false;
                    }
                    val = parseInt(val);
                    if (val < 1) {
                        return false;
                    }
                    if (this.selectedPosition >= 0 && val > this.currentProduct.boxes[this.selectedPosition].avail) {
                        return false;
                    }
                    return true;
                },
                fromAmountScannerInputError: function () {
                    if (this.state !== State.NeedPositionAmount) {
                        return "";
                    }
                    var val = this.fromAmountScannerInputValue;
                    if (val === "") {
                        return "";
                    }
                    if (false === /^\d+$/.test(val)) {
                        return "πρέπει να δώσετε έναν αριθμό";
                    }
                    val = parseInt(val);
                    if (val < 1) {
                        return "η τιμή πρέπει να είναι μεγαλύτερη από 0";
                    }
                    if (this.selectedPosition >= 0 && val > this.currentProduct.boxes[this.selectedPosition].avail) {
                        return "η θέση δεν περιέχει τον απαιτούμενο αριθμό τεμαχίων";
                    }
                    return "";
                },
                toAmountState: function () {
                    if (this.state !== State.NeedDestinationAmount) {
                        return null;
                    }
                    var fval = this.fromAmountScannerInputValue;
                    var val = this.toAmountScannerInputValue;
                    if (val === "") {
                        return null;
                    }
                    if (false === /^\d+$/.test(val)) {
                        return false;
                    }
                    val = parseInt(val);
                    fval = parseInt(fval);
                    if (val < 1) {
                        return false;
                    }
                    if (val > fval) {
                        return false;
                    }
                    return true;
                },
                toAmountScannerInputError: function () {
                    if (this.state !== State.NeedDestinationAmount) {
                        return "";
                    }
                    var fval = this.fromAmountScannerInputValue;
                    var val = this.toAmountScannerInputValue;
                    if (val === "") {
                        return null;
                    }
                    if (false === /^\d+$/.test(val)) {
                        return "πρέπει να δώσετε έναν αριθμό";
                    }
                    val = parseInt(val);
                    fval = parseInt(fval);
                    if (val < 1) {
                        return "η τιμή πρέπει να είναι μεγαλύτερη από 0";
                    }
                    if (val > fval) {
                        return "η τιμή πρέπει να είναι μικρότερη από την ποσότητα που πήρατε";
                    }
                    return "";
                },
                skuInfoBox: function () {
                    if (this.state === State.NeedSKU)
                        return "active";
                    return "infoboxDarkGray";
                },
                positionsInfoBox: function () {
                    if (this.state === State.NeedPosition)
                        return "active";
                    return "infoboxDarkGray";
                },
                totalInfoBox: function () {
                    if (this.state === State.NeedPosition)
                        return "active";
                    if (this.state === State.NeedPositionAmount)
                        return "active";
                    if (this.state === State.NeedDestination)
                        return "active";
                    if (this.state === State.NeedDestinationAmount)
                        return "active";
                    return "infoboxDarkGray";
                },
                skuScannerInputDisabled: function () {
                    if (this.state === State.NeedSKU)
                        return false;
                    return true;
                },
                nextSKUButtonDisabled: function () {
                    if (this.state === State.NeedSKU)
                        return true;
                    if (this.fromAmountScannerInputValue > 0)
                        return true;
                    return false;
                },
                infoSKUImage: function () {
                    if (this.currentProduct) {
                        var skuBarcode = this.currentProduct.barcode;
                        return "https://www.galeriedebeaute.gr/images/products/"
                                 + skuBarcode + "_01.jpg";
                    }
                    return "";
                },
                infoSKU: function () {
                    if (this.currentProduct) {
                        return this.currentProduct.barcode;
                    }
                    return "";
                },
                infoSKUDescription: function () {
                    if (this.currentProduct) {
                        return this.currentProduct.description;
                    }
                    return "";
                },
                fromScannerInputDisabled: function () {
                    if (this.state === State.NeedPosition)
                        return false;
                    return true;
                },
                fromAmountScannerInputDisabled: function () {
                    if (this.state === State.NeedPositionAmount)
                        return false;
                    return true;
                },
                fromPositionClearButtonDisabled: function () {
                    if (this.state === State.NeedPositionAmount)
                        return false;
                    return true;
                },
                toPositionClearButtonDisabled: function () {
                    if (this.state === State.NeedDestinationAmount)
                        return false;
                    return true;
                },
                fromPositionButtonDisabled: function () {
                    if (this.state === State.NeedPositionAmount && this.fromAmountState === true)
                        return false;
                    return true;
                },
                toScannerInputDisabled: function () {
                    if (this.state === State.NeedDestination)
                        return false;
                    return true;
                },
                toAmountScannerInputDisabled: function () {
                    if (this.state === State.NeedDestinationAmount)
                        return false;
                    return true;
                },
                toPositionButtonDisabled: function () {
                    if (this.state === State.NeedDestinationAmount && this.toAmountState === true)
                        return false;
                    return true;
                },
                hint: function () {
                    if (this.state === State.NeedSKU)
                        return "Σαρώστε το SKU.";
                    if (this.state === State.NeedPosition)
                        return "Το SKU είναι τοποθετημένο στα συγκεκριμένα μέσα. Σαρώστε την αρχική θέση.";
                    if (this.state === State.NeedPositionAmount)
                        return "Δώστε τον αριθμό των τεμαχίων που θα μετακινηθούν.";
                    if (this.state === State.NeedDestination)
                        return "Το SKU είναι τοποθετημένο στα συγκεκριμένα μέσα. Σαρώστε την θέση-προορισμό.";
                    if (this.state === State.NeedDestinationAmount)
                        return "Δώστε τον αριθμό των τεμαχίων που θα μετακινηθούν.";
                    if (this.state === State.NetworkRequest)
                        return "Αναμονή απάντησης από τον διακομιστή.";
                    return "";
                }
            },
            watch: {
            },
            methods: {
                skuScannerInputEnterClicked: function () {
                    this.skuInputState = null;
                    if (this.skuScannerInputValue === "")
                        return;
                    axios.post('{{ path('api_replenish_product_info') }}', {
                        barcode: this.skuScannerInputValue
                    }).then(response => {
                        console.log(response);
                        this.currentProduct = response.data;
                        if (this.currentProduct !== null) {
                            this.state = State.NeedPosition;
                            this.$nextTick(() => {
                                this.$refs.fromScannerInput.focus();
                            });
                        }
                    }).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();
                        });
                    });
                },
                fromScannerInputEnterClicked: function () {
                    this.fromState = null;
                    this.fromScannerInputError = "?";
                    var position = this.updatePosition(this.fromScannerInputValue);
                    this.selectedPosition = position;
                    if (position === -1) {
                        this.fromState = false;
                        this.fromScannerInputError = "Το SKU δεν βρίσκεται στο IB " + this.fromScannerInputValue;
                        this.fromScannerInputValue = "";
                        this.$nextTick(() => {
                            this.$refs.fromScannerInput.focus();
                        });
                        return;
                    }
                    if (this.currentProduct.boxes[position].avail === 0) {
                        this.fromState = false;
                        this.fromScannerInputError = "Το IB δεν έχει διαθέσιμο απόθεμα.";
                        this.fromScannerInputValue = "";
                        this.$nextTick(() => {
                            this.$refs.fromScannerInput.focus();
                        });
                        return;
                    }
                    this.fromState = true;
                    this.state = State.NeedPositionAmount;
                    this.$nextTick(() => {
                        this.$refs.fromAmountScannerInput.focus();
                    });
                },
                fromAmountScannerInputEnterClicked: function () {
                },
                fromPositionClicked: function () {
                    this.state = State.NetworkRequest;
                    axios.post('{{ path('api_sku_transfer') }}', {
                        type: 'sub',
                        from: this.fromScannerInputValue,
                        amount: this.fromAmountScannerInputValue,
                        sku: this.currentProduct.sku
                    }).then(response => {
                        console.log(response);
                        this.currentProduct = response.data;
                        this.state = State.NeedDestination;
                        this.$nextTick(() => {
                            this.$refs.toScannerInput.focus();
                        });
                    }).catch(error => {
                        console.log(error);
                        this.state = State.NeedPositionAmount;
                        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);
                        }
                    });
                },
                toScannerInputEnterClicked: function () {
                    this.toState = null;
                    this.toScannerInputError = "?";
                    var position = this.updatePosition(this.toScannerInputValue);
                    this.selectedDestination = position;
                    if (position === -1) {
                        this.toState = false;
                        this.toScannerInputError = "Το SKU δεν βρίσκεται στο IB " + this.toScannerInputValue;
                        this.toScannerInputValue = "";
                        this.$nextTick(() => {
                            this.$refs.toScannerInput.focus();
                        });
                        return;
                    }
                    this.toState = true;
                    this.state = State.NeedDestinationAmount;
                    this.$nextTick(() => {
                        this.$refs.toAmountScannerInput.focus();
                    });
                },
                toAmountScannerInputEnterClicked: async function () {
                },
                toPositionClicked: function () {
                    this.state = State.NetworkRequest;
                    axios.post('{{ path('api_sku_transfer') }}', {
                        type: 'add',
                        to: this.toScannerInputValue,
                        amount: this.toAmountScannerInputValue,
                        sku: this.currentProduct.sku
                    }).then(response => {
                        console.log(response);
                        this.currentProduct = response.data;
                        this.fromAmountScannerInputValue -= this.toAmountScannerInputValue;
                        if (0 === this.fromAmountScannerInputValue) {
                            this.nextSKUClicked();
                            alert("Η μεταφορά ολοκληρώθηκε");
                            //this.resetFrom();
                            //this.state = State.NeedPosition;
                            //this.$nextTick(() => {
                            //this.$refs.fromScannerInput.focus();
                            //});
                        } else {
                            this.resetTo();
                            this.state = State.NeedDestination;
                            this.$nextTick(() => {
                                this.$refs.toScannerInput.focus();
                            });
                        }
                    }).catch(error => {
                        console.log(error);
                        this.state = State.NeedDestinationAmount;
                        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("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.currentProduct.boxes.length; i++) {
                        if (barcode === this.currentProduct.boxes[i].box) {
                            position = i;
                            break;
                        }
                    }
                    return position;
                },
                nextSKUClicked: function () {
                    this.state = State.NeedSKU;
                    this.skuInputState = null;
                    this.currentProduct = null;
                    this.skuScannerInputValue = "";
                    this.resetFrom();
                    this.$nextTick(() => {
                        this.$refs.skuScannerInput.focus();
                    });
                },
                fromPositionClearClicked: function () {
                    this.state = State.NeedPosition;
                    this.resetFrom();
                    this.$nextTick(() => {
                        this.$refs.fromScannerInput.focus();
                    });
                },
                toPositionClearClicked: function () {
                    this.state = State.NeedDestination;
                    this.resetTo();
                    this.$nextTick(() => {
                        this.$refs.toScannerInput.focus();
                    });
                },
                resetFrom: function () {
                    this.fromState = null;
                    this.selectedPosition = -1;
                    this.fromScannerInputValue = "";
                    this.fromAmountScannerInputValue = "";
                    this.resetTo();
                },
                resetTo: function () {
                    this.toState = null;
                    this.selectedDestination = -1;
                    this.toScannerInputValue = "";
                    this.toAmountScannerInputValue = "";
                },
                showModal: function () {
                    this.$refs['img-modal'].show();
                }
            }
        });
    </script>
{% endblock %}