@extends('author.dashboard')

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

@section('title', "View Topic: $category->name")

@section('content')

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

<div class="row">
  <div class="col-lg-10 col-lg-offset-1">

    <div class="row">
      <div class="col-lg-12">
        <div class="box box-widget"><!-- Box Comment -->
          <div class="box-header with-border">
            <div class="user-block">
              <img class="img-circle" src="{{$category->admin->image}}" alt="User Image">
              <span class="username">{{$category->admin->name}}</span>
              <span class="description">{{ date('j M Y', strtotime($category->created_at)) }}</span>
            </div><!-- /.user-block -->
            <div class="box-tools">
              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
            <div class="row">
              <div class="col-lg-5">
                <img class="img-responsive" src="{{$category->image }}" alt="Photo">
              </div>
              <div class="col-lg-7">
                <div class="col-md-12 col-sm-6 col-xs-12">
                  <div class="info-box bg-red">
                    <span class="info-box-icon"><i class="fa fa-search"></i></span>
                  <div class="info-box-content">
                    <h3 class="info-box-text">Topic:</h3>
                    <h4 class="info-box-number">{{$category->name}}</h4>
                  </div><!-- /.info-box-content -->
                  </div><!-- /.info-box -->
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12">
                  <div class="info-box bg-aqua">
                    <span class="info-box-icon"><i class="fa fa-eye"></i></span>
                  <div class="info-box-content">
                    <h3 class="info-box-text">Views:</h3>
                    <h4 class="info-box-number">{{$category->viewcounter}}</h4>
                  </div><!-- /.info-box-content -->
                  </div><!-- /.info-box -->
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12">
                  <div class="info-box bg-aqua">
                    <span class="info-box-icon"><i class="fa fa-play-circle"></i></span>
                  <div class="info-box-content">
                    <h3 class="info-box-text">Microunits:</h3>
                    <h4 class="info-box-number">{{$category->microunits->count()}}</h4>
                  </div><!-- /.info-box-content -->
                  </div><!-- /.info-box -->
                </div>
                <div class="col-md-4 col-sm-4 col-xs-12">
                  <div class="info-box bg-aqua">
                    <span class="info-box-icon"><i class="fa fa-files-o"></i></span>
                  <div class="info-box-content">
                    <h3 class="info-box-text">Suites:</h3>
                    <h4 class="info-box-number">{{$category->suites->count()}}</h4>
                  </div><!-- /.info-box-content -->
                  </div><!-- /.info-box -->
                </div>
                <div class="col-md-12 col-sm-6 col-xs-12">
                  <div class="info-box bg-red">
                    <span class="info-box-icon"><i class="fa fa-info-circle"></i></span>
                  <div class="info-box-content">
                    <h3 class="info-box-text">Description:</h3>
                    <h4 class="info-box-number">{{$category->description}}</h4>
                  </div><!-- /.info-box-content -->
                  </div><!-- /.info-box -->
                </div>
              </div>
            </div><!-- /.row -->
          </div><!-- /.box-body -->
        </div> <!-- /.box -->
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        @if(!count($results))
        <div class="box box-widget">
          <div class="box-body">
            <div class="row">
              <div class="col-lg-12">
                <div class="callout callout-warning">
                  <h4>
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-info fa-stack-1x mfa-inverse-warning"></i>
                    </span>
                    Info
                  </h4>
                  <p>There is no data in this topic!</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        @else
        <div class="box">
          <div class="box-header">
            <div class="row">
              <div class="col-lg-12">
                <h3 class="box-title">Data Table With Microunits & Suites</h3>
              </div>
            </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="topics-table" class="table table-bordered table-hover table-striped">
              <thead>
              <tr>
                <th style="width:45%;">Title</th>
                <th>Type</th>
                <th>Created At</th>
                <th>Status</th>
                <th>Actions</th>
              </tr>
              </thead>
              <tbody>
              @foreach ($results as $result)
                <tr>
                  <td>
                    {{$result->title}}
                  </td>
                  <td>
                    @if ($result->muid)
                      <span class="btn btn-sm bg-blue">Microunit: {{$result->muid}}</span>
                    @else
                      <span class="btn btn-sm bg-olive">Suite: {{$result->suiteid}}</span>
                    @endif
                  </td>
                  <td>{{ date('j M Y', strtotime($result->created_at)) }}</td>
                  <td>
                    @if ($result->approved == 0)
                      <div class="btn btn-sm btn-block btn-danger"><span class="glyphicon glyphicon-asterisk padding-right"></span>Pending</div>
                    @elseif ($result->approved == 1)
                      <div class="btn btn-sm btn-block btn-success"><span class="glyphicon glyphicon-ok padding-right"></span>Activated</div>
                    @endif
                  </td>
                  <td>
                    @if ($result->muid)
                      <a href="{{route('authpanel.microunits.show', $result->id)}}"
                        class="btn btn-sm bg-blue"
                        data-toggle="tooltip"
                        data-placement="top"
                        title="View Microunit">
                        <span class="glyphicon glyphicon-eye-open"></span>
                      </a>
                      <a href="{{route('authpanel.microunits.edit', $result->id)}}"
                        class="btn btn-sm btn-warning"
                        data-toggle="tooltip"
                        data-placement="top"
                        title="Edit Microunit">
                        <span class="glyphicon glyphicon-pencil"></span>
                      </a>
                      {!! Form::open(['route' => ['authpanel.microunits.destroy', $result->id], 'method' => 'DELETE', 'id'=>'form-delete', 'style'=>'display:inline-block']) !!}
                        <a class="btn btn-sm btn-danger"
                          data-toggle="modal"
                          data-target="#confirmDelete-{{$result->id}}">
                          <span class="glyphicon glyphicon-trash"></span>
                        </a>
                        @include('admin.categories.modals.deleteresults')
                      {!! Form::close() !!}
                    @else
                      <a href="{{route('authpanel.suites.show', $result->id)}}" class="btn btn-sm bg-olive" data-toggle="tooltip" data-placement="top" title="View Suite">
                        <span class="glyphicon glyphicon-eye-open"></span>
                      </a>
                      <a href="{{route('authpanel.suites.edit', $result->id)}}"
                        class="btn btn-sm btn-warning"
                        data-toggle="tooltip"
                        data-placement="top"
                        title="Edit Suite">
                        <span class="glyphicon glyphicon-pencil"></span>
                      </a>
                      {!! Form::open(['route' => ['authpanel.suites.destroy', $result->id], 'method' => 'DELETE', 'id'=>'form-delete', 'style'=>'display:inline-block']) !!}
                        <a class="btn btn-sm btn-danger"
                          data-toggle="modal"
                          data-target="#confirmDelete-{{$result->id}}">
                          <span class="glyphicon glyphicon-trash"></span>
                        </a>
                        @include('author.categories.modals.deleteresults')
                      {!! Form::close() !!}
                    @endif
                  </td>
                </tr>
              @endforeach
              </tbody>
              <tfoot>
              <tr>
                <th>Title</th>
                <th>Type</th>
                <th>Created At</th>
                <th>Status</th>
                <th>Actions</th>
              </tr>
              </tfoot>
            </table>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
      @endif
      </div>
    </div>

  </div>
</div>

@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 () {

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

  });
  </script>
@endsection