{% extends 'layout.html.twig' %}
{% block stylesheets %}
  {{parent()}}
  <link href="{{ asset('css/competition.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/trivial.css') }}" media="screen" rel="stylesheet" type="text/css">
  <link href="{{ asset('css/tutorial.css') }}" media="screen" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
{{ parent() }}
  <div class="container"> 


            {# LISTADO MISIONES  #}
        
        <div class="mision col-xs-12">
          {% for mu in app.user.usersMisionReferences %}
            <div class="col-xs-3" style="margin-top:10px;padding:10px;">
              {% if mu.completed %}
                <img class=" " src="{{ asset('img/qrok.png') }}"/>
              {% else %}
                <img id="qr-{{mu.id}}" src="{{ asset('img/qrnook.png') }}"/>
              {% endif %}
              {# <div class="col-xs-12 no-padd" style="font-size:18px;padding-bottom:10px">{{mu.mision.name}}</div> #}
              <div class="col-xs-12">
                {# {{mu.mision.description}} #}
              </div>
            </div>
          {% endfor %}
        </div>

  <div class="mision col-xs-12">
                <h3 class="red bold"><img class=" mision-img" src="{{ asset('img/qricon.png') }}"/></h3>
  </div>
    {# VIDEO #} 

     <div id="cam" class="mision col-xs-12">
                 <img class="mision-img" src="{{ asset('img/camara.png') }}"/>
      </div>

        <div id="qr-container" class="col-xs-12 mision" style="display:none">
           <div class="video-container">
             <video id="video-preview" style="max-width:90%"></video>
             <canvas id="qr-canvas" class="hidden"></canvas>
           </div>
        </div>
      <div class="mision col-xs-12">
           <h4 class="black" style="padding-top:20px;">{% trans %}Bring this Reader to the QR of the poster to unlock its content in the Pepe Pills section.{% endtrans %}
</h4>
        </div>
           
        {# BOTON ESCANEO #}
        <div class="col-xs-12" style="margin-top:20px;text-align:center"><a id="qr-button" href="#" class="mision-btn" onclick="scanQr();">{% trans %}SCAN{% endtrans %}</a></div>
  

    {{ include('Usuarios/Tutorial/tutoQr.html.twig') }}




  {% endblock %}
    {% block javascripts %}
      {{parent()}}
      <script type="text/javascript" src="{{ asset('js/grid.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/version.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/detector.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/formatinf.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/errorlevel.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/bitmat.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/datablock.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/bmparser.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/datamask.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/rsdecoder.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/gf256poly.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/gf256.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/decoder.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/qrcode.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/findpat.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/alignpat.js') }}"></script>
      <script type="text/javascript" src="{{ asset('js/databr.js') }}"></script>

<script type="text/javascript">
function holi(){
  alert("asd");
}

function activateCam() {
  /* Ask for "environnement" (rear) camera if available (mobile), will fallback to only available otherwise (desktop).
   * User will be prompted if (s)he allows camera to be started */
  navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }, audio: false }).then(function(stream) {
    var video = document.getElementById("video-preview");
    video.srcObject = stream;
    video.setAttribute("playsinline", true); /* otherwise iOS safari starts fullscreen */
    video.play();
    setTimeout(tick, 100); /* We launch the tick function 100ms later (see next step) */
  })
  .catch(function(err) {
        // alert("Utiliza chrome o firefox, si estás en un dispositivo iphone usa safari.")

    console.log(err); /* User probably refused to grant access*/
  });
};


function tick() {
  var video                   = document.getElementById("video-preview");
  var qrCanvasElement         = document.getElementById("qr-canvas");
  var qrCanvas                = qrCanvasElement.getContext("2d");
  var width, height;

  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    qrCanvasElement.height  = video.videoHeight;
    qrCanvasElement.width   = video.videoWidth;
    qrCanvas.drawImage(video, 0, 0, qrCanvasElement.width, qrCanvasElement.height);
    try {
      var result = qrcode.decode();
      // console.log(result)
      // window.open(result,'_blank');
      /* Video can now be stopped */
      video.pause();
      video.src = "";
      video.srcObject.getVideoTracks().forEach(track => track.stop());
      document.getElementById('qr-container').style.display = "none";
      document.getElementById("qr-button").innerHTML = "ESCANEAR";
      /* Display Canvas and hide video stream */
      // qrCanvasElement.classList.remove("hidden");
      // video.classList.add("hidden");
      checkUrl(result);
    } catch(e) {
          // alert("Utiliza chrome o firefox, si estás en un dispositivo iphone usa safari.")

      /* No Op */
    }
  }

  /* If no QR could be decoded from image copied in canvas */
  if (!video.classList.contains("hidden"))
    setTimeout(tick, 100);
}

function stopCam(){
    var video = document.getElementById("video-preview");
    video.pause();
    video.src = "";
    video.srcObject.getVideoTracks().forEach(track => track.stop());
}

function scanQr(){
  var elem = document.getElementById('qr-container');
  if(elem.style.display == "none"){
    document.getElementById("cam").style.display="none";
    document.getElementById("qr-button").innerHTML = "OCULTAR";
    elem.style.display = "block"
    activateCam();
  } else {
    elem.style.display = "none"
    document.getElementById("cam").style.display="block";
    document.getElementById("qr-button").innerHTML = "ESCANEAR";
    stopCam();
  }
}

function checkUrl(url){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var data = JSON.parse(this.responseText);
        console.log(data);
        if(data.status == 1){
            $('#self-points-reward').text(100);
            showSelfModal();
              document.getElementById(data.qr).src = document.getElementById(data.qr).src.replace('qrnook', 'qrok');
              if(data.badge.length == 2){
                showBadgeModal(data.badge[0].name, data.badge[0].lvl, data.badge[0].description, data.badge[0].reward,1);
                showBadgeModal(data.badge[1].name, data.badge[1].lvl, data.badge[1].description, data.badge[1].reward, 2, false);
              } else if (data.badge.length == 1) {
                showBadgeModal(data.badge[0][0].name, data.badge[0][0].lvl, data.badge[0][0].description, data.badge[0][0].reward);
              }
        }else if (data.status == 0){
          alert("Este QR no pertenece a Pepe Pills");
        }else{
          alert("Este QR ya ha sido escaneado anteriormente");
        }
        document.getElementById('qr-container').style.display = "none";
        document.getElementById("cam").style.display="block";
        document.getElementById("qr-button").innerHTML = "ESCANEAR";
      }
    };
    xhttp.open("POST", Routing.generate('qr_check_url'), true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("url="+url);
}

{% if visited == 0 %}
  $(document).ready(function(){
    $('#tutoQr').modal('show');
  });
{% endif %}

</script>

{% endblock %}