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

{% block title %}Avance de Actas{% endblock %}

{% block content %}
<section class="content-header">
    <div class="container-fluid">
        <h1>Avance de Actas</h1>
    </div>
</section>
<section class="content">
    <div class="card card-info">
        <div class="card-header">
            <h3 class="card-title">Avance de Actas por Tipo</h3>
        </div>
        <div class="card-body">
            <!-- Contenedor responsive para el gráfico -->
            <div class="chart-container">
                <canvas id="chartAvanceActas"></canvas>
            </div>
            <div id="error" class="alert alert-danger d-none"></div>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}

<style>
/* Contenedor del gráfico con altura predeterminada */
.chart-container {
    position: relative;
    width: 100%;
    height: 300px; /* Altura para pantallas grandes */
}
/* En dispositivos móviles se aumenta la altura para ver mejor los detalles */
@media (max-width: 768px) {
    .chart-container {
        height: 400px;
    }
}
</style>

<script>
$(document).ready(function(){
    // Ajusta según necesites: 16px en desktop, 14px en móviles, etc.
    let chartFontSize = window.innerWidth < 768 ? 14 : 16;

    $.ajax({
        url: "{% url 'get_avance_actas_json' %}",
        type: "GET",
        success: function(data) {
            console.log("Respuesta recibida:", data);
            if (data.error) {
                $("#error").text("Error: " + data.error).removeClass("d-none");
                return;
            }
            // data.result es un array con objetos:
            // { pk_tipo, TipoNombre, JRVCompletadas, JRVTotal, Porcentaje }
            let result = data.result;
            // Reordenamos para que el objeto con pk_tipo = 0 (TOTAL) quede al final
            result.sort(function(a, b) {
                if(a.pk_tipo === 0) return 1;
                if(b.pk_tipo === 0) return -1;
                return a.pk_tipo - b.pk_tipo;
            });

            let labels = result.map(item => item.TipoNombre);
            let porcentajes = result.map(item => item.Porcentaje);

            let ctx = document.getElementById("chartAvanceActas").getContext("2d");

            new Chart(ctx, {
                type: "bar",
                data: {
                    labels: labels,
                    datasets: [{
                        label: "Porcentaje de Avance (%)",
                        data: porcentajes,
                        // Paleta de colores múltiples:
                        backgroundColor: function(context) {
                            const palette = [
                                "rgba(255, 99, 132, 0.7)",
                                "rgba(255, 159, 64, 0.7)",
                                "rgba(255, 205, 86, 0.7)",
                                "rgba(75, 192, 192, 0.7)",
                                "rgba(54, 162, 235, 0.7)",
                                "rgba(153, 102, 255, 0.7)",
                                "rgba(201, 203, 207, 0.7)"
                            ];
                            return palette[context.dataIndex % palette.length];
                        },
                        borderColor: function(context) {
                            const borderPalette = [
                                "rgba(255, 99, 132, 1)",
                                "rgba(255, 159, 64, 1)",
                                "rgba(255, 205, 86, 1)",
                                "rgba(75, 192, 192, 1)",
                                "rgba(54, 162, 235, 1)",
                                "rgba(153, 102, 255, 1)",
                                "rgba(201, 203, 207, 1)"
                            ];
                            return borderPalette[context.dataIndex % borderPalette.length];
                        },
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        yAxes: [{
                            ticks: {
                                min: 0,
                                max: 100,
                                stepSize: 10,
                                fontSize: chartFontSize,
                                beginAtZero: true
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                fontSize: chartFontSize,
                                // Rotación de 45 grados
                                maxRotation: 45,
                                minRotation: 45,
                                // Opcional: recortar texto si es muy largo
                                // callback: function(value) {
                                //     const maxChars = 20;
                                //     if (value.length > maxChars) {
                                //         return value.substring(0, maxChars) + '...';
                                //     }
                                //     return value;
                                // }
                            }
                        }]
                    },
                    plugins: {
                        datalabels: {
                            color: '#333',
                            font: {
                                weight: 'bold',
                                size: chartFontSize
                            },
                            formatter: function(value, context) {
                                const index = context.dataIndex;
                                const item = result[index];
                                return `${item.JRVCompletadas}/${item.JRVTotal} (${item.Porcentaje}%)`;
                            },
                            anchor: 'end',
                            align: 'end'
                        }
                    },
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                const index = tooltipItem.index;
                                const item = result[index];
                                return `${item.JRVCompletadas}/${item.JRVTotal} (${item.Porcentaje}%)`;
                            }
                        }
                    }
                },
                plugins: [ChartDataLabels]
            });
        },
        error: function(xhr, status, error) {
            console.error("Error en la petición AJAX:", error);
            $("#error").text("Error en la petición AJAX: " + error).removeClass("d-none");
        }
    });
});
</script>
{% endblock %}