{% 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/badge.css') }}" media="screen" rel="stylesheet" type="text/css">
  <style type="text/css">
    body {
      background-image: none;
    }
  </style>
{% endblock %}
{% block body %}
{{ parent() }}
<div class="container">         
  <div class="mision col-xs-12 no-padd-xs">
   <div id="trivial-badge" class="col-xs-12 no-padd-xs">       
   <div class="col-xs-12 no-padd-xs">       
                {% if not badges|length %}
                    <h2>No tienes medallas asignadas</h2>
                {% else %}
               {% set total = 0 %}
               {% set gainedBadges = badges|filter(b => b.isGained) %}
                {% for b in gainedBadges %}                          
                    {% set total = total + 1 %}        
                {% endfor %}
                {% set porcentaje = (total*100)/badges|length %}
              

                <div class="badges-progressbar-container">
                <div class="badge-progressbar-total">
                  <div style="width:{{porcentaje}}%" class="badge-progressbar-unlocked"></div>
                </div>
                  <div class="badges-progressbar-text">{% trans %}Unlocked badges{% endtrans %}</div>
                </div>
                <div class="badges-container">
                  {% for ubr in badges %}
                    <div class="badge-box {% if ubr.isGained == 0 %}badge-blocked{% endif %}" data-toggle="modal" data-target="#modal{{loop.index}}">
                      <img src="{{asset('images/badges/'~ubr.badges.imageName)}}" width="125" style="margin: auto"/>
                      <span>{{ubr.badges.badgeCategory.name}}</span>
                    </div>
                    {# MODAL #}
                    <div id="modal{{loop.index}}" class="modal fade badgesModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="vertical-alignment-helper">
                        <div class="modal-dialog mymodal vertical-align-center" style="max-width:none">
                          <div class="modal-content" style="padding: 0 10px;">
                            <div class="badge-modal-title">{{ubr.badges.badgeCategory.name|trans}}</div>
                            <div class="badges-modal-image {% if ubr.isGained == 0 %}badge-blocked{% endif %}"><img src="{{asset('images/badges/'~ubr.badges.imageName)}}" width="125"/></div>
                            <div class="badges-modal-description">{{ubr.badges.description}}</div>
                            <div class="row" style="padding:20px">
                              <div class="btn btn-badge-modal-back" data-modal="modal{{loop.index}}">
                                <span class="button__left"></span>
                                {% trans %}CLOSE{% endtrans %}
                                <span class="button__right"></span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  {% endfor %}      
                </div>
              {% endif %}
            </div>
         </div>
     </div>
    <div class="modal fade" id="reward" role="dialog">
      <div class="modal-dialog">                  
        <!-- Modal content-->
        <div class="modal-content" style="text-align:center;padding:40px;">
          <div style=" padding-bottom:20px;font-size:40px;color:#2C3E50;">Has ganado</div>
          <div id="score" style="padding-bottom:40px;font-size:30px;"></div>
          <div id="close-modal" class="btn btn-md btn-success">OK</div>
        </div>
      </div>
    </div> 
    {{ include('Usuarios/Tutorial/tutoBadges.html.twig') }}
           
{% endblock %}
{% block javascripts %}
  {{ parent() }}
  <script type="text/javascript">
  var claimBtn = document.getElementsByClassName('claim-reward');
  for(var i = 0; i<claimBtn.length; i++){
    claimBtn[i].addEventListener('click',claimReward, false);
  }
  function claimReward(){
    element = this;
    var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          var data = JSON.parse(this.responseText);
          if(data.message == "ok"){
            element.parentElement.style.display = 'none';
            document.getElementById("score").innerHTML = data.points+" puntos";
            $("#reward").modal();
          }
        }
      };
      xhttp.open("POST", Routing.generate('claim_reward'), true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send("id="+element.dataset.id);
  }
  document.getElementById("close-modal").addEventListener('click', function(){
    $("#reward").modal('hide');
  }, false);

  modalLetters = document.getElementsByClassName("badge-modal-letter");
  for(var i = 0; i<modalLetters.length; i++){
    modalLetters[i].addEventListener('click', changeDescription, false);
  }

  function changeDescription(){
    var modalBtns = document.getElementsByClassName("btn-"+this.dataset.category);
    for(var i = 0; i<modalBtns.length; i++){
      modalBtns[i].classList.remove("active");
    }
    this.classList.add("active");
    var modalDescriptions = document.getElementsByClassName("txt-"+this.dataset.category);
    for(var i = 0; i<modalDescriptions.length; i++){
      modalDescriptions[i].classList.add("hidden");
    }
    document.getElementById(this.dataset.id).classList.remove("hidden");
  }

  $(".btn-badge-modal-back").click(function(){
    $("#"+$(this).data("modal")).modal('toggle');
  });

//   {% if visited == 0 %}
//   $(document).ready(function(){
//     $('#tutoBadges').modal('show');
//   });
// {% endif %}

  </script>
{% endblock %}