{% extends 'simple.html.twig' %}
{% block content %}
    <div id="app" class="{{ containerClass }}">
        <div class="row">
            <div class="col">
                <p class="h5 p-1 mt-2 mb-2 infoboxBlue">{% trans %}UPH Report{% endtrans %}</p>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="infoboxGray p-3">
                    <div class="row">
                        <div class="col">
                            <b-form-datepicker id="from-datepicker" v-model="fromValue" class="mb-2"></b-form-datepicker>
                        </div>  
                        <div class="col">
                            <b-form-datepicker id="to-datepicker" v-model="toValue" class="mb-2"></b-form-datepicker>
                        </div>  
                        <div class="col">
                            <b-button variant="primary" v-on:click="okClicked">{% trans %}Εξαγωγή{% endtrans %}</b-button>
                        </div>  
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
        new Vue({
            delimiters: ['${', '}$'],
            el: '#app',
            data: {
                fromValue: '',
                toValue: ''
            },
            async mounted() {
            },
            computed: {
            },
            watch: {
            },
            methods: {

                okClicked: function () {
                    axios.post('{{ path('uph_report_csv') }}', {
                        fromValue: this.fromValue,
                        toValue: this.toValue
                    }, {
                        responseType: 'blob'
                    }).then(response => {
                        //console.log(response.data);
                        //this.content = response.data;
                        var fileURL = window.URL.createObjectURL(new Blob([response.data]));
                        var fileLink = document.createElement('a');

                        fileLink.href = fileURL;
                        fileLink.setAttribute('download', 'uph_report.csv');
                        document.body.appendChild(fileLink);

                        fileLink.click();
                    });
                }
            }
        }
        );
    </script>
{% endblock %}