@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 = '';

    @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="">
                <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>

        </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="">
                <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>

        </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="">
                <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>

        </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="">
                <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>
        </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);
        });

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