{% 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 marketing lista2">
    {% if app.user.role == "ROLE_USER" %}
      <a class="btn btn-info" href="#" data-target="#tutorialModal" data-toggle="modal">Tutorial</a>
      <a class="btn btn-warning" href="#" data-target="#misionsModal" data-toggle="modal">Misiones</a>
      <a class="btn btn-success" href="{{ path('list_user_badges') }}">Medallas</a>
    {% endif %}
        {% if app.user.role == 'ROLE_ADMIN' or  app.user.role == 'ROLE_TUTOR' %}
                <a class="btn competition-button-add btn-add competition-btn-add" data-toggle="modal" data-target="#competitionModal" href="#">Crear campaña<span class="competition-button-add-plus"><img src="{{asset('img/trivial-add-button.png')}}"></span></a>
                 {% endif %}                 

                        {% if not pagination|length %}
                          <div id="competition" class="fondo col-md-12 competition col-sm-12 col-xs-12">
                            <div class="col-xs-12 trivial trivial-empty-message" style="margin-bottom:10px">
                              <h2>No hay campañas disponibles</h2>
                            </div>
                        </div>
                        {% else %}

          {% set firstHR = 0 %}
          {% set secondHR = 0 %}

          {% for competition in pagination %}
          {% if loop.index == 1 %}
            <div style="padding-top:60px;"></div>
          {% endif %}
          {% if competition.createdby == app.user %}                
              {% if firstHR == 0 %}
                    <div class="competition-header">Tus campañas<hr class="competition-hr"></hr></div>
                    {% set firstHR = 1 %}
              {% endif %}

              {% if efecto != competition.id %}
                  <div  id="" 
                  {% if competition.finalizeAt|date("Y-m-d") < "now"|date('Y-m-d') %}
                    class="competition fondo col-md-12 competition col-sm-12 col-xs-12 grayscale"
                  {% else %}
                    class="competition fondo col-md-12 competition col-sm-12 col-xs-12"
                  {% endif %}
                  >
              {% else %}
              <div  id="competition-{{efecto}}" 
                    class="competition fondo col-md-12 competition col-sm-12 col-xs-12 greentrans"
                
                  >
              {% endif %}

              <div  id="competition" 
                {% if competition.beginAt|date("Y-m-d") > "now"|date('Y-m-d') and app.user.role == "ROLE_USER" %}
                  class="competition-box-none"
                {% else %}
                  class="competition-box"
                {% endif %}
                 data-competition="{{competition.id}}" data-competition-name="{{competition.name}}">
                  <div 
                 {% if (competition.finalizeAt|date("Y-m-d") >= "now"|date('Y-m-d') and competition.beginAt|date("Y-m-d") <= "now"|date('Y-m-d')) or (app.user.role != "ROLE_USER" and competition.beginAt|date("Y-m-d") > "now"|date('Y-m-d')) %}
                    class="accordion active"
                  {% elseif competition.beginAt|date("Y-m-d") <= "now"|date('Y-m-d') %}
                    class="accordion"
                  {% endif %}
                 ></div>
                   <div class="end-competition">
                    {% if competition.finalizeAt|date("Y-m-d") < "now"|date('Y-m-d') %}
                      <img src="{{ asset('img/end-seal.png') }}" height="100" width="auto" >
                    {% endif %}
                   </div>
                  <div 
                    {% if competition.beginAt|date("Y-m-d") > "now"|date('Y-m-d') and app.user.role == "ROLE_USER" %}
                      class="competition-info-noinit col-sm-6 col-sm-offset-3"
                    {% elseif app.user.role == 'ROLE_USER' %}
                      class="competition-info col-sm-6 col-sm-offset-3"
                    {% else %}
                      class="competition-info col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-2 "
                    {% endif %}
                  >
                    <div class="competition-header">{{competition.name}}</div>
                    {% if competition.finalizeAt|date("Y-m-d") < "now"|date('Y-m-d') %}
                      <div class="competition-dates countdown-off" data-date="{{competition.finalizeAt|date('Y-m-d 23:59:59')}}"></span></div>
                    {% elseif competition.beginAt|date("Y-m-d") > "now"|date('Y-m-d') %}
                      <div class="competition-dates">Inicia <span class="date-bold">{{competition.beginAt|date('d-m-Y')}}</span> - Finaliza <span class="date-bold">{{competition.finalizeAt|date('d-m-Y')}}</span></div>
                    {% else %}
                      <div class="competition-dates countdown-on" data-date="{{competition.finalizeAt|date('Y-m-d 23:59:59')}}"></span></div>
                    {% endif %}
                  </div>
                  {% if app.user.role == 'ROLE_ADMIN' or app.user.role == 'ROLE_TUTOR' %}
                    <div class="competition-actions col-sm-4 col-xs-12 col-sm-offset-0 ">
                      <div class="competition-edit gametool-xs-20"><a title="Editar {{competition.name}}" href="{{ path('competition_edit', {id: competition.id}) }}"><img src="{{asset('img/edit-competition.png')}}"></a></div>
                       <div class="competition-add-user gametool-xs-20"> <a title="Añadir usuarios {{competition.name}}" href="{{ path('competition_add_user', {id: competition.id}) }}" ><img src="{{asset('img/add-user-competition.png')}}"></a></div> 
                        <div class="competition-list-users gametool-xs-20"><a title="Ver usuarios {{competition.name}}" href="{{ path('competition_list_user', {id: competition.id}) }}"><img src="{{asset('img/list-users-competition.png')}}"></a> </div>
                        <div class="competition-document gametool-xs-20"><a title="Documentos {{competition.name}}" href="{{ path('competition_documents', {id: competition.trinders[0].id}) }}"><img src="{{asset('img/document-competition.png')}}"></a> </div>           
                      <div class="competition-delete gametool-xs-20"><a title="Eliminar {{competition.name}}" href="#"><img src="{{asset('img/delete-competition.png')}}"></a></div>                                                                   
                    </div>
                  {% elseif competition.competition.trinders[0].category|length > 0 and app.user.role == "ROLE_USER" %}
                    <div class="competition-actions competition-document col-sm-1 col-xs-12 pull-right"><a title="Documentos" href="{{ path('competition_documents', {id: competition.trinders[0].id}) }}"></a> </div>
                  {% endif %}
                   </div>
                <div id="competition-trivial" class="competition-trivial col-xs-12"  style="display:block;max-height: inherit;"
                  {% if competition.finalizeAt|date("Y-m-d") < "now"|date('Y-m-d') or competition.beginAt|date("Y-m-d") > "now"|date('Y-m-d') and app.user.role == "ROLE_USER" %}
                    style="display:none;"
                  {% else %}
                    style="display:block;max-height: inherit;"
                  {% endif %}

                >
           {% if app.user.role == "ROLE_USER" %}

                 {% if record[competition.id] is defined %}
                 {{ include ("Trivial/trinderCompetitionUser.html.twig", {competition: competition, message:'Estás seguro?', registro: record[competition.id], usersNotPlayed: usersNotPlayed[competition.id]}) }}
                 {% endif %}


        {% else %}
      {{ include ("Trivial/trinderCompetition.html.twig", {competition: competition, message:'Estás seguro?',id:"form-add", with_submit: false, deleteform_trivial_ajax: deleteTrinder, addform_trivial_ajax:addTrinder[competition.id]}) }}

        {% endif %}
    
    
                 </div>
           </div>              
          {% else %}
     
             {% if app.user.role != "ROLE_USER" %}              
                   {% if secondHR == 0 %}
                       <div class="competition-header">Otras campañas<hr class="competition-hr"></hr></div>
                      {% set secondHR = 1 %} 
                  {% endif %}
              {% endif %}

                 <div  id="competition" 
              {% if competition.finalizeAt|date("Y-m-d") < "now"|date('Y-m-d') %}
                class="fondo col-md-12 competition col-sm-12 col-xs-12 grayscale"
              {% else %}
                class="fondo col-md-12 competition col-sm-12 col-xs-12"
              {% endif %}
              > 
              <div  id="competition" 
                {% if competition.beginAt|date("Y-m-d") > "now"|date('Y-m-d') and app.user.role == "ROLE_USER" %}
                  class="competition-box-none"
                {% else %}
                  class="competition-box"
                {% endif %}
                 data-competition="{{competition.id}}" data-competition-name="{{competition.name}}">
                  <div 
                 {% if (competition.finalizeAt|date("Y-m-d") >= "now"|date('Y-m-d') and competition.beginAt|date("Y-m-d") <= "now"|date('Y-m-d')) or (app.user.role != "ROLE_USER" and competition.beginAt|date("Y-m-d") > "now"|date('Y-m-d')) %}
                    class="accordion active"
                  {% elseif competition.beginAt|date("Y-m-d") <= "now"|date('Y-m-d') %}
                    class="accordion"
                  {% endif %}
                 ></div>
                   <div class="end-competition">
                    {% if competition.finalizeAt|date("Y-m-d") < "now"|date('Y-m-d') %}
                      <img src="{{ asset('img/end-seal.png') }}" height="100" width="auto" >
                    {% endif %}
                   </div>
                  <div 
                    {% if competition.beginAt|date("Y-m-d") > "now"|date('Y-m-d') and app.user.role == "ROLE_USER" %}
                      class="competition-info-noinit col-sm-6 col-sm-offset-3"
                    {% elseif app.user.role == 'ROLE_USER' %}
                      class="competition-info col-sm-6 col-sm-offset-3"
                    {% else %}
                      class="competition-info col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-2 "
                    {% endif %}
                  >
                    <div class="competition-header">{{competition.name}}</div>
                    <div class="competition-dates">Creado por: <span class="date-bold">{{competition.createdby.userName}}</span></div>
                    {% if competition.finalizeAt|date("Y-m-d") < "now"|date('Y-m-d') %}
                      <div class="competition-dates countdown-off" data-date="{{competition.finalizeAt|date('Y-m-d 23:59:59')}}"></span></div>
                    {% elseif competition.beginAt|date("Y-m-d") > "now"|date('Y-m-d') %}
                      <div class="competition-dates">Inicia <span class="date-bold">{{competition.beginAt|date('d-m-Y')}}</span> - Finaliza <span class="date-bold">{{competition.finalizeAt|date('d-m-Y')}}</span></div>
                    {% else %}
                      <div class="competition-dates countdown-on" data-date="{{competition.finalizeAt|date('Y-m-d 23:59:59')}}"></span></div>
                    {% endif %}
                  </div>
                  {% if app.user.role == 'ROLE_ADMIN' or app.user.role == 'ROLE_TUTOR' %}
                    <div class="competition-actions col-sm-4 col-xs-12 col-sm-offset-0 ">
                      <div class="competition-edit gametool-xs-20"><a title="Editar {{competition.name}}" href="{{ path('competition_edit', {id: competition.id}) }}"><img src="{{asset('img/edit-competition.png')}}"></a></div>
                       <div class="competition-add-user gametool-xs-20"> <a title="Añadir usuarios {{competition.name}}" href="{{ path('competition_add_user', {id: competition.id}) }}" ><img src="{{asset('img/add-user-competition.png')}}"></a></div> 
                        <div class="competition-list-users gametool-xs-20"><a title="Ver usuarios {{competition.name}}" href="{{ path('competition_list_user', {id: competition.id}) }}"><img src="{{asset('img/list-users-competition.png')}}"></a> </div>
                        <div class="competition-document gametool-xs-20"><a title="Documentos {{competition.name}}" href="{{ path('competition_documents', {id: competition.id}) }}"><img src="{{asset('img/document-competition.png')}}"></a> </div>                     
                      <div class="competition-delete gametool-xs-20"><a title="Eliminar {{competition.name}}" href="#"><img src="{{asset('img/delete-competition.png')}}"></a></div>                                                                   
                    </div>
                  {% elseif app.user.role == "ROLE_USER"%}                    
                    {% if competition.trinders[0].category|length > 0 %}
                      <div class="competition-actions competition-document col-sm-1 col-xs-12 pull-right"><a title="Documentos" href="{{ path('competition_documents', {id: competition.trinders[0].id}) }}"><img src="{{asset('img/document-competition.png')}}"></a> </div>
                    {% endif %}
                  {% endif %}
                   </div>
                <div id="competition-trivial" class="competition-trivial col-xs-12" style="display:block;max-height: inherit;"
                  {% if competition.finalizeAt|date("Y-m-d") < "now"|date('Y-m-d') or competition.beginAt|date("Y-m-d") > "now"|date('Y-m-d') and app.user.role == "ROLE_USER" %}
                    style="display:none;"
                  {% else %}
                    style="display:block;max-height: inherit;"
                  {% endif %}

                >
           {% if app.user.role == "ROLE_USER" %}
            
                 {% if record[competition.id] is defined %}
                 {{ include ("Trivial/trinderCompetitionUser.html.twig", {competition: competition, registro: record[competition.id], usersNotPlayed: usersNotPlayed[competition.id]}) }}
                 {% endif %}


        {% else %}
      {{ include ("Trivial/trinderCompetition.html.twig", {competition: competition, message:'Estás seguro?',id:"form-add", with_submit: false, deleteform_trivial_ajax: deleteform_trivial_ajax, addform_trivial_ajax:addform_trivial_ajax[competition.id]}) }}

        {% endif %}
                 </div>
           </div>              
          {% endif %}            
              {% endfor %}
 {% endif %}

</div>
                
    {% if app.user.role == "ROLE_ADMIN" or app.user.role == "ROLE_TUTOR" %}            
      {{ include ('Clientes/forms/form.html.twig',{form: deleteform_ajax,message:'Estás seguro?',id:"form-delete-competition",with_submit:false}) }}
      {{ include ('Competition/forms/addCompetitionform.html.twig',{formComp: addform_ajax,message:'Estás seguro?',id:"form-add",with_submit:false}) }}
   {% endif %}
   {% if app.user.role == "ROLE_USER" %}
      {{ include('Usuarios/Mision/misions.html.twig') }}
      {{ include('Usuarios/Tutorial/tutorial.html.twig') }}
   {% endif %}
    {% endblock %}
    {% block javascripts %}
      {{parent()}}
      <script src="{{ asset('js/countdown.js') }}" ></script>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
      <script src="{{ asset('js/donut-chart.js') }}" ></script>
      <script src="{{ asset('js/competition-search.js') }}" ></script>
      <script src="{{ asset('js/competition-accordion.js') }}" ></script>
      <script src="{{ asset('js/competition-delete.js') }}" ></script>
      <script src="{{ asset('js/actions-links.js') }}" ></script>
      <script src="{{ asset('js/playGame_ok.js') }}" ></script>
      <script src="{{ asset('js/delete-trivial.js') }}" ></script>
      <script src="{{ asset('js/validateAddCompetitionForm.js') }}" ></script>
      <script src="{{ asset('js/downloadTrackingCompetition.js') }}" ></script>
      <script type="text/javascript">
            $(window).resize(function(){
                 createCharts();
            });



            $( document ).ready(function() {
                  var h = window.innerHeight/2;
                   var data1='{{ efecto }}';
                   if (data1 != 0){
                    document.getElementById("competition-"+data1).scrollIntoView({block: "end", behavior: "smooth"});

                    }

              });

      </script>


<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 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) {
    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 qr";
      /* Display Canvas and hide video stream */
      // qrCanvasElement.classList.remove("hidden");
      // video.classList.add("hidden");
      checkUrl(result);
    } catch(e) {
      /* 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("qr-button").innerHTML = "Ocultar qr";
    elem.style.display = "block"
    activateCam();
  } else {
    elem.style.display = "none"
    document.getElementById("qr-button").innerHTML = "Escanear qr";
    stopCam();
  }
}

function checkUrl(url){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
       alert(this.responseText);
      }
    };
    xhttp.open("POST", Routing.generate('qr_check_url'), true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("url="+url);
}

</script>

{% endblock %}