{% 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">
                    <template v-if="true">
                        <div class="row">
                            <div class="col">
                                <b-form-group label="{% trans %}Crate Barcode{% endtrans %}" label-for="crate-barcode" invalid-feedback="{% trans %}Barcode is required{% endtrans %}">
                                    <div class="input-group mb-3">
                                        <b-form-input id="crate-barcode" @keyup.enter="crateEnterClicked()" ref="crateBarcode" v-model="crateBarcode" placeholder="{% trans %}barcode{% endtrans %}" required>
                                        </b-form-input>
                                    </div>
                                </b-form-group>
                                <b-button v-on:click="saveCrate()" ref="nextButton" :disabled="invalidInput" type="submit" variant="primary">{% trans %}Επόμενο{% endtrans %}</b-button>
                            </div>
                        </div>
                        <div class="row" v-if="step===2">
                            <div class="col">
                                <p class="h5 text-center">{% trans %}Νέα ΙΒ{% endtrans %}</p>
                                <ol>
                                    <li v-for="(item, index) in ibBarcodes">
                                        ${ item.barcode }$ ${ item.status }$ 
                                    </li>
                                </ol>
                                <b-form-group label="{% trans %}IB Barcode{% endtrans %}" label-for="ib-barcode" invalid-feedback="{% trans %}Barcode is required{% endtrans %}">
                                    <div class="input-group mb-3">
                                        <b-form-input id="ib-barcode" @keyup.enter="ibEnterClicked()" ref="ibBarcode" v-model="ibBarcode" placeholder="{% trans %}barcode{% endtrans %}" required>
                                        </b-form-input>
                                    </div>
                                </b-form-group>
                                <b-button v-on:click="onSave()" ref="saveButton" :disabled="invalid2Input" variant="primary">{% trans %}Save{% endtrans %}</b-button>
                                <b-button v-on:click="onReset()" variant="danger">{% trans %}Reset{% endtrans %}</b-button>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                step: 1,
                crateBarcode: '',
                ibBarcode: '',
                mobileStation: null,
                crate: null,
                packStations: [],
                mobileStations: [],
                ibBarcodes: []
            },
            async mounted() {
                this.$nextTick(() => {
                    this.$refs.crateBarcode.focus();
                });
            },
            computed: {
                invalidInput: function () {
                    if (this.crateBarcode === null || this.crateBarcode === "")
                        return true;
                    return false;
                },
                invalid2Input: function () {
                    if (this.ibBarcodes === null)
                        return true;
                    if (this.ibBarcodes.length === 0)
                        return true;
                    return false;
                }
            },
            methods: {
                crateEnterClicked: function () {
                    if (this.crateBarcode) {
                        this.saveCrate();
                    }
                },
                removeIB: function (index) {

                    this.ibBarcodes.splice(index, 1);

                },
                ibEnterClicked: function () {
                    if (this.ibBarcode) {
                        var i;
                        var found = false;
                        for (i = 0; i < this.ibBarcodes.length; i++) {
                            if (this.ibBarcode === this.ibBarcodes[i].barcode) {
                                this.ibBarcodes[i].status = '';
                                found = true;
                                break;
                            }
                        }
                        if (!found) {
                            this.ibBarcodes.push({barcode: this.ibBarcode, status: 'to add'});
                        }
                    }
                },
                saveCrate: async function () {
                    this.$refs.crateBarcode.disabled = true;
                    this.step = 2;
                    this.$nextTick(() => {
                        this.$refs.ibBarcode.focus();
                    });

                    await axios.post('{{ path('api_get_crate') }}', {
                        barcode: this.crateBarcode,
                    }).then(response => {
                        console.log(response);
                        this.crate = response.data;
                    }).catch(function (error) {
                        console.log(error);
                    });
                    var i;
                    for (i = 0; i < this.crate.boxes.length; i++) {
                        this.ibBarcodes.push({barcode: this.crate.boxes[i].barcode, status: 'to remove'});

                    }
                },
                onSave() {
                    axios.post('{{ path('api_reassign_ib_to_crate') }}', {
                        crate: this.crateBarcode,
                        boxes: this.ibBarcodes
                    }).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.crateBarcode = "";
                    this.ibBarcode = "";
                    this.mobileStation = null;
                    this.packStations = [];
                    this.mobileStations = [];
                    this.ibBarcodes = [];
                    this.$nextTick(() => {
                        this.$refs.crateBarcode.focus();
                    });
                }
            }});
    </script>
{% endblock %}