{%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">
{% endblock %}
{% block body %}
{{ parent() }}
<div class="container">         
  <div class="mision col-xs-12">
   <div id="trivial-badge" class="col-xs-12">       
   <div class="col-xs-12">       
                {% if not badges|length %}
                    <h2>No tienes medallas asignadas</h2>
                {% else %}
               {% set total = 0 %}
                {% for ub in app.user.userInReference if ub.isGained %}                          
                    {% set total = total + 1 %}        
                {% endfor %}
                {% set porcentaje = (total*100)/app.user.userInReference|length %}
              

                <div class="badges-progressbar-container">
                  <div class="badges-progressbar-text">Logros desbloqueados</div>
                <div class="badge-progressbar-total">
                  <div style="width:{{porcentaje}}%" class="badge-progressbar-unlocked"></div>
                </div>
                </div>
                <div class="badges-container col-xs-12">
                      {% for bc in badgeCategory %}
                        {% if bc.badges|length > 0 %}
                        {% set badgeLvlClass = "badge-none" %}
                        {% set lvl = 0 %}
                        {% for b in badges if b.badges.badgeCategory.id == bc.id and b.isGained == 1 %}
                          {% set lvl = lvl + 1 %}
                        {% endfor %}
                        {% if lvl == 1 %}{% set badgeLvlClass = "badge-bronze" %}
                        {% elseif lvl == 2 %}{% set badgeLvlClass = "badge-silver" %}
                        {% elseif lvl == 3 %}{% set badgeLvlClass = "badge-gold" %}{% endif %}
                            <div class="col-sm-4 col-xs-6 badge-category">
                              {% set length = 1 %}
                              {% if bc.name == "Experimentado" or bc.name == "Explorador" %}
                                {% set length = 2 %}                                    
                              {% endif %}
                              <div class="badge-letter {{badgeLvlClass}}" data-toggle="modal" data-target="#modal{{loop.index}}">
                                {{ bc.name|slice(0,length) }}
                              </div>
                            </div>
                            <div id="modal{{loop.index}}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                              <div class="modal-dialog">
                                <div class="modal-content col-xs-12">
                                  <div class="badge-modal-title">{{bc.name}}</div>
                                  <div class="col-xs-12">
                                    {% for b in badges if b.badges.badgeCategory.id == bc.id %}
                                      <div class="col-xs-4 badges-container">
                                        {% if b.badges.level == 1 %}{% set badgeModalLvlClass = "badge-bronze" %}
                                        {% elseif b.badges.level == 2 %}{% set badgeModalLvlClass = "badge-silver" %}
                                        {% elseif b.badges.level == 3 %}{% set badgeModalLvlClass = "badge-gold" %}{% endif %}
                                        {% if b.isGained %}
                                        <div class="badge-modal-letter {{badgeModalLvlClass}} {% if loop.first %}active{% endif %} btn-{{bc.name}}" data-id="{{b.badges.badgeCategory.name}}-{{loop.index}}" data-category="{{bc.name}}">
                                          {{ bc.name|slice(0,length) }}
                                        </div>
                                      {% else %}
                                        <div class="badge-modal-letter {{badgeModalLvlClass}} badge-locked {% if loop.first %}active{% endif %} btn-{{bc.name}}" data-id="{{b.badges.badgeCategory.name}}-{{loop.index}}" data-category="{{bc.name}}" ><img class="img-badge-locked" src="{{asset('img/badge-lock.png')}}"></div>
                                      {% endif %}
                                      </div>
                                    {% endfor %}
                                    {% for b in badges if b.badges.badgeCategory.id == bc.id %}
                                      <div id="{{b.badges.badgeCategory.name}}-{{loop.index}}" class="col-xs-12 badges-modal-description txt-{{bc.name}} {% if loop.first == 0 %}hidden{% endif %}">{{b.badges.description}}</div>
                                    {% endfor %}
                                  </div>
                                  <div class="col-xs-12 badge-modal-footer">
                                    <div class="btn btn-badge-modal-back" data-modal="modal{{loop.index}}">VOLVER</div>
                                  </div>
                                </div>
                              </div>
                            </div>
                        {% endif %}
                      {% 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>            
{% 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');
  });

  </script>
{% endblock %}