@extends('layouts.backend')
@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;
        }
        .carousel-control-next,
        .carousel-control-prev {
            filter: invert(100%);
        }
        .container-fluid{
            padding: 0px !important;
        }
        .card{
            margin-bottom: 0px !important;
        }

        .summary-ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .summary-li{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .summary-first-level{
            margin: 0px !important;
            /*color: white !important;
            background-color: #FF0000 !important;
            border-color: #FF0000 !important;*/
        }

        .summary-second-level{
            padding-left:60px !important;
            /*color: white !important;
            background-color: #FF0000 !important;
            border-color: #FF0000 !important;*/
        }

        .card-header{
            text-align: center;
        }

        .card a, .card a:visited, .card a:hover, .card a:active{
            /*color: white;*/
            color: black !important;
        }

        .card-title{
            font-weight: 500 !important;
        }
    </style>
@endsection
@section('content')
@php
    $salida = json_encode(["2"=> __('messages.ventas'), "1" => __('messages.unidades'), "3" => __('messages.costo')]);
    $cliente = config('app.CLIENTE');

    $cliente_todos = (object) array('valor' => '0', 'nombre' => 'CLIENTE (TODOS)');
    $categorias_todos = (object) array('valor' => '0', 'nombre' => 'CATEGORÍA (TODOS)');
    array_unshift($clientes, $cliente_todos);
    array_unshift($categorias, $categorias_todos);
    //dd($clientes);

    //$secciones_desc = session()->get('session_secciones_desc');
@endphp
    <!-- Page Content -->
    <div class="row">
        {{-- <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3" style="margin-top: 5px;margin-left:0px;margin-right:0px;padding:0px;padding-left: 5px">
            <div class="row" style="margin-top:-5px;margin-bottom:-10px;">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="content">
                        <div class="nav-tabs-custom">
                            <div class="header" style="margin: 5px;">
                                
                            </div>
                            <div class="w-100 justify-content-center" id="f_carga_topquebrados" style="height:200px; display:flex; align-items:center;">
                                <img src="{{asset('images/Preloader_21.gif')}}" style="width: 60px; height: 60px;" class="align-self-center">
                            </div>
                            <div id="topquebrados_cont" style="height: 200px" class="chart card overflow-auto d-none">
                                <ul id="brok_prod" class="w-100" style="padding-left: 15px">
                                    
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           
        </div> --}}
        {{--<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 align-self-stretch d-flex" style="margin-top: 5px;margin-bottom:17px !important;">
            <div class="nav-tabs-custom align-self-stretch w-100">
                <div class="header row" style="margin: 5px;">
                    Comparativo MEC Actual vs MEC Año Anterior
                </div>
                <x-tabla id="comp" style="margin-top:5%">
               
                </x-tabla>
            </div>
        </div>--}}

        {{-- Todas las cartas que se generarán, son las tengan descripcion en la tabla vistas_por_cliente --}}
        <div id="empresa_logo" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 align-self-stretch d-flex" style="margin-top: 5px;margin-bottom:17px !important;">
            <div class="nav-tabs-custom align-self-stretch w-100">
                <div class="d-flex justify-content-center">
                    <img src="../images/logo_{{$cliente}}.png" class="img-fluid" alt="{{$cliente}} Logo" style="width:40%;">
                </div>

                
                <div id="tbl_menu" class="col-md-12" style="padding-left:60px; padding-right:60px; margin-bottom:20px;">
                    <div class="row">
                    @foreach($vistas_por_cliente as $vista)
                        <div class="card bg-light mb-3 col-xs-3 col-sm-3 col-md-3 col-lg-3">
                            <a  href="/reporte/{{$vista->codigo}}">
                                <div class="card-header"><h5><span>{{$vista->titulo_dashboard}}</span></h5></div>
                                <div class="card-body summary-second-level" style="text-align:left;">
                                    {{$vista->descripcion_dashboard}}
                                    <p class="card-text"></p>
                                </div>
                            </a>
                        </div>
                    @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    
    <!-- END Page Content -->
@endsection
@section('js_after')
    <script src="{{asset("js/custom/utilidades.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\vendor\bootstrap-datepicker.min.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/dataTables.fixedColumns.min.js')}}"></script>
    <script src="{{asset('js/dataTables.fixedHeader.min.js')}}"></script>
    
    <script>
        let ventas = "Ventas ($)"; 
        let unidades = "Unidades (U)";
        let costo = "Costo ($)";
    </script>;
    <script>
        $(".navbar-dashboard").css("border-style","solid");
        $(".navbar-dashboard").css("border-left","0px");
        $(".navbar-dashboard").css("border-color","#57775F");
        $(".navbar-dashboard").css("background-color","#57775F");

        /*let filtros = ['clientes', 'categorias'];
        for(let filtro of filtros) {
                multiSelect(filtro, "dash_vista", "{{__('messages.seleccionar')}}");
        }*/
        
        $(document).ready(function(){
         
            var length = 0;
            //getCompDashboard('colgate', 'ventas');
          
            //getAvanceMensual(cliente);
            // getGrafZoom2();

        });
    </script>
@endsection