@extends('layouts.reporte')

@section('php')
    @php
        $locales = [];
        $cantidad = 100;
        while ($cantidad <= $cantidad_locales) {
            $locales[(($cantidad-99)." - ".$cantidad)] = $cantidad;
            $cantidad = $cantidad + 100;
        }
        if ($cantidad % 100 == 0) {
            $locales[(($cantidad-99)." - ".$cantidad_locales)] = $cantidad_locales;
        }
        // dd($locales);
        $holding2 = [];
        $familia2 = [];
        $subcategoria2 = [];
        $marca2 = [];
        $fuente2 = [];
        $unidad_conversion2 = [];
        $agrupacion2 = [];
        $producto2 = [];
        $cadena2 = [];

        $canal2 = [];
        // dd($cadena);
        foreach ($cliente2 as $key => $value) {
            if($value->nombre != 'SOCOFAR'){ 
                $holding2[$value->valor] = $value->nombre;
            }   
        }
        foreach ($cadena as $key => $value) {
            $cadena2[$value->valor] = $value->nombre;
        }
        foreach ($familia as $key => $value) {
            $familia2[$value->valor] = $value->nombre;
        }
        foreach ($subcategoria as $key => $value) {
            $subcategoria2[$value->valor] = $value->nombre;
        }
        foreach ($marca as $key => $value) {
            $marca2[$value->valor] = $value->nombre;
        }
        foreach ($fuente as $key => $value) {
            $fuente2[$value->valor] = $value->nombre;
        }
        foreach ($unidad_conversion as $key => $value) {
            $unidad_conversion2[$value->valor] = $value->nombre;
        }
        foreach ($agrupacion as $key => $value) {
            $agrupacion2[$value->valor] = $value->nombre;
        }
        foreach ($atlas as $key => $value) {
            $producto2[$value->valor] = $value->nombre;
        }
        foreach ($canal as $key => $value) {
            $canal2[$value->valor] = $value->nombre;
        }
       

        $locales = json_encode($locales);
        $cliente = config('app.CLIENTE');

        if($cliente == 'bless'){
            $tipo_periodo = 'mes';
            $tipo_periodo_ = 'mes';

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

        }

            $tipo_periodo = 'mec';
            $tipo_periodo_ = 'mes';

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

        
            $salida_siksa = 2;

        if($cliente == "southwind"){
            $periodo_grafcomp = json_encode(["dia"=> __('messages.dias'), "sem" => __('messages.semanas'), "sem_wd" => "Semanas (Por días)", 
            "mes" => __('messages.meses'), "ytd" => __('messages.ytd')]);
        }

        $salida2 = ["0" => "CUF", "1"=> "Dolares", "2" => "Unidades", "3" => "Unidad de Conversion"];

       
    


        $mesesComp = [];
        $mesesTree = [];

        $semanasComp = [];
        $yearAct = date("Y");
        $yearAnt = date("Y") - 1;
        $yearAnt2 = date("Y") - 2;

        $tipo = json_encode(["year" => (__('messages.año'))."-".(__('messages.meses'))."-".(__('messages.dias')), 
        "local" => __('messages.var-cadena')."-Formato-".(__('messages.variable-local')),
        "marca"=>__('messages.marca')."-".(__('messages.filtro-texto-categoria'))."-".(__('messages.variable-producto'))]);
        $tipo_var = json_encode(["dinero"=>__('messages.dinero'), "porcentaje" =>__('messages.porcentaje')]);
        $lim_inf = json_encode(["-100"=>"-100%", "-50" =>"-50%", "-25"=>"-25%", "-10"=>"-10%"]);
        $lim_sup = json_encode(["100"=>"100%", "50" =>"50%", "25"=>"25%", "10"=>"10%"]);
        $participacion = json_encode(["1"=>"Total Consulta", "2" =>"Total ".__('messages.participacion')]);
        $tipos_graficos = json_encode([ "msline" => "Líneas", "stackedcolumn2d" => (__('messages.selector-tipo-grafico-columnas-apiladas')),
        "mscolumn2d" => "Columnas agrupadas", "stackedbar2d" => "Barras apiladas"]);
        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct || $_year == $yearAnt || $_year == $yearAnt2) {
                $mesesComp []= $value;
            }
        }

        foreach ($meses as $value) {
            list($_mes, $_year) = explode(' ', $value->nombre);
            if($_year == $yearAct ) {
                $mesesTree []= $value;
            }
        }
        foreach ($semanas as $value) {
            $_year = substr($value->periodo, 0, 4);
            if($_year == $yearAct) {
                $semanasComp []= $value;
            }
        }
        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='';
        }
        $variables_2 = $variables;
        if(isset($variables_2['Local']) && isset($variables_2['Local']['3-5'])){
            unset($variables_2['Local']['3-5']);
        }
        if(isset($variables_2['Producto']) && isset($variables_2['Producto']['1-15'])){
            unset($variables_2['Producto']['1-15']);
        }

        $ninguno = ['' => ['-1' => 'Sin Seleccionar']];
        $variables_2 = $ninguno + $variables_2;
        $variables_inout = ["" => []];
        if(array_key_exists('Local',$variables)){
            if (array_key_exists('2-0',$variables['Local'])) {
                $variables_inout[""]["2-0"] = $variables['Local']['2-0'];
            }
        }
        if(array_key_exists('Producto',$variables)){
            if (array_key_exists('1-3',$variables['Producto'])) {
                $variables_inout[""]["1-3"] = $variables['Producto']['1-3'];
            }
            if (array_key_exists('1-15',$variables['Producto'])) {
                $variables_inout[""]["1-15"] = $variables['Producto']['1-15'];
            }
        }
        $variables_inout[""]["total"] = __('messages.compañia');
        $display_grafico = '';
        $display_tabla = '';
        $favoritos=json_encode([]);
        $warning = "Se compara Costo Sell Out vs Venta Sell In";

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

<div style="margin-top:60px;margin-left:4%"><h3>Visor - Sell Out </h3></div>

<div class="container-fluid p-5 pb-2 bg-white" style="margin-top:-50px" id='selectores_periodos'>

    <div class="d-flex flex-row overflow-flex">
        {{-- <h5>Visor Sell Out</h5> --}}

        <div class="flex-fill">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2" style="height:30px">
                    <label>
                        Periodo Semanal
                    </label>

                        <select  id="semana_0" class="flt form-control select2" style="width:80%">
                            @foreach($semanas as $option)
                            @if($option->periodo >= 202301 )
                            @if($option->periodo == (date('Y').(str_pad(date('W'), 2, "0", STR_PAD_LEFT))) - 1)  
                                        <option value="{{$option->periodo}}" selected>{{$option->nombre}}</option>
                                    @else
                                        <option value="{{$option->periodo}}">{{$option->nombre}}</option>

                                    @endif
                                @endif                              
                            @endforeach
                        </select>

                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2" style="margin-left:-50px">
                        <label>
                            &nbsp;
                        </label>
                        <select  id="semana_1" class="flt form-control select2" style="width:80%">
                                @foreach($semanas as $option)
                                    @if($option->periodo >= 202301 )
                                    
                                         @if($option->periodo == ((date('Y')-1).(str_pad(date('W'), 2, "0", STR_PAD_LEFT))) - 1) 
                                             <option value="{{$option->periodo}}" selected>{{$option->nombre}}</option>

                                        @else
                                            <option value="{{$option->periodo}}">{{$option->nombre}}</option>

                                        @endif
                                        
                                    
                                    @endif                              
                                @endforeach
                        </select>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2" style="height:30px">
                    <label>
                        Periodo Acumulado
                    </label>

                        <select  id="semana_2" class="flt form-control select2" style="width:80%">
                            @foreach($semanas as $option)
                                @if($option->periodo >= 202301)
                                    @if($option->periodo == (date('Y').(str_pad(date('W'), 2, "0", STR_PAD_LEFT))) - 1) 
                                        <option value="{{$option->periodo}}" selected>{{$option->nombre}}</option>
                                    @else
                                        <option value="{{$option->periodo}}">{{$option->nombre}}</option>

                                    @endif
                                @endif                              
                            @endforeach
                        </select>

                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-2 col-lg-2" style="margin-left:-50px">
                        <label>
                            &nbsp;
                        </label>
                        <select  id="semana_3" class="flt form-control select2" style="width:80%">
                                @foreach($semanas as $option)
                                @if($option->periodo >= 202301)
                                        @if($option->periodo == ((date('Y')-1).(str_pad(date('W'), 2, "0", STR_PAD_LEFT))) - 1) 
                                            <option value="{{$option->periodo}}" selected>{{$option->nombre}}</option>
                                        @else
                                            <option value="{{$option->periodo}}">{{$option->nombre}}</option>
                                        @endif
                                        
                                    
                                    @endif                              
                                @endforeach
                        </select>
                </div>

              
                <div class="col-md-2">
                    <label for="select1">Variable Salida</label>
                    <select  id="salida_evo" class="flt form-control select2" style="width:80%">
                            @foreach($salida2 as $key => $option)
                                <option value="{{$key}}" @if($key == '0') Selected @endif>{{$option}}</option>
                            @endforeach
                    </select>
                </div>
                <div class="col-md-2" style="position: relative;">
                    <div class="row">
                        <div class="col-md-5">
                                <button type="button" class="btn btn-success bt-0" onclick="callTables('{{$cliente}}', 'ventas');" style="position: absolute; bottom: 0px;">
                                <i class="bi bi-check-lg"></i> Actualizar
                            </button> 
                        </div>
                        <div class="col-md-5">

                            <button title="Imprimir" type="button" id="imprimir" class="btn btn-success bt-0" style="position: absolute; bottom: 0px;height:37.98px !important">
                                <span class="fa fa-print"></span>
                            </button>
                        </div>
                        <div class="col-md-2">
                            <x-infobox tamano="25px" texto="" modal="tabla_visor_modal"/>
                            <div class="modal fade bd-example-modal-lg" id="tabla_visor_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">Visor Sell Out</h5>     
                                    </div>
                                        
                                    <p><b>Filtros:</b> Los reportes estaran filtrados por estos Clientes cuando no haya una nueva seleccion en el filtro Cliente o en el filtro Cadena</p>
                                    <ul>
                                            <li><b>ALLENDES</li></b>
                                            <li><b>ALMACEN GURU</li></b>
                                            <li><b>CENCOSUD</li></b>
                                            <li><b>CLINICAL MARKET</li></b>
                                            <li><b>CRUZ VERDE</li></b>
                                            <li><b>ESPOL</li></b>
                                            <li><b>FALABELLA</li></b>
                                            <li><b>FASA</li></b>
                                            <li><b>HITES</li></b>
                                            <li><b>LA POLAR</li></b>
                                            <li><b>LINIO</li></b>
                                            <li><b>MAICAO</li></b>
                                            <li><b>MEDIVEN</li></b>
                                            <li><b>MERCADO LIBRE</li></b>
                                            <li><b>PARIS</li></b>
                                            <li><b>PREUNIC</li></b>
                                            <li><b>PROMERCO</li></b>
                                            <li><b>RIPLEY</li></b>
                                            <li><b>SALCOBRAND</li></b>
                                            <li><b>SMU</li></b>
                                            <li><b>TOTTUS</li></b>
                                            <li><b>VASTUS</li></b>
                                            <li><b>WALMART</li></b>
    
                                        </ul>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                       
                    </div>
                </div>

                
                <x-selector-generico id="f_holding2" idselect="f_holding" :salida="json_encode($holding2)"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Cliente
                    </x-slot>
                </x-selector-generico>
                <x-selector-generico id="f_familia2" idselect="f_familia" :salida="json_encode($familia2)"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Tipo
                    </x-slot>
                </x-selector-generico>

                <x-selector-generico id="f_subcategoria2" idselect="f_subcategoria" :salida="json_encode($subcategoria2)"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Variedad
                    </x-slot>
                </x-selector-generico>
                <x-selector-generico id="f_marca2" idselect="f_marca" :salida="json_encode($marca2)"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Marca
                    </x-slot>
                </x-selector-generico>
                <x-selector-generico id="f_fuente2" idselect="f_fuente" :salida="json_encode($fuente2)"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Fuente
                    </x-slot>
                </x-selector-generico>
                <x-selector-generico id="f_unidad_conversion2" idselect="f_unidad_conversion" :salida="json_encode($unidad_conversion2)"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Unidad
                    </x-slot>
                </x-selector-generico>

                <x-selector-generico id="f_agrupacion2" idselect="f_agrupacion" :salida="json_encode($agrupacion2)"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Agrupacion
                    </x-slot>
                </x-selector-generico>

                <x-selector-generico id="f_producto2" idselect="f_producto" :salida="json_encode($producto2)"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Producto
                    </x-slot>
                </x-selector-generico>
                <x-selector-generico id="f_canal2" idselect="f_canal" :salida="json_encode($canal2)"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Canal
                    </x-slot>
                </x-selector-generico>
                <x-selector-generico id="f_cadena2" idselect="f_cadena" :salida="json_encode($cadena2)"  class="selector-generico" style="width: 120px">
                    <x-slot name="texto">
                        Cadena
                    </x-slot>
                </x-selector-generico>
              
            </div>     
        </div>
    </div>
</div>

{{-- <div class="container-fluid px-5 bg-white">
    <div class="d-flex flex-row overflow-flex">
        <div class="flex-fill block block-rounded block-bordered container-fluid">
            <div class="d-none" id="siso_cont">
            </div>
        </div>
    </div>
</div> --}}

{{-- <div id="tabla" style="height: 700px;" class="bg-white">
    <div style="width:90%;margin-left:5%">
        <p>Fecha de Stock SISO: {{$siso_date}}</p>
    </div>
    <x-tabla id="siso" style="height: 600px !important;;width:90%;margin-left:5%" >
    </x-tabla>
</div> --}}


</div>
    <div class="col-md-12" style="margin:-2px;padding:0px;">
        <div id="graf" style="margin:0px;margin-top:5px;background-color:#FFF;position:relative;widht:100% !importan;min-height:200px;height:450px;padding-left:4%;">
            <!-- loading spin -->
            <div class="w-100 justify-content-center" id="f_carga_graf" style="height:300px; display:flex; align-items:center;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div class="collapse chart_show" id="chart-container2" class="chart_show" style="margin:0px;padding-top:0px;padding-left:8%;background-color:#FFF;position:relative; height:450px;display:block !important">
            </div>
        </div>
       
        <div style="margin:0px;margin-top:5px;background-color:#FFF;position:relative;widht:100% !importan;min-height:200px;padding-left:4%;">
            <div class="w-100 justify-content-center" id="f_semanal1_graf" style="height:400px; display:flex; align-items:center;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div id="semanal1" style="margin:0px;margin-top:5px;background-color:#FFF;position:relative;widht:100% !importan; min-height:200px;padding-left:4%;">
            </div>
        </div>

        <div style="margin:0px;margin-top:5px;background-color:#FFF;position:relative;widht:100% !importan;min-height:200px;padding-left:4%;">
            <!-- <div class="w-100 justify-content-center" id="f_semanal2_graf" style="height:400px; display:flex; align-items:center;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div> -->
            <div id="semanal2" style="margin:0px;margin-top:5px;background-color:#FFF;position:relative;widht:100% !importan; min-height:200px;padding-left:4%;">
            </div>
        </div>

        <div style="margin:0px;margin-top:5px;background-color:#FFF;position:relative;widht:100% !importan;min-height:200px;padding-left:4%;">
            <!-- <div class="w-100 justify-content-center" id="f_semanal2_graf" style="height:400px; display:flex; align-items:center;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div> -->
            <div id="semanal3" style="margin:0px;margin-top:5px;background-color:#FFF;position:relative;widht:100% !importan; min-height:200px;padding-left:4%;">
            </div>
        </div>

        <div style="margin:0px;margin-top:5px;background-color:#FFF;position:relative;widht:100% !importan;min-height:200px;padding-left:4%;">
            <div class="w-100 justify-content-center" id="f_YearToDate_graf" style="height:400px; display:flex; align-items:center;">
                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
            </div>
            <div id="YearToDate" style="margin:0px;margin-top:5px;background-color:#FFF;position:relative;widht:100% !importan;min-height:200px;padding-left:4%;">
            </div>
        </div>
        
{{-- <div class="container-fluid p-5 bg-white">
    <div class="nav-tabs-custom" style="height: 331px;">
        <div class="header" style="margin: 0px 5px 5px;">
           Totales Holding SellIn - SellOut
        </div>
        <div class="w-100 justify-content-center" id="f_carga_graftothold" 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="grafTotHold_cont" style="height:290px;margin:0x;padding:0px" class="d-none">
        </div>
    </div>
</div> --}}

<!-- <div class="container-fluid px-5 bg-white">
    <div class="d-flex flex-row overflow-flex overflow-auto">
        <div class="flex-fill">
            <div class="d-none pt-4" id="evo_cont">
            </div>

            <div class="d-none pt-4" id="evo_sell_in_cont">
            </div>
        </div>
    </div>
</div> -->

<!-- <div class="container-fluid px-5 bg-white">
    <div class="d-flex flex-row overflow-flex overflow-auto">
        <div class="flex-fill">
           
        </div>
    </div>
</div> -->


@section('right-bar')
    <div class="p-3 align-items-center flex-column d-none" id="f_grafcomp">
        
    </div>
    <div class="p-3 align-items-center flex-column d-none" id="f_grafevo">
    </div>
@endsection
<script>

    async function callTables(cliente, tipo){
        arreglo = $('#f_holding').val();
        getGrafico(cliente, tipo,arreglo);
        cambiar(0,"MARCAS",1,arreglo);
        cambiar(1,"CLIENTE",2,arreglo);
        cambiar(2,"CANAL",3,arreglo);
        cambiar2(arreglo);       
    }


    function  getGrafico(cliente, tipo,holding) {
 
        //show f_carga_graf
        document.getElementById("f_carga_graf")? document.getElementById("f_carga_graf").style.display = "flex" : null;

        // document.getElementById("chart-container").style.display = "flex";
        // $("#chart-container_cont").addClass("d-none");
        // $("#graf").find("#aplicarfiltrosparent").hide();


        return $.ajax({
            url: "/reportevisor",
            method: "post",
            dataType: "json",
            crossDomain: false,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                holding: holding,
                familia: $('#f_familia').val(),
                cadena: $('#f_cadena').val(),

                subcategoria: $('#f_subcategoria').val(),
                marca: $('#f_marca').val(),
                fuente: $('#f_fuente').val(),
                unidad_conversion: $('#f_unidad_conversion').val(),
                agrupacion: $('#f_agrupacion').val(),
                producto: $('#f_producto').val(),
                canal: $('#f_canal').val(),
                salida:  document.getElementById("salida_evo").value,
                filtros: "",
                cliente: cliente,
            },
        })
        .done(function(data, textStatus, jqXHR) {
           
            // console.log(data);
            document.getElementById("f_carga_graf")? document.getElementById("f_carga_graf").style.display = "none" : null;

            const chartConfig2 = {
                    id: 'grafdisp_co',
                    type: 'stackedcolumn2dline',
                    renderAt: 'chart-container2',
                    width: '90%',
                    height: '400',
                    dataFormat: 'json',
                    dataSource: data,
                    ...(userLanguage == 'es') && {
                        dataLoadStartMessage: 'Recuperando datos. Por favor, espere.',
                        dataLoadErrorMessage: 'Error al cargar los datos.',
                        dataInvalidMessage: 'Datos no válidos.',
                        dataEmptyMessage: 'No hay datos para mostrar',
                        typeNotSupportedMessage: 'Tipo de gráfico no soportado.',
                        loadMessage: 'Cargando gráfico. Por favor, espere.',
                        renderErrorMessage: 'No se puede representar el gráfico.',
                        decimalSeparator: ',',
                    },

                };
                FusionCharts.ready(function(){
                    var fusioncharts = new FusionCharts(chartConfig2);
                    fusioncharts.render();
                    fusioncharts.setChartAttribute("per", ".");
                });
           
        })
        .fail(function( jqXHR, textStatus, errorThrown ) {
            //console.log(jqXHR);
            // document.getElementById("f_carga_graf").style.display = "none";
            // $("#chart-container_cont").removeClass("d-none");
            // $("#chart-container").find("#aplicarfiltrosparent").show();
        });
    }

    function cambiar(modo,titulo,num,holding){

        // var modo = 0;

        var s1          = $("#semana_0").find('option:selected').val();
        var s2          = $("#semana_1").find('option:selected').val();
        var s3          = $("#semana_2").find('option:selected').val();
        var s4          = $("#semana_3").find('option:selected').val();

        // alert(canal);
        switch(titulo){
            case "MARCAS":
                document.getElementById("f_semanal0_graf")? document.getElementById("f_semanal0_graf").style.display = "flex" : null;
                break;
            case "CLIENTE":
                document.getElementById("f_semanal1_graf")? document.getElementById("f_semanal1_graf").style.display = "flex" : null;
                break;
            case "CANAL":
                document.getElementById("f_semanal2_graf")? document.getElementById("f_semanal2_graf").style.display = "flex" : null;
                break;
        }
        $("#semanal"+num).html("");
        var salida =  document.getElementById("salida_evo").value;

        $.ajax({
            type: "POST",
            url: "/reportevisor/tablas",
            data: {     
                holding: holding,
                familia: $('#f_familia').val(),
                subcategoria: $('#f_subcategoria').val(),
                marca: $('#f_marca').val(),
                cadena: $('#f_cadena').val(),
                fuente: $('#f_fuente').val(),
                unidad_conversion: $('#f_unidad_conversion').val(),
                agrupacion: $('#f_agrupacion').val(),
                producto: $('#f_producto').val(),
                canal: $('#f_canal').val(),
                s1: s1,
                s2: s2,
                s3: s3,
                s4: s4,
                modo: modo,
                salida: salida,
                titulo: titulo} ,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(data){
                
                switch(titulo){
                    case "MARCAS":
                        document.getElementById("f_semanal0_graf")? document.getElementById("f_semanal0_graf").style.display = "none" : null;
                        break;
                    case "CLIENTE":
                        document.getElementById("f_semanal1_graf")? document.getElementById("f_semanal1_graf").style.display = "none" : null;
                        break;
                    case "CANAL":
                        document.getElementById("f_semanal2_graf")? document.getElementById("f_semanal2_graf").style.display = "none" : null;
                        break;
                }
                console.log("#semanal"+num);
                $("#semanal"+num).html(data);
                // eval(arr[1])
                // cargandoDatos2(1,"semanal");
                // $(".flt").prop("disabled",false);
                // $("#exportar").prop("disabled",false);
            }
        });
    }
    
    function cambiar2(holding){

        // var modo = 0;

        var s1          = $("#semana_0").find('option:selected').val();
        var s2          = $("#semana_1").find('option:selected').val();
        var s3          = $("#semana_2").find('option:selected').val();
        var s4          = $("#semana_3").find('option:selected').val();

        // alert(canal);

        document.getElementById("f_YearToDate_graf").style.display = "none";
        $("#YearToDate").html("");

        var salida =  document.getElementById("salida_evo").value;

        $.ajax({
            type: "POST",
            url: "/reportevisor/tablasYTD",
            data: {
                holding: holding,
                familia: $('#f_familia').val(),
                subcategoria: $('#f_subcategoria').val(),
                cadena: $('#f_cadena').val(),
                marca: $('#f_marca').val(),
                fuente: $('#f_fuente').val(),
                unidad_conversion: $('#f_unidad_conversion').val(),
                agrupacion: $('#f_agrupacion').val(),
                producto: $('#f_producto').val(),
                canal: $('#f_canal').val(),
                s1: s1,
                s2: s2,
                s3: s3,
                s4: s4
                
            } ,
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(data){
                
                document.getElementById("f_YearToDate_graf").style.display = "none";
                $("#YearToDate").html(data);
                // eval(arr[1])
                // cargandoDatos2(1,"semanal");
                // $(".flt").prop("disabled",false);
                // $("#exportar").prop("disabled",false);
            }
        });
        }

    function prueba(nombre){
                $('#'+nombre.toString()).find('td').find('.fa-plus').toggleClass('fa-minus');
                $('#'+nombre.toString()).toggleClass('collapsed');
            }

    
  
   


</script>

@section('js_aft')
    <script>
         $("#f_mes_grafcomp_ini").val("202212").change();
         $("#f_mes_graftree_ini").val("202301").change();
         $("#f_mes_evo_ini").val("202301").change();
         $("#f_mes_evo_fin").val("202303").change();
         $("#f_mes_evo_ini_sell_in").val("202301").change();
        let ids = ['evo', 'matri', 'comp','comparativo', 'inout', 'grafdri', 'graftree', 'grafvar', 'grafmatri', 'grafcrec', 'grafevo', 'grafcomp','perdidas', 'evo_sell_in'];
        
        $(document).ready(() => {

            
            let arreglo = ['ALLENDES','ALMACEN GURU','KHORNER','CENCOSUD','CORONA','CRUZ VERDE','ESPOL','FALABELLA','FASA','HITES','LA POLAR','LINIO','MAICAO','MEDIVEN','MERCADO LIBRE','PARIS','PREUNIC','PROMERCO','RABIE','RIPLEY','SALCOBRAND','SMU','TOTTUS','VASTUS','WALMART'];

     
            $(document).ready(function() {
                let select = $('#f_holding');

                // Marca las opciones como seleccionadas
                for (let i = 0; i < arreglo.length; i++) {
                    select.find('option[value="'+arreglo[i]+'"]').prop('selected', true);
                }

                // Notifica a Select2 que los valores han cambiado
                select.trigger('change');
                callTables(cliente, 'ventas');
            });

            $('#imprimir').on( 'click', function( event ) {
                $('#selectores_periodos').addClass('d-none');
                setTimeout(3000)
                /*$('#chart-container3').css('height','360px');
                $('#chart-container3').css('background-color','#FFF');*/
                window.print();

                setTimeout(3000)


                $('#selectores_periodos').removeClass('d-none');

                /*$('#chart-container3').css('height','0px');
                $('#chart-container3').css('background-color','#DDDEE0');*/
            });

            var cliente = '{{$cliente}}';

             let filtros = ['holding', 'familia', 'subcategoria', 'marca', 'fuente', 'unidad_conversion', 'agrupacion', 'producto', 'canal','cadena'];
            for(let filtro of filtros) {
                // console.log(filtro);
                    multiSelect(filtro,undefined, "{{__('messages.seleccionar')}}");
            }
        
         
            // getSISO(cliente, 'ventas')
            // getGrafTotales(cliente, 'ventas')
            // getGrafTotalesHolding(cliente, 'ventas')

            let ahora = new Date();
          
            
            $('.padre_collapsed').on('click', function(){
                // alert("prueba");
                $(this).find('td').find('.fa-plus').toggleClass('fa-minus');
                $(this).next('tbody').toggleClass('collapsed');
            });
          
            

           
           
            $(".navbar-402").css("border-style","solid");
            $(".navbar-402").css("border-left","0px");
            $(".navbar-402").css("border-color","#57775F");
            $(".navbar-402").css("background-color","#57775F");

            $('#variables_matri1').change(verificar_selectores);

            $('#variables_matri2').change(verificar_selectores);
            $('[data-toggle="infobox"]').tooltip();

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

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

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

<style>
    #contenedor{
        width: 90% !important;
        /* margin-right: auto; 
        margin-left:  auto; */
    }
    
    TABLE{
        width: 90%;
    }
    
    #semanal, #contenedor{
        background: #FFF;
    }
    
    #chartContainer1 {
        position: absolute;
        z-index: 1000;
    }
     
    #fusioncharts-area-element{
        z-index: 2000;
    }
    
    TABLE.tabla_semana thead th{
        text-align: center;
        background-color: #7F7F7F;
        color: #FFF;
        height: 40px;
    }
    
    TABLE.tabla_semana td{
        text-align: center;
        padding-right: 5px;
        height: 15px;
        border-right: 1px dashed #CCC;
        width: 50px;
    }
    
    TABLE.tabla_semana td:nth-child(1){
        text-align: left;
        padding-left: 10px;
        width: 50px;
        background-color: #E5E8E8 !important;
        border-bottom: 1px dashed #CCC;
        height: 20px;
    }
    
    TABLE.tabla_semana td:nth-child(1) i{
        color: #ABB2B9;
        font-weight:light;
        font-size: 9px !important;
    }
    
    TABLE.tabla_semana tbody tr:nth-child(odd){
        background-color: #FFF !important;
        border-right: 1px solid #CCC;
    }
    TABLE.tabla_semana tbody tr:nth-child(even){
        background-color: #EAEAEA !important;
        border-right: 1px solid #CCC;
    }
    tr.gris td{
        background-color: #EAEAEA !important;
    }
    
    TABLE.tabla_semana tfoot tr.total_amarillo th{
        border-top: 2px solid #999;
        background: #FFF !important;
        font-weight: bold;
        text-align: right;
        height: 20px;
        padding-right: 5px;
    }
    
    TABLE.tabla_semana tfoot tr th.rojo{
        background: #FFF !important;
        color: #C0392B;
        border: #C0392B solid 1px;
    }
    
    TABLE.tabla_semana tfoot tr th.t_rojo{
        color: #C0392B !important;
    }
    
    
    /***********************/
    
    
    TABLE.tabla_semana tbody td:nth-child(11),
    TABLE.tabla_semana tbody td:nth-child(12),
    TABLE.tabla_semana tbody td:nth-child(13),
    TABLE.tabla_semana tbody td:nth-child(14),
    TABLE.tabla_semana tbody td:nth-child(15){
        text-align: right !important;
        padding-right: 10px;
    }
    
    
    TABLE.tabla_ytd thead th{
        text-align: center;
        background-color: #7F7F7F;
        color: #FFF;
        height: 25px;
    }
    
    TABLE.tabla_si thead th{
        text-align: center;
        background-color: #FFF !important;
        color: #000;
        height: 25px;
        font-weight: bold;
        font-size: 11px;
        border-bottom:#000 solid 2px;
    }
    
    TABLE.tabla_si thead tr.ppal th {
        color: #000;
        border-bottom:#000 solid 2px;
    }
    
    TABLE.tabla_ytd td{
        text-align: right;
        padding-right: 5px;
        height: 15px;
        border-right: 1px dashed #CCC;
        width: 100px;
    }
    
    TABLE.tabla_ytd td:nth-child(1){
        text-align: left;
        padding-left: 10px;
        width: 50px;
        background-color: #E5E8E8 !important;
        border-bottom: 1px dashed #CCC;
        height: 20px;
    }
    
    TABLE.tabla_ytd tbody tr:nth-child(odd){
        background-color: #FFF !important;
        /*border-right: 1px solid #CCC;*/
    }
    TABLE.tabla_ytd tbody tr:nth-child(even){
        background-color: #EAEAEA !important;
        /*border-right: 1px solid #CCC;*/
    }
    
    TABLE.tabla_ytd tfoot tr.total_amarillo th{
        border-top: 2px solid #999;
        background: #FFF !important;
        font-weight: bold;
        text-align: right;
        height: 20px;
        padding-right: 5px;
    }
    
    .t_rojo{
        color: #C0392B !important;
    }
    
    .rojo{
        /*background: #FFF !important;*/
        /*border: #C0392B solid 1px !important;*/
        color: #C0392B;
        /*font-weight: 600;*/
    }
    
    .cargando_contenedor{
        background-image: url("../../img/Preloader_21.gif");
        position:absolute;
        left: 50%;
        top: 20%;
        width: 64px;
        height: 64px;
        background-position: 0;
        background-repeat: no-repeat;
    }
    
    #YearToDate, #semanal{
        margin: 10px;
        border: #FCFCFC solid 1px;
    }
    
    .chart_show{
        margin: 10px;
        border: #FCFCFC solid 1px;
    }
    
    TABLE.tabla_selectores{
        font-size: 12px;
        font-weight: bold;
        padding: 5px;
    }
    
    TABLE.tabla_selectores td{
        padding-right: 5px;
        padding-left: 5px;
    }
    
    .titulos_rep{
        text-align: center;
        height: 20px;
        border-bottom: #000 solid 2px;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 5px;
    }
    .titulos_rep3{
        text-align: center;
        /*height: 20px;*/
        margin-right: 10px;
        margin-left: 10px;
        margin-top: 5px;
    }
    .cont_rep{
        text-align: center;
        /*height: 20px;*/
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 5px;
    }
    .rowx {
       margin-left: 0px !important;
       margin-right: 0px !important;
       margin-bottom: 6px !important;
     }
    .titulos_rep2{
        /*background-color: #000;
        color: #FFF;*/
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        height: 32px;
    }
    
    .cont_rep2{
        background-color: #000;
        color: #FFF;
        height: 32px;
        padding-top: 5px;
        text-align: center;
        font-weight: bold;
        font-size: 15px;
    }
    
    .cont_rep3{
        text-align: center;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 5px;
    }
    thead th{
        min-width: 50px !important;
        max-width: 57px !important;
        font-size: 12px !important;

    }
    tbody td{
        font-size: 12px !important;
    }
    tfoot th{
        font-size: 12px !important;
    }
    .cont_rep3 > span{
        text-align: center;
        min-width: 100px !important;
        width: 100px !important;
        /*background-color: #000;*/
        /*font-weight: bold;*/
        padding-left: 7px;
        padding-right: 7px;
    }
    .cont_rep3 > span.resultado{
        text-align: center;
        min-width: 100px !important;
        width: 100px !important;
        /*background-color: #000;*/
        /*font-weight: bold;*/
        padding-left: 18px;
        padding-right: 18px;
    }
    
    .print_this{
        /* display: none; */
    }
    
    @media print {
        .print_this {
            display: block;
        }
        .screen_only {
            display: none;
        }
        body{
            background-color: #FFF !important;
        }
        .content-wrapper, .right-side {
            background-color: #FFF !important;
        }
        #chart-container2{
            display: none;
        }
        .xxx{
            padding-top: 360px !important;
        }
        .espacio{
            height: 50px !important;
        }
        #bloque4{
            page-break-after: always !important;
        }
    }
    
    .padre_collapsed1 {
        /*display: none;*/
        cursor:pointer;
    }
    
    .padre_collapsed2 {
        /*display: none;*/
        cursor:pointer;
    }
    
    .collapsed {
        display: none;
    }
    
    
    .subgrupo {
        border-left: #E5E8E8 solid 4px;
        border-right: #E5E8E8 solid 4px;
        margin-bottom:10px;
    }
    
    td.subx {
        padding-left: 20px !important;
    }
    
    TABLE.tabla_semana tbody.subgrupo tr td{
        background-color: #FFF !important;
    }
    
    TABLE.tabla_semana tbody.subgrupo tr:hover td {
        background-color: #E5E8E8 !important; /* or #000 */
    }
    
    /*
    tbody.collapsed tr:nth-child(even){
        background-color: #FFF !important;
        border-right: 1px solid #CCC;
    }
    tbody.collapsed tr:nth-child(odd){
        background-color: #EAEAEA !important;
        border-right: 1px solid #CCC;
    }
    */
    </style>

@endsection