@extends('layouts.reporte')

@section('php')
    @php
        $locales = [];
        $cantidad = 100;
        while ($cantidad <= $cantidad_locales) {
            $locales[(($cantidad-99)." - ".$cantidad)] = $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales[(($cantidad-99)." - ".$cantidad_locales)] = $cantidad_locales;
        }
        // dd($locales);

        $locales = json_encode($locales);
        $cliente = config('app.CLIENTE');

        if($cliente == 'bless'){
            $tipo_periodo = 'mes';
            $tipo_periodo_ = 'mes';

            $display = 'block';
            $display_ = 'block';

        }

            $tipo_periodo = 'mec';
            $tipo_periodo_ = 'mes';

            $display = 'block';
            $display_ = 'none';

        
            $salida_siksa = 2;

        if($cliente == 'oriental'){

            $salida = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades'), "3" => __('messages.costo'), "10" => __('messages.unidadespack')]);
        $salida_matri = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades'), "10" => __('messages.unidadespack')]);
        } if($cliente == 'siksa'){
            $salida_siksa = 10;
            $salida2 = ["60" => "Kilos (Kg)", "2"=> __('messages.ventas'), "61" => "Ventas + IVA ($)", "1" => __('messages.unidades'), "3" => __('messages.costo')];
            $salida = json_encode(["60" => "Kilos (Kg)", "2"=> __('messages.ventas'), "61" => "Ventas + IVA ($)", "1" => __('messages.unidades'), "3" => __('messages.costo')]);
             $salida_matri = json_encode(["1001" => "Kilos (Kg)", "2"=> __('messages.ventas'), "1" => __('messages.unidades') ]);
        }else if($cliente == "manares"){
            $salida = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades'), "3" => __('messages.costo'),"800"=> __('messages.margen'),
            "600"=> __('messages.contribucion')]);
            $salida_matri = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades'),"800"=> __('messages.margen'),"600"=> __('messages.contribucion')]);
        }else{
            $salida = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades'), "3" => __('messages.costo')]);
            $salida_matri = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades')]);
        }
        $salida_inout = json_encode(["13"=> __('messages.ventas'), "12" => __('messages.unidades')]);
        $tipo_var = json_encode(["2"=> __('messages.dinero'), "1" => __('messages.porcentaje')]);
        $periodo = json_encode(["dia"=> __('messages.dias'), "sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo_crec = json_encode(["sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo_grafcomp = json_encode(["dia"=> __('messages.dias'), "sem" => __('messages.semanas'), "mes" => __('messages.meses'), "ytd" => __('messages.ytd')]);
        if($cliente == "southwind"){
            $periodo_grafcomp = json_encode(["dia"=> __('messages.dias'), "sem" => __('messages.semanas'), "sem_wd" => "Semanas (Por días)", 
            "mes" => __('messages.meses'), "ytd" => __('messages.ytd')]);
        }
        $periodo_comp = json_encode(["dia"=> __('messages.dias'),"ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), "sem" => __('messages.semanas'), 
        "mes" => __('messages.meses')]);
        $periodo_comparativo = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), 
        "mes" => __('messages.meses')]);
        $periodo_matri = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), "mes" => __('messages.meses'), "sem" => __('messages.semanas'), 
        'dia' => __('messages.dias')]);
        $periodo_grafmatri = json_encode(["ytd"=> __('messages.ytd'), "mec" => __('messages.mec'), 'dia' => __('messages.dias')]);
        $periodo_var = json_encode(["dia"=> __('messages.dias')]);
        $periodo_perdi = json_encode(["1"=> __('messages.acomulado'),"mec" => __('messages.mec'),"3" => __('messages.mesanterior')]);
        $mesesComp = [];
        $mesesTree = [];

        $semanasComp = [];
        $yearAct = date("Y");
        $yearAnt = date("Y") - 1;
        $yearAnt2 = date("Y") - 2;

        $tipo = json_encode(["year" => (__('messages.año'))."-".(__('messages.meses'))."-".(__('messages.dias')), 
        "local" => __('messages.var-cadena')."-Formato-".(__('messages.variable-local')),
        "marca"=>__('messages.marca')."-".(__('messages.filtro-texto-categoria'))."-".(__('messages.variable-producto'))]);
        $tipo_var = json_encode(["dinero"=>__('messages.dinero'), "porcentaje" =>__('messages.porcentaje')]);
        $lim_inf = json_encode(["-100"=>"-100%", "-50" =>"-50%", "-25"=>"-25%", "-10"=>"-10%"]);
        $lim_sup = json_encode(["100"=>"100%", "50" =>"50%", "25"=>"25%", "10"=>"10%"]);
        $participacion = json_encode(["1"=>"Total Consulta", "2" =>"Total ".__('messages.participacion')]);
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),
        "mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt || $_year == $yearAnt2) {
                $mesesComp []= $value;
            }
        }

        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct ) {
                $mesesTree []= $value;
            }
        }
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct) {
                $semanasComp []= $value;
            }
        }
        if ($cliente == 'colgate') {
            $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_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;
        $variables_inout = ["" => []];
        if(array_key_exists('Local',$variables)){
            if (array_key_exists('2-0',$variables['Local'])) {
                $variables_inout[""]["2-0"] = $variables['Local']['2-0'];
            }
        }
        if(array_key_exists('Producto',$variables)){
            if (array_key_exists('1-3',$variables['Producto'])) {
                $variables_inout[""]["1-3"] = $variables['Producto']['1-3'];
            }
            if (array_key_exists('1-15',$variables['Producto'])) {
                $variables_inout[""]["1-15"] = $variables['Producto']['1-15'];
            }
        }
        $variables_inout[""]["total"] = __('messages.compañia');
        $display_grafico = '';
        $display_tabla = '';
        $favoritos=json_encode([]);
        $warning = "Se compara Costo Sell Out vs Venta Sell In";

    @endphp
@endsection
@section('div_reportes')
    @php echo $div; @endphp
@endsection



<div class="container-fluid p-5 pb-2 bg-white">
    <div class="d-flex flex-row overflow-flex">
        <div class="flex-fill">
            <div class="row">
                <div class="col-md-2">
                    <label for="select1">Desglosar por</label>
                    <select class="form-select" id="variables_evo">
                        <optgroup label="Local">
                            @foreach($variables['Local'] as $key => $option)
                                <option value="{{$key}}">{{$option}}</option>
                            @endforeach
                        </optgroup>
                        <optgroup label="Producto">
                            @foreach($variables['Producto'] as $key => $option)
                                <option value="{{$key}}" @if($key == '1-15') Selected @endif>{{$option}}</option>
                            @endforeach
                        </optgroup>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="select1">Desglosar por</label>
                    <select class="form-select" id="variables_evo2">
                        <option value="-1">Sin Seleccionar</option>
                        <optgroup label="Local">
                            @foreach($variables_2['Local'] as $key => $option)
                                <option value="{{$key}}" @if($key == '2-5') Selected @endif>{{$option}}</option>
                            @endforeach
                        </optgroup>
                        <optgroup label="Producto">
                            @foreach($variables_2['Producto'] as $key => $option)
                                <option value="{{$key}}">{{$option}}</option>
                            @endforeach
                        </optgroup>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="select1">Variable Salida</label>
                    <select class="form-select" id="salida_evo">
                        <option value="-1">Sin Seleccionar</option>
                            @foreach($salida2 as $key => $option)
                                <option value="{{$key}}" @if($key == '60') Selected @endif>{{$option}}</option>
                            @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="select1">Desde</label>
                    <select class="form-select" id="f_mes_evo_ini">
                        <option value="-1">Sin Seleccionar</option>>
                            @foreach($meses as $option)
                                <option value="{{$option->periodo}}">{{$option->nombre}}</option>
                            @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="select1">Hasta</label>
                    <select class="form-select" id="f_mes_evo_fin">
                        <option value="-1">Sin Seleccionar</option>
                            @foreach($meses as $option)
                                <option value="{{$option->periodo}}">{{$option->nombre}}</option>
                            @endforeach
                    </select>
                </div>
                <div class="col-md-2" style="position: relative;">
                    <div class="row">
                        <div class="col-md-6">
                                <button type="button" class="btn btn-success bt-0" onclick="callTables('{{$cliente}}', 'ventas');" style="position: absolute; bottom: 0px;">
                                <i class="bi bi-check-lg"></i> Actualizar
                            </button> 
                        </div>
                        <div class="col-md-6">
                            <div style="position: relative; display: inline-block; width: 25px; margin-left:10px; height: 25px; background-color: rgb(145,145,145); top: 25px;" 
                                class="d-inline-flex align-middle rounded-circle justify-content-center text-white align-items-center info-title" 
                                data-toggle="infobox" data-html="true" title="Reporte SellIn - SellOut. Este reporte está basado en los datos de los 2 últimos meses, sin cosiderar los dias en el mes actual. Para los calculos, se utilizan datos de inventario, Demansa S&OP y otros entregados por el cliente.">
                                <i class="fas fa-info" style="font-size: 1.25em;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>     
        </div>
    </div>
</div>

{{-- <div class="container-fluid px-5 bg-white">
    <div class="d-flex flex-row overflow-flex">
        <div class="flex-fill block block-rounded block-bordered container-fluid">
            <div class="d-none" id="siso_cont">
            </div>
        </div>
    </div>
</div> --}}

<div id="tabla" style="height: 700px;" class="bg-white">
    <div style="width:90%;margin-left:5%">
        <p>Fecha de Stock SISO: {{$siso_date}}</p>
    </div>
    <x-tabla id="siso" style="height: 600px !important;;width:90%;margin-left:5%" >
    </x-tabla>
</div>


<div class="container-fluid p-5 bg-white">
    <div class="nav-tabs-custom" style="height: 331px;">
        <div class="header" style="margin-top: 170px; margin-left: 10px;">
           Totales SellIn - SellOut
        </div>
        <div class="w-100 justify-content-center" id="f_carga_grafdisp" style="height:290px; display:flex; align-items:center;">
            <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
        </div>
        <div id="grafdisp_cont" style="height:290px;margin:0x;padding:0px" class="d-none">
        </div>
    </div>
</div>

<div class="container-fluid p-5 bg-white">
    <div class="nav-tabs-custom" style="height: 331px;">
        <div class="header" style="margin: 0px 5px 5px;">
           Totales Holding SellIn - SellOut
        </div>
        <div class="w-100 justify-content-center" id="f_carga_graftothold" style="height:290px; display:flex; align-items:center;">
            <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
        </div>
        <div id="grafTotHold_cont" style="height:290px;margin:0x;padding:0px" class="d-none">
        </div>
    </div>
</div>

<!-- <div class="container-fluid px-5 bg-white">
    <div class="d-flex flex-row overflow-flex overflow-auto">
        <div class="flex-fill">
            <div class="d-none pt-4" id="evo_cont">
            </div>

            <div class="d-none pt-4" id="evo_sell_in_cont">
            </div>
        </div>
    </div>
</div> -->

<!-- <div class="container-fluid px-5 bg-white">
    <div class="d-flex flex-row overflow-flex overflow-auto">
        <div class="flex-fill">
           
        </div>
    </div>
</div> -->


@section('right-bar')
    <div class="p-3 align-items-center flex-column d-none" id="f_grafcomp">
        
    </div>
    <div class="p-3 align-items-center flex-column d-none" id="f_grafevo">
    </div>
@endsection
<script>

    async function callTables(cliente, tipo){
        // getEvol(cliente, tipo);
        // getEvol_sell_in(cliente, tipo);
        await getSISO(cliente, tipo)
        getGrafTotales(cliente, tipo);
        getGrafTotalesHolding(cliente, tipo);
    }

    function getEvol(cliente, tipo) {
            let tmp = "mes"
            let [ini, fin] =  [$(`#f_${tmp}_evo_ini`).val(), $(`#f_${tmp}_evo_fin`).val()]
            let salida = document.getElementById("salida_evo").value;
            let today = new Date();
            $("#evo_cont").addClass("d-none display nowrap");

            let variables = document.getElementById("variables_evo").value;
            let nombreVar = document.getElementById("variables_evo").selectedOptions[0].textContent;
            if(tipo == "ventas" && $('#variables_evo2').length && $('#variables_evo2').val() != -1){
                variables = [variables, document.getElementById("variables_evo2").value];
                nombreVar = [nombreVar, document.getElementById("variables_evo2").selectedOptions[0].textContent];
            }

            return $.ajax({
                url: "/tabla/evo",
                method: "post",
                dataType: "html",
                crossDomain: false,
                headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    variables: variables,
                    salida: salida,
                    nombreVar: nombreVar,
                    tmp: tmp,
                    rangoTmp: [ini,fin],
                    tipo: tipo,
                    filtros: '',
                    cliente: cliente
                },
            }).done(function(data, textStatus, jqXHR) {
                let cont = document.getElementById("evo_cont");
                cont.innerHTML = ' <h3>Evolutivo Sell-Out</h3>';
                cont.innerHTML += data;
                let tabla = document.querySelector("#evo_cont table");
                tabla.id = "evo_tabla";
                $("#evo_cont").removeClass("d-none");
                var tab = $('#evo_tabla').DataTable({
                    ...(userLanguage == 'es') && {
                        language: configLocale,
                    },
                    pageLength: 25,
                    lengthMenu: [[25, 50, 100], [25, 50, 100]],
                    autoWidth: true,
                    responsive: true,
                    scrollY: "500px",
                    ordering: false,
                    scrollX: true,
                    scrollCollapse: true,
                    fixedColumns: true,
                    buttons: [
                        { extend: 'excel',exportOptions: {
                            columns: ':visible',
                            format: {
                                body: function(data, row, column, node) {
                                    data= data.replace(/\./g, '');
                                    data = data.replace(/\,/g, '');
                                    return data;
                                }
                            }}, className: 'boton btn btn-sm', title: 'Tabla Evolución '+tipo+' '+today.getDate().toString().padStart(2,"0")+'-'+
                        (today.getMonth()+1).toString().padStart(2,"0")+'-'+today.getFullYear() },
                        { extend: 'copy', className: 'boton btn btn-sm' },
                        { extend: 'csv', className: 'boton btn btn-sm', title: 'Tabla Evolución '+tipo+' '+today.getDate().toString().padStart(2,"0")+'-'+
                        (today.getMonth()+1).toString().padStart(2,"0")+'-'+today.getFullYear() }
                    ],
                    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_evo").style.display = "none";
                $("#evo_cont").removeClass("d-none");
                changeStateFiltrosAv("evo", true);
                $("#evo").find("#aplicarfiltrosparent").hide();
                $( "#progress_container" ).fadeOut( "slow" );
            });
    }

    function getEvol_sell_in(cliente, tipo) {
        let tmp = "mes"
        let [ini, fin] = [$(`#f_${tmp}_evo_ini`).val(), $(`#f_${tmp}_evo_fin`).val()]
        let salida = document.getElementById("salida_evo").value;
        let today = new Date();
        $("#evo_sell_in_cont").addClass("d-none");

        let variables = document.getElementById("variables_evo").value;
        let nombreVar = document.getElementById("variables_evo").selectedOptions[0].textContent;
        if(tipo == "ventas" && $('#variables_evo2').length && $('#variables_evo2').val() != -1){
            variables = [document.getElementById("variables_evo2").value];
            nombreVar = [nombreVar, document.getElementById("variables_evo2").selectedOptions[0].textContent];
        }

        return $.ajax({
            url: "/tabla/evo_sell_in",
            method: "post",
            dataType: "html",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                variables: variables,
                salida: salida,
                nombreVar: nombreVar,
                tmp: tmp,
                rangoTmp: [ini,fin],
                tipo: tipo,
                filtros: '',
                cliente: cliente
            },
        }).done(function(data, textStatus, jqXHR) {
            let cont = document.getElementById("evo_sell_in_cont");
            cont.innerHTML = ' <h3>Evolutivo Sell-In</h3>';
            cont.innerHTML += data;
            let tabla = document.querySelector("#evo_sell_in_cont table");
            tabla.id = "evo_sell_in_tabla";
            $("#evo_sell_in_cont").removeClass("d-none");
            $("#evo_sell_in").find("#aplicarfiltrosparent").hide();
            changeStateFiltrosAv("evo_sell_in", true);
            var tab = $('#evo_sell_in_tabla').DataTable({
                ...(userLanguage == 'es') && {
                    language: configLocale,
                },
                pageLength: 25,
                lengthMenu: [[25, 50, 100], [25, 50, 100]],
                autoWidth: true,
                responsive: false,
                scrollY: "500px",
                scrollX: true,
                ordering: false,
                scrollCollapse: true,
                fixedColumns: true,
                buttons: [
                    { extend: 'excel',exportOptions: {
                        columns: ':visible',
                        format: {
                            body: function(data, row, column, node) {
                                data= data.replace(/\./g, '');
                                data = data.replace(/\,/g, '');
                                return data;
                            }
                        }}, className: 'boton btn btn-sm', title: 'Tabla Evolución '+tipo+' '+today.getDate().toString().padStart(2,"0")+'-'+
                    (today.getMonth()+1).toString().padStart(2,"0")+'-'+today.getFullYear() },
                    { extend: 'copy', className: 'boton btn btn-sm' },
                    { extend: 'csv', className: 'boton btn btn-sm', title: 'Tabla Evolución '+tipo+' '+today.getDate().toString().padStart(2,"0")+'-'+
                    (today.getMonth()+1).toString().padStart(2,"0")+'-'+today.getFullYear() }
                ],
                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_evo").style.display = "none";
            $("#evo_cont").removeClass("d-none");
            changeStateFiltrosAv("evo", true);
            $("#evo").find("#aplicarfiltrosparent").hide();
            $( "#progress_container" ).fadeOut( "slow" );
        });
    }

    function getSISO(cliente, tipo){
        let tmp = "mes"
        let [ini, fin] = [$(`#f_${tmp}_evo_ini`).val(), $(`#f_${tmp}_evo_fin`).val()]
        let salida = document.getElementById("salida_evo").value;
        let today = new Date();
        $("#siso_cont").addClass("d-none");

        let variables = document.getElementById("variables_evo").value;
        let nombreVar = document.getElementById("variables_evo").selectedOptions[0].textContent;
        if(tipo == "ventas" && $('#variables_evo2').length && $('#variables_evo2').val() != -1){
            variables = [variables, document.getElementById("variables_evo2").value];
            nombreVar = [nombreVar, document.getElementById("variables_evo2").selectedOptions[0].textContent];
        }
        return $.ajax({
            url: "/reportesiso",
            method: "POST",
            dataType: "html",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                variables: variables,
                salida: salida,
                nombreVar: nombreVar,
                tmp: tmp,
                rangoTmp: [ini,fin],
                tipo: tipo,
                filtros: '',
                cliente: cliente
            },
        }).done(function(data, textStatus, jqXHR) {
            document.getElementById("f_carga_siso").style.display = "none";
                data = JSON.parse(data);
                vista = $('#f_vista').val();
                // changeStateFiltrosAv("siso", true);
                var orden = [];
                if (data.length > 1) {
                    orden = data[1];
                }
                let cont = document.getElementById("siso_cont");
                cont.innerHTML = data[0];
                var tabla = document.querySelector("#siso_cont table");
                if(tabla){
                    tabla.id = "siso_tabla";
                }else{
                    tabla = document.createElement("tfable");
                    cont.appendChild(tabla);
                }
                document.getElementById("f_carga_siso").style.display = "none";
                $("#siso_cont").removeClass("d-none");
                var tab = $('#siso_tabla').DataTable({
                        ...(userLanguage == 'es') && {
                            language: configLocale,
                        },
                        dom: 'Bfrtip',
                        pageLength: 50,
                        lengthMenu: [[25, 50, 100], [25, 50, 100]],
                        responsive: false,
                        scrollY: "700px",
                        scrollX: true,
                        order: orden,
                        buttons: [
                            {
                                extend: 'colvisGroup',
                                className: 'boton btn btn-sm',
                                text: 'Hide Sell Out',
                                show: [ 0,1,2,3,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34],
                                hide: [ 3,4,5,6,7,8,9,10,11,12,13,14]
                            },
                            {
                                extend: 'colvisGroup',
                                className: 'boton btn btn-sm',
                                text: 'Hide Sell In',
                                show: [ 0,1,2,27,28,29,30,31,32,33,34],
                                hide: [ 15,16,17,18,19,20,21,22,23,24,25,26]
                            },
                            {
                                extend: 'colvisGroup',
                                className: 'boton btn btn-sm',
                                text: 'Show all',
                                show: ':hidden'
                            },
                            { extend: 'excel', className: 'boton btn btn-sm', title: 'siso '+today.getDate().toString().padStart(2,"0")+"-"+(today.getMonth()+1).toString().padStart(2,"0")+"-"+today.getFullYear() },
                            { extend: 'copy', className: 'boton btn btn-sm' },
                            { extend: 'csv', className: 'boton btn btn-sm', title: 'siso '+today.getDate().toString().padStart(2,"0")+"-"+(today.getMonth()+1).toString().padStart(2,"0")+"-"+today.getFullYear() }        
                        ],
                        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>>"
                    });

                
                    var sBrowser, sUsrAg = navigator.userAgent;

                    if (sUsrAg.indexOf("Firefox") > -1) {
                        const scrollbody = document.querySelector('.dataTables_scrollBody');
                        $('.dataTables_scrollBody').width(($('#siso_tabla').width()+scrollbody.offsetWidth - scrollbody.clientWidth)+'px');
                    }
                });

    }

    function getGrafTotales(cliente, tipo) {
        let tmp = "mes"
        let [ini, fin] = [$(`#f_${tmp}_evo_ini`).val(), $(`#f_${tmp}_evo_fin`).val()]
        let variables = document.getElementById("variables_evo").value;
        let nombreVar = document.getElementById("variables_evo").selectedOptions[0].textContent;
        if(tipo == "ventas" && $('#variables_evo2').length && $('#variables_evo2').val() != -1){
            variables = [variables, document.getElementById("variables_evo2").value];
            nombreVar = [nombreVar, document.getElementById("variables_evo2").selectedOptions[0].textContent];
        }

        document.getElementById("f_carga_grafdisp").style.display = "flex";
        $("#grafdisp_cont").addClass("d-none");
        // $("#grafdisp").find("#aplicarfiltrosparent").hide();
        return $.ajax({
            url: "/reportesiso/totales",
            method: "post",
            dataType: "json",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                salida:  document.getElementById("salida_evo").value,
                nombreSalida: document.getElementById("salida_evo").selectedOptions[0].textContent,
                tmp: 'mes',
                rangoTmp: [ini,fin],
                tipo: tipo,
                filtros: "",
                cliente: cliente,
            },
        })
        .done(function(data, textStatus, jqXHR) {
            document.getElementById("f_carga_grafdisp").style.display = "none";
            $("#grafdisp_cont").removeClass("d-none");
            $("#grafdisp").find("#aplicarfiltrosparent").show();
                      
                const chartConfig2 = {
                    id: 'grafdisp_co',
                    type: 'msline',
                    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: ',',
                    },

                };
                FusionCharts.ready(function(){
                    var fusioncharts = new FusionCharts(chartConfig2);
                    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 getGrafTotalesHolding(cliente, tipo) {
        let tmp = "mes"
        let [ini, fin] = [$(`#f_${tmp}_evo_ini`).val(), $(`#f_${tmp}_evo_fin`).val()]
        let variables = document.getElementById("variables_evo").value;
        let nombreVar = document.getElementById("variables_evo").selectedOptions[0].textContent;
        if(tipo == "ventas" && $('#variables_evo2').length && $('#variables_evo2').val() != -1){
            variables = [variables, document.getElementById("variables_evo2").value];
            nombreVar = [nombreVar, document.getElementById("variables_evo2").selectedOptions[0].textContent];
        }

        document.getElementById("f_carga_graftothold").style.display = "flex";
        $("#grafTotHold_cont").addClass("d-none");
        // $("#grafdisp").find("#aplicarfiltrosparent").hide();
        return $.ajax({
            url: "/reportesiso/totalesHolding",
            method: "post",
            dataType: "json",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                salida:  document.getElementById("salida_evo").value,
                nombreSalida: document.getElementById("salida_evo").selectedOptions[0].textContent,
                tmp: 'mes',
                rangoTmp: [ini,fin],
                tipo: tipo,
                filtros: "",
                cliente: cliente,
            },
        })
        .done(function(data, textStatus, jqXHR) {
            document.getElementById("f_carga_graftothold").style.display = "none";
            $("#grafTotHold_cont").removeClass("d-none");
            $("#grafTotHold").find("#aplicarfiltrosparent").show();
                      
                const chartConfig2 = {
                    id: 'grafTotHold_co',
                    type: 'mscolumn2d',
                    renderAt: 'grafTotHold_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: ',',
                    },

                };
                FusionCharts.ready(function(){
                    var fusioncharts = new FusionCharts(chartConfig2);
                    fusioncharts.render();
                    fusioncharts.setChartAttribute("per", ".");
                });
           
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            //console.log(jqXHR);
            document.getElementById("f_carga_graftothold").style.display = "none";
            $("#grafTotHold_cont").removeClass("d-none");
            $("#grafdisp").find("#aplicarfiltrosparent").show();
        });
    }

</script>

@section('js_aft')
    <script>
         $("#f_mes_grafcomp_ini").val("202212").change();
         $("#f_mes_graftree_ini").val("202301").change();
         $("#f_mes_evo_ini").val("202301").change();
         $("#f_mes_evo_fin").val("202303").change();
         $("#f_mes_evo_ini_sell_in").val("202301").change();
        let ids = ['evo', 'matri', 'comp','comparativo', 'inout', 'grafdri', 'graftree', 'grafvar', 'grafmatri', 'grafcrec', 'grafevo', 'grafcomp','perdidas', 'evo_sell_in'];
        
        $(document).ready(() => {

            var cliente = '{{$cliente}}';

            callTables(cliente, 'ventas');
            // getSISO(cliente, 'ventas')
            // getGrafTotales(cliente, 'ventas')
            // getGrafTotalesHolding(cliente, 'ventas')

            let filtros = ['clientes', 'categorias', 'kam', "subcategoria", "producto_sku_prov"];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }

            // $("#f_clientes_comp").select2({closeOnSelect:false, multiple: true, placeholder: "Seleccionar Cliente", width: "auto"});
            $('#variables_comp').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });

            $('#variables_comparativo').select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });
            
            let ahora = new Date();
            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()-21)),
                    endDate: ahora
            };
            ["#f_dia_inout_ini","#f_dia_comp_ini", "#f_dia_comparativo_ini", "#f_dia_matri_ini","#f_dia_grafdri_ini","#f_dia_graftree_ini", "#f_dia_grafcrec_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate2 = congifDate;
            congifDate2.startDate = moment((new Date()).setDate(ahora.getDate()-15));
            ["#f_dia_grafevo_ini", "#f_dia_grafevo_fin","#f_dia_evo_ini", "#f_dia_evo_fin", ,"#f_dia_evo_sell_in_ini", "#f_dia_evo_sell_in_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate2);
            });

            congifDate["minDate"] = moment(new Date(ahora.getFullYear(), 0, 1));
            [ "#f_dia_grafcomp_fin"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate["minDate"] = moment((new Date()).setDate(ahora.getDate()-730));
            [ "#f_dia_grafcomp_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            congifDate["minDate"] = moment((new Date()).setDate(ahora.getDate()-365));
            [ "#f_dia_grafmatri_ini"].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });
            $("#tipo_grafdri").change(function(elem){
                if(elem.target.value=="year"){
                    $("#f_tmp_grafdri2").hide();
                    $(".fltr_periodo_grafdri").hide();
                }else{
                    $("#f_tmp_grafdri2").show();
                    $("#f_tmp_grafdri").change();
                }
            });
            let fechaMin = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
            congifDate["minDate"] = moment(fechaMin);
            [ "#f_dia_grafvar_ini"].forEach((selector, i) => {
                $(selector).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");
            });
            $('#f_mes_grafcomp_ini').change(function(elem){
                let date = new Date();
                    $('#f_mes_grafcomp_fin').find("option").prop("disabled", false);
               
                    $('#f_mes_grafcomp_fin').val(parseInt(elem.target.value) + 100);

                $('#f_mes_grafcomp_fin').trigger('change');
            });
            $(".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);
            $('[data-toggle="infobox"]').tooltip();

        });
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');

        filtrosPromise.then(function(resp){
            ponerFiltrosAv(resp);
        });
    </script>
@endsection