@extends('layouts.reporte')
    <!-- END Hero -->
@section('css_after')
<link rel="stylesheet" href="{{asset('css\vendor\dataTables.bootstrap5.css') }}">
<link rel="stylesheet" href="{{asset('css\vendor\buttons.bootstrap5.css') }}">

<link rel="stylesheet" href="{{asset('css/fixedColumns.bootstrap5.min.css')}}">
<link rel="stylesheet" href="{{asset('css/fixedHeader.bootstrap5.min.css')}}">
    <style>
        .green_field{
            color: rgb(11, 190, 11);
        }
        .red_field{
            color: rgb(255, 58, 58);
        }
    </style>
@endsection

@section('php')
    @php
        $meses1 = [
            1=>'Enero', 2=>'Febrero', 3=>'Marzo',
            4=>'Abril', 5=>'Mayo', 6=>'Junio',
            7=>'Julio', 8=>'Agosto', 9=>'Septiembre',
            10=>'Octubre', 11=>'Noviembre', 12=>'Diciembre'
        ];
        $locales = [];
        $cantidad = 100;
        while ($cantidad <= $cantidad_locales) {
            $locales []= $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales []= $cantidad_locales;
        }
        $cliente = config('app.CLIENTE');
        $locales = json_encode($locales);
        if ($cliente == "colgate") {
            $valor_salida = json_encode(["uni"=> __('messages.unidades'), "700" => __('messages.dias-de-inventario')]);
        }else{
            $valor_salida = json_encode(["uni"=> __('messages.unidades')]);
        }
        $tipo_periodo = 'mec';
        $tipo_periodo_ = 'dia';

        $display = 'none';
        if($cliente == 'colgate'){
            $tipo_periodo = 'mes';
            $tipo_periodo_ = 'mes';

            $display = 'block';
        }
        $salida_evo = json_encode(['901' => 'OSA', '900' => 'Instock', '902' => 'Inventario Fantasma', '903' => 'Quiebre']);
        $pareto = json_encode(['100' => '100% de la Venta', '80' => '80% de la Venta']);

        $pareto2 = json_encode(['100' => __('messages.100'), '20' => __('messages.20'), '80' => __('messages.80')]);
        $periodo = json_encode(['dia' => __('messages.dias')]);
        $periodo2 = json_encode(['mes' => __('messages.meses'), 'sem'=> __('messages.semanas')]);
        $tipoStock = json_encode(['1' => __('messages.catalogado'), '0' => __('messages.no-catalogado'), '2' => __('messages.no-informado'), '' => __('messages.todos')]);
        $tipoStock2 = json_encode(['1' => __('messages.catalogado'), '0' => __('messages.no-catalogado'), '2' => __('messages.no-informado'), '' => __('messages.todos')]);
        $alertasForecast = json_encode(['alerta1' => 'Venta 7 = Forecast', 'alerta2' => 'Venta 7 < Forecast', 'alerta3' => 'Venta 7 > Forecast', 'alerta4' => 'Venta 7 < Venta 30 (Sem)', 'alerta5' => 'Venta 7 > Venta 30 (Sem)', 'alerta6' => 'Venta 7 != Venta 30 (Sem)', '' => 'Todos']);
        //$motivos = json_encode(["" => __('messages.todos'),"DISPONIBLE" => "DISPONIBLE","NUEVO PRODUCTO" => "NUEVO PRODUCTO","STOCK FANTASMA" => "STOCK FANTASMA","STOCK NEGATIVO" => "STOCK NEGATIVO"]);
        $motivos = ['' => __('messages.todos')];
        if(count($motivosOSA) > 0){
            foreach($motivosOSA as $motivosOsaAux){
                $motivos[$motivosOsaAux->motivo] = $motivosOsaAux->motivo;
            }
        }
        $motivos = json_encode($motivos);
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),"mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        $display_grafico = '';
        $display_tabla = '';
        if ($div_reportes != null) {
            $div = '<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><ul>';
            foreach ($div_reportes as $value) {
                $div.="<li>".$value->Descripcion."</li>";
            }
            $div.="</ul></div>";
        }else{
            $div='';
        }

        if($cliente == 'mondelezmx'){
            unset($variables['Local']['3-6']); // Zona
            unset($variables['Local']['3-4']); // Zona nielsen
            unset($variables['Local']['3-8']); // Cluster
        }


        $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;
      
        $mesesComp = [];
        $yearAct = date('Y');
        $yearAnt = date('Y') - 1;
        $semanasComp = [];
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt) {
                $mesesComp []= $value;
            }
        }
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct) {
                $semanasComp []= $value;
            }
        }
     
        $salida_detalle = json_encode(['1' => 'Unidades', '2' => 'Kilos']);
    @endphp
@endsection

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

@if(count($selectores_grafico)>0)
@section('grafico')
    @if(isset($selectores_grafico['grafinstockdoh']))
        <x-grafico id="grafinstockdoh" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="f_catalogado_grafinstockdoh" idselect="f_catalogado_grafinstockdoh" :salida="$tipoStock2"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="80" id="f_pareto_grafinstockdoh2" idselect="f_pareto_grafinstockdoh" :salida="$pareto" class="selector-generico" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_grafinstockdoh2" idselect="f_tmp_grafinstockdoh" :salida="$periodo2"  class="" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafinstockdoh" idselect="f_sem_grafinstockdoh_ini" :semanas="$semanas"  class="fltr_periodo_grafinstockdoh" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafinstockdoh2" idselect="f_sem_grafinstockdoh_fin" :semanas="$semanas" class="fltr_periodo_grafinstockdoh" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafinstockdoh" idselect="f_mes_grafinstockdoh_ini" :meses="$mesesComp" class="fltr_periodo_grafinstockdoh" selected="{{date('Y01')}}">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>

            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafinstockdoh2" idselect="f_mes_grafinstockdoh_fin" :meses="$mesesComp" class="fltr_periodo_grafinstockdoh">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-generico id="f_type_grafinstockdoh2" idselect="f_type_grafinstockdoh" :salida="$tipos_graficos"  class="selector-generico" style="width: 120px" 
            selected="msline">
                <x-slot name="texto">
                    {{__('messages.selector-tipo-grafico')}}
                </x-slot>
            </x-selector-generico>

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

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

@if(count($selectores_tabla)>0)
@section('tabla')
    @if(isset($selectores_tabla['evoOsa']))
        <x-tabla id="evoOsa" style="{{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_evoOsa" :lista='$variables' selected="2-5" cliente='$cliente'/>
            <x-selector-variable id="variables_evoOsa2" :lista='$variables_2' selected="" cliente='$cliente'/>

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

            <x-selector-generico id="f_catalogado_evoOsa2" idselect="f_catalogado_evoOsa" :salida="$tipoStock2"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="80" id="salida_evoOsa_pareto2" idselect="salida_evoOsa_pareto" :salida="$pareto" 
            class="selector-generico" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_evoOsa2" idselect="f_tmp_evoOsa" :salida="$periodo2"  class="selector-generico" style="width: 120px" selected="{{$tipo_periodo_}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <!--evoOsaLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_evoOsa" idselect="f_sem_evoOsa_ini" :semanas="$semanas"  class="fltr_periodo_evoOsa" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_evoOsa2" idselect="f_sem_evoOsa_fin" :semanas="$semanas" class="fltr_periodo_evoOsa" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <!--evoOsaLUTVO MES-->
            <x-selector-meses id="fltr_mes_evoOsa" idselect="f_mes_evoOsa_ini" :meses="$meses" class="fltr_periodo_evoOsa" style="display: block;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_evoOsa2" idselect="f_mes_evoOsa_fin" :meses="$meses" class="fltr_periodo_evoOsa" style="display: block;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
            <!--AÑO-->
            <div id="fltr_year_evoOsa" style="width:120px; display:none;" class="fltr_periodo_evoOsa col-md-auto obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </div>
                <label class="w-100">
                    <select id="f_year_evoOsa_ini" name="f_year_evoOsa_ini" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202001">2020</option>
                        <option value="202101">2021</option>
                    </select>
                </label>
            </div>
            <div id="fltr_year_evoOsa2" style="width:120px; display:none;" class="fltr_periodo_evoOsa col-md-auto obj_filtro form-group">
                <div style="text-align:center; font-size: 1.0em;color:#566573">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </div>
                <label class="w-100">
                    <select id="f_year_evoOsa_fin" name="f_year_evoOsa_fin" class="flt form-control select2 " data-toggle="select2" width="100%">
                        <option value="202053">2020</option>
                        <option value="202153">2021</option>
                    </select>
                </label>
            </div>

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

            <x-infobox tamano="25px" texto="" modal="tabla_detalles_modal_evoOsa"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_detalles_modal_evoOsa" 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 OSA Evolutivo</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/osa_tabla_evolutivo.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Desglosar Por:</b> Definir la variable por la cual se desglosa el reporte. Es posible desglosar hasta por dos variables (en su segundo selector).</li>
                            <li><b>Valor Salida:</b> Definir la salida del reporte (OSA, Inventario Fantasma, Quiebre).</li> 
                            <li><b>Pareto:</b> Definir el Pareto a considerar en el reporte.</li> 
                            <li><b>Tipo de Periodo:</b> Definir la periodicidad del reporte.</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>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> (KAM).</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de la tabla.</p>
                        <ul>
                            <li><b>Columas:</b> Corresponde al periodo del registro, según lo establecido en el selector Tipo Periodo.</li>
                        </ul>
                    </div>
                </div>
            </div>

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

    @if(isset($selectores_tabla['osaGeneral']))
        <x-tabla id="osaGeneral" style="height: 600px !important;  {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias"> 
            <x-selector-variable id="variables_osaGeneral" :lista='$variables' selected='2-0' />

            <x-selector-generico id="f_catalogado_osaGeneral2" idselect="f_catalogado_osaGeneral" :salida="$tipoStock2"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="80" id="f_pareto_osaGeneral2" idselect="f_pareto_osaGeneral" :salida="$pareto" 
            class="selector-generico" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

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

            <x-selector-generico id="f_salida2" idselect="f_salida" :salida="$salida_detalle" class="selector-generico d-none" style="width: 120px">
                <x-slot name="texto">
                </x-slot>
            </x-selector-generico>

            <x-boton-actualizar onclick="getOsaGeneral('{{$cliente}}', 'stocks')"/>

            <x-infobox tamano="25px" texto="" modal="tabla_detalles_modal_osaGeneral"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_detalles_modal_osaGeneral" 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 OSA General</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/osa_tabla_general.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Desglosar Por:</b> Definir la variable por la cual se desglosa el reporte.</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> (KAM).</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de la tabla.</p>
                        <ul>
                            <li><b>Columa Instock (%):</b> Porcentaje de productos InStock.</li>
                            <li><b>Columa DOH:</b> Formula: (STOCK*30) / Ventas ult. 30 dias.</li>
                            <li><b>Columa Stock (U):</b> Cantidad en Unidades de Stock.</li>

                            <li><b>Columa Ventas MEC ($):</b> Ventas Mes en Curso en ($).</li>
                            <li><b>Columa OSA (%):</b> OSA asociado.</li>

                            <li><b>Columa Venta Perdida ($):</b> Venta Perdida en ($).</li>
                            <li><b>Columa Venta Perdida (U):</b> Venta Perdida en (U).</li>
                        </ul>
                    </div>
                </div>
            </div>

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

    @if(isset($selectores_tabla['compOsa']))
        <x-tabla id="compOsa" style="{{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_compOsa" :lista='$variables' selected='2-0' cliente='$cliente'/>
        
            <x-selector-generico id="salida_compOsa2" idselect="salida_compOsa" :salida="$salida_evo"  class="selector-generico" style="width: 120px;display:none">
            
            </x-selector-generico>

            <x-selector-generico selected="80" id="salida_compOsa_pareto2" idselect="salida_compOsa_pareto" :salida="$pareto" 
            class="selector-generico" >
                <x-slot name="texto">
                    Pareto
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_compOsa2" idselect="f_tmp_compOsa" :salida="$periodo2"  class="selector-generico" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-semanas id="fltr_sem_compOsa" idselect="f_sem_compOsa_ini" :semanas="$semanasComp" class="fltr_periodo_compOsa" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_compOsa2" idselect="f_sem_compOsa_fin" :semanas="$semanasComp" class="fltr_periodo_compOsa" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-meses id="fltr_mes_compOsa" idselect="f_mes_compOsa_ini" :meses="$mesesComp" class="fltr_periodo_compOsa" style="display: block;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_compOsa2" idselect="f_mes_compOsa_fin" :meses="$mesesComp" class="fltr_periodo_compOsa" style="display: block;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
 
            <x-boton-actualizar onclick="getcompOsa('{{$cliente}}', 'stock')"/>

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

    @if(isset($selectores_tabla['osaSabana']))
        <x-tabla id="osaSabana" style="height: 600px !important;  {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias"> 
            <x-selector-variable id="variables_osaSabana" :lista='$variables' selected='2-0' />
          
            <x-selector-generico id="catalogado_osaSabana2" idselect="catalogado_osaSabana" :salida="$tipoStock2"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="80" id="f_pareto_osaSabana2" idselect="f_pareto_osaSabana" :salida="$pareto" 
            class="selector-generico" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="motivo_osaSabana2" idselect="motivo_osaSabana" :salida="$motivos"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Motivo
                </x-slot>
            </x-selector-generico> 
          
            <x-boton-actualizar onclick="getosaSabana('{{$cliente}}', 'stocks')"/>

            <x-infobox tamano="25px" texto="" modal="tabla_detalles_modal_osaSabana"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_detalles_modal_osaSabana" 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 OSA Sabana</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/osa_tabla_sabana.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre la tabla:</b> Para utilizar la tabla; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Desglosar Por:</b> Definir la variable por la cual se desglosa el reporte.</li> 
                            <li><b>Selector Tipo Stock:</b> Definir el tipo de stock del reporte, pudiendo ser entre Catalogado, No Catalogado, No Informado o Todos.</li> 
                            <li><b>Selector Motivo:</b> Definir el motivo a filtrar.</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> (KAM).</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de la tabla.</p>
                        <ul>
                            <li><b>Columa DOH:</b> Formula: (STOCK*30) / Ventas ult. 30 dias.</li>
                            <li><b>Columa OSA (%):</b> OSA asociado.</li>
                            <li><b>Columa Stock (U):</b> Cantidad en Unidades de Stock.</li>
                            <li><b>Columa Stock CD:</b> Valor de Stock en Centros de Distribución.</li>
                            <li><b>Columa Transito:</b> Cantidad de productos que se transporta del CD a la sala.</li>
                            <li><b>Columa Ventas 7:</b> Ventas en Unidades de los últimos 7 días.</li>
                            <li><b>Columa Ventas 15:</b> Ventas en Unidades de los últimos 15 días.</li>
                            <li><b>Columa Ventas 30:</b> Ventas en Unidades de los últimos 30 días.</li>
                            <li><b>Columa Venta Perdida ($):</b> Venta Perdida en ($).</li>
                            <li><b>Columa Motivo:</b> Razón del OSA si es cero. Definido por el cliente por criterios para analizar el inventario de una cadena.</li>
                            <li><b>Columa Área:</b> Departamento encargado de gestionar una alerta/motivo de inventario.</li>
                            <li><b>Columa Responsable:</b> Rol/Cargo que desempeña la persona encargada del departamento que debe gestionar la alerta.</li>
                        </ul>
                    </div>
                </div>
            </div>

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

    @if(isset($selectores_tabla['forecast']))
        <x-tabla id="forecast" style="height: 600px !important;  {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias"> 
            <div style="display:none;"><x-selector-variable id="variables_forecast" :lista='$variables' selected='2-0'/></div>

            <x-selector-generico id="f_alerta_forecast2" idselect="f_alerta_forecast" :salida="$alertasForecast" class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Alerta
                </x-slot>
            </x-selector-generico>
          
            <x-selector-generico id="catalogado_forecast2" idselect="catalogado_forecast" :salida="$tipoStock2" class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="80" id="f_pareto_forecast2" idselect="f_pareto_forecast" :salida="$pareto" class="selector-generico" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>
          
            <x-boton-actualizar onclick="getForecastMdlz('{{$cliente}}', 'stocks')"/>

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

    @if(isset($selectores_tabla['instockdoh']))
        <x-tabla id="instockdoh" style="height: 600px !important;  {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias"> 
            <x-selector-variable id="variables_instockdoh" :lista='$variables' selected='2-0' />

            <x-selector-generico id="f_catalogado_instockdoh" idselect="f_catalogado_instockdoh" :salida="$tipoStock2"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="80" id="f_pareto_instockdoh2" idselect="f_pareto_instockdoh" :salida="$pareto" class="selector-generico" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_tmp_instockdoh2" idselect="f_tmp_instockdoh" :salida="$periodo2"  class="selector-generico" style="width: 120px" selected="{{$tipo_periodo_}}">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-semanas id="fltr_sem_instockdoh" idselect="f_sem_instockdoh_fin" :semanas="$semanas" class="fltr_periodo_instockdoh" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <x-selector-meses id="fltr_mes_instockdoh" idselect="f_mes_instockdoh_fin" :meses="$meses" class="fltr_periodo_instockdoh" style="display: block;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>
          
            <x-boton-actualizar onclick="getInstockDohMdlz('{{$cliente}}', 'stocks')"/>

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

    @if(isset($selectores_tabla['seguimientoKuna']))
        <x-tabla id="seguimientoKuna" style="height: 600px !important;  {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias"> 
            <x-selector-variable id="variables_seguimientoKuna" :lista='$variables' selected='2-0' />
          
            <x-selector-generico id="f_catalogado_seguimientoKuna2" idselect="f_catalogado_seguimientoKuna" :salida="$tipoStock2"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Tipo Stock
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="100" id="f_pareto_seguimientoKuna2" idselect="f_pareto_seguimientoKuna" :salida="$pareto" 
            class="selector-generico" >
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

            {{--<x-selector-generico id="motivo_seguimientoKuna2" idselect="motivo_seguimientoKuna" :salida="$motivos"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    Motivo
                </x-slot>
            </x-selector-generico>--}}
          
            <x-boton-actualizar onclick="getSeguimientoKuna('{{$cliente}}', 'stocks')"/>

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

@section('js_aft')
<script src="{{asset('js\vendor\dataTables.natural.js')}}"></script>
    <script>
        var cliente_ = "{{$cliente}}";
        let ids = ['osaGeneral', 'evoOsa','compOsa', 'osaSabana', 'forecast', 'instockdoh', 'grafinstockdoh', 'seguimientoKuna'];

        var preSelectedRules = @json($preSelectedRules);
        $(document).ready(() => {
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });

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

                    preSelectOptions(id, filtro, '{{$cliente}}', preSelectedRules)
                }
            }
            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()-30)),
                endDate: ahora
            };

            
            $('select[id^="f_tmp_"]').change(function(elem){
                let aux = elem.target.id.split("_");
                let macroTmp = aux[aux.length - 1];
                let tmp = $("#f_tmp_" + macroTmp).find('option:selected').val();
                $(".fltr_periodo_" + macroTmp).css("display","none");
                $("#fltr_"+tmp+"_" + macroTmp).css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "2").css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "3").css("display","inline-block");
            });
            $(".navbar-402").css("border-style","solid");
            $(".navbar-402").css("border-left","0px");
            $(".navbar-402").css("border-color","#57775F");
            $(".navbar-402").css("background-color","#57775F");
        
                $("#objeto").css("visibility", "visible");
     
            
            function cargandoDatos(modo){
                contador_filtros = 0;
                var arr = new Array();
                var cad = new String();
                $(".obj_filtro button").removeClass('f_seleccionado');
                $(".obj_filtro i").removeClass('fa-filter');
                if(modo==1){
                    try {
                        if(objetos){
                            for(i=0;i<objetos.length;i++){
                                cad = leerLista("f_"+objetos[i]);
                                if(cad != ''){
                                    contador_filtros++;
                                    $("#bt_f_"+objetos[i]).addClass("f_seleccionado");
                                    $("#bt_f_"+objetos[i]).remove('i');
                                    $("#bt_f_"+objetos[i]).append('<i class="fa fa-filter"></i>');
                                }
                            }
                        }
                        cad = leerLista("f_holding");
                        if(cad != ''){
                            contador_filtros++;
                            $("#bt_f_holding").addClass("f_seleccionado");
                            $("#bt_f_holding").remove('i');
                            $("#bt_f_holding").append('<i class="fa fa-filter"></i>');
                        }
                    } catch (e) {
                        if (e instanceof ReferenceError) {
                            //alert(e, true);
                        } else {
                        //alert(e, false);
                        }
                    }
                    $(".loader2").fadeOut("slow");
                    $("#enviadatos").prop("disabled",false);
                    $("#muestrafiltros").prop("disabled",false);
                    $("#limpiafiltros").prop("disabled",false);
                    $("#exportar").prop("disabled",false);
                    if(contador_filtros>0){
                        $("#muestrafiltros").css("width","200px");
                        $("#muestrafiltros").html(contenido_botom+' ('+contador_filtros+')');
                    }else{
                        $("#muestrafiltros").css("width","auto");
                        $("#muestrafiltros").html(contenido_botom);
                    }
                }else{
                    $(".loader2").show();
                    $('#tbl_report').html('<div class="loader2" style="height:650px;"><p><img src="img/Preloader_21.gif" width="64" height="64"/></p></div>');
                    $("#enviadatos").prop("disabled",true);
                    $("#muestrafiltros").prop("disabled",true);
                    //$("#muestrafiltros").html(contenido_botom);
                    $("#limpiafiltros").prop("disabled",true);
                    $("#exportar").prop("disabled",true);
                    //if ($("#chart_show").is(':visible')) $(".chart").loading({overlay: $(".custom-overlay")});	
                }
            }

            if(cliente_ == 'kunafoods'){
                $('#f_pareto_osaGeneral').val('100').change();
                $('#salida_evoOsa_pareto').val('100').change();
                $('#f_pareto_osaSabana').val('100').change();
                $('#f_pareto_seguimientoKuna').val('100').change();

                $('#variables_osaGeneral').val('3-4').change();
                $('#variables_osaSabana').val('3-4').change();
                $('#variables_seguimientoKuna').val('3-4').change();
            }
        });
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        filtrosPromise.then(function(resp){
            ponerFiltrosAv(resp);
        });

        ["variables_compOsa", "variables_osaSabana", "variables_osaGeneral", 'variables_forecast', 'variables_instockdoh', 'variables_seguimientoKuna'].forEach(element => {
            $('#'+element).select2MultiCheckboxes({
                placeholder: "{{__('messages.elegir-variables')}}",
                width: "auto",
                templateSelection: function(selected, total) {
                    return selected.length + " de " + total + " total";
                }
            });
        });

        $('#variables_forecast').val(['2-5', '3-5', '2-8', '1-15']).change();
        
        if(['mdlzchile'].includes(cliente_)){
            $('#variables_osaSabana').val(['2-0', '2-5']).change();
            $('#variables_instockdoh').val(['2-0', '1-2']).change(); // Cadena, Categoría
        }

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

@endsection