{% 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">
<style type="text/css">
    body {
      background-color: #fff;
    }
  </style>

{% endblock %}
{% block body %}
  {{ parent() }}
    <div class="container document-user">
    <a href="{{path('library')}}"><div class="col-xs-12 go-back"><img src="{{asset('img/documentBack.png')}}"> ATRÁS</div></a>
        {# <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" {% if documentTitle == "VÍDEOS" %}style="display:block"{% endif %}>
          <div class="col-xs-12 document-user-title">{{documentTitle}}</div>
            {# Document/videosIframe.html.twig #}
            <video width="100%" height="auto" controls>
              <source src="{{asset('documents/Think Quality.mp4')}}" type="video/mp4">
            </video>
        </div>
         <div id="documento" class="col-xs-12 tabcontent" {% if documentTitle == "COMUNICADOS" %}style="display:block"{% endif %}>
          <div class="col-xs-12 document-user-title">{{documentTitle}}</div>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSXURnSabug2ZP9maPFWIF9CGrmjP2mNHdbXyzFRSFhZ_DSVpyCzd_cLQBAhWOgsw/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vR_s023EGFszx3MwQh3ru_Y2cPNMq93el2IHGjdXPbqBlRWAQFlAgwAgF55yWRcCQ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRTEIZouaU_96vQstNvjuuNuBQs8PKI019H05IpH2jI0-6Vv_uq92lYd394vujn1Q/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSUMruCPNmmsC4nqXQ_AE4oE6hSNBDbvnYFAd7JrV8DtpLzQSYncfKiU-lip8kv_w/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQQr5DGZ1VcUO0gAhsqu6gsZMg01bi0YVuixAQWQfUF9sOmOIigFTaPuSK6eSFAnQ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSZ8YvRTRzPsxm7px5ef6wLwhMSgty6HlQRyXWZM57MKoWE9VuKKLEqkDolqW7oEg/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRK19ecgGi7lRHZjdxD9x0l1yq2cHALWZhMcHOqY3Yn7_L5Nh-u_kDhOdrylSBpsg/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSgim4VqZSAYmpexJWdl0LLByWqHuSTAk7dKMcTBR5zaFxWRv_TXv_AsUEbe1KKcg/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQ9tfIJLzrH1Tl91jG-i8CtdgpldT1YMsXUxNmSPYfROM55mlOX_Uvi8dRi6rlI0g/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRC6t95agMtlCEJzG7BYZJ5-vE-tan08wtDQLJu1vYo6MD_y4nRCzw0I_rH8T0HIw/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQScCPDGbx-EGdUF7bG5fvpH2fa2wDKZCGz4WkUKOF09kvyH76WsTpUtFlGM2tRgA/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQQywiVWXvhc0Tv7H7Dn0Ezmrljk93R2eBgPvzlA5PP7cdQUeTuJ3WRTJ374W9w_Q/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vTJVxilxjcjdXdSdN9S-N-o6kOFWZmrhlZdkITF08DCQCWwCpzeVTfILH_07-TPWA/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
          <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQ76ynEmctM-MU4uUBGJ_eclvkeMpDcdQefcm_HCgUMXJ9_np1sZ_MB1Nf3V41RGA/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
        </div>
        <div id="iframeDocument" class="col-xs-12 tabcontent" {% if documentTitle == "LPA" or documentTitle == "CSR" or documentTitle == "AMFES" or documentTitle == "CIP" %}style="display:block"{% endif %}>
          <div class="col-xs-12 document-user-title">{{documentTitle}}</div>
          <div class="col-xs-12">
            {% if documentTitle == "LPA" %}
              <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRNWC7A-2jgpSixfpwF70XExsNflxS6g4XxeNYSPmXXvSgqAKphgk_J8uxe5vXldg/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
            {% elseif documentTitle == "CSR" %}
              <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQDksrrD08WHAy6E6i9ZOlJKbIo9d71rAqoZVAoXyUPCzkufbRb7oAn4kh1e3X-mw/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
            {% elseif documentTitle == "AMFES" %}
              <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRQGNWya0UFcBOjEBXrg4A7d7M_IigAsfzIXf8G6Zhbhd5X2dXspZ-8VTnqH_YE_g/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
            {% elseif documentTitle == "CIP" %}
              <iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSMPXEVq2AHzi-w21iVI-Un7fC7R6bj_wibgvvMTFQkJp7LgNURYKCPWU5cyLnrkA/embed?start=false&loop=false&delayms=3000" frameborder="0" width="640" height="389" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
            {% endif %}
          </div>

        </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">    

          <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="bigger-font" style="color: #96c1e9"></p>
           <p id="trivialko" class="bigger-font" style="color: #ff5b22"></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="orange 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 %}