{%extends 'layout.html.twig' %}
{% block stylesheets %}
  {{parent()}}
  <link href="{{ asset('css/trivial.css') }}" media="screen" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
    {{ parent() }}
      <div class="container marketing lista">
        <div class="competition-return">    
          <div class="competition-return-image"><img src="{{asset('img/competition-return.png')}}"></div>
            <a class="competition-return-text" href="{{ path('tracking_user', {idUser: user.id, idTrivial: trivial.id}) }}">Volver a Intentos</a>
        </div>
     <div class="fondo col-xs-12">        
            <div class="record-trivial-name col-md-12">
              {{trivial.name}}
            </div>
            <div class="col-md-3 record-trivial-img"><img class="trivial_img" src="{{ asset('images/trivials/'~trivial.image) }}"></div>
          

            <div class="col-md-9 col-xs-12 badge-trivial-medallas record-title">Tracking</div>
            <div class="col-xs-12 table-responsive">
                <table class="gametool-table table">
                    <thead>
                        <tr>                            
                            <th class="tracking-align-left">PREGUNTA</th>
                            <th>RESPUESTA</th>
                            <th>{{ knp_pagination_sortable(pagination,'CORRECTA','a.status') }}</th>
                            <th>{{ knp_pagination_sortable(pagination,'TIEMPO','a.time') }}</th>
                            <th>{{ knp_pagination_sortable(pagination,'PUNTUACIÓN INDIVIDUAL','a.selfpoints') }}</th>   
                            <th>{{ knp_pagination_sortable(pagination,'PUNTUACIÓN DONADA','a.donatedpoints') }}</th>   
                        </tr>
                    </thead>
                    <tbody>
                    {% for tracking in pagination %}
                     {% if tracking.answer == NULL %}
                        <tr style="background-color:rgba(215, 217, 107, 0.5);">
                       {% elseif tracking.status == 0  %}
                        <tr style="background-color:rgba(247, 155, 155, 0.5);">
                        {% elseif tracking.status == 1 %}
                            <tr style="background-color:rgba(140, 217, 107, 0.5);">
                        {% endif %}
                            <td class="tracking-align-left" >{{tracking.question.__toString()}}</td>
                            <td>
                            {% if tracking.answer == NULL %}
                                No contestada
                             {% else %}
                                 {{tracking.answer.__toString()}}
                            {% endif %}
                            </td>
                            <td>{% if tracking.status == 0 %}
                                    No            
                                {% else %}
                                    Sí  
                                {% endif %}
                            </td>
                            <td>{{tracking.time}}</td>
                            <td>{{tracking.attempt.selfpoints}}</td>
                            <td>{{tracking.attempt.donatedpoints}}</td>                
                        </tr>  

                    {% endfor %}
                    </tbody>

                </table>                 
                {# <a class="btn btn-success " href="{{ path('tracking_excel',{id:attempt}) }}">Descargar</a> #}
                {#display navigation#}
            </div> 
            <div class="col-xs-12 tracking-bar-chart">
               <canvas id="myChart" width="400" height="400"></canvas>
            </div>             
        </div>
    </div>                
{% endblock %}  
                

{% block javascripts %}
    {{ parent() }}
<script>
var data1='{{ cont1 }}';
var data2='{{ cont2 }}';
var percentage = Math.round((data1/(parseInt(data1)+parseInt(data2)))*100);
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Correctas", "Incorrectas"],
        datasets: [{
            label: '',
            data: [data1, data2],
            backgroundColor: [
                'rgba(95, 214, 134, 1)',
                'rgba(255, 153, 153, 1)'
                
            ],
        }]
    },
    options: {
        maintainAspectRatio: false,
        title: {
            display: true,
            text: percentage+'% correctas'
        },
        legend: { display: false },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,            
                }
            }]
        }
    }
});
</script>


{% endblock %}