{% extends 'simple.html.twig' %}
{% block title %}{% trans %}Εισαγωγή δεδομένων στην βάση{% endtrans %}{% endblock %}
{% block content %}
    <div id="app" class="container">
        <div class="row">
            <div class="col">
                <p class="h5 p-1 mt-2 mb-2 infoboxBlue">{% trans %}Εισαγωγή δεδομένων στην βάση{% endtrans %}</p>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <b-button variant="success" v-on:click="update('products')">
                    {% trans %}Update Products{% endtrans %}</b-button>
            </div>
            <div class="col">
                <b-button variant="success" v-on:click="update('shipping')">
                    {% trans %}Update Shipping{% endtrans %}</b-button>
            </div>
            <div class="col">
                <b-button variant="success" v-on:click="update('order')">
                    {% trans %}Update Orders{% endtrans %}</b-button>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <table class="table table-sm table-bordered table-condensed table-dark">
                    <tr v-for="(d,index) in debug">
                        <td>${ index }$.</td><td>${ d }$</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        var app = new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                disabled: false,
                debug: []
            },
            methods: {

                update: async function (id) {
                    this.debug = [];
                    this.disabled = true;
                    await axios.post('{{ path('test_api_update_db') }}', {
                        id: id
                    }).then(response => {
                        //alert(response.data);
                        this.debug = response.data;
                        console.log(response);
                    }).catch(function (error) {
                        console.log(error);
                    });
                    this.disabled = false;
                }
            }
        });
    </script>
{% endblock %}