@extends('layouts.reporte')

@section('php')
    @php
        use Illuminate\Support\Facades\DB;
        use App\Bd\Bd;
        $cadenas = DB::table('data_inventario')->select('cadena')->groupBy('cadena')->get()->all();
        $arr = [];
        for($i=0;$i<sizeof($cadenas);$i++){
            if($cadenas[$i]->cadena != 'CD') $arr[$cadenas[$i]->cadena] = $cadenas[$i]->cadena;
        }
        $cliente = config('app.CLIENTE');
       
        $variable = json_encode(["3-5"=>"LOCAL"]);
        $variable_grafdistflex = array('Local' => ['2-0'=>'Cadena', '3-5'=>'Local']);
        $variable_distflex = json_encode(['2-0'=>'Cadena', '3-5'=>'Local']);
        $variable_nuevo_desc = json_encode(['new' => 'Nuevos', 'desc' => 'Descontinuados']);
        $salida_nuevo_desc = json_encode(['1' => __("messages.grupo-Producto"), '2' => __("messages.grupo-Local")]);
        $mes_new = [];
        $mes_desc = [];
        for ($i=0; $i < 10; $i+=2) { 
            $mes_new[$i+2] = ($i+2).' meses o menos';
            $mes_desc[$i+2] = ($i+2).' meses o mas';
        }
        $salida = json_encode(["2"=> __('messages.ventas'),"3"=> __('Ventas (U)')]);
        $salida2 = json_encode(['1' => __('messages.unidades')]);
        $periodo = json_encode(["dia"=> __('messages.dias'), "sem" => __('messages.semanas'), "mes" => __('messages.meses')]);
        $periodo_grafdist = json_encode(["dia"=> __('messages.dias'), "sem"=> __('messages.semanas') ]);
        $porcentaje = json_encode(['todo'=>'Todo',"20"=> "0% - 20%", "40"=> "21% - 40%", "60"=> "41% - 60%", "80"=> "61% - 80%", "100"=> "81% - 100%"]);
        $orden_salida = json_encode(['Mayor' => 'Mayor a Menor', 'Menor' => 'Menor a Mayor']);

        $periodo_grafdisp = json_encode(["dia"=> __('messages.dias'),]);
        $periodo_comp = json_encode(["ytd"=>__('messages.ytd'), "mec"=>__('messages.mec'), "sem"=>__('messages.semanas'), "mes"=>__('messages.meses')]);
        $mesesComp = [];
        $semanasComp = [];
        $yearAct = date("Y");
        $yearAnt = date("Y")-1;
        $mesAct = date("m");
        $fechaAct = $yearAct.$mesAct;
        $fechaAnt = $yearAnt.$mesAct;
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct) {
                $mesesMatri [$value->periodo]= $value->nombre;
            }
            if($_year == $yearAct-1) {
                $mesesMatri [$value->periodo]= $value->nombre;
            }
        }
        $matri = [];
        $matri["mec"] = "Mes en curso";
        for($i=$fechaAct;$i>$fechaAnt;$i--){
            $matri[$i] = "Desde ".$mesesMatri[$i];
            if($i == $yearAct."01"){
                $matri[$yearAnt."12"] = "Desde ".$mesesMatri[$yearAnt."12"];
                $i = $yearAnt."12";
            } 
        }

        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct) {
                $mesesComp []= $value;
            }
        }
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct) {
                $semanasComp []= $value;
            }
        }

        if($cliente == 'ducasse'){
            $salida = json_encode(["30"=> __('messages.ventas')]);
            $salida2 = json_encode(["10"=> __('messages.unidades')]);
        }

        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='';
        }
        $ncadena = "Cadena";
        $display_grafico = '';
        $display_tabla = '';
    @endphp
@endsection

@if(count($selectores_grafico)>0)
@section('grafico')
    @if(isset($selectores_grafico['grafdist']))
        <x-grafico id="grafdist" :filtrosAv="$filtrosAv" :filtros="$filtros" :filtrosAvAlias="$filtrosAvAlias" style="height: 450px !important; {{$display_grafico}}">
            <x-selector-generico id="variables_grafdist2" idselect="variables_grafdist" :salida="$variable"  class="selector-generico d-none" style="width: 120px" disabled="">
                @if($cliente == 'colgate')
                <x-slot name="texto">
                    {{__('messages.selector-variable-texto-desglosar')}}
                </x-slot>
                @else
                <x-slot name="texto">
                    {{__('messages.selector-variable-texto')}}
                </x-slot>
                @endif
            </x-selector-generico>

            <x-selector-generico id="salida_grafdist2" idselect="salida_grafdist" :salida="$salida"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            @if ($cliente == "southwind")
                <x-selector-generico id="f_tmp_grafdist2" idselect="f_tmp_grafdist" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="dia">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
                <x-selector-dias idpadre="grafdist"  />
                <x-selector-meses id="fltr_mes_grafdist" idselect="f_mes_grafdist_ini" :meses="$meses" class="fltr_periodo_grafdist" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-meses>
                <x-selector-meses id="fltr_mes_grafdist2" idselect="f_mes_grafdist_fin" :meses="$meses" class="fltr_periodo_grafdist" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-meses>
            @else
                @if ($cliente == "bless")
                    <x-selector-generico id="f_tmp_grafdist2" idselect="f_tmp_grafdist" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="mes">
                        <x-slot name="texto">
                            {{__('messages.selector-generico-texto-periodo')}}
                        </x-slot>
                    </x-selector-generico>
                    <x-selector-dias idpadre="grafdist" style="display: none" />
                    <x-selector-meses id="fltr_mes_grafdist" idselect="f_mes_grafdist_ini" :meses="$meses" class="fltr_periodo_grafdist">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-desde')}}
                        </x-slot>
                    </x-selector-meses>
                    <x-selector-meses id="fltr_mes_grafdist2" idselect="f_mes_grafdist_fin" :meses="$meses" class="fltr_periodo_grafdist">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-hasta')}}
                        </x-slot>
                    </x-selector-meses>
                @else
                    <x-selector-generico id="f_tmp_grafdist2" idselect="f_tmp_grafdist" :salida="$periodo_grafdist"  class="selector-generico" style="width: 120px" selected="dia">
                        <x-slot name="texto">
                            {{__('messages.selector-generico-texto-periodo')}}
                        </x-slot>
                    </x-selector-generico>
                    <x-selector-dias idpadre="grafdist"  />
                    <x-selector-meses id="fltr_mes_grafdist" idselect="f_mes_grafdist_ini" :meses="$meses" class="fltr_periodo_grafdist" style="display: none;">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-desde')}}
                        </x-slot>
                    </x-selector-meses>
                    <x-selector-meses id="fltr_mes_grafdist2" idselect="f_mes_grafdist_fin" :meses="$meses" class="fltr_periodo_grafdist" style="display: none;">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-hasta')}}
                        </x-slot>
                    </x-selector-meses>
                @endif
            @endif


            <x-selector-semanas id="fltr_sem_grafdist" idselect="f_sem_grafdist_ini" :semanas="$semanas"  class="fltr_periodo_grafdist" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafdist2" idselect="f_sem_grafdist_fin" :semanas="$semanas" class="fltr_periodo_grafdist" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-boton-actualizar onclick="getGrafDist('{{$cliente}}', 'ventas');" />

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafdistloc']))
        <x-grafico id="grafdistloc" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_grafdistloc2" idselect="salida_grafdistloc" :salida="$salida"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="porcentaje_grafdistloc2" idselect="porcentaje_grafdistloc" :salida="$porcentaje"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Porcentaje
                </x-slot>
            </x-selector-generico>
            <x-selector-generico id="orden_grafdistloc2" idselect="orden_grafdistloc" :salida="$orden_salida"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Orden De Columnas
                </x-slot>
            </x-selector-generico>

            <x-selector-dias idpadre="grafdistloc"  />

            <x-boton-actualizar onclick="getGrafDistLoc('{{$cliente}}', 'ventas');" />

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    {{-- 
        grafdistflex es el equivalente para grafdistloc, solo que es flexible y se puede adaptar a otros "desgloses por".
        Cambiar $variable_grafdistflex según requerimiento 
    --}}
    @if(isset($selectores_grafico['grafdistflex']))
        <x-grafico id="grafdistflex" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="salida_grafdistflex2" idselect="salida_grafdistflex" :salida="$salida"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-variable id="variable_grafdistflex" :lista='$variable_grafdistflex' selected="2-0" cliente='$cliente'/>

            <x-selector-dias idpadre="grafdistflex"  />

            <x-boton-actualizar onclick="getGrafDistFlex('{{$cliente}}', 'ventas');" />

        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif

    @if(isset($selectores_grafico['grafnuevo_desc']))
        <x-grafico id="grafnuevo_desc" style="{{$display_grafico}}">
            <x-selector-generico id="salida_grafnuevo_desc2" idselect="salida_grafnuevo_desc" :salida="$salida"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_mes_corte_new22" idselect="f_mes_corte_new" :salida="json_encode($mes_new)"  class="selector-generico" style="width: 160px" selected="4">
                <x-slot name="texto">
                    {{__('messages.nuevo-hace')}}
                </x-slot>
            </x-selector-generico>

            <x-boton-actualizar style="display: none;" onclick="getGrafNuevoDesc('{{$cliente}}', 'ventas');" />
        </x-grafico>
        @php $display_grafico = 'display: none;'; @endphp
    @endif
@endsection
@endif

@if(count($selectores_tabla)>0)
@section('tabla')
@php
    echo $div;   
@endphp
    @if(isset($selectores_tabla['dist']))
        <x-tabla id="dist" :filtrosAv="$filtrosAv" :filtros="$filtros" :filtrosAvAlias="$filtrosAvAlias" style="height: 600px !important; {{$display_tabla}}">
            <x-selector-generico id="variables_dist2" idselect="variables_dist" :salida="$variable"  class="selector-generico d-none" style="width: 120px" disabled="">
                <x-slot name="texto">
                    {{__('messages.selector-variable-texto')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="salida_dist2" idselect="salida_dist" :salida="$salida"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            @if ($cliente == "southwind")
                <x-selector-generico id="f_tmp_dist2" idselect="f_tmp_dist" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="dia">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
                <x-selector-meses id="fltr_mes_dist" idselect="f_mes_dist_ini" :meses="$meses" class="fltr_periodo_dist" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-meses>
                <x-selector-meses id="fltr_mes_dist2" idselect="f_mes_dist_fin" :meses="$meses" class="fltr_periodo_dist" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-meses>
            @else
                @if ($cliente == "bless")
                    <x-selector-generico id="f_tmp_dist2" idselect="f_tmp_dist" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="mes">
                        <x-slot name="texto">
                            {{__('messages.selector-generico-texto-periodo')}}
                        </x-slot>
                    </x-selector-generico>

                    <x-selector-dias idpadre="dist" style="display: none"/>
                    <x-selector-meses id="fltr_mes_dist" idselect="f_mes_dist_ini" :meses="$meses" class="fltr_periodo_dist">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-desde')}}
                        </x-slot>
                    </x-selector-meses>
                    <x-selector-meses id="fltr_mes_dist2" idselect="f_mes_dist_fin" :meses="$meses" class="fltr_periodo_dist" selected="{{date('Ym', strtotime('-1 month'))}}">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-hasta')}}
                        </x-slot>
                    </x-selector-meses>
                @else
                
                    <x-selector-generico id="f_tmp_dist2" idselect="f_tmp_dist" :salida="$periodo_grafdist"  class="selector-generico" style="width: 120px" selected="dia">
                        <x-slot name="texto">
                            {{__('messages.selector-generico-texto-periodo')}}
                        </x-slot>
                    </x-selector-generico>
                    <x-selector-dias idpadre="dist" style="display: block"/>

                    <x-selector-meses id="fltr_mes_dist" idselect="f_mes_dist_ini" :meses="$meses" class="fltr_periodo_dist" style="display: none;">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-desde')}}
                        </x-slot>
                    </x-selector-meses>
                    <x-selector-meses id="fltr_mes_dist2" idselect="f_mes_dist_fin" :meses="$meses" class="fltr_periodo_dist" style="display: none;">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-hasta')}}
                        </x-slot>
                    </x-selector-meses>
                @endif
            @endif
            <x-selector-semanas id="fltr_sem_dist" idselect="f_sem_dist_ini" :semanas="$semanas"  class="fltr_periodo_dist" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_dist2" idselect="f_sem_dist_fin" :semanas="$semanas" class="fltr_periodo_dist" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-boton-actualizar onclick="getDist('{{$cliente}}', 'ventas');" />

            <x-infobox tamano="25px" texto="" modal="tabla_evolutivo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_evolutivo_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 Distribución</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_matriz.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Contenido de la tabla:</b> Se muestra si un local tuvo ventas durante cada parte del periodo seleccionado. En la columna "Total" se despliega el porcentaje de periodos por los cuales el local tuvo venta.</p>
                        <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 Variable:</b> Definir Variable en filas de la tabla.</li>
                            <li><b>Selector Valor Salida:</b> Seleccionar tipo de unidad sobre la que se consulta.</li>
                            <li><b>Selector Tipo Periodo:</b> Definir el tipo de periodo que se consulta.</li>
                            <li><b>Selector Periodo:</b> Definir el rango de fechas que se consulta.</li>
                            <li><b>Limitaciones:</b> 12 Meses, 52 Semanas o 45 Días para combinaciones Producto-Local.</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-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif

    {{-- 
        distflex es el equivalente para dist, solo que es flexible y se puede adaptar a otros "desgloses por".
        Cambiar $variables_distflex según requerimiento 
    --}}
    @if(isset($selectores_tabla['distflex']))
        <x-tabla id="distflex" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="variables_distflex2" idselect="variables_distflex" :salida="$variable_distflex"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-variable-texto')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="salida_distflex2" idselect="salida_distflex" :salida="$salida"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>
            @if ($cliente == "southwind")
                <x-selector-generico id="f_tmp_distflex2" idselect="f_tmp_distflex" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="dia">
                    <x-slot name="texto">
                        {{__('messages.selector-generico-texto-periodo')}}
                    </x-slot>
                </x-selector-generico>
                <x-selector-meses id="fltr_mes_distflex" idselect="f_mes_distflex_ini" :meses="$meses" class="fltr_periodo_distflex" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-desde')}}
                    </x-slot>
                </x-selector-meses>
                <x-selector-meses id="fltr_mes_distflex2" idselect="f_mes_distflex_fin" :meses="$meses" class="fltr_periodo_distflex" style="display: none;">
                    <x-slot name="texto">
                        {{__('messages.selector-semanas-meses-texto-hasta')}}
                    </x-slot>
                </x-selector-meses>
            @else
                @if ($cliente == "bless")
                    <x-selector-generico id="f_tmp_distflex2" idselect="f_tmp_distflex" :salida="$periodo"  class="selector-generico" style="width: 120px" selected="mes">
                        <x-slot name="texto">
                            {{__('messages.selector-generico-texto-periodo')}}
                        </x-slot>
                    </x-selector-generico>

                    <x-selector-dias idpadre="distflex" style="display: none"/>
                    <x-selector-meses id="fltr_mes_distflex" idselect="f_mes_distflex_ini" :meses="$meses" class="fltr_periodo_distflex">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-desde')}}
                        </x-slot>
                    </x-selector-meses>
                    <x-selector-meses id="fltr_mes_distflex2" idselect="f_mes_distflex_fin" :meses="$meses" class="fltr_periodo_distflex" selected="{{date('Ym', strtotime('-1 month'))}}">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-hasta')}}
                        </x-slot>
                    </x-selector-meses>
                @else
                
                    <x-selector-generico id="f_tmp_distflex2" idselect="f_tmp_distflex" :salida="$periodo_grafdist"  class="selector-generico" style="width: 120px" selected="dia">
                        <x-slot name="texto">
                            {{__('messages.selector-generico-texto-periodo')}}
                        </x-slot>
                    </x-selector-generico>
                    <x-selector-dias idpadre="distflex" style="display: block"/>

                    <x-selector-meses id="fltr_mes_distflex" idselect="f_mes_distflex_ini" :meses="$meses" class="fltr_periodo_distflex" style="display: none;">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-desde')}}
                        </x-slot>
                    </x-selector-meses>
                    <x-selector-meses id="fltr_mes_distflex2" idselect="f_mes_distflex_fin" :meses="$meses" class="fltr_periodo_distflex" style="display: none;">
                        <x-slot name="texto">
                            {{__('messages.selector-semanas-meses-texto-hasta')}}
                        </x-slot>
                    </x-selector-meses>
                @endif
            @endif
            <x-selector-semanas id="fltr_sem_distflex" idselect="f_sem_distflex_ini" :semanas="$semanas"  class="fltr_periodo_distflex" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_distflex2" idselect="f_sem_distflex_fin" :semanas="$semanas" class="fltr_periodo_distflex" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-boton-actualizar onclick="getDistFlex('{{$cliente}}', 'ventas');" />

        </x-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['matri']))
        <x-tabla id="matri" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="cadena_matri2" idselect="cadena_matri" :salida="json_encode($arr)"  class="selector-generico" style="width: 120px" selected="JUMBO">
                <x-slot name="texto">
                    {{$ncadena}}
                </x-slot>
            </x-selector-generico>
            
            <x-selector-generico id="salida_matri2" idselect="salida_matri" :salida="$salida"  class="selector-generico @if(cliente=='siksa') d-none @endif" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_matri2" idselect="f_tmp_matri" :salida="json_encode($matri)"  class="selector-generico" style="width: 160px" selected="mec">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <div class="col col-md-auto obj_filtro form-group font-weight-normal d-flex align-items-center">
                <label class="align-items-center d-flex" style="padding-top: 15px">
                    <input id="f_transponer_matri" type="checkbox" style="margin-right: 5px"> Transponer
                </label>
            </div>

            <x-boton-actualizar onclick="getMatriDist('{{$cliente}}', 'matriz');" />
            
        </x-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif

    @if(isset($selectores_tabla['nuevo_desc']))
        <x-tabla id="nuevo_desc" style="height: 600px !important; {{$display_tabla}}" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="f_nuevo_desc2" idselect="f_nuevo_desc" :salida="$variable_nuevo_desc"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.nuevo_desc')}}
                </x-slot>
            </x-selector-generico>
            
            <x-selector-generico id="salida_nuevo_desc2" idselect="salida_nuevo_desc" :salida="$salida_nuevo_desc"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.grupo-Producto').' / '.__('messages.grupo-Local')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="salida_nuevo_desc_campo2" idselect="salida_nuevo_desc_campo" :salida="$salida2"  class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-valor')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_mes_corte_new2" idselect="f_mes_corte_n" :salida="json_encode($mes_new)"  class="selector-generico" style="width: 160px" selected="4">
                <x-slot name="texto">
                    {{__('messages.nuevo-hace')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_mes_corte_desc2" idselect="f_mes_corte_desc" :salida="json_encode($mes_desc)"  class="selector-generico d-none" style="width: 160px;" selected="4">
                <x-slot name="texto">
                    {{__('messages.sin-ventas-en')}}
                </x-slot>
            </x-selector-generico>

            <x-boton-actualizar onclick="getNuevoDesc('{{$cliente}}', 'ventas');" />
            
        </x-tabla>
        @php $display_tabla = ' display: none;'; @endphp
    @endif
@endsection
@endif

@section('js_aft')

<script> 
    let ids = ['dist', 'grafdist', 'grafnuevo_desc', 'matri', 'grafdistloc', 'grafdistflex', 'distflex', 'nuevo_desc', 'disp'];
    var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
    //getGrafNuevoDesc('{{$cliente}}', 'ventas');
    $(document).ready(() => {
        filtrosPromise.then(function(resp){
            ponerFiltrosAv(resp);
        });

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

        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));
            }
        } );

        ids.forEach(function(item){
            if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
        });

        var ahora = new Date();
        if("{{$cliente}}" == "bless"){
            ahora = new Date(ahora.getFullYear(), ahora.getMonth(), 0);
        }
        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(ahora.getFullYear(), ahora.getMonth(), ahora.getDate()-15))),
            endDate: ahora
        };

        $("#f_dia_disp_ini").daterangepicker(congifDate);
        $("#f_dia_grafdisp_ini").daterangepicker(congifDate);
        $("#f_dia_grafdisploc_ini").daterangepicker(congifDate);

        $("#f_dia_dist_ini").daterangepicker(congifDate);
        $("#f_dia_distflex_ini").daterangepicker(congifDate);
        $("#f_dia_grafdist_ini").daterangepicker(congifDate);
        $("#f_dia_grafdistloc_ini").daterangepicker(congifDate);
        $("#f_dia_grafdistflex_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");
        });
        $("#f_nuevo_desc").on('change', function() {
            var selectedValue = $(this).val();
            if(selectedValue == "desc") {
                console.log('entra')
                $("#f_mes_corte_new2").addClass('d-none');
                $("#f_mes_corte_desc2").removeClass('d-none');
            }else{
                $("#f_mes_corte_new2").removeClass('d-none');
                $("#f_mes_corte_desc2").addClass('d-none');
            }
        });
    });

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

@endsection