{% 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{% 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 %}Τύπος{% endtrans %}" label-for="input-type" description="{% trans %}Επιλέξτε τον τύπο{% endtrans %}">
                            <b-form-select id="input-type" v-model="form.type" :options="ibTypes" required>
                            </b-form-select>
                        </b-form-group>
                        <b-form-group label="{% trans %}Barcode{% endtrans %}" label-for="input-barcode" invalid-feedback="{% trans %}Barcode is required{% endtrans %}">
                            <div class="input-group mb-3">
                                <b-form-input  id="input-barcode" v-model="form.barcode" placeholder="{% trans %}barcode{% endtrans %}" required>
                                </b-form-input>
                            </div>
                        </b-form-group>
                        <b-button  :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: {
                    type: null,
                    barcode: ''
                },
                ibTypes: []
            },
            async mounted() {
                this.ibTypes.push({text: '{% trans %}Select One{% endtrans %}', value: null});
                await axios.get('{{ path('api_get_ib_types') }}').then(response => {
                    console.log(response);
                    var i;
                    for (i = 0; i < response.data.length; i++) {
                        this.ibTypes.push({text: response.data[i].name, value: response.data[i].id});
                    }
                }).catch(function (error) {
                    console.log(error);
                });
                this.$nextTick(() => {
                    //this.$refs.rackBarcode.focus();
                });
            },
            computed: {
                invalidInput: function () {
                    if (this.form.type === null || this.form.type === "")
                        return true;
                    if (this.form.barcode === null || this.form.barcode === "")
                        return true;
                    return false;
                }
            },
            methods: {
                async onSubmit(event) {
                    event.preventDefault();
                    await axios.post('{{ path('api_add_new_ib') }}', {
                        data: this.form
                    }).then(response => {
                        console.log(response);
                        if (response.data.status === 'FAIL') {
                            alert(response.data.message);
                        } else {
                            alert(response.data.message);
                            this.form.barcode = "";
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                onReset(event) {
                    event.preventDefault();
                    this.form.barcode = "";
                }
            }});
    </script>
{% endblock %}