@extends('layouts.reporte')

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

        $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);

        $tipoStock = json_encode(['1' => __('messages.catalogado'), '0' => __('messages.no-catalogado'), '2' => __('messages.no-informado'), '' => __('messages.todos')]);
        $paretos = json_encode(['100' => __('messages.100'), '20' => __('messages.20'), '80' => __('messages.80')]);

        $variables = ['Producto' => ['1-15' => __('messages.producto')/*, '1-1' => __('messages.marca'), '1-2' => __('messages.categoria')*/]];
        $salida = json_encode(['1-15' => __('messages.producto'), '1-1' => __('messages.marca'), '1-2' => __('messages.categoria')]);
        
        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 = '';

        $display_grafico = $display_tabla = '';
        $true = 'true';
    @endphp
@endsection
@section('div_reportes')
    @php echo $div; @endphp
@endsection

@if(count($selectores_grafico)>0)
@section('grafico')
    @if(isset($selectores_grafico['resumengraf']))
        <x-tabla id="resumengraf" style="{{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_resumengraf" :lista='$variables' selected='2-0'/>

            <x-selector-generico id="tipo_stock_resumengraf2" idselect="tipo_stock_resumengraf" :salida="$tipoStock" 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_resumengraf2" idselect="f_pareto_resumengraf" :salida="$paretos" class="selector-generico" style="width: 120px" selected='80'>
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

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

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

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

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

            <x-selector-generico id="tipo_stock_resumen2" idselect="tipo_stock_resumen" :salida="$tipoStock" 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_resumen2" idselect="f_pareto_resumen" :salida="$paretos" class="selector-generico" style="width: 120px" selected='80'>
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

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

            <x-infobox tamano="25px" texto="" modal="tabla_resumen_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_resumen_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 Tienda Perfecta</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/tiendaperfecta_tabla_resumen.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p>
                            El reporte consta de 15 de columnas de salida:
                        </p>
                        <ul>
                            <li><b>Total:</b> Porncetaje total de cumplimiento.</li>
                            <li><b>Regular:</b> Porcentaje de cumplimiento de los atributos regulares (Presencia, Ubicación, SOS, Precio).</li>
                            <li><b>POP:</b> Porcentaje de cumplimiento de los atributos POP (¿POP Planificado?, POP).</li>
                            <li><b>Promoción:</b> Porcentaje de cumplimiento de los atributos de promoción (Comunicada, Activada, POP, Exhibición Adicional), excluyendo "¿En Promoción?".</li>
                            <li><b>Presencia:</b> Que el producto se encuentre disponible y son stock suficiente en el punto de venta.</li>
                            <li><b>Ubicación:</b> Que el producto se encuentre en la posición requerida.</li>
                            <li><b>Share of Shelve (SOS):</b> Producto con el Share of Shelve requerido</li>
                            <li><b>Precio:</b> Que el producto se encuentre al precio correcto.</li>
                            <li><b>¿POP Planificado?:</b> ¿Hay POP planificado para el Producto/Categoría/Marca en el cliente y periodo?.</li>
                            <li><b>POP:</b> Que haya material vinculado al POP.</li>
                            <li><b>¿En Promoción?:</b> ¿Hay promoción?</li>
                            <li><b>Comunicada:</b> Si la promoción fue comunicada en la góndola o PDV.</li>
                            <li><b>Activada:</b> Que la promoción pase en la caja.</li>
                            <li><b>Point of Purcharse (POP):</b> En caso que exista material POP asociado.</li>
                            <li><b>Exhibición Adicional:</b> En caso que exista una exhibición adicional asociada a la promoción.</li>
                        </ul>
                        <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> La tabla se encuentra por defecto para combinación Productos - Local</li>
                            <li><b>Selector Catalogado:</b> Define el tipo de stock por el cual desea filtrar.</li>
                            <li><b>Selector Pareto:</b> Seleccionar tipo de pareto que desea visualizar.</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

    @if(isset($selectores_tabla['detalle']))
        <x-tabla id="detalle" style="{{$display_tabla}}" :filtros="$filtros" :filtrosAv="$filtrosAv" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-variable id="variables_detalle" :lista='$variables' selected='2-0'/>

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

            <x-selector-generico id="tipo_stock_detalle2" idselect="tipo_stock_detalle" :salida="$tipoStock" 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_detalle2" idselect="f_pareto_detalle" :salida="$paretos" class="selector-generico" style="width: 120px" selected='80'>
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-pareto')}}
                </x-slot>
            </x-selector-generico>

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

            <x-infobox tamano="25px" texto="" modal="tabla_detalle_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_detalle_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 Tienda Perfecta</h5>     
                    </div>
                        <!-- Center a image from ../public/images/ventas_tabla_matriz.png -->
                        <div class="text-center">
                            <img src="{{asset('images/tiendaperfecta_tabla_detalle.png')}}" class="img-fluid" alt="Responsive image">
                        </div>
                        <!-- add div for text -->
                        <p>
                            El reporte consta de 15 de columnas de salida:
                        </p>
                        <ul>
                            <li><b>Total:</b> Porncetaje total de cumplimiento.</li>
                            <li><b>Regular:</b> Porcentaje de cumplimiento de los atributos regulares (Presencia, Ubicación, SOS, Precio).</li>
                            <li><b>POP:</b> Porcentaje de cumplimiento de los atributos POP (¿POP Planificado?, POP).</li>
                            <li><b>Promoción:</b> Porcentaje de cumplimiento de los atributos de promoción (Comunicada, Activada, POP, Exhibición Adicional), excluyendo "¿En Promoción?".</li>
                            <li><b>Presencia:</b> Que el producto se encuentre disponible y son stock suficiente en el punto de venta.</li>
                            <li><b>Ubicación:</b> Que el producto se encuentre en la posición requerida.</li>
                            <li><b>Share of Shelve (SOS):</b> Producto con el Share of Shelve requerido</li>
                            <li><b>Precio:</b> Que el producto se encuentre al precio correcto.</li>
                            <li><b>¿POP Planificado?:</b> ¿Hay POP planificado para el Producto/Categoría/Marca en el cliente y periodo?.</li>
                            <li><b>POP:</b> Que haya material vinculado al POP.</li>
                            <li><b>¿En Promoción?:</b> ¿Hay promoción?</li>
                            <li><b>Comunicada:</b> Si la promoción fue comunicada en la góndola o PDV.</li>
                            <li><b>Activada:</b> Que la promoción pase en la caja.</li>
                            <li><b>Point of Purcharse (POP):</b> En caso que exista material POP asociado.</li>
                            <li><b>Exhibición Adicional:</b> En caso que exista una exhibición adicional asociada a la promoción.</li>
                        </ul>
                        <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> La tabla se encuentra por defecto para combinación Productos - Local</li>
                            <li><b>Selector Catalogado:</b> Define el tipo de stock por el cual desea filtrar.</li>
                            <li><b>Selector Pareto:</b> Seleccionar tipo de pareto que desea visualizar.</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('js_aft')
    <script>
        var cliente_ = "{{$cliente}}";

        ids = ['resumen', 'detalle', 'resumengraf'];

        $(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'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }

            [].forEach(function(element){
                $(element).select2MultiCheckboxes({
                    placeholder: "{{__('messages.elegir-variables')}}",
                    width: "auto",
                    templateSelection: function(selected, total) {
                        return selected.length + " de " + total + " total";
                    }
                });
            });

            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()-21)),
                    endDate: moment((new Date()).setDate(ahora.getDate()-1))
            };

            [].forEach((selector, i) => {
                $(selector).daterangepicker(congifDate);
            });

            $('select[id^="f_tmp_"]').change(function(elem){
                let aux = elem.target.id.split("_");
                let macroTmp = aux[aux.length - 1];
                let tmp = $("#f_tmp_" + macroTmp).find('option:selected').val();

                $(".fltr_periodo_" + macroTmp).css("display","none");
                $("#fltr_"+tmp+"_" + macroTmp).css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "2").css("display","inline-block");
                $("#fltr_"+tmp+"_" + macroTmp + "3").css("display","inline-block");
            });
        });

        var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');

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

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