{% extends "base/base-front-body.html.twig" %}
{% block title %}{% trans into locale %}Scan{% endtrans %} | Cershop{% endblock %}
{% block metadescription %}{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block bodyclass %}{{ parent() }}{% endblock %}
{% block contenido %}
<div class="page-content">
    <div class="container">
        <div class="row align-items-center pt-10 pb-10">
            <div class="col-md-3"></div>
            <div class="col-md-6 text-center">
                <img src="{{ asset('assets/global/images/logo.png') }}" class="mb-8" alt="Logo Cershop" width="250" height="auto" />
                <p><b><span id="aviso-tienda">{% trans into locale %}To get started, scan the QR of the shop.{% endtrans %}</span></b></p>
                <div id="fila-video" class="row">
                    <div class="col text-center">
                        <div id="video" class="embed-responsive embed-responsive-16by9">
                            <video id="qr-video" class="embed-responsive-item" allowfullscreen></video>
                        </div>
                        <label style="max-width:100 !important;overflow: hidden !important;">
                            <input id="show-scan-region" type="hidden">
                        </label>
                    </div>
                </div>
                <div id="avisos" class="row" style="display:none;">
                    <div class="col">
                        <div id="cam-qr-result" class="alert text-center mt-4 color-white" role="alert">
                        </div>
                    </div>
                </div>
                <a class="btn btn-primary mt-2" href="{{ path('cuentaVisitasTiendas') }}">{% trans into locale %}End{% endtrans %}</a>
            </div>
            <div class="col-md-3"></div>
        </div>
        <div class="row">
            <div class="col">
                <h5 class="text-center">{% trans into locale %}Scanned pieces{% endtrans %}</h5>
            </div>
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th width="80%">{% trans into locale %}Name{% endtrans %}</th>
                                <th width="20%">{% trans into locale %}Scan time{% endtrans %}</th>
                            </tr>
                        </thead>
                        <tbody id="scan-table">
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
{{ parent() }}
<script type="module">
    import QrScanner from '/assets/back/js/qr-scanner/qr-scanner.min.js';
    QrScanner.WORKER_PATH = '/assets/back/js/qr-scanner/qr-scanner-worker.min.js';
    const video = document.getElementById('qr-video');
    const camQrResult = document.getElementById('cam-qr-result');
    const camQrResultTimestamp = document.getElementById('cam-qr-result-timestamp');
    $('#video').hide();
    
    const scanner = new QrScanner(video, result => setResult(camQrResult, result), error => {
    });
    const label = document.getElementById('show-scan-region');
    label.parentNode.insertBefore(scanner.$canvas, label.nextSibling);
    scanner.$canvas.style.display = 'block';
    scanner.start();

    function setResult(label, result) {
        if(result != 'No QR code found') {
            scanner.stop();
            $('#fila-video').hide();
            var media = new Audio('{{ asset('assets/back/audio/camera-flash.mp3') }}');
            media.play();
            $('#cam-qr-result').removeClass('alert-success');
            $('#cam-qr-result').removeClass('alert-danger');
            
            var elementos = result.split('p=');
            
            if(elementos.length == 2) { //es un producto
                var slug = elementos[1];
                
                $.ajax({
                    url: '{{ (path('asociarProductoVisita')) }}',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        'locale': '{{ locale }}',
                        'slug': slug,
                    },
                    async: true,
                    success: function (data)
                    {
                        if(data.output == 'ok') {
                            $('#cam-qr-result').addClass('alert-success');
                            $('#avisos').show();
                            $('#cam-qr-result').html(data.message);
                            $('#scan-table').prepend('<tr><td><a href="'+data.enlace+'" target="_blank">'+data.nombre+'</a></td><td>'+data.fecha+'</td></tr>');
                        }
                        else {
                            $('#cam-qr-result').addClass('alert-danger');
                            $('#avisos').show();
                            $('#cam-qr-result').html(data.message);
                        }
                    }
                });
            }
            else {
                var elementos = result.split('d=');

                if(elementos.length == 2) { //es un distribuidor
                    var referencia = elementos[1];

                    $.ajax({
                        url: '{{ (path('iniciarVisita')) }}',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            'locale': '{{ locale }}',
                            'referencia': referencia,
                        },
                        async: true,
                        success: function (data)
                        {
                            if(data.output == 'ok') {
                                $('#cam-qr-result').addClass('alert-success');
                                $('#avisos').show();
                                $('#cam-qr-result').html(data.message);
                                $('#aviso-tienda').html(data.message2);
                            }
                            else {
                                $('#cam-qr-result').addClass('alert-danger');
                                $('#avisos').show();
                                $('#cam-qr-result').html(data.message);
                            }
                        }
                    });
                }
                else {
                    var elementos = result.split('t=');

                    if(elementos.length == 2) { //es un totem
                        var referencia = elementos[1];
                        var socket;
                        {% if 'cershop.local' not in app.request.uri %}
                            var host = "wss://{{ dominio }}:{{ puerto_websockets }}";
                        {% else %}
                            var host = "ws://localhost:8000";
                        {% endif %}
                        try {
                            socket = new WebSocket(host);
                            socket.onopen = function(msg) {
                                console.log('Abierto: '+msg);
                                socket.send('ut={{ slug }}='+referencia);
                                //socket.close();
                                //socket = null;
                                $('#cam-qr-result').addClass('alert-success');
                                $('#avisos').show();
                                $('#cam-qr-result').html('{% trans into locale %}Synchronised with the totem correctly.{% endtrans %}');
                            };
                            socket.onmessage = function(msg) {
                                console.log('Mensaje: '+msg.data);
                            };
                            socket.onclose = function(msg) {
                                console.log('Cerrado: '+msg);
                            };
                        }
                        catch (ex) {
                            console.log(ex);
                        }
                    }
                    else {
                        $('#cam-qr-result').addClass('alert-danger');
                        $('#avisos').show();
                        $('#cam-qr-result').html('{% trans into locale %}Error when scanning QR code.{% endtrans %}');
                    }
                }
            }
            setTimeout(function() {
                $('#avisos').hide();
                $('#fila-video').show();
                scanner.start();
            }, 5000);
        }
    }
</script>
{% endblock %}