@extends('author.dashboard')

@section('title', 'Home')

@section('stylesheets')
  <link rel="stylesheet" href="/css/admin/dist/dataTables.bootstrap.css">
@endsection

@section('content')

<div class="content-header">
   <h1>
    Dashboard
    <small>OPALESCE Version 1.0</small>
    </h1>
    {!! Breadcrumbs::render('authhome') !!}
</div><!--./content-header -->

<div class="row stats boxes">

    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-aqua">
            <div class="inner">
                <h3>{{ $microunits->count() }}</h3>
                <p>Microunits</p>
            </div>
            <div class="icon"><i class="fa ion-play"></i></div>
            <a href="{{route('authpanel.microunits.index')}}" class="small-box-footer">More info 
                <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div><!--.small box -->
    </div><!-- ./col-lg-3 col-xs-6 -->

    <!-- small box suites-->
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-green">
            <div class="inner">
                <h3>{{$suites->count()}}</h3>
                <p>Suites</p>
            </div>
            <div class="icon"><i class="ion ion-ios-albums"></i></div>
            <a href="{{route('authpanel.suites.index')}}" class="small-box-footer">
                More info <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div><!--.small box -->
    </div><!-- ./col-lg-3 col-xs-6-->

    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3>{{count($students)}}</h3>
                <p>Students</p>
            </div>
            <div class="icon"><i class="ion ion-person-stalker"></i></div>
            <a href="{{url('authpanel/profile')}}" class="small-box-footer">
                More info <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div><!--./small box -->
    </div><!-- ./col-lg-3 col-xs-6 -->

    <!-- small box topics-->
    <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-red">
            <div class="inner">
                <h3>{{$categories->count()}}</h3>
                <p>Topics</p>
            </div>
            <div class="icon"><i class="ion ion-ios-pricetag"></i></div>
            <a href="{{route('authpanel.topics.index')}}" class="small-box-footer">
                More info <i class="fa fa-arrow-circle-right"></i>
            </a>
        </div><!--./small box -->
    </div><!-- ./col-lg-3 col-xs-6-->

</div><!--./row stats boxes -->

<div class="row pending">
    
    <div class="col-lg-6">

        <!-- Start Table Latest Microunits -->
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">Latest Microunits (Pending)</h3>
                <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div><!-- /.box-header -->
            <div class="box-body" style="display: block;">
                <div class="table-responsive">
                    <table class="table no-margin">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Topic</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach ($pendingmu as $microunit)
                            <tr>
                                <td>{{$microunit->id}}</td>
                                <td>{{$microunit->title}}</td>
                                <td>
                                    <a href="{{route('authpanel.topics.show', $microunit->category->id)}}"
                                        class="btn btn-sm btn-block cat-btn"
                                        style="background-color:{{$microunit->category->color}};"
                                        data-toggle="tooltip" data-placement="top" title="View Topic">
                                    {{$microunit->category->name}}
                                    </a>
                                </td>
                                <td>
                                    <span class="btn btn-sm btn-primary">{{ ($microunit->approved == 0) ? 'pending' : $microunit->approved }}</span>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div><!-- /.table-responsive -->
            </div><!-- /.box-body -->
            <div class="box-footer clearfix" style="display: block;">
                <a href="{{route('authpanel.microunits.create')}}" class="btn btn-sm btn-info btn-flat pull-left">Add Microunit</a>
                <a href="{{route('authpanel.microunits.index')}}" class="btn btn-sm btn-default btn-flat pull-right">View All</a>
            </div><!-- ./box-footer -->
        </div><!-- ./box-info Pending Microunits-->        


    </div><!-- ./col-lg-6 pending microunits-->

    <div class="col-lg-6">
        <!-- Start Table Latest Microunits -->
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">Latest Suites (Pending)</h3>
                <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div><!-- /.box-header -->
            <div class="box-body" style="display: block;">
                <div class="table-responsive">
                    <table class="table no-margin">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Title</th>
                                <th>Topic</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach ($pendingsu as $suite)
                            <tr>
                                <td>{{$suite->id}}</td>
                                <td>{{$suite->title}}</td>
                                <td>
                                    <a href="{{route('authpanel.topics.show', $suite->category->id)}}"
                                        class="btn btn-sm btn-block cat-btn"
                                        style="background-color:{{$suite->category->color}};"
                                        data-toggle="tooltip" data-placement="top" title="View Topic">
                                    {{$suite->category->name}}
                                    </a>
                                </td>
                                <td>
                                    <span class="btn btn-sm btn-primary">{{ ($suite->approved == 0) ? 'pending' : $suite->approved }}</span>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div><!-- /.table-responsive -->
            </div><!-- /.box-body -->
            <div class="box-footer clearfix" style="display: block;">
                <a href="{{route('authpanel.suites.create')}}" class="btn btn-sm btn-info btn-flat pull-left">Add Suite</a>
                <a href="{{route('authpanel.suites.index')}}" class="btn btn-sm btn-default btn-flat pull-right">View All</a>
            </div><!-- ./box-footer -->
        </div><!-- ./box-info Pending Microunits-->    
    
    </div><!-- ./col-lg-6 pending suites-->

</div><!-- ./row pending -->

<div class="row students">

    <div class="col-lg-12">

        <div class="box box-danger students">
            <div class="box-header with-border">
                <h3 class="box-title">Students per Microunit</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
                        <i class="fa fa-minus"></i>
                    </button>
                </div>
            </div><!-- /.box-header -->
            <div class="box-body" style="display: block;">
                <table id="microunits-table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Topic</th>
                            <th>Views</th>
                            <th>Rating</th>
                            <th>Total Students</th>
                            <th>View</th>
                        </tr>
                    </thead>
                    <tbody>
                    @foreach ($totalstudents->microunits as $microunit)
                        <tr>
                            <td>{{$microunit->id}}</td>
                            <td>{{$microunit->title}}</td>
                            <td>
                                <a href="{{route('authpanel.topics.show', $microunit->category->id)}}"
                                    class="btn btn-sm cat-btn btn-block"
                                    style="background-color:{{$microunit->category->color}};"
                                    data-toggle="tooltip" data-placement="top" title="View Topic">
                                {{$microunit->category->name}}
                                </a>
                            </td>
                            <td><span class="btn btn-block btn-warning btn-sm">{{$microunit->viewcounter}}</span></td>
                            <td>
                                @if ($microunit->microunitsRates->count())
                                    @foreach ($microunit->microunitsRates as $rate)
                                        <span class="btn btn-block btn-success btn-sm">{{ $rate->rating }}</span>
                                    @endforeach
                                @else
                                    <span class="stars btn btn-block btn-success btn-sm">0</span>
                                @endif
                            </td>
                            <td>
                                <span class="btn btn-sm btn-primary btn-block" data-toggle="tooltip" data-placement="top" title="Total Students">{{ $microunit->users->count() }}</span>
                            </td>
                            <td>
                                <a href="{{route('authpanel.microunits.show', $microunit->id)}}" class="btn btn-sm btn-info" data-toggle="tooltip" data-placement="top" title="View Microunit">
                                    <span class="glyphicon glyphicon-eye-open"></span>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div><!-- /.box-body -->
        </div><!-- /.box students per microunit-->        
    
    </div><!-- ./col-lg-6 students per microunit-->

</div><!-- ./row students -->

@endsection

@section('javascripts')
  <script src="/js/admin/dist/jquery.dataTables.min.js"></script>
  <script src="/js/admin/dist/dataTables.bootstrap.min.js"></script>
  <script type="text/javascript">
  $(function () {
    $("#microunits-table").DataTable({
        "order": [[ 5, "desc" ]]
    });

  });
  </script>
@endsection