OLAS/app/views/global/view-three-year-plan.blade.php

@extends('layouts.master')

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

@section('main')
  <script type="text/javascript">
    function filterCycles() {
      // Declare variables
      var input, filter, div, li, i, cycleText;
      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++) {
        cycleText = li[i].textContent;
        if (cycleText.toUpperCase().indexOf(filter) > -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
      }
    }

    // onChange, update selected outcomes-semesters
    function update_outcome_semesters() {
      var outcomeSemesterArray= new Array();
      // For each learning outcome, get selected boxes and put it into an array
      $('#outcome-semesters-body tr').each(function( index )
      {
          var outcomeObject = new Object();
          outcomeObject.id= $(this).data('id');
          var semesters = new Array();
          var temp = new Array();
          temp.push($(this).children(".sem1-box").find("input").attr('name'));
          temp.push($(this).children(".sem1-box").find("input").prop("checked"));
          semesters.push(temp);

          temp = new Array();
          temp.push($(this).children(".sem2-box").find("input").attr('name'));
          temp.push($(this).children(".sem2-box").find("input").prop("checked"));
          semesters.push(temp);

          temp = new Array();
          temp.push($(this).children(".sem3-box").find("input").attr('name'));
          temp.push($(this).children(".sem3-box").find("input").prop("checked"));
          semesters.push(temp);

          temp = new Array();
          temp.push($(this).children(".sem4-box").find("input").attr('name'));
          temp.push($(this).children(".sem4-box").find("input").prop("checked"));
          semesters.push(temp);

          temp = new Array();
          temp.push($(this).children(".sem5-box").find("input").attr('name'));
          temp.push($(this).children(".sem5-box").find("input").prop("checked"));
          semesters.push(temp);

          temp = new Array();
          temp.push($(this).children(".sem6-box").find("input").attr('name'));
          temp.push($(this).children(".sem6-box").find("input").prop("checked"));
          semesters.push(temp);

          outcomeObject.semesters= semesters;

          var clone = jQuery.extend({}, outcomeObject);
          outcomeSemesterArray.push(clone);
      });

      var id = $('#table-cycles').data('typ-id');

      $.post(
          "{{ URL::action('ThreeYearPlanController@update_typ_outcomes_semesters') }}",
          {
            outcomeSemesterArray : JSON.stringify(outcomeSemesterArray),
            typ_id: (id)
          },
          function(data)
          {
              //;
          }
      );
    }

  </script>

  <div class="row">
 
    <div class="col-md-3">
      <input class="form-control" type="text" id="userInput" onkeyup="filterCycles()" placeholder="Search for Cycles..">
      <div class="list-group" id='list'>
        @foreach ($typs as $typ)
          <li data-cycle-id="{{$typ->id}}" class="list-group-item">{{$typ->year_start}}-{{$typ->year_end}}</li>
        @endforeach
      </div>
      <br>
      <div>
        <button type="button" class="btn btn-secondary" id = "three_year_button" data-toggle="modal" data-target="#three_year">Create Three Year Cycle</button>

<!-- Modal -->
<div id="three_year" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Create New Cycle</h4>
      </div>
      <div class="modal-body">
        {{ Form::open(array('action' => 'ThreeYearPlanController@create' )) }}
        <p>Select a new cycle. You cannot choose a cycle that has been created before</p>
        <select name = 'years' class="form-control selectpicker">
          
          
          <option value='{{$last_year}}' >{{$last_year}} - {{$last_year+3}} </option>
          <option value='{{$last_year+3}}' >{{$last_year+3}} - {{$last_year+6}} </option>
          
          
      </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        {{ Form::submit('Create Cycle', array('class' => 'btn btn-primary')) }}
        {{ Form::close() }}
      </div>
    </div>

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

    <div class="col-md-9">
      <div class="btn-group pull-right">
        <a href="" id= "print_button" class="btn btn-default" target="_blank" rel="noopener noreferrer">Print</a>
   </div>
      <div id="cycle-display" class="panel panel-default">
        <div class="panel-heading">
          <h4 class=" panel-title" style="cursor:auto!important;">
          </h4>
        </div>
        <div class="panel-body" id="section1">
          <p class="section1-description">Select two or more Semesters that will be evaluated by an Outcome.</p>
            <div class="table-responsive">
              {{-- <table class="table table-striped table-condensed datatable"> --}}
              <table data-typ-id="0" class="table table-striped table-condensed" id="table-cycles">
                <style media="screen">
                  input[type=checkbox] {transform: scale(2);}
                </style>
                <thead>
                  <tr style="background-color:#FDD8B5;">
                    <th rowspan="0" style="background-color:#F5DEDD;" class="text-center">Learning Outcomes</th>
                    <th colspan="2" class="text-center" id="cycle1"></th>
                    <th colspan="2" class="text-center" id="cycle2"></th>
                    <th colspan="2" class="text-center" id="cycle3"></th>
                  </tr>
                  <tr class="">
                    <th class="text-center">1er sem</th>
                    <th class="text-center">2do sem</th>
                    <th class="text-center">1er sem</th>
                    <th class="text-center">2do sem</th>
                    <th class="text-center">1er sem</th>
                    <th class="text-center">2do sem</th>
                  </tr>
                </thead>
                <tfoot>
                </tfoot>
                <input type="text" id="cycle_id" name="cycle_id" value="getsReplacedWithJS" hidden>
                <tbody id="outcome-semesters-body" onchange="update_outcome_semesters()">
                  @foreach ($outcomes as $outcome)
                    <tr data-id="{{$outcome->id}}">
                      <th>{{$outcome->name}}</th>
                      <th class="text-center sem1-box"><input type="checkbox" id="{{$outcome->id}}-sem1" name="{{$outcome->id}}-sem1" value="checked" /></th>
                      <th class="text-center sem2-box"><input type="checkbox" id="{{$outcome->id}}-sem2" name="{{$outcome->id}}-sem2" value="checked" /></th>
                      <th class="text-center sem3-box"><input type="checkbox" id="{{$outcome->id}}-sem3" name="{{$outcome->id}}-sem3" value="checked" /></th>
                      <th class="text-center sem4-box"><input type="checkbox" id="{{$outcome->id}}-sem4" name="{{$outcome->id}}-sem4" value="checked" /></th>
                      <th class="text-center sem5-box"><input type="checkbox" id="{{$outcome->id}}-sem5" name="{{$outcome->id}}-sem5" value="checked" /></th>
                      <th class="text-center sem6-box"><input type="checkbox" id="{{$outcome->id}}-sem6" name="{{$outcome->id}}-sem6" value="checked" /></th>
                    </tr>
                  @endforeach
                </tbody>
              </table>
              <hr>
              <div class="">
                <button class="btn-lg btn-primary pull-right go-to-2" style="margin:5px;">Select Objectives</button>
              </div>
            </div>
        </div>
        <div class="panel-body" id="section2">
          <p class="section2-description">Select one or more Objectives that will be evaluated in a given Semester.</p>
            <div>
              <div class="objectives-section-0">
              </div>
              <div class="objectives-section">
              </div>
            <hr>
            <div class="">
              <button class="btn-lg btn-primary pull-right go-to-3" style="margin:5px;">Go to Objectives Selection</button>
              <button class="btn-lg btn-primary pull-right back-to-1" style="margin:5px;">Back to Semester Selection</button>
            </div>
            </div>
        </div>
        <div class="panel-body" id="section3">
          <p class="section3-description">Select one or more Courses that will be evaluated by an Objective in a given Semester.</p>
            <div>
              <div class="courses-main-clone-0" hidden>
                <div class="title-course-selection-0">
                  <button class="btn btn-md btn-secondary pull-right hide-course-selection"><span class="glyphicon glyphicon-minus"></span> Hide Outcome Options</button>
                  <button class="btn btn-md btn-secondary pull-right show-course-selection"><span class="glyphicon glyphicon-plus"></span> Show Outcome Options</button>
                  <p class="h3" style="width:100%;max-width:80%;"><b>Outcome: example</b></p>
                </div>
                <div class="semester-course-selection-0" style="margin-left:30px;">
                  <label class="semester-label-course-selection-0" for="">First Semester of 2000-2000</label>
                  <div class="select-course-selection-0" style="margin-left:30px;">
                    <div class="objective-selector-0">
                      <label for="">OBJECTIVE TEMP</label>
                      <select class="select-0" name="" style="width:100%;max-width:55%;">
                        <option class="default-option" value="nothing_selected">Select a course</option>
                      </select>
                      <button class="btn btn-md btn-danger delete-selection-0" style="margin:5px;"><span class="glyphicon glyphicon-minus"></span> remove</button>
                    </div>
                    <div class="clone-objective-course-select-0">
                      <button class="btn btn-md btn-secondary add-objective-course" style="margin:5px;"><span class="glyphicon glyphicon-plus"></span> Choose more Courses</button>
                    </div>
                  </div>
                </div>
                <div class="footer-course-selection-0" style="margin-left:30px;" hidden>
                  <p><b>Course selection for this Outcome is currently hidden</b></p>
                </div>
              </div>
              <div class="courses-section-0">
              </div>
              <div class="courses-section">
              </div>
            <hr>
            <div class="">
               <button class="btn-lg btn-primary pull-right go-to-temp" style="margin:5px;">Save & Create annual plans</button> 
              <button class="btn-lg btn-primary pull-right back-to-2" style="margin:5px;">Back to Objective Selection</button>
            </div>
            </div>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="no-cycle alert alert-info">
        <p>Select a Three year cycle to start</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
  var outcomes = {{json_encode($outcomes)}};

  $('.panel-group .panel-body').hide();

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

  $("#clonedOutcome0").hide();;

  $('.show-course-selection').hide();

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



(function () {
    var previous;
    $("select").on('focus', function () {
        // Store the current value on focus and on change
        previous = this.value;
    }).change(function() {

      //comienzo
      var options_values = $(this).parent().find('select').val().split('-');

      //ifs
      if (options_values.length == 3){

        var typ_id = $('#table-cycles').data('typ-id');
        var previous_objective_id = previous.split('-')[2];

        var options_values =this.value.split('-');
        var outcome_id = options_values[0];
        var semester_id = options_values[1];
        var new_objective_id = options_values[2];

        if (new_objective_id == 'n'){
          new_objective_id = 'nothing_selected';
        }
        if (previous_objective_id == 'n'){
          previous_objective_id = 'nothing_selected';
        }

        $.post(
        "{{ URL::action('ThreeYearPlanController@section2_on_change') }}",
        {
          typ_id: (typ_id),
          previous_objective_id: (previous_objective_id),
          outcome_id: (outcome_id),
          semester_id: (semester_id),
          new_objective_id: (new_objective_id)
        },
        function(data)
        {
          //
        }
        );
        previous = this.value;

      }
      else if (options_values.length == 4){

        var typ_id = $('#table-cycles').data('typ-id');
        var previous_course_id = previous.split('-')[3];

        var options_values =this.value.split('-');
        var outcome_id = options_values[0];
        var semester_id = options_values[1];
        var objective_id = options_values[2];
        var new_course_id = options_values[3];

        if (new_course_id == 'n'){
          new_course_id = 'nothing_selected';
        }
        if (previous_course_id == 'n'){
          previous_course_id = 'nothing_selected';
        }

        $.post(
        "{{ URL::action('ThreeYearPlanController@section3_on_change') }}",
        {
          typ_id: (typ_id),
          previous_course_id: (previous_course_id),
          outcome_id: (outcome_id),
          semester_id: (semester_id),
          objective_id: (objective_id),
          new_course_id: (new_course_id)
        },
        function(data)
        {
          //
        }
        );
        previous = this.value;

      }
    });
})();


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

$('.go-to-temp').on('click', function(){
  $.post(
    "{{ URL::action('ThreeYearPlanController@createAnnualPlan', array($program_id))}}");
    window.location.href = "{{URL::action('AnnualPlansController@showPlan',array($program_id))}}";

  });

    // When list item is clicked, load corresponding info
    //section 1
    $('.list-group-item').on('click', function()
    {
      
      $('#three_year_button').hide();
      var id = $(this).data('cycle-id');
      $('#table-cycles').data('typ-id',id);
      $('#print_button').show();
      $('#print_button').attr("href", "{{URL::action('ThreeYearPlanController@print', [$program_id])}}"+
      '/'+ $(this).data('cycle-id'));
      $('#section1').show();
      $('#section2').hide();
      $('#section3').hide();

      var outcome_id_semester_code_program_id_box_id_typ_id = new Object();
      var outcome_id_semester_code_program_id_box_id_typ_id = Array();

      $.post(
      "{{ URL::action('ThreeYearPlanController@fetchThreeYears') }}",
      { id: id },
      function(json)
      {


          // Retrieve datatable instance
          var table = $('#table-cycles');

          var typ = json.typ;
          var year_start = json.typ.year_start;
          var year_end = json.typ.year_end;
          var semesters = json.typ.semesters;
          var program_id = {{$program_id}};
          //  var outcomes = already defined

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

          //Display title and definition
          $('#cycle-display .panel-title').html('Planning for the years of ' + year_start + '-' + year_end);
          $('#cycle-display .cycle-definition').html("Select the semesters which you would like to review an outcome in the three year plan of " + year_start + '-' + year_end+".");

          //Empty table
          //table.clear();

          // Add new semesters
          //if(typ.length>0)
          //{
          $('table').show();
          $('#cycle1').html((year_start)+"-"+(year_start+1));
          $('#cycle2').html((year_start+1)+"-"+(year_end-1));
          $('#cycle3').html((year_end-1)+"-"+(year_end));

          $('#cycle_id').val(typ.id);

          //resets the checkboxes' name, clears marked, and disables them by default.
          $.each(outcomes, function(index, outcome)
          {
            $.each([1,2,3,4,5,6], function(index, semester)
            {
              var id = outcome.id+"-sem"+semester;
              var new_name = id;
              document.getElementById(id).setAttribute("name", new_name);
              $("#"+id).attr("disabled", true);
              $("#"+id).prop("checked", false);
            });
          });


          var i = 1;
          $.each(outcomes, function(index, outcome)
          {
            $.each(semesters, function(index, semester)
            {
              var id = outcome.id+"-sem"+i;
              var new_name = outcome.id+"-sem"+semester.code;

              var checkbox = document.getElementById(id);
              checkbox.setAttribute("name", new_name);

              //enable the check box
              $("#"+id).removeAttr("disabled");

              //store checkboxes info in an array to later lookup which are marked
              var temp = Array(outcome.id,semester.code,program_id, id, typ.id);
              outcome_id_semester_code_program_id_box_id_typ_id.push(temp);
              i++;
            });
            i = 1;
          });

          //search which boxes are marked in the data-base
          $.post(
            "{{ URL::action('ThreeYearPlanController@lookup_typ_semester_outcome'  ) }}",
            {
              info : (outcome_id_semester_code_program_id_box_id_typ_id)
            },
            function(data)
            {
              $.each(data.box_value, function(index, box_id_value)
              {
                var box_id = box_id_value[0];
                var value = box_id_value[1];
                if (1 == value) {
                  $("#"+box_id).prop("checked", true);
                }
              });
            }
          );
      },
      'json'
      );


    });


  });


    // go back to section 1
    $('.back-to-1').on('click', function(e)
    {
      window.scrollTo(0, 0);
      $(".panel-body").hide();
      $("#section1").show();
    });


    // go back to section 2
    $('.back-to-2').on('click', function(e)
    {
      window.scrollTo(0, 0);
      $(".panel-body").hide();
      $("#section2").show();
    });


  // go to section 2
  $('.go-to-2').on('click', function(e)
  {
    var not_enough = false;
    var i = 0;
    $('#table-cycles tbody tr').each(function() {
      $(this).find('th').each(function() {
        if ($(this).find('input').is(':checked')){
          i = i + 1;
        }
      });

      if (i < 2){
        not_enough = true;
      }
      i = 0;
    });

    if (not_enough == true){
      alert("Each Outcome must be evaluated in at least 2 semesters.");
      return true;
    }

    $(".panel-body").hide();;
    $("#section2").show();;

    var typ_id = $('#table-cycles').data('typ-id');
    $.post(
        "{{ URL::action('ThreeYearPlanController@section2_arrive') }}",
        {
          typ_id: (typ_id)
        },
        function(data)
        {
          $('.objectives-section').empty();

          $.each(data, function(index, outcome)
          {
            var outcome_name = outcome.name;
            var outcome_id = outcome.id;
            $('.objectives-section').append('<hr>');

            var area = $('.courses-section-0').clone(true);
            area.attr('class','');

            var title = 'Outcome: ' + outcome_name;
            var title_area = $('.title-course-selection-0').clone(true);
            title_area.attr('class','title-course-selection h3');
            title_area.find('p').html(title);

            area.append(title_area);

            $.each(outcome.selected_semesters, function(index, semester)
            {
                var semester_name = semester.name;
                var semester_id = semester.semester_id;

                var select_area = $('.semester-course-selection-0').clone(true);
                select_area.attr('class','semester-course-selection');
                select_area.attr('style',' ');
                select_area.find('.semester-label-course-selection-0').html(semester_name+"'s Objectives");
                var no_option = outcome_id+'-'+semester_id+'-n';
                select_area.find('option').val(no_option).html('Select an Objective');
                select_area.find('.add-objective-course').html('<span class="glyphicon glyphicon-plus"></span> Choose more Objectives');

                if (semester.available_objectives.length != 0){
                  select_area.find('.objective-selector-0 label').hide();
                  $.each(semester.available_objectives, function(index, objective)
                  {
                    var objective_id = objective.id;
                    var option_value = outcome_id+'-'+semester_id+'-'+objective_id;

                    var option_name = objective.text;
                    var new_option = select_area.find('.default-option').clone(true);
                    new_option.html(option_name);
                    new_option.val(option_value);
                    new_option.attr('class','select_objective');

                    select_area.find('select').append(new_option);
                  });
                }
                if (semester.available_objectives.length == 0){
                  select_area.find('select').prop('disabled', 'disabled');
                  select_area.find('.objective-selector-0 label').html('There are no Objectives available for this Outcome and Semester combination');
                  select_area.find('.objective-selector-0 select').hide();
                  select_area.find('button').prop('disabled', 'disabled');
                }
                $.each(semester.selected_objectives, function(index, objective)
                {
                  select_area.find('.objective-selector-0').hide();
                  //si hay objetivos previamente seleccionados, escribirlos
                  var objective_id = objective.id;
                  var option_value = outcome_id+'-'+semester_id+'-'+objective_id;
                  var new_select = select_area.find('.objective-selector-0').clone(true);
                  new_select.attr('class','objective-selector');
                  new_select.find('select').val(option_value);
                  select_area.find('.clone-objective-course-select-0').before(new_select);
                  select_area.find('.objective-selector').show();
                });
                area.append(select_area);
            });
            var footer = $('.footer-course-selection-0').clone(true);
            footer.attr('class','footer-course-selection');
            footer.find('p').html('<b>Objective selection for this Outcome is currently hidden.</b>');
            area.append(footer);

            area.append('<br>');
            area.show(true);
            $('.objectives-section').append(area);
          });
        }
    );
  });



    // hide the options of an outcome in section 2 and 3
    $('.hide-course-selection').on('click', function(e)
    {
      $(this).parent().find('.show-course-selection').show();;
      $(this).hide();;
      $(this).parent().parent().find('.semester-course-selection').hide(333);
      $(this).parent().parent().find('.footer-course-selection').show(333);
    });

    // show the options of an outcome in section 2 and 3
    $('.show-course-selection').on('click', function(e)
    {
      $(this).parent().find('.hide-course-selection').show();
      $(this).hide();
      $(this).parent().parent().find('.semester-course-selection').show(333);
      $(this).parent().parent().find('.footer-course-selection').hide(333);
    });


    // in section 2 and 3, add selects for choosing more objectives and courses, respectively
    $('.add-objective-course').on('click', function(e)
    {
      var new_select = $(this).parent().parent().find('.objective-selector-0').clone(true);
      new_select.attr('class','objective-selector');
      new_select.show();
      $(this).parent().before(new_select);
    });


  // go to section 3
  $('.go-to-3').on('click', function(e)
  {
    window.scrollTo(0, 0);
    $(".panel-body").hide();;
    $("#section3").show();;

    var typ_id = $('#table-cycles').data('typ-id');
    $.post(
        "{{ URL::action('ThreeYearPlanController@section3_arrive') }}",
        {
          typ_id: (typ_id)
        },
        function(data)
        {
          $('.courses-section').empty();

          $.each(data, function(index, outcome)
          {
            var outcome_name = outcome.name;
            var outcome_id = outcome.id;
            $('.courses-section').append('<hr>');

            var area = $('.courses-section-0').clone(true);
            area.attr('class','');

            var title = 'Outcome: ' + outcome_name;
            var title_area = $('.title-course-selection-0').clone(true);
            title_area.attr('class','title-course-selection h3');
            title_area.find('p').html(title);

            area.append(title_area);

            $.each(outcome.selected_semesters, function(index, semester)
            {
                var semester_name = semester.name;
                var semester_id = semester.semester_id;

                var select_area = $('.semester-course-selection-0').clone(true);
                select_area.attr('class','semester-course-selection');
                select_area.attr('style',' ');
                select_area.find('.semester-label-course-selection-0').html(semester_name);


                $.each(semester.selected_objectives, function(index, objective)
                {
                    var objective_id = objective.objective_id;
                    var objective_text = objective.text;
                    var new_select = select_area.find('.select-course-selection-0').clone(true);
                    new_select.attr('class','select-course-selection');
                    new_select.find('label').html('');
                    new_select.find('.objective-selector-0').before('<p>Objective: <b>'+objective_text+'</b></p>');
                    {{-- new_select.find('.objective-selector-0 select').attr('style','width:100%;max-width:25%;'); --}}
                    $.each(objective.available_courses, function(index, course)
                    {
                      var course_id = course.course_id;

                      var option_value = outcome_id+'-'+semester_id+'-'+objective_id+'-'+course_id;

                      var option_name = '['+course.code+'] '+course.name;

                      var new_option = new_select.find('.default-option').clone(true);
                      new_option.html(option_name);
                      new_option.val(option_value);
                      new_option.attr('class','select_course');
                      new_select.find('select').append(new_option);

                    });
                    if (objective.available_courses.length == 0){
                      new_select.find('.select-course-selection-0').hide();
                      new_select.find('select').prop('disabled', 'disabled');
                      new_select.find('select label').html(' Objective "'+objective_text+'" has no courses available for selection');
                      new_select.find('button').prop('disabled', 'disabled');
                    }
                    $.each(objective.selected_courses, function(index, course)
                    {
                      new_select.find('.objective-selector-0').hide();
                      //si hay objetivos previamente seleccionados, escribirlos
                      var course_id = course.course_id;
                      var option_value = outcome_id+'-'+semester_id+'-'+objective_id+'-'+course_id;

                      var new_selected_course = new_select.find('.objective-selector-0').clone(true);
                      new_selected_course.attr('class','objective-selector');
                      new_selected_course.find('select').val(option_value);
                      {{-- new_selected_course.find('label').html(''); --}}
                      new_selected_course.show();
                      new_select.find('.clone-objective-course-select-0').before(new_selected_course);
                    });
                    select_area.find('.select-course-selection-0').after(new_select);
                });
                if (semester.selected_objectives.length != 0){
                  select_area.find('.select-course-selection-0').hide();
                }
                else{
                  select_area.find('select').prop('disabled', 'disabled');
                  select_area.find('.objective-selector-0').html('There are no objectives selected for this semester');
                  select_area.find('button').prop('disabled', 'disabled');
                }
                area.append(select_area);
            });
            var footer = $('.footer-course-selection-0').clone(true);
            footer.attr('class','footer-course-selection');
            area.append(footer);

            area.append('<br>');
            area.show(true);
            $('.courses-section').append(area);
          });
        }
    );
  });


  // remove an
  $('.delete-selection-0').on('click', function(e)
  {
    var options_values = $(this).parent().find('select').val().split('-');

    if (options_values.length == 3){
      var typ_id = $('#table-cycles').data('typ-id');
      var outcome_id = options_values[0];
      var semester_id = options_values[1];
      var new_objective_id = "nothing_selected";

      var previous_objective_id = options_values[2];
      if (previous_objective_id == 'n'){
        previous_objective_id = "nothing_selected";
        // with the next return, the post shouldnt excecute.
        //  im leaving the assignment in the line before this one just in case.
        $(this).parent().hide();;
        return true;
      }

      $.post(
        "{{ URL::action('ThreeYearPlanController@section2_on_change') }}",
        {
          typ_id: (typ_id),
          previous_objective_id: (previous_objective_id),
          outcome_id: (outcome_id),
          semester_id: (semester_id),
          new_objective_id: (new_objective_id)
        },
        function(data)
        {
          //
        }
      );
    }
    else if (options_values.length == 4){

      var typ_id = $('#table-cycles').data('typ-id');
      var outcome_id = options_values[0];
      var semester_id = options_values[1];
      var objective_id = options_values[2];
      var previous_course_id = options_values[3];
      var new_course_id = 'nothing_selected';

      $.post(
        "{{ URL::action('ThreeYearPlanController@section3_on_change') }}",
        {
          typ_id: (typ_id),
          previous_course_id: (previous_course_id),
          outcome_id: (outcome_id),
          semester_id: (semester_id),
          objective_id: (objective_id),
          new_course_id: (new_course_id)
        },
        function(data)
        {
          //
        }
      );
    }

    $(this).parent().hide();;
  });


@stop