{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Κατάσταση Απογραφής Αποθήκης{% 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 %}Κατάσταση Απογραφής Αποθήκης{% endtrans %}</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div v-if="data" class="infoboxGray p-3">
                    <div class="row mt-3">
                        <div class="col">
                            Σύνολο IB: ${ data.total }$
                        </div>
                        <div class="col">
                            Απογεγραμμένα: ${ data.done }$ (${ data_done }$%)
                        </div>
                        <div class="col">
                            Μη απογεγραμμένα IB: ${ data.remaining }$  (${ data_remaining }$%)
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="data" class="row mt-3 mb-3">
            <div class="col">
                <table v-if="this.data.boxes.length" class="table table-striped table-condensed table-dark">
                    <thead>
                        <tr>
                            <th>{% trans %}Box{% endtrans %}</th>
                            <th>{% trans %}Crate{% endtrans %}</th>
                            <th>{% trans %}Position{% endtrans %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(g,index) in this.data.boxes">
                            <td>${ g.barcode }$</td>
                            <td>${ g.crate }$</td>
                            <td>${ g.position }$</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
{% endblock %}
{% block js %}
    {{ parent() }}
    <script>
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                data: null
            },
            async mounted() {
                await this.update();

                window.setInterval(() => {
                    this.update();
                }, 15000);
            },
            computed: {
                data_done: function () {
                    if (this.data.total === 0)
                        return  '-';
                    var remaining = (1000 * this.data.remaining) / this.data.total;
                    console.log(remaining);
                    remaining = Math.floor(remaining);
                    console.log(remaining);
                    remaining = 1000 - remaining;
                    console.log(remaining);
                    remaining = Math.round(remaining);
                    remaining /= 10;
                    return remaining;

                },
                data_remaining: function () {
                    if (this.data.total === 0)
                        return  '-';
                    var remaining = (1000 * this.data.remaining) / this.data.total;
                    remaining = Math.round(remaining);
                    remaining /= 10;
                    return remaining;
                }
            },
            watch: {
            },
            methods: {
                update: async function () {
                    await axios.post('{{ path('api_replenishment_stocktaking_progress') }}', {
                    }).then(response => {
                        console.log(response);
                        this.data = response.data;
                    }).catch(function (error) {
                        console.log(error);
                        if (error.response) {
                            if (error.response.status === 400) {
                                alert(error.response.data.message);
                            } else {
                                alert("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            //alert("Request ERROR: " + error.message);
                        } else {
                            alert("ERROR: " + error.message);
                        }
                    });
                }
            }
        }
        );
    </script>
{% endblock %}