@extends('layouts.app', ['activePage' => 'dashboard', 'titlePage' => __('Home')])

@section('content')
<div class="container-fluid ">

    <!-- <div class="row justify-content-end">
        <div class="col-md-4 text-right">
            <div class="cleanslate w24tz-current-time w24tz-middle" style="display: inline-block !important; visibility: hidden !important; min-width:300px !important; min-height:145px !important;">
                <p><a href="//24timezones.com/es_reloj/mexico_zapopan_hora.php" style="text-decoration: none" class="clock24" id="tz24-1636482038-c214309-eyJob3VydHlwZSI6MTIsInNob3dkYXRlIjoiMSIsInNob3dzZWNvbmRzIjoiMCIsImNvbnRhaW5lcl9pZCI6ImNsb2NrX2Jsb2NrX2NiNjE4YWJiZjY4Njg4MSIsInR5cGUiOiJkYiIsImxhbmciOiJlcyJ9" title="Zapopan hora actual" target="_blank" rel="nofollow">Zapopan</a></p>
                <div id="clock_block_cb618abbf686881"></div>
            </div>
        </div>
        <div class="col-md-2  text-right">
            <a target="_blank" href="https://hotelmix.es/weather/zapopan-27209">
                <img src="https://w.bookcdn.com/weather/picture/32_27209_1_4_34495e_250_2c3e50_ffffff_ffffff_1_2071c9_ffffff_0_6.png?scode=124&domid=583&anc_id=4078" alt="booked.net" />
            </a>
        </div>
    </div> -->
    <div class="row">
        <div class="col-md-3">
            <div class="card  h-100">
                <div class="card-header text-center">
                    <h6>PROYECTOS ACTIVOS</h6>
                </div>
                <div class="card-body text-center mt-0 pt-0" id="content_proyectos">

                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header text-center">
                    <h6>COTIZACIONES EN PROCESO</h6>
                </div>
                <div class="card-body text-center mt-0 pt-0" id="content_cotizaciones">

                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card h-100">
                <div class="card-header text-center">
                    <h6>PROYECTOS EN PROCESO</h6>
                </div>
                <div class="card-body text-center mt-0 pt-0" id="content_proyectos_proceso">

                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card ">
                <div class="card-header text-center">
                    <h6>PROYECTOS GANADOS</h6>
                </div>
                <div class="card-body text-center mt-0 pt-0" id="content_proyectos_ganados">

                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-2">
                            <div class="input-group input-group-static">
                                <label for="">Año consulta:</label>
                                <input type="number" min="1900" max="2099" value="2024" name="fecha_mes" id="fecha_mes" class="form-control">

                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group input-group-static">
                                <label for="">Vendedor:</label>
                                <select class="form-control " id="user_filter" style="width: 100%">
                                    <option value="">TODOS</option>
                                    @foreach ($data['users'] as $co)
                                    <option value="{{$co->id}}">{{$co->name}} ({{$co->username}})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="input-group input-group-static">
                                <label for="">Estatus:</label>
                                <select class="form-control " id="estatus_filter" style="width: 100%">
                                    <option value="">TODOS</option>
                                    @foreach ($data['estatus'] as $co)
                                    <option value="{{$co}}">{{$co}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2 mt-4">
                            <button class="btn btn-primary btn-sm " onclick="loadGridProyectos()">Aplicar</button>
                        </div>
                    </div>
                    <canvas id="chartProyectos" height="80%"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <!-- <div class="row">
                        <div class="col-md-2">
                            <div class="input-group input-group-static">
                                <label for="">Año consulta:</label>
                                <input type="number" min="1900" max="2099" value="2024" name="fecha_mes" id="fecha_mes" class="form-control">

                            </div>
                        </div>
                        <div class="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Vendedor:</label>
                                    <select class="form-control " id="user_filter" style="width: 100%">
                                        <option value="">TODOS</option>
                                        @foreach ($data['users'] as $co)
                                        <option value="{{$co->id}}">{{$co->name}} ({{$co->username}})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Estatus:</label>
                                    <select class="form-control " id="estatus_filter" style="width: 100%" >
                                        <option value="">TODOS</option>
                                        @foreach ($data['estatus'] as $co)
                                        <option value="{{$co}}">{{$co}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div> -->
                    <!-- <div class="col-md-2 mt-4">
                            <button class="btn btn-primary btn-sm " onclick="loadGridProyectosProceso()">Aplicar</button>
                        </div> -->
                    <!-- </div> -->
                    <canvas id="chartProyectosProceso" height="80%"></canvas>
                </div>
            </div>
        </div>
    </div>
        <div class="row mt-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                     <div class="row">
                        <!--<div class="col-md-2">
                            <div class="input-group input-group-static">
                                <label for="">Año consulta:</label>
                                <input type="number" min="1900" max="2099" value="2024" name="fecha_mes" id="fecha_mes" class="form-control">

                            </div>
                        </div>-->
                            <div class="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Vendedor:</label>
                                    <select class="form-control " id="userPorcent" style="width: 100%" onchange="loadProyectosPorcentaje()">
                                        <option value="0">TODOS</option>
                                        @foreach ($data['users'] as $co)
                                        <option value="{{$co->id}}">{{$co->name}} ({{$co->username}})</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Cliente:</label>
                                    <select class="form-control " id="clientePorcent" style="width: 100%" onchange="loadProyectosPorcentaje()">
                                        <option value="0">TODOS</option>
                                        @foreach ($data['clientes'] as $co)
                                        <option value="{{$co->Id}}">{{$co->Nom010a}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Mes:</label>
                                    <select class="form-control " id="mesPorcent" style="width: 100%" onchange="loadProyectosPorcentaje()">
                                        <option value="0">TODOS</option>
                                        <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" selected>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="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Anio:</label>
                                    <select class="form-control " id="anioPorcent" style="width: 100%" onchange="loadProyectosPorcentaje()">
                                        <option value="2021">2021</option>
                                        <option value="2022">2022</option>
                                        <option value="2023" selected>2023</option>
                                        <option value="2024">2024</option>
                                        <option value="2025">2025</option>
                                        <option value="2026">2026</option>
                                        <option value="2027">2027</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="input-group input-group-static">
                                    <label for="">Fecha de Entrega</label>
                                </div>
                            </div>
                    <!--<div class="col-md-2 mt-4">
                            <button class="btn btn-primary btn-sm " onclick="loadGridProyectosProceso()">Aplicar</button>
                        </div> -->
                    </div> 
                    <canvas id="chartProyectosPorcentaje" height="80%"></canvas>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection
@push('js')

<!-- <script type="text/javascript" src="//w.24timezones.com/l.js" async></script> -->

<script>
    $(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // const date = new Date();
        // const day = date.getDay(); // 👉️ get day of week

        // // 👇️ day of month - day of week (-6 if Sunday), otherwise +1
        // const diff = date.getDate() - day + (day === 0 ? -6 : 0);
        // fecha = new Date(date.setDate(diff)).toLocaleDateString("af-ZA");

        // const dateControl = document.getElementById('fecha_sem');
        // dateControl.value = fecha;

        // console.log(fecha);
        // $("#fecha_sem").flatpickr({
        //     enableTime: false,
        //     dateFormat: "Y-m-d",
        //     defaultDate: fecha,
        //     disable: [
        //         function(date) {
        //             // return true to disable
        //             return (date.getDay() === 1 || date.getDay() === 2 || date.getDay() === 3 || date.getDay() === 4 || date.getDay() === 5 || date.getDay() === 6 || date.getDay() === 7);

        //         }
        //     ],
        // });

        // $("#fecha_mes").flatpickr({
        //     enableTime: false,
        //     dateFormat: "Y-m-d",
        //     defaultDate: new Date(),
        // });

        // $("#fecha_mes_autos").flatpickr({
        //     enableTime: false,
        //     dateFormat: "Y-m-d",
        //     defaultDate: new Date(),
        // });
        loadInfoHeader();
        loadGridProyectos();
        loadProyectosPorcentaje();
        // loadGridProyectosSem();
        // loadGridProyectosComp();
        // loadGridAutos()

    });

    function loadInfoHeader() {
        $.ajax({
                url: "{{url('home/get_info')}}",
                type: 'POST',
                dataType: 'json',
            })
            .done(function(resp) {



                $('#content_proyectos').append(
                    '<h1 style="font-size: 3.6rem !important; margin: 0 auto">' + resp.data['proyectos']['cantidad'] + '</h1>'
                );

                $('#content_proyectos_proceso').append(
                    '<h1 style="font-size: 3.6rem !important; margin: 0 auto">' + resp.data['proyectos_proceso']['cantidad'] + '</h1>'
                );


                $('#content_cotizaciones').append(
                    '<h1 style="font-size: 3.6rem !important; margin: 0 auto">' + resp.data['cotizaciones']['cantidad'] + '</h1>'
                );

                $('#content_proyectos_ganados').append(
                    '<h1 style="font-size: 3.6rem !important; margin: 0 auto">' + resp.data['proyectos_ganados']['cantidad'] + '</h1>'
                );

                // $.each(resp.data, function(index, value) {
                //     // var porcentaje = (parseFloat(value['anteriores']) / parseFloat(value['nuevos'])) * 100
                //     var porcentaje = (100 / parseFloat(value['anteriores'])) * parseFloat(value['nuevos']);



                //     var text_porcentaje = '% del mes anterior';
                //     var color_au = 'text-success';
                //     var icon = 'arrow_upward';
                //     if (value['diferencia'] < 0) {
                //         color_au = 'text-danger';
                //         icon = 'arrow_downward';
                //         text_porcentaje = '% del mes anterior';
                //         porcentaje = Math.abs(porcentaje);
                //     }

                //     if (porcentaje == Infinity)
                //         porcentaje = 100 * value['nuevos'];

                //     if (isNaN(porcentaje))
                //         porcentaje = 0;

                //     $('#' + value['id']).append(
                //         '<h1 style="font-size: 3.6rem !important;">' + value['nuevos'] + '</h1>' +
                //         '<p class="' + color_au + '" style="font-size: 1.8rem !important;"><i class="material-icons">' + icon + '</i>' + value['anteriores'] + '</p>' +
                //         '<span class="text-muted align-middle">' + porcentaje.toFixed(2) + text_porcentaje + '</span>'
                //     )
                // })

                setDataProyectosProceso(resp.data['proyectos_proceso']['data'], resp.data['proyectos_proceso']['colores'])
            })

            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }

    let myChartPros;

    function setDataProyectosProceso(info, colores) {


        var proyectos_proceso_ca = [];
        var proyectos_proceso_des = [];
        var proyectos_proceso_col = [];
        // const meses = [
        //     ['Enero'],
        //     ['Febrero'],
        //     ['Marzo'],
        //     ['Abril'],
        //     ['Mayo'],
        //     ['Junio'],
        //     ['Julio'],
        //     ['Agosto'],
        //     ['Septiembre'],
        //     ['Octubre'],
        //     ['Noviembre'],
        //     ['Diciembre'],
        //     ['Acumulado']
        // ]

        $.each(info, function(index, value) {
            // var porcentaje = 0;
            var porcentaje_val = value['porcentajeAvance'];

            // porcentaje = (value['piezas'] / value['piezasTotales']) * 100;

            // if (porcentaje == 0) {
            //     porcentaje_val = 100;
            // } else if (porcentaje == 100) {
            //     porcentaje_val = 1;
            // } else {
            //     porcentaje_val = porcentaje;
            // }

            // if (isNaN(porcentaje_val)) {
            //     porcentaje_val = 1;
            // }

            proyectos_proceso_ca.push(Math.round(porcentaje_val))
            proyectos_proceso_des.push(value['nombreAlmacen'])

            var limite_inferior = 0;
            $.each(colores, function(index_col, value_col) {
                if ((porcentaje_val >= limite_inferior) && (porcentaje_val <= value_col['porcentaje'])) {
                    proyectos_proceso_col.push(value_col['color']);
                    return false;
                }
                limite_inferior = value_col['porcentaje'];
            })

        })


        // foreach($prioridades as $key => $value) {
        //     if (($days >= $limite_inferior) && ($days <= $value - > periodo)) {
        //         $id_prioridad = $value - > id;
        //         break;
        //     }
        //     $limite_inferior = $value - > periodo;
        // }



        // console.log(info)
        // return false;
        console.log('33333333333----')
        console.log(proyectos_proceso_des)
        console.log(proyectos_proceso_ca)
        var data = {
            labels: proyectos_proceso_des,
            datasets: [{
                label: '% de avance',
                data: proyectos_proceso_ca,
                borderColor: '#000',
                backgroundColor: proyectos_proceso_col,
            }]
        };

        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'PROYECTOS EN PROCESO',
                        font: {
                            size: 16,
                        }
                    },
                },
                scales: {
                    y: {
                        ticks: {
                            callback: function(val, index) {
                                // Hide every 2nd tick label
                                return this.getLabelForValue(val) + '%';
                            },
                            precision: 0
                        }
                    },
                    // x: {
                    //     ticks: {
                    //         callback: function(val, index) {
                    //             // Hide every 2nd tick label
                    //             return 'Código: ' + this.getLabelForValue(val);
                    //         },
                    //     }
                    // }
                }
            }
        };


        var chart = document.getElementById('chartProyectosProceso').getContext("2d")
        if (myChartPros) {
            myChartPros.destroy();
        }
        myChartPros = new Chart(
            chart,
            config
        );
        setTimeout(() => {
            $('#loadingLoad').modal('hide');
        }, 2000);
    }


    function loadGridProyectos(tipo = 0, chartType = 0) {
        if (tipo == 1) {
            $('#loadingLoad').modal('show');
        }
        $.ajax({
                url: "{{url('home/get_proyectos')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    fecha: $('#fecha_mes').val(),
                    vendedor: $('#user_filter option:selected').val(),
                    estatus: $('#estatus_filter option:selected').val(),
                },
            })
            .done(function(resp) {
                setDataServicios(resp.proyectos)
                // $('.btnLoadBalance').show('slow');
                // $('.btnLoadAbonos').show('slow');
                // $('.btnLoadPagos').show('slow');

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }


    let myChart;

    function setDataServicios(info) {

        const meses = [
            ['Enero'],
            ['Febrero'],
            ['Marzo'],
            ['Abril'],
            ['Mayo'],
            ['Junio'],
            ['Julio'],
            ['Agosto'],
            ['Septiembre'],
            ['Octubre'],
            ['Noviembre'],
            ['Diciembre'],
            ['Acumulado']
        ]
        var data = {
            labels: meses,
            datasets: [{
                label: 'Cantidad de proyectos levantados',
                data: info,
                borderColor: '#000',
                backgroundColor: "#437793",
            }]
        };

        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'PROYECTOS LEVANTADOS',
                        font: {
                            size: 16,
                        }
                    },
                },
                scales: {
                    y: {
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        };


        var chart = document.getElementById('chartProyectos').getContext("2d")
        if (myChart) {
            myChart.destroy();
        }
        myChart = new Chart(
            chart,
            config
        );
        setTimeout(() => {
            $('#loadingLoad').modal('hide');
        }, 2000);
    }



    function loadGridProyectosSem(tipo = 0, chartType = 0) {
        if (tipo == 1) {
            $('#loadingLoad').modal('show');
        }
        $.ajax({
                url: "{{url('home/get_proyectos_sem')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    fecha: $('#fecha_sem').val(),
                }
            })
            .done(function(resp) {
                setDataServiciosSem(resp.dataServicios)
                // $('.btnLoadBalance').show('slow');
                // $('.btnLoadAbonos').show('slow');
                // $('.btnLoadPagos').show('slow');

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }


    let myChartServiciosSem;

    function setDataServiciosSem(info) {
        const semana = [
            ['Lunes'],
            ['Martes'],
            ['Miercoles'],
            ['Jueves'],
            ['Viernes'],
            ['Sabado'],
            ['Domingo'],
            ['Acumulado'],
        ]
        // $.each(info, function(index, value) {
        //     nombre.push(value['Nombre'])
        //     cantidades.push(value['cantidad_docs'])
        //     color.push(getRandomRgb())
        // })

        var data = {
            labels: semana,
            datasets: [{
                label: 'Semana anterior',
                data: info['semana_pasada'],
                borderColor: '#000',
                backgroundColor: "#EBB809",
            }, {
                label: 'Semana seleccionada',
                data: info['semana'],
                borderColor: '#000',
                backgroundColor: "#437793",
            }, ]
        };
        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'PROYECTOS DIARIOS LEVANTADOS',
                        font: {
                            size: 16,
                        }
                    },

                },
                locale: 'en-US',
            }
        };

        var chart = document.getElementById('chartServiciosSem').getContext("2d")
        if (myChartServiciosSem) {
            myChartServiciosSem.destroy();
        }
        myChartServiciosSem = new Chart(
            chart,
            config
        );
        setTimeout(() => {
            $('#loadingLoad').modal('hide');
        }, 2000);
    }

    function getRandomRgb() {
        var num = Math.round(0xffffff * Math.random());
        var r = num >> 16;
        var g = num >> 8 & 255;
        var b = num & 255;
        return 'rgb(' + r + ', ' + g + ', ' + b + ', .7)';
    }



    function loadGridProyectosComp() {
        $.ajax({
                url: "{{url('home/get_proyectos_comp')}}",
                type: 'POST',
                dataType: 'json',
            })
            .done(function(resp) {
                setDataRecepcion(resp.dataRecepcion[0])
            })

            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
    }


    let myChartRecepcion;

    function setDataRecepcion(info) {


        // console.log(info)
        var data = {
            labels: ['Levantados', 'Ganados'],
            datasets: [{
                label: 'Cantidad',
                data: [info['levantados'], info['ganados']],
                backgroundColor: ['#EBB809', '#28D10A'],
            }]
        };
        const config = {
            type: 'pie',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'PROYECTOS MENSUALES',
                        font: {
                            size: 16,
                        }
                    },

                },
                locale: 'en-US',
            }
        };

        var chart = document.getElementById('chartRecepcion').getContext("2d")
        if (myChartRecepcion) {
            myChartRecepcion.destroy();
        }
        myChartRecepcion = new Chart(
            chart,
            config
        );

    }

    function loadGridAutos(tipo = 0, chartType = 0) {
        $.ajax({
                url: "{{url('home/get_autos')}}",
                type: 'POST',
                dataType: 'json',
                data: {
                    fecha: $('#fecha_mes_autos').val(),
                },
            })
            .done(function(resp) {
                setDataAutos(resp.dataAutos)
                // $('.btnLoadBalance').show('slow');
                // $('.btnLoadAbonos').show('slow');
                // $('.btnLoadPagos').show('slow');

            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });

    }


    let myChartAutos;

    function setDataAutos(info) {
        var año = info['anio'];
        var mes = info['mes'];

        const dias = [];

        var diasMes = new Date(año, mes, 0).getDate();
        var diasSemana = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];

        for (var dia = 1; dia <= diasMes; dia++) {
            var indice = new Date(año, mes - 1, dia).getDay();
            dias.push([diasSemana[indice] + " #" + dia])
        }

        dias.push(["Acumulado"])

        // console.log(dias);
        // console.log(info['autos']);

        var data = {
            labels: dias,
            datasets: [{
                label: 'Cantidad',
                data: info['autos'],
                borderColor: '#000',
                backgroundColor: "#437793",
            }]
        };


        const config = {
            type: 'bar',
            data: data,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'TOTAL DE AUTOS',
                        font: {
                            size: 16,
                        }
                    },

                },
                locale: 'en-US',
            }
        };


        var chart = document.getElementById('myChartAutos').getContext("2d")
        if (myChartAutos) {
            myChartAutos.destroy();
        }
        myChartAutos = new Chart(
            chart,
            config
        );
        setTimeout(() => {
            $('#loadingLoad').modal('hide');
        }, 2000);
    }
    function loadProyectosPorcentaje(){
        $.ajax({
            url: "{{url('home/get_proyectos_porcentaje')}}",
            type: 'POST',
            dataType: 'json',
            data: {
                user: $('#userPorcent').val(),
                cliente: $('#clientePorcent').val(),
                mes: $('#mesPorcent').val(),
                anio: $('#anioPorcent').val(),
            },
        })
        .done(function(resp) {
            console.log('-------------------------------------------------')
            console.log(resp.tooltip)
            console.log("success");
                var dias = ['10','20','30','40','50','60','70','80','90','100']
                var data = {
                    labels: resp.labels,
                    datasets: [{
                        label: 'Porcentaje',
                        data: resp.tooltip,
                        borderColor: '#000',
                        backgroundColor: "#437793",
                    }]
                };

                const config = {
                    type: 'bar',
                    data: data,
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                position: 'top',
                            },
                            title: {
                                display: true,
                                text: 'PORCENTAJE AVANCE PROYECTOS',
                                font: {
                                    size: 16,
                                }
                            },
                            tooltip: {
                                callbacks: {
                                        label: function(context) {
                                            console.log(context)
                                            return context.raw.estatus+' - '+context.raw.y+'% \n'+context.raw.desc;
                                        
                                        }
                                }
                            },
                        },
                        scales: {
                              y: {
                                beginAtZero: true,
                                min: 0,
                                max: 100,
                              },

                        },
                        locale: 'en-US',
                    }
                };
                console.log(config)
                console.log('-------------------------------------------------')
                var chart = document.getElementById('chartProyectosPorcentaje').getContext("2d")
                if (myChartAutos) {
                    myChartAutos.destroy();
                }
                myChartAutos = new Chart(
                    chart,
                    config
                );
                setTimeout(() => {
                    $('#loadingLoad').modal('hide');
                }, 2000);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    }

</script>
@endpush