{% 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-image: none;
    }
  </style>
{% endblock %}
{% block body %}
  {{ parent() }}
    <div class="document-user">
{#         <div class="document-videos-title">{% trans %}BIBLIOTECA{% endtrans %}</div>
 #}        <div>
          {% for d in documentsCategory[0].documents %}
            <div class="document-container col-xl-3 col-md-4 col-sm-6 col-xs-12">
              {% if d.type == "URL" %}
                <p><b>{{d.name}}</b> - {{d.description}}: <a href="{{d.url}}" target="blank">{{d.url}}</a></p>
              {% elseif d.type == "DOCUMENTO" %}
                <p><b>{{d.name}}</b> - {{d.description}}: <a class="btn" href="{{ path('download_route', {id: d.id }) }}"><img src="{{asset('img/downloadDocument.png')}}"></a></p>
              {% elseif d.type == "IFRAME" %}
                <p><b>{{d.name}}</b> - {{d.description}}:</p>
                {{d.url|raw}}
              {% endif %}
            </div>
          {% endfor %}
        </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){
        createDocument($(this).data('id'));
        // clickedVideo($(this).data('id'));
        $('#claimBtn').addClass('claim');
     } else if ($(this).data('claimed') == 1){
      $('#claimBtn').attr('onclick','claimReward(this,'+$(this).data('id')+');');
     } 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 createDocument(id){
    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);
                }
                if(data.status == 1) {
                  clickedVideo(id);
                }
              }
            };
            xhttp.open("POST", Routing.generate('user_seen_document'), true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("id="+id);  
  }
  
  function clickedVideo(id) {
    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,'+id+');');
                 $('div[data-id="'+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="+id);  
  }

    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 %}