@extends('layouts.master')

@section('content')

  <div class="content-header">
    <h1>
      Επιτροπή Ερευνών
      <small>Version 1.0</small>
    </h1>
    {!! Breadcrumbs::render('home') !!}
  </div>

  <div id="small-boxes" class="row">
    <div id="meetingstat" class="col-3">
      <div class="small-box bg-aqua">
        <div class="inner">
          <h3>{{$meetstat}}</h3>
          <p>Συνεδριάσεις</p>
        </div>
        <div class="icon"><i class="fa fa-tasks"></i></div>
        <a href="{{route('index.meetings')}}" class="small-box-footer">
          More info <i class="fa fa-arrow-circle-right"></i>
        </a>
      </div>
    </div> <!-- .col meetingstat -->
    <div id="subjectgstat" class="col-3">
      <div class="small-box bg-primary">
        <div class="inner text-white">
          <h3>{{$subjectstat}}</h3>
          <p>Αιτήματα</p>
        </div>
        <div class="icon"><i class="fa fa-list"></i></div>
        <a href="{{route('index.demands')}}" class="small-box-footer">
          More info <i class="fa fa-arrow-circle-right"></i>
        </a>
      </div>
    </div> <!-- .col meetingstat -->
    <div id="projectstat" class="col-3">
      <div class="small-box bg-green">
        <div class="inner">
          <h3>{{$projectstat}}</h3>
          <p>Έργα</p>
        </div>
        <div class="icon"><i class="fa fa-cog"></i></div>
        <a href="{{route('index.projects')}}" class="small-box-footer">
          More info <i class="fa fa-arrow-circle-right"></i>
        </a>
      </div>
    </div> <!-- .col projectstat -->
    <div id="researcherstat" class="col-3">
      <div class="small-box bg-orange">
        <div class="inner">
          <h3>{{$researcherstat}}</h3>
          <p>Ερευνητές</p>
        </div>
        <div class="icon"><i class="fa fa-user"></i></div>
        <a href="{{route('index.researchers')}}" class="small-box-footer">
          More info <i class="fa fa-arrow-circle-right"></i>
        </a>
      </div>
    </div> <!-- .col researcherstat -->
  </div> <!-- .row small-boxes -->
  <div id="meet-board" class="row align-items-start">
    <div id="meet-table" class="col-7">
      <div class="box box-info">
        <div class="box-header">
          <h3 class="box-title">Τελευταίες Συνεδριάσεις</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> <!-- .col box-header -->
        <div class="box-body" style="display: block;">
          <div class="table-responsive">
            <table class="table no-margin">
              <thead>
                <tr>
                  <th>Αριθμός Συνεδρίασης</th>
                  <th>Ημερομηνία Συνεδρίασης</th>
                  <th>Status</th>
                  <th>Πρακτικό</th>
                  <th>Αιτήσεις</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($meetings as $meeting)
                <tr>
                  <td>{{$meeting->number_meeting}}</td>
                  <td>{{$meeting->date_meeting}}</td>
                  <td>
                    @if($meeting->status == 0)
                      <div class="btn btn-sm btn-danger">
                        <span class="fa fa-cog padding-right"></span>Ενεργή
                      </div>
                    @elseif ($meeting->status == 1)
                      <button type="button" class="btn btn-success btn-sm">
                        <i class="fa fa-check padding-right" aria-hidden="true"></i>Κλειστή
                      </button>
                    @endif
                  </td>
                  <td>@include('meetings.columns.minute')</td>
                  <td>
                    <a href="{{route('index.subjects', $meeting->id)}}" class="btn btn-sm btn-info" data-toggle="tooltip" title="Tooltip on top">
                      <i class="fa fa-cog padding-right"></i><span>{{$meeting->subjects->count()}}</span> Αιτήσεις
                    </a>
                  </td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div><!-- /.table-responsive -->
        </div><!-- .box box-body -->
        <div class="box-footer clearfix" style="display: block;">
          @can('admins')
          <a href="#" class="btn btn-sm btn-success btn-flat float-left"
          data-target="#confirmAdd" data-toggle="modal"><i class="fa fa-plus mr-1"></i> Προσθήκη Συνεδρίασης</a>
          @component('meetings.components.create')
          @endcomponent
          @endcan
          <a href="{{route('index.meetings')}}" class="btn btn-sm btn-primary btn-flat float-right">Λίστα Συνεδριάσεων</a>
        </div> <!-- .box box-footer -->
      </div> <!-- .box box-info -->
      <div class="box box-info">
        <div class="box-header">
          <h3 class="box-title">Project με περισσότερες Αιτήσεις</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> <!-- .col box-header -->
        <div class="box-body" style="display: block;">
          <div class="table-responsive">
            <table class="table no-margin">
              <thead>
                <tr>
                  <th>Κωδικός Έργου</th>
                  <th style="width:50%;">Τίτλος Έργου</th>
                  <th>Αριθμός Αιτήσεων</th>
                  <th>Ενέργειες</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($projects as $project)
                <tr>
                  <td>{{$project->codeid}}</td>
                  <td>{{$project->title}}</td>
                  <td>@include('projects.columns.subjects')</td>
                  <td>@include('projects.columns.actions')</td>
                </tr>
                @endforeach
              </tbody>
            </table>
          </div><!-- /.table-responsive -->
        </div><!-- .box box-body -->
        <div class="box-footer clearfix" style="display: block;">
          @can('admins')
          <a href="{{route('create.project')}}" class="btn btn-sm btn-success btn-flat float-left"><i class="fa fa-plus mr-1"></i> Προσθήκη Έργου</a>
          @endcan
          <a href="{{route('index.projects')}}" class="btn btn-sm btn-primary btn-flat float-right">Λίστα Έργων</a>
        </div> <!-- .box box-footer -->
      </div> <!-- .box box-info -->
    </div> <!-- .col meet-table -->
    <div id="board-table" class="col-5">
      <div class="box box-danger">
        <div class="box-header">
          <h3 class="box-title">Μέλη Επιτροπής</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 ($users as $user)
            <li>
              @if($user->image)
                  <img src="{{ asset('images/'.$user->image) }}" class="user-image" alt="User Image">
                @else
                  {!! Avatar::create($user->name)
                    ->setDimension(80)
                    ->setBackground('#203556')
                    ->setFontSize(20)
                    ->setForeground('#abd9dd')
                    ->setBorder(1, '#203556')->toSvg() !!}
                @endif
                <span class="users-list-name" href="#">{{$user->name}} </span>
            </li>
            @endforeach
          </ul><!-- /.users-list -->
        </div><!-- /.box-body -->
      </div> <!-- .box box-danger -->
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Αιτήσεις</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><!--. Stats Pie Chart -->
    </div> <!-- .col board-table -->
  </div> <!-- .row meet-board -->

@endsection

@section('javascripts')
<script src="{{ asset('js/Chart.min.js') }}" charset="utf-8"></script>
<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%>"
  };
  //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