{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Swap Crates{% 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 %}Swap 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 %}Πρώτο Crate{% endtrans %}" label-for="first-crate" invalid-feedback="{% trans %}Barcode is required{% endtrans %}">
                            <div class="input-group mb-3">
                                <b-form-input id="first-barcode" @keyup.enter="enterClicked()" ref="firstCrate" v-model="form.firstCrate" placeholder="{% trans %}barcode{% endtrans %}" required>
                                </b-form-input>
                            </div>
                        </b-form-group>
                        <b-form-group label="{% trans %}Δεύτερο Crate{% endtrans %}" label-for="second-crate" invalid-feedback="{% trans %}Barcode is required{% endtrans %}">
                            <div class="input-group mb-3">
                                <b-form-input id="second-crate" @keyup.enter="enterClicked()" ref="secondCrate" v-model="form.secondCrate" 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: {
                    firstCrate: '',
                    secondCrate: ''
                }
            },
            mounted() {
                this.$nextTick(() => {
                    this.$refs.firstCrate.focus();
                });
            },
            computed: {
                invalidInput: function () {
                    if (this.form.firstCrate === null || this.form.firstCrate === "")
                        return true;
                    if (this.form.secondCrate === null || this.form.secondCrate === "")
                        return true;
                    return false;
                }
            },
            methods: {
                enterClicked: function () {
                    if (this.form.firstCrate && this.form.secondCrate) {
                        this.$refs.saveButton.focus();
                    } else if (this.form.firstCrate) {
                        this.$refs.secondCrate.focus();
                    }
                },
                async onSubmit(event) {
                    event.preventDefault();
                    await axios.post('{{ path('api_swap_crates') }}', {
                        first: this.form.firstCrate,
                        second: this.form.secondCrate
                    }).then(response => {
                        console.log(response);
                        this.form.firstCrate = "";
                        this.form.secondCrate = "";
                        this.$nextTick(() => {
                            this.$refs.firstCrate.focus();
                        });
                        alert("OK: " + response.data.message);

                    }).catch(error => {
                        console.log(error);
                        if (error.response) {
                            // The request was made and the server responded with a status code
                            // that falls out of the range of 2xx
                            console.log(error.response.data);
                            console.log(error.response.status);
                            //console.log(error.response.headers);
                            if (error.response.status === 400) {
                                alert("Response ERROR: " + error.response.data.message);
                                
                            } else {
                                alert("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            // The request was made but no response was received
                            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                            // http.ClientRequest in node.js
                            console.log(error.request);
                            alert("Request ERROR: " + error.message);
                        } else {
                            // Something happened in setting up the request that triggered an Error
                            console.log('Error', error.message);
                            alert("ERROR: " + error.message);
                        }
                    });

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