{% extends 'base.html' %}{% load static %}
{% load static %}

{% block title %}Resultados por Movimientos{% endblock %}
{% block content %}
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1><i class="nav-icon fas fa-users mr-1"></i> Resultados por Movimientos</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{% url 'dashboard_votaciones' %}">Inicio</a></li>
                    <li class="breadcrumb-item active"><i class="nav-icon fas fa-users mr-1"></i> Gráfico Competencia de Movimientos</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col">
            <!-- Gráfico para Movimientos (sin tipo candidato) -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">Resultados por Movimientos - TOTAL GENERAL</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="barChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <!-- Gráfico de Pastel para PRESIDENTE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">PRESIDENTE - Resultados por Movimiento</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="presidentePieChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <!-- Gráfico de Barras para PRESIDENTE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">PRESIDENTE - Cantidad de Votos</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="presidenteBarChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <!-- Gráfico de Pastel para DIPUTADO -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">DIPUTADO - Resultados por Movimiento</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="diputadoPieChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <!-- Gráfico de Barras para DIPUTADO -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">DIPUTADO - Cantidad de Votos</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="diputadoBarChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <!-- Gráfico de Pastel para ALCALDE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">ALCALDE - Resultados por Movimiento</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="alcaldePieChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <!-- Gráfico de Barras para ALCALDE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">ALCALDE - Cantidad de Votos</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="alcaldeBarChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 d-none">
            <!-- Gráfico de Barras para DIPUTADO SUPLENTE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">DIPUTADO SUPLENTE - Cantidad de Votos</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="diputado_suplenteBarChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 d-none">
            <!-- Gráfico de Pastel para DIPUTADO SUPLENTE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">DIPUTADO SUPLENTE - Resultados por Movimiento</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="diputado_suplentePieChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 d-none">
            <!-- Gráfico de Barras para VICEALCALDE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">VICEALCALDE - Cantidad de Votos</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="vicealcaldeBarChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 d-none">
            <!-- Gráfico de Pastel para VICEALCALDE -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">VICEALCALDE - Resultados por Movimiento</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="vicealcaldePieChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 d-none">
            <!-- Gráfico de Barras para REGIDOR -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">REGIDOR - Cantidad de Votos</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="regidorBarChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 d-none">
            <!-- Gráfico de Pastel para REGIDOR -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">REGIDOR - Resultados por Movimiento</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="regidorPieChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 d-none">
            <!-- Gráfico de Barras para DESIGNADO PRESIDENCIAL -->
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">DESIGNADO PRESIDENCIAL - Cantidad de Votos</h3>
                </div>
                <div class="card-body">
                    <div class="chart">
                        <canvas id="designado_presidencialBarChart" style="min-height: 300px; height: 300px; max-height: 300px; max-width: 100%;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
        </div>
    </div>








</section>
<!-- /.content -->
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Petición AJAX para obtener datos sin tipo de candidato
        AJAX_REQUEST('{% url "dataGraficosVotosMovimientos" %}', 'GET', {}, function (data) {
            data = data.result;

            // Extraemos las etiquetas y los datos del JSON recibido
            const labels = data.map(item => `${item.movimiento}`);  // Movimientos
            const votes = data.map(item => item.total_votos);  // Total de votos
            const backgroundColors = data.map(item => item.hex_color.trim()); // Colores dinámicos

            let ctx = document.getElementById('barChart').getContext('2d');

            // Gráfico de barras para mostrar la competencia de movimientos
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,  // Movimientos
                    datasets: [{
                        label: 'Votos del Movimiento',
                        data: votes,
                        backgroundColor: backgroundColors, // Asignar los colores dinámicamente
                        borderColor: backgroundColors, // Usar el mismo color para los bordes
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    plugins: {
                        datalabels: {
                            color: '#333', // Cambia el color del porcentaje
                            font: {
                                weight: 'bold',
                                size: 12
                            },
                            formatter: (value, ctx) => {
                                return `${value.toLocaleString()}`; // Muestra "porcentaje (votos)"
                            },
                            align: 'end', // Mueve las etiquetas fuera de la gráfica
                            anchor: 'end' // Ancla las etiquetas fuera del segmento
                        }
                    },
                    tooltips: {
                        callbacks: {
                            label: function (tooltipItem, data) {
                                let dataset = data.datasets[tooltipItem.datasetIndex];
                                let value = dataset.data[tooltipItem.index];
                                return ` Votos del Movimiento: ${value.toLocaleString()}`; // Muestra solo el porcentaje
                            }
                        }
                    }
                }
            });
        });


        Chart.Legend.prototype.afterFit = function () {
            // Verifica si el gráfico es un gráfico de tipo 'pie'
            if (this.chart.config.type === 'pie') {
                this.height = this.height + 25;
            }
        };


        // Array de tipos de candidatos
        const tiposCandidatos = [1, 2, 3, 4, 5, 6, 7];
        const tipoNombres = {
            1: "PRESIDENTE",
            2: "DIPUTADO",
            3: "DIPUTADO_SUPLENTE",
            4: "ALCALDE",
            5: "VICEALCALDE",
            6: "REGIDOR",
            7: "DESIGNADO_PRESIDENCIAL"
        };

        tiposCandidatos.forEach(tipo => {
            // Primero obtener los datos para el gráfico de barras
            AJAX_REQUEST('{% url "dataGraficosVotosMovimientos" %}', 'GET', { pk_candidato_tipo: tipo }, function (data) {
                data = data.result;

                // Extraemos las etiquetas y los datos del JSON recibido
                const labels = data.map(item => `${item.movimiento}`);  // Movimientos
                const votes = data.map(item => item.total_votos);  // Total de votos
                const backgroundColors = data.map(item => item.hex_color.trim()); // Colores dinámicos

                // Gráfico de Barras
                let ctxBar = document.getElementById(`${tipoNombres[tipo].toLowerCase()}BarChart`).getContext('2d');
                new Chart(ctxBar, {
                    type: 'bar',
                    data: {
                        labels: labels,  // Movimientos
                        datasets: [{
                            label: 'Votos del Movimiento',
                            data: votes,
                            backgroundColor: backgroundColors, // Asignar los colores dinámicamente
                            borderColor: backgroundColors, // Usar el mismo color para los bordes
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            datalabels: {
                                color: '#333', // Cambia el color del porcentaje
                                font: {
                                    weight: 'bold',
                                    size: 12
                                },
                                formatter: (value, ctx) => {
                                    return `${value.toLocaleString()}`; // Muestra "porcentaje (votos)"
                                },
                                align: 'end', // Mueve las etiquetas fuera de la gráfica
                                anchor: 'end' // Ancla las etiquetas fuera del segmento
                            }
                        },
                        tooltips: {
                            callbacks: {
                                label: function (tooltipItem, data) {
                                    let dataset = data.datasets[tooltipItem.datasetIndex];
                                    let value = dataset.data[tooltipItem.index];
                                    return ` Votos del Movimiento: ${value.toLocaleString()}`; // Muestra solo el porcentaje
                                }
                            }
                        }
                    }
                });

                // Gráfico de Pastel
                let ctxPie = document.getElementById(`${tipoNombres[tipo].toLowerCase()}PieChart`).getContext('2d');
                // Creando un gráfico para cada tipo de candidato
                new Chart(ctxPie, {
                    type: 'pie',
                    data: {
                        labels: labels,  // Movimientos
                        datasets: [{
                            label: 'Votos del Movimiento',
                            data: votes,  // Total de votos
                            backgroundColor: backgroundColors, // Asignar los colores dinámicamente
                            borderColor: backgroundColors, // Usar el mismo color para los bordes
                            borderWidth: 1
                        }]
                    },
                    options: {
                        layout: {
                            padding: {
                                bottom: 20
                            }
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            datalabels: {
                                color: '#333', // Cambia el color del porcentaje
                                font: {
                                    weight: 'bold',
                                    size: 13
                                },
                                formatter: (value, ctx) => {
                                    let total = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
                                    let percentage = ((value / total) * 100).toFixed(2) + "%";
                                    return `${percentage}`; // Muestra "porcentaje (votos)"
                                },
                                align: 'end', // Mueve las etiquetas fuera de la gráfica
                                anchor: 'end' // Ancla las etiquetas fuera del segmento
                            }
                        },
                        tooltips: {
                            callbacks: {
                                // Título personalizado
                                title: function (tooltipItem, data) {
                                    // Obtiene el nombre del movimiento
                                    let movimiento = data.labels[tooltipItem[0].index];
                                    return `${movimiento}`; // Muestra el nombre del movimiento como título
                                },
                                // Etiqueta personalizada
                                label: function (tooltipItem, data) {
                                    let dataset = data.datasets[tooltipItem.datasetIndex];
                                    let value = dataset.data[tooltipItem.index];

                                    // Calcula el total de votos
                                    let total = dataset.data.reduce((a, b) => a + b, 0);

                                    // Calcula el porcentaje
                                    let percentage = ((value / total) * 100).toFixed(2) + "%";

                                    // Retorna el label con el valor y porcentaje
                                    return ` Resultados: ${percentage}`;
                                }
                            }
                        },

                    }
                });
            });
        });
    });
</script>
{% endblock %}