{% 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/document.css') }}" media="screen" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
  {{ parent() }}
    <div class="container" style="max-width:500px">
{#         <div class="col-xs-12 tab no-padd">
            <button class="tablinks active col-xs-6 no-padd" onclick="changeLabel(event, 'Video')">Vídeos</button>
          <button class="tablinks col-xs-6 no-padd" onclick="changeLabel(event, 'Documento')">Documentos</button>
          </div> #}
{# 
        <div id="Video" class="mision col-xs-12 tabcontent">
            <div class="grid-container">
            {% set total = 0 %}
            {% set correct = 0 %}
            {% set trivialnc = 0 %}
            {% set trivialok = 0  %}
            {% set trivialko =  0 %}
            {% set tindernc = 0  %}
            {% set tinderok =  0  %}
            {% set tinderko =  0  %}
            {% for document in documentsCategory %}
              
              <div id="{{document.name}}" class="item inner-item-{{loop.index}}">
                   <div class="inner-item">
                        <span class="video-name">{{document.name}}</span>
                    </div>
                </div>
                  <div class="containerTab desc {{document.name}} hidden-item-{{loop.index}}" style="display:none; ">   

                  <div class="col-xs-12"><span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span></div> 
                              {% if document.type != "DOCUMENTO" %}
                                                      <div class="col-xs-12 col-sm-6 col-md-4" style="padding:15px !important;">
                                                        <div class="col-xs-12"><h4 class="white bold">{{document.name}}</h4>
                                                          {% for aba in answersByArea %}
                                                            {% if aba['areaId'] == area.id %}
                                                            {% set total = aba['noAnswersTrivial'] + aba['correctAnswersTrivial'] + aba['wrongAnswersTrivial'] + aba['noAnswersTinder'] + aba['correctAnswersTinder'] + aba['wrongAnswersTinder'] %}
                                                            {% set correct = aba['correctAnswersTrivial'] + aba['correctAnswersTinder'] %}
                                                            {% set trivialnc = aba['noAnswersTrivial'] %}
                                                            {% set trivialok = aba['correctAnswersTrivial'] %}
                                                            {% set trivialko = aba['wrongAnswersTrivial'] %}
                                                            {% set tindernc = aba['noAnswersTinder'] %}
                                                            {% set tinderok = aba['correctAnswersTinder'] %}
                                                            {% set tinderko = aba['wrongAnswersTinder'] %}


                                                            {% endif %}
                                                          {% endfor %}
                                                        </div>
                                                        <div style="height:230px;" data-trivialnc="{{trivialnc}}" data-trivialok="{{trivialok}}" data-trivialko="{{trivialko}}" data-tindernc="{{tindernc}}" data-tinderok="{{tinderok}}" data-tinderko="{{tinderko}}" data-name="{{document.name}}" data-url="{{document.url}}" data-id="{{document.id}}" class="thumb" {% for dus in documentUserStatus|filter(dus => document.id == dus['documentId']) %}data-claimed="{{dus['status']}}"{% endfor %}>
                                                          <img style="width:100%; max-width:303px;" src="{{ asset('documents/thumbnails/'~document.thumbnail) }}" id="{{document.url}}"  src="">

                                                          <div class="row-flex">
                                                           <div class="chart" data-total="{{ total }}" value="{{ correct }}"></div>
                                                           <span class="video-name">MATCH</span>

                                                          </div>  
                                                                 


                                                       </div>

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

            {% endfor %}
             </div>
        </div> #}
          {% for document in documentsCategory %}
            <div class="document-content">
              <div><img src="{{asset('img/document.png')}}" width="50"></div>
              <div>
                <div class="name">{{document.name|trans}}</div>
                <div class="description">{{document.description}}</div>
              </div>
              <div class="see-btn">
                <a href="{{ path('download_route', {id: document.id }) }}">
                  <div><img src="{{asset('img/view-document.png')}}" width="50"></div>
                  <div>{% trans %}VIEW{% endtrans %}</div>
                </a>
              </div>
            </div>
            {% if loop.last == FALSE %}
              <hr style="border-top: dotted 1px #fff;" />
            {% endif %}
          {% endfor %}  
    </div>
{# <div class="modal fade col-xs-12" id="videoModal"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
      <div class="modal-dialog">
      <div class="mymodal-content col-xs-12"> 
         <div class="head col-xs-12">    

          <img class="closeModalVideo" src="{{asset('img/cerrar_2.png')}}"> 
          <h2 id="name" class="name-size"></h2>
        </div>
          <iframe id="{{document.id}}" class="iframevideo" onclick=""  src="{{document.url}}?api=1&player_id={{document.id}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          <div class="col-xs-6">
           <h4 class="bold size-font-title">OPCIÓN ÚNICA<img class="iconmodal" src="{{ asset('img/videomodal.png') }}"></h4>  
           <div class="col-xs-10 nopad">
           <p>N.C</p>
           <p>CORRECTAS</p>
           <p>ERRÓNEAS</p>
         </div>
          <div class="col-xs-2 nopad">
           <p id="trivialnc" class="white bigger-font"></p>
           <p id="trivialok" class="blue bigger-font"></p>
           <p id="trivialko" class="red bigger-font"></p>
         </div>
       </div>
       <div class="col-xs-6">
           <h4 class="bold size-font-title">VERDADERO / FALSO<img class="iconmodal" src="{{ asset('img/videomodal.png') }}"></h4>  
           <div class="col-xs-10 nopad">
           <p>N.C</p>
           <p>CORRECTAS</p>
           <p>ERRÓNEAS</p>
         </div>
          <div class="col-xs-2 nopad">
           <p id="tindernc" class="white bigger-font"></p>
           <p id="tinderok" class="blue bigger-font"></p>
           <p id="tinderko" class="red bigger-font"></p>
         </div>
       </div>
       <div class="col-xs-12" style="text-align:center">
          <h4 class="bold">VISTO <img src="{{ asset('img/preview.png') }}"></h4>
          <div id="claimBtn" data-toggle="tooltip" data-placement="top" class="btn">100<img src="{{ asset('img/whitestar.png') }}" style="max-width:50px;"></div>
        </div>
          <div class="col-xs-2 tcent"> <h4 class="bold">VISTO</h4></div>
    </div>

</div>
</div>  #}      

{{ include('Document/Tutorial/tutoDocument.html.twig') }}
         

{% endblock %}
{% block javascripts %}
  {{ parent() }}
  <script src="{{ asset('js/progressbar.js') }}" ></script>
  <!--<script src="https://player.vimeo.com/api/player.js"></script>-->
  <script type="text/javascript">


// $(document).ready(function(){
//    $(".thumb").click(function(){ // Click to only happen on announce links
//      $("iframe").attr('id',$(this).data('id'));
//      $("iframe").attr('src',$(this).data('url')+"?api=1&player_id="+$(this).data('id'));
//      $("#name").text($(this).data('name'));
//      $("#trivialnc").text($(this).data('trivialnc'));
//      $("#trivialok").text($(this).data('trivialok'));
//      $("#trivialko").text($(this).data('trivialko'));
//      $("#tindernc").text($(this).data('tindernc'));
//      $("#tinderok").text($(this).data('tinderok'));
//      $("#tinderko").text($(this).data('tinderko'));
//      $('#claimBtn').removeClass('disabled');
//      $('#claimBtn').removeClass('claim');
//      $('#claimBtn').removeClass('success');
//      $('#claimBtn').attr('onclick','');
//      $('#claimBtn').attr('data-original-title','');
//      var btnHtml = "{{ asset('img/whitestar.png') }}";
//      $('#claimBtn').html('100<img src="'+btnHtml+'">');
//      if($(this).data('claimed') == 0){
//       $('#claimBtn').attr('data-original-title','Mira el vídeo para reclamar los puntos');
//       $('#claimBtn').addClass('disabled');
//      } else if ($(this).data('claimed') == 1){
//       $('#claimBtn').attr('onclick','claimReward(this,'+$(this).data('id')+');');
//       $('#claimBtn').addClass('claim');
//      } else {
//       $('#claimBtn').addClass('disabled');
//       $('#claimBtn').addClass('success');
//       $('#claimBtn').text('RECLAMADO');
//      }
//      $('#videoModal').modal('show');

//    });
// });

// $('#videoModal').on('hidden.bs.modal', function(){
//   $("iframe").attr('src','');
// });

// $(document).ready(function(){


//       $('.item').on('click', function(e) {

//           var x = document.getElementsByClassName("containerTab");
//           var z = document.getElementsByClassName("item");
//           for (i = 0; i < z.length; i++) {
//              $(z[i]).removeClass("activeDoc");
//            }
//           for (i = 0; i < x.length; i++) {
//               x[i].style.display = "none";
//            }

//            var $div = $(e.target).closest('div[class^="item"]');
//            var $div2 = $(e.target).closest('div[class^="progressbar-text"]');

//            var id = $div.attr('id');
//            var y = document.getElementsByClassName(id);
//             y[0].style.display="block";
//            // document.getElementById($id).style.display = "block";
//             $($div).addClass("activeDoc");
      


//       });
// });    

//     function changeLabel(evt, type) {
//       var i, tabcontent, tablinks;
//       tabcontent = document.getElementsByClassName("tabcontent");
//       for (i = 0; i < tabcontent.length; i++) {
//         tabcontent[i].style.display = "none";
//       }
//       tablinks = document.getElementsByClassName("tablinks");
//       for (i = 0; i < tablinks.length; i++) {
//         tablinks[i].className = tablinks[i].className.replace(" active", "");
//       }
//       document.getElementById(type).style.display = "block";
//       evt.currentTarget.className += " active";
//     }

//     $(document).ready(function(){
//       $('.chart').each(function() {
//         var total = $(this).data('total');
//         if(total){
//           var bar = new ProgressBar.Circle(this, {
//           color: '#aaa',
//           // This has to be the same size as the maximum width to
//           // prevent clipping
//           strokeWidth: 6,
//           trailWidth: 6,
//           easing: 'easeInOut',
//           duration: 0,
//           trailColor: '#fff',
//           trailWidth: 6,
//           text: {
//             autoStyleContainer: false
//           },
//           from: { color: '#F22836', width: 6 },
//           to: { color: '#F22836', width: 6 },
//           // Set default step function for all animate calls
//           step: function(state, circle) {
//             circle.path.setAttribute('stroke', state.color);
//             circle.path.setAttribute('stroke-width', state.width);
//             var value = Math.round(circle.value() * 100 );
//             if (value === 0) {
//               circle.setText('0%');
//             } else {
//               circle.setText(value+"%");
//             }
//           }
//         });
//         bar.text.style.fontSize = '20px';
//         bar.text.style.color = "#34495E";

//         var val = ($(this).attr('value') / total);
//         bar.animate(val);  // Number from 0.0 to 1.0
//       }
//     });

//       function vimeoPost(action, value, target) {
//         var data = { method: action };
//         if (value) {
//           data.value = value;
//         }
//         target.contentWindow.postMessage(JSON.stringify(data), '*');
//       };
// var progress = 0;
//       /* When a message is received, deal with it */
//       window.addEventListener('message', function(event) {
//         /* Get message and sender from the event */
//         var message = JSON.parse(event.data);
//         var sender = document.getElementById(message.player_id);

//         /* If the message.event is "ready", then send a message to add eventlisteners for play and pause also */
//         if(message.event == "ready") {
//           vimeoPost('addEventListener','play',sender);
//           vimeoPost('addEventListener','pause',sender);
//           vimeoPost('addEventListener','timeupdate',sender);         
//         }
//         if(message.event == 'play' && message.data.percent < 0.5){
//           progress = 1;
//         }

//         if(message.event == 'play' && message.data.seconds == 0) {      
//           var xhttp = new XMLHttpRequest();
//             xhttp.onreadystatechange = function() {
//               if (this.readyState == 4 && this.status == 200) {
//                 data = JSON.parse(this.responseText);
//                 if(data.status == 1 && data.badge.name){
//                   showBadgeModal(data.badge.name, data.badge.lvl, data.badge.description, data.badge.reward);
//                 }
//               }
//             };
//             xhttp.open("POST", Routing.generate('user_seen_document'), true);
//             xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//             xhttp.send("id="+message.player_id);  
//         }
//         if(progress && message.event == 'playProgress' && (message.data.percent && message.data.percent >= 0.5)) {   
//           progress = 0;   
//           var xhttp = new XMLHttpRequest();
//             xhttp.onreadystatechange = function() {
//               if (this.readyState == 4 && this.status == 200) {
//                 data = JSON.parse(this.responseText);
//                 if(data.status == 1 ){
//                  var btn = document.getElementById('claimBtn');
//                  btn.setAttribute('data-original-title','');
//                  btn.classList.remove('disabled');
//                  btn.classList.add('claim');
//                  btn.setAttribute('onclick', 'claimReward(this,'+message.player_id+');');
//                  $('div[data-id="'+message.player_id+'"]').data('claimed', 1);
//                 }
//               }
//             };
//             xhttp.open("POST", Routing.generate('unlock_reward_button'), true);
//             xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//             xhttp.send("id="+message.player_id);  
//         }
       
        
//       }, false);
//   });

//     function claimReward(elem,id){
//       elem.setAttribute('onclick','');
//       elem.classList.add('disabled');
//       var xhttp = new XMLHttpRequest();
//         xhttp.onreadystatechange = function() {
//           if (this.readyState == 4 && this.status == 200) {
//             data = JSON.parse(this.responseText);
//             if(data.status == 0 ){
//               elem.setAttribute('onclick','claimReward(this,'+id+')');
//               elem.classList.remove('disabled');
//               alert('Ha ocurrido un error, vuelve a intentarlo más tarde');
//             } else if (data.status==1){
//               $('#self-points-reward').text(100);
//               showSelfModal();
//               elem.classList.add('success');
//               elem.innerHTML = 'RECLAMADO'; 
//               $('div[data-id="'+id+'"]').data('claimed', 2);
//             }
//           }
//         };
//       xhttp.open("POST", Routing.generate('claim_reward'), true);
//       xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//       xhttp.send("id="+id);  
//     }
{% if visited == 0 %}
  $(document).ready(function(){
    $('#tutoDocument').modal('show');
  });
{% endif %}
    </script>

 
    
{% endblock %}