{% extends 'simple.html.twig' %}
{% block content %}
    <div id="app" class="{{ containerClass }}">
        <div class="row">
            <div class="col">
                <p class="h5 p-1 mt-2 mb-2 infoboxBlue">{% trans %}Αντιστοίχιση IB σε crate{% endtrans %}</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="infoboxGray p-3">
                    <div class="row">
                        <div class="col">
                            <div class="input-group mb-3">
                                <b-form-input id="barcode" @keyup.enter="barcodeEnterClicked" :readonly="scannerInputDisabled"  
                                              ref="barcode" v-model="barcode" placeholder="{% trans %}barcode{% endtrans %}" required>
                                </b-form-input>
                                <b-form-invalid-feedback id="barcode-feedback">
                                    ${ errorMessage }$
                                </b-form-invalid-feedback>
                            </div>
                        </div>
                        <div class="col">
                            <b-button v-on:click="okButtonPressed" ref="okButton" :disabled="invalidInput" 
                                      type="submit" variant="primary">{% trans %}OK{% endtrans %}</b-button>
                        </div>
                    </div>
                    <template v-if="crate">
                        <div class="row">
                            <div class="col">
                                <p class="h5">{% trans %}Crate: {% endtrans %} ${ infoCrateBarcode }$</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p class="h5">{% trans %}Position: {% endtrans %} ${ infoCratePositionBarcode }$</p>
                            </div>
                        </div>
                        {#<div class="row">
                            <div class="col">
                                <p class="h5">{% trans %}IBs: {% endtrans %}${ infoCrateBoxes }$</p>
                            </div>
                        </div>#}
                        <div class="row">
                            <div class="col">
                                <p class="h5">{% trans %}Αντιστοίχιση: {% endtrans %}${ infoNewCrateBoxes }$</p>
                                <table class="table table-striped table-condensed table-dark justify-content-center">
                                    <thead>
                                        <tr>
                                            <th>{% trans %}IB{% endtrans %}</th>
                                            <th>{% trans %}Θέση{% endtrans %}</th>
                                            <th>{% trans %}Τύπος{% endtrans %}</th>
                                            <th>{% trans %}Μέγεθος{% endtrans %}</th>
                                            <th>{% trans %}SKU{% endtrans %}</th>
                                            <th>{% trans %}Τεμάχια{% endtrans %}</th>
                                            <th>{% trans %}Αφαίρεση{% endtrans %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(g,index) in this.crate.boxes">
                                            <td>${ g.barcode }$</td>
                                            <td>${ g.position ? g.position : '' }$</td>
                                            <td>${ g.type }$</td>
                                            <td>${ g.size }$</td>
                                            <td>${ g.products }$</td>
                                            <td>${ g.amount }$</td>
                                            <td><b-icon v-on:click="removeIB(index)" icon="x-circle" variant="danger"></b-icon></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <b-button v-on:click="onSave" ref="saveButton" :disabled="invalid2Input" variant="primary">{% trans %}Αποθήκευση{% endtrans %}</b-button>
                                <b-button v-on:click="onReset" variant="danger">{% trans %}Επαναφορά{% endtrans %}</b-button>
                            </div>
                            <div class="col">
                                <b-button class="float-right" v-on:click="removeAllIB" variant="danger">{% trans %}Αφαίρεση όλων{% endtrans %}</b-button>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <div class="row mt-3 mb-1" >
            <div class="col">
                <p class="infoboxDarkGray">&nbsp;${ hint }$</p>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                step: 1,
                barcode: '',
                crate: null,
            },
            async mounted() {
                this.$nextTick(() => {
                    this.$refs.barcode.focus();
                });
            },
            computed: {
                infoCrateBarcode: function () {
                    if (this.crate !== null)
                        return this.crate.barcode;
                    return "";
                },
                infoCratePositionBarcode: function () {
                    if (this.crate !== null)
                        return this.crate.position;
                    return "";
                },
                infoCrateBoxes: function () {
                    var s = "";
                    if (this.crate !== null) {
                        s += " ";
                        s += this.crate.boxes.length;
                        s += " (";
                        for (var i = 0; i < this.crate.boxes.length; i++) {
                            if (i === 0) {

                            } else {
                                s += ", ";
                            }
                            s += this.crate.boxes[i].barcode;
                            s += " - ";
                            s += this.crate.boxes[i].type;
                            s += " - ";
                            s += this.crate.boxes[i].products;
                            s += " - ";
                            s += this.crate.boxes[i].amount;
                        }
                        s += ")";
                    }
                    return s;
                },
                infoNewCrateBoxes: function () {
                    var s = "";
                    if (this.crate !== null) {
                        s += " ";
                        s += this.crate.boxes.length;
                        s += " ΙΒ, Κάλυψη: ";
                        var area = 0;
                        for (var i = 0; i < this.crate.boxes.length; i++) {
                            area += this.crate.boxes[i].size;
                        }
                        s += area + "/" + 16;
                    }
                    return s;
                },
                scannerInputDisabled: function () {
                    return false;
                },
                hint: function () {
                    if (this.step === 1) {
                        return '{% trans %}Σαρώστε το Crate{% endtrans %}';
                    }
                    if (this.step === 2) {
                        return '{% trans %}Σαρώστε τα IB. Πατήστε αποθήκευση όταν ολοκληρώσετε την διαδικασία.{% endtrans %}';
                    }
                },
                invalidInput: function () {
                    if (this.barcode === null || this.barcode === "")
                        return true;
                    return false;
                },
                invalid2Input: function () {

                    return false;
                }
            },
            methods: {
                barcodeEnterClicked: function () {
                    if (this.barcode) {
                        this.okButtonPressed();
                    }
                },
                okButtonPressed: function () {
                    this.$refs.barcode.state = null;
                    if (this.step === 1) {
                        axios.post('{{ path('api_get_crate_boxes') }}', {
                            barcode: this.barcode,
                        }).then(response => {
                            console.log(response);
                            this.barcode = "";
                            this.crate = response.data;
                            this.step = 2;
                            this.$nextTick(() => {
                                this.$refs.barcode.focus();
                            });
                        }).catch(error => {
                            console.log(error);
                            if (error.response) {
                                if (error.response.status === 400) {
                                    this.errorMessage = error.response.data.message;
                                } else {
                                    this.errorMessage = ("Response ERROR: " + error.response.status);
                                }
                            } else if (error.request) {
                                this.errorMessage = ("Request ERROR: " + error.message);
                            } else {
                                this.errorMessage = ("ERROR: " + error.message);
                            }
                            this.$refs.barcode.state = false;
                            this.barcode = "";
                            this.$nextTick(() => {
                                this.$refs.barcode.focus();
                            });

                        });
                    } else {
                        if (!this.barcode) {
                            return;
                        }
                        for (var i = 0; i < this.crate.boxes.length; i++) {
                            if (this.barcode === this.crate.boxes[i].barcode) {
                                this.barcode = "";
                                this.$nextTick(() => {
                                    this.$refs.barcode.focus();
                                });
                                return;
                            }
                        }

                        axios.post('{{ path('api_get_boxinfo') }}', {
                            barcode: this.barcode,
                        }).then(response => {
                            console.log(response);
                            this.crate.boxes.push(response.data);
                            this.barcode = "";
                            this.$nextTick(() => {
                                this.$refs.barcode.focus();
                            });
                        }).catch(error => {
                            console.log(error);
                            if (error.response) {
                                if (error.response.status === 400) {
                                    this.errorMessage = error.response.data.message;
                                } else {
                                    this.errorMessage = ("Response ERROR: " + error.response.status);
                                }
                            } else if (error.request) {
                                this.errorMessage = ("Request ERROR: " + error.message);
                            } else {
                                this.errorMessage = ("ERROR: " + error.message);
                            }
                            this.$refs.barcode.state = false;
                            this.barcode = "";
                            this.$nextTick(() => {
                                this.$refs.barcode.focus();
                            });

                        });
                    }
                },
                removeIB: function (index) {
                    this.crate.boxes.splice(index, 1);
                },
                removeAllIB: function () {
                    this.crate.boxes.splice(0, this.crate.boxes.length);
                },
                onSave() {
                    var boxBarcodes = [];
                    for (var i = 0; i < this.crate.boxes.length; i++) {
                        boxBarcodes.push(this.crate.boxes[i].barcode);
                    }
                    axios.post('{{ path('api_assign_ib_to_crate_v2') }}', {
                        crate: this.crate.barcode,
                        boxes: boxBarcodes
                    }).then(response => {
                        console.log(response);
                        if (response.data.status !== 'OK') {
                            alert(response.data.message);
                        } else {
                            alert(response.data.message);
                            this.onReset();
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });

                },
                onReset() {
                    this.step = 1;
                    this.barcode = "";
                    this.crate = null;
                    this.$nextTick(() => {
                        this.$refs.barcode.focus();
                    });
                }
            }});
    </script>
{% endblock %}