@extends('admin.layout')

@section('content')
<!-- Page Heading -->
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">
            Dashboard <small>przegląd statystyk</small>
        </h1>
    </div>
</div>
<!-- /.row -->


<div class="row">
    <div class="col-lg-4 col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-tasks fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">{{ $calculationCountToday }}</div>
                        <div>Kalkulacje dziś</div>
                    </div>
                </div>
            </div>
            <a href="{!! route('admin::calculations') !!}">
                <div class="panel-footer">
                    <span class="pull-left">Zobacz wszystkie</span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
    <div class="col-lg-4 col-md-4">
        <div class="panel panel-green">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-comments fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">{{ $messagesCountToday }}</div>
                        <div>Wiadomości dziś</div>
                    </div>
                </div>
            </div>
            <a href="{!! route('admin::contactmessages') !!}">
                <div class="panel-footer">
                    <span class="pull-left">Zobacz wszystkie</span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
    <div class="col-lg-4 col-md-4">
        <div class="panel panel-yellow">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-xs-3">
                        <i class="fa fa-shopping-cart fa-5x"></i>
                    </div>
                    <div class="col-xs-9 text-right">
                        <div class="huge">{{ $ordersCountToday }}</div>
                        <div>Zamówienia dziś</div>
                    </div>
                </div>
            </div>
            <a href="{!! route('admin::orders') !!}">
                <div class="panel-footer">
                    <span class="pull-left">Zobacz wszystkie</span>
                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                    <div class="clearfix"></div>
                </div>
            </a>
        </div>
    </div>
</div>
<!-- /.row -->

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i> Statystyki z ostatnich 30 dni</h3>
            </div>
            <div class="panel-body">
                <div id="morris-area-chart"></div>
            </div>
        </div>
    </div>
</div>
<!-- /.row -->



@endsection

@section('extra_scripts')
    <script>
        $(function() {
            // Area Chart
            Morris.Area({
                element: 'morris-area-chart',
                behaveLikeLine: true,
                data: {!! $calcStats !!},
                xkey: 'period',
                ykeys: ['calcNum', 'contactNum', 'orderNum'],
                labels: ['Liczba kalkulacji', 'Liczba wiadomości', 'Liczba zamówień'],
                pointSize: 2,
                hideHover: 'auto',
                resize: true,
                lineColors:['#337AB7','#5CB85C','#F0AD4E']
            });
        });
    </script>
@endsection