{% 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 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 %}
                {% for ub in app.user.userInReference|filter(ub => 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">{% trans %}Unlocked achievements{% endtrans %}</div>
                  <div class="badges-progressbar-text2">{% trans %}Unlocked achievements{% endtrans %}</div>
                <div class="meter blue animate">
                  <span style="width: {{porcentaje}}%"><span></span></span>
                </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|filter(b => 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 no-padd-xs">
                              {% set length = 1 %}
                              {% if bc.name == "Experimentado" or bc.name == "Explorador" %}
                                {% set length = 2 %}                                    
                              {% endif %}
                              <div class="{{bc.name}} badge-letter {{badgeLvlClass}}" data-toggle="modal" data-target="#modal{{loop.index}}">
                                {# <img src="{{ asset('images/badges/'~bc.image) }}"> #}
                                {# {{ bc.name|slice(0,length) }} #}
                              </div>
                              <div class="bc-name">{{bc.name}}</div>
                              <div class="bc-name2">{{bc.name}}</div>
                            </div>
                            <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 modal-badge">
                                  <img class="closeAllModal " data-modal="modal{{loop.index}}" src="{{asset('img/cerrar.png')}}">
                                  <div class="badge-modal-title"><span>{{bc.name}}</span></div>
                                  <div class="row" style="margin:0px 15px auto !important;">
                                    {% for b in badges|filter(b => b.badges.badgeCategory.id == bc.id) %}
                                      <div class="col-xs-4 badges-container no-padd-xs">
                                        {% 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 %}
                                        <div class="{{bc.name}} badge-modal-letter {{badgeModalLvlClass}} btn-{{bc.name}}" data-id="{{b.badges.badgeCategory.name}}-{{loop.index}}" data-category="{{bc.name}}">
                                          {# {{ bc.name|slice(0,length) }} #}
                                        </div>
                                      </div>
                                    {% endfor %}
                                    {% for b in badges|filter(b => b.badges.badgeCategory.id == bc.id) %}
                                      <div id="{{b.badges.badgeCategory.name}}-{{loop.index}}" class="col-xs-12 badges-modal-description txt-{{bc.name}}">{{b.badges.description}}</div>
                                    {% endfor %}
                                  </div>
                               {#    <div class="row" style="padding:20px">
                                    <div class="btn btn-badge-modal-back" data-modal="modal{{loop.index}}">VOLVER</div>
                                  </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> 
    {{ 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);

  $(".closeAllModal").click(function(){
    $("#"+$(this).data("modal")).modal('toggle');
  });

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

  </script>
{% endblock %}