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

		.ranking-store {
		    background-color: #d82232;
		    padding: 20px;
		    max-width: 800px;
		    font-family: 'proxima_nova-regular';
		    color: #fff;
		    margin: 10px auto 0;
		    font-size: 26px;
		}	

	</style>
{% endblock %}
{% block body %}
	{{ parent() }}
    <div class="container">
                {# PROFILE #} 
        {# <div class="col-xs-12">
        
        		<button class="tablinks active col-xs-6 no-padd" onclick="changeRanking(event, 'Individual')">Individual</button>
  				<button class="tablinks col-xs-6 no-padd copp" onclick="changeRanking(event, 'Cooperativo')">Colectivo</button>
  		</div>
 #}        	
    
		    <div id="Individual" class=" mision table-responsive col-xs-12 ranking-table tabcontent" style="padding-top:20px">

 

					<div class="col-xs-12 mision no-padd">
						<p class="ranking-store">TU TIENDA</p>
					</div>
					<div class="profile" style="max-width: 800px;">
						<div style="padding:0px !important;" class="col-xs-6 ">
							 	<div class="profile-container">
							 	<img class="profile-icon" src="{{ asset('images/users/'~app.user.image) }}"/>
								 {# <img class="star-profile" src="{{ asset('img/redstar3.png') }}"/>								 #}
								</div>
							 </div>
						<div style="padding-top: 0px !important;padding-left: 0px;padding-right: 0px;text-align:left" class="col-xs-6 blue">
						<h2 class="black bold upper" style="display:inline-block;vertical-align: middle;line-height: normal;word-break: break-all;font-size:24px;margin-top: 28px !important;">
	{% set pos2 = 1 %}
	{% set userPos2 = 0 %}
	{% for att in rankingIndividual %}{% if app.user.store.id == att.id %}{% set userPos2 = pos2 %}{{ pos2 }}º{% endif %}{% set pos2 = pos2 + 1 %}{% endfor %}

										  	{{ app.user.store.name }}

										  </h2>
										  {% if app.user.role == "ROLE_USER" %} 
										  <h2 class="score-number red" style="position: absolute;
    top: 58px;font-size: 21px;">{% for att in rankingIndividual %}{% if app.user.store.id == att.id %} {{att.e_tickets}} e-Tickets<br>{{att.score}} puntos{% endif %}{% endfor %}<img class="profile-star " src="{{ asset('img/bluestar.png') }}"/></h2>
										{% endif %}
								</div>
					</div>



		        <h2 class="white bold ranking-rewards-btn"  onclick="showAwardsModal()">PULSA AQUÍ PARA VER LOS PREMIOS</h2>
		         <table class="table gametool-table ranking-table">
		          <tr>
		            <td colspan="2"></td>
		            <td>e-Tickets</td>
		            <td>Puntos juego</td>
		            <td><b>Flexipoints</b></td>
		          </tr>
		                <tbody>
		              {# Mostrar lista de todos los usuarios en la campaña #}
		              {% set i = 1 %}
		                {# {% for att in rankingIndividual if i <= 20 %} #}
		                  {% for att in rankingIndividual %}
		            {% if loop.index == 6 %}</tbody></table>
		              <div class="col-xs-12" style="margin-bottom: 20px; text-align: center"><img src="{{asset('img/ranking-top5.png')}}"/></div>
		              <table class="table gametool-table ranking-table">
		              	<tr>
		            <td colspan="2"></td>
		            <td>e-Tickets</td>
		            <td>Puntos juego</td>
		            <td><b>Flexipoints</b></td>
		          </tr>
		                    <tbody>
		            {% endif %}
		            <tr>
		                      <td class="ranking-number-format" style="font-size: 32px !important;width: 100px;">{% if i == 1 or i == 2 or i == 3 or i == 4 or i == 5 %}<img src="{{ asset('img/ranking'~i~'.png') }}"/>{% else %}{{i}}º{% endif %}</td>                    
		                      <td class="tleft upper" style="font-family: proxima_nova-bold">{{att.name}}</td>
		                      <td >{{att.e_tickets}}</td>
		                      <td><button type="button" class="btn" style="padding: 0; background-color: transparent;font-size: inherit" data-html="true" data-toggle="tooltip" data-placement="top" title="+1  cada {{extraPointScore}} puntos por usuario<br>Puntos totales: {{att.score}}<br>Usuarios: {{att.numUsers}}">{{att.extrapoints}}</button></td>
		                      <td class="pointscolor score-number">{{att.totalScore}}</td>
		                      {#< td class="pointscolor score-number">{{att.e_tickets}} e-Tickets (<button type="button" class="btn" style="padding: 0; background-color: transparent" data-html="true" data-toggle="tooltip" data-placement="top" title="+1  cada {{extraPointScore}} puntos por usuario<br>Puntos por usuario: {{att.scoreUser}}<br>Usuarios: {{att.numUsers}}">+{{att.extrapoints}}</button>)<br> {{att.score}} puntos</td> #}
		                    {% if app.user.role == "ROLE_TUTOR" %}
		                      <td><a class="record-trivial-tracking" href="{{ path('tracking_user', {idUser: att.id, idTrivial: trinder.id}) }}">ver</a></td>
		                    {% endif %}  
		                    {% set i = i + 1 %}                         
		                    </tr>
		                  {% endfor %}
		              </tbody>
		          </table>

				{# <a href="{{asset('documents/InfoPremiosIndividuales.pdf')}}" target="_blank"><div  style="margin-top:25px;" class="btn btn-record">PREMIOS</div></a>
 #}
		    </div>
    </div>
    <div class="modal fade awardsModal" id="awardsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="vertical-alignment-helper">

    	<div class="modal-dialog vertical-align-center">
					<div class="modal-content text-center">
					   {# <img class="closeModal" src="{{asset('img/cerrar_1.png')}}">   #}
			 		<img style="width:100%;height:auto;max-width:400px;margin-top:20px;margin-bottom:50px" src="{{ asset('img/awards.png') }}">

            </div>
     
    </div>
</div>
</div>

    {{ include('Trivial/records/Tutorial/tutoRanking.html.twig') }}
{% endblock %}
{% block javascripts %}
  {{parent()}}
  <script src="{{ asset('js/progressbar.js') }}" ></script>
  <script src="{{ asset('js/record-players.js') }}" ></script>
  <script type="text/javascript">
  	function changeRanking(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";
	}

	function showAwardsModal(){
		$("#awardsModal").modal('show');
	}

	// {% if visited == 0 %}
	//   $(document).ready(function(){
	//     $('#tutoRanking').modal('show');
	//   });
	// {% endif %}
  </script>		  
{% endblock %}