{% extends "base/base-back.html.twig" %}
{% block title %}Administrar productos | Cershop{% endblock %}
{% block metadescription %}Administrar productos{% endblock %}
{% block stylesheet %}
    {{ parent() }}
{% endblock %}

{% block titulo %}Administrar productos{% if is_granted('ROLE_COMMERCIAL') and distribuidor %} del distribuidor "{{ distribuidor.nombre }}"{% endif %}{% endblock %}
{% block contenido %}

<div class="container-fluid">
    {% if is_granted('ROLE_COMMERCIAL') and not distribuidor %}
    <div class="row">
        <div class="col">
            <div class="alert alert-info" role="alert">No estás vinculado a ningún distribuidor.</div>
        </div>
    </div>
    {% else %}
    <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" role="alert">
            </div>
        </div>
    </div>
    <div id="botones-empezar" class="row mt-4">
        <div class="col-md-6 col-xs-12">
            <a href="#" class="btn btn-primary btn-lg btn-block mt-2 mb-2" id="boton-agregar-producto">Agregar producto</a>
        </div>
        <div class="col-md-6 col-xs-12">
            <a href="#" class="btn btn-primary btn-lg btn-block mt-2 mb-2" id="boton-desvincular-producto">Desvincular producto</a>
        </div>
    </div>
    <div id="terminar-agregar" class="row mt-4" style="display:none;">
        <div class="col">
            <a href="#" class="btn btn-secondary btn-lg btn-block mt-2 mb-2" id="boton-terminar-agregar">Terminar de agregar productos</a>
        </div>
    </div>
    <div id="terminar-desvincular" class="row mt-4" style="display:none;">
        <div class="col">
            <a href="#" class="btn btn-secondary btn-lg btn-block mt-2 mb-2" id="boton-terminar-desvincular">Terminar de desvincular productos</a>
        </div>
    </div>
    <span id="cam-qr-result-timestamp" class="color-white" style="display:none;"></span>
    {% endif %}
</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');
    $('#fila-video').hide();
    $('#video').hide();
    var tipo = 0;
    
    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';

    function setResult(label, result) {
        if(result != 'No QR code found') {
            scanner.stop();
            $('#fila-video').hide();
            var elementos = result.split('p=');
            if(elementos.length == 2) {
                var slug = elementos[1];
            }
            else {
                var slug = elementos[0];
            }
            if(tipo == 1) {
                $.ajax({
                    url: '{{ (path('agregarVarianteDistribuidor')) }}',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        'slug': slug
                    },
                    async: true,
                    success: function (data)
                    {
                        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');
                        if(data.output == 'ok') {
                            $('#cam-qr-result').addClass('alert-success');
                            $('#avisos').show();
                            $('#cam-qr-result').html(data.error);
                        }
                        else {
                            $('#cam-qr-result').addClass('alert-danger');
                            $('#avisos').show();
                            $('#cam-qr-result').html(data.error);
                        }
                    }
                });
            }
            else if(tipo == 2) {
                $.ajax({
                    url: '{{ (path('desvincularVarianteDistribuidor')) }}',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        'slug': slug
                    },
                    async: true,
                    success: function (data)
                    {
                        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');
                        if(data.output == 'ok') {
                            $('#cam-qr-result').addClass('alert-success');
                            $('#avisos').show();
                            $('#cam-qr-result').html(data.error);
                        }
                        else {
                            $('#cam-qr-result').addClass('alert-danger');
                            $('#avisos').show();
                            $('#cam-qr-result').html(data.error);
                        }
                    }
                });
            }
            setTimeout(function() {
                if(tipo != 0) {
                    $('#avisos').hide();
                    $('#fila-video').show();
                    scanner.start();
                }
            }, 2000);
        }
    }
    
    document.getElementById('boton-agregar-producto').addEventListener('click', () => {
        tipo = 1;
        $('#botones-empezar').hide();
        $('#terminar-agregar').show();
        $('#fila-video').show();
        scanner.start();
    });
    
    document.getElementById('boton-desvincular-producto').addEventListener('click', () => {
        tipo = 2;
        $('#botones-empezar').hide();
        $('#terminar-desvincular').show();
        $('#fila-video').show();
        scanner.start();
    });
    
    document.getElementById('boton-terminar-agregar').addEventListener('click', () => {
        tipo = 0;
        $('#botones-empezar').show();
        $('#terminar-agregar').hide();
        $('#terminar-desvincular').hide();
        scanner.stop();
        $('#fila-video').hide();
    });
    
    document.getElementById('boton-terminar-desvincular').addEventListener('click', () => {
        tipo = 0;
        $('#botones-empezar').show();
        $('#terminar-agregar').hide();
        $('#terminar-desvincular').hide();
        scanner.stop();
        $('#fila-video').hide();
    });
</script>
{% endblock %}