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

@extends('layouts.master')

@section('navigation')
    @if (Auth::user()->role == 2)
        @include('local.managers.sCoords._new_navigation')
    @elseif(Auth::user()->role == 3)
        @include('local.managers.pCoords._new_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),
                    program_id: {{ $program_id }}
                },
                function(data) {
                    //;
                }
            );
        }
    </script>

    <div class="row">
        <div id="alert_placeholder">

        </div>
        <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>
            <!--<button type="button" class="btn btn-secondary" id = "three_year_button" data-toggle="modal" data-target="#three_year">Create Three Year Cycle</button>
                                                                                                                                      -->
        </div>

        <!-- 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(['action' => 'ThreeYearPlanController@create']) }}
                        <p>Select a new cycle. You cannot choose a cycle that has been created before</p>
                        <input type='hidden' name='program_id' value='{{ $program_id }}'>
                        <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', ['class' => 'btn btn-primary']) }}
                        {{ Form::close() }}
                    </div>
                </div>

            </div>
        </div>



        <div class="col-md-9">
            <div class="btn-group pull-right">
                <a href="" id="view_button" class="btn btn-default" target="_blank" rel="noopener noreferrer">View</a>
                <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 a Learning
                        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 Course
                                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 Learning Outcome Options</button>
                                <button class="btn btn-md btn-secondary pull-right show-course-selection"><span
                                        class="glyphicon glyphicon-plus"></span> Show Learning Outcome Options</button>
                                <p class="h3" style="width:100%;max-width:80%;"><b> Learning 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-primary delete-selection-0"
                                            style="margin:5px; "><span></span> X</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 Learning 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>
    <script>
        $(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),
                                program_id: {{ $program_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),
                                program_id: {{ $program_id }}
                            },
                            function(data) {
                                //
                            }
                        );
                        previous = this.value;

                    }
                });
            })();


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

            $('.go-to-temp').on('click', function() {
                $.post(
                    "{{ URL::action('ThreeYearPlanController@createAnnualPlan', [$program_id]) }}", {
                        typ_id: $('#table-cycles').data('typ-id')
                    },
                    function() {
                        window.location.href =
                            "{{ URL::action('AnnualPlansController@showPlan', [$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);
                $('#view_button').show();
                $('#view_button').attr("href",
                    "{{ URL::action('ThreeYearPlanController@viewPlan', [$program_id]) }}" +
                    '/' + $(this).data('cycle-id'));
                $('#print_button').show();
                $('#print_button').attr("href",
                    "{{ URL::action('ThreeYearPlanController@printPlan', [$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((parseInt(year_start)) + "-" + (parseInt(year_start) + 1));
                        $('#cycle2').html((parseInt(year_start) + 1) + "-" + (parseInt(year_end) - 1));
                        $('#cycle3').html((parseInt(year_end) - 1) + "-" + (parseInt(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 Learning 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),
                    program_id: {{ $program_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_name;
                        //var title = 'Learning 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 Learning 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();
                                objective_selector = select_area.find(
                                    '.objective-selector');
                                objective_selector.find(".delete-selection-0").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 Learning 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),
                    program_id: {{ $program_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 = 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
                                        .number + '] ' + 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);

                    });
                    //$('.objective-selector').children('.delete-selection-0').css("margin:5px; display:block;");
                }
            );
        });


        // remove an
        // remove an
        $('.delete-selection-0').on('click', function(e) {


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

            //if == 3 then we are in the objective selector
            if (options_values.length == 3) {

                //get count of all objective-selectors in the same semester, plus objective-selector-0
                var count_objective_selectors = $(this).parent().parent().find('.objective-selector').length;
                var count_objective_selectors_0 = $(this).parent().parent().find('.objective-selector-0').length;
                var count_objective_selectors_total = count_objective_selectors + count_objective_selectors_0;


                //view count of all objective-selectors in the same semester, plus objective-selector-0
                console.log(count_objective_selectors_total);

                //variable that holds value of wether the objective-selector-0 is hidden or not
                var objective_selector_0_hidden = $(this).parent().parent().find('.objective-selector-0').is(
                    ':hidden');

                if (count_objective_selectors_total == 1 || (count_objective_selectors_total == 2 &&
                        objective_selector_0_hidden)) {
                    //if there is only one objective-selector,throw an alert and do nothing

                    //html alert with dismiss button in the alert_placeholder div
                    $('#alert_placeholder').html(
                        '<div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong>Warning!</strong>You must have at least one Objective per Semester  </div>'
                    );



                    return true;
                }
                //subtract 1 from count_objective_selectors_total

                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.

                    //check to see if parent is objective-selector-0
                    var x = $(this).parent().parent().attr('class');
                    if ($(this).parent().attr('class') == 'objective-selector-0') {
                        // if it is then hide it 
                        $(this).parent().hide();
                        return true;

                    }

                    $(this).parent().remove();;
                    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),
                        program_id: {{ $program_id }},
                    },
                    function(data) {
                        //
                    }
                );
            }

            //if == 4 then we are in the course selector
            else if (options_values.length == 4 || options_values == "nothing_selected") {

                //get count of all objective-selectors in the same semester, plus objective-selector-0
                var count_objective_selectors = $(this).parent().parent().find('.objective-selector').length;
                var count_objective_selectors_0 = $(this).parent().parent().find('.objective-selector-0').length;
                var count_objective_selectors_total = count_objective_selectors + count_objective_selectors_0;


                //view count of all objective-selectors in the same semester, plus objective-selector-0
                console.log(count_objective_selectors_total);

                //variable that holds value of wether the objective-selector-0 is hidden or not
                var objective_selector_0_hidden = $(this).parent().parent().find('.objective-selector-0').is(
                    ':hidden');

                if (count_objective_selectors_total == 1 || (count_objective_selectors_total == 2 &&
                        objective_selector_0_hidden)) {
                    //if there is only one objective-selector,throw an alert and do nothing

                    //html alert with dismiss button in the alert-placeholder div
                    $('#alert_placeholder').html(
                        '<div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong>Warning!</strong>You must have at least one Course </div>'
                    );
                    return true;
                }
                //subtract 1 from count_objective_selectors_total

                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) {
                        //
                    }
                );
            }

            var x = $(this).parent().attr('class');
            if ($(this).parent().attr('class') == 'objective-selector-0') {
                // if it is then hide it 
                $(this).parent().parent().hide();
                return;
            }
            //remove the select
            $(this).parent().remove();;
        });
    </script>
@stop

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

@stop