@extends('admin._layout.layout')

@section('header')
    {{ trans('admin.head.dashboard') }}
@endsection

@section('main')
    <div class="row">

        <!-- Stats -->

        <div class="col-md-3">
            <div class="box bg-info darken">
                <div class="box-cell p-x-3 p-y-1">
                    <div class="font-weight-semibold font-size-12">{{ trans('admin.dashboard.users') }}</div>
                    <div class="font-weight-bold font-size-20">{{ $total_users }}</div>
                    <i class="box-bg-icon middle right font-size-52 ion-ios-people"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="box bg-danger darken">
                <div class="box-cell p-x-3 p-y-1">
                    <div class="font-weight-semibold font-size-12">{{ trans('admin.dashboard.capsules') }}</div>
                    <div class="font-weight-bold font-size-20">{{ $total_capsules }}</div>
                    <i class="box-bg-icon middle right font-size-52 ion-bookmark"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="box bg-warning darken">
                <div class="box-cell p-x-3 p-y-1">
                    <div class="font-weight-semibold font-size-12">{{ trans('admin.dashboard.comments') }}</div>
                    <div class="font-weight-bold font-size-20">{{ $total_comments }}</div>
                    <i class="box-bg-icon middle right font-size-52 ion-chatbubbles"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="box bg-success darken">
                <div class="box-cell p-x-3 p-y-1">
                    <div class="font-weight-semibold font-size-12">{{ trans('admin.dashboard.invites') }}</div>
                    <div class="font-weight-bold font-size-20">{{ $total_invites }}</div>
                    <i class="box-bg-icon middle right font-size-52 ion-email-unread"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="box bg-white darken">
                <div class="box-cell p-x-3 p-y-1">
                    <div class="font-weight-semibold font-size-12">{{ 'Capsules per user with capsule' }}</div>
                    <div class="font-weight-bold font-size-20">{{ $total_capsule_per_user }}</div>
                    <i class="box-bg-icon middle right font-size-52 ion-android-star-outline"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="box bg-white darken">
                <div class="box-cell p-x-3 p-y-1">
                    <div class="font-weight-semibold font-size-12">Users without capsules</div>
                    <div class="font-weight-bold font-size-20">{{ $total_users_without_capsules }}</div>
                    <i class="box-bg-icon middle right font-size-52 ion-android-star-outline"></i>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="box bg-white darken">
                <div class="box-cell p-x-3 p-y-1">
                    <div class="font-weight-semibold font-size-12">{{ trans('admin.dashboard.capsules_per_user') }}</div>
                    <div class="font-weight-bold font-size-20">{{ $total_capsules_users }}</div>
                    <i class="box-bg-icon middle right font-size-52 ion-android-star-outline"></i>
                </div>
            </div>
        </div>

        <!-- / Stats -->

    </div>

    <div class="row">
        <div class="col-md-6">

            <!-- Trending categories -->

            <div class="panel">
                <div class="panel-heading">
                    <div class="panel-title">{{ trans('admin.dashboard.per_month') }}</div>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped valign-middle">
                        <thead>
                        <tr><th>{{ trans('admin.dashboard.date') }}</th>
                            <th class="text-xs-right">{{ trans('admin.dashboard.users') }}</th>
                            <th class="text-xs-right">{{ trans('admin.dashboard.capsules') }}</th>
                        </tr></thead>
                        <tbody>
                        @foreach ($total_per_month as $month)
                        <tr>
                            <td>{{ $month['date'] }}</td>
                            <td class="text-xs-right">{{ $month['users'] }}</td>
                            <td class="text-xs-right">{{ $month['capsules'] }}</td>
                        </tr>
                        @endforeach
                        </tbody></table>
                </div>
            </div>

            <!-- Trending categories -->

        </div>

        <div class="col-md-6">

            <!-- Trending categories -->

            <div class="panel">
                <div class="panel-heading">
                    <div class="panel-title">{{ trans('admin.dashboard.per_week') }}</div>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped valign-middle">
                        <thead>
                        <tr><th>{{ trans('admin.dashboard.date') }}</th>
                            <th class="text-xs-right">{{ trans('admin.dashboard.users') }}</th>
                            <th class="text-xs-right">{{ trans('admin.dashboard.capsules') }}</th>
                        </tr></thead>
                        <tbody>
                        @foreach ($total_per_week as $week)
                        <tr>
                            <td>{{ $week['date'] }}</td>
                            <td class="text-xs-right">{{ $week['users'] }}</td>
                            <td class="text-xs-right">{{ $week['capsules'] }}</td>
                        </tr>
                        @endforeach
                        </tbody></table>
                </div>
            </div>

            <!-- Trending categories -->

        </div>
    </div>
@endsection

@section('scripts')

@endsection