@extends('layouts.master')

@section('stylesheets')
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>
@endsection

@section('content')

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

<div class="row align-items-start">
  <div class="col-3 profile">
    <div class="row" id="profile-row">
      <div class="col" id="profile-col">
        @include('researchers.blocks.profile')
        @include('researchers.blocks.pie')
      </div> <!-- .project-col -->
    </div> <!-- .project-row -->
  </div> <!-- .col project-->
  <div class="col-9 project subject files">
    <div class="row" id="project-row">
      <div class="col" id="project-col">
        <div class="box box-info">
          <div class="box-header">
            <nav>
              <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#projects" role="tab" aria-controls="nav-home" aria-selected="true">Έργα</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#requests" role="tab" aria-controls="nav-profile" aria-selected="false">Αιτήσεις</a>
              </div>
            </nav>
          </div>
          <div class="box-body">
            <div class="tab-content" id="nav-tabContent">
              @include('researchers.blocks.projects')
              @include('researchers.blocks.subjects')
            </div> <!-- .tab-content -->
          </div> <!-- .box-body -->
        </div> <!-- .box box-info -->
      </div> <!-- .meeting-col -->
    </div> <!-- .meeting-row -->
  </div> <!-- .col meeting subject-->
</div>
@endsection

@section('javascripts')
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="{{ asset('js/Chart.min.js') }}" charset="utf-8"></script>
<script type="text/javascript">

$(document).ready(function() {
    $('#projects-table').DataTable({
      "order": [[ 3, "desc" ]]
    });
} );

$(document).ready(function() {
    $('#subjects-table').DataTable();
} );

$(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