@extends('layouts.reporte2')

@section('php')
    @php
        $cliente = config('app.CLIENTE');


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

        $tipoStock2 = json_encode(['1' => __('messages.catalogado'), '0' => __('messages.no-catalogado'), '2' => __('messages.no-informado'), '' => __('messages.todos')]);
        $pareto = json_encode(['100' => '100% de la Venta', '80' => '80% de la Venta']);
        $periodo = json_encode(['sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
               
        $display_grafico = '';
        $display_tabla = '';

        $arr_mdlzlatam = ['mdlzcolombia', 'mdlzcostarica', 'mdlzguatemala', 'mdlzhonduras', 'mdlznicaragua', 'mdlzperu', 'mdlzsalvador'];
        $instock_formula = asset('images/mdlzlatam/mdlzlatam_instock_formula.png');
        $osa_formula = asset('images/mdlzlatam/mdlzlatam_osa_formula.png');
        $osamotivo_tabla = asset('images/mdlzlatam/mdlzlatam_osamotivo_tabla.png');
        $stocknegativo_formula = asset('images/mdlzlatam/mdlzlatam_stocknegativo_formula.png');
        $bloqueocomercial_formula = asset('images/mdlzlatam/mdlzlatam_bloqueocomercial_formula.png');
        $quiebrefillrate_formula = asset('images/mdlzlatam/mdlzlatam_quiebrefillrate_formula.png');
        $articulosinpronostico_formula = asset('images/mdlzlatam/mdlzlatam_articulosinpronostico_formula.png');
        $quiebreforecast_formula = asset('images/mdlzlatam/mdlzlatam_quiebreforecast_formula.png');
        $stockbodega_formula = asset('images/mdlzlatam/mdlzlatam_stockbodega_formula.png');
        $stockfantasma_formula = asset('images/mdlzlatam/mdlzlatam_stockfantasma_formula.png');
        $vtaperdidau_formula = asset('images/mdlzlatam/vta_perdida_u_formula.png');
        $vtaperdida_formula = asset('images/mdlzlatam/vta_perdida_formula.png');
        $vtaperdidadisponible_formula = asset('images/mdlzlatam/vta_perdida_disponible_formula.png');
        $dias_inv_instock = 'un día';
        if(config('app.CLIENTE') == 'mdlzcolombia') $dias_inv_instock = '5 días';
        $definiciones_mdlzlatam = "<h4>Instock</h4>
                            <p>Inicialmente, casos con Stock positivo y al menos $dias_inv_instock de inventario.</p>
                            <div class='text-center'>
                                <img src='{$instock_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <hr>
                            <h4>OSA</h4>
                            <p>Disponibildiad del producto en los exhibidores. Casos que son Instock = 1 y la Venta en los últimos 30 días es positiva.</p>
                            <div class='text-center'>
                                <img src='{$osa_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <hr>
                            <h4>Motivos</h4>
                            <p>Se identifica un motivo por cada combinación donde OSA = 0. Por defecto el listado es:</p>
                            <div class='text-center'>
                                <img src='{$osamotivo_tabla}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>DISPONIBLE:</b> Combinaciones productos en sala cuyo OSA = 1.</p>
                            <br>
                            <p><b>STOCK NEGATIVO:</b> Indica que no hay disponibillidad del producto debido a que su stock es negativo.</p>
                            <div class='text-center'>
                                <img src='{$stocknegativo_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>BLOQUEO COMERCIAL:</b> Según lo reportado por el B2B, el estado del producto en la sala es una combinación no válida. Se excluyen los casos reconocidos en los motivos anteriores.</p>
                            <div class='text-center'>
                                <img src='{$bloqueocomercial_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>QUIEBRE POR FILLRATE:</b> A través de una base enviada por el cliente, se calcula el Fill Rate por producto. El umbral debe ser definido según cliente, por defecto se usa el 70%. Se excluyen los casos reconocidos en los motivos anteriores.</p>
                            <div class='text-center'>
                                <img src='{$quiebrefillrate_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>ARTICULO SIN PRONOSTICO:</b> El instock es cero y el forecast es negativo o no definido. Se excluyen los casos reconocidos en los motivos anteriores.</p>
                            <div class='text-center'>
                                <img src='{$articulosinpronostico_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>QUIEBRE POR FORECAST:</b> Combinaciones donde el Instock = 0, además, el B2B reporta forecast (en el archivo de inventario) y este es menor a la Venta en los últimos 7 días (Venta_7). Se excluyen los casos reconocidos en los motivos anteriores.</p>
                            <div class='text-center'>
                                <img src='{$quiebreforecast_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>REVISAR PARAMETRO DE ABASTECIMIENTO:</b> Son las combinaciones que no fueron identificadas en los casos anteriores.</p>
                            <p><b>STOCK EN BODEGA:</b> Combinaciones con Instock = 1, su Venta en los últimos 30 días es cero y ha presentado variación de stock respecto al inventario anterior.</p>
                            <div class='text-center'>
                                <img src='{$stockbodega_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>STOCK FANTASMA:</b> Combinaciones con Instock = 1, su Venta en los últimos 30 días es cero y no ha presentado variación de stock respecto al inventario anterior.</p>
                            <div class='text-center'>
                                <img src='{$stockfantasma_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>NUEVO PRODUCTO:</b> Si el producto se ha identificado con estado 'NUEVO'. Por defecto, mantenemos el estado 'NUEVO' hasta que el cliente indique su cambio de estado.</p>
                            <hr>
                            <h4>Venta Perdida</h4>
                            <p>Considerando los últimos 30 días, se calcula un promedio de unidades vendidas y precio por producto en la sala.</p>
                            <p>Se determina la última fecha que tuvo venta.</p>
                            <p>Se obtiene la diferencia de días entre ayer y el último día de venta.</p>
                            <p>Depende si la diferencia de días es menor a 7 o caso contrario.</p>
                            <div class='text-center'>
                                <img src='{$vtaperdidau_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p>Luego, la Venta Perdida valorada es el Venta Perdida (U) multiplicado por el precio promedio en ese periodo.</p>
                            <div class='text-center'>
                                <img src='{$vtaperdida_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p>La Venta Perdida es cero si el motivo es DISPONIBLE.</p>
                            <div class='text-center'>
                                <img src='{$vtaperdidadisponible_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            ";

        $instock_formula = asset('images/kunafoods/instock_formula.png');
        $osa_formula = asset('images/kunafoods/osa_formula.png');
        $osamotivo_tabla = asset('images/kunafoods/osamotivo_tabla.png');
        $stocknegativo_formula = asset('images/kunafoods/stocknegativo_formula.png');
        $stockcero_formula = asset('images/kunafoods/stockcero_formula.png');
        $problemaabastecimiento_formula = asset('images/kunafoods/problemaabastecimiento_formula.png');
        $stockinsuficiente_formula = asset('images/kunafoods/stockinsuficiente_formula.png');
        $oportunidadpdv_formula = asset('images/kunafoods/oportunidadpdv_formula.png');
        $stockdesajustado_formula = asset('images/kunafoods/stockdesajustado_formula.png');
        $nuevoproducto_formula = asset('images/kunafoods/nuevoproducto_formula.png');
        $arr_kunafoods = ['kunafoods'];
        $definiciones_kunafoods = "<h4>Instock</h4>
                            <p>Casos con Stock positivo y al menos 1 día de inventario o bien que tengan Stock y no hayan tenido venta en los últimos 30 días.</p>
                            <div class='text-center'>
                                <img src='{$instock_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <hr>
                            <h4>OSA</h4>
                            <p>Disponibildiad del producto en los exhibidores. Casos que son Instock = 1 y la Venta 1 día sea mayor a la venta promedio (venta_30/30). También los productos en sala que no tengan historia (venta_periodo nulo, siendo el máximo periodo con venta)</p>
                            <div class='text-center'>
                                <img src='{$osa_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <hr>
                            <h4>Motivos</h4>
                            <p>El listado de motivos con sus respectivos responsables es:</p>
                            <div class='text-center'>
                                <img src='{$osamotivo_tabla}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>DISPONIBLE:</b> Combinaciones productos en sala cuyo OSA = 1.</p>
                            <br>
                            <p><b>STOCK NEGATIVO:</b> Indica que no hay disponibillidad del producto debido a que su stock es negativo. Independiente si ha tenido venta ayer o no.</p>
                            <div class='text-center'>
                                <img src='{$stocknegativo_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>STOCK CERO:</b> El stock es cero y no ha vendido ayer.</p>
                            <div class='text-center'>
                                <img src='{$stockcero_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>PROBLEMA DE ABASTECIMIENTO:</b> Los casos restantes para Instock = 0.</p>
                            <div class='text-center'>
                                <img src='{$problemaabastecimiento_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>STOCK INSUFICIENTE:</b> Vendió ayer, pero no cumplía con el stock para el día de inventario.</p>
                            <div class='text-center'>
                                <img src='{$stockinsuficiente_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>OPORTUNIDAD PDV:</b> No vendió ayer y ni cumplía con el stock suficiente para el día de inventario. También abarca los casos donde ayer no vendió la venta promedio de los últimos 30 días.</p>
                            <div class='text-center'>
                                <img src='{$oportunidadpdv_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>STOCK DESAJUSTADO:</b> Sin venta los últimos 7 y 30 días, y tiene venta periodo (el último mes donde ha vendido) no nulo.</p>
                            <div class='text-center'>
                                <img src='{$stockdesajustado_formula}' class='img-fluid' alt='Responsive image'>
                            </div>
                            <p><b>NUEVO PRODUCTO:</b> Si el producto se ha identificado con estado 'NUEVO', cuenta con stock y no ha vendido en los últimos 30 días.</p>
                            <hr>
                            ";

        $paretoDefault = '80';
        if(in_array($cliente, ['mdlzchile', 'mdlzcolombia', 'mdlzcostarica', 'mdlzguatemala', 'mdlzhonduras', 'mdlznicaragua', 'mdlzsalvador'])){
            $paretoDefault = '100';
        }
    @endphp
@endsection


@if(count($selectores_grafico)>0)
@section('grafico')
    @if(isset($selectores_grafico['grafmotivo']))
        <x-grafico id="grafmotivo" style="max-height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="catalogado_grafmotivo2" idselect="catalogado_grafmotivo" :salida="$tipoStock2"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-stock')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_pareto_grafmotivo2" idselect="f_pareto_grafmotivo" :salida="$pareto" class="selector-generico" style="width: 120px" selected="$paretoDefault">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

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

            <x-infobox tamano="25px" texto="" modal="grafico_detalles_modal_grafmotivo"/>
            <div class="modal fade bd-example-modal-lg" id="grafico_detalles_modal_grafmotivo" 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="">Gráfico OSA Motivo</h5>     
                        </div>
                        <div class="text-center">
                            <img src="{{asset('images/osa_grafico_motivo.png')}}" class="img-fluid" alt="Responsive image">
                        </div>

                        <p>Muestra la distribución de motivos por el cual OSA es cero.</p>

                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectore. Se actualizará automáticamente al hacer cambios.</p>
                        <ul>
                            <li><b>Selector Tipo Stock:</b> Definir el tipo de stock del reporte, pudiendo ser entre Catalogado o No Catalogado.</li>
                        </ul>
                        <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>
                        </ul>
                        <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                    </div>
                </div>
            </div>

            @if(in_array($cliente, $arr_mdlzlatam))
                <x-infobox2 tamano="25px" texto="" modal="grafico_detalles_modal_grafmotivo_mdlzlatam"/>
                <div class="modal fade bd-example-modal-lg" id="grafico_detalles_modal_grafmotivo_mdlzlatam" 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">OSA Motivo Definiciones</h5>     
                        </div>
                            {!!$definiciones_mdlzlatam!!}
                        </div>
                    </div>
                </div>
            @endif

            @if(in_array($cliente, $arr_kunafoods))
                <x-infobox2 tamano="25px" texto="" modal="grafico_detalles_modal_grafmotivo_kunafoods"/>
                <div class="modal fade bd-example-modal-lg" id="grafico_detalles_modal_grafmotivo_kunafoods" 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">OSA Motivo Definiciones</h5>     
                        </div>
                            {!!$definiciones_kunafoods!!}
                        </div>
                    </div>
                </div>
            @endif

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

    @if(isset($selectores_grafico['grafevo']))
        <x-grafico id="grafevo" style="height: 450px !important; {{$display_grafico}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="tipo_stock_grafevo2" idselect="tipo_stock_grafevo" :salida="$tipoStock2"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-stock')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_pareto_grafevo2" idselect="f_pareto_grafevo" :salida="$pareto" class="selector-generico" style="width: 120px" selected="$paretoDefault">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

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

            <!--EVOLUTVO MES-->
            <x-selector-meses id="fltr_mes_grafevo" idselect="f_mes_grafevo_ini" :meses="$meses" class="fltr_periodo_grafevo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_grafevo2" idselect="f_mes_grafevo_fin" :meses="$meses" class="fltr_periodo_grafevo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <!--EVOLUTVO SEMANA-->
            <x-selector-semanas id="fltr_sem_grafevo" idselect="f_sem_grafevo_ini" :semanas="$semanas"  class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_grafevo2" idselect="f_sem_grafevo_fin" :semanas="$semanas" class="fltr_periodo_grafevo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>
        
            <x-boton-actualizar onclick="getGrafEvoMotivo('{{$cliente}}', 'osa');"/> 

            <x-infobox tamano="25px" texto="" modal="grafico_evolutivo_modal"/>
            <div class="modal fade bd-example-modal-lg" id="grafico_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="">Gráfico Evolutivo</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/ventas_grafico_evolutivo.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores y presionar "Actualizar".</p>
                        <ul>
                            <li><b>Selector Catalogado:</b> Selecciona tipo de stock sobre el cual 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>Selector Tipo gráfico:</b> Define el diseño del gráfico para representar los datos.</li>
                        </ul>
                        <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 una imagen del gráfico.</p>
                    </div>
                </div>
            </div>

            @if(in_array($cliente, $arr_mdlzlatam))
                <x-infobox2 tamano="25px" texto="" modal="grafico_evolutivo_modal_mdlzlatam"/>
                <div class="modal fade bd-example-modal-lg" id="grafico_evolutivo_modal_mdlzlatam" 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">OSA Motivo Definiciones</h5>     
                        </div>
                            {!!$definiciones_mdlzlatam!!}
                        </div>
                    </div>
                </div>
            @endif

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

@if(count($selectores_tabla)>0)
@section('tabla')
    @if(isset($selectores_tabla['motivo']))
        <x-tabla id="motivo" style="height: 450px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="catalogado_motivo2" idselect="catalogado_motivo" :salida="$tipoStock2"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-stock')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_pareto_motivo2" idselect="f_pareto_motivo" :salida="$pareto" class="selector-generico" style="width: 120px" selected="$paretoDefault">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

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

            <x-infobox tamano="25px" texto="" modal="tabla_detalles_modal_motivo"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_detalles_modal_motivo" 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 Motivo</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/osa_tabla_motivo.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 Tipo Stock:</b> Definir el tipo de stock del reporte, pudiendo ser entre Catalogado o No Catalogado.</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>
                        </ul>
                        <p><b>Exportar:</b> Descargar datos de la tabla.</p>
                        <ul>
                            <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 Responsable:</b> Rol/Cargo que desempeña la persona encargada del departamento que debe gestionar la alerta.</li>
                            <li><b>Columa Porcentaje (%):</b> Porcentaje del total.</li>
                            <li><b>Columa Venta Perdida ($):</b> Venta Perdida en ($).</li>
                            <li><b>Columa Venta Perdida (%):</b> Porcentaje de Venta Perdida.</li>
                            <li><b>Columa Cantidad de Registros:</b> Cantidad de registros encontrados.</li>
                        </ul>
                    </div>
                </div>
            </div>

            @if(in_array($cliente, $arr_mdlzlatam))
                <x-infobox2 tamano="25px" texto="" modal="tabla_detalles_modal_motivo_mdlzlatam"/>
                <div class="modal fade bd-example-modal-lg" id="tabla_detalles_modal_motivo_mdlzlatam" 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">OSA Motivo Definiciones</h5>     
                        </div>
                            {!!$definiciones_mdlzlatam!!}
                        </div>
                    </div>
                </div>
            @endif

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

    @if(isset($selectores_tabla['evo']))
        <x-tabla id="evo" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="tipo_stock_evo2" idselect="tipo_stock_evo" :salida="$tipoStock2"  class="selector-generico" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-stock')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico id="f_pareto_evo2" idselect="f_pareto_evo" :salida="$pareto" class="selector-generico" style="width: 120px" selected="$paretoDefault">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>
            
            <x-selector-generico id="f_tmp_evo2" idselect="f_tmp_evo" :salida="$periodo"  class="selector-generico" 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_evo" idselect="f_sem_evo_ini" :semanas="$semanas"  class="fltr_periodo_evo" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_evo2" idselect="f_sem_evo_fin" :semanas="$semanas" class="fltr_periodo_evo" 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_evo" idselect="f_mes_evo_ini" :meses="$meses" class="fltr_periodo_evo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_evo2" idselect="f_mes_evo_fin" :meses="$meses" class="fltr_periodo_evo">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

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

            <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 Evolutivo</h5>     
                    </div>
                        <div class="text-center">
                            <img src="{{asset('images/ventas_tabla_matriz.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 Catalogado:</b> Selecciona tipo de stock sobre el cual 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>
                        </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>

            @if(in_array($cliente, $arr_mdlzlatam))
                <x-infobox2 tamano="25px" texto="" modal="tabla_evolutivo_modal_mdlzlatam"/>
                <div class="modal fade bd-example-modal-lg" id="tabla_evolutivo_modal_mdlzlatam" 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">OSA Motivo Definiciones</h5>     
                        </div>
                            {!!$definiciones_mdlzlatam!!}
                        </div>
                    </div>
                </div>
            @endif
        </x-tabla>
        @php $display_tabla = 'display: none;'; @endphp
    @endif
@endsection
@endif

@section('right-bar')
    <div class="p-3 align-items-center flex-column d-none" id="f_grafmotivo">
        
    </div>
@endsection
@section('js_aft')
    <script>
        var cliente_ = "{{$cliente}}";
    
        let ids = ['motivo', 'grafmotivo', 'grafevo', 'evo'];

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

            $('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();
                //console.log(" tmp"+tmp);
                //console.log(" macroTmp "+macroTmp);

                $(".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");
            });
        });
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');

        filtrosPromise.then(function(resp){
            ponerFiltrosAv(resp);
        });

        if(['mdlzperu', 'demo2'].includes('{{$cliente}}')){
            $('#f_pareto_motivo').val('80').trigger('change');
            // f_pareto_grafmotivo
            $('#f_pareto_grafmotivo').val('80').trigger('change');
            // f_pareto_grafevo
            $('#f_pareto_grafevo').val('80').trigger('change');
            // f_pareto_evo
            $('#f_pareto_evo').val('80').trigger('change');
        }


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