@extends('layouts.master-layouts')
@section('title')
@lang('Estadísticas')
@endsection

@section('content')
@component('common-components.breadcrumb')
    @slot('pagetitle') DATABUS 21 @endslot
    @slot('title') Estadísticas @endslot
@endcomponent

<!--Aqui va el contenido-->
<div class="row mb-4">
    <div class="col-md-12 mb-4">
        <div class="row col-md-12" style="margin-inline: auto">
            <div class="col-md-3">
                <div class="card border border-primary">
                    <div class="card-header bg-transparent border-primary">
                        <div class="float-right mt-2">
                            <div id="total-revenue-chart"></div>
                        </div>
                        <div>
                            <h4 class="mb-1 mt-1"><span data-plugin="counterup" style="color: blue">{{ $total }}</span></h4>
                            <p class="text-muted mb-0">Total</p>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card border border-secondary">
                    <div class="card-header bg-transparent border-secondary">
                        <div class="float-right mt-2">
                            <div id="orders-chart"> </div>
                        </div>
                        <div>
                            <h4 class="mb-1 mt-1"><span data-plugin="counterup">{{$productos}} </span></h4>
                            <p class="text-muted mb-0">Productos</p>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card border border-success">
                    <div class="card-header bg-transparent border-success">
                        <div class="float-right mt-2">
                            <div id="customers-chart"> </div>
                        </div>
                        <div>
                            <h4 class="mb-1 mt-1"><span data-plugin="counterup" style="color: green">{{ $cantidad_ventas }}</span></h4>
                            <p class="text-muted mb-0">Ventas</p>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="card border border-warning">
                    <div class="card-header bg-transparent border-warning">
                        <div class="float-right mt-2">
                            <div id="growth-chart"></div>
                        </div>
                        <div>
                            <h4 class="mb-1 mt-1"><span data-plugin="counterup" style="color: #F39C12">{{ $clientes }}</span></h4>
                            <p class="text-muted mb-0">Clientes</p>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-md-2" >
                <div class="card border border-danger">
                    <div class="card-header bg-transparent border-danger">
                        <div class="float-right mt-2">
                            <div id="growth-chart"></div>
                        </div>
                        <div>
                            <h4 class="mb-1 mt-1"><span data-plugin="counterup" style="color: red">{{ $compras }}</span></h4>
                            <p class="text-muted mb-0">compras</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class=" text-left">


    <div class="row">
        <div class="col-lg-6 ">
            {{-- {!! Form::open(array('action'=>'EstadisticasController@index',  'class'=>'form-horizontal','role'=>'form')) !!}
            <div class="row">

                {!! Form::label('Ruta: ', null ,array('class'=>'ul-form__label ul-form--margin col-lg-2 col-form-label')) !!}
                <div class="col-lg-4">
                    {!! Form::select('ruta_id', $rutasSelect, $s_ruta, array('id' => 'tipo_licencia', 'class' => 'm-2 form-control','onchange'=>'this.form.submit();')) !!}
                </div>
                <div class="col-lg-2 red" >
                    <a href="{{ url('estadisticas/reporte') }}" class="btn btn-success m-2" > Reporte</a>
                </div>
            </div>
    {!! Form::close() !!} --}}
        </div>



    </div>

                <div class="row">

                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                            <h4 class="card-title mb-4">Categorias más vendidas</h4>

                            <div id="bar_chart" class="apex-charts" dir="ltr"></div>
                        </div>
                    </div>


                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Productos más vendidas</h4>

                                <div id="bar_chart" class="apex-charts" dir="ltr"></div>
                            </div>
                        </div>


                    </div>
                </div>



                 {{-- <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Top 5 Unidades con más reportes.</h4>
                                <div class="row">

                                    <div class="col-md-6">
                                        <div id="donut_unidades" class="apex-charts"  dir="ltr"></div>
                                    </div>

                                    <div class="col-md-6">
                                            <table class="table table-bordered">
                                                <thead>
                                                     <tr>
                                                        <th scope="col">Unidad</th>
                                                        <th scope="col">Cantidad</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                      @foreach ($unidades as $unidad )

                                                        <tr>
                                                            <td>{{ $unidad->unidad->numero_economico }}</td>
                                                            <td>{{ $unidad->cantidad }}</td>
                                                        </tr>
                                                        @endforeach
                                                        @if($unidadesSReporte > 0)
                                                        <td>Sin Unidad</td>
                                                        <td>{{ $unidadesSReporte }}</td>
                                                        @endif
                                                </tbody>
                                            </table>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div> --}}


            <div class="row">


                    {{-- <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Top 5 Rutas con más reportes.</h4>
                                <div class="row">

                                    <div class="col-md-6">
                                        <div id="donut_rutas" class="apex-charts"  dir="ltr"></div>
                                    </div>

                                    <div class="col-md-6">
                                            <table class="table table-bordered">
                                                <thead>
                                                     <tr>
                                                        <th scope="col">Ruta</th>
                                                        <th scope="col">Cantidad</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                      @foreach ($rutas as $ruta )

                                                        <tr>
                                                            <td>{{ $ruta->ruta->nombre }}</td>
                                                            <td>{{ $ruta->cantidad }}</td>
                                                        </tr>
                                                        @endforeach
                                                        @if($rutasSReporte > 0)
                                                            <td>Sin Ruta</td>
                                                            <td>{{ $rutasSReporte }}</td>
                                                        @endif
                                                </tbody>
                                            </table>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div> --}}

                    {{-- <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title mb-4">Top 5 Operadores con más reportes.</h4>
                                <div class="row">

                                    <div class="col-md-6">
                                        <div id="donut_chart" class="apex-charts"  dir="ltr"></div>
                                    </div>

                                    <div class="col-md-6">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Operador</th>
                                                        <th scope="col">Cantidad</th>
                                                    </tr>
                                                </thead>

                                                <tbody>
                                                    @foreach ($operadores as $operador )

                                                    <tr>
                                                        <td>{{ $operador->operador->nombre }}</td>
                                                        <td>{{ $operador->cantidad }}</td>
                                                    </tr>
                                                    @endforeach
                                                    @if($operadoresSReporte > 0)
                                                        <td>Sin Operador</td>
                                                        <td>{{ $operadoresSReporte }}</td>
                                                    @endif

                                                </tbody>
                                            </table>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div> --}}
            </div>




        </div>
    </div>
    <!-- end of col -->
</div>
@endsection

@section('script')

   <script src="{{ URL::asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>


{{-- bar chart --}}
    <script>
        var options = {
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
                show: false,
            }
        },
        plotOptions: {
            bar: {
                horizontal: true,
            }
        },
        dataLabels: {
            enabled: false
        },
        series: [{
            data: [
               10,32,43
            ]
        }],
        colors: ['#34c38f'],
        grid: {
            borderColor: '#f1f1f1',
        },
        xaxis: {
            categories: [
              "comida","bebidas","snack"
        ],
        }
    }

        var chart = new ApexCharts(
            document.querySelector("#bar_chart"),
            options
        );

        chart.render();


</script>
@endsection
