@extends('author.dashboard')

@section('title', 'Microunits')

@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('authmicrounits') !!}
</div>

<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title">Data Table With Microunits</h3>
        <a href="{{route('authpanel.microunits.create')}}" class="btn btn-success pull-right"><i class="fa fa-plus"></i> Add Microunit</a>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <table id="microunits-table" class="table table-bordered table-striped">
          <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Created On</th>
            <th>Topic</th>
            <th>Status</th>
            <th>Actions</th>
            <th>Elements</th>
            <th>Questions</th>
          </tr>
          </thead>
          <tbody>
          @foreach ($microunits as $microunit)
            <tr>
              <td>{{$microunit->id}}</td>
              <td style="width:50%;">{{$microunit->title}}</td>
              <td>{{ date('j M. Y', strtotime($microunit->created_at)) }}</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>
                @if ($microunit->approved == 0)
                 <div class="btn btn-sm btn-block btn-danger"><span class="glyphicon glyphicon-asterisk padding-right"></span>Pending</div>
                @elseif ($microunit->approved == 1)
                <div class="btn btn-sm btn-block btn-success"><span class="glyphicon glyphicon-ok padding-right"></span>Activated</div>
                @endif
              </td>
              <td>
                <a href="{{route('authpanel.microunits.create', ['language'=> $microunit->id])}}" class="btn btn-sm btn-success" data-toggle="tooltip" data-placement="top" title="Add Language">
                  <span class="glyphicon glyphicon-globe"></span>
                </a>
                <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>

                <a href="{{route('authpanel.microunits.edit', $microunit->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', $microunit->id], 'method' => 'DELETE', 'id'=>'form-delete', 'style'=>'display:inline-block']) !!}
                  <a class="btn btn-sm btn-danger"
                    data-toggle="modal"
                    data-target="#confirmDelete-{{$microunit->id}}">
                    <span class="glyphicon glyphicon-trash"></span>
                  </a>
                  @include('author.modals.deletemu')
                {!! Form::close() !!}
              </td>
              <td class="text-center">
                @if($microunit->elementmicrounits->count())
                  <a href="{{route('authpanel.elmu.index', $microunit->id)}}" class="btn btn-sm btn-info btn-block" data-toggle="tooltip" data-placement="top" title="View Elements">
                    <i class="fa fa-cog padding-right"></i><span>{{$microunit->elementmicrounits->count()}}</span> elements
                  </a>
                @else
                  <a href="{{route('authpanel.elmu.create', $microunit->id)}}" class="btn btn-sm btn-success btn-block" data-toggle="tooltip" data-placement="top" title="Add Element">
                    <i class="fa fa-plus padding-right"></i>Add Element
                  </a>
                @endif
              </td>
              <td class="text-center">
                @if($microunit->questions->count())
                  <a href="{{route('authpanel.question.index', $microunit->id)}}" class="btn btn-sm btn-info btn-block" data-toggle="tooltip" data-placement="top" title="View Questions">
                    <i class="fa fa-question padding-right"></i><span>{{$microunit->questions->count()}}</span> Questions
                  </a>
                @else
                  <a href="{{route('authpanel.question.create', $microunit->id)}}" class="btn btn-sm btn-success btn-block" data-toggle="tooltip" data-placement="top" title="Create Question">
                    <i class="fa fa-plus padding-right"></i>Add Question
                  </a>
                @endif
              </td>
            </tr>
          @endforeach
          </tbody>
          <tfoot>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Created On</th>
            <th>Topic</th>
            <th>Status</th>
            <th>Actions</th>
            <th>Elements</th>
            <th>Questions</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 () {
    $("#microunits-table").DataTable({
        "order": [[ 2, "desc" ]]
    });

  });
  </script>
@endsection