@extends('admin.dashboard')

@section('title', 'Home')

@section('content')

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

<!-- Start Row for Small boxes (Stat box) -->
<div class="row">

<!-- small box microunits-->
<div class="col-lg-3 col-xs-6">
  <div class="small-box bg-aqua">
    <div class="inner">
      <h3>{{$mus}}</h3>
      <p>Microunits</p>
    </div>
    <div class="icon"><i class="fa ion-play"></i></div>
    <a href="{{route('admin.microunits.index')}}" class="small-box-footer">
      More info <i class="fa fa-arrow-circle-right"></i>
    </a>
  </div><!--.small box -->
</div><!-- ./col-lg-3 col-xs-6 -->

<!-- small box suites-->
<div class="col-lg-3 col-xs-6">
  <div class="small-box bg-green">
    <div class="inner">
      <h3>{{$sus}}</h3>
      <p>Suites</p>
    </div>
    <div class="icon">
      <i class="ion ion-ios-albums"></i>
    </div>
    <a href="{{route('admin.suites.index')}}" class="small-box-footer">
      More info <i class="fa fa-arrow-circle-right"></i>
    </a>
  </div><!--.small box -->
</div><!-- ./col-lg-3 col-xs-6-->

<!-- small box users-->
<div class="col-lg-3 col-xs-6">
  <div class="small-box bg-yellow">
    <div class="inner">
      <h3>{{$authors}}</h3>
      <p>Authors</p>
    </div>
    <div class="icon">
      <i class="ion ion-person-stalker"></i>
    </div>
    <a href="{{url('admin/authors')}}" class="small-box-footer">
      More info <i class="fa fa-arrow-circle-right"></i>
    </a>
  </div><!--.small box -->
</div><!-- ./col-lg-3 col-xs-6 -->

<!-- small box topics-->
<div class="col-lg-3 col-xs-6">
  <div class="small-box bg-red">
    <div class="inner">
      <h3>{{$topics}}</h3>
      <p>Topics</p>
    </div>
    <div class="icon">
      <i class="ion ion-ios-pricetag"></i>
    </div>
    <a href="{{route('admin.topics.index')}}" class="small-box-footer">
      More info <i class="fa fa-arrow-circle-right"></i>
    </a>
  </div><!--small box -->
</div><!-- ./col-lg-3 col-xs-6 -->

</div><!-- /.row -->

<!-- Start Main row -->
<div class="row">
<div class="col-lg-8">

<!-- Start Table Latest Microunits -->
<div class="box box-info">
  <div class="box-header with-border">
    <h3 class="box-title">Latest Microunits (Pending)</h3>
    <div class="box-tools pull-right">
      <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
    </div>
  </div><!-- /.box-header -->

<div class="box-body" style="display: block;">
  <div class="table-responsive">
    <table class="table no-margin">
      <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Topic</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
      </thead>
      <tbody>
      @foreach ($microunits as $microunit)
      <tr>
        <td>{{$microunit->id}}</td>
        <td style="width:60%;">{{$microunit->title}}</td>
        <td>
          <a href="{{route('admin.topics.show', $microunit->category->id)}}"
            class="btn btn-sm cat-btn"
            style="background-color:{{$microunit->category->color}};"
            data-toggle="tooltip" data-placement="top" title="View Topic">
          {{$microunit->category->name}}
          </a>
        </td>
        <td><span class="btn btn-sm btn-primary">{{ ($microunit->approved == 0) ? 'pending' : $microunit->approved }}</span></td>
        <td>
          <div class="sparkbar" data-color="#00a65a" data-height="20">

            {!! Form::model($microunit, ['route' => ['admin.mus.activate', $microunit->id], 'method'=>'PUT', 'id'=>'form-activate','style'=>'display:inline-block']) !!}
            <a class="btn btn-sm btn-danger"
              data-toggle="modal"
              data-target="#confirmEdit-{{$microunit->id}}">
              <span class="glyphicon glyphicon-asterisk"></span> Activate
            </a>
            @include('admin.modals.activatemu')
            {!! Form::close() !!}
              <a href="{{route('admin.microunits.show', $microunit->id)}}" class="btn btn-sm btn-info">
                <span class="glyphicon glyphicon-eye-open"></span> View
              </a>
          </div>
        </td>
      </tr>
      @endforeach
      </tbody>
    </table>
  </div><!-- /.table-responsive -->
</div><!-- /.box-body -->

<div class="box-footer clearfix" style="display: block;">
  <a href="{{route('admin.microunits.create')}}" class="btn btn-sm btn-info btn-flat pull-left">Add Microunit</a>
  <a href="{{route('admin.mus.pending')}}" class="btn btn-sm btn-default btn-flat pull-right">View All</a>
</div><!-- /.box-footer -->

</div><!-- /.box-info -->

<!-- Start Table for Recently Added Suites -->
<div class="box box-info">

<div class="box-header with-border">
  <h3 class="box-title">Latest Suites (Pending)</h3>
  <div class="box-tools pull-right">
    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
    </button>
  </div>
</div><!-- /.box-header -->

<div class="box-body" style="display: block;">
  <div class="table-responsive">
    <table class="table no-margin">
      <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
        <th>Topic</th>
        <th>Status</th>
        <th>Actions</th>
      </tr>
      </thead>
      <tbody>
      @foreach ($suites as $suite)
      <tr>
        <td>{{$suite->id}}</td>
        <td style="width:60%;">{{$suite->title}}</td>
        <td>
          <a href="{{route('admin.topics.show', $suite->category->id)}}"
            class="btn btn-sm cat-btn"
            style="background-color:{{$suite->category->color}};"
            data-toggle="tooltip" data-placement="top" title="View Topic">
          {{$suite->category->name}}
          </a>
        </td>
        <td><span class="btn btn-sm btn-primary">{{ ($suite->approved == 0) ? 'pending' : $suite->approved }}</span></td>
        <td>
          <div class="sparkbar" data-color="#00a65a" data-height="20">

            {!! Form::model($suite, ['route' => ['admin.suite.activate', $suite->id], 'method'=>'PUT', 'id'=>'form-activate','style'=>'display:inline-block']) !!}
            <a class="btn btn-sm btn-danger"
              data-toggle="modal"
              data-target="#confirmEdit-{{$suite->id}}">
              <span class="glyphicon glyphicon-asterisk"></span> Activate
            </a>
            @include('admin.modals.activatesuite')
            {!! Form::close() !!}
              <a href="{{route('admin.suites.show', $suite->id)}}" class="btn btn-sm btn-info">
                <span class="glyphicon glyphicon-eye-open"></span> View
              </a>
          </div>
        </td>
      </tr>
      @endforeach
      </tbody>
    </table>
  </div><!-- /.table-responsive -->
</div><!-- /.box-body -->

<div class="box-footer text-center">
  <a href="{{route('admin.suites.create')}}" class="btn btn-sm btn-info btn-flat pull-left">Add Suite</a>
  <a href="{{route('admin.suites.index')}}" class="btn btn-sm btn-default btn-flat pull-right">View All</a>
</div><!-- /.box-footer -->
</div><!-- /.row for table -->

</div><!-- /.col-md-8 -->

<div class="col-lg-4">
<!--Start Row Table for latest Members -->
<div class="box box-danger">

<div class="box-header with-border">
  <h3 class="box-title">Latest Authors</h3>
  <div class="box-tools pull-right">
    <button type="button" class="btn btn-box-tool" data-widget="collapse">
      <i class="fa fa-minus"></i>
    </button>
  </div>
</div><!-- /.box-header -->

<div class="box-body no-padding">
  <ul class="users-list clearfix">
    @foreach ($members as $member)
    <li>
      <img src="{{$member->image}}" alt="User Image">
      <a class="users-list-name" href="{{route('admin.authors.show', $member->id)}}">{{$member->name}} {{$member->lastname}}</a>
      <span class="users-list-date">{{ date('j M. Y', strtotime($member->created_at)) }}</span>
    </li>
    @endforeach
  </ul><!-- /.users-list -->
</div><!-- /.box-body -->

<div class="box-footer text-center">
  <a href="{{url('admin/authors')}}" class="uppercase">View All Authors</a>
</div><!-- /.box-footer -->

</div><!-- /.row -->

<!--Start Stats Pie Chart -->
<div class="box box-default">

<div class="box-header with-border">
  <h3 class="box-title">Topic Usage</h3>
  <div class="box-tools pull-right">
    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
  </div>
</div><!-- /.box-header -->

<div class="box-body">
  <div class="row">
    <div class="col-md-7">
      <div class="chart-responsive">
        <canvas id="pieChart" height="185" width="214" style="width: 214px; height: 185px;"></canvas>
      </div><!-- ./chart-responsive -->
    </div><!-- /.col -->
    <div class="col-md-5">
      <ul class="chart-legend clearfix">
              </ul>
    </div><!-- /.col -->
  </div><!-- /.row -->
</div><!-- /.box-body -->

</div><!-- /.row -->

  </div><!-- /col-md-4 -->
</div><!-- /.main row -->

@endsection

@section('javascripts')
  <script type="text/javascript">
  $(function () {

    'use strict';

    /* ChartJS
     * -------
     * Here we will create a few charts using ChartJS
     */

    //-------------
    //- PIE CHART -
    //-------------
    // Get context with jQuery - using jQuery's .get() method.
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
    var pieChart = new Chart(pieChartCanvas);
    var PieData = ;
    var pieOptions = {
      //Boolean - Whether we should show a stroke on each segment
      segmentShowStroke: true,
      //String - The colour of each segment stroke
      segmentStrokeColor: "#fff",
      //Number - The width of each segment stroke
      segmentStrokeWidth: 1,
      //Number - The percentage of the chart that we cut out of the middle
      percentageInnerCutout: 50, // This is 0 for Pie charts
      //Number - Amount of animation steps
      animationSteps: 100,
      //String - Animation easing effect
      animationEasing: "easeOutBounce",
      //Boolean - Whether we animate the rotation of the Doughnut
      animateRotate: true,
      //Boolean - Whether we animate scaling the Doughnut from the centre
      animateScale: false,
      //Boolean - whether to make the chart responsive to window resizing
      responsive: true,
      // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
      maintainAspectRatio: false,
      //String - A legend template
      legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
      //String - A tooltip template
      tooltipTemplate: "<%=value %> <%=label%> topics"
    };
    //Create pie or douhnut chart
    // You can switch between pie and douhnut using the method below.
    pieChart.Doughnut(PieData, pieOptions);
    //-----------------
    //- END PIE CHART -
    //-----------------

  });



  </script>
@endsection