@extends('layouts.master')

@section('navigation')
    @if ($role == 2)
        @include('local.managers.sCoords._new_navigation')
    @elseif($role == 3)
        @include('local.managers.pCoords._new_navigation')
    @else
        @include('local.professors._navigation')
    @endif
@stop
@section('main')

    <div class="row">
        <div class="col-md-6">
            <!-- Form to add a new criterion -->
            <div class="panel panel-default panel-button">
                <div class="panel-heading">
                    Create a TA
                </div>
                <div class="panel-body" id="createPanel">
                    {{ Form::open(['action' => 'TransformativeActionsController@createTA']) }}

                    <div class="form-group">
                        {{ Form::label('text', 'Name') }}
                        {{ Form::text('text', '', ['class' => 'form-control', 'id' => 'text2']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('description', 'Description') }}
                        {{ Form::textarea('description', '', ['class' => 'form-control', 'id' => 'description2']) }}
                    </div>

                    <div class="form-group"> </div>
                    <div class="form-group" id='dummyApproval'>
                        <label>Availability</label>
                        <select name="approval" class="form-control">
                            <option value="1">Recommended</option>
                            <option value="0">To be implemented</option>
                        </select>
                    </div>

                    <label>Courses being Transformed by the Action</label>
                    <div class="" id="">
                        <div class="form-group col-md-11">
                            <select name="courseid" class="form-control createCourses selectpicker" data-live-search = 'true'>
                                @foreach ($courses_create as $course)
                                    <option value="({{ $course->code }},{{ $course->number }})">
                                        {{ $course->code }}{{ $course->number }} {{ $course->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!--<button type="button" class='btn btn-md btn-primary col-md-1 remove-course'>
                      X
                    </button>-->
                    </div>
                    <!--<button type="button" class='btn btn-md btn-secondary add-course'>
                    <span class='glyphicon glyphicon-plus'>
                    </span>
                    Add another Course
                  </button>-->
                    <div class="form-group"> </div>

                    <div class="form-group" id='createOutcome'>
                        <label>Outcome </label>
                        <select name="outcome" class="form-control selectpicker" data-live-search="true">
                            @foreach ($outcomes as $outcome)
                                <option value="{{ $outcome->id }}">{{ $outcome->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <label>Associated Objectives</label>
                    <div class="" id="">
                        <div class="form-group col-md-11">
                            <select name="objectiveid[]" class="form-control createObjectives">
                                <option value="">First, select an Outcome</option>
                            </select>
                        </div>
                        <button type="button" class='btn btn-md btn-primary col-md-1 remove-objective'>
                            X
                        </button>
                    </div>
                    <button type="button" class='btn btn-md btn-secondary add-objective'>
                        <span class='glyphicon glyphicon-plus'>
                        </span>
                        Add another Objective
                    </button>
                    <br>
                    <br>
                    <div class="form-group">
                        <label>Type of Transformative Action</label>
                        <select name='type_of_ta' class="form-control selectpicker" data-live-search="true">
                            @foreach ($types as $type)
                                <option value='{{ $type->type_of_TA }}'>{{ $type->type_of_TA }}</option>
                            @endforeach
                            <option value="new"> New Type of Transformative Action</option>

                        </select>
                    </div>



                    {{ Form::submit('Create', ['class' => 'btn btn-primary btn-block']) }}
                    {{ Form::close() }}
                </div>
            </div>

            <!--<div class="panel panel-default panel-button">
                <div class="panel-heading">
                    Approve a Recommended TA
                </div>
                <div class="panel-body" id="approvePanel">

                  <div class="">
                    <button class="btn btn-md btn-secondary filterButton">
                      <span class="glyphicon glyphicon-plus">
                      </span>
                      Filters
                    </button>
                  </div>
                  <div class="filterSection">
                    <br>
                    <div class="">
                      <div class="">
                        <label>Professor that created the TA</label>
                        <select class="form-control filterProfessor selectpicker">
                          <option value="0">Show All</option>
                         {{-- @foreach ($professor_filter_approvePanel as $ta)
                        <option value="{{$ta->id}}">Prof. {{$ta->first_name}} {{$ta->surnames}}</option>
                      @endforeach --}}
                        </select>
                      </div>
                      <br>
                      <div class="">
                        <label>Course evaluated by an Objective of the TA</label>
                        <select class="form-control filterCourse selectpicker">
                          <option value="0">Show All</option>
                          {{-- @foreach ($course_filter_approvePanel as $course)
                        <option value="({{$course->code}},{{$course->number}})">{{$course->code}} {{$course->number}}</option>
                      @endforeach --}}
                        </select>
                      </div>
                      <br>
                      <div class="">
                        <label>Outcome of the TA</label>
                        <select class="form-control filterOutcome selectpicker">
                          <option value="0">Show All</option>
                          {{-- @foreach ($outcome_filter_approvePanel as $outcome)
                        <option value="{{$outcome->id}}">{{$outcome->name}}</option>
                      @endforeach --}}
                        </select>
                      </div>
                    </div>
                  </div>
                  <hr>
                  {{-- Form::open(array('action' => 'TransformativeActionsController@approveTA')) --}}

                  <div>
                    <div class="form-group col-md-11">
                      <label>Select Transformative Action</label>
                      <select name="ta" class="form-control SelectTA selectpicker" id='approvalSelectTA'>
                       {{-- @if (count($ta_approval_panel) == 0)
                      <option value="0">No TAs available</option>
                    @else
                    @endif
                    @foreach ($ta_approval_panel as $ta)
                      <option value="{{$ta->id}}">{{$ta->at_text}}</option>
                   @endforeach --}}
                      </select>
                    </div>
                  </div>

                  <div class="form-group">
                   {{-- {{ Form::label('approvalDescription', 'Description') }}
                {{ Form::textarea('approvalDescription', '', array('class' => 'form-control')) }} --}}
                  </div>

                  <label>Associated Courses</label>
                  <div class="approveCourses">
                    <div class="form-group col-md-11 approveCourse">
                      <select name="courseid" id ="approval_course" class="form-control selectpicker disabled">

                          
                      </select>
                    </div>
                    <button type="button" class='btn btn-md btn-primary col-md-1 remove-course'>
                      X
                    </button>
                  </div>
                  <button type="button" class='btn btn-md btn-secondary add-course'>
                    <span class='glyphicon glyphicon-plus'>
                    </span>
                    Add another Course
                  </button>

                  <label>Associated Objectives</label>
                  <div class="approveObjectives">
                    <div class="form-group col-md-11">
                      <select name="objectiveid[]" class="form-control">
                       {{-- @foreach ($objectives as $id => $text)
                      <option value="{{$id}}">{{$text}}</option>
                    @endforeach --}}
                      </select>
                    </div>
                    <button type="button" class='btn btn-md btn-primary col-md-1 remove-objective'>
                      X
                    </button>
                  </div>
                  <button type="button" class='btn btn-md btn-secondary add-objective'>
                    <span class='glyphicon glyphicon-plus'>
                    </span>
                    Add another Objective
                  </button>
                  <br><br>
                  <div class="form-group">
                    <label>Type of Transformative Action</label>
                    <select name='type_of_ta' class="form-control selectpicker">
                      <option value ='0'>Select a Type</option>
                     {{-- @foreach ($types as $type)
                  <option value = '{{$type->type_of_TA}}'>{{$type->type_of_TA}}</option>
                  @endforeach --}}
                      <option value ="new"> New Type of Transformative Action</option>

                    </select>
                  </div>

                  <input type='hidden' name='at_text' class="approvalText">

                  <input type='hidden' name='ta_id' class='updateTA'>

                  {{-- Form::submit('Approve', array('class' => 'btn btn-primary btn-block')) }}
              {{ Form::close() --}}
                </div>
            </div> -->
        </div>

        <div class="col-md-6">
            <div class="panel panel-default panel-button">
                <div class="panel-heading">
                    Edit a TA
                </div>
                <div class="panel-body" id="editPanel">

                    <div class="">
                        <button class="btn btn-md btn-secondary filterButton">
                            <span class="glyphicon glyphicon-minus">
                            </span>
                            Filters
                        </button>
                    </div>
                    <div class="filterSection">
                        <br>
                        <div class="">
                            <div class="">
                                <label>Professor that created the TA</label>
                                <select class="form-control filterProfessor selectpicker" data-live-search="true">
                                    <option value="0">Show All</option>
                                    @foreach ($professor_filter_editPanel as $user)
                                        <option value="{{ $user->id }}">Prof. {{ $user->first_name }}
                                            {{ $user->surnames }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <br>
                            <div class="">
                                <label>Course evaluated by an Objective of the TA</label>
                                <select class="form-control filterCourse selectpicker" data-live-search="true">
                                    <option value="0">Show All</option>
                                    @foreach ($course_filter_editPanel as $course)
                                        <option value="({{ $course->code }},{{ $course->number }})">
                                            {{ $course->code }}{{ $course->number }} {{ $course->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <br>
                            <div class="">
                                <label>Outcome of the TA</label>
                                <select class="form-control filterOutcome selectpicker" data-live-search="true">
                                    <option value="0">Show All</option>
                                    @foreach ($outcome_filter_editPanel as $outcome)
                                        <option value="{{ $outcome->id }}">{{ $outcome->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <hr>

                    {{ Form::open(['action' => 'TransformativeActionsController@updateTA']) }}

                    <div>
                        <div class="form-group col-md-12">
                            <label>Select Transformative Action</label>
                            <select name="ta" class="form-control SelectTA selectpicker" data-live-search="true" id='editSelectTA'>
                                @if (count($ta_edit_panel) == 0)
                                    <option value="0">No TAs available</option>
                                @else
                                @endif
                                @foreach ($ta_edit_panel as $ta)
                                    <option value="{{ $ta->id }}">{{ $ta->at_text }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="form-group" id="editName">
                        {{ Form::label('text', 'Name') }}
                        {{ Form::text('text', '', ['class' => 'form-control']) }}
                    </div>
                    <input type='hidden' name='ta_id' class='updateTA' value="0">

                    <div class="form-group">
                        {{ Form::label('description', 'Description') }}
                        {{ Form::textarea('description', '', ['class' => 'form-control']) }}
                    </div>

                    <div class="form-group"> </div>
                    <div class="form-group" id='editApproval'>
                        <label>Availability</label>
                        <select name="approval" class="form-control selectpicker" data-live-search="true">
                            <option value="1">Recommended</option>
                            <option value="0">To be implemented</option>
                        </select>
                    </div>

                    <label>Associated Courses</label>
                    <div class="editCourses">
                        <div class="form-group col-md-11 editCourse">
                            <select name="courseid" id="edit_course" class="form-control selectpicker" data-live-search="true">
                                @foreach ($courses_create as $course)
                                    <option value="({{ $course->code }},{{ $course->number }})">
                                        {{ $course->code }}{{ $course->number }} {{ $course->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <!--<button type="button" class='btn btn-md btn-primary col-md-1 remove-course'>
                      X
                    </button>-->
                    </div>
                    <!--<button type="button" class='btn btn-md btn-secondary add-course'>
                    <span class='glyphicon glyphicon-plus'>
                    </span>
                    Add another Course
                  </button>-->
                    <div class="form-group"> </div>

                    <label>Associated Objectives</label>
                    <div class="editObjectives">
                        <div class="form-group col-md-11">
                            {{-- <select class="form-control selectpicker"> --}}
                            <select name="objectiveid[]" class="form-control">
                                @foreach ($objectives as $id => $text)
                                    <option value="{{ $id }}">{{ $text }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="button" class='btn btn-md btn-primary col-md-1 remove-objective'>
                            X
                        </button>
                    </div>
                    <button type="button" class='btn btn-md btn-secondary add-objective'>
                        <span class='glyphicon glyphicon-plus'>
                        </span>
                        Add another Objective
                    </button>
                    <br><br>
                    <div class="form-group">
                        <label>Type of Transformative Action</label>
                        <select name='type_of_ta' class="form-control selectpicker" data-live-search="true">
                            @foreach ($types as $type)
                                <option value='{{ $type->type_of_TA }}'>{{ $type->type_of_TA }}</option>
                            @endforeach
                            <option value="new"> New Type of Transformative Action</option>

                        </select>
                    </div>

                    {{ Form::submit('Update', ['class' => 'btn btn-primary btn-block']) }}
                    {{ Form::close() }}

                    {{ Form::open(['action' => 'TransformativeActionsController@deleteTA']) }}
                    <input type='hidden' name='ta_id' id='deleteTA'>
                    {{ Form::submit('Delete', ['class' => 'btn btn-primary btn-block', 'id' => 'DeleteButton']) }}
                </div>
            </div>
        </div>
    </div>
    <script>
        // --------------------------------------------------------------------------
        // Page load
        // --------------------------------------------------------------------------

        $("select[name='type_of_ta']").on('change', function() {

            if ($(this).val() == "new") {
                var new_div = $('<div/>', {
                    'class': 'form-group new_type'
                }).html("<label>New Type </label>");

                var input = $("<input/>", {
                    'type': 'text',
                    'name': "new_type",
                    'class': 'form-control'
                });
                new_div.append(input);

                $(this).parent().parent().after(new_div)

            } else {
                $(this).parent().parent().next('.new_type').remove();
            }


        })

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

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

        $('.remove-objective').hide();
        $('.remove-course').hide();

        ////createPanel
        // remove TA approval section if the user isnt a program coordinator
        var dummyApproval = $('#dummyApproval');
        dummyApproval.find('select').prop('disabled', 'disabled');
        dummyApproval.find('option').remove();


        var role = {{ Auth::user()['role'] }};
        if (role != 4) {
            dummyApproval.find('select').append('<option value="0">To be implemented</option>');
            $('#approvePanel .add-course').hide();
        }
        /* else if (role == 4){
      dummyApproval.find('select').append('<option value="1">Recommended</option>');
      $('#approvePanel').parent().hide();

      //hide the select for changin Availability
      $('#editApproval').find('select').prop('disabled', 'disabled');
      //add an input since disabled the form wont recognize it
      $('#editApproval').append('<input type="text" name="approval" value="1" hidden />')

      // in edit panel, hide the professor filter
      $('.filterProfessor').parent().hide();
      $('.filterProfessor').parent().next().hide(); // hide <br>
    }*/

        $('.createObjectives').prop('disabled', 'disabled');
        $('#createPanel .add-objective').prop('disabled', 'disabled');


        ////editPanel
        // disable the buttons of the edit section if there are no TA for selection
        if (($('#editSelectTA').val() === "")) {
            $('#editPanel').find('select').prop('disabled', 'disabled');
            $('#editPanel').find('button').prop('disabled', 'disabled');
            $('#editPanel').find('input').prop('disabled', 'disabled');
        } else {
            var ta_id = $('#editSelectTA').val();
            if (ta_id != 0) {
                load_ta_info_for_edit(ta_id);
            }


        }

        ////approvePanel
        $('#approvePanel .add-objective').hide();
        // disable the buttons of the approval section if there are no TA for selection
        if (($('#approvalSelectTA').val() === "")) {
            $('#approvePanel').find('select').prop('disabled', 'disabled');
            $('#approvePanel').find('button').prop('disabled', 'disabled');
            $('#approvePanel').find('input').prop('disabled', 'disabled');
            $('#approvalDescription').prop('disabled', 'disabled');
        } else {
            var ta_id = $('#approvalSelectTA').val();
            //if(ta_id != 0){
            //  load_ta_info_for_approval(ta_id);
            //}

        }

        //
        //$('.filterSection').hide();
        $('.filterSection').show();

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


        function load_objectives_from_outcome(outcome_id) {
            $.post(
                "{{ URL::action('TransformativeActionsController@objectivesFromOutcome') }}", {
                    outcome_id: (outcome_id),
                },
                function(data) {
                    var panel = $('#createPanel');

                    //
                    var objectives = data.objectives;
                    //delete al current select
                    panel.find('.remove-objective').parent().remove();

                    //create select
                    var new_div = $('<div/>', {
                        'class': 'createObjectives'
                    });
                    var new_inner_div = $('<div/>', {
                        'class': 'form-group col-md-11'
                    });
                    var new_select = $('<select/>', {
                        'class': 'form-control createObjectives selectpicker',
                        'data-live-search': 'true',
                        'name': 'objectiveid[]'
                    });
                    var new_button = $('<button/>', {
                        'class': 'btn btn-md btn-primary col-md-1 remove-objective',
                        'type': 'button',
                        'html': 'X'
                    });
                    new_button.hide();

                    $.each(objectives, function(index, objective) {
                        new_select.append('<option value="' + objective.id + '">' + objective.text +
                            '</option>');
                    });

                    panel.find('.add-objective').before(new_div);
                    new_div.append(new_button);
                    new_div.append(new_inner_div);
                    new_inner_div.append(new_select);
                    new_select.selectpicker('refresh');

                    //activate the button for adding more objectives
                    $('#createPanel .add-objective').prop('disabled', false);
                }
            );
        }

        function load_ta_info_for_edit(ta_id) {
            $.post(
                "{{ URL::action('TransformativeActionsController@selectTA') }}", {
                    ta_id: (ta_id),
                },
                function(data) {
                    //
                    var selected_course = data.selected_courses;
                    var objectives = data.objectives;
                    var objectives_from_outcome = data.objectives_from_outcome;
                    var status = data.status;
                    var name = data.name[0];
                    var description = data.description[0];
                    var can_be_deleted = data.can_be_deleted;

                    //add objectives button
                    var add_button = $('#editPanel .add-objective');

                    //set if the TA is approved or not
                    $('#editApproval select').val(status);

                    //delete objectives select
                    $('.editObjectives').remove();

                    //create one objective select and populate it
                    var panel = $('#editPanel');

                    //
                    var objectives = data.objectives;
                    //delete al current select
                    panel.find('.remove-objective').parent().remove();

                    //create select
                    var new_div = $('<div/>', {
                        'class': 'editObjectives'
                    });
                    var new_inner_div = $('<div/>', {
                        'class': 'form-group col-md-11'
                    });
                    var new_select = $('<select/>', {
                        'class': 'form-control editObjectives selectpicker',
                        'data-live-search': 'true',
                        'name': 'objectiveid[]'
                    });
                    var new_button = $('<button/>', {
                        'class': 'btn btn-md btn-primary col-md-1 remove-objective',
                        'type': 'button',
                        'html': 'X'
                    });
                    new_button.hide();

                    $.each(objectives_from_outcome, function(index, objective) {
                        new_select.append('<option value="' + objective.id + '">' + objective.text +
                            '</option>');
                    });

                    panel.find('.add-objective').before(new_div);
                    new_div.append(new_button);
                    new_div.append(new_inner_div);
                    new_inner_div.append(new_select);
                    new_select.selectpicker('refresh');


                    //change de value of the select

                    //add the other selects

                    var prev_select = new_div;
                    $.each(objectives, function(index, objective) {
                        prev_select.find('select').val(objective.id);
                        add_objective_select(add_button);
                        {{-- add_button; --}}
                        prev_select = add_button.prev();

                    });
                    add_button.prev().remove();

                    //set the text box
                    $('#editName').find('input').val(name);
                    $('#editPanel #description').val(description);

                    //
                    $('#deleteTA').val(ta_id);
                    $('#editPanel .updateTA').val(ta_id);

                    if (can_be_deleted == false) {
                        $('#DeleteButton').prop('disabled', 'disabled');
                    } else {
                        $('#DeleteButton').prop('disabled', false);
                    }

                    /*
                          //locate de "add course" button on edit panel
                          var add_course_button = $('#editPanel .add-course')

                          //save current course selectpickers, add a new one, and delete old ones
                          var current_course_selects = $('#editPanel .editCourse');
                          add_course_button.click();
                          current_course_selects.remove();

                          //populate edit panel with courses previusly selected
                          var prev_select = add_course_button.prev();
                          prev_select.find('.remove-course').hide();
                          $.each(selected_courses, function(index, course)
                          {
                            prev_select.find('select').val(course.id);
                            add_course_button.click();
                            prev_select = add_course_button.prev();
                          });
                          prev_select.remove();
                          */

                    $('#edit_course').val('(' + selected_course[0].code + ',' + selected_course[0].number + ')');
                    $('#edit_course').selectpicker('refresh');

                }
            );
        }

        /*function load_ta_info_for_approval(ta_id) {
          $.post(
            "{{ URL::action('TransformativeActionsController@selectTA') }}",
            {
              ta_id: (ta_id),
            },
            function(data)
            {
              //
              var selected_course = data.selected_courses;
              var objectives = data.objectives;
              var status = data.status[0];
              var name = data.name[0];
              var description = data.description[0];

              //clear the objectives of ony prevoius TA selected for approve
              var add_button = $('#approvePanel .add-objective');
              var select = add_button.prev().clone(true);

              var first_select = select.clone(true);
              first_select.find('button').hide();

              $('.approveObjectives').remove();
              add_button.before(first_select);

              var prev_select = first_select;
              $.each(objectives, function(index, objective)
              {

                // save the new select in a var
                var new_select = select.clone(true);

                // set only one option on the select
                prev_select.find('option').remove();
                prev_select.find('select').append('<option value="'+ objective.id +'">'+objective.text +'</option>');
                prev_select = new_select;
                // add the copy of the select
                add_button.before(new_select);
              });
              // remove the last objective select, since it isnt one of the saved objectives
              add_button.prev().remove();

              //
              $('#approvalDescription').val(description);
              $('.approvalText').val(name);
              $('#approvePanel .updateTA').val(ta_id);


              //locate de "add course" button on approve panel
              var add_course_button = $('#approvePanel .add-course')

              //save current course selectpickers, add a new one, and delete old ones
              var current_course_selects = $('#approvePanel .approveCourse');
              add_course_button.click();
              current_course_selects.remove();

              //populate approve panel with courses previusly selected
              var prev_select = add_course_button.prev();
              prev_select.find('.remove-course').hide();
              $.each(selected_courses, function(index, course)
              {
                var new_option = $('<option/>',{
                  'value': course.id,
                  'type': 'button',
                  'html': course.name+' ['+course.code+']'
                });
                prev_select.find('select option').remove();
                prev_select.find('select').append(new_option);
                prev_select.find('.remove-course').hide();
                add_course_button.click();
                prev_select = add_course_button.prev();
              });
              prev_select.remove();
              
              course = selected_course[0];
              var new_option = $('<option/>',{
                'value': '('+course.code+','+course.number+')',
                'type': 'button',
                'html': course.name+' ['+course.code+']'
              });
              $('#approval_course').html(new_option);
              $('#approval_course').selectpicker('refresh');


              $('#approval_course').val('('+selected_course[0].code+','+selected_course[0].number+')');
              $('#approval_course').selectpicker('refresh');

            }
          );
        }*/

        function add_objective_select(element) {
            var prev_select = $(element).prev();

            var parent_panel = $(element).parent().parent().attr('id');
            var select_class = '';
            if (parent_panel == 'editPanel') {
                select_class = 'editObjectives';
            } else {
                select_class = 'createObjectives';
            }

            //create select
            var new_div = $('<div/>', {
                'class': select_class
            });
            var new_inner_div = $('<div/>', {
                'class': 'form-group col-md-11'
            });
            var new_select = $('<select/>', {
                'class': 'form-control createObjectives selectpicker',
                'data-live-search': 'true',
                'name': 'objectiveid[]'
            });
            var new_button = $('<button/>', {
                'class': 'btn btn-md btn-primary col-md-1 remove-objective',
                'type': 'button',
                'html': 'X'
            });


            $.each(prev_select.find('option'), function(index, option) {
                var new_option = $('<option/>', {
                    'value': $(option).val(),
                    'html': $(option).html()
                });
                new_select.append(new_option);
            });


            $(element).before(new_div);
            new_div.append(new_inner_div);
            new_div.append(new_button);
            new_inner_div.append(new_select);
            $(element).parent().find('.selectpicker').selectpicker('refresh');
            new_select.selectpicker('refresh');

        }

        function add_course_select(element) {
            var prev_select = $(element).prev();

            var parent_panel = $(element).parent().parent().attr('id');
            var select_class = '';
            if (parent_panel == 'editPanel') {
                select_class = 'editCourse';
            } else {
                select_class = 'createCourse';
            }

            //create select
            var new_div = $('<div/>', {
                'class': select_class + ' approveCourse'
            });
            var new_inner_div = $('<div/>', {
                'class': 'form-group col-md-11'
            });
            var new_select = $('<select/>', {
                'class': 'form-control createCourses selectpicker',
                'data-live-search': 'true',
                'name': 'courseid[]'
            });
            var new_button = $('<button/>', {
                'class': 'btn btn-md btn-primary col-md-1 remove-course',
                'type': 'button',
                'html': 'X'
            });


            $.each(prev_select.find('option'), function(index, option) {
                var new_option = $('<option/>', {
                    'value': $(option).val(),
                    'html': $(option).html()
                });
                new_select.append(new_option);
            });


            $(element).before(new_div);
            new_div.append(new_inner_div);
            new_div.append(new_button);
            new_inner_div.append(new_select);
            $(element).parent().find('.selectpicker').selectpicker('refresh');
            new_select.selectpicker('refresh');

        }

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

        // When a TA is selected for edit, load the TA info

        $('#createOutcome').on('change', function() {
            var outcome_id = $(this).find('select').val();

            load_objectives_from_outcome(outcome_id);
        });
        $('#createOutcome').trigger("change");
        // When a TA is selected for edit, load the TA info
        $('#editSelectTA').parent().on('change', function() {
            var ta_id = $(this).find('select').val();
            if (ta_id != 0) {
                load_ta_info_for_edit(ta_id);
            }
        });

        // When a TA is selected for approval, load the TA info
        $('#approvalSelectTA').parent().on('change', function() {
            var ta_id = $(this).find('select').val();
            //if(ta_id != 0){
            //  load_ta_info_for_approval(ta_id);
            //  }
        });


        // Add an objective Select picker
        $('.add-objective').on('click', function() {
            add_objective_select(this);
        });
        // Add an course Select picker
        $('.add-course').on('click', function() {
            add_course_select(this);
        });

        // Remove an objective Select picker
        $('.panel').on('click', '.remove-objective', function() {
            $(this).parent().remove();
        });
        // Remove an course Select picker
        $('.panel').on('click', '.remove-course', function() {
            $(this).parent().remove();
        });

        // Remove an objective Select picker
        $('.filterButton').on('click', function() {
            var span = $(this).find('span');
            if (span.attr('class') == 'glyphicon glyphicon-plus') {
                span.attr('class', 'glyphicon glyphicon-minus');
            } else {
                span.attr('class', 'glyphicon glyphicon-plus');
            }
            $(this).parent().next().toggle(533);
        });

        //
        $('.filterSection').on('change', function() {

            var professor_id = $(this).find('.filterProfessor select').val();
            var course_id = $(this).find('.filterCourse select').val();
            var outcome_id = $(this).find('.filterOutcome select').val();
            var panel_id = $(this).parent().attr('id');

            var select = $('#' + panel_id + ' .SelectTA select');


            $.post(
                "{{ URL::action('TransformativeActionsController@filterTA') }}", {
                    professor_id: (professor_id),
                    course_id: (course_id),
                    outcome_id: (outcome_id),
                    panel_id: (panel_id),
                },
                function(data) {
                    //
                    select.find('option').remove();
                    $.each(data, function(index, ta) {
                        var ta_id = ta.id;
                        var ta_text = ta.at_text;
                        var new_option = '<option value="' + ta_id + '">' + ta_text + '</option>';
                        select.append(new_option);
                    });

                    select.selectpicker('refresh');

                    if (data.length != 0) {
                        var ta_id = data[0].id;

                        if (panel_id == 'editPanel') {
                            load_ta_info_for_edit(ta_id);
                        }
                        // if(panel_id=='approvePanel'){
                        //   load_ta_info_for_approval(ta_id);
                        // }
                    }
                }
            );

        });
    </script>
@stop

@section('javascript')



@stop