{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Καταχώρηση Crate{% 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 %}Καταχώρηση Crate{% endtrans %}</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="infoboxGray p-3">
                    <b-form ref="mainform" @submit="onSubmit" @reset="onReset">
                        <b-form-group label="{% trans %}Barcode θέσης Rack{% endtrans %}" label-for="rack-barcode" invalid-feedback="{% trans %}Barcode is required{% endtrans %}">
                            <div class="input-group mb-3">
                                <b-form-input id="rack-barcode" @keyup.enter="enterClicked()" ref="rackBarcode" v-model="form.rackBarcode" placeholder="{% trans %}barcode{% endtrans %}" required>
                                </b-form-input>
                            </div>
                        </b-form-group>
                        <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="enterClicked()" ref="crateBarcode" v-model="form.crateBarcode" placeholder="{% trans %}barcode{% endtrans %}" required>
                                </b-form-input>
                            </div>
                        </b-form-group>
                        <b-button ref="saveButton" :disabled="invalidInput" type="submit" variant="primary">{% trans %}Save{% endtrans %}</b-button>
                        <b-button type="reset" variant="danger">{% trans %}Reset{% endtrans %}</b-button>
                    </b-form>
                </div>
            </div>
        </div>
        {#
        <b-card class="mt-3" header="Form Data Result">
            <pre class="m-0">${ form }$</pre>
            <pre class="m-0"> 1 ${ namestate }$</pre>
        </b-card>
        #}
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                form: {
                    rackBarcode: '',
                    crateBarcode: ''
                }
            },
            mounted() {
                this.$nextTick(() => {
                    this.$refs.rackBarcode.focus();
                });
            },
            computed: {
                invalidInput: function () {
                    if (this.form.rackBarcode === null || this.form.rackBarcode === "")
                        return true;
                    if (this.form.crateBarcode === null || this.form.crateBarcode === "")
                        return true;
                    return false;
                }
            },
            methods: {
                enterClicked: function () {
                    if (this.form.crateBarcode && this.form.rackBarcode) {
                        this.$refs.saveButton.focus();
                    } else if (this.form.rackBarcode) {
                        this.$refs.crateBarcode.focus();
                    }
                },
                async onSubmit(event) {
                    event.preventDefault();
                    await axios.post('{{ path('api_add_new_crate') }}', {
                        data: this.form
                    }).then(response => {
                        console.log(response);
                        if (response.data.status !== 'OK') {
                            alert(response.data.message);
                        } else {
                            alert(response.data.message);
                            this.form.crateBarcode = "";
                            this.form.rackBarcode = "";
                            this.$nextTick(() => {
                                this.$refs.rackBarcode.focus();
                            });
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });

                },
                onReset(event) {
                    event.preventDefault();
                    this.form.crateBarcode = "";
                    this.form.rackBarcode = "";
                    this.$nextTick(() => {
                        this.$refs.rackBarcode.focus();
                    });
                }
            }});
    </script>
{% endblock %}