@extends('layouts.tabla')

@section('php')
    @php
    $usuario = auth()->user();

        $meses1 = [
            1=>'Enero', 2=>'Febrero', 3=>'Marzo',
            4=>'Abril', 5=>'Mayo', 6=>'Junio',
            7=>'Julio', 8=>'Agosto', 9=>'Septiembre',
            10=>'Octubre', 11=>'Noviembre', 12=>'Diciembre'
        ];
        $locales = [];
        $cantidad = 1;
        while ($cantidad <= $cantidad_locales) {
            $locales []= $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales []= $cantidad_locales;
        }
        $usuario = auth()->user();

        $cliente = config('app.CLIENTE');
        $locales = json_encode($locales);
        $variable = json_encode(["3-5"=>"LOCAL"]);
        $periodo_grafdisp = json_encode(["dia"=> __('messages.dias'),]);
        if ($cliente == "colgate") {
            $valor_salida = json_encode(["uni"=> __('messages.unidades'), "700" => __('messages.dias-de-inventario')]);
        }else{
            $valor_salida = json_encode(["uni"=> __('messages.unidades')]);
        }
        $periodo_comp = json_encode(["100"=> __('messages.100'), "20" => __('messages.20'), "80" => __('messages.80')]);
        $salida_detalle = json_encode(["1"=> "Unidades", "2" => "Kilos"]);

        $salida = json_encode(["50"=>"Stock (U)", "val" => "Stock ($)", "700" => __('messages.dias-de-inventario')]);
        $salida2 = json_encode(["50"=>"Stock (U)", "quiebre_movil" => "Quiebre"]);

        if($cliente == 'siksa'){
            $salidaDoh = json_encode(["555"=>"Stock (Kg)","700" => __('messages.dias-de-inventario'), "ven-stock-u" => __('messages.ventas-y-stock'), "50"=>"Stock (U)", "dias_inv_kilos" => "DOH Kilos", "ven-stock-u-kg" => "Ventas (kg) y Stock (kg)"]);

            $salida = json_encode(["50"=>"Stock (U)", "60"=>"Stock (Kg)", "51"=>"Stock CD", "81" => "Stock Total (Kg)", "82" => "Stock Total (Und)" ]);
        }else{
            $salidaDoh = json_encode(["700" => __('messages.dias-de-inventario'), "ven-stock-u" => __('messages.ventas-y-stock'), "101010"=>"Stock (U)"]);
            //$salidaDoh = json_encode(["700" => __('messages.dias-de-inventario'), "ven-stock-u" => __('messages.ventas-y-stock'), "101010"=>"Stock (U)" , "555"=>"Peso Stock (Kg)"]);
        }
        $variable_displocal = json_encode(["local" => "LOCAL","local-producto" => "LOCAL-PRODUCTO", "local-reponedor" => "LOCAL-REPONEDOR", "local-vendedor" => "LOCAL-VENDEDOR", "local-producto-rep" => "LOCAL-PRODUCTO-REPONEDOR", "local-producto-ven" => "LOCAL-PRODUCTO-VENDEDOR"]);
        $periodo = json_encode(["dia"=> __('messages.dias')]);
        $periodo2 = json_encode(["mes"=> __('messages.meses'),"dia"=> __('messages.dias'),"sem"=> __('messages.semanas')]);
        $periodo3 = json_encode(["acum"=> __('messages.acumulado'),"mec"=> __('messages.mec'),3=> $meses1[date('n', strtotime(date('Y-m-d')." -1 month"))]]);
        $periodo4 = json_encode(["dia"=> __('messages.dias'),"sem"=> __('messages.semanas')]);
        $periodo5 = json_encode(["dia"=> __('messages.dias')]);

        $tipoStock = json_encode(["1" => __('messages.catalogado'), "0" => __('messages.no-catalogado'), "2" => __('messages.no-informado'), "" => __('messages.todos')]);
        $tipoStock2 = json_encode(["1" => __('messages.catalogado'), "0" => __('messages.no-catalogado')]);
        $agrupacionesAle = json_encode(['1-15' => __('messages.variable-producto'), '3-5' => __('messages.variable-local'),
                            '2-0' => __('messages.var-cadena'), '2-5' => __('messages.var-holding')]);
        $diasVentas = json_encode(['30' => '30 '.__('messages.dias'), '14' => '14 '.__('messages.dias'), '7' => '7 '.__('messages.dias')]);
        $tiposAlertas = json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                         'posible_quiebre' => 'Posible quiebre (Días stock < 8)',
                        'sobrestock' => 'Sobrestock (Días stock > 180)',  'todo' => 'Todas las alertas']); 
        $tiposAlertas2= json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                         'posible_quiebre' => 'Posible quiebre (Días stock < 8)',
                        'sobrestock' => 'Sobrestock (Días stock > 180)']);
        if($cliente == 'proximo'){
            $tiposAlertas = json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                         'posible_quiebre' => 'Posible quiebre (Días stock < 4)',
                        'sobrestock' => 'Sobrestock (Días stock > 15)',  'todo' => 'Todas las alertas']); 
            $tiposAlertas2= json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                         'posible_quiebre' => 'Posible quiebre (Días stock < 4)',
                        'sobrestock' => 'Sobrestock (Días stock > 15)']);
        }
    
                        
                        
                        //, 'sin_alerta' => 'Sin alerta'

        if($cliente == 'dona'){
            $tiposAlertas = json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                         'posible_quiebre' => 'Posible quiebre (Días stock < 8)',
                        'sobrestock' => 'Sobrestock (Días stock > 30)', 'sin_alertas' => 'Sin Alertas', 'todo' => 'Todas las alertas']);

            
        }
        if($cliente == 'siksa'){
            $tiposAlertas2= json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                         'posible_quiebre' => 'Posible quiebre (Días stock < 7)',
                        'sobrestock' => 'Sobrestock (Días stock > 180)']);
            
            $tiposAlertas = json_encode(['cvss' => 'Quiebres (Con ventas y sin stock)','svss' => 'Crítico (Sin ventas y sin stock)', 'svcs' => 'Ajustes (Sin ventas y con stock)',
                'posible_quiebre' => 'Posible quiebre (Días stock < 7)',
            'sobrestock' => 'Sobrestock (Días stock > 180)',  'todo' => 'Todas las alertas']);
        }
        $unidades = json_encode(['1' => 'Unidades']);
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),"mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        $display_grafico = '';
        $display_tabla = '';
        if($cliente == "colgate"){
        $warning = "Los porcentajes mostrados en las tablas se calculan de la siguiente manera: \n
        Instock: (SUMA(Instock)/Total de registros) x 100
        DOH: Stock Valorizado * 28 / Ventas ult 28 dias
        OSA: (SUMA(OSA)/Total de registros) x 100
        Quiebre: (Total de registros - SUMA(Instock)/Total de registros) x 100
        Inv. Fantasma: 100% - OSA% - Quiebre%
        Fillrate: (Cantidad recibida/Cantidad solicitada) x 100\n
        Pasar el cursor por encima de la celda de una tabla mostrará mayor información acerca del cálculo aplicado.\n";
        }else{
            $warning = "";
        }
        if ($div_reportes != null) {
            $div = '<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><ul>';
            foreach ($div_reportes as $value) {
                $div.="<li>".$value->Descripcion."</li>";
            }
            $div.="</ul></div>";
        }else{
            $div='';
        }
        $variables_locales = json_encode($variables[__('messages.variable-local')]);
        $variables_producto = $variables[__('messages.variable-producto')];
        if ($cliente != "demoqa") {
            $variables_producto["1-5"] = __('messages.variable-producto-unificado');
        }else{
            $variables_producto["1-16"] = __('messages.variable-producto-unificado');
        }
        //dd($variables_locales);
        $variables_2 = $variables;
        //if(isset($variables_2['Local']) && isset($variables_2['Local']['3-5'])){
        //   unset($variables_2['Local']['3-5']);
        //}
        //if(isset($variables_2['Producto']) && isset($variables_2['Producto']['1-15'])){
         //  unset($variables_2['Producto']['1-15']);
        //}

        $ninguno = ['' => ['-1' => 'Sin Seleccionar']];
        $variables_2 = $ninguno + $variables_2;
    @endphp
@endsection

@section('tabla')

<x-tabla id="evomovil" style="height: 600px !important; {{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
    <x-selector-variable id="variables_evomovil" :lista='$variables' selected="2-5" cliente='$cliente'/>
    <x-selector-variable id="variables_evomovil2" :lista='$variables_2' selected="-1" cliente='$cliente'/>

    <x-selector-generico id="salida_evomovil2" idselect="salida_evomovil" :salida="$salida2"  class="selector-generico" style="width: 135px;">
        <x-slot name="texto">
            {{__('messages.selector-generico-texto-valor')}}
        </x-slot> 
    </x-selector-generico>

    <x-selector-generico id="f_tmp_evomovil2" idselect="f_tmp_evomovil" :salida="$periodo5"  class="selector-generico" style="width: 65px" selected="dia">
        <x-slot name="texto">
            {{__('messages.selector-generico-texto-periodo')}}
        </x-slot>
    </x-selector-generico>

    <x-selector-dias idpadre="evomovil" />
    <x-selector-semanas id="fltr_sem_evomovil" idselect="f_sem_evomovil_ini" :semanas="$semanas"  class="fltr_periodo_grafevomovil" style="display: none;">
        <x-slot name="texto">
            {{__('messages.selector-semanas-meses-texto-desde')}}
        </x-slot>
    </x-selector-semanas>
    <x-selector-semanas id="fltr_sem_evomovil2" idselect="f_sem_evomovil_fin" :semanas="$semanas" class="fltr_periodo_grafevomovil" style="display: none;">
        <x-slot name="texto">
            {{__('messages.selector-semanas-meses-texto-hasta')}}
        </x-slot>
    </x-selector-semanas>
    <!--evomovilLUTVO MES-->
    <x-selector-meses id="fltr_mes_grafevomovil" idselect="f_mes_evomovil_ini" :meses="$meses" class="fltr_periodo_grafevomovil" style="display: none;">
        <x-slot name="texto">
            {{__('messages.selector-semanas-meses-texto-desde')}}
        </x-slot>
    </x-selector-meses>
    <x-selector-meses id="fltr_mes_grafevomovil2" idselect="f_mes_evomovil_fin" :meses="$meses" class="fltr_periodo_grafevomovil" style="display: none;">
        <x-slot name="texto">
            {{__('messages.selector-semanas-meses-texto-hasta')}}
        </x-slot>
    </x-selector-meses>
    <x-infobox tamano="25px" texto="" modal="tabla_evomovillutivo_modal"/>
    <div class="modal fade bd-example-modal-lg" id="tabla_evomovillutivo_modal" 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="exampleModalLabel">Tabla evolucion Stock</h5>     
            </div>
                <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                <div class="text-center">
                    <img src="{{asset('images/stock_tabla_evolutivo.png')}}" class="img-fluid" alt="Responsive image">
                </div>
                <!-- add div for text -->
                <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                <ul>
                    <li><b>Selector Desglosar por:</b> Definir Variable en filas de la tabla.</li>
                    <li><b>Selector Salida:</b> Valor de salida a consultar en tabla. Stock Total corresponde a Stock en sala más Stock en centros de distribución.</li>
                    <li><b>Selector Periodo:</b> Seleccionar tipo de periódo para ver los datos.</li>
                </ul>
                <p><b>Ordenar:</b> Clickear en los encabezados de las columnas ordenará los registros de la tabla en orden descendiente según lo que representa esa columna. Clickear nuevamente ordenará los registros en orden ascendente.</p>
                <p><b>Fila y Columna Total (Títulos de variables seleccionadas):</b> Valores calculados tomando todos los registros.</p>
                <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                <ul>
                    <li><b>Selector Cliente:</b> Filtrar por cliente.</li>
                    <li><b>Selector Categoría:</b> Filtrar por Categoría    .</li>
                    <li><b>Selector KAM:</b> Filtrar por <i>Key Account Manager</i>.</li>
                </ul>
                <p><b>Exportar:</b> Descargar datos de las tabla.</p>

            </div>
        </div>
    </div>
    <x-boton-actualizar onclick="getevomovil('{{$cliente}}', 'movil');"/>

    <x-filtro id="f_clientes_evomovil" :lista="$clientes" style="max-width: 120px;min-width: 120px;width: 120px;" class="ms-auto">
        <x-slot name="texto">
            @if($cliente != 'siksa'){{__('messages.filtro-texto-cliente')}}@else Cadena @endif
        </x-slot>
    </x-filtro>
    @if ($cliente == "colgate")
        <x-filtro id="f_subcategoria_evomovil" :lista="$subcategoria" style="max-width: 120px;min-width: 120px;width: 120px;">
            <x-slot name="texto">
                {{__('messages.campo-pr-subcategoria')}}
            </x-slot>
        </x-filtro>
    @else
        <x-filtro id="f_categorias_evomovil" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px;">
            <x-slot name="texto">
                {{__('messages.filtro-texto-categoria')}}
            </x-slot>
        </x-filtro>
    @endif
    @if ($cliente == "colgate")
    <x-filtro id="f_producto_sku_prov_evomovil" :lista="$producto_sku_prov" style="max-width: 120px;min-width: 120px;width: 120px;">
        <x-slot name="texto">
            {{__('messages.variable-producto-unificado')}}
        </x-slot>
    </x-filtro>
    @else
    <x-filtro id="f_kam_evomovil" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px;">
        <x-slot name="texto">
            {{__('messages.filtro-texto-kam')}}
        </x-slot>
    </x-filtro>
    @endif
</x-tabla>


@endsection



@section('js_aft')
<script src="{{asset('js\vendor\dataTables.natural.js')}}"></script>
<script>
    var cliente_ = "{{$cliente}}";
    if(cliente_ == "colflex"){
        $("#agrupacion_grafstockale").val("3-5").change();
    }
    if(cliente_ == "proximo"){
            //add class d-none to all ids that start with f_categroias_
            $("[id^=f_categorias_]").addClass("d-none");
        }
    let ids = ['evo','grafalefecha', 'evomovil','grafevo', 'grafdisp','detallestock', 'detallestocksiksa','matri', 'grafstockale', 'stockale', 'aleval', 'venper', 'disp', 'displocal'];
    $(document).ready(() => {
        ids.forEach(function(item){
            if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
        });
        let filtros = ['clientes','categorias', 'kam', "subcategoria", "producto_sku_prov"];
        for(let filtro of filtros) {
            for(let id of ids) {
                multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
            }
        }
        let ahora = new Date();
        let dias = (cliente_ == 'siksa')? 7 : 30;
        let congifDate = {
            ...("{{config('app.locale')}}" == "es") && {
                locale: {
                    format: 'YYYY/MM/DD',
                    daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                    monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                "Mayo", "Junio", "Julio", "Agosto",
                                "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                    applyLabel: "Aplicar",
                    cancelLabel: "Cancelar",
                    firstDay: 1
                }
            },
            maxDate: moment(ahora),
            startDate: moment((new Date()).setDate(ahora.getDate()-dias)),
            endDate: ahora
        };

        let congifDate2 = {
            ...("{{config('app.locale')}}" == "es") && {
                locale: {
                    format: 'YYYY/MM/DD',
                    daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                    monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                "Mayo", "Junio", "Julio", "Agosto",
                                "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                    applyLabel: "Aplicar",
                    cancelLabel: "Cancelar",
                    firstDay: 1
                }
            },
            maxDate: moment(ahora),
            startDate: moment((new Date()).setDate(ahora.getDate()-15)),
            endDate: ahora
        };
        
        let congifDate3 = {
            ...("{{config('app.locale')}}" == "es") && {
                locale: {
                    format: 'YYYY/MM/DD',
                    daysOfWeek: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
                    monthNames: ["Enero", "Febrero", "Marzo", "Abril",
                                "Mayo", "Junio", "Julio", "Agosto",
                                "Septiembre", "Octubre", "Noviembre", "Diciembre"],
                    applyLabel: "Aplicar",
                    cancelLabel: "Cancelar",
                    firstDay: 1
                }
            },
            maxDate: moment(ahora),
            startDate: moment((new Date()).setDate(ahora.getDate()-10)),
            endDate: ahora
        }; 
        $("#f_dia_disp_ini").daterangepicker(congifDate3);
        $("#f_dia_displocal_ini").daterangepicker(congifDate3);
        $("#f_dia_grafdisp_ini").daterangepicker(congifDate2);
        $("#f_dia_grafdisploc_ini").daterangepicker(congifDate2);
        $("#f_dia_evo_ini").daterangepicker(congifDate);
        $("#f_dia_evomovil_ini").daterangepicker(congifDate);
        $("#f_dia_grafevo_ini").daterangepicker(congifDate);
        $("#f_dia_grafalefecha_ini").daterangepicker(congifDate);
        $('select[id^="f_tmp_"]').change(function(elem){
            let aux = elem.target.id.split("_");
            let macroTmp = aux[aux.length - 1];
            let tmp = $("#f_tmp_" + macroTmp).find('option:selected').val();
            $(".fltr_periodo_" + macroTmp).css("display","none");
            $("#fltr_"+tmp+"_" + macroTmp).css("display","inline-block");
            $("#fltr_"+tmp+"_" + macroTmp + "2").css("display","inline-block");
            $("#fltr_"+tmp+"_" + macroTmp + "3").css("display","inline-block");
        });
        $(".navbar-402").css("border-style","solid");
        $(".navbar-402").css("border-left","0px");
        $(".navbar-402").css("border-color","#57775F");
        $(".navbar-402").css("background-color","#57775F");
        $('#variables_matri1').change(verificar_selectores);
        $('#variables_matri2').change(verificar_selectores);
            $("#objeto").css("visibility", "visible");
        
        $("#muestrafiltros").click(function(){
            console.log("click en AV");
        });
        $('#variables_detallestocks').select2MultiCheckboxes({
            placeholder: "{{__('messages.elegir-variables')}}",
            width: "auto",
            templateSelection: function(selected, total) {
                return selected.length + " de " + total + " total";
            }
        });
        $('#variables_detallestocksiksa').select2MultiCheckboxes({
            placeholder: "{{__('messages.elegir-variables')}}",
            width: "auto",
            templateSelection: function(selected, total) {
                return selected.length + " de " + total + " total";
            }
        });
        $('#variables_venper').select2MultiCheckboxes({
            placeholder: "{{__('messages.elegir-variables')}}",
            width: "auto",
            templateSelection: function(selected, total) {
                return selected.length + " de " + total + " total";
            }
        });

        function cargandoDatos(modo){
            contador_filtros = 0;
            var arr = new Array();
            var cad = new String();
            $(".obj_filtro button").removeClass('f_seleccionado');
            $(".obj_filtro i").removeClass('fa-filter');
            if(modo==1){
                try {
                    if(objetos){
                        for(i=0;i<objetos.length;i++){
                            cad = leerLista("f_"+objetos[i]);
                            if(cad != ''){
                                contador_filtros++;
                                $("#bt_f_"+objetos[i]).addClass("f_seleccionado");
                                $("#bt_f_"+objetos[i]).remove('i');
                                $("#bt_f_"+objetos[i]).append('<i class="fa fa-filter"></i>');
                            }
                        }
                    }
                    cad = leerLista("f_holding");
                    if(cad != ''){
                        contador_filtros++;
                        $("#bt_f_holding").addClass("f_seleccionado");
                        $("#bt_f_holding").remove('i');
                        $("#bt_f_holding").append('<i class="fa fa-filter"></i>');
                    }
                } catch (e) {
                    if (e instanceof ReferenceError) {
                        //alert(e, true);
                    } else {
                    //alert(e, false);
                    }
                }
                $(".loader2").fadeOut("slow");
                $("#enviadatos").prop("disabled",false);
                $("#muestrafiltros").prop("disabled",false);
                $("#limpiafiltros").prop("disabled",false);
                $("#exportar").prop("disabled",false);
                if(contador_filtros>0){
                    $("#muestrafiltros").css("width","200px");
                    $("#muestrafiltros").html(contenido_botom+' ('+contador_filtros+')');
                }else{
                    $("#muestrafiltros").css("width","auto");
                    $("#muestrafiltros").html(contenido_botom);
                }
            }else{
                $(".loader2").show();
                $('#tbl_report').html('<div class="loader2" style="height:650px;"><p><img src="img/Preloader_21.gif" width="64" height="64"/></p></div>');
                $("#enviadatos").prop("disabled",true);
                $("#muestrafiltros").prop("disabled",true);
                //$("#muestrafiltros").html(contenido_botom);
                $("#limpiafiltros").prop("disabled",true);
                $("#exportar").prop("disabled",true);
                //if ($("#chart_show").is(':visible')) $(".chart").loading({overlay: $(".custom-overlay")});	
            }
        }

        //  if("{{$cliente}}" == 'spes'){
        //      $('#btn-grafico').click();
        //     }else if("{{$cliente}}" != 'cafesenork' || {{$cliente}} != 'demo' ){
        //      $("#f_clientes_matri").val('CENCOSUD');
        //      $('#f_clientes_matri').trigger('change');
        //  }
    });
    var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
    filtrosPromise.then(function(resp){
        ponerFiltrosAv(resp);
    });

    function getDisp(cliente, tipo) {
        var tmp = document.getElementById("f_tmp_disp").value;
        var [ini, fin] = getDate(tmp, "#f_"+tmp+"_disp_ini");
        let salida = document.getElementById("salida_disp").value;

        changeStateFiltrosAv("disp", false);
        document.getElementById("f_carga_disp").style.display = "flex";
        $("#disp_cont").addClass("d-none");
        $("#disp").find("#aplicarfiltrosparent").hide();
        return $.ajax({
            url: "/tabla/dispsiksa",
            method: "post",
            dataType: "html",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                variables: document.getElementById("variables_disp").value,
                salida: salida,
                nombreVar: document.getElementById("variables_disp").selectedOptions[0].textContent,
                tmp: tmp,
                rangoTmp: [ini,fin],
                tipo: tipo,
                is_table : 1,
                filtros: getFiltros("disp"),
                cliente: cliente,
                catalogado: document.getElementById("catalogado_disp").value,
            },
        }).done(function(data, textStatus, jqXHR) {
            let cont = document.getElementById("disp_cont");
            cont.innerHTML = data;
            let tabla = document.querySelector("#disp_cont table");
            tabla.id = "disp_tabla";
            document.getElementById("f_carga_disp").style.display = "none";
            changeStateFiltrosAv("disp", true);
            $("#disp_cont").removeClass("d-none");
            $("#disp").find("#aplicarfiltrosparent").hide();
            var tab = $('#disp_tabla').DataTable({
            ...(userLanguage == 'es') && {
                    language: configLocale,
                },
                pageLength: 25,
                lengthMenu: [[25, 50, 100], [25, 50, 100]],
                autoWidth: true,
                responsive: false,
                scrollY: "500px",
                scrollX: true,
                scrollCollapse: true,
                fixedColumns: true,
                order: [[ 1, "asc" ]],
                buttons: [
                    { extend: 'excel', className: 'boton btn btn-sm', title: '' },
                    { extend: 'copy', className: 'boton btn btn-sm' },
                    { extend: 'csv', className: 'boton btn btn-sm' }
                ],
                dom: "<'row'<'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'<'text-center bg-body-light py-2 mb-2'l>>"+
                "<'col-sm-12 col-md-4 align-items-center d-flex justify-content-end'B>><'row'<'col-sm-12 tables'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
            });
            tab.on('buttons-action', function ( e, buttonApi, dataTable, node, config ) {
                
            });
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            //console.log(jqXHR);
            document.getElementById("f_carga_disp").style.display = "none";
            $("#disp_cont").removeClass("d-none");
            $("#disp").find("#aplicarfiltrosparent").hide();
            changeStateFiltrosAv("disp", true);
            $( "#progress_container" ).fadeOut( "slow" );
        });
    }

    function getDispLocal(cliente, tipo) {
        var tmp = document.getElementById("f_tmp_displocal").value;
        var [ini, fin] = getDate(tmp, "#f_"+tmp+"_displocal_ini");
        let salida = document.getElementById("salida_displocal").value;

        changeStateFiltrosAv("displocal", false);
        document.getElementById("f_carga_displocal").style.display = "flex";
        $("#displocal_cont").addClass("d-none");
        $("#displocal").find("#aplicarfiltrosparent").hide();
        return $.ajax({
            url: "/tabla/displocalsiksa",
            method: "post",
            dataType: "html",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                variables: document.getElementById("salida_displocal").value,
                salida: salida,
                nombreVar: document.getElementById("variables_displocal").selectedOptions[0].textContent,
                tmp: tmp,
                rangoTmp: [ini,fin],
                tipo: tipo,
                filtros: getFiltros("displocal"),
                cliente: cliente,
                catalogado: document.getElementById("catalogado_displocal").value
            },
        }).done(function(data, textStatus, jqXHR) {
            let cont = document.getElementById("displocal_cont");
            cont.innerHTML = data;
            let tabla = document.querySelector("#displocal_cont table");
            tabla.id = "displocal_tabla";
            document.getElementById("f_carga_displocal").style.display = "none";
            changeStateFiltrosAv("displocal", true);
            $("#displocal_cont").removeClass("d-none");
            $("#displocal").find("#aplicarfiltrosparent").hide();
            var tab = $('#displocal_tabla').DataTable({
            ...(userLanguage == 'es') && {
                    language: configLocale,
                },
                pageLength: 25,
                lengthMenu: [[25, 50, 100], [25, 50, 100]],
                autoWidth: true,
                responsive: false,
                scrollY: "500px",
                scrollX: true,
                scrollCollapse: true,
                fixedColumns: true,
                order: [[ 1, "asc" ]],
                buttons: [
                    { extend: 'excel', className: 'boton btn btn-sm', title: '' },
                    { extend: 'copy', className: 'boton btn btn-sm' },
                    { extend: 'csv', className: 'boton btn btn-sm' }
                ],
                dom: "<'row'<'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'<'text-center bg-body-light py-2 mb-2'l>>"+
                "<'col-sm-12 col-md-4 align-items-center d-flex justify-content-end'B>><'row'<'col-sm-12 tables'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
            });
            tab.on('buttons-action', function ( e, buttonApi, dataTable, node, config ) {
                
            });
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            //console.log(jqXHR);
            document.getElementById("f_carga_displocal").style.display = "none";
            $("#displocal_cont").removeClass("d-none");
            $("#displocal").find("#aplicarfiltrosparent").hide();
            changeStateFiltrosAv("displocal", true);
            $( "#progress_container" ).fadeOut( "slow" );
        });
    }

    function getGrafDisp(cliente, tipo) {
        var tmp = document.getElementById("f_tmp_grafdisp").value;
        var [ini, fin] = getDate(tmp, "#f_"+tmp+"_grafdisp_ini");
        document.getElementById("f_carga_grafdisp").style.display = "flex";
        var variables = document.getElementById("variables_grafdisp").value;
        var nombreVar = document.getElementById("variables_grafdisp").selectedOptions[0].textContent;
        $("#grafdisp_cont").addClass("d-none");
        $("#grafdisp").find("#aplicarfiltrosparent").hide();
        let filtros = getFiltros("grafdisp");
        return $.ajax({
            url: "/grafico/disp",
            method: "post",
            dataType: "json",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                salida: document.getElementById("salida_grafdisp").value,
                nombreSalida: document.getElementById("salida_grafdisp").selectedOptions[0].textContent,
                tmp: tmp,
                variables: variables,
                nombreVar: nombreVar,
                rangoTmp: [ini,fin],
                tipo: tipo,
                is_table: 0,
                filtros: getFiltros("grafdisp"),
                cliente: cliente,
                vista: 'stock',
                catalogado: document.getElementById("catalogado_grafdisp").value,
            },
        })
        .done(function(data, textStatus, jqXHR) {
            document.getElementById("f_carga_grafdisp").style.display = "none";
            $("#grafdisp_cont").removeClass("d-none");
            $("#grafdisp").find("#aplicarfiltrosparent").show();
            let tipoGrafico = document.getElementById('f_type_grafdisp').value;//tipo=='stock'?'stackedcolumn2d':'msline';
            var modal = document.getElementById("myModal");
           
                const chartConfig = {
                    id: 'grafdisp_co',
                    type: tipoGrafico,
                    renderAt: 'grafdisp_cont',
                    width: '100%',
                    height: '400',
                    dataFormat: 'json',
                    dataSource: data,
                    ...(userLanguage == 'es') && {
                        dataLoadStartMessage: 'Recuperando datos. Por favor, espere.',
                        dataLoadErrorMessage: 'Error al cargar los datos.',
                        dataInvalidMessage: 'Datos no válidos.',
                        dataEmptyMessage: 'No hay datos para mostrar',
                        typeNotSupportedMessage: 'Tipo de gráfico no soportado.',
                        loadMessage: 'Cargando gráfico. Por favor, espere.',
                        renderErrorMessage: 'No se puede representar el gráfico.',
                        decimalSeparator: ',',
                        // thousandSeparator: '.',
                        percentValueSufix: '%',
                    },
                };
                FusionCharts.ready(function(){
                    var fusioncharts = new FusionCharts(chartConfig);
                    fusioncharts.render();
                    fusioncharts.setChartAttribute("per", ".");
                });
           
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            //console.log(jqXHR);
            document.getElementById("f_carga_grafdisp").style.display = "none";
            $("#grafdisp_cont").removeClass("d-none");
            $("#grafdisp").find("#aplicarfiltrosparent").show();
        });
    }

    function openModal(modal){
        $("#"+modal).modal("show");
    }
</script>

@endsection