@extends('layouts.tabla')
@section('css_after')
    <style>
        .nav-tabs-custom {
            margin-bottom: 10px;
            background: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            border-radius: 3px;
        }
        .header{
            font-size: 15px !important;
            border-bottom: 1px solid #f4f4f4;
            padding: 0 10px;
            line-height: 35px;
        }
        .container-fluid{
            padding: 0px !important;
        }
        .card{
            margin-bottom: 0px !important;
        }
    </style>
    @php
        $catalogacion = json_encode(['1' => 'Catalogados', '0' => 'No Catalogados', '2' => 'No Informado', ''=>"Todos"]);
        $cliente = config('app.CLIENTE');
        $pareto = json_encode(['100' => '100% de la Venta', '80' => '80% de la Venta']);
        $anios = json_encode([ date('Y') => date('Y'), (date('Y') -1) => (date('Y') -1)]);
        $anio_actual = date('Y');
        $anio_anterior = date('Y')-1;
        $periodos = json_encode(['YTD' => 'Meses', 'MEC' => 'Semanas']);
        $categoriasClass = json_encode(['Categoria' => 'Categoría', 'Subcategoria' => 'Subcategoría', 'Region' => 'Región']);
        $id = 'osa_dashboard';
        $info = 'Los porcentajes mostrados en las tablas se calculan de la siguiente manera: \n
        Instock: (SUMA(Instock)/Total de registros) x 100
        DOH: Stock Valorizado * 28 / Ventas ult 28 dias
        OSA: (SUMA(OSA)/Total de registros) x 100
        Pasar el cursor por encima de la celda de una tabla mostrará mayor información acerca del cálculo aplicado.\n
        Los stock de los reporte Osa se actualizan los viernes, por lo que puede suceder que a comienzo de mes no se vea reflejada la data hasta el viernes mas proximo';
        if ($cliente == 'colgate') {
            $div = '<div style="padding: 5px 16px;overflow: hidden;background-color: lightblue;text-align: center;"><ul>';
            foreach ($div_reportes as $value) {
                $div.="<li>".$value->Descripcion."</li>";
            }
            $div.="</ul></div>";
        }else{
            $div='';
        }

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

        $arr_clientes_motivo = ['mdlzchile', 'mdlzcolombia', 'mdlzcostarica', 'mdlzguatemala', 'mdlzhonduras', 'mdlznicaragua', 'mdlzperu', 'mdlzsalvador', 'kunafoods'];
    @endphp

    <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')}}">
@endsection
@section('tabla')
    <!-- Hero -->
    @php echo $div; @endphp

    <div id="{{$id}}" class="w-100">
        <div class="w-100 bg-white d-flex justify-content-start">
            <x-filtro id="f_holding_osa_dashboard" :lista="$clientes" style="max-width: 120px; min-width: 120px; width: 120px; padding: 0px 5px">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-cliente')}}
                </x-slot>
            </x-filtro>

            <x-filtro id="f_categorias_osa_dashboard" :lista="$categorias" style="max-width: 120px;min-width: 120px;width: 120px; padding: 0px 5px">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-categoria')}}
                </x-slot>
            </x-filtro>

            <x-filtro id="f_kam_osa_dashboard" :lista="$kam" style="max-width: 120px;min-width: 120px;width: 120px; padding: 0px 5px">
                <x-slot name="texto">
                    {{__('messages.filtro-texto-kam')}}
                </x-slot>
            </x-filtro>

            @if(in_array($cliente, ['mondelezmx']))
                <x-filtro id="f_estado_osa_dashboard" :lista="$status" style="max-width: 120px;min-width: 120px;width: 120px;">
                    <x-slot name="texto">
                        {{__('messages.estado')}}
                    </x-slot>
                </x-filtro>
            @endif
            
            <x-selector-generico id="salida_osadash_catal2" idselect="salida_osadash_catal" :salida="$catalogacion" 
            class="selector-generico" style="width: 120px; font-size: 12px!important; line-height: 27px !important; margin-bottom: 5px; 
            padding: 0px 5px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-stock')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-generico selected="$paretoDefault" id="salida_osadash_pareto2" idselect="salida_osadash_pareto" :salida="$pareto" 
            class="selector-generico" style="width: 120px; font-size: 12px!important; line-height: 27px !important; margin-bottom: 5px; 
            padding: 0px 5px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

            <div class="col-md-auto" style="align-items: center;">     
                <button class="btn boton btn-sm align-middle lh-1 actualizar" onclick="getOsaDashboard('{{$cliente}}', 'osaDashboard');" >
                    <i class="fas fa-sync-alt"></i>
                    {{__('messages.boton-actualizar-texto')}}
                </button>
            </div>

            <x-infobox tamano="25px" texto="" modal="tabla_detalles_modal_osaDashboardGraf"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_detalles_modal_osaDashboardGraf" 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 Dashboard</h5>     
                        </div>
                        <div class="text-center">
                            <img src="{{asset('images/osa_grafico_dashboard1.png')}}" class="img-fluid" alt="Responsive image">
                            <p><b>OSA Mes en Curso: La distribución de OSA, Quiebre e Inventario Fantasma para el mes en curso.</b></p>
                        </div>

                        <div class="text-center">
                            <img src="{{asset('images/osa_grafico_dashboard2.png')}}" class="img-fluid" alt="Responsive image">
                            <p><b>OSA por Cadena: Mapa de Calor con el OSA por cada Cadena y para cuatro ámbitos (YTD, UMC, Mes Actual, Última Semana Informada)</b></p>
                        </div>
                        <p><b>Donde:</b></p>
                        <ul>
                            <li><b>Year to Date (YTD):</b>Todos los días a contar desde el primero de enero hasta la fecha actual.</li>
                            <li><b>Último Mes Cerrado (UMC):</b>Mes anterior al actual.</li>
                            <li><b>Mes Actual (MEC):</b> Todo lo que se lleva desde el primero del mes al día actual.</li>
                            <li><b>Último Inventario Informado:</b> Último inventario cargado en la base de datos.</li> 
                        </ul>

                        <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 Cliente:</b> Definir los clientes a filtrar.</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>Pareto:</b> Definir el Pareto a considerar en el reporte.</li> 
                        </ul>
                        <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                    </div>
                </div>
            </div>
            
            @isset($filtrosAv)
                <button type="button" id="muestrafiltros" class="btn btn-default btn-sm ms-auto" style="width: auto; height: 30px; margin-top: 10px;margin-right: 5px; font-size: 12px!important" onclick="filtrosAv(this,'{{$id}}')">
                    <i class="fas fa-filter"></i>
                    Filtros Avanzados
                    <i class="fas fa-chevron-down"></i>
                </button>
            @endisset

        </div>

        @isset($filtrosAv)
            <x-filtros-avanzados :id="$id" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            </x-filtros-avanzados>
        @endisset
            
        <div class="w-100 bg-white row justify-content-start" style="height: 450px; margin: 10px 0px 0px">
            @if(in_array(config('app.CLIENTE'), $arr_clientes_motivo) || in_array(config('app.CLIENTE'), ['demo', 'demo2']))
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="w-100 justify-content-center" id="f_carga_grafmotivo" style="height:290px; display:flex; align-items:center;">
                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                </div>
                <div class="h-100 w-100" id="grafmotivo_cont">
                    
                </div>
            </div>
            @else
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                    <div class="w-100 justify-content-center" id="f_carga_grafmec_osa" style="height:290px; display:flex; align-items:center;">
                        <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                    </div>
                    <div class="h-100 w-100" id="grafmec_osa">
                        
                    </div>
                </div>
            @endif
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="w-100 justify-content-center" id="f_carga_grafcadena_osa" style="height:290px; display:flex; align-items:center;">
                    <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                </div>
                <div class="h-100 w-100" id="grafcadena_osa">
                    
                </div>
            </div>
        </div>
    </div>
    <div class="w-100 bg-white row justify-content-start" style="height: 360px; margin: 10px 0px 0px">

        <div class="w-100 bg-white d-flex justify-content-start">
           
            <x-selector-generico :selected="$anio_actual" id="salida_osadash_anio_chart_osa2" idselect="salida_osadash_anio_chart_osa" :salida="$anios" 
            class="selector-generico" style="width: 120px; font-size: 12px!important; line-height: 27px !important; margin-bottom: 5px; 
            padding:    0px 5px">
                <x-slot name="texto">
                    {{__('messages.año')}}
                </x-slot>
            </x-selector-generico>
    
            <x-selector-generico selected="YTD" id="salida_osadash_periodo_chart_osa2" idselect="salida_osadash_periodo_chart_osa" :salida="$periodos" 
            class="selector-generico" style="width: 120px; font-size: 12px!important; line-height: 27px !important; margin-bottom: 5px; 
            padding: 0px 5px">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-infobox tamano="25px" texto="" modal="tabla_detalles_modal_osaDashboardGraf2"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_detalles_modal_osaDashboardGraf2" 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 Dashboard</h5>     
                        </div>
                        <div class="text-center">
                            <img src="{{asset('images/osa_grafico_dashboard3.png')}}" class="img-fluid" alt="Responsive image">
                            <p><b>OSA YTD en Meses.</b></p>
                        </div>

                        <p><b>Consultas sobre el gráfico:</b> Para utilizar el gráfico; definir los parámetros en los selectores. Se actualizará automáticamente al hacer cambios.</p>
                        <ul>
                            <li><b>Selector Año:</b> Definir el año para el cuál se generará el gráfico.</li>
                            <li><b>Selector Periodo:</b> Definir el tipo de periodo por el cual se mostrará el gráfico (Meses o Semanas).</li>
                        </ul>
                        <p><b>Exportar:</b> Descargar una imagen del gráfico.</p>
                    </div>
                </div>
            </div>
    
        </div>

        @if(in_array(config('app.CLIENTE'), $arr_clientes_motivo))
            <div class="w-100 justify-content-center" id="f_carga_grafevo" style="height:290px; display:flex; align-items:center;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div id="grafevo_cont" class="col-md-12">
                
            </div>
        @else
            <div class="w-100 justify-content-center" id="f_carga_chart-container" style="height:290px; display:flex; align-items:center;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div id="chart-container" class="col-md-12">
                
            </div>
        @endif
    </div>

    <div class="w-100 bg-white row justify-content-start" style="height: 500px; margin: 10px 0px 0px">
        
        <div class="w-100 bg-white d-flex justify-content-start">
           
            <x-selector-generico :selected="$anio_actual" id="salida_osadash_anio_table2" idselect="salida_osadash_anio_table" :salida="$anios" 
            class="selector-generico" style="width: 120px; font-size: 12px!important; line-height: 27px !important; margin-bottom: 5px; 
            padding: 0px 5px">
                <x-slot name="texto">
                    {{__('messages.año')}}
                </x-slot>
            </x-selector-generico>
    
            <x-selector-generico selected="Categoria" id="salida_osadash_categoria_table2" idselect="salida_osadash_categoria_table" :salida="$categoriasClass" 
            class="selector-generico" style="width: 120px; font-size: 12px!important; line-height: 27px !important; margin-bottom: 5px; 
            padding: 0px 5px">
                <x-slot name="texto">
                    {{__('messages.selector-variable-texto')}}
                </x-slot>
            </x-selector-generico>

            <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_dashboard.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 Año:</b> Definir el año para el cuál se generará el gráfico.</li>
                            <li><b>Selector Variable:</b> Definir la variable por la cual se desglosa el reporte. Por defecto, el segundo desglose se hace por cadena.</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>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>
    
        </div>
        

        <div class="w-100 justify-content-center" id="f_carga_tbl_report" style="height:290px; display:flex; align-items:center;">
            <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
        </div>
        <div id="tbl_report" class="col-md-12" style="height: 500px;">
        </div>
    </div>
@endsection
@section('js_after')

    <script src="{{asset('config/datatables.locale.spanish.js')}}"></script>
    <script src="{{asset('config/modal.languege.js')}}"></script>
    <script src="{{asset("js/custom/utilidades.js")}}"></script>

    <script src="{{ asset('js/vendor/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.bootstrap5.js') }}"></script>
    <script src="{{ asset('js\vendor\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.print.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.html5.min.js') }}"></script>
    <script src="{{ asset('js\jszip.min.js') }}"></script>
    <script src="{{ asset('js\vendor\buttons.flash.min.js') }}"></script>

    <script src="{{asset("js/custom/reporteriaGetter.js")}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\fusioncharts.js')}}"></script>
    <script src="{{asset('fusioncharts\v3.15.1\js\themes\fusioncharts.theme.fusion.js')}}"></script>

    <script src="{{asset('js/dataTables.fixedColumns.min.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedHeader.min.js')}}"></script>


    <script>
        var ids = ['osa_dashboard'];
        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');
        var preSelectedRules = @json($preSelectedRules);
        $(document).ready(()=>{
            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });
            /*
            $(`#f_holding_osadash`).select2MultiCheckboxes({
                closeOnSelect:false,
                multiple: true,
                width: "120"
            });
            $(`#f_holding_osadash`).find('option').prop("selected", false);
            $(`#f_holding_osadash`).trigger('change');
            */
            
            filtrosPromise.then(function(resp){
                ponerFiltrosAv(resp);
            });
            /*
            let filtros = ['clientes', 'categorias', 'kam'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }
            */
                
            let filtros = ['holding', 'clientes', 'categorias', 'kam', 'estado'];
            
            for(let filtro of filtros) {
               
                $(`#f_${filtro}_osa_dashboard`).select2MultiCheckboxes({
                    closeOnSelect:false,
                    multiple: true,
                    placeholder: `{{__('messages.seleccionar')}} ${filtro.replace(/^\w/, c => c.toUpperCase())}`,
                    width: "120",
                    templateSelection: function(selected, total) {
                        return selected.length + " de " + total + " total";
                    }
                });
                $(`#f_${filtro}_osa_dashboard`).find('option').prop("selected", false);
                $(`#f_${filtro}_osa_dashboard`).trigger('change');
                
                preSelectOptions('osa_dashboard', filtro, '{{$cliente}}', preSelectedRules)
            }

            $('#salida_osadash_anio_chart_osa').change(function() {
                getOsaDashboardChart('{{$cliente}}', 'osaDashboard');
            });

            $('#salida_osadash_periodo_chart_osa').change(function() {
                getOsaDashboardChart('{{$cliente}}', 'osaDashboard');
            });

            $("#salida_osadash_anio_table").change(function() {
                getOsaDashboardTabla('{{$cliente}}', 'osaDashboard');
            });

            $('#salida_osadash_categoria_table').change(function() {
                getOsaDashboardTabla('{{$cliente}}', 'osaDashboard');
            });
        });

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

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