{% 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">
            <div class="col">
                <div class="infoboxGray p-3">
                    <div class="row">
                        <div class="col">
                            αριθμός παραγγελιών: <b-form-input v-model="amount" placeholder="αριθμός παραγγελιών"></b-form-input>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            min sku: <b-form-input v-model="minsku" placeholder="min sku"></b-form-input>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            max sku: <b-form-input v-model="maxsku" placeholder="max sku"></b-form-input>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            min items per sku: <b-form-input v-model="minamount" placeholder="min items per sku"></b-form-input>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            max items per sku: <b-form-input v-model="maxamount" placeholder="max items per sku"></b-form-input>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            RNG seed: <b-form-input v-model="seed" placeholder="seed"></b-form-input>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <b-button variant="primary" v-on:click="createOrders">{% trans %}OK{% endtrans %}</b-button>
                        </div>
                    </div>
                </div>        
            </div>
        </div>
    </div>
{% endblock %}

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

                amount: 1,
                minsku: 1,
                maxsku: 1,
                minamount: 1,
                maxamount: 1,
                seed: 0
            },
            methods: {
                createOrders: async function () {
                    var e;
                    await axios.post('{{ path('test_api_create_orders') }}', {
                        amount: this.amount,
                        minsku: this.minsku,
                        maxsku: this.maxsku,
                        minamount: this.minamount,
                        maxamount: this.maxamount,
                        seed: this.seed
                    }).then(response => {
                        alert(response.data);
                        console.log(response);
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        });
    </script>
{% endblock %}