@extends('layouts.reporte')

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

        $periodo = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses'), 'year' => __('messages.año')]);
        $periodo2 = json_encode(['dia'=> __('messages.dias'), 'sem' => __('messages.semanas'), 'mes' => __('messages.meses')]);
        $years = json_encode([date('Y') => date('Y'), date('Y')-1 => date('Y')-1]);
        $salida = json_encode(['participacion' => __('messages.participacion'), 'ventas_cliente' => __('messages.ventas_cliente'), 'ventas_mercado' => __('messages.ventas_mercado')]);

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

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

@if(count($selectores_grafico)>0)
@section('grafico')
@endsection
@endif

@if(count($selectores_tabla)>0)
@section('tabla')

    @if(isset($selectores_tabla['evo']))
        <x-tabla id="evo" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros_share" :filtrosAvAlias="$filtrosAvAlias">
            {{--<x-selector-generico id="salida_evo2" idselect="salida_evo" :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="f_tmp_evo2" idselect="f_tmp_evo" :salida="$periodo" class="selector-generico" style="width: 120px" selected="year">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-dias style="display: none;" idpadre="evo"/>
            
            <!--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" style="display: none;">
                <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" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-generico id="fltr_year_evo" idselect="f_year_evo" :salida="$years" class="fltr_periodo_evo" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.año')}}
                </x-slot>
            </x-selector-generico>

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

            <x-infobox tamano="25px" texto="" modal="tabla_evolucion_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_evolucion_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="">Tabla Evolutiva</h5>
                    </div>
                        <p><b>Explicación</b>: En la tabla se despliegan las <b>Ventas del Cliente ($)</b>, las <b>Ventas del Mercado ($)</b> y la <b>Participación (%)</b>.
                        <br>Estos valores se distribuyen por el <b>Periodo seleccionado</b>.
                        <br>En la columna de <b>"Salida"</b> se muestran las <b>Categorías</b>, <b>Rubros</b> y <b>Subrubros</b>.
                        </p>
                        <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 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>Favoritos:</b> Para simplificar el manejo de consultas bajo ciertas selecciones, el reporte incorpora el sistemas de Favoritos.</li>
                        </ul>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cadena:</b> Filtrar por Cadena.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría.</li>
                            <li><b>Selector Rubro:</b> Filtrar por Rubro.</li>
                            <li><b>Selector Subrubro:</b> Filtrar por Subrubro.</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['evocomp']))
        <x-tabla id="evocomp" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros_share" :filtrosAvAlias="$filtrosAvAlias">
            {{--<x-selector-generico id="salida_evocomp2" idselect="salida_evocomp" :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="f_tmp_evocomp2" idselect="f_tmp_evocomp" :salida="$periodo" class="selector-generico" style="width: 120px" selected="year">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-dias style="display: none;" idpadre="evocomp"/>
            
            <!--EVOLUTIVO SEMANA-->
            <x-selector-semanas id="fltr_sem_evocomp" idselect="f_sem_evocomp_ini" :semanas="$semanas" class="fltr_periodo_evocomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_evocomp2" idselect="f_sem_evocomp_fin" :semanas="$semanas" class="fltr_periodo_evocomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <!--EVOLUTIVO MES-->
            <x-selector-meses id="fltr_mes_evocomp" idselect="f_mes_evocomp_ini" :meses="$meses" class="fltr_periodo_evocomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_evocomp2" idselect="f_mes_evocomp_fin" :meses="$meses" class="fltr_periodo_evocomp" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

            <x-selector-generico id="fltr_year_evocomp" idselect="f_year_evocomp" :salida="$years" class="fltr_periodo_evocomp" style="width: 120px">
                <x-slot name="texto">
                    {{__('messages.año')}}
                </x-slot>
            </x-selector-generico>

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

            <x-infobox tamano="25px" texto="" modal="tabla_evolucioncomp_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_evolucioncomp_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="">Tabla Evolución Comparativa</h5>
                    </div>
                        <p><b>Explicación</b>: En la tabla se despliegan las variaciones de <b>Ventas del Cliente (%)</b>, de las <b>Ventas del Mercado (%)</b> y de la <b>Participación (pp)</b>.
                        <br>Estos valores se distribuyen por el <b>Periodo seleccionado</b> y hacen comparativa versus el <b>Año anterior</b>.
                        <br>Al igual que el reporte de Evolución, en la columna de <b>"Salida"</b> se muestran las <b>Categorías</b>, <b>Rubros</b> y <b>Subrubros</b>.
                        </p>
                        <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 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>Favoritos:</b> Para simplificar el manejo de consultas bajo ciertas selecciones, el reporte incorpora el sistemas de Favoritos.</li>
                        </ul>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cadena:</b> Filtrar por Cadena.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría.</li>
                            <li><b>Selector Rubro:</b> Filtrar por Rubro.</li>
                            <li><b>Selector Subrubro:</b> Filtrar por Subrubro.</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['resumen']))
        <x-tabla id="resumen" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros_share" :filtrosAvAlias="$filtrosAvAlias">
            <x-selector-generico id="f_tmp_resumen2" idselect="f_tmp_resumen" :salida="$periodo2" class="selector-generico" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>

            <x-selector-dias style="display: none;" idpadre="resumen"/>
            
            <!--EVOLUTIVO SEMANA-->
            <x-selector-semanas id="fltr_sem_resumen" idselect="f_sem_resumen_ini" :semanas="$semanas" class="fltr_periodo_resumen" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-semanas>
            <x-selector-semanas id="fltr_sem_resumen2" idselect="f_sem_resumen_fin" :semanas="$semanas" class="fltr_periodo_resumen" style="display: none;">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-semanas>

            <!--EVOLUTIVO MES-->
            <x-selector-meses id="fltr_mes_resumen" idselect="f_mes_resumen_ini" :meses="$meses" class="fltr_periodo_resumen">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-desde')}}
                </x-slot>
            </x-selector-meses>
            <x-selector-meses id="fltr_mes_resumen2" idselect="f_mes_resumen_fin" :meses="$meses" class="fltr_periodo_resumen">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

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

            <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="">Tabla Resumen</h5>
                    </div>
                        <p><b>Explicación</b>: En la tabla se muestran las <b>Ventas del Cliente ($)</b>, <b>Ventas del Mercado ($)</b> y respectiva <b>Participación (%)</b> tanto para el periodo seleccionado como para el mismo periodo del año anterior.
                        <br>Adicionalmente, se añaden 3 columnas para la variación de estos 3 atributos en comparación al <b>Año anterior</b>.
                        <br>En la primera columna se muestran las <b>Cadenas</b>, <b>Categorías</b> y <b>Rubros</b>.
                        </p>
                        <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 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>Favoritos:</b> Para simplificar el manejo de consultas bajo ciertas selecciones, el reporte incorpora el sistemas de Favoritos.</li>
                        </ul>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cadena:</b> Filtrar por Cadena.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría.</li>
                            <li><b>Selector Rubro:</b> Filtrar por Rubro.</li>
                            <li><b>Selector Subrubro:</b> Filtrar por Subrubro.</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['cierremes']))
        <x-tabla id="cierremes" style="height: 600px !important; {{$display_tabla}}" :filtros="$filtros_share" :filtrosAvAlias="$filtrosAvAlias">
            {{--<x-selector-generico id="f_tmp_cierremes2" idselect="f_tmp_cierremes" :salida="$periodo2"  class="selector-generico" style="width: 120px" selected="mes">
                <x-slot name="texto">
                    {{__('messages.selector-generico-texto-periodo')}}
                </x-slot>
            </x-selector-generico>--}}

            <x-selector-meses id="fltr_mes_cierremes2" idselect="f_mes_cierremes_fin" :meses="$meses" class="fltr_periodo_cierremes">
                <x-slot name="texto">
                    {{__('messages.selector-semanas-meses-texto-hasta')}}
                </x-slot>
            </x-selector-meses>

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

            <x-infobox tamano="25px" texto="" modal="tabla_cierremes_modal"/>
            <div class="modal fade bd-example-modal-lg" id="tabla_cierremes_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="">Tabla Cierre Mes</h5>
                    </div>
                        <p><b>Explicación</b>: En la tabla se muestra la <b>Participación (%)</b> para un determinado mes, desglosado por semanas.
                        <br>Además, se muestra su variación (en pp) respecto a la <b>semana anterior</b> en una columna adicional.
                        <br>En la primera columna se muestran las <b>Categorías</b>, <b>Rubros</b> y <b>Subrubros</b>.
                        </p>
                        <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 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>Favoritos:</b> Para simplificar el manejo de consultas bajo ciertas selecciones, el reporte incorpora el sistemas de Favoritos.</li>
                        </ul>
                        <p><b>Filtros Rápidos:</b> Marcar las opciones a filtrar en cada selector.</p>
                        <ul>
                            <li><b>Selector Cadena:</b> Filtrar por Cadena.</li>
                            <li><b>Selector Categoría:</b> Filtrar por Categoría.</li>
                            <li><b>Selector Rubro:</b> Filtrar por Rubro.</li>
                            <li><b>Selector Subrubro:</b> Filtrar por Subrubro.</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}}";
        let ids = ['evo', 'evocomp', 'resumen', 'cierremes'];
        $(document).ready(() => {
            let filtros = ['cadena', 'categorias', 'rubro', 'subrubro'];
            for(let filtro of filtros) {
                for(let id of ids) {
                    multiSelect(filtro, id, "{{__('messages.seleccionar')}}");
                }
            }

            ids.forEach(function(item){
                if($('#'+item).length > 0 && $('#f_favoritos_'+item).length > 0) cargarFavoritos(item);
            });

            ['#variables_evo', '#variables_evocomp', '#variables_resumen', '#variables_cierremes'].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))
            };
            ["#f_dia_evo_ini", "#f_dia_evocomp_ini", "#f_dia_resumen_ini"].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();
                //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");
            });

            if(['mdlzchile'].includes(cliente_)){
                // Seleccionar todas las variables
                $(`#variables_evo > optgroup option`).prop("selected", true);
                $(`#variables_evo`).trigger('change');
                $(`#variables_evocomp > optgroup option`).prop("selected", true);
                $(`#variables_evocomp`).trigger('change');
                $(`#variables_resumen > optgroup option`).prop("selected", true);
                $(`#variables_resumen`).trigger('change');
                $(`#variables_cierremes > optgroup option`).prop("selected", true);
                $(`#variables_cierremes`).trigger('change');

                $('#f_mes_evo_ini').val("{{date('Y01')}}").change();
                $('#f_mes_evocomp_ini').val("{{date('Y01')}}").change();
                $('#f_mes_resumen_ini').val("{{date('Y01')}}").change();
            }
        });
        /*var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}');

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

        function getFiltrosShare(id){
            let filtros = {};
            
            let cadena = $(`#f_cadena_${id}`);
            let categorias = $(`#f_categorias_${id}`);
            let rubro = $(`#f_rubro_${id}`);
            let subrubro = $(`#f_subrubro_${id}`);

            !!cadena.length > 0 && cadena.val() != null && (filtros["cadena"] = cadena.val());
            !!categorias.length > 0 && categorias.val() != null && (filtros['categoria'] = categorias.val());
            !!rubro.length > 0 && rubro.val() != null && (filtros['rubro'] = rubro.val());
            !!subrubro.length > 0 && subrubro.val() != null && (filtros['subrubro'] = subrubro.val());

            return filtros;
        }

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