@extends('layouts.app')

@section('title')
Reportes
@endsection

@section('modals')

@endsection

@section('content')
<!-- Incluye tus gráficas en la vista -->
<div id="chart-container">
    <div class="container p-5">
        <div class="card card-outline card-danger">
            <div class="card-title p-4 border-bottom">
                <div class="row">
                    <div class="col-md-6">
                        <h4><i class="fa fa-th"></i> Reportes Estadísticos</h4>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">

                    <div class="col-md-6">
                        <div class="card" style="width: 18rem;">
                            <div class="card-header">
                                <b>Total Registrados <p id="total_registrados"> </p></b>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <b>Total Jefes <p id="total_jefes"> </p></b>
                                </li>
                                <li class="list-group-item">
                                    <b>Promedio Registros Por Jefe <p id="promedio_reg_jefes"> </p></b>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <img src="{{asset('img/logos/map_22.jpg')}}" alt="">
                    </div>

                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center"><b>Edad de los Registrados</b></h5>
                                <div class="contenedor_canvas" id="contenedor_por_edad">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center"><b>Género de los Registrados</b></h5>
                                <div class="" id="contenedor_por_genero">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card card-outline card-danger">
                    <div class="card-title p-4 border-bottom">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <select class="form-control" id="select_mes">
                                        <option value="01">Enero</option>
                                        <option value="02">Febrero</option>
                                        <option value="03">Marzo</option>
                                        <option value="04">Abril</option>
                                        <option value="05">Mayo</option>
                                        <option value="06">Junio</option>
                                        <option value="07">Julio</option>
                                        <option value="08">Agosto</option>
                                        <option value="09">Septiembre</option>
                                        <option value="10">Octubre</option>
                                        <option value="11">Noviembre</option>
                                        <option value="12">Diciembre</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <h5 class="text-center"><b>Total Registrados por día</b></h5>
                                            <div>
                                                <canvas id="chart_total_por_dia"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center"><b>Total Registrados por jefe</b></h5>
                                <div class="row">
                                    <div class="col-md-3">
                                        <select class="form-control" id="select_municipio">
                                            <option value="0">SELECCIONE MUNICIPIO</option>
                                            @foreach (DB::table('gl_municipios')->where('estado_id', 19)->get() as $municipio)
                                                <option value="{{$municipio->id}}">{{$municipio->descripcion}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <select class="form-control" id="select_parroquia">

                                        </select>
                                    </div>
                                    <!-- <div class="col-md-3">
                                        <p id="resultado_jefes">Resultado</p>
                                    </div> -->
                                </div>
                                <div class="contenedor_canvas" id="contenedor_por_jefes">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center"><b>Total Registrados Municipio</b></h5>
                                <div class="contenedor_canvas" id="contenedor_por_municipios">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center"><b>Total Registrados por Parroquia</b></h5>
                                <div class="contenedor_canvas" id="contenedor_por_parroquia">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center"><b>Participantes Registrados</b></h5>
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Cantidad de Participantes Registrados</th>
                                            <th>Número de Jefes</th>
                                            <th>Porcentaje de Jefes</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1 Participante</td>
                                            <td> {{$conteoPersonasPorJefe['1']}} </td>
                                            <td> {{$porcentajes[0]}} % </td>
                                        </tr>
                                        <tr>
                                            <td>Entre 2 y 3 participante</td>
                                            <td> {{$conteoPersonasPorJefe['2']}} </td>
                                            <td> {{$porcentajes[1]}} % </td>
                                        </tr>
                                        <tr>
                                            <td>Entre 4 y 5 participante</td>
                                            <td> {{$conteoPersonasPorJefe['3']}} </td>
                                            <td> {{$porcentajes[2]}} % </td>
                                        </tr>
                                        <tr>
                                            <td>Entre 6 y 7 participante</td>
                                            <td> {{$conteoPersonasPorJefe['4']}} </td>
                                            <td> {{$porcentajes[3]}} % </td>
                                        </tr>
                                        <tr>
                                            <td>Entre 8 y 9 participante</td>
                                            <td> {{$conteoPersonasPorJefe['5']}} </td>
                                            <td> {{$porcentajes[4]}} % </td>
                                        </tr>
                                        <tr>
                                            <td>Más de 10 participantes</td>
                                            <td> {{$conteoPersonasPorJefe['6']}} </td>
                                            <td> {{$porcentajes[5]}} % </td>
                                        </tr>
                                        <tr class="alert-danger">
                                            <td>Total</td>
                                            <td> {{$total_jefes}} </td>
                                            <td> {{$total_porcentaje}} % </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center"><b>Total Registrados por Centro de Votación</b></h5>
                                <div class="contenedor_canvas" id="contenedor_por_centro">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center"><b>Top 10 Cantidad de Usuarios Por Tipo de Usuario</b></h5>
                                <div>
                                    <canvas id="chart_top_por_tipo_usuario_barra"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->

                <!-- <div class="row justify-content-center">
                    <div class="col-sm-6 mb-3 mb-sm-0">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center"><b>Género de los Registrados</b></h5>
                                <div>
                                    <canvas id="chart_top_por_tipo_usuario_torta"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> -->

            </div>

        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script>
    $(document).ready(function () {

        // $("#chart_total_por_jefe").height(1000);

    });
</script>
<script>
    var municipio_id = 0;
    var parroquia_id = 0;
    var fecha_actual = new Date();
    var year_actual = fecha_actual.getFullYear();
    datosGenerales('generales', 0);
    function datosGenerales(filtro, mesSeleccionado) {
        var total_registrados = 0;
        var total_jefe = 0;
        var promedio_reg_jefes = 0;
        fetch(
            DIR+'/personas/' + filtro + '/' + mesSeleccionado, {
            method: 'GET'
        }
        ).then(res => res.json()).then(function (data) {
            console.log(data);
            // if (data.status) {
            //     Swal.fire(
            //         'Datos Actualizados!',
            //         data.message,
            //         'success'
            //     )
            // }
            if (!data.status) {
                Swal.fire({
                    icon: 'error',
                    title: '¡Ups!',
                    html: template
                })
            }
            if (data.data == null) {
                console.log("Sin datos");
            } else {
                total_registrados = data.data;
                total_jefe = data.jefes;
                promedio_reg_jefes = total_registrados / total_jefe;
                $("#total_registrados").text(total_registrados)
                $("#total_jefes").text(total_jefe)
                $("#promedio_reg_jefes").text(promedio_reg_jefes.toFixed(2))
            }

        })
            .catch(function (err) {
                console.log(err);
            })
    }

    Chart.register(ChartDataLabels);
    // var ctx = document.getElementById("articulos").getContext('2d');

    function obtenerDiasDelMes(mesSeleccionado) {
        // const diasDelMes = [];
        // const numeroDias = new Date(year_actual, mesSeleccionado, 0).getDate(); // Obtiene el número de días del mes y año seleccionados

        // for (let i = 1; i <= numeroDias; i++) {
        //     diasDelMes.push(i < 10 ? '0' + i : '' + i); // Añade los días al array, agregando un cero delante si es necesario
        // }

        // return diasDelMes;
    }

    function obtenerDatosParaMes(mesSeleccionado, datosTablaPersonas) {
        // const datosMes = [];
        // var labels = data.labels;
        // var valores = data.valores;

        // for (let index = 1; index <= 31; index++) {
        //     if (labels[index] == index) {
        //         datosMes.push(0);
        //     } else {
        //         datosMes.push(0);
        //     }

        // }
        // Filtrar los datos para obtener solo las personas del mes seleccionado
        // const personasMes = datosTablaPersonas.filter(persona => {
        //     const fecha = new Date(persona.created_at);
        //     return fecha.getMonth() + 1 === parseInt(mesSeleccionado); // Comparamos el mes de la fecha con el mes seleccionado
        // });

        // Contar la cantidad de personas para cada día del mes
        // for (let i = 1; i <= 31; i++) { // Suponemos máximo 31 días en un mes
        //     const personasDia = personasMes.filter(persona => {
        //         const fecha = new Date(persona.created_at);
        //         return fecha.getDate() + 1 === i; // Comparamos el día de la fecha con el día actual del ciclo
        //     });
        //     datosMes.push(personasDia.length); // Agregamos la cantidad de personas para ese día al array de datos
        // }

        // return datosMes;
    }

    var fechaActual = new Date();
    var mesActual = fechaActual.getMonth() + 1; // Sumamos 1 porque los meses van de 0 a 11 en JavaScript
    // Formateamos el mes actual con dos dígitos
    var mesSeleccionado = mesActual < 10 ? '0' + mesActual : '' + mesActual;
    document.getElementById('select_mes').value = mesSeleccionado;

    const selectMes = document.getElementById('select_mes');
    selectMes.addEventListener('change', function () {
        mesSeleccionado = selectMes.value;
        verificados_por_dia('verif_por_dia', mesSeleccionado);
    });

    verificados_por_dia('verif_por_dia', mesSeleccionado);

    function verificados_por_dia(filtro, mesSeleccionado) {

        fetch(
            DIR+'/personas/' + filtro + '/' + mesSeleccionado, {
            method: 'GET'
        }
        ).then(res => res.json()).then(function (data) {

            // console.log(data);
            if (data.data == null) {
                console.log("Sin datos");
            } else {
                //console.log(data.data);
                // data.data.forEach(persona => {
                //     console.log(moment(new Date(persona.created_at).toLocaleDateString('es-es'), 'DD/MM/YYYY').format('DD-MM-YYYY'));
                // })
                var canvas = document.getElementById('chart_total_por_dia');

                // Obtener el contexto del canvas
                var chart_total_por_dia = canvas.getContext('2d');

                // Destruir el gráfico existente si existe
                if (typeof window.myChart !== 'undefined') {
                    window.myChart.destroy();
                }
                window.myChart = new Chart(chart_total_por_dia, {
                    type: 'bar',
                    data: {
                        // labels: obtenerDiasDelMes(mesSeleccionado),
                        labels: data.labels,
                        datasets: [{
                            label: 'Personas',
                            // data: obtenerDatosParaMes(mesSeleccionado, data),
                            data: data.valores,
                            borderColor: "#BD1919",
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            datalabels: {
                                color: "black",
                                anchor: 'end',
                                align: 'top',
                                formatter: function (value, context) {
                                    return value + '';//texto al lado del valor
                                },
                                font: {
                                    weight: 'bold',
                                }
                            }
                        }
                    }
                });
            }

        })
            .catch(function (err) {
                console.log(err);
            })
    }

    verificados_por_edad();
    function verificados_por_edad() {

        fetch(
            DIR+'/edad', {
            method: 'GET'
        }
        ).then(res => res.json()).then(function (data) {
            // console.log(data);
            if (data.data == null) {
                console.log("Sin datos");
            } else {
                var cantidad_personas_edad = [];
                data.data.forEach(e => {
                    cantidad_personas_edad.push(e.cantidad_personas);

                })
                $("#contenedor_por_edad").html(`<canvas id="chart_total_por_edad"></canvas>`);
                var canvas = document.getElementById('chart_total_por_edad');
                var chart_total_por_edad = canvas.getContext('2d');
                new Chart(canvas, {
                    type: 'bar',
                    data: {
                        labels: ['Menor 18', '18 a 25', '26 a 35', '36 a 45', '46 a 55', '56 a 75', '76 o más'],
                        datasets: [{
                            label: 'Personas',
                            data: cantidad_personas_edad,
                            borderColor: "#BD1919",
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            datalabels: {
                                color: "black",
                                anchor: 'end',
                                align: 'top',
                                formatter: function (value, context) {
                                    return value + '';//texto al lado del valor
                                },
                                font: {
                                    weight: 'bold',
                                }
                            }
                        }
                    }
                });

            }

        })
            .catch(function (err) {
                console.log(err);
            })
    }

    verificados_por_genero();
    function verificados_por_genero() {

        fetch(
            DIR+'/genero', {
            method: 'GET'
        }
        ).then(res => res.json()).then(function (data) {
            // console.log(data);
            if (data.data == null) {
                console.log("Sin datos");
            } else {
                var cantidad_personas_genero = [];
                data.data.forEach(e => {
                    cantidad_personas_genero.push(e.cantidad_personas);

                })
                $("#contenedor_por_genero").html(`<canvas id="chart_total_por_genero"></canvas>`);
                var canvas = document.getElementById('chart_total_por_genero');
                var chart_total_por_genero = canvas.getContext('2d');
                new Chart(chart_total_por_genero, {
                    type: 'doughnut',
                    data: {
                        labels: [
                            'Mujeres',
                            'Hombres',
                        ],
                        datasets: [{
                            label: 'Cantidad',
                            data: cantidad_personas_genero,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)', //rojo
                                'rgba(57, 151, 255)', //azul
                            ],
                            borderColor: "#BD1919",
                            hoverOffset: 4
                        }]
                    },
                    options: {
                        plugins: {
                            datalabels: {
                                color: "black",
                                formatter: function (value, context) {
                                    return value + '';//texto al lado del valor
                                },
                                font: {
                                    weight: 'bold',
                                }
                            }
                        }
                    }
                });

            }

        })
            .catch(function (err) {
                console.log(err);
            })
    }

    $("#select_municipio").change(function () {
        municipio_id = this.value;

        consultarParroquias(municipio_id);
        verificados_por_jefe(municipio_id, parroquia_id);
    });
    $("#select_parroquia").change(function () {
        parroquia_id = this.value;
        verificados_por_jefe(municipio_id, parroquia_id);
    });
    function consultarParroquias(municipio_id) {
        fetch(
            DIR+'/municipios/show/' + municipio_id, {
            method: 'GET'
        }
        ).then(res => res.json()).then(function (data) {

            var parroquias = `<option value="0">SELECCIONE PARROQUIA</option>`;
            $("#select_parroquia").html("");
            if (data.status) {
                data.data.gl_parroquias.forEach(parroquia => {
                    parroquias += `<option value="${parroquia.id}">${parroquia.descripcion}</option>`;
                });

                $("#select_parroquia").html(parroquias);
            } else {
                console.log("Error");
            }

        })
            .catch(function (err) {
                console.log(err);
            })

    }
    function verificados_por_jefe(municipio_id, parroquia_id) {

        fetch(
            DIR+'/jefes/lista/' + municipio_id + '/' + parroquia_id, {
            method: 'GET'
        }
        ).then(res => res.json()).then(function (data) {
            // console.log(data);
            if (data.data == null) {
                console.log("Sin datos");
            } else {
                var nombres_jefes = [];
                var cantidad_personas_por_jefe = [];
                // if (data.data.length == 0) {
                //     $("#resultado_jefes").html("No hay jefes para este municipio");
                // } else {
                //     $("#resultado_jefes").html("Jefes registrados: " + data.data.length);
                // }

                data.data.forEach(jefe => {
                    nombres_jefes.push(jefe.nombre);
                    cantidad_personas_por_jefe.push(jefe.gl_personas.length);
                })
                var altura = 20 * parseInt(nombres_jefes.length);
                $("#contenedor_por_jefes").html(`<canvas id="chart_total_por_jefe" weight="400" height="${altura}"></canvas>`);
                var canvas = document.getElementById('chart_total_por_jefe');
                // Obtener el contexto del canvas
                var chart_total_por_jefe = canvas.getContext('2d');

                // Destruir el gráfico existente si existe
                // if (typeof window.myChart !== 'undefined') {
                //     window.myChart.destroy();
                // }

                // window.myChart = 

                var grafica_altura = new Chart(chart_total_por_jefe, {
                    type: 'bar',
                    data: {
                        labels: nombres_jefes,
                        datasets: [{
                            label: 'Registrados de 1 x 10 ',
                            data: cantidad_personas_por_jefe,
                            borderColor: "#BD1919",
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        indexAxis: 'y',
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            datalabels: {
                                color: "black",
                                anchor: 'center',
                                align: 'center',
                                formatter: function (value, context) {
                                    return value + '';//texto al lado del valor
                                },
                                font: {
                                    weight: 'bold',
                                }
                            }
                        },
                        // barThickness: 20,
                        barPercentage: 0.5,
                    }
                });
                // grafica_altura.canvas.parentNode.style.height = '400px';
            }

        })
            .catch(function (err) {
                console.log(err);
            })
    }

    verificados_por_municipio();
    function verificados_por_municipio() {

        fetch(
            DIR+'/municipios', {
            method: 'GET'
        }
        ).then(res => res.json()).then(function (data) {
            // console.log(data);
            if (data.data == null) {
                console.log("Sin datos");
            } else {
                const dataArray = Object.values(data.data);
                var nombres_municipios = [];
                var cantidad_personas_por_municipio = [];

                dataArray.sort((a, b) => b.total_personas - a.total_personas);

                Object.keys(dataArray).forEach(key => {
                    const valor = dataArray[key];
                    nombres_municipios.push(valor.nombre_municipio);
                    cantidad_personas_por_municipio.push(valor.total_personas);
                });

                var altura = 20 * parseInt(nombres_municipios.length);
                $("#contenedor_por_municipios").html(`<canvas id="chart_total_por_municipio" height="${altura}"></canvas>`);
                var canvas = document.getElementById('chart_total_por_municipio');
                var chart_total_por_municipio = canvas.getContext('2d');
                new Chart(canvas, {
                    type: 'bar',
                    data: {
                        labels: nombres_municipios,
                        datasets: [{
                            label: 'Personas',
                            data: cantidad_personas_por_municipio,
                            borderColor: "#BD1919",
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        indexAxis: 'y',
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            datalabels: {
                                color: "black",
                                anchor: 'center',
                                align: 'center',
                                formatter: function (value, context) {
                                    return ' ' + value;//texto al lado del valor
                                },
                                font: {
                                    weight: 'bold',
                                }
                            }
                        },
                        // barThickness: 20,
                        barPercentage: 0.5,
                    }
                });
            }

        })
            .catch(function (err) {
                console.log(err);
            })
    }

    verificados_por_parroquia();
    function verificados_por_parroquia() {

        fetch(
            DIR+'/parroquias', {
            method: 'GET'
        }
        ).then(res => res.json()).then(function (data) {
            // console.log(data);
            if (data.data == null) {
                console.log("Sin datos");
            } else {
                var nombres_parroquias = [];
                var cantidad_personas_por_parroquia = [];
                data.data.forEach(parroquia => {
                    nombres_parroquias.push(parroquia.nombre_parroquia);
                    cantidad_personas_por_parroquia.push(parroquia.cantidad_personas);
                });

                var altura = 20 * parseInt(nombres_parroquias.length);
                $("#contenedor_por_parroquia").html(`<canvas id="chart_total_por_parroquia" height="${altura}"></canvas>`);
                var canvas = document.getElementById('chart_total_por_parroquia');
                var chart_total_por_parroquia = canvas.getContext('2d');
                new Chart(canvas, {
                    type: 'bar',
                    data: {
                        labels: nombres_parroquias,
                        datasets: [{
                            label: 'Personas',
                            data: cantidad_personas_por_parroquia,
                            borderColor: "#BD1919",
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        indexAxis: 'y',
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            datalabels: {
                                color: "black",
                                anchor: 'center',
                                align: 'center',
                                formatter: function (value, context) {
                                    return ' ' + value;//texto al lado del valor
                                },
                                font: {
                                    weight: 'bold',
                                }
                            }
                        },
                        // barThickness: 20,
                        barPercentage: 0.5,
                    }
                });
            }

        })
            .catch(function (err) {
                console.log(err);
            })
    }

    verificados_por_centro();
    function verificados_por_centro() {

        fetch(
            DIR+'/centros', {
            method: 'GET'
        }
        ).then(res => res.json()).then(function (data) {
            // console.log(data);
            if (data.data == null) {
                console.log("Sin datos");
            } else {
                var nombres_centro = [];
                var cantidad_personas_por_centro = [];

                Object.keys(data.data).forEach(function (key) {
                    nombres_centro.push(key);
                    cantidad_personas_por_centro.push(data.data[key]);
                });
                var altura = 20 * parseInt(nombres_centro.length);
                $("#contenedor_por_centro").html(`<canvas id="chart_total_por_centro" height="${altura}"></canvas>`);
                var canvas = document.getElementById('chart_total_por_centro');
                var chart_total_por_centro = canvas.getContext('2d');
                new Chart(canvas, {
                    type: 'bar',
                    data: {
                        labels: nombres_centro,
                        datasets: [{
                            label: 'Personas',
                            data: cantidad_personas_por_centro,
                            borderColor: "#BD1919",
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            borderWidth: 2
                        }]
                    },
                    options: {
                        indexAxis: 'y',
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        },
                        plugins: {
                            datalabels: {
                                color: "black",
                                anchor: 'center',
                                align: 'center',
                                formatter: function (value, context) {
                                    return ' ' + value;//texto al lado del valor
                                },
                                font: {
                                    weight: 'bold',
                                }
                            }
                        },
                        // barThickness: 20,
                        barPercentage: 0.5,
                    }
                });
            }

        })
            .catch(function (err) {
                console.log(err);
            })
    }


    // const chart_top_por_tipo_usuario_barra = document.getElementById('chart_top_por_tipo_usuario_barra');
    // new Chart(chart_top_por_tipo_usuario_barra, {
    //     type: 'bar',
    //     data: {
    //         labels: ['MP.Valera', 'MP.Candelaria', 'MP.S Rafael Carvajal', '04', '05', '06', '07', '08', '09', '10'],
    //         datasets: [{
    //             label: 'Personas',
    //             data: [12, 21, 3, 5, 26, 3, 33, 12, 21, 3],
    //             borderColor: "#BD1919",
    //             backgroundColor: 'rgba(255, 99, 132, 0.2)',
    //             borderWidth: 2
    //         }]
    //     },
    //     options: {
    //         indexAxis: 'y',
    //         scales: {
    //             y: {
    //                 beginAtZero: true
    //             }
    //         },
    //         plugins: {
    //             datalabels: {
    //                 color: "black",
    //                 anchor: 'center',
    //                 align: 'center',
    //                 formatter: function (value, context) {
    //                     return ' ' + value;//texto al lado del valor
    //                 },
    //                 font: {
    //                     weight: 'bold',
    //                 }
    //             }
    //         }
    //     }
    // });

    // const chart_top_por_tipo_usuario_torta = document.getElementById('chart_top_por_tipo_usuario_torta');
    // new Chart(chart_top_por_tipo_usuario_torta, {
    //     type: 'pie',
    //     data: {
    //         labels: [
    //             'Mujeres',
    //             'Hombres',
    //         ],
    //         datasets: [{
    //             label: 'Cantidad',
    //             data: [300, 50],
    //             backgroundColor: [
    //                 'rgba(255, 99, 132, 0.2)',
    //                 'rgba(57, 151, 255)'
    //             ],
    //             borderColor: "#BD1919",
    //             hoverOffset: 4
    //         }]
    //     },
    //     options: {
    //         plugins: {
    //             datalabels: {
    //                 color: "black",
    //                 formatter: function (value, context) {
    //                     return value + '';//texto al lado del valor
    //                 },
    //                 font: {
    //                     weight: 'bold',
    //                 }
    //             }
    //         }
    //     }
    // });

</script>

@endsection