{% 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">
    		<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 dc in documentsCategory %}
              {# esto esta mal #}
               {#  {% for dc in documentsCategory %}
                  {% set correctAnswers = 0 %}
                    {% for question in dc.questions %}
                     {% set break = false %}
                       {% for tracking in question.tracking if not break %}
                         {% if tracking.status %}
                           {% set correctAnswers = correctAnswers + 1 %}
                            {% set break = true %}
                         {% endif %}
                    {% endfor %}
                {% endfor %} #}
              
              <div id="{{dc.name}}" class="item">
                   <div class="inner-item">
                        <span class="video-name">{{dc.name}}</span>
                     {#    <div class="row-flex">
                        <div class=" chart" data-total="{{dc.questions|length}}" value="{{correctAnswers}}"></div>
                        <span class="video-name">MATCH</span>
                        </div>  
                 #}
                    </div>
                </div>
                  <div class="containerTab desc {{dc.name}}" style="display:none; ">   

                  {# <div class="col-xs-12"><span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span></div> #} 
                      {% for area in dc.areas %}
                        {% for document in area.documents %} 
                              {% 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 %}
                                                              {# <br>
                                                              Trivial - No contestadas: {{aba['noAnswersTrivial']}} / Correctas: {{aba['correctAnswersTrivial']}} / Incorrectas: {{aba['wrongAnswersTrivial']}}
                                                              <br>
                                                              Tinder - No contestadas: {{aba['noAnswersTinder']}} / Correctas: {{aba['correctAnswersTinder']}} / Incorrectas: {{aba['wrongAnswersTinder']}} #}
                                                            {% 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 class="col-xs-12">
                                                          <img 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}}" id="{{document.url}}" class="thumb" 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>
		     <div id="Documento" class="col-xs-12 tabcontent"  style="display:none;padding-top:20px;" >
		        {% for umr in app.user.usersMisionReferences %}
{# {{umr.mision.url}} #}
              <div class="col-xs-6 document-pdf-container" {% if umr.completed == 0 %}style="opacity:0.5"{% endif %}> 
                <div class="col-xs-12 no-padd">{% if umr.completed %}<a href="https://www.pepejeans.com/es_es/homepage" target="blank">{% endif %}<img src="{{ asset('img/pdfIcon.png') }}">{% if umr.completed %}</a>{% endif %}</div>
                <div class="col-xs-12">{{umr.mision.description}}</div>
              </div>
            {% endfor %}	

		    </div>

    </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"> <h2 id="name"></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">OPCIÓN MÚLTIPLE<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"></p>
           <p id="trivialok" class="blue"></p>
           <p id="trivialko" class="red"></p>
         </div>
       </div>
       <div class="col-xs-6">
           <h4 class="bold">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"></p>
           <p id="tinderok" class="blue"></p>
           <p id="tinderko" class="red"></p>
         </div>
       </div>
          {# <div class="col-xs-2 tcent"> <h4 class="bold">VISTO</h4></div> #}
    </div>
</div>
</div>       
         

{% 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'));
     $('#videoModal').modal('show');

   });
});

$(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');
        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), '*');
      };

      /* 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);
        }

        /* Because of the above, we will start receiving events when video is played or paused - we will toggle a class, just to show it visually */
        console.log(message);
        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);  
        }
       
        
      }, false);
  });


$(document).ready(function() {

    $(".thumb").each(function(index) {
      var url = $(this).attr('id');
      var imgId = $(this).data('id');
      var firstPart = url.split('?')[0].split("/");
      var vid = firstPart[firstPart.length - 1];
      $.getJSON('http://www.vimeo.com/api/v2/video/' + vid + '.json?callback=?', {format: "json"}, function(data) {  
              $('img[data-id="'+imgId+'"]').attr('src', data[0].thumbnail_medium);
          });
    });
});

    </script>

 
	  
{% endblock %}