@extends('layouts.masterLayout.app')
@section('content')
<div class="content-wrapper" style="background-color: white">
    <section class="content">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h5>Dashboard</h5>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                        <div class="col-lg-2 col-6">
                                             <!-- small box -->
                                            <div class="small-box bg-info" style="background-color: #17a2b8!important; color:white">
                                                <div class="inner">
                                                    <h3></h3>
                                                    <p>Players ({{$total_player}})</p>
                                                </div>
                                                {{--  <div class="icon">
                                                <i class="ion ion-stats-bars"></i>
                                                </div>  --}}
                                                {{--  <a href="#" class="small-box-footer">Today Pending () </a>  --}}
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-6">
                                            <!-- small box -->
                                            <div class="small-box bg-danger" style="background-color: #17a2b8!important;color:white">
                                            <div class="inner">
                                                <h3></h3>
                                                <p>Unions ({{$total_unions}})</p>
                                            </div>
                                            {{--  <div class="icon">
                                                <i class="ion ion-pie-graph"></i>
                                            </div>  --}}
                                            {{--  <a href="#" class="small-box-footer">Today Pending () </a>  --}}

                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-6">
                                            <!-- small box -->
                                            <div class="small-box" style="background-color: #28a745!important;color:white">
                                            <div class="inner">
                                                <h3></h3>
                                                <p>Trainers ({{$total_trainer}})</p>
                                            </div>
                                            {{--  <div class="icon">
                                                <i class="ion ion-pie-graph"></i>
                                            </div>  --}}
                                            {{--  <a href="#" class="small-box-footer">Today Pending () </a>  --}}
                                            </div>
                                        </div>
                                      <div class="col-lg-2 col-6">
                                        <!-- small box -->
                                        <div class="small-box " style="background-color: #ffc107!important;color:white">
                                          <div class="inner">
                                            <h3></h3>
                                            <p>Trainers ({{$total_trainer}})</p>
                                          </div>
                                          {{--  <div class="icon">
                                            <i class="ion ion-pie-graph"></i>
                                          </div>  --}}
                                          {{--  <a href="#" class="small-box-footer">Today Pending () </a>  --}}
                                        </div>
                                      </div>
                                      <div class="col-lg-2 col-6">
                                        <!-- small box -->
                                        <div class="small-box" style="background-color: #dc3545!important;color:white">
                                          <div class="inner">
                                            <h3></h3>
                                            <p>Areas ({{$total_trainer}})</p>
                                          </div>

                                          {{--  <a href="#" class="small-box-footer">Today Pending () </a>  --}}
                                        </div>
                                      </div>
                                      <div class="col-lg-2 col-6">
                                        <!-- small box -->
                                        <div class="small-box" style="background-color: #FF5733;color:white">
                                          <div class="inner">
                                            <h3></h3>
                                            <p>ServiceProvider({{$total_trainer}})</p>
                                          </div>
                                          {{--  <a href="#" class="small-box-footer">Today Pending () </a>  --}}
                                        </div>
                                      </div>
                                </div>
                                <div class="row justify-content-center">
                                    <div class="col-md-6">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">Areas Chart</div>
                                                <div class="panel-body">
                                                <h1>{{ $chart1->options['chart_title'] }}</h1>
                                                {!! $chart1->renderHtml() !!}
                                                </div>
                                            <div class="panel-footer">Panel Footer</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">User Chart</div>
                                                <div class="panel-body">
                                                {{--  <h1>{{ $chart2->options['chart_title'] }}</h1>  --}}
                                                {!! $chart2->renderHtml() !!}
                                                </div>
                                            <div class="panel-footer">Panel Footer</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">Players</div>
                                                <div class="panel-body">
                                                  <h1>{{ $chart3->options['chart_title'] }}</h1>
                                                {!! $chart3->renderHtml() !!}
                                                </div>
                                            <div class="panel-footer">Panel Footer</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">Recent Users</div>
                                                <div class="panel-body">
                                                  <table class="table table-stripted">
                                                      <thead>
                                                          <tr>
                                                              <th>Name</th>
                                                              <th>Role</th>
                                                              <th>Creation date</th>
                                                          </tr>
                                                      </thead>
                                                      <tbody>
                                                          @foreach ($users as $user)
                                                          <tr>
                                                          <td>{{$user->name}}</td>
                                                          <td>{{$user->role}}</td>
                                                          <td>{{$user->created_at}}</td>
                                                          </tr>
                                                          @endforeach
                                                      </tbody>
                                                  </table>
                                                </div>
                                            <div class="panel-footer">Panel Footer</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
    </section>
</div>
{!! $chart1->renderChartJsLibrary() !!}
{!! $chart1->renderJs() !!}
{!! $chart2->renderChartJsLibrary() !!}
{!! $chart2->renderJs() !!}
{!! $chart3->renderChartJsLibrary() !!}
{!! $chart3->renderJs() !!}
@endsection
@section('javascript')

@endsection