{% 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">
                <b-alert show variant="danger">
                    Για να κάνετε απογραφή αποθήκης πατήστε το κουμπί <i>Έναρξη</i>. Το σύστημα θα χαρακτηρίσει όλα τα IB προς απογραφή. 
                    Αν πατήσετε το κουμπί κατά την διάρκεια απογραφής, θα πρέπει να ξεκινήσετε την διαδικασία από την αρχή.
                </b-alert>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div v-if="data" class="infoboxGray p-3">
                    <div v-if="data.total" class="row">
                        <div class="col">
                            Γίνεται απογραφή. Σύνολο IB: ${ data.total }$, Απογεγραμμένα: ${ data.done }$, Μη απογεγραμμένα IB: ${ data.remaining }$
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col">
                            <b-button variant="primary" v-on:click="startClicked">{% trans %}Έναρξη{% endtrans %}</b-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    {{ parent() }}
    <script>
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                data: null
            },
            async mounted() {
                await this.update();
            },
            computed: {
            },
            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);
                        }
                    });
                },
                startClicked: async function () {
                    await axios.post('{{ path('api_replenishment_stocktaking_start') }}', {
                    }).then(response => {
                        console.log(response);
                    }).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);
                        }
                    });
                    await this.update();
                }
            }
        }
        );
    </script>
{% endblock %}