{% extends 'dashboard/base.html.twig' %}

{% block body %}
    <div class="page-title">
        <h3>Scanner</h3>
    </div>
    <div id="scanner-container" class="d-flex justify-content-center">
        <div class="card" style="width: 500px;max-width: 100%;">
            <div class="card-body">
                <qrcode-stream v-if="status === 'new'" @decode="onDecode">
                </qrcode-stream>
                <p v-if="message" class="alert alert-info">
                    {{'{{ message }}'}}
                </p>
                <p v-if="errors" class="alert alert-danger">
                    {{'{{ errors }}'}}
                </p>
                <div v-if="status !== 'new'">
                    <button class="btn btn-primary btn-block w-100" @click="clear">Nouveau Scanner</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ absolute_url(asset('js/vue.js')) }}"></script>
    <script src="{{ absolute_url(asset('js/VueQrcodeReader.umd.js')) }}"></script>
    <script>
        $(function () {
            var QrcodeStream = VueQrcodeReader.QrcodeStream
            var insForm = new Vue({
                el: '#scanner-container',
                components: {
                    QrcodeStream
                },
                data: {
                    status: 'new',
                    message: null,
                    errors: null
                },
                mounted() {
                    this.$nextTick(function () {
                        //$(this.$el).show();
                    });
                },
                methods:{
                    onDecode(qrCode) {
                        var my = this;
                        $.ajax({
                            url: '{{ url('api_scoring') }}',
                            data : {
                                demandID : qrCode
                            },
                            type: "POST",
                            success : function (data) {
                                my.status = 'valid';
                                let domand = data.domand;
                                if (domand) {
                                    my.message = 'Utilisateur vérifié'
                                }
                            },
                            error: function (xhr, ajaxOptions, thrownError) {
                                my.status = 'error';
                                my.errors = thrownError;
                            }
                        });
                    },
                    clear() {
                        this.status = 'new';
                        this.message = null;
                        this.errors = null;
                    }
                }
            });
        });
    </script>
{% endblock %}