@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_selected = date('Y')-1;
        $periodos = json_encode(["YTD"=>"Meses", "MEC" => "Semanas"]);
        $categorias = json_encode(["Categoria"=>"Categoría", "Subcategoria" => "Subcategoría", "Region" => "Región"]);
        $id = 'fr_dashboard';
        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='';
        }
        $info = "Los porcentajes mostrados en las tablas se calculan de la siguiente manera: \n
        Fillrate: (Cantidad recibida/Cantidad solicitada) x 100\n
        Pasar el cursor por encima de la celda de una tabla mostrará mayor información acerca del cálculo aplicado.\n";
       
    @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_fr_dashboard" :lista="$holding" style="max-width: 120px; min-width: 120px; width: 120px; padding: 10px 5px">
                <x-slot name="texto">
                </x-slot>
            </x-filtro>

            <div class="col-md-auto" style="margin-top:10px; align-items: center;">     
                <button class="btn boton btn-sm align-middle lh-1 actualizar" onclick="actualizar()" >
                    <i class="fas fa-sync-alt"></i>
                    {{__('messages.boton-actualizar-texto')}}
                </button>
            </div>
            <x-infobox tamano="25px" :texto="$info"/>
            
            @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)
            <div class="bg-white">
                    <div style="display:none; height:400px; padding-top:30px;position:relative" id="filtros_avanzados" class="flex-row justify-content-around filtros_avanzados " parent="{{$id}}">
                        


                        <div class="flex-column">
                            @if (array_key_exists("marca",$filtrosAv))
                                @php
                                    $marca = $filtrosAv["marca"];
                                @endphp
                                <x-filtro id="f_marca_{{$id}}" :lista="$marca" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['marca'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                            @if (array_key_exists("subcategoria",$filtrosAv))
                                @php
                                    $subcategoria = $filtrosAv["subcategoria"];
                                @endphp
                                <x-filtro id="f_subcategoria_{{$id}}" :lista="$subcategoria" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['subcategoria'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                            @if (array_key_exists("familia",$filtrosAv))
                                @php
                                    $familia = $filtrosAv["familia"];
                                @endphp
                                <x-filtro id="f_familia_{{$id}}" :lista="$familia" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['familia'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                        </div>

                        <div class="flex-column">
                            @if (array_key_exists("estado",$filtrosAv))
                                @php
                                    $estado = $filtrosAv["estado"];
                                @endphp
                                <x-filtro id="f_estado_{{$id}}" :lista="$estado" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['estado'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                            @if (array_key_exists("producto",$filtrosAv))
                                @php
                                    $producto = $filtrosAv["producto"];
                                @endphp
                                <x-filtro id="f_producto_{{$id}}" :lista="$producto" style="max-width: 120px; min-width: 120px; width: 120px; margin-top:10px">
                                    <x-slot name="texto">
                                        {{__('messages.'.$filtrosAvAlias['producto'])}}
                                    </x-slot>
                                </x-filtro>
                            @endif
                        </div>


                        <div style="display:none; justify-content: center; position:absolute; bottom: 20px" id="aplicarfiltrosparent" parent="{{$id}}">
                                <button type="button" id="limpiarfiltros" class="btn btn-default btn-sm limpiarfiltros" style="width: auto; height: 30px; margin-top: 22px; margin-right:20px">
                                    {{__('messages.limpiar-filtros')}}
                                </button>
                                <button type="button" id="aplicarfiltros" class="btn boton btn-sm aplicarfiltros" style="width: auto; height: 30px; margin-top: 22px; font-size: .875rem!important">
                                    {{__('messages.aplicar')}}
                                </button>
                        </div>
                    </div>
            </div>
            @endisset
            
         

     
        <div class="w-100 bg-white row justify-content-start" style="height: 300px; margin: 10px 0px 0px">
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="h-100 w-100" id="grafmec_fr">
                    
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                <div class="h-100 w-100" id="chart-super">
                    
                </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="YTD" id="salida_frdash_periodo_chart_fr2" idselect="salida_frdash_periodo_chart_fr" :salida="$periodos" 
            class="selector-generico" style="width: 130px; font-size: 12px!important; line-height: 27px !important; margin-bottom: 5px; 
            padding: 10px 5px">
                <x-slot name="texto">
                </x-slot>
            </x-selector-generico>
    
        </div>

        <div id="chart-container" class="col-md-12">
            
        </div>
    </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="Categoria" id="salida_frdash_categoria_table2" idselect="salida_frdash_categoria_table" :salida="$categorias" 
            class="selector-generico" style="width: 130px; font-size: 12px!important; line-height: 27px !important; margin-bottom: 5px; 
            padding: 10px 5px">
                <x-slot name="texto">
                </x-slot>
            </x-selector-generico>
    
        </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>

            

            $('#salida_frdash_periodo_chart_fr').change(function() {
                getfrDashboardytd('{{$cliente}}');
            });

            //$('#tbl_report').html('Cargando...');

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

          

            $('#salida_frdash_categoria_table').change(function() {
                getfrDashboardTabla('{{$cliente}}');
            });

            let ids = ['fr_dashboard'];
            var filtrosPromise = getFiltrosAv('{{$cliente}}', '{{$codigo}}', ['marca', 'subcategoria', 'familia', 'estado', 'producto']);

            $(document).ready(function(){
                $('#f_holding_fr_dashboard').find('option').prop("selected", false);
                $('#f_holding_fr_dashboard').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')}}");
                    }
                }
                getfrDashboardTabla('{{$cliente}}');
                getfrDashboard('{{$cliente}}');
                getfrDashboardCliente('{{$cliente}}');
                getfrDashboardytd('{{$cliente}}');

            })


        function actualizar(){
            getfrDashboardTabla('{{$cliente}}');

            getfrDashboard('{{$cliente}}');
            getfrDashboardCliente('{{$cliente}}');
            getfrDashboardytd('{{$cliente}}');
        }
    </script>
@endsection