@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')
  {{-- TODO: look where to place this script.
          if placed inside .ready() or before it,
            an error that the function is not defined occurs. --}}
  {{-- TODO: no reconoce acentos --}}
  <script type="text/javascript">
  function filterObjectives() {
    // Declare variables
    var input, filter, div, li, i, objectiveText;
    input = document.getElementById('userInput');
    filter = input.value.toUpperCase();
    div = document.getElementById("list");
    li = div.getElementsByTagName('li');

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
      objectiveText = li[i].textContent;
      if (objectiveText.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
  }
  </script>

  <div class="row">
    <div class="col-md-3">
      <input class="form-control" type="text" id="userInput" onkeyup="filterObjectives()" placeholder="Search for Learning Outcomes..">
      <div class="list-group" id='list'>
        @foreach ($objectives as $objective)
          <li data-objective-id="{{ $objective->id }}"class="list-group-item">{{ $objective->text }}</li>
        @endforeach
      </div>
    </div>

    <div class="col-md-9">
      <div id="objective-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="objective-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-objective alert alert-info">
        <p>Select a Learning Objective 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();

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

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

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

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

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

        var name = json.objective.text;
        var definition = json.objective.program.name;
        var criteria =json.objective.criteria;

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

        //Display title and definition
        $('#objective-display .panel-title').html(name);
        $('#objective-display .objective-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