@extends('admin.dashboard')

@section('title', 'Authors')
@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('authors') !!}
</div>

<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">Data Table with Authors: <span class="label bg-orange">{{$authors->count()}}</span></h3>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <table id="authors-table" class="table table-bordered table-striped">
          <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Language</th>
            <th>Profession</th>
            <th>Email</th>
            <th>Registered On</th>
            <th>Total MUs</th>
            <th>Total Suites</th>
            <th>View Profile</th>
          </tr>
          </thead>
          <tbody>
          @foreach ($authors as $author)
            <tr>
              <td>{{$author->id}}</td>
              <td>{{$author->name}}</td>
              <td>{{$author->language->language}}</td>
              <td>{{$author->profession}}</td>
              <td><a href="mailto:{{$author->email}}">{{$author->email}}</a></td>
              <td>{{ date('j M. Y', strtotime($author->created_at)) }}</td>
              <td><span class="btn btn-default btn-block bg-red">{{$author->microunits->count()}}</span></td>
              <td><span class="btn btn-default btn-block bg-blue">{{$author->suites->count()}}</span></td>
              <td>
                <a href="{{route('admin.authors.show', $author->id)}}" class="btn btn-default btn-block bg-aqua-active">
                  <span class="glyphicon glyphicon-eye-open"></span>
                </a>
              </td>
            </tr>
          @endforeach
          </tbody>
          <tfoot>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Language</th>
            <th>Profession</th>
            <th>Email</th>
            <th>Registered On</th>
            <th>Total MUs</th>
            <th>Total Suites</th>
            <th>View Profile</th>
          </tr>
          </tfoot>
        </table>
      </div><!-- /.box-body -->
    </div><!-- /.box -->
  </div><!--.col-xl-12 -->
</div><!--.row -->
@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 () {
    $("#authors-table").DataTable({
        "order": [[ 5, "desc" ]]
    });

  });
  </script>
@endsection