@extends('layouts.master')

@section('navigation')
    @if(Auth::user()->role==1)
      @include('local.managers.admins._navigation')
    @elseif(Auth::user()->role==2)
      @include('local.managers.sCoords._navigation')
    @elseif(Auth::user()->role==3)
      @include('local.managers.pCoords._navigation')
    @elseif(Auth::user()->role==4)
      @include('local.professors._navigation')
    @endif
@stop

@section('main')

  <div class="row">
    <div class="col-md-3">
      <div class="list-group">
        @foreach ($outcomes as $outcome)
          @foreach ($semesters as $semester)
            @if(!$outcome->deleted_at && $outcome->activation_date >= $semester->start && $outcome->activation_date <= $semester->end)
              {{-- <li data-outcome-id="{{ $outcome->id }}"class="list-group-item">{{ $outcome->name }}</li> --}}
              <li data-outcome-id="{{ $outcome->id }}"class="list-group-item">{{ $outcome->name }} [{{$semester->code}}]</li>
            @endif
          @endforeach
        @endforeach
      </div>
    </div>

    <div class="col-md-9">
      <div id="outcome-display" class="panel panel-default">
        <div class="panel-heading">
          <h4 class=" panel-title" style="cursor:auto!important;">
          </h4>
        </div>
        <div class="panel-body">
          <p class="outcome-definition "></p>
            <div class="table-responsive">
                <table class="table table-striped table-condensed datatable">
                  <thead><tr><th>Criterion</th><th>Beginning (1-2)</th><th>In Progress (3-4)</th><th>Satisfactory (5-6)</th><th>Excellent (7-8)</th></tr></thead>
                  <tfoot>
                      <tr class="column-search">
                          <th><input class="column-search-bar form-control" type="text" placeholder="Buscar"/></th>
                          <th><input class="column-search-bar form-control" type="text" placeholder="Buscar"/></th>
                          <th><input class="column-search-bar form-control" type="text" placeholder="Buscar"/></th>
                          <th><input class="column-search-bar form-control" type="text" placeholder="Buscar"/></th>
                          <th><input class="column-search-bar form-control" type="text" placeholder="Buscar"/></th>
                      </tr>
                  </tfoot>
                  <tbody>
                  </tbody>
                </table>
            </div>

        </div>
      </div>
    </div>

    <div class="col-md-9">
      <div class="no-outcome alert alert-info">
        <p>Select a Learning Outcome to view its information</p>
      </div>
    </div>

  </div>
@stop

@section('included-js')
    @include('global._datatables_js')
@stop

@section('javascript')

$(document).ready(function()
{
  // --------------------------------------------------------------------------
  // Page load
  // --------------------------------------------------------------------------

  // Hide accordion panel contents by default
  $('.panel-group .panel-body').hide();

  $('#outcome-display').parent().hide();

  // --------------------------------------------------------------------------
  // Functions
  // --------------------------------------------------------------------------

  // --------------------------------------------------------------------------
  // Events
  // --------------------------------------------------------------------------

  // When list item is clicked, load corresponding info
  $('.list-group-item').on('click', function()
  {
    var id = $(this).data('outcome-id');

    $.post(
    "{{ URL::action('OutcomesController@fetchOutcome') }}",
    { id: id },
    function(json)
    {
        // Retrieve datatable instance
        var table = $('.datatable').DataTable();

        var name = json.outcome.name;
        var definition = json.outcome.definition;
        var criteria =json.outcome.criteria;

        $('#outcome-display').parent().show();
        $('.no-outcome').parent().hide();

        //Display title and definition
        $('#outcome-display .panel-title').html(name);
        $('#outcome-display .outcome-definition').html(definition);

        //Empty table
        table.clear();

        // Add new criteria
        if(criteria.length>0)
        {
          $('table').show();
          $.each(criteria, function(index, value)
          {
              table.row.add([
                value.name,
                value.description12,
                value.description34,
                value.description56,
                value.description78
              ]);
          });
        }
        else
        {
          $('table').hide();
        }

        // Update display
        table.draw();
    },
    'json'
    );

  })
});

@stop