{% extends 'base.html.twig' %}
{% block titulo %}Evaluación del congreso{% endblock %}
{% block subtitulo %}{% endblock %}

{% block body %}
        <div class="col-md-6">
            <div class="box box-success">
                <div class="box-header">
                    <h3 class="box-title">Acerca del congreso en general</h3>
                </div>
                <div class="box-body">
                    <canvas id="p1Chart" height="50"></canvas>
                </div>
            </div>
        </div>
    <div class="col-md-6">
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title">Administración: Acreditaciones, entrega de constancias, puntualidad</h3>
            </div>
            <div class="box-body">
                <canvas id="p2Chart" height="50"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title">Atención: Actitud de los azafatos, vínculo con los organizadores</h3>
            </div>
            <div class="box-body">
                <canvas id="p3Chart" height="50"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title">Conferencias plenarias en general</h3>
            </div>
            <div class="box-body">
                <canvas id="p4Chart" height="50"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title">Talleres</h3>
            </div>
            <div class="box-body">
                <canvas id="p5Chart" height="50"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title">Comunicaciones</h3>
            </div>
            <div class="box-body">
                <canvas id="p6Chart" height="50"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title">Proceso de evaluación de trabajos</h3>
            </div>
            <div class="box-body">
                <canvas id="p7Chart" height="50"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-12">
        <div class="box box-success">
            <div class="box-header">
                <h3 class="box-title">Si considera que algún ítem no ha sido evaluado o desea plantear una sugerencia, por favor, hágalo a continuación</h3>
            </div>
            <div class="box-body">
                {% for com in resTexto %}
                    <p>{{ com }}</p>
                {% endfor %}
            </div>
        </div>
    </div><div class="clearfix"></div>
{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

    <script>
        $('document').ready(function(){
            crearGrafica('p1', {{ resultados['p1'][0] }},{{ resultados['p1'][1] }},{{ resultados['p1'][2] }},{{ resultados['p1'][3] }},{{ resultados['p1'][4] }} );
            crearGrafica('p2', {{ resultados['p2'][0] }},{{ resultados['p2'][1] }},{{ resultados['p2'][2] }},{{ resultados['p2'][3] }},{{ resultados['p2'][4] }} );
            crearGrafica('p3', {{ resultados['p3'][0] }},{{ resultados['p3'][1] }},{{ resultados['p3'][2] }},{{ resultados['p3'][3] }},{{ resultados['p3'][4] }} );
            crearGrafica('p4', {{ resultados['p4'][0] }},{{ resultados['p4'][1] }},{{ resultados['p4'][2] }},{{ resultados['p4'][3] }},{{ resultados['p4'][4] }} );
            crearGrafica('p5', {{ resultados['p5'][0] }},{{ resultados['p5'][1] }},{{ resultados['p5'][2] }},{{ resultados['p5'][3] }},{{ resultados['p5'][4] }} );
            crearGrafica('p6', {{ resultados['p6'][0] }},{{ resultados['p6'][1] }},{{ resultados['p6'][2] }},{{ resultados['p6'][3] }},{{ resultados['p6'][4] }} );
            crearGrafica('p7', {{ resultados['p7'][0] }},{{ resultados['p7'][1] }},{{ resultados['p7'][2] }},{{ resultados['p7'][3] }},{{ resultados['p7'][4] }} );
        });
        function crearGrafica(p,v1,v2,v3,v4,v5) {
            var ctx = document.getElementById(p+'Chart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'horizontalBar',
                data: {
                    datasets: [
                            {
                                label: '1',
                                data: [v1],
                                backgroundColor: '#f50244'
                            },
                            {
                                label: '2',
                                data: [v2],
                                backgroundColor: '#de793d'
                            },
                            {
                                label: '3',
                                data: [v3],
                                backgroundColor: '#f3da21'
                            },
                            {
                                label: '4',
                                data: [v4],
                                backgroundColor:  '#8cef00'
                            },
                            {
                                label: '5',
                                data: [v5],
                                backgroundColor:  '#00a65a'
                            }

                    ]
                },


                options: {
                    showTooltips: true,
                    scales: {
                        xAxes: [{
                            stacked: true,
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                    },
                    tooltips: {
                        enabled: true,
                        callbacks: {
                            title: function(){},
                            label: function(tooltipItem, data) {
                                var corporation = data.datasets[tooltipItem.datasetIndex].label;
                                var valor = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];

                                // Loop through all datasets to get the actual total of the index
                                var total = 0;
                                for (var i = 0; i < data.datasets.length; i++)
                                    total += data.datasets[i].data[tooltipItem.index];

                                // If it is not the last dataset, you display it as you usually do
                                    return corporation + " : " + valor + " de " + total;


                            }
                        }
                    },
                }
            });
        }



    </script>
{% endblock javascripts %}