{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Ομαδοποίηση παραγγελιών{% endtrans %}{% endblock %}
{% block content %}
    <div id="app" class="{{ containerClass }}" style="background-color: black">

        <div class="row" style="background-color: #336f94; color: white">
            <div class="col-8 mt-2 mb-0">
                <p class="h5" >{% trans %}Ομαδοποίηση παραγγελιών{% endtrans %}</p>
            </div>
        </div>

        <div class="row mt-1 mb-3" >
            <div class="col">
                <div class="content">
                    <div class="row" >

                        <div class="col col-3 text-center">
                            <p class="active">{% trans %}Βελτιστοποίηση{% endtrans %}</p>
                        </div>
                        <div class="col col-6 text-center">
                            <p class="active">{% trans %}Συσκευάστηκαν{% endtrans %}</p>
                        </div>
                        <div class="col col-3 text-center">
                            <p class="active">{% trans %}Ελλείψεις{% endtrans %}</p>
                        </div>
                    </div>
                    <div class="row mb-3" >
                        <div class="col-3">
                            <b-progress :max="pbmax" height="100%">
                                <b-progress-bar :value="pbred" variant="danger"></b-progress-bar>
                                <b-progress-bar :value="pbyellow" variant="warning"></b-progress-bar>
                                <b-progress-bar :value="pbgreen" variant="success"></b-progress-bar>
                            </b-progress>
                        </div>
                        <div class="col-6">
                            <b-progress :max="counterOrders" height="100%">
                                <b-progress-bar :value="counterOrdersDone" :label="counterOrdersDone + '/' +  counterOrders + ' '+ `${((counterOrdersDone / counterOrders) * 100).toFixed(2)}%`"></b-progress-bar>
                            </b-progress>
                        </div>
                        <div class="col col-3  text-center">
                            <p class="inactive">&nbsp;${ counterOrdersMissing }$</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3" >
            <div class="col" style="background-color: slategrey">
                <div class="row">
                    <div class="col">
                        {% trans %}Ομάδες Παραγγελιών{% endtrans %}
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <table style="height: 20vh" class="table table-striped table-condensed table-dark justify-content-center">
                            <thead>
                                <tr>
                                    <th>{% trans %}ID{% endtrans %}</th>
                                    <th>{% trans %}Παραγγελίες{% endtrans %}</th>
                                    <th>{% trans %}RR{% endtrans %}</th>
                                    <th>{% trans %}Κατάσταση{% endtrans %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(g,index) in this.orderGroups">
                                    <td>${ g.id }$</td>
                                    <td>${ g.orderCount }$</td>
                                    <td>${ g.rollrack }$</td>
                                    <td>${ g.rollrackStatus }$</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <p class="text-right">
                        <b-button variant="light" pill :disabled="disableInput" v-on:click="updateGroupOrders">
                            {% trans %}Ανανέωση παραγγελιών{% endtrans %}</b-button>
                        </p>

                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3" >
            <div class="col" style="background-color: slategrey">
                <div class="row">
                    <div class="col">
                        {% trans %}Ελλείψεις{% endtrans %}
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <table class="table table-striped table-condensed table-dark justify-content-center">
                            <thead>
                                <tr>
                                    <th>{% trans %}ID{% endtrans %}</th>
                                    <th>{% trans %}SKU{% endtrans %}</th>
                                    <th>{% trans %}Barcode{% endtrans %}</th>
                                    <th>{% trans %}Περιγραφή{% endtrans %}</th>
                                    <th>{% trans %}Βrand{% endtrans %}</th>
                                    <th>{% trans %}Ανενεργό{% endtrans %}</th>
                                    <th>{% trans %}Ποσότητα{% endtrans %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(g,index) in this.missing">
                                    <td>${ g.id }$</td>
                                    <td>${ g.sku }$</td>
                                    <td>${ g.barcode }$</td>
                                    <td>${ g.description }$</td>
                                    <td>${ g.brand }$</td>
                                    <td>${ g.inactive }$</td>
                                    <td>${ g.amount }$</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-3" >
            <div class="col" style="background-color: slategrey">
                <div class="row">
                    <div class="col">
                        <a href="{{ path('v2_gifts') }}">{% trans %}Δώρα{% endtrans %}</a>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <table class="table table-striped table-condensed table-dark justify-content-center">
                            <thead>
                                <tr>
                                    <th>{% trans %}ID{% endtrans %}</th>
                                    <th>{% trans %}SKU{% endtrans %}</th>
                                    <th>{% trans %}Barcode{% endtrans %}</th>
                                    <th>{% trans %}Περιγραφή{% endtrans %}</th>
                                    <th>{% trans %}Βrand{% endtrans %}</th>
                                    <th>{% trans %}Ανενεργό{% endtrans %}</th>
                                    <th>{% trans %}Ποσότητα{% endtrans %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(g,index) in this.gifts">
                                    <td>${ g.id }$</td>
                                    <td>${ g.sku }$</td>
                                    <td>${ g.barcode }$</td>
                                    <td>${ g.description }$</td>
                                    <td>${ g.brand }$</td>
                                    <td>${ g.inactive }$</td>
                                    <td>${ g.amount }$</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        var app = new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                indicator: 0,
                counterOrders: 0,
                counterOrdersDone: 0,
                counterOrdersRemaining: 0,
                counterOrdersMissing: 0,
                orderGroups: [],
                gifts: [],
                missing: [],
                debug: false,
                disableInput: false,
                pbmax: 100,
                pbgreen: 0,
                pbyellow: 0,
                pbred: 0
            },
            async mounted() {
                console.log("mounted");

                window.setInterval(() => {
                    this.getGroupOrders();
                }, 10000);
                await this.getGroupOrders();

                console.log("mounted returns");
            },
            watch: {
            },
            computed: {
            },
            methods: {
                getGroupOrders: async function () {
                    console.log("getGroupOrders");
                    this.disableInput = true;
                    await axios.get('{{ path('v2_api_group_get_info') }}').then(response => {
                        console.log(response);
                        this.counterOrders = response.data.counterOrders;
                        this.counterOrdersDone = response.data.counterOrdersDone;
                        this.counterOrdersRemaining = response.data.counterOrdersRemaining;
                        this.counterOrdersMissing = response.data.counterOrdersMissing;
                        this.orderGroups = response.data.orderGroups;
                        this.indicator = response.data.indicator;
                        this.missing = response.data.missing;
                        this.gifts = response.data.gifts;

                        this.pbgreen = 0;
                        this.pbyellow = 0;
                        this.pbred = 0;
                        if (response.data.indicator > 66) {
                            this.pbred = 33;
                            this.pbyellow = 33;
                            this.pbgreen = response.data.indicator - 66;
                        } else if (response.data.indicator > 33) {
                            this.pbred = 33;
                            this.pbyellow = response.data.indicator - 33;
                        } else {
                            this.pbred = response.data.indicator;
                        }

                        this.disableInput = false;
                    }).catch(error => {
                        this.disableInput = false;
                        console.log(error);
                        var errorMessage = "";
                        if (error.response) {
                            if (error.response.status === 400) {
                                errorMessage = error.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            errorMessage = ("Request ERROR: " + error.message);
                        } else {
                            errorMessage = ("ERROR: " + error.message);
                        }
                        alert(errorMessage);
                    });
                    console.log("getGroupOrders returns");
                },
                updateGroupOrders: async function () {
                    console.log("updateGroupOrders");
                    this.disableInput = true;
                    await axios.get('{{ path('v2_api_group_update') }}').then(response => {
                        console.log(response);
                        this.counterOrders = response.data.counterOrders;
                        this.counterOrdersDone = response.data.counterOrdersDone;
                        this.counterOrdersRemaining = response.data.counterOrdersRemaining;
                        this.counterOrdersMissing = response.data.counterOrdersMissing;
                        this.orderGroups = response.data.orderGroups;
                        this.indicator = response.data.indicator;
                        this.missing = response.data.missing;
                        this.gifts = response.data.gifts;

                        this.pbgreen = 0;
                        this.pbyellow = 0;
                        this.pbred = 0;
                        if (response.data.indicator > 66) {
                            this.pbred = 33;
                            this.pbyellow = 33;
                            this.pbgreen = response.data.indicator - 66;
                        } else if (response.data.indicator > 33) {
                            this.pbred = 33;
                            this.pbyellow = response.data.indicator - 33;
                        } else {
                            this.pbred = response.data.indicator;
                        }

                        this.disableInput = false;
                    }).catch(error => {
                        console.log(error);
                        this.disableInput = false;

                        var errorMessage = "";
                        if (error.response) {
                            if (error.response.status === 400) {
                                errorMessage = error.response.data.message;
                            } else {
                                errorMessage = ("Response ERROR: " + error.response.status);
                            }
                        } else if (error.request) {
                            errorMessage = ("Request ERROR: " + error.message);
                        } else {
                            errorMessage = ("ERROR: " + error.message);
                        }
                        //this.$bvModal.msgBoxOk(errorMessage);
                        alert(errorMessage);

                    });
                    console.log("updateGroupOrders returns");
                }
            }
        });
    </script>
{% endblock %}