{% 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 }$ <b-icon v-on:click="removeIB(index)" icon="x-circle" variant="danger"></b-icon>
                                    </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,
                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) {
                        if (-1 === this.ibBarcodes.indexOf(this.ibBarcode))
                            this.ibBarcodes.push(this.ibBarcode);
                    }
                },
                saveCrate: function () {
                    this.$refs.crateBarcode.disabled = true;
                    this.step = 2;
                    this.$nextTick(() => {
                        this.$refs.ibBarcode.focus();
                    });
                },
                onSave() {
                    axios.post('{{ path('api_assign_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 %}