@extends('layouts.backend')

@section('css_after')
    <link rel="stylesheet" href="{{asset('css\vendor\dataTables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">

    <link rel="stylesheet" href="{{asset('css/fixedColumns.bootstrap5.min.css')}}">
    <link rel="stylesheet" href="{{asset('css/fixedHeader.bootstrap5.min.css')}}">
    @php
        $cliente=config('app.CLIENTE');

        //crear array meses para el select con el nombre y el valor en formato  solo con los meses del año actual
        $meses = array();
        $nombreMeses = [
            "01" => "Enero",
            "02" => "Febrero",
            "03" => "Marzo",
            "04" => "Abril",
            "05" => "Mayo",
            "06" => "Junio",
            "07" => "Julio",
            "08" => "Agosto",
            "09" => "Septiembre",
            "10" => "Octubre",
            "11" => "Noviembre",
            "12" => "Diciembre"
            ];
        // agregar a meses solo hasta el mes actual con su nombre y en formato YYYYMM
        for ($i=1; $i <= date('m'); $i++) { 
            $meses[date('Y').str_pad($i, 2, "0", STR_PAD_LEFT)] = $nombreMeses[str_pad($i, 2, "0", STR_PAD_LEFT)];
        }
    @endphp
@endsection

@section('content')



    
        <div class="row pt-1" style ="display:none">
            <div class="col-sm" style="width: 100%;">
                <div class="input-group mb-3">
                    <select class="custom-select" id="selectorMes"  style="width: 20%;">
                        @foreach($meses as $key => $value)
                            <option value="{{$key}}" @if($key == date('Ym')) selected @endif>{{$value}}</option>
                        @endforeach
                    </select>
                 
                </div>
            </div>
        

        </div>

        
        <div class="row h-100">
            <div class="col-sm bg-white text-center">
                <h5>Top 10 Locales por Cadena</h5>
                <div class="row">
                    <div class="col-sm bg-white text-center">
                        <h6>Mejor Venta</h6>
                        <div id="loading_top10locales" class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <div id="top10locales"></div>
                    </div>
                    <div class="col-sm bg-white text-center ">
                        <h6>Peor Venta (excluyendo Ventas <= 0)</h6>
                        <div id="loading_top10badlocales" class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <div id="top10badlocales"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm bg-white text-center">
                <h5>Top 10 Productos por Cadena</h5>
                <div class="row">
                    <div class="col-sm bg-white text-center">
                        <h6>Mejor Venta</h6>
                        <div id="loading_top10productos" class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <div id="top10productos"></div>
                    </div>
                    <div class="col-sm bg-white text-center">
                        <h6>Peor Venta (excluyendo Ventas <= 0)</h6>
                        <div id="loading_top10badproductos" class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <div id="top10badproductos"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row m-1">
            <div class="col-md-12">
                <div class="w-100 justify-content-center bg-white" id="chart-container5-loader" style="display: none;">
                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                </div>
                <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative;" id="chart-container5"></div>
            </div>
            
        </div>
        <div class="row m-1">
            <div class="col-md-12">
                <div class="w-100 justify-content-center bg-white" id="chart-container5-loader" style="display: none;">
                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                </div>
                <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative;" id="chart-container6"></div>
            </div>
            
        </div>
        @if($cliente == 'ducasse')
            <div class="row m-1">
                <div class="col-md-12">
                    <div class="w-100 justify-content-center bg-white" id="chart-container10-loader" style="display: none;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative;" id="chart-container10"></div>
                </div>
                
            </div>
            <div class="row m-1">
                <div class="col-md-6">
                    <h5> Alertas de Stock </h5>
                    <div class="w-100 justify-content-center bg-white" id="chart-container11-loader" style="display: none;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative;" id="chart-container11"></div>
                </div>
                <div class="col-md-6">
                    <h5>  Disponibilidad de Producto </h5>
                    <div class="w-100 justify-content-center bg-white" id="chart-container12-loader" style="display: none;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative;height:400px" id="chart-container12">


                    </div>
                </div>
                
                
            </div>
            <div class="row m-1">
                <div class="col-md-12">
                    <h5> Estimacion de Venta Perdida </h5>
                    <div class="w-100 justify-content-center bg-white" id="chart-container13-loader" style="display: none;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative;" id="chart-container13"></div>
                </div>
                
            </div>
            
        @endif
    
        <div class="row m-1">
            <div class="col-md-6">
                <h5>Top 15 Locales con Mayor Venta Perdida de los Ultm. 30 Dias</h5>

                <div class="w-100 justify-content-center bg-white" id="chart-container5-loader" style="display: none;">
                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                </div>
                <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative;" id="LocalesVentasCero"></div>
            </div>
            <div class="col-md-6">
                <h5>Top 15 Productos con Mayor Venta Perdida de los Ultm. 30 Dias</h5>

                <div class="w-100 justify-content-center bg-white" id="chart-container5-loader" style="display: none;">
                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                </div>
                <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative;" id="ProductosVentasCero"></div>
            </div>
            
        </div>
        <div class="row m-1">
            <div class="col-md-12">
                <div class="w-100 justify-content-center bg-white" id="chart-container5-loader" style="display: none;">
                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                </div>
                <div style="margin:0px;padding-top:0px;background-color:#FFF;position:relative;" id="VentaLenta"></div>
            </div>
            
        </div>
    
@endsection
@section('after_wrapper')

<!-- /End-bar -->
@endsection
@section('js_after')
    <!-- END Hero -->
    <script src="{{asset('config/datatables.locale.spanish.js')}}"></script>
    <script src="{{asset('config/modal.languege.js')}}"></script>
    <script src="{{asset("js/custom/utilidades.js")}}"></script>
    <script src="{{asset("js/custom/reporteriaGetter.js")}}"></script>
    
    <script src="{{asset('js\vendor\bootstrap-datepicker.min.js')}}"></script>
    <script src="{{ asset('js/vendor/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.print.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js\jszip.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.flash.min.js') }}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\fusioncharts.js')}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\fusioncharts.powercharts.js')}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\themes\fusioncharts.theme.fusion.js')}}"></script>
    <script>

        $(document).ready(()=>{
            topLocalesVentas();
            topBadLocalesVentas();
            topProductosVentas();
            topBadProductosVentas();
            ventasCategoria('ventas_b2b');
            EvoVentasQuiebres();
            LocalesVentasCero();
            ProductosVentasCero();

            if("{{$cliente}}" == 'ducasse'){
                cumplimientoUsuario();
                GrafPieAlertas();
                disponibleProductos();
                evoVentaPerdida();
            }
            



        });

        $("#btnActualizar").click(()=>{
            $("#top10locales").html("");
            $("#top10badlocales").html("");
            $("#top10productos").html("");
            $("#top10badproductos").html("");
            topLocalesVentas();
            topBadLocalesVentas();
            topProductosVentas();
            topBadProductosVentas();
            ventasCategoria('ventas_b2b');
            EvoVentasQuiebres();
            LocalesVentasCero();
            ProductosVentasCero();
            // VentaLenta();


        });

        let decimalsNumb = 2;
        if("{{$cliente}}" == 'ducasse'){
            decimalsNumb = 0;
        }

        function topLocalesVentas() {
            let mes = $("#selectorMes").val();
            $("#loading_top10locales").show();
            $.ajax({
                url: "/top10/ventaslocales",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mes: mes
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                let html = "";
                Object.values(valores).forEach(element => {
                    if(element.length != 0){
                        html += "<h6>"+Object.keys(valores).find(key => valores[key] === element)+"</h6>";
                        html += "<table class='table table-striped table-bordered table-hover table-sm' style='width: 100%;height:500px'>";
                        html += "<thead class=''><tr><th>Local</th><th>Ventas</th><th>Var</th></tr></thead>";
                        html += "<tbody>";
                        element.forEach(element2 => {
                            let variacion = ((element2.ventas_periodo_anterior == null)? '--': ((element2.ventas_periodo_anterior == 0) ? 0 : ((element2.ventas - element2.ventas_periodo_anterior) / element2.ventas_periodo_anterior * 100).toFixed(decimalsNumb))); 
                            let ventaAnterior = (element2.ventas_periodo_anterior == null) ? 0 : element2.ventas_periodo_anterior.toLocaleString('es-CL', { style: 'currency', currency: 'CLP' });
                            html += "<tr><td style='text-align: left;'>"+element2.local.local+"</td><td>"+new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(element2.ventas)+"</td>"+
                            "<td style='color: " + ((variacion < 0) ? "red;" : "green;") + "'>" + variacion + "%</td>"+
                            "</tr>";
                        });
                        html += "</tbody></table>";
                    }
                });
                $("#top10locales").append(html);
                $("#loading_top10locales").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function topBadLocalesVentas() {
            let mes = $("#selectorMes").val();
            $("#loading_top10badlocales").show();
            $.ajax({
                url: "/top10/malasventaslocales",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mes: mes
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                let html = "";
                Object.values(valores).forEach(element => {
                    if(element.length != 0){
                        html += "<h6>"+Object.keys(valores).find(key => valores[key] === element)+"</h6>";
                        html += "<table class='table table-striped table-bordered table-hover table-sm' style='width: 100%;height:500px'>";
                        html += "<thead class=''><tr><th>Local</th><th>Ventas</th><th>Var</th></tr></thead>";
                        html += "<tbody>";
                        element.forEach(element2 => {
                            let variacion = ((element2.ventas_periodo_anterior == null)? '--': ((element2.ventas_periodo_anterior == 0) ? 0 : ((element2.ventas - element2.ventas_periodo_anterior) / element2.ventas_periodo_anterior * 100).toFixed(decimalsNumb))); 
                            let ventaAnterior = (element2.ventas_periodo_anterior == null) ? 0 : element2.ventas_periodo_anterior.toLocaleString('es-CL', { style: 'currency', currency: 'CLP' });
                            html += "<tr><td style='text-align: left;'>"+element2.local.local+"</td><td>"+new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(element2.ventas)+"</td>"+
                            "<td style='color: " + ((variacion < 0) ? "red;" : "green;") + "'>" + variacion + "%</td>"+
                            "</tr>";
                        });
                        html += "</tbody></table>";
                    }
                });
                $("#top10badlocales").append(html);
                $("#loading_top10badlocales").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function topProductosVentas() {
            let mes = $("#selectorMes").val();
            $("#loading_top10productos").show();
            $.ajax({
                url: "/top10/topventasproductos",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mes: mes
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                let html = "";
                Object.values(valores).forEach(element => {
                    if(element.length != 0){
                        html += "<h6>"+Object.keys(valores).find(key => valores[key] === element)+"</h6>";
                        html += "<table class='table table-striped table-bordered table-hover table-sm' style='width: 100%;height:500px'>";
                        html += "<thead class=''><tr><th>Producto</th><th>Ventas</th><th>Var</th></tr></thead>";
                        html += "<tbody>";
                        element.forEach(element2 => {
                            let variacion = ((element2.ventas_periodo_anterior == null)? '--': ((element2.ventas_periodo_anterior == 0) ? 0 : ((element2.ventas - element2.ventas_periodo_anterior) / element2.ventas_periodo_anterior * 100).toFixed(decimalsNumb))); 
                            let ventaAnterior = (element2.ventas_periodo_anterior == null) ? 0 : element2.ventas_periodo_anterior.toLocaleString('es-CL', { style: 'currency', currency: 'CLP' });
                            html += "<tr><td style='text-align: left;'>"+element2.producto.nombre+"</td><td>"+new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(element2.ventas)+"</td>"+
                            "<td style='color: " + ((variacion < 0) ? "red;" : "green;") + "'>" + variacion + "%</td>"+
                            "</tr>";
                        });
                        html += "</tbody></table>";
                    }
                });
                $("#top10productos").append(html);
                $("#loading_top10productos").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function topBadProductosVentas() {
            let mes = $("#selectorMes").val();
            $("#loading_top10badproductos").show();
            $.ajax({
                url: "/top10/malasventasproductos",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mes: mes
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                let html = "";
                Object.values(valores).forEach(element => {
                    if(element.length != 0){
                        html += "<h6>"+Object.keys(valores).find(key => valores[key] === element)+"</h6>";
                        html += "<table class='table table-striped table-bordered table-hover table-sm' style='width: 100%;height:500px'>";
                        html += "<thead class=''><tr><th>Producto</th><th>Ventas</th><th>Var</th></tr></thead>";
                        html += "<tbody>";
                        element.forEach(element2 => {
                            let variacion = ((element2.ventas_periodo_anterior == null)? '--': ((element2.ventas_periodo_anterior == 0) ? 0 : ((element2.ventas - element2.ventas_periodo_anterior) / element2.ventas_periodo_anterior * 100).toFixed(decimalsNumb))); 
                            let ventaAnterior = (element2.ventas_periodo_anterior == null) ? 0 : element2.ventas_periodo_anterior.toLocaleString('es-CL', { style: 'currency', currency: 'CLP' });
                            html += "<tr><td style='text-align: left;'>"+element2.producto.nombre+"</td><td>"+new Intl.NumberFormat('es-CL', { style: 'currency', currency: 'CLP' }).format(element2.ventas)+"</td>"+
                            "<td style='color: " + ((variacion < 0) ? "red;" : "green;") + "'>" + variacion + "%</td>"+
                            "</tr>";
                        });
                        html += "</tbody></table>";
                    }
                });
                $("#top10badproductos").append(html);
                $("#loading_top10badproductos").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function ventasCategoria(unidad){
            let signo = (unidad == 'ventas_b2b') ? '$' : 'U';
            let categorias = [];
            let loading_div = (unidad == 'ventas_b2b')? '#chart-container5-loader' : '#chart-container6-loader';
            $(loading_div).show();
            $.ajax({
                url: "/grafico/VentasCategoria",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    unidad: unidad,
                },
            })
            .then(function(response) {
                let data = JSON.parse(response);
                let data_anterior = data.data_anterior;
                let data_actual = data.data_actual;
                let holdings = data.holdings;
                let dias = data.dias;
                let dataset2= [];
                $.each(dias, function(index2, dia){
                    categorias.push({ label: dia.toString() });
                });
                $.each(holdings, function(index, value){
                    let datos = {
                        seriesname: value.categoria+' - Ant',
                        initiallyhidden: "1",
                        data: []
                    }
                    $.each(dias, function(index2, dia){
                      (data_anterior[value.categoria])? (data_anterior[value.categoria][dia] === undefined) ?  datos.data.push({value: 0}) : datos.data.push({value: data_anterior[value.categoria][dia]}) : datos.data.push({value: 0});
                    });
                    dataset2.push(datos);  
                });
               
                $.each(holdings, function(index, value){
                    let datos = {
                        seriesname: value.categoria+' - actual',
                        data: []
                    }
                    $.each(dias, function(index2, dia){
                        (data_actual[value.categoria][dia] === undefined) ?  datos.data.push({value: 0}) : datos.data.push({value: data_actual[value.categoria][dia]});
                    });

                    dataset2.push(datos);  
                });
               
                let dataSource = {
                    chart: {
                        caption: "Ventas Mensuales ("+signo+") por categoría",
                        subcaption: "año anterior vs año actual",
                        yaxisname: "Ventas ("+signo+")",
                        xaxisname: "Fecha",
                        pixelsPerPoint: "0",
                        pixelsPerLabel: "30",
                        lineThickness: "1",
                        compactdatamode: "1",
                        dataseparator: "|",
                        labelHeight: "30",
                        UseCrossLine: "1",
                        theme: "fusion"

                    },
                    categories: [
                        {
                        category: categorias
                        }
                    ],
                    dataset: dataset2
                };
                FusionCharts.ready(function() {
                    let myChart = new FusionCharts({
                        type: "zoomline",
                        renderAt: (unidad == 'ventas_b2b')? "chart-container5" : "chart-container6",
                        width: "100%",
                        height: "25%%",
                        dataFormat: "json",
                        dataSource
                    }).render();
                });
             
                $(loading_div).hide();
            });
        }

        function EvoVentasQuiebres(){
            let signo = '$' ;
            let categorias = [];
            let loading_div =  '#chart-container5-loader' ;
            $(loading_div).show();
            $.ajax({
                url: "/grafico/EvoVentasQuiebres",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    // unidad: unidad,
                },
            })
            .then(function(response) {
                let data = JSON.parse(response);
                let ventas_0 = data.ventas_0;
                let total_quiebre = data.total_quiebre;
                let cantidad_registro = data.cantidad_registro;
                let quiebre = data.quiebre;
                let periodos = data.periodo;
                let dataset2= [];

                $.each(periodos, function(index2, periodo){
                    categorias.push({ label: periodo.toString()});
                });
                
                let datos2 = {
                        seriesname: 'Quiebre',
                        initiallyhidden: "0",
                        data: []
                    }
                $.each(periodos, function(index2, periodo){
                    (quiebre[periodo] === undefined) ?  datos2.data.push({value: 0,tooltext: "Cantidad de Quiebres: 0 <br> Cantidad de Registros: 0"}) : datos2.data.push({value: quiebre[periodo],tooltext: "Cantidad de quiebres: "+total_quiebre[periodo]+" <br> Cantidad de Registros: "+cantidad_registro[periodo]+" <br> Porcentaje: "+quiebre[periodo]+"%"});

                });
                dataset2.push(datos2);  

                let datos = {
                        seriesname: 'Ventas 0',
                        initiallyhidden: "0",
                        data: []
                    }
                $.each(periodos, function(index2, periodo){
                    (ventas_0[periodo] === undefined) ?  datos.data.push({value: 0}) : datos.data.push({value: ventas_0[periodo]});
                });
                dataset2.push(datos);  



              
               
                let dataSource = {
                    chart: {
                        caption: "Evolución Venta 0 y Quiebre",
                        yaxisname: "Porcentaje %",
                        xaxisname: "Periodos",
                        pixelsPerPoint: "0",
                        pixelsPerLabel: "30",
                        lineThickness: "1",
                        compactdatamode: "1",
                        dataseparator: "|",
                        labelHeight: "10",
                        UseCrossLine: "1",
                        theme: "fusion"

                    },
                    categories: [
                        {
                        category: categorias
                        }
                    ],
                    dataset: dataset2
                };
                FusionCharts.ready(function() {
                    let myChart = new FusionCharts({
                        type: "msline",
                        renderAt: "chart-container6",
                        width: "100%",
                        height: "25%%",
                        dataFormat: "json",
                        dataSource
                    }).render();
                });
             
            });
        }
        function VentaLenta(){
            let signo = '$' ;
            let categorias = [];
            let loading_div =  '#chart-container5-loader' ;
            $(loading_div).show();
            $.ajax({
                url: "/grafico/VentaLenta",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    // unidad: unidad,
                },
            })
            .then(function(response) {
                let data = JSON.parse(response);
                let ventas_0 = data.ventas_0;
                let venta_lenta = data.venta_lenta;
                let periodos = data.periodo;
                let dataset2= [];

                $.each(periodos, function(index2, periodo){
                    categorias.push({ label: periodo.toString()});
                });
                
                let datos2 = {
                        seriesname: 'Venta Lenta',
                        initiallyhidden: "0",
                        data: []
                    }
                $.each(periodos, function(index2, periodo){
                    (venta_lenta[periodo] === undefined) ?  datos2.data.push({value: 0}) : datos2.data.push({value: venta_lenta[periodo]});

                });
                dataset2.push(datos2);  




              
               
                let dataSource = {
                    chart: {
                        caption: "Evolución Venta Lenta",
                        yaxisname: "Porcentaje %",
                        xaxisname: "Periodos",
                        pixelsPerPoint: "0",
                        pixelsPerLabel: "30",
                        lineThickness: "1",
                        compactdatamode: "1",
                        dataseparator: "|",
                        labelHeight: "10",
                        UseCrossLine: "1",
                        theme: "fusion"

                    },
                    categories: [
                        {
                        category: categorias
                        }
                    ],
                    dataset: dataset2
                };
                FusionCharts.ready(function() {
                    let myChart = new FusionCharts({
                        type: "msline",
                        renderAt: "VentaLenta",
                        width: "100%",
                        height: "25%%",
                        dataFormat: "json",
                        dataSource
                    }).render();
                });
             
            });
        }


        function LocalesVentasCero() {
            let mes = $("#selectorMes").val();
            $("#loading_LocalesVentasCero").show();
            $.ajax({
                url: "/top10/LocalesVentasCero",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mes: mes
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                $("#LocalesVentasCero").html(valores.tabla);
                $("#loading_LocalesVentasCero").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }
        function ProductosVentasCero() {
            let mes = $("#selectorMes").val();
            $("#loading_ProductosVentasCero").show();
            $.ajax({
                url: "/top10/ProductosVentasCero",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    mes: mes
                },
            })
            .done(function(data) {
               
                let valores = JSON.parse(data);
                $("#ProductosVentasCero").html(valores.tabla);

                $("#loading_ProductosVentasCero").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function cumplimientoUsuario(cliente, tipo) {
            let loading_div =  '#chart-container10-loader' ;
            $(loading_div).show();
            return $.ajax({
                url: "/grafico/cumplimientoUsuario",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                  
                },
            })
            .done(function(data, textStatus, jqXHR) {
            

                (async _ => {
                    data2 = JSON.parse(data);
                    //data3 = JSON.parse(data2['data_col2d']);

                    await FusionCharts.ready(function() {
                        var myChart = new FusionCharts({
                        type: 'mscombidy2d',
                        renderAt: 'chart-container10',
                        width: '100%',
                        height: '400',
                        dataFormat: 'json',
                        dataSource: {
                            chart: {
                                caption: 'Cumplimiento Plan de Visitas',
                                yaxisname: "Visitas Totales",
                                syaxisname: "cumplimiento %", 
                                formatnumberscale: "0",
                                numberprefix: "",
                                numbersuffix: "",
                                sNumberSuffix: "%",
                                showvalues: "1",
                                theme: "fusion",
                                exportenabled: "1",
                            },
                            categories: [{
                                //"category": data2['cate_col2d'],
                                "category": JSON.parse('['+data2['cate_col2d']+']'),
                            }],
                            dataset: [
                                ('venta_30' in data2)? {
                                    "seriesname": 'Visitas Totales',
                                    "color": "#F6BD16",
                                    data: JSON.parse('['+data2['venta_30']+']'),
                                }: {},
                                ('doh' in data2)? {
                                    "seriesName": "Cumplimiento %",
                                    "parentYAxis": "S",
                                    "color": "#FB9649",
                                    "renderas": "line",
                                    data: JSON.parse('['+data2['doh']+']'),
                                }: {},
                            
                            ],
                        }
                        }).render();
                    });
                })();

                $(loading_div).hide();

            })
            .fail(function( jqXHR, textStatus, errorThrown ) {
                //console.log(jqXHR);
                document.getElementById("f_carga_grafinstockdoh").style.display = "none";
                $("#grafinstockdoh_cont").removeClass("d-none");
                $("#grafinstockdoh").find("#aplicarfiltrosparent").show();
            });
        }

        function GrafPieAlertas(cliente, tipo) {
            let loading_div =  '#chart-container11-loader' ;
            $(loading_div).show();
            return $.ajax({
                url: "/grafico/GrafPieAlertas",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                  
                },
            })
            .done(function(data, textStatus, jqXHR) {
            

                (async _ => {
                    data2 = JSON.parse(data);
                    //data3 = JSON.parse(data2['data_col2d']);

                    await FusionCharts.ready(function() {
                            var myChart = new FusionCharts({
                                type: 'pie2d',
                                renderAt: 'chart-container11',
                                width: '100%',
                                height: '400',
                                dataFormat: 'json',
                                dataSource: {
                                    chart: {
                                        showlegend: "1",
                                        showpercentvalues: "1",
                                        legendposition: "bottom",
                                        usedataplotcolorforlabels: "1",
                                        theme: "fusion",
                                    },
                                    data: [
                                        ('cvss' in data2) ? {
                                            label: "Quiebre",
                                            color: '#f1c40f',
                                            value: data2['cvss'],
                                        } : {},
                                        ('svss' in data2) ? {
                                            label: "Critico",
                                            color: '#c0392b',
                                            value: data2['svss'],
                                        } : {},
                                        ('svcs' in data2) ? {
                                            label: "Ajuste",
                                            color: '#f39c12',
                                            value: data2['svcs'],
                                        } : {},
                                        ('sobrestock' in data2) ? {
                                            label: "Sobre stock",
                                            color: '#f8e000',
                                            value: data2['sobrestock'],
                                        } : {},
                                        ('posible_quiebre' in data2) ? {
                                            label: "Posible Quiebre",
                                            color: '#f9e79f',
                                            value: data2['posible_quiebre'],
                                        } : {},
                                        ('sin_alertas' in data2) ? {
                                            label: "Sin Alertas",
                                            color: "#2ecc71",
                                            value: data2['sin_alertas'],
                                        } : {},
                                    ],
                                }
                            }).render();
                        });
                })();

                $(loading_div).hide();

            })
            .fail(function( jqXHR, textStatus, errorThrown ) {
                //console.log(jqXHR);
                document.getElementById("f_carga_grafinstockdoh").style.display = "none";
                $("#grafinstockdoh_cont").removeClass("d-none");
                $("#grafinstockdoh").find("#aplicarfiltrosparent").show();
            });
        }

        function disponibleProductos() {
            let loading_div =  '#chart-container12-loader' ;
            $(loading_div).show();

            $.ajax({
                url: "/top10/disponibleProductos",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                // console.log(valores.tabla);
                let html = "";
           
                $("#chart-container12").html(valores.tabla);
                $(loading_div).hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function evoVentaPerdida() {
            let loading_div =  '#chart-container13-loader' ;
            $(loading_div).show();

            $.ajax({
                url: "/top10/evoVentaPerdida",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
            
                $("#chart-container13").html(valores.tabla);
                $(loading_div).hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }
    </script>

    <script src="{{asset('js/dataTables.fixedColumns.min.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedHeader.min.js')}}"></script>
@endsection