@extends('admin.dashboard')

@section('title', 'Topics')
@section('stylesheets')
  <link rel="stylesheet" href="/css/admin/dist/dataTables.bootstrap.css">
  <link rel="stylesheet" href="/css/admin/dist/bootvalidation.css">
  <link rel="stylesheet" href="/css/admin/colorpicker/bootstrap-colorpicker.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/sweetalert2/6.4.3/sweetalert2.min.css">
@endsection

@section('content')

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

<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <div class="box-header">
        <div class="row">
          <div class="col-lg-12">
            <h3 class="box-title">Data Table With Topics</h3>
            <a href="#" class="btn btn-success pull-right" data-toggle="modal"
              data-target="#confirmCreate"><i class="fa fa-plus"></i> Add New Topic
            </a>
            @include('admin.categories.modals.create')
          </div>
        </div>
      </div>
      <!-- /.box-header -->
      <div class="box-body">
        <table id="topics-table" class="table table-bordered table-hover table-striped">
          <thead>
          <tr>
            <th>ID</th>
            <th>Topic</th>
            <th>Total MUs</th>
            <th>Total Suites</th>
            <th>Created On</th>
            <th>Created By</th>
            <th>Actions</th>
          </tr>
          </thead>
          <tbody>
          @foreach ($categories as $category)
            <tr>
              <td>{{$category->id}}</td>
              <td><i class="fa fa-circle" style="color:{{$category->color}}"></i> {{$category->name}}</td>
              <td>{{$category->microunits->count()}}</td>
              <td>{{$category->suites->count()}}</td>
              <td>{{ date('j M. Y', strtotime($category->created_at)) }}</td>
              <td>{{$category->admin->name}} (Admin)</td>
              <td>
                <a href="{{route('admin.topics.show', $category->id)}}" class="btn btn-sm btn-info">
                  <span class="glyphicon glyphicon-eye-open padding-right"></span> View
                </a>
                <a href="#" class="btn btn-sm btn-warning" data-toggle="modal"
                  data-target="#confirmEdit-{{$category->id}}"><i class="fa fa-pencil"></i> Edit
                </a>
                @include('admin.categories.modals.edit')

                {!! Form::open(['route' => ['admin.topics.destroy', $category->id], 'method' => 'DELETE', 'id'=>'form-delete', 'style'=>'display:inline-block']) !!}
                  <button class="btn btn-sm btn-danger"
                    data-toggle="modal"
                    data-target="#confirmDelete-{{$category->id}}"
                    data-btntxt="Disable" type="button"><span class="glyphicon glyphicon-trash padding-right"></span> Delete
                  </button>
                  @include('admin.categories.modals.delete')
                {!! Form::close() !!}
              </td>
            </tr>
          @endforeach
          </tbody>
          <tfoot>
          <tr>
            <th>ID</th>
            <th>Topic</th>
            <th>Total MUs</th>
            <th>Total Suites</th>
            <th>Created On</th>
            <th>Created By</th>
            <th>Actions</th>
          </tr>
          </tfoot>
        </table>
      </div><!-- /.box-body -->
    </div><!-- /.box -->
  </div><!--.col-xl-12 -->
</div><!--.row -->

@endsection

@section('javascripts')

  <script src="/js/admin/dist/bootvalidation.js"></script>
  <script src="/js/admin/colorpicker/bootstrap-colorpicker.min.js"></script>
  <script src="/js/admin/dist/jquery.dataTables.min.js"></script>
  <script src="/js/admin/dist/dataTables.bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/sweetalert2/6.4.3/sweetalert2.min.js"></script>
  <script src="/js/admin/alert/valid_topic.js"></script>
  <script type="text/javascript">
  $(function () {
    $("#topics-table").DataTable({
        "order": [[ 1, "asc" ]]
    });

    $('.data-delete').on('click', function (e) {
      if (!confirm('Are you sure you want to delete?')) return;
      e.preventDefault();
      $('#form-delete-m-' + $(this).data('form')).submit();
    });

    //Colorpicker
    $(".my-colorpicker").colorpicker();

  });
  </script>
@endsection