{% 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-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>
                                    <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>
                                    <td>${ g.available }$</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <b-button variant="light" pill :disabled="disableInput" v-on:click="updateGifts">
                            {% trans %}Μείωση αποθέματος{% endtrans %}</b-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        var app = new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                gifts: [],
                data: null,
                disableInput: false
            },
            async mounted() {
                console.log("mounted");
                await this.getGifts();
                console.log("mounted returns");
            },
            watch: {
            },
            computed: {
            },
            methods: {
                getGifts: async function () {
                    console.log("getGroupOrders");
                    this.disableInput = true;
                    await axios.get('{{ path('v2_api_group_get_gifts') }}').then(response => {
                        console.log(response);
                        this.gifts = response.data.gifts;
                        this.data = response.data;
                        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");
                },
                updateGifts: async function () {
                    if(this.data === null) {
                        return;
                    }
                    
                    var confirmResult = null;
                    await this.$bvModal.msgBoxConfirm('Είσαστε σίγουροι;')
                            .then(value => {
                                confirmResult = value;
                            })
                            .catch(err => {
                                // An error occurred
                            });
                    if (true !== confirmResult) {
                        return;
                    }
                    
                    console.log("updateGroupOrders");
                    this.disableInput = true;
                    await axios.post('{{ path('v2_api_group_subtract_gifts') }}', this.data).then(response => {
                        console.log(response);
                        this.gifts = [];
                        this.data = null;
                        this.disableInput = true;
                        this.$bvModal.msgBoxOk("Έγινε μείωση αποθέματος");
                    }).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 %}