@extends('adminlte::page')

@section('title', 'Inicio')

{{-- @section('content_header')
    <h1>Resumen</h1>
@stop --}}

@section('content')
    <section class="content p-2">
        <div class="container-fluid">

            <div class="row">
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box mb-3">
                        <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Socios Activos</span>
                            <span class="info-box-number">{{ $socio }}</span>
                        </div>

                    </div>

                </div>

                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box mb-3">
                        <span class="info-box-icon bg-danger elevation-1"><i class="fa fa-ban"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Socios Suspendidos</span>
                            <span class="info-box-number">{{ $suspendidos }}</span>
                        </div>

                    </div>

                </div>

                <div class="clearfix hidden-md-up"></div>
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box mb-3">
                        <span class="info-box-icon bg-success elevation-1"><i class="fa fa-car"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Vehículos</span>
                            <span class="info-box-number">{{ $vehiculos }}</span>
                        </div>

                    </div>

                </div>
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="info-box">
                        <span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Rubros Ingresados</span>
                            <span class="info-box-number">{{ $rubros }}</span>
                        </div>

                    </div>

                </div>


            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">


                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-8">
                                    <p class="text-center">
                                        <strong>Resumen</strong>
                                    </p>
                                    <div class="chart">

                                        {{-- <canvas id="salesChart" height="180" style="height: 180px;"></canvas> --}}
                                        
                                        <canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                        
                                    </div>

                                </div>

                                <div class="col-md-4">
                                   
                                    <div class="progress-group">
                                        Rubros Ingresados
                                        <span class="float-right"><b>{{$rubros}}</b></span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-primary" style="width: 80%"></div>
                                        </div>
                                    </div>

                                    <div class="progress-group">
                                       Socios Suspendidos
                                        <span class="float-right"><b>{{$suspendidos}}</b></span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-danger" style="width: 75%"></div>
                                        </div>
                                    </div>

                                    <div class="progress-group">
                                        <span class="progress-text">Vehículos</span>
                                        <span class="float-right"><b>{{$vehiculos}}</b></span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-success" style="width: 60%"></div>
                                        </div>
                                    </div>

                                    <div class="progress-group">
                                        Socios
                                        <span class="float-right"><b>{{$socio}}</b></span>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-warning" style="width: 50%"></div>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

                        <!--<div class="card-footer">-->
                        <!--    <div class="row">-->
                        <!--        <div class="col-sm-3 col-6">-->
                        <!--            <div class="description-block border-right">-->
                        <!--                <span class="description-percentage text-success"><i class="fas fa-caret-up"></i>-->
                        <!--                    17%</span>-->
                        <!--                <h5 class="description-header">$35,210.43</h5>-->
                        <!--                <span class="description-text">TOTAL REVENUE</span>-->
                        <!--            </div>-->

                        <!--        </div>-->

                        <!--        <div class="col-sm-3 col-6">-->
                        <!--            <div class="description-block border-right">-->
                        <!--                <span class="description-percentage text-warning"><i class="fas fa-caret-left"></i>-->
                        <!--                    0%</span>-->
                        <!--                <h5 class="description-header">$10,390.90</h5>-->
                        <!--                <span class="description-text">TOTAL COST</span>-->
                        <!--            </div>-->

                        <!--        </div>-->

                        <!--        <div class="col-sm-3 col-6">-->
                        <!--            <div class="description-block border-right">-->
                        <!--                <span class="description-percentage text-success"><i class="fas fa-caret-up"></i>-->
                        <!--                    20%</span>-->
                        <!--                <h5 class="description-header">$24,813.53</h5>-->
                        <!--                <span class="description-text">TOTAL PROFIT</span>-->
                        <!--            </div>-->

                        <!--        </div>-->

                        <!--        <div class="col-sm-3 col-6">-->
                        <!--            <div class="description-block">-->
                        <!--                <span class="description-percentage text-danger"><i class="fas fa-caret-down"></i>-->
                        <!--                    18%</span>-->
                        <!--                <h5 class="description-header">1200</h5>-->
                        <!--                <span class="description-text">GOAL COMPLETIONS</span>-->
                        <!--            </div>-->

                        <!--        </div>-->
                        <!--    </div>-->

                        <!--</div>-->

                    </div>

                </div>

            </div> 


        </div>
    </section>
@stop




@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/overlayScrollbars/css/OverlayScrollbars.min.css') }}">
@stop

@section('js')
    <script src="{{ asset('vendor/chart/Chart.min.js') }}"></script>


    <script src="{{ asset('vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>

    <script src="{{ asset('vendor/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}"></script>
    {{-- <script src="{{ asset('vendor/js/adminlte.js?v=3.2.0') }}"></script> --}}
    <script src="{{ asset('vendor/jquery-mousewheel/jquery.mousewheel.js') }}"></script>
    <script src="{{ asset('vendor/raphael/raphael.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery-mapael/jquery.mapael.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery-mapael/maps/usa_states.min.js') }}"></script>
    <script>
        //-------------
    //- DONUT CHART -
    //-------------
    // Get context with jQuery - using jQuery's .get() method.
    var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
    var donutData        = {
      labels: [
          'Rubros Ingresados',
          'Socios Suspendidos',
          'Vehículos',
          'Socios',
      ],
      datasets: [
        {
          data: [{{$rubros}},{{$suspendidos}},{{$vehiculos}},{{$socio}}],
          backgroundColor : ['#00c0ef','#f56954','#00a65a','#f39c12'],
        }
      ]
    }
    var donutOptions     = {
      maintainAspectRatio : false,
      responsive : true,
    }
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    new Chart(donutChartCanvas, {
      type: 'doughnut',
      data: donutData,
      options: donutOptions
    })
    </script>
@stop