@extends('admin.dashboard')

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

@section('title', "View Profile: $author->name.' '.$author->lastname")

@section('content')

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

<div class="row">

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

    <div class="box box-primary"><!-- Profile Image -->
      <div class="box-body box-profile">
        <img class="profile-user-img img-responsive img-circle" src="{{$author->image}}" alt="User profile picture">
        <h3 class="profile-username text-center">{{$author->name}} {{$author->lastname}}</h3>
        <p class="text-muted text-center">{{$author->profession}}</p>
        <ul class="list-group list-group-unbordered">
          <li class="list-group-item">
            <b>Total Microunits</b> <a class="pull-right">{{$author->microunits->count()}}</a>
          </li>
          <li class="list-group-item">
            <b>Total Suites</b> <a class="pull-right">{{$author->suites->count()}}</a>
          </li>
        </ul>
      </div><!-- /.box-body -->
    </div><!-- /.box -->

    <div class="box box-primary"><!-- About Me Box -->
      <div class="box-header with-border">
        <h3 class="box-title">About Me</h3>
      </div><!-- /.box-header -->
      <div class="box-body">
        <strong><i class="fa fa-language margin-r-5"></i> Language</strong>
        <p class="text-muted">{{$author->language->language}}</p>
        <hr>
        <strong><i class="fa fa-book margin-r-5"></i> Profession</strong>
        <p class="text-muted">{{$author->profession}}</p>
        <hr>
        <strong><i class="fa fa-envelope margin-r-5"></i> Email</strong>
        <p class="text-muted">{{$author->email}}</p>
        <hr>
        <strong><i class="fa fa-file-text-o margin-r-5"></i> Description</strong>
        <p>{{$author->description}}</p>
      </div><!-- /.box-body -->
    </div><!-- /.box -->

  </div><!-- /.col-lg-3 -->

  <div class="col-lg-9">
    <div class="col-lg-12">
      <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#microunits" data-toggle="tab">Microunits</a></li>
          <li><a href="#suites" data-toggle="tab">Suites</a></li>
          <li><a href="#settings" data-toggle="tab">Settings</a></li>
        </ul>
        <div class="tab-content">
          @include('admin.users.tabs.microunits')
          @include('admin.users.tabs.suite')
          @include('admin.users.tabs.setting')
        </div><!-- /.tab-content -->
      </div><!-- /.nav-tabs-custom -->
    </div><!-- /.col-lg-12 -->
  </div><!-- /.col-lg-9 -->

</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 src="/js/admin/dist/bootvalidation.js"></script>
  <script type="text/javascript">
  $(function () {
    $("#microunits-table").DataTable({
        "order": [[ 1, "desc" ]]
    });

    $("#suites-table").DataTable({
        "order": [[ 2, "desc" ]]
    });

  });
  </script>
@endsection