@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)];
        }
        // $salida = json_encode(['2' => __('messages.ventas'), '1' => __('messages.unidades'),  '10' => 'Litros']);


    @endphp
@endsection

@section('content')
           
<style>
    .nav-tabs-custom {
        margin-bottom: 10px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-radius: 3px;
    }
    .header{
        font-size: 15px !important;
        border-bottom: 1px solid #f4f4f4;
        padding: 0 10px;
        line-height: 35px;
    }
    .container-fluid{
        padding: 0px !important;
    }
    .card{
        margin-bottom: 0px !important;
    }
</style>

            <div class="col-md-auto obj_filtro">
                    <div style="text-align:center; font-size: 1.0em;color:#566573">
                        Salida (Tabla y Graficos)
                            <div class="form-group">
                                <label style="width: 120px">
                                    <select id="salida_dash" name="salida_dash2" class="select2 form-control" data-toggle="select2">
                                        <option value="unidades_b2b">Unidades</option>
                                        <option value="ventas_b2b" Selected>Ventas</option>
                                        <option value="unidades">Litros</option>  
                                    </select> 
                                </label>
                            </div>
                        
                    </div>
            </div>

            <div class="col-md-auto obj_filtro">

                <div style="text-align:center; font-size: 1.0em;color:#566573">
                Cliente
                    <div class="form-group">
                        <label style="width: 120px">
                            <select id="f_cliente" name="f_cliente2" class="select2 form-control" data-toggle="select2">
                                @forEach($clientes as $cliente)
                                    <option value="{{$cliente->valor}}">{{$cliente->nombre}}</option>
                                @endforeach

                            </select> 
                        </label>
                        <div style="width: 25px; margin-left:10px; height: 25px; background-color: rgb(145,145,145);" 
                        class="d-inline-flex align-middle rounded-circle justify-content-center text-white align-items-center info-title" 
                        data-toggle="infobox" data-html="true" onclick="openModal('modal-ventas-holding')" >
                            <i class="fas fa-info" style="font-size: 1.25em;"></i>
                        </div>
                    </div>
                
                </div>


                
            </div>
            <div class="modal fade bd-example-modal-lg" id="modal-ventas-holding" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="">Gráfico Comparacion Mensual</h5>     
                        </div>
                        <div class="text-center">
                            <img src="{{asset('images/modal-ventas-holding.png')}}" class="img-fluid" alt="Responsive image">
                        </div>

                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores de Cliente o de Salida.</p>
                        <ul>
                            <li><b>Selector Cliente:</b> Definir el clientes a filtrar.</li>
                            <li><b>Selector Salida</b> Definir el tipo de salida que tendra el reporte (Ventas, Unidades o Litros)</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>


                        <p><b>Tener en consideracion: En la tabla de Cadena solo tomara en cuenta en selector de salida.</b></p>

                    </div>
                </div>
            </div>       
            
            <div class="row m-1">
                
                <div class="col-md-7">
                    <div class="w-100 justify-content-center bg-white" id="tabla_ytd-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="tabla_ytd"></div>
                </div>
                <div class="col-md-5">
                    <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;height:400px" id="chart-container5">


                    </div>
                </div>

            </div>

     
        <div class="col-md-auto obj_filtro">
            <div style="text-align:center; font-size: 1.0em;color:#566573">
               Cadena
                <div class="form-group">
                    <label style="width: 120px">
                        <select id="f_cadena" name="f_cadena2" class="select2 form-control" data-toggle="select2">
                            @forEach($cadenas as $cadena)
                                <option value="{{$cadena->valor}}">{{$cadena->nombre}}</option>
                            @endforeach

                        </select> 
                    </label>
                    <div style="width: 25px; margin-left:10px; height: 25px; background-color: rgb(145,145,145);" 
                    class="d-inline-flex align-middle rounded-circle justify-content-center text-white align-items-center info-title" 
                    data-toggle="infobox" data-html="true" onclick="openModal('modal-ventas-cadena')" >
                        <i class="fas fa-info" style="font-size: 1.25em;"></i>
                    </div>
                </div>
            
            </div>
        </div>
        <div class="modal fade bd-example-modal-lg" id="modal-ventas-cadena" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Gráfico Comparacion Mensual y Ventas Mensuales</h5>     
                    </div>
                    <div class="text-center">
                        <img src="{{asset('images/modal-ventas-cadena.png')}}" class="img-fluid" alt="Responsive image">
                    </div>

                    <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores de Cadena o de Salida.</p>
                    <ul>
                        <li><b>Selector Cadena:</b> Definir la Cadena a filtrar.</li>
                        <li><b>Selector Salida</b> Definir el tipo de salida que tendra el reporte (Ventas, Unidades o Litros)</li>
                    </ul>
                    <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                </div>
            </div>
        </div>  
        <div class="row m-1">
            
            <div class="col-md-7">
                <div class="w-100 justify-content-center bg-white" id="chart-container1-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-container1"></div>
            </div>
            <div class="col-md-5">
                <div class="w-100 justify-content-center bg-white" id="chart-container2-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-container2"></div>
            </div>

        </div>
        <div class="col-md-auto obj_filtro">
            <div style="text-align:center; font-size: 1.0em;color:#566573">
                Supervisores
                <div class="form-group">
                    <label style="width: 200px">
                        <select id="f_supervisor" name="f_supervisor2" class="select2 form-control" data-toggle="select2" >
                            @forEach($supervisor as $supervisores)
                                @if($supervisores->valor =! null && !empty($supervisores->valor) && $supervisores->valor != 'NO ASIGNADO')
                                    <option value="{{$supervisores->nombre}}">{{$supervisores->nombre}}</option>
                                @endif
                            @endforeach
                    
                        </select> 
                    </label>

                    <div style="width: 25px; margin-left:10px; height: 25px; background-color: rgb(145,145,145);" 
                        class="d-inline-flex align-middle rounded-circle justify-content-center text-white align-items-center info-title" 
                        data-toggle="infobox" data-html="true" onclick="openModal('modal-ventas-supervisor')" >
                            <i class="fas fa-info" style="font-size: 1.25em;"></i>
                        </div>
                </div>
            
            </div>
        </div>
        <div class="modal fade bd-example-modal-lg" id="modal-ventas-supervisor" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="">Gráfico Comparacion Mensual y Ventas Mensuales</h5>     
                    </div>
                    <div class="text-center">
                        <img src="{{asset('images/modal-ventas-supervisor.png')}}" class="img-fluid" alt="Responsive image">
                    </div>

                    <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores de Supervisor o de Salida.</p>
                    <ul>
                        <li><b>Selector Supervisor:</b> Definir el Supervisor a filtrar.</li>
                        <li><b>Selector Salida</b> Definir el tipo de salida que tendra el reporte (Ventas, Unidades o Litros)</li>
                    </ul>
                    <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                </div>
            </div>
        </div>  
        <div class="row m-1">
       
            <div class="col-md-7">
                <div class="w-100 justify-content-center bg-white" id="chart-container3-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-container3"></div>
            </div>
            <div class="col-md-5">
                <div class="w-100 justify-content-center bg-white" id="chart-container4-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-container4">


                </div>
            </div>

        </div>

        <div class="row h-100">
            <div class="col-sm bg-white text-center">
                <h5>Top 10 Locales</h5>
                <div class="row">
                    <div class="col-sm bg-white text-center">
                        <div id="loading_top10locales" class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <div id="top10locales"></div>
                    </div>
                </div>
            </div>
            
        </div>

        <div class="rouw h-100">
            <div class="col-sm bg-white text-center">
                <h5>Top 10 Productos</h5>
                <div class="row">
                    <div class="col-sm bg-white text-center">
                        <div id="loading_top10productos" class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <div id="top10productos"></div>
                    </div>
                </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(()=>{
            // topProductosVentas();
            EvoYTDTeam();
            GrafEvoLinea3();
           
            GrafEvoBarra();
            GrafEvoLinea();
            GrafEvoBarra2();
            GrafEvoLinea2();
            topLocalesVentas();
            topProductosVentas();

            $("#f_cadena").change(function(){
                GrafEvoBarra();
                GrafEvoLinea();
            });
            $("#f_supervisor").change(function(){
                GrafEvoBarra2();
                GrafEvoLinea2();
            });
            $("#f_cliente").change(function(){
                GrafEvoLinea3();
            });
            $('#salida_dash').change(function(){
                EvoYTDTeam();
                GrafEvoLinea3();
            
                GrafEvoBarra();
                GrafEvoLinea();
                GrafEvoBarra2();
                GrafEvoLinea2();
            });
            



        });

 
        let decimalsNumb = 2;
      

        function topLocalesVentas() {
            $("#loading_top10locales").show();
            $.ajax({
                url: "/DashboardTeam/ventaslocales",
                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 = "";
           
                $("#top10locales").html(valores.tabla);
                
                $("#loading_top10locales").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

     

        function topProductosVentas() {
            $("#loading_top10productos").show();
            $.ajax({
                url: "/DashboardTeam/topventasproductos",
                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 = "";
           
                $("#top10productos").html(valores.tabla);
                $("#loading_top10productos").hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

       

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

           return $.ajax({
                url: "DashboardTeam/GrafEvoBarra",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    tipo : 'cadena',
                    cadena : $('#f_cadena').val(),
                    salida: $('#salida_dash').val(),

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

                    await FusionCharts.ready(function() {
                        var myChart = new FusionCharts({
                        type: 'mscombidy2d',
                        renderAt: 'chart-container1',
                        width: '100%',
                        height: '400',
                        dataFormat: 'json',
                        dataSource: {
                            chart: {
                                caption: 'Ventas Mensuales',
                                yaxisname: "Ventas ($)",
                                formatnumberscale: "0",
                                numberprefix: "",
                                numbersuffix: "",
                                showvalues: "1",
                                theme: "fusion",
                                exportenabled: "1",
                            },
                            categories: [{
                                //"category": data2['cate_col2d'],
                                category: JSON.parse('['+data2['cate_col2d']+']'),
                            }],
                            dataset: [
                                ('cadena' in data2)? {
                                    seriesname: $('#f_cadena').val(),
                                    data: JSON.parse('['+data2['cadena']+']'),
                                }: {},
                               
                            ],
                        }
                        }).render();
                    });
                })();
                $(loading_div).hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

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

           return $.ajax({
                url: "DashboardTeam/GrafEvoLinea",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    tipo : 'cadena',
                    salida: $('#salida_dash').val(),

                    cadena : $('#f_cadena').val(),
                },
            })
            .done(function(data) {
                (async _ => {
                    data2 = JSON.parse(data);
                    //data3 = JSON.parse(data2['data_col2d']);

                    await FusionCharts.ready(function() {
                        var myChart = new FusionCharts({
                        type: 'mscombidy2d',
                        renderAt: 'chart-container2',
                        width: '100%',
                        height: '400',
                        dataFormat: 'json',
                        dataSource: {
                            chart: {
                                caption: 'Comparación Mensual',
                                yaxisname: "Ventas ($)",
                                formatnumberscale: "0",
                                numberprefix: "",
                                numbersuffix: "",
                                showvalues: "1",
                                theme: "fusion",
                                exportenabled: "1",
                            },
                            categories: [{
                                //"category": data2['cate_col2d'],
                                category: JSON.parse('['+data2['cate_col2d']+']'),
                            }],
                            dataset: [
                                ('cadena' in data2)? {
                                    seriesname: $('#f_cadena').val(),
                                    renderAs: "line",

                                    data: JSON.parse('['+data2['cadena']+']'),
                                }: {},
                               
                            ],
                        }
                        }).render();
                    });
                })();
                $(loading_div).hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

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

           return $.ajax({
                url: "DashboardTeam/GrafEvoBarra",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    tipo : 'supervisor',
                    supervisor : $('#f_supervisor').val(),
                    salida: $('#salida_dash').val(),

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

                    await FusionCharts.ready(function() {
                        var myChart = new FusionCharts({
                        type: 'mscombidy2d',
                        renderAt: 'chart-container3',
                        width: '100%',
                        height: '400',
                        dataFormat: 'json',
                        dataSource: {
                            chart: {
                                caption: 'Ventas Mensuales',
                                yaxisname: "Ventas ($)",
                                formatnumberscale: "0",
                                numberprefix: "",
                                numbersuffix: "",
                                showvalues: "1",
                                theme: "fusion",
                                exportenabled: "1",
                            },
                            categories: [{
                                //"category": data2['cate_col2d'],
                                category: JSON.parse('['+data2['cate_col2d']+']'),
                            }],
                            dataset: [
                                ('cadena' in data2)? {
                                    seriesname: $('#f_supervisor').val(),
                                    data: JSON.parse('['+data2['cadena']+']'),
                                }: {},
                               
                            ],
                        }
                        }).render();
                    });
                })();
                $(loading_div).hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

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

           return $.ajax({
                url: "DashboardTeam/GrafEvoLinea",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    tipo : 'supervisor',
                    salida: $('#salida_dash').val(),

                    supervisor : $('#f_supervisor').val(),
                },
            })
            .done(function(data) {
                (async _ => {
                    data2 = JSON.parse(data);
                    //data3 = JSON.parse(data2['data_col2d']);

                    await FusionCharts.ready(function() {
                        var myChart = new FusionCharts({
                        type: 'mscombidy2d',
                        renderAt: 'chart-container4',
                        width: '100%',
                        height: '400',
                        dataFormat: 'json',
                        dataSource: {
                            chart: {
                                caption: 'Comparación Mensual',
                                yaxisname: "Ventas ($)",
                                formatnumberscale: "0",
                                numberprefix: "",
                                numbersuffix: "",
                                showvalues: "1",
                                theme: "fusion",
                                exportenabled: "1",
                            },
                            categories: [{
                                //"category": data2['cate_col2d'],
                                category: JSON.parse('['+data2['cate_col2d']+']'),
                            }],
                            dataset: [
                                ('cadena' in data2)? {
                                    seriesname: $('#f_supervisor').val(),
                                    renderAs: "line",

                                    data: JSON.parse('['+data2['cadena']+']'),
                                }: {},
                               
                            ],
                        }
                        }).render();
                    });
                })();
                $(loading_div).hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function EvoYTDTeam() {
            let loading_div =  '#tabla_ytd-loader' ;
            $(loading_div).show();
                        $.ajax({
                url: "/DashboardTeam/EvoYTDTeam",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    salida: $('#salida_dash').val(),
                },
            })
            .done(function(data) {
                let valores = JSON.parse(data);
                // console.log(valores.tabla);
                let html = "";
           
                $("#tabla_ytd").html(valores.tabla);
                $(loading_div).hide();

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

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

           return $.ajax({
                url: "DashboardTeam/GrafEvoLinea",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    tipo : 'holding',
                    cliente : $('#f_cliente').val(),
                    salida: $('#salida_dash').val(),

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

                    await FusionCharts.ready(function() {
                        var myChart = new FusionCharts({
                        type: 'mscombidy2d',
                        renderAt: 'chart-container5',
                        width: '100%',
                        height: '400',
                        dataFormat: 'json',
                        dataSource: {
                            chart: {
                                caption: 'Comparación Mensual',
                                yaxisname: "Ventas ($)",
                                formatnumberscale: "0",
                                numberprefix: "",
                                numbersuffix: "",
                                showvalues: "1",
                                theme: "fusion",
                                exportenabled: "1",
                            },
                            categories: [{
                                //"category": data2['cate_col2d'],
                                category: JSON.parse('['+data2['cate_col2d']+']'),
                            }],
                            dataset: [
                                ('cadena' in data2)? {
                                    seriesname: $('#f_cliente').val(),
                                    renderAs: "line",

                                    data: JSON.parse('['+data2['cadena']+']'),
                                }: {},
                               
                            ],
                        }
                        }).render();
                    });
                })();
                $(loading_div).hide();
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                console.log("HTTP Request Failed");
            })
        }

        function openModal(modal){
            $("#"+modal).modal("show");
        }

    </script>

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