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

    <link rel="stylesheet" href="{{asset('css/fixedColumns.bootstrap5.min.css')}}">
    <link rel="stylesheet" href="{{asset('css/fixedHeader.bootstrap5.min.css')}}">
    @yield('css_aft')
@endsection
@push('stylesheet')
<style>
    .row-dash{
        background-color:#FFF;
        margin-top: 5px;
    }

    table thead th {
        margin: 0;
        padding: 0;
    }

    .dash-level-one{
        background-color: #FFF;
        min-height: 240px !important;
        max-height: 240px !important;
    }

    .dash-level-two, .dash-level-three{
        background-color: #FFF;
        min-height: 350px !important;
        max-height: 350px !important;
    }

    .dash-level-four{
        background-color: #FFF;
        min-height: 200px !important;
        max-height: 200px !important;
    }

    .div_resumen{
        border-radius:5px;
        width:90%;
        height:90%;
        color: #333333;
        background-color: #F4F6F9;
        border: solid #333333 0.9px;
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }

    .div_resumen_so{

    }
    
    .div_resumen_sc{

    }
    
    .div_resumen_cobertura{

    }

    .div_resumen_ticket{

    }

    .div_resumen_doh{

    }

    #dash_comp{
        max-height: 300px !important;
        /*max-width:auto !important;*/
    }

    #dash_comp table{
        overflow-y: auto;
    }

    .jstree-div{
        max-height:250px;
        min-height:250px;
        /*max-width:200px;*/
        margin-top:25px;
    }

    .js-tree-div2, .js-tree-div2f{
        overflow: scroll;
        max-height:100%;
    }

    /* Cambiar color de los nodos seleccionados */
    .jstree-anchor:hover {
        background-color: #9e9d9d;
        color: #333;
    }

    /* Cambiar íconos */
    .jstree-icon {
        width: 18px;
        height: 18px;
        background-color: #337ab7;
    }

    .text-field-jstree{
        text-align: center;
    }

    #f_categoria_5_dash_cont{
        max-width: 150px !important;
    }
</style>
@endpush
@section('content')
@php
    $cliente = config('app.CLIENTE');

    $arr_dos_periodos = ['clorox'];

    $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
    $salida = json_encode(['351' => __('messages.ventas'), '352' => __('messages.unidades'), '353' => __('messages.costo')]);

    if($cliente == 'clorox'){
        $periodo = json_encode([
            //'dia'=> __('messages.dias'), 
            'ytdf' => __('messages.ytdf'), 
            'ytd' => __('messages.ytd'), 
            //'mec' => __('messages.mec'), 
            //'sem' => __('messages.semanas'), 
            'mes' => __('messages.meses'), 
            //'uam' => __('messages.ult-anio-movil'), 
            'fye' => 'Año Fiscal', 
            'trif' => 'Trimestre Fiscal'
        ]);
        $salida = json_encode(['351' => __('messages.ventas_sin_iva'), '357' => __('messages.ventas_con_iva'), '352' => __('messages.unidades'), '355' => __('messages.sc'), '356' => __('messages.ac'), 'cobertura' => 'Cobertura']);
        if($vsta == 'cobertura'){
            $salida = json_encode(['cobertura' => 'Cobertura']);
        }
    }

    $trif_ant = $max_trif - 100;

    $max_trif_str = intval(substr($max_trif, 4, 2)).'° Trimestre '.substr($max_trif, 0, 4);
    $trif_ant_str = intval(substr($trif_ant, 4, 2)).'° Trimestre '.substr($trif_ant, 0, 4);

    $max_trif_text = 'La vista por defecto contempla el último trimestre con información ('.$max_trif_str.') comparado al mismo del año pasado ('.$trif_ant_str.')';

    $fye_frecuencia = date('Y');
    $fye_frecuencia_ant = $fye_frecuencia-1;

    $false = 'false';

    $filtros = [
        'categoria_3' => [],
        'categoria_5' => [],
        'region' => [],
    ];
@endphp
    <div class="row">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <div class="block block-rounded block-bordered container-fluid">
                <div class="block-content">
                    <div class="row row-dash">
                        <div class="row">
                            <x-boton-actualizar onclick="getDashboardTrad('{{$cliente}}', 'ventas')"/>

                            <x-infobox tamano="25px" :texto="$max_trif_text"/>
                        </div>

                        <div clasS="row">
                            <x-selector-generico id="f_clientes_dash2" idselect="f_clientes_dash" class="selector-generico" style="width: 120px" >
                                <x-slot name="texto">
                                    {{__('messages.var-holding')}}
                                </x-slot>
                            </x-selector-generico>
                        </div>

                        <div clasS="row">
                            <x-selector-variable id="variables_dash" :lista='$variables' selected="1-12" cliente='$cliente'/>
                        </div>
                    
                        <div clasS="row">
                            <x-selector-generico id="salida_dash2" idselect="salida_dash" :salida="$salida" class="selector-generico" style="width: 120px">
                                <x-slot name="texto">
                                    {{__('messages.selector-generico-texto-valor')}}
                                </x-slot>
                            </x-selector-generico>
                        </div>
                        
                        <div clasS="row">
                            <x-selector-generico id="f_tmp_dash2" idselect="f_tmp_dash" :salida="$periodo" class="selector-generico" style="width: 120px;" selected="mes">
                                <x-slot name="texto" >
                                    {{__('messages.selector-generico-texto-periodo')}}
                                </x-slot>
                            </x-selector-generico>
                        </div>

                        <div clasS="row">
                            {{--<x-selector-semanas id="fltr_sem_dash" idselect="f_sem_dash_ini" :semanas="$semanas" class="fltr_periodo_dash" style="display: none;">
                                <x-slot name="texto">
                                    {{__('messages.selector-semanas-meses-texto-desde')}} Primer Periodo
                                </x-slot>
                            </x-selector-semanas>
                            <x-selector-semanas id="fltr_sem_dash2" idselect="f_sem_dash_fin" :semanas="$semanas" class="fltr_periodo_dash" style="display: none;">
                                <x-slot name="texto">
                                    {{__('messages.selector-semanas-meses-texto-hasta')}} Primer Periodo
                                </x-slot>
                            </x-selector-semanas>--}}

                            <div id="fltr_sem_dash" class="fltr_periodo_dash jstree-div" style="display:none;">
                                <div class="text-field-jstree">Primer Periodo</div>
                                <div class="js-tree-div2">
                                    <x-jstree id="semcomp" :datos="$semanas_jstree" nivel="1" class="d-none" style="display:none"></x-jstree>
                                </div>
                            </div>

                            {{--<x-selector-meses id="fltr_mes_dash" idselect="f_mes_dash_ini" :meses="$meses" class="fltr_periodo_dash">
                                <x-slot name="texto">
                                    {{__('messages.selector-semanas-meses-texto-desde')}} Primer Periodo
                                </x-slot>
                            </x-selector-meses>
                            <x-selector-meses id="fltr_mes_dash2" idselect="f_mes_dash_fin" :meses="$meses" class="fltr_periodo_dash">
                                <x-slot name="texto">
                                    {{__('messages.selector-semanas-meses-texto-hasta')}} Primer Periodo
                                </x-slot>
                            </x-selector-meses>--}}

                            <div id="fltr_mes_dash" class="fltr_periodo_dash jstree-div" style="display:none;">
                                <div class="text-field-jstree">Primer Periodo</div>
                                <div class="js-tree-div2">
                                    <x-jstree id="mescomp" :datos="$meses_jstree" nivel="1"></x-jstree>
                                </div>
                            </div>

                            {{--<x-selector-fiscal id="fltr_fye_dash" idselect="f_fye_dash_ini" :fiscal="$fiscal" class="fltr_periodo_dash" style="display: none;">
                                <x-slot name="texto">
                                    {{__('messages.selector-semanas-meses-texto-desde')}} Primer Periodo
                                </x-slot>
                            </x-selector-fiscal>
                            <x-selector-fiscal id="fltr_fye_dash2" idselect="f_fye_dash_fin" :fiscal="$fiscal" class="fltr_periodo_dash" style="display: none;">
                                <x-slot name="texto">
                                    {{__('messages.selector-semanas-meses-texto-hasta')}} Primer Periodo
                                </x-slot>
                            </x-selector-fiscal>--}}

                            <div id="fltr_fye_dash" class="fltr_periodo_dash jstree-div" style="display:none;">
                                <div class="text-field-jstree">Primer Periodo</div>
                                <div class="js-tree-div2">
                                    <x-jstree id="fyecomp" :datos="$fiscal_jstree" nivel="1"></x-jstree>
                                </div>
                            </div>

                            {{--<x-selector-trimestref id="fltr_trif_dash" idselect="f_trif_dash_ini" :trimestref="$trimestref" class="fltr_periodo_dash" style="display:none;">
                                <x-slot name="texto">
                                    {{__('messages.selector-semanas-meses-texto-desde')}} Primer Periodo
                                </x-slot>
                            </x-selector-trimestref>
                            <x-selector-trimestref id="fltr_trif_dash2" idselect="f_trif_dash_fin" :trimestref="$trimestref" class="fltr_periodo_dash" style="display:none;">
                                <x-slot name="texto">
                                    {{__('messages.selector-semanas-meses-texto-hasta')}} Primer Periodo
                                </x-slot>
                            </x-selector-trimestref>--}}

                            <div id="fltr_trif_dash" class="fltr_periodo_dash jstree-div" style="display:none;">
                                <div class="text-field-jstree">Primer Periodo</div>
                                <div class="js-tree-div2">
                                    <x-jstree id="trifcomp" :datos="$trimestref_jstree" nivel="1"></x-jstree>
                                </div>
                            </div>

                            <x-selector-dias idpadre="dash" style="display: none;"/>

                        </div>

                        @if(in_array($cliente, $arr_dos_periodos))
                                <div clasS="row" style="margin-top:20px;">
                                {{--<x-selector-semanas id="fltr_sem_dashf" idselect="f_sem_dashf_ini" :semanas="$semanas" class="fltr_periodo_dashf" style="display: none;">
                                    <x-slot name="texto">
                                        {{__('messages.selector-semanas-meses-texto-desde')}} Segundo Periodo
                                    </x-slot>
                                </x-selector-semanas>
                                <x-selector-semanas id="fltr_sem_dashf2" idselect="f_sem_dashf_fin" :semanas="$semanas" class="fltr_periodo_dashf" style="display: none;">
                                    <x-slot name="texto">
                                        {{__('messages.selector-semanas-meses-texto-hasta')}} Segundo Periodo
                                    </x-slot>
                                </x-selector-semanas>--}}

                                <div id="fltr_sem_dashf" class="fltr_periodo_dash jstree-div" style="display:none;">
                                    <div class="text-field-jstree">Segundo Periodo</div>
                                    <div class="js-tree-div2f">
                                        <x-jstree id="semcompf" class="jstree2" :datos="$semanas_jstree" nivel="1" class="d-none" style="display:none"></x-jstree>
                                    </div>
                                </div>
                                
                                {{--<x-selector-meses id="fltr_mes_dashf" idselect="f_mes_dashf_ini" :meses="$meses" class="fltr_periodo_dashf">
                                    <x-slot name="texto">
                                        {{__('messages.selector-semanas-meses-texto-desde')}} Segundo Periodo
                                    </x-slot>
                                </x-selector-meses>
                                <x-selector-meses id="fltr_mes_dashf2" idselect="f_mes_dashf_fin" :meses="$meses" class="fltr_periodo_dashf">
                                    <x-slot name="texto">
                                        {{__('messages.selector-semanas-meses-texto-hasta')}} Segundo Periodo
                                    </x-slot>
                                </x-selector-meses>--}}

                                <div id="fltr_mes_dashf" class="fltr_periodo_dash jstree-div" style="display:none;">
                                    <div class="text-field-jstree">Segundo Periodo</div>
                                    <div class="js-tree-div2f">
                                        <x-jstree id="mescompf" class="jstree2" :datos="$meses_jstree" nivel="1"></x-jstree>
                                    </div>
                                </div>

                                {{--<x-selector-fiscal id="fltr_fye_dashf" idselect="f_fye_dashf_ini" :fiscal="$fiscal" class="fltr_periodo_dashf" style="display: none;">
                                    <x-slot name="texto">
                                        {{__('messages.selector-semanas-meses-texto-desde')}} Segundo Periodo
                                    </x-slot>
                                </x-selector-fiscal>
                                <x-selector-fiscal id="fltr_fye_dashf2" idselect="f_fye_dashf_fin" :fiscal="$fiscal" class="fltr_periodo_dashf" style="display: none;">
                                    <x-slot name="texto">
                                        {{__('messages.selector-semanas-meses-texto-hasta')}} Segundo Periodo
                                    </x-slot>
                                </x-selector-fiscal>--}}

                                <div id="fltr_fye_dashf" class="fltr_periodo_dash jstree-div" style="display:none;">
                                    <div class="text-field-jstree">Segundo Periodo</div>
                                    <div class="js-tree-div2f">
                                        <x-jstree id="fyecompf" class="jstree2" :datos="$fiscal_jstree" nivel="1"></x-jstree>
                                    </div>
                                </div>

                                {{--<x-selector-trimestref id="fltr_trif_dashf" idselect="f_trif_dashf_ini" trimestref="$trimestref" class="fltr_periodo_dashf" style="display:none;">
                                    <x-slot name="texto">
                                        {{__('messages.selector-semanas-meses-texto-desde')}} Segundo Periodo
                                    </x-slot>
                                </x-selector-trimestref>
                                <x-selector-trimestref id="fltr_trif_dashf2" idselect="f_trif_dashf_fin" :trimestref="$trimestref" class="fltr_periodo_dashf" style="display:none;">
                                    <x-slot name="texto">
                                        {{__('messages.selector-semanas-meses-texto-hasta')}} Segundo Periodo
                                    </x-slot>
                                </x-selector-trimestref>--}}

                                <div id="fltr_trif_dashf" class="fltr_periodo_dash jstree-div">
                                    <div class="text-field-jstree">Segundo Periodo</div>
                                    <div class="js-tree-div2f">
                                        <x-jstree id="trifcompf" class="jstree2" :datos="$trimestref_jstree" nivel="1"></x-jstree>
                                    </div>
                                </div>    

                                <x-selector-dias idpadre="dashf" style="display: none;"/>
                            </div>
                        @endif

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

        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <div class="row" style="max-height:65px;">
                <x-tabla id="dash" style="height: 60px !important; min-height: 60px;" :favoritosDisabled="$false" :filtros="$filtros" :filtrosAvAlias="$filtrosAvAlias"></x-tabla>
            </div>

            @if($vsta == 'cobertura')
                <div class="row row-dash">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dash-level-one">
                        <div class="row" style="height:100%">
                            <div class="col-md-3 col-lg-3"> {{-- Cobertura --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_cobertura" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_cobertura" class="div_resumen div_resumen_cobertura d-none"></div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Clientes Ganados --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_ganados" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_ganados_info" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Son aquellos que han realizado compras durante el periodo actual, pero no efectuaron ninguna en el periodo anterior" title="Información" style="height:100%;">
                                    <div id="resumen_ganados" class="div_resumen div_resumen_ganados d-none"></div>
                                </div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Clientes Perdidos --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_perdidos" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="rresumen_perdidos_info" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Se refiere a los clientes que realizaron compras en el periodo anterior, pero aún no han efectuado ninguna compra en el periodo actual" title="Información" style="height:100%;">
                                    <div id="resumen_perdidos" class="div_resumen div_resumen_perdidos d-none"></div>
                                </div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Clientes Mantenidos --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_mantenidos" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_mantenidos_info" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Son los clientes que han realizado compras tanto en el periodo actual como en el anterior" title="Información" style="height:100%;">
                                    <div id="resumen_mantenidos" class="div_resumen div_resumen_mantenidos d-none"></div>
                                </div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Frecuencia --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_frecuencia" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_frecuencia_info" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Frecuencia promedio de los clientes. La frecuencia son los meses que cada cliente realizó compras" title="Información" style="height:100%;">
                                    <div id="resumen_frecuencia" class="div_resumen div_resumen_frecuencia d-none"></div>
                                </div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Frecuencia Ganados --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_frecuenciaganados" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_frecuenciaganados_info" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Frecuencia promedio de los clientes clasificados como ganados. La frecuencia son los meses que cada cliente realizó compras" title="Información" style="height:100%;">
                                    <div id="resumen_frecuenciaganados" class="div_resumen div_resumen_frecuenciaganados d-none"></div>
                                </div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Frecuencia Perdidos --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_frecuenciaperdidos" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_frecuenciaperdidos_info" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Frecuencia promedio de los clientes clasificados como perdidos. La frecuencia son los meses que cada cliente realizó compras" title="Información" style="height:100%;">
                                    <div id="resumen_frecuenciaperdidos" class="div_resumen div_resumen_frecuenciaperdidos d-none"></div>
                                </div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Frecuencia Mantenidos --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_frecuenciamantenidos" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_frecuenciamantenidos_info" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Frecuencia promedio de los clientes clasificados como mantenidos. La frecuencia son los meses que cada cliente realizó compras" title="Información" style="height:100%;">
                                    <div id="resumen_frecuenciamantenidos" class="div_resumen div_resumen_frecuenciamantenidos d-none"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="row row-dash">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dash-level-one">
                        <div class="row" style="height:100%">
                            <div class="col-md-3 col-lg-3"> {{-- Sell Out --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_so" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_so" class="div_resumen div_resumen_so d-none"></div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- SC --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_sc" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_sc" class="div_resumen div_resumen_sc d-none"></div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Cobertura --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_cobertura" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_cobertura" class="div_resumen div_resumen_cobertura d-none"></div>
                            </div>

                            <div class="col-md-3 col-lg-3">{{-- Días de Stock --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_doh" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_doh" class="div_resumen div_resumen_doh d-none"></div>
                            </div>  

                            <div class="col-md-3 col-lg-3"> {{-- Ticket Promedio --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_ticket" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_ticket" class="div_resumen div_resumen_ticket d-none"></div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Cajas por Cliente --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_cjscliente" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_cjscliente" class="div_resumen div_resumen_cjscliente d-none"></div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Frecuencia --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_frecuencia" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_frecuencia_info" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="La frecuencia son los meses que cada cliente realizó compras" title="Información" style="height:100%;">
                                    <div id="resumen_frecuencia" class="div_resumen div_resumen_frecuencia d-none"></div>
                                </div>
                            </div>

                            <div class="col-md-3 col-lg-3"> {{-- Volumen por Acto --}}
                                <div class="w-100 justify-content-center" id="f_carga_resumen_volumen" style="height:100%; display:flex; align-items:center;">
                                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                                </div>
                                <div id="resumen_volumen_info" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Cantidad de SC compradas durante el peridoo" title="Información" style="height:100%;">
                                    <div id="resumen_volumen" class="div_resumen div_resumen_volumen d-none"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="row row-dash">
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 dash-level-two"> {{-- Tabla Comparativa --}}
                    <div class="w-100 justify-content-center" id="f_carga_dash_comp" style="height:100%; display:flex; align-items:center;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div id="dash_comp" style="max-height:280px !important">

                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 dash-level-two"> {{-- Participación por Categoría --}}
                    <div class="w-100 justify-content-center" id="f_carga_dash_participacion_categoria" style="height:100%; display:flex; align-items:center;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div id="dash_participacion_categoria">

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

            <div class="row row-dash">
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 dash-level-three"> {{-- Evolutivo --}}
                    <div class="w-100 justify-content-center" id="f_carga_dash_evolucion" style="height:100%; display:flex; align-items:center;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div id="dash_evolucion">

                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 dash-level-three"> {{-- Comparativo por Categoría --}}
                    <div class="w-100 justify-content-center" id="f_carga_dash_salida_categoria" style="height:100%; display:flex; align-items:center;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div id="dash_salida_categoria">

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

    <!--<div class="row row-dash">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dash-level-four"> {{-- Tabla resumen --}}
            <div class="w-100 justify-content-center" id="f_carga_dash_resumen_tabl" style="height:100%; display:flex; align-items:center;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div id="dash_resumen_tabl"></div>
        </div>
    </div>-->
@endsection
@push('javascript')
    <script src="{{ asset('fusioncharts\v3.15.1\js\fusioncharts.js') }}"></script>
    <script src="{{ asset('fusioncharts\v3.15.1\js\themes\fusioncharts.theme.fusion.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\vendor\buttons.flash.min.js') }}"></script>
    <script src="{{ asset('js\jszip.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.fixedColumns.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.fixedHeader.min.js') }}"></script>
    <script src="{{asset('config/datatables.locale.spanish.js')}}"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.colVis.min.js"></script>
<script>
    let ids = ['dash'];

    $(document).ready(() => {
        var cliente_ = "{{$cliente}}";

        jQuery.extend( jQuery.fn.dataTableExt.oSort, {
            "percent-pre": function ( a ) {
                var x = (a == "--%") ? 0 : a.replace( /%/, "" );
                return parseFloat( x );
            },

            "percent-asc": function ( a, b ) {
                return ((a < b) ? -1 : ((a > b) ? 1 : 0));
            },

            "percent-desc": function ( a, b ) {
                return ((a < b) ? 1 : ((a > b) ? -1 : 0));
            }
        } );

        $('#variables_dash').select2MultiCheckboxes({
            placeholder: "{{__('messages.elegir-variables')}}",
            width: "auto",
            templateSelection: function(selected, total) {
                return selected.length + " de " + total + " total";
            }
        });

        $('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");
            if(macroTmp == 'dash'){
                var macroTmp2 = macroTmp+'f';
                $(".fltr_periodo_" + macroTmp2).css("display","none");
                $("#fltr_"+tmp+"_" + macroTmp2).css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp2 + "2").css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp2 + "3").css("display","inline-block");
            }
        });

        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: moment((new Date()).setDate(ahora.getDate()-1))
        };
        ["#f_dia_dash_ini"].forEach((selector, i) => {
            $(selector).daterangepicker(congifDate);
        });

        var configDateComp = congifDate;
        configDateComp['minDate'] = moment((new Date()).setDate(ahora.getDate()-730));
        configDateComp['startDate'] = moment((new Date()).setDate(ahora.getDate()-387));
        configDateComp['endDate'] = moment((new Date()).setDate(ahora.getDate()-367))
        $('#f_dia_dashf_ini').daterangepicker(configDateComp);

        $('#f_mes_dash_ini').val($('#f_mes_dash_fin').val()).change();
        $('#f_mes_dashf_ini').val($('#f_mes_dashf_fin').val()).change();
        $('#f_sem_dash_ini').val($('#f_sem_dash_fin').val()).change();
        $('#f_sem_dashf_ini').val($('#f_sem_dashf_fin').val()).change();
        $('#f_trif_dash_ini').val($('#f_trif_dash_fin').val()).change();
        $('#f_trif_dashf_ini').val($('#f_trif_dashf_fin').val()).change();
        $('#f_fye_dash_ini').val($('#f_fye_dash_fin').val()).change();
        $('#f_fye_dashf_ini').val($('#f_fye_dashf_fin').val()).change();

        $('#f_mes_dashf_ini').val($('#f_mes_dashf_ini').val() - 100).change();
        $('#f_mes_dashf_fin').val($('#f_mes_dashf_fin').val() - 100).change();

        $('#f_sem_dashf_ini').val($('#f_sem_dashf_ini').val() - 100).change();
        $('#f_sem_dashf_fin').val($('#f_sem_dashf_fin').val() - 100).change();

        $('#f_trif_dashf_ini').val($('#f_trif_dashf_ini').val() - 100).change();
        $('#f_trif_dashf_fin').val($('#f_trif_dashf_fin').val() - 100).change();

        $('#f_fye_dashf_ini').val($('#f_fye_dashf_ini').val() - 100).change();
        $('#f_fye_dashf_fin').val($('#f_fye_dashf_fin').val() - 100).change();

        if(cliente_ == 'clorox'){
            $('#f_tmp_dash').val('ytdf').change();
            $('#f_clienteunico_dash').val('DIMAK').change();
            $('#variables_dash').val(['1-20', '1-25']).change();
        }
    });
    var filtrosPromise = getFiltrosAv('{{$cliente}}', '350');

    filtrosPromise.then(function(resp){
        ponerFiltrosAv(resp);
    });
</script>
@endpush
@section('js_after')
<script src="{{asset("js/custom/utilidades.js")}}"></script>
<script src="{{asset("js/custom/reporteriaGetter.js")}}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script>
    $('.jstree').jstree({
        "checkbox": {
            "keep_selected_style": false
        },
        "plugins": ["checkbox"],
        "core": {
            "themes": {
                "icons": false
            },
            "force_text": true,
        }
    });

    $('.jstree').on('ready.jstree', function () {
        $(this).jstree('open_all');
    });

        let arr_comp_data = new Array(); arr_comp_data['trif'] = ["{{$max_trif}}"];
        let arr_comp_data2 = new Array(); arr_comp_data2['trif'] = ["{{$trif_ant}}"];
        var datos = [];
        let predeterminado = [$('#f_tmp_dash').val(), $('#f_mes_dash_ini').val(), $('#f_mes_dash_fin').val(), $('#formato').val()];
        for (const [key, value] of Object.entries(datos)) {
            datos[key]=JSON.parse(value);
        }
        $('.js-tree-div2 .jstree').on("changed.jstree", function (e, data) {
            var _tmp = document.getElementById('f_tmp_dash').value;
            arr_comp_data[_tmp] = data.selected;
            arr_comp_data[_tmp] = arr_comp_data[_tmp].filter(function (item) {
                return item.indexOf("j") !== 0;
            });
        });

        $('.js-tree-div2f .jstree').on("changed.jstree", function (e, data) {
            var _tmp = document.getElementById('f_tmp_dash').value;
            arr_comp_data2[_tmp] = data.selected;
            arr_comp_data2[_tmp] = arr_comp_data2[_tmp].filter(function (item) {
                return item.indexOf("j") !== 0;
            });
        });
</script>
@endsection