@extends('layouts.admin')
@section('content')









<div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    Activity Overview
                </div>

                <div class="card-body">
                    @if(session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    <div class="row">
                        {{-- Number Block - App Users --}}
                        @include('partials.activityDashboard.value', [
                            'data' => $numAppUsersSettings,
                            'icon' => 'fa fa-rocket'
                        ])

                        {{-- Number Block - Pending App Users --}}
                        @include('partials.activityDashboard.value', [
                            'data' => $numPendingAppUsersSettings,
                            'icon' => 'fa fa-exclamation-circle'
                        ])

                        {{-- Number Block - Most Activities Finished --}}
                        @include('partials.activityDashboard.value', [
                            'data' => $numMostFinishedActivitiesSettings,
                            'icon' => 'fa fa-trophy'
                        ])

                        {{-- Number Block - Total Activities Finished --}}
                        @include('partials.activityDashboard.value', [
                            'data' => $totalActivities,
                            'icon' => 'fa fa-check-square'
                        ])

                    </div>
                    <div class="row">

                        <div class="{{ $appUserAcqChart->options['column_class'] }}">
                            <h3>{!! $appUserAcqChart->options['chart_title'] !!}</h3>
                            {!! $appUserAcqChart->renderHtml() !!}
                        </div>

                        <div class="{{ $osBreakdownChart->options['column_class'] }}">
                            <h3>{!! $osBreakdownChart->options['chart_title'] !!}</h3>
                            {!! $osBreakdownChart->renderHtml() !!}
                        </div>

                        <div class="col-md-12">
                            <h3>Distribution of Number of Words Completed by Users</h3>
                            {!! $userBreakdownChart->container() !!}
                        </div>

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












<div class="card">
    <div class="card-header">
        {{ trans('cruds.appUserProgress.title_singular') }} {{ trans('global.list') }}
    </div>

    <div class="card-body">
        <table class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-AppUserProgress">
            <thead>
                <tr>
                    <th width="10">

                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.id') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.user') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.source') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.total_activities') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.finished_activities') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.categories_started') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.categories_finished') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.words_started') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.words_finished') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.app_starts') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.app_wakes') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.network_errors') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.updates_installed') }}
                    </th>
                    <th>
                        {{ trans('cruds.appUserProgress.fields.data_resets') }}
                    </th>
                    <th>
                        &nbsp;
                    </th>
                </tr>
            </thead>
        </table>
    </div>
</div>


@endsection
@section('scripts')
@parent
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
{!! $osBreakdownChart->renderJs() !!}
{!! $appUserAcqChart->renderJs() !!}
<script src="{{ $userBreakdownChart->cdn() }}"></script>

{{ $userBreakdownChart->script() }}
<script>
    $(function () {
  let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
  
  let dtOverrideGlobals = {
    buttons: dtButtons,
    processing: true,
    serverSide: true,
    retrieve: true,
    aaSorting: [],
    ajax: "{{ route('admin.app-user-progress.index') }}",
    columns: [
      { data: 'placeholder', name: 'placeholder' },
{ data: 'id', name: 'id' },
{ data: 'user_guid', name: 'user.guid' },
{ data: 'source', name: 'source' },
{ data: 'total_activities', name: 'total_activities' },
{ data: 'finished_activities', name: 'finished_activities' },
{ data: 'categories_started', name: 'categories_started' },
{ data: 'categories_finished', name: 'categories_finished' },
{ data: 'words_started', name: 'words_started' },
{ data: 'words_finished', name: 'words_finished' },
{ data: 'app_starts', name: 'app_starts' },
{ data: 'app_wakes', name: 'app_wakes' },
{ data: 'network_errors', name: 'network_errors' },
{ data: 'updates_installed', name: 'updates_installed' },
{ data: 'data_resets', name: 'data_resets' },
{ data: 'actions', name: '{{ trans('global.actions') }}' }
    ],
    orderCellsTop: true,
    order: [[ 1, 'desc' ]],
    pageLength: 100,
  };
  let table = $('.datatable-AppUserProgress').DataTable(dtOverrideGlobals);
  $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e){
      $($.fn.dataTable.tables(true)).DataTable()
          .columns.adjust();
  });
  
});

</script>
@endsection