{% 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>
        <div class="row">
            <div class="col">
                <div class="infoboxGray p-3">
                    <div class="row mt-3">
                        {#
                        <div v-if='step === 2' class="col-2">
                            <b-form-input :state='amountState' @keyup.enter.native='amountΕnterClicked()' :readonly="barcodeInputDisabled" 
                                          v-model="amount" ref="amount" placeholder="{% trans %}Ποσότητα{% endtrans %}"></b-form-input>
                        </div>
                        #}
                        <div class="col-6">
                            <b-form-input trim :state='barcodeState' @keyup.enter="enterClicked" :readonly="barcodeInputDisabled"
                                          v-model="barcode" ref="barcode" placeholder="{% trans %}barcode{% endtrans %}"></b-form-input>
                            <b-form-invalid-feedback id="barcode-feedback">
                                ${ errorMessage }$
                            </b-form-invalid-feedback>
                        </div>
                        <div class="col-2">
                            <b-button :disabled="barcodeInputDisabled" variant="primary" v-on:click="okClicked">{% trans %}OK{% endtrans %}</b-button>
                        </div>
                        <div class="col-2">
                            <b-button :disabled="finishDisabled" variant="primary" v-on:click="finishClicked">{% trans %}Ολοκλήρωση{% endtrans %}</b-button>
                        </div>
                    </div>


                </div>
            </div>
        </div>
        <div v-if="true" class="row mt-3 mb-3">
            <div class="col">
                <div class="infoboxGray" v-if="boxInfo">
                    <b>Box:</b> ${ boxInfo.barcode }$, <b>Crate:</b> ${ boxInfo.crate }$, <b>Position:</b> ${ boxInfo.position }$
                </div>
                <table v-if="this.products" class="table table-striped table-condensed table-dark">
                    <thead>
                        <tr>
                            <th>{% trans %}Barcode{% endtrans %}</th>
                            <th>{% trans %}SKU{% endtrans %}</th>
                            <th>{% trans %}Image{% endtrans %}</th>
                            <th>{% trans %}Product{% endtrans %}</th>
                            <th>{% trans %}Amount{% endtrans %}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(g,index) in this.products">
                            <td>${ g.barcode }$</td>
                            <td>${ g.sku }$</td>
                            <td><img @click="showModal(g)" class="img-thumbnail" style="width:48px; height: 48px" :src="imageUrl(g.barcode)"/></td>
                            <td>${ g.description }$</td>
                            <td><b-form-input :state='validateAmount(index)' v-model="g.amount" :key="index"/></td>
                    <td><b-button variant="danger" v-on:click="removeLine(index)">{% trans %}X{% endtrans %}</b-button></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <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: {
                block: false,
                debug: false,
                modalbarcode: "",
                modaldescription: "",
                barcodeState: null,
                boxInfo: null,
                products: [],
                step: 0,
                errorMessage: '',
                barcode: '',
                box: '',
                amount: 1
            },
            mounted() {
                this.step = 1;
                if (this.debug) {
                    this.barcode = 'K00001';
                }
                this.$nextTick(() => {
                    this.$refs.barcode.focus();
                });
            },
            computed: {
                amountState: function () {
                    if (isNaN(this.amount))
                        return false;
                    if (this.amount < 0)
                        return false;
                    return null;
                },
                hint: function () {
                    if (this.step === 1) {
                        return "{% trans %}Σαρώστε το IB{% endtrans %}";
                    }
                    if (this.step === 2) {
                        return "{% trans %}Σαρώστε τα SKU χωρίς να τα τοποθετήσετε στο IB. Μόλις ολοκληρώσετε την διαδικασία πατήστε το κουμπί «Ολοκλήρωση»{% endtrans %}";
                    }
                    return "";
                },
                barcodeInputDisabled: function () {
                    if (this.block === true)
                        return true;
                    for (var i = 0; i < this.products.length; i++) {
                        if (isNaN(this.products[i].amount) || this.products[i].amount < 0)
                            return true;
                    }
                    return false;
                },
                finishDisabled: function () {
                    if (this.block === true)
                        return true;
                    if (this.box === '')
                        return true;
                    if (this.products.length === 0) {
                        return true;
                    }
                    var re = new RegExp("^[0-9]+$");
                    for (var i = 0; i < this.products.length; i++) {
                        if (typeof this.products[i].amount === 'number') {
                            if (isNaN(this.products[i].amount) || this.products[i].amount < 0)
                                return true;
                        } else if (typeof this.products[i].amount === 'string') {
                            var number = re.test(this.products[i].amount.trim());
                            if (number === false)
                                return true;
                        } else {
                            alert(typeof this.products[i].amount);
                        }
                    }
                    return false;
                }
            },
            watch: {
            },
            methods: {
                showModal: function (product) {
                    this.modalbarcode = product.barcode;
                    this.modaldescription = product.description;
                    this.$refs['img-modal'].show();
                },
                imageUrl: function (skuBarcode) {
                    return "https://www.galeriedebeaute.gr/images/products/"
                             + skuBarcode + "_01.jpg";
                },
                finishClicked: async function () {

                    var success = null;
                    await axios.post('{{ path('api_replenishment_replenish') }}', {
                        box: this.box,
                        products: this.products
                    }).then(response => {
                        console.log(response);
                        success = response.data;
                    }).catch(function (error) {
                        console.log(error);
                        if (error.response) {
                            if (error.response.status === 400) {
                                alert(error.response.data.message);
                            } else {
                                alert("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            alert("Request ERROR: " + error.message);
                        } else {
                            alert("ERROR: " + error.message);
                        }
                    });

                    if (success !== null) {
                        await this.resetForm(success);
                    }
                },
                resetForm: async function (data) {


                    if (!data.position.startsWith("DX-"))
                        await this.$bvModal.msgBoxOk(
                                'Τοποθετήστε τα προϊόντα στο IB, μετακινήστε το IB στο Crate '
                                + data.crate + ' και το Crate στην θέση ' + data.position, {
                                    title: 'Η αναπλήρωση ολοκληρώθηκε',
                                    buttonSize: 'md',
                                    centered: true, size: 'md'
                                });
                    this.boxInfo = null;
                    this.barcodeState = null;
                    this.products = [];
                    this.step = 0;
                    this.errorMessage = '';
                    this.barcode = '';
                    this.amount = 1;
                    this.step = 1;
                    this.box = '';
                    if (this.debug) {
                        this.barcode = 'K00001';
                    }
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                },
                validateAmount: function (index) {
                    if (isNaN(this.products[index].amount))
                        return false;
                    if (this.products[index].amount < 0)
                        return false;
                    return null;
                },
                amountΕnterClicked: function () {
                    console.log("amountΕnterClicked");
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                },
                okClicked: async function () {
                    this.block = true;
                    await this._enterClicked();
                    this.block = false;
                },
                removeLine: function (index) {
                    this.products.splice(index, 1);
                },
                enterClicked: async function () {
                    this.block = true;
                    await this._enterClicked();
                    this.block = false;
                },
                _enterClicked: async function () {
                    console.log("enterClicked");
                    if (this.barcode === '')
                        return;
                    if (this.step === 1) {
                        this.barcodeState = null;
                        var ibBarcode = this.barcode;
                        this.barcode = "";
                        var ok = false;
                        this.boxInfo = null;
                        await axios.post('{{ path('api_replenishment_box_info') }}', {
                            barcode: ibBarcode
                        }).then(response => {
                            console.log(response);
                            ok = true;
                            this.boxInfo = response.data;
                        }).catch(function (error) {
                            console.log(error);
                        });
                        if (!ok) {
                            this.errorMessage = "{% trans %}Λάθος Barcode{% endtrans %}";
                            this.barcodeState = false;
                            this.$nextTick(() => {
                                this.$refs.barcode.focus();
                            });
                            return;
                        }

                        if (this.debug) {
                            this.barcode = '3614273601832';
                        }

                        this.$nextTick(() => {
                            this.$refs.barcode.focus();
                        });
                        this.step = 2;
                        this.amount = 1;
                        this.box = ibBarcode;
                    } else if (this.step === 2) {
                        this.barcodeState = null;
                        var skuBarcode = this.barcode;
                        this.barcode = '';
                        var found = false;
                        for (var i = 0; i < this.products.length; i++) {
                            if (this.products[i].barcode === skuBarcode) {
                                found = true;
                                this.products[i].amount = parseInt(this.products[i].amount);
                                this.products[i].amount += parseInt(this.amount);
                                break;
                            }
                        }
                        if (found === true) {
                            this.amount = 1;
                            if (this.debug) {
                                this.barcode = '3614273601832';
                            }
                            this.$nextTick(() => {
                                this.$refs.barcode.focus();
                            });
                            return;
                        }

                        var product = null;
                        await axios.post('{{ path('api_get_product') }}', {
                            barcode: skuBarcode
                        }).then(response => {
                            console.log(response);
                            product = response.data;
                        }).catch(function (error) {
                            console.log(error);
                        });
                        if (product === null) {
                            this.errorMessage = "{% trans %}Λάθος Barcode{% endtrans %}";
                            this.barcodeState = false;
                            this.amount = 1;
                            if (this.debug) {
                                this.barcode = '3614273601832';
                            }
                            this.$nextTick(() => {
                                this.$refs.barcode.focus();
                            });
                            return;
                        }
                        if (found === false) {
                            this.products.push({
                                id: product.id,
                                sku: product.sku,
                                barcode: skuBarcode,
                                description: product.description,
                                amount: parseInt(this.amount)
                            });
                        }
                        this.amount = 1;
                        if (this.debug) {
                            this.barcode = '3614273601832';
                        }
                        this.$nextTick(() => {
                            this.$refs.barcode.focus();
                        });
                    }
                }
            }
        }
        );
    </script>
{% endblock %}