{% extends 'simple.html.twig' %}
{% block content %}
    <div id="app" class="{{ containerClass }}">
        <div class="row">
            <div class="col">
                <p class="h5">{% trans %}Αντιστοίχιση Rack - Crate{% endtrans %}</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <b-alert :show="showError" variant="danger"><p class="h6">${ errorMessage }$</p></b-alert>
                <b-alert show variant="success"><p class="h6">${ message }$</p></b-alert>
            </div>
        </div>
        <div class="row">
            <div v-if="disableVision" class="col">
                <b-form-input @keyup.enter="enterClicked()" :disabled="barcodeInputDisabled" v-model="scannedBarcode" ref="barcode" placeholder="barcode"></b-form-input>
            </div>
            <div class="col">
                <b-button :disabled="buttonDisabled" variant="primary" v-on:click="okClicked">{% trans %}OK{% endtrans %}</b-button>
            </div>
            <div v-if="disableVision" class="col">
                <b-button :disabled="buttonScanDisabled" variant="primary" v-on:click="endClicked">{% trans %}Τέλος{% endtrans %}</b-button>
            </div>
        </div>
        <div class="row">
            <div v-if="showTable" class="col-6">
                <table class="table table-bordered table-condensed">
                    <tr><td>${ table[8][0] }$</td><td>${ table[8][1] }$</td></tr>
                    <tr><td>${ table[7][0] }$</td><td>${ table[7][1] }$</td></tr>
                    <tr><td>${ table[6][0] }$</td><td>${ table[6][1] }$</td></tr>
                    <tr><td>${ table[5][0] }$</td><td>${ table[5][1] }$</td></tr>
                    <tr><td>${ table[4][0] }$</td><td>${ table[4][1] }$</td></tr>
                    <tr><td>${ table[3][0] }$</td><td>${ table[3][1] }$</td></tr>
                    <tr><td>${ table[2][0] }$</td><td>${ table[2][1] }$</td></tr>
                    <tr><td>${ table[1][0] }$</td><td>${ table[1][1] }$</td></tr>
                    <tr><td>${ table[0][0] }$</td><td>${ table[0][1] }$</td></tr>

                </table>
            </div>
        </div>
        <b-card class="mt-3" header="Data">
            <pre class="m-0">S ${ this.$root.$data.step }$</pre>
            <pre class="m-0">B ${ this.$root.$data.scannedBarcode }$</pre>
            <pre class="m-0">RA ${ this.$root.$data.racks }$</pre>
            <pre class="m-0">CI ${ this.$root.$data.crates }$</pre>
            <pre class="m-0">RAC ${ this.$root.$data.rack }$</pre>
        </b-card>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                showError: false,
                showTable: false,
                table: null,
                disableVision: true,
                barcodeInputDisabled: true,
                buttonScanDisabled: true,
                message: '',
                scannedBarcode: '',
                currentCrate: '',
                currentPosition: '',
                step: 0,
                racks: [],
                crates: [],
                groupOrderId: null,
                buttonDisabled: false,
                errorMessage: '',
                rackContent: [],
                rackPositions: null,
                rack: null,
            },
            async mounted() {
                this.table = [];
                for (var i = 0; i < 9; i++) {
                    this.table.push([]);
                    for (var j = 0; j < 2; j++) {
                        this.table[i].push(i + " " + j);
                    }
                }
                this.showTable = true;
                this.step = 1;
            },
            computed: {
            },
            watch: {
                scannedBarcode: function (nval, oval) {
                    return;
                },
                step: function (nval, oval) {
                    this.showError = false;
                    this.$refs.barcode.state = null;

                    //if (this.racks.length > 0 && this.racks.length === this.crates.length) {
                    //this.buttonScanDisabled = false;
                    //} else {
                    //this.buttonScanDisabled = true;
                    //}
                    if (nval === 1) {
                        this.message = "Σκάναρε το Rack";
                        this.barcodeInputDisabled = false;
                        this.scannedBarcode = "S00001";
                        this.$nextTick(() => {
                            this.$refs.barcode.focus();
                        });
                    }
                    if (nval === 2) {
                        this.message = "Σκάναρε ένα Crate";
                        this.barcodeInputDisabled = false;
                        this.scannedBarcode = "C00001";

                        this.$nextTick(() => {
                            this.$refs.barcode.focus();
                        });
                    }
                    if (nval === 3) {
                        this.message = "Σκάναρε την θέση του Crate";
                        this.barcodeInputDisabled = false;
                        this.scannedBarcode = "P00001";

                        this.$nextTick(() => {
                            this.$refs.barcode.focus();
                        });
                    }
                    if (nval === 4) {
                        this.message = "Τέλος";
                        this.barcodeInputDisabled = true;
                        this.buttonScanDisabled = true;
                    }
                }
            },
            methods: {
                okClicked: function () {
                    this.enterClicked();
                },
                enterClicked: async function () {
                    if (this.step === 1) {
                        var ok = false;
                        await axios.post('{{ path('api_barcode_check_one') }}', {
                            type: 'rack',
                            barcode: this.scannedBarcode,
                        }).then(response => {
                            console.log(response);
                            ok = true;
                        }).catch(function (error) {
                            console.log(error);
                        });
                        if (!ok) {
                            this.showError = true;
                            this.errorMessage = "Λάθος Barcode";
                            this.scannedBarcode = "";
                            this.$refs.barcode.state = false;
                            this.$nextTick(() => {
                                this.$refs.barcode.focus();
                            });
                            return;
                        }
                        this.$refs.barcode.state = null;
                        this.currentRollRack = this.scannedBarcode;
                        this.scannedBarcode = "";

                        await axios.post('{{ path('api_get_roll_rack') }}', {
                            barcode: this.currentRollRack,
                        }).then(response => {
                            console.log(response);
                            if (response.data === null) {

                            } else {
                                this.rack = response.data;
                            }
                        });

                        this.step = 2;
                    } else if (this.step === 2) {

                        await axios.post('{{ path('api_barcode_check_one') }}', {
                            type: 'rollcrate',
                            barcode: this.scannedBarcode,
                        }).then(response => {
                            console.log(response);
                            ok = true;
                        }).catch(function (error) {
                            console.log(error);
                        });
                        if (!ok) {
                            this.showError = true;
                            this.errorMessage = "Λάθος Barcode";
                            this.$refs.barcode.state = false;
                            this.scannedBarcode = "";
                            this.$nextTick(() => {
                                this.$refs.barcode.focus();
                            });
                            return;
                        }
                        this.$refs.barcode.state = null;
                        this.currentCrate = this.scannedBarcode;
                        this.scannedBarcode = "";
                        this.step = 3;
                        this.crates.push(this.currentCrate);
                    } else if (this.step === 3) {

                        await axios.post('{{ path('api_barcode_check_one') }}', {
                            type: 'rollrackposition',
                            barcode: this.scannedBarcode,
                        }).then(response => {
                            console.log(response);
                            ok = true;
                        }).catch(function (error) {
                            console.log(error);
                        });
                        if (!ok) {
                            this.showError = true;
                            this.errorMessage = "Λάθος Barcode";
                            this.$refs.barcode.state = false;
                            this.scannedBarcode = "";
                            this.$nextTick(() => {
                                this.$refs.barcode.focus();
                            });
                            return;
                        }
                        this.$refs.barcode.state = null;
                        this.currentPosition = this.scannedBarcode;
                        this.scannedBarcode = "";
                        this.step = 2;
                        this.crates.push(this.currentPosition);
                        await axios.post('{{ path('api_check_crate_to_roll_assignment') }}', {
                            currentRollRack: this.currentRollRack,
                            crates: this.crates,
                        }).then(response => {
                            console.log(response);
                            if (response.data === -1) {
                                this.groupOrderId = null;
                            } else {
                                this.groupOrderId = response.data.id;
                                this.rackContent = response.data.content;
                            }
                        });

                        var posI = -1;
                        var i;
                        for (i = 0; i < this.rack.cratePositions.length; i++) {
                            if (this.rack.cratePositions[i].barcode === this.currentPosition) {
                                posI = this.rack.cratePositions[i].position;
                                posI--;
                                break;
                            }
                        }
                        Vue.set(this.table[posI % 9], [posI / 9], this.currentCrate)
                                ;

                        var index = this.rackContent.indexOf(this.currentCrate);
                        if (index !== -1) {
                            this.rackContent.splice(index, 1);
                        }

                        if (this.rackContent.length === 0)
                            step = 4;

                    }
                },
                endClicked: async function () {

                },
            }
        }
        );
    </script>
{% endblock %}