@extends('adminlte::page')
@section('title', 'Dashboard - ' . config('app.name') )
@section('content_header')

<h1>Dashboard</h1>

@stop
@section('content')
<!-- Main content -->
<section class="content">
    <div class="box">
        <div class="box-body">
            <div class="col-md-4">
                <div class="info-box">
                    <!-- Apply any bg-* class to to the icon to color it -->
                    <span class="info-box-icon bg-orange"><i class="fas fa-boxes"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Total de Pedidos</span>
                        <span class="info-box-number">{{ number_format($order->where('order_status_id', 1)->count()) }}</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <div class="col-md-4">
                <div class="info-box">
                    <!-- Apply any bg-* class to to the icon to color it -->
                    <span class="info-box-icon bg-green"><i class="fas fa-dollar-sign"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Valor em vendas</span>
                        <span class="info-box-number">{{ config('cart.currency_symbol') }} {{ number_format($order->sum('total_paid'), 2, ',', '.') }}</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
            <div class="col-md-4">
                <div class="info-box">
                    <!-- Apply any bg-* class to to the icon to color it -->
                    <span class="info-box-icon bg-blue"><i class="fas fa-hand-holding-usd"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">Tiket M&eacute;dio</span>
                        <span class="info-box-number">{{ config('cart.currency_symbol') }} {{ number_format($order->avg('total_paid'), 2, ',', '.') }}</span>
                    </div>
                    <!-- /.info-box-content -->
                </div>
                <!-- /.info-box -->
            </div>
        </div>
        <div class="box-body">

        </div>
    </div>

</section>
<!-- /.content -->
@endsection
@section('js')
<script>
    (function(w,d,s,g,js,fs){
        g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
        js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
        js.src='https://apis.google.com/js/platform.js';
        fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
    }(window,document,'script'));

    gapi.analytics.ready(function() {

        /**
        * Authorize the user immediately if the user has already granted access.
        * If no access has been created, render an authorize button inside the
        * element with the ID "embed-api-auth-container".
        */
        let id_cliente = '{{ env('GOOGLE_CLIENT_ID') }}'
        console.log(id_cliente)
        gapi.analytics.auth.authorize({
            container: 'embed-api-auth-container',
            clientid: id_cliente
        });


        /**
        * Create a new ViewSelector instance to be rendered inside of an
        * element with the id "view-selector-container".
        */
        var viewSelector = new gapi.analytics.ViewSelector({
            container: 'view-selector-container'
        });

        // Render the view selector to the page.
        viewSelector.execute();


        /**
        * Create a new DataChart instance with the given query parameters
        * and Google chart options. It will be rendered inside an element
        * with the id "chart-container".
        */
        var dataChart = new gapi.analytics.googleCharts.DataChart({
            query: {
                metrics: 'ga:sessions',
                dimensions: 'ga:date',
                'start-date': '30daysAgo',
                'end-date': 'yesterday'
            },
            chart: {
                container: 'chart-container',
                type: 'LINE',
                options: {
                    width: '100%'
                }
            }
        });


        /**
        * Render the dataChart on the page whenever a new view is selected.
        */
        viewSelector.on('change', function(ids) {
            dataChart.set({query: {ids: ids}}).execute();
        });

    });
</script>
@endsection