OLAS/app/views/local/managers/shared/annual_report.blade.php

@extends('layouts.master-2')

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

    {{-- TODO: look where to place this script.
          if placed inside .ready() or before it,
            an error that the function is not defined occurs. --}}
    {{-- TODO: no reconoce acentos --}}


    <div class="row">
        <div class="col-md-3">
            <select class="form-control selectpicker" data-live-search="true" id="annual_plan" onchange="fetchInfo('annual_plan')">
                <option value='0'> Nothing Selected</option>
                @foreach ($annual_plans as $an_plan)
                    <option value={{ $an_plan->annual_id }}>Plan {{ $an_plan->academic_year }}</option>
                @endforeach
            </select>
            <br>



            <div id='allOutcomes'>

            </div>
            <hr>
            <div id="printButton" class="text-center"></div>
        </div>


        <div class="col-md-9">
            <div id="outcome-display" class="panel panel-default">
                <div class="panel-heading">
                    <h4 class=" panel-title" style="cursor:auto!important;">
                        Primer Semestre 2019-2020
                    </h4>
                </div>
                <div class="panel-body">
                    <div id='outcomeInfo'>

                    </div>
                    <div id="tableOutcome">
                    </div>

                    <ul id="levelTabs" class="nav nav-tabs" role="tablist">
                        <li role="presentation" id='transformative_for_outcome'>
                            <a data-toggle="tab" id="a_for_ta_outcome" href="#transformative_actions" role="tab"
                                aria-expanded="true">Program Transformative Actions</a>
                        </li>
                    </ul>
                    <div id="allLists" class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="transformative_actions">

                        </div>
                    </div>



                    <!-- <div class="table-responsive">
                                                                                                                                                                                                                                                                                                                        <table class="table table-striped table-condensed datatable" style="table-layout: fixed ; width : 100%">
                                                                                                                                                                                                                                                                                                                          <thead><tr><th>Objectives for courses</th><th>Criteria per Course</th><th>Transformative Actions</th></tr></thead>
                                                                                                                                                                                                                                                                                                                          <tbody>
                                                                                                                                                                                                                                                                                                                          </tbody>

                                                                                                                                                                                                                                                                                                                        </table>
                                                                                                                                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                                                    </div>-->

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


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

    </div>
    <div class="modal fade" id="modal-status-trans">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h3 id='transformative_modal_title' class="modal-title"></h3>
                </div>
                <div class="modal-body">
                    <h5 id="was_it_implemented"> </h5>
                    <label class="radio-inline">
                        <input type="radio" name="implemented" value="1">Yes</label>
                    <label class="radio-inline">
                        <input type="radio" name="implemented" value="0">No</label>
                    <br>
                    <div id='useful_radio_div'>
                        <h5>Was this transformative action helpful to achieve the learning expectation?</h5>
                        <label class="radio-inline">
                            <input type="radio" name="useful" value="1">Yes</label>
                        <label class="radio-inline">
                            <input type="radio" name="useful" value="0">No</label>
                    </div>
                    <br>
                    <div id='comment_div'>
                        <label id="implement_textarea" for='comments'></label>
                        <textarea class="form-control" id='comments'>
                        </textarea>
                    </div>



                </div>
                <div class='modal-footer'>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="save_transformative_info"
                        onclick='saveTransReport()'>Save</button>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>

    <div class="modal fade" id="modal-future-trans-course">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title"></h3>
                </div>
                <div class="modal-body">




                </div>
                <div class='modal-footer'>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="save_transformative_info"
                        onclick='saveTransReport()'>Save</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="modal-delete-ta">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title" id="delete-ta-title"></h3>
                </div>
                <div class="modal-body" id="delete-ta-body">




                </div>
                <div class='modal-footer'>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="delete-ta-button">Delete</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="submit-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h3 class="modal-title" id="submit-modal-title"></h3>
                </div>
                <div class="modal-body" id="submit-modal-body">




                </div>
                <div class='modal-footer' id='submit-modal-footer'>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <script>
        function nextChar(c) {
            return String.fromCharCode(c.charCodeAt(0) + 1);
        }
        changed = false;

        $(document).ready(function() {
            // --------------------------------------------------------------------------
            // Page load
            // --------------------------------------------------------------------------
            $('#comment_div').hide();
            $('input[name="implemented"]').change(function() {
                //was implemented
                if (!parseInt($(this).val())) {
                    $('#useful_radio_div').hide();
                    $('#comment_div').show();
                    $('#comments').val(' ');
                    $('#implement_textarea').html(
                        "Explain briefly why this transformative action was not implemented");
                } else {
                    $('#useful_radio_div').show();
                    $('#comment_div').show();
                    $('#implement_textarea').html(
                        "Explain briefly details about the implementation of this transformative action"
                    );

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

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




        });

        function draw_comment_section(typ_semester_outcome_id, outcome_comments) {
            $('#levelTabs').append('<li role = "presentation" id = "comments_for_outcome">' +
                '<a data-toggle="tab" id="a_for_ta_outcome" href="#comments_outcome" role="tab" >Comments</a>' +
                '</li>');
            $('#allLists').append('<div role="tabpanel" class="tab-pane" data-typ-semester-outcome-id = "' +
                typ_semester_outcome_id + '" id="comments_outcome"></div>');
            button_for_adding_comments = $('<button>', {
                'class': 'btn btn-secondary',
                'id': 'add_comments_button',
                'style': 'float: right',
                'onclick': 'add_comments_to_plan()'
            }).html("<span class='glyphicon glyphicon-plus'></span> Add Comments");
            $('#comments_outcome').append('<h3>Comments</h3>')
            table_for_comments = $('<table>', {
                    'class': 'table table-striped table-condensed datatable',
                    'id': 'table_for_comments'
                }).html('<thead><th>Comments</th><th>Edit or Delete</th></thead><tbody></tbody>');
                table_for_comments.appendTo('#comments_outcome');
                table_for_comments = table_for_comments.DataTable();
            
            if (outcome_comments.length) {
                $("#table_for_comments").parent().parent().parent().show();

                $.each(outcome_comments, function(index, comment) {

                    comment_td = '<div id="comments_id_' + comment.id + '">' + comment.comments + '</div>';

                    inputEdit = $('<input>', {
                        'type': 'button',
                        'class': 'btn btn-secondary',
                        'onclick': 'add_comments_to_plan(' + comment.id + ')',
                        'id': 'edit_button_comment_' + comment.id,
                        'value': 'Edit'
                    }).html('Edit');
                    inputDelete = $('<input>', {
                        'type': 'button',
                        'class': 'btn btn-primary',
                        'style': 'display: inline',
                        'onclick': 'deleteCommentsFromOutcome(' + comment.id + ')',
                        'value': 'Delete'
                    })
                    div = $('<div>');
                    div.append(inputEdit);
                    div.append(inputDelete);
                    table_for_comments.row.add([
                        comment_td,
                        div.html()

                    ]).draw();
                });

            }
            else{
                $("#table_for_comments").parent().parent().parent().hide();
            }

            $('#comments_outcome').append('<hr>');

            $('#comments_outcome').append(button_for_adding_comments);







        }

        function open_warning_modal(trans_id) {

            $('#delete-ta-title').html('Delete ' + $('#transformative_action_row_' + trans_id).data('at-text') + " ?")
            $('#delete-ta-body').html('This action cannot be undone');
            $('#delete-ta-button').attr('onclick', 'deleteTrans(' + trans_id + '); $("#modal-delete-ta").modal("toggle")');
            $('#modal-delete-ta').modal("show");
        }

        function add_comments_to_plan(edit_id = null) {
            $('#add_comments_button').hide();
            $("#add_comment_div").remove();
            div_for_inputs = $('<div>', {
                'id': 'add_comment_div'
            });
            textarea = $('<textarea>', {
                'class': 'form-control',
                'data-comment-id': edit_id,
                'id': 'comment_textbox'
            });
            if (edit_id) {
                textarea.val($("#comments_id_" + edit_id).html());
            }
            save_button = $('<button>', {
                'class': 'btn btn-primary',
                'onclick': 'saveComment()',
                'style': 'float: right'
            }).html('Save');
            $('#comments_outcome').append(div_for_inputs);
            div_for_inputs.append('<h5>Add new comment</h5>');
            div_for_inputs.append(textarea);
            div_for_inputs.append(save_button);

        }

        function saveComment() {
            typ_outcome_semester_id = $("#comments_outcome").data('typ-semester-outcome-id');
            comment_area = $('#comment_textbox');

            $.post(
                "{{ URL::action('AnnualPlansController@addCommentsToOutcome') }}", {
                    typ_outcome_semester_id: typ_outcome_semester_id,
                    comments: comment_area.val(),
                    edit_id: comment_area.data('comment-id')
                },
                function(edit_id) {
                    $('#add_comment_div').remove();
                    $('#add_comments_button').show();
                    if ($('#comments_id_' + edit_id).length) {
                        $('#comments_id_' + edit_id).html(comment_area.val());
                    } else {
                        
                        table_for_comments = $('#table_for_comments').DataTable();
                        $("#table_for_comments").parent().parent().parent().show();
                        comment_td = '<div id="comments_id_' + edit_id + '">' + comment_area.val() + '</div>';

                        inputEdit = $('<input>', {
                            'type': 'button',
                            'class': 'btn btn-secondary',
                            'onclick': 'add_comments_to_plan(' + edit_id + ')',
                            'id': 'edit_button_comment_' + edit_id,
                            'value': 'Edit'
                        }).html('Edit');
                        inputDelete = $('<input>', {
                            'type': 'button',
                            'class': 'btn btn-primary',
                            'style': 'display: inline',
                            'onclick': 'deleteCommentsFromOutcome(' + edit_id + ')',
                            'value': 'Delete'
                        })
                        div = $('<div>');
                        div.append(inputEdit);
                        div.append(inputDelete);
                        table_for_comments.row.add([
                            comment_td,
                            div.html()

                        ]).draw();
                    }
                }
            )

        }

        function deleteCommentsFromOutcome(id) {
            $.post(
                "{{ URL::action('AnnualPlansController@deleteCommentsFromOutcome') }}", {
                    id: id
                },
                function() {
                    $('#comments_id_' + id).parent().parent().remove();

                }
            )
        }



        // Create everything 

        function draw_transformative_actions(transforming_actions, semester_id) {
            if (!transforming_actions.length) {
                $("#transformative_for_outcome").hide();
            } else {
                $('#levelTabs').append('<li role = "presentation" id = "transformative_for_outcome">' +
                    '<a data-toggle="tab" id="a_for_ta_outcome" href="#transformative_actions" role="tab" >Program Transformative Actions</a>' +
                    '</li>');
                $('#allLists').append('<div role="tabpanel" class="tab-pane" id="transformative_actions"></div>');

                $('#transformative_actions').html('<h3>Program Transformative Actions </h3>')
                $.each(transforming_actions, function(index, trans_action) {
                    div = $("<div>", {
                        'id': 'div_trans_id_' + trans_action.trans_id
                    }).html('<p><strong>' + (index + 1) + '. ' + trans_action.at_text + ': </strong>' +
                        trans_action.description + '</p>' +
                        '<p><strong>Category: </strong> ' + trans_action.type_of_TA + '</p>');
                    div.append('<label>Results: </label>')
                    input_results = $("<textarea>", {
                        'class': 'form-control',
                        'id': 'results_for_' + trans_action.trans_id
                    });
                    div.append(input_results)

                    div.append(
                        '<h5>Was this transformative action helpful to achieve the learning expectation?</h5>' +
                        '<label class="radio-inline">' +
                        '<input type="radio"  name="useful_for_' + trans_action.trans_id +
                        '" value = "1">Yes</label>' +
                        '<label class="radio-inline">' +
                        '<input type="radio" name="useful_for_' + trans_action.trans_id +
                        '" value = "0">No</label>');
                    comments = $('<textarea>', {
                        'id': 'comments_for_' + trans_action.trans_id,
                        'class': 'form-control'
                    });
                    div.append('<br><label>Explain briefly details about the implementation</label>');
                    div.append(comments);

                    button = $('<button>', {
                        "type": "button",
                        "class": "btn btn-primary",
                        "onclick": 'saveTransReport(' + trans_action.trans_id + ', ' + semester_id +
                            ', this)',
                        'style': 'float: right'

                    }).html('Save');
                    div.append('<br>');
                    div.append(button);
                    div.append('<br>');
                    div.append('<hr>');

                    $('#transformative_actions').append(div);

                    $('#results_for_' + trans_action.trans_id).val(trans_action.results);
                    $('#comments_for_' + trans_action.trans_id).val(trans_action.comments);
                    $('input[name="useful_for_' + trans_action.trans_id + '"][value="' + trans_action
                        .it_was_useful + '"]').prop('checked', true);





                })
            }
        }



        function draw_transformative_future_course(course_code) {

            /* This is the modal
                        <div class="modal fade" id="modal-future-trans-course">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h3 class="modal-title"></h3>
                            </div>
                            <div class="modal-body">
                            
                        
               
                          
                        </div>
                        <div class='modal-footer'>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" >Cancel</button>
                            <button type="button" class="btn btn-primary" id ="save_transformative_info" onclick ='saveTransReport()'>Save</button>
                        </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal --> */

            return_complete_div = $('<div>');
            return_complete_div.append('<h3>Future Transformative Actions for ' + course_code.code + ' ' + course_code
                .number);
            return_complete_div.append('<hr>');
            table_for_transformative_future = $('<table>', {
                'id': 'transformative_actions_future_table_' + course_code.typ_semester_course_id,
                'class': 'table table-striped table-condensed datatable',
            }).html('<thead>' +
                '<tr>' +
                '<th>Transformative Actions to be Implemented</th>' +
                '<th>Semesters to be Implemented</th>' +
                '<th>Edit or Delete</th>' +
                '</tr>' +
                '</thead>' +
                '<tbody id="transformative_action_future_body_' + course_code.typ_semester_course_id + '"></tbody>');
            return_complete_div.append(table_for_transformative_future);

            typ_semester_course_id = course_code.typ_semester_course_id;
            modalComplete = $('<div>', {
                'class': 'modal fade',
                'id': 'modal_for_future_trans_on_' + typ_semester_course_id
            });
            modalDialog = $('<div>', {
                'class': 'modal-dialog modal-lg'
            });
            modalComplete.append(modalDialog);

            modalContent = $('<div>', {
                'class': 'modal-content'
            });

            modalDialog.append(modalContent);

            modalHeader = $('<div>', {
                'class': 'modal-header'
            }).html(
                '<button type="button" class="close" data-dismiss="modal" onclick = "clearInputs()" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
                '<h3 class="modal-title">Future Transformative Actions for ' + course_code.code + ' ' + course_code
                .number + '</h3>');



            modalContent.append(modalHeader);


            modalBody = $('<div>', {
                'class': 'modal-body'
            });
            modalContent.append(modalBody);

            div_for_name = $('<div>', {
                'class': 'form-group',

            });



            input_name = $('<input>', {
                'class': 'form-control',

                'name': 'at_text',
                'id': 'at_text_for_' + typ_semester_course_id
            });

            div_for_name.html("<label> Name</label>");
            div_for_name.append(input_name);
            modalBody.append(div_for_name);

            div_for_category = $('<div>', {
                'class': 'form-group'
            }).html('<label>Type of Transformative Action</label>');

            select_for_category = $('<select>', {
                'name': 'type_of_ta',
                'id': 'type_of_ta_of_' + typ_semester_course_id,
                'class': 'form-control selectpicker',
                'data-live-search':'true',
                'onchange': 'checkIfNew(this)'
            }).html(GlobalTransCategories);

            div_for_category.append(select_for_category);
            modalBody.append(select_for_category);


            div_description = $('<div>', {
                'class': 'form-group',

            }).html('<label> Description</label>');

            textarea = $('<textarea>', {
                'class': 'form-control',
                'id': 'description_for_' + typ_semester_course_id,
                'name': 'description',
                'rows': '10'
            });

            div_description.append(textarea);
            modalBody.append(div_description);
            modalBody.append('<hr><label>Select when will this transformative action will be implemeneted</label>');



            selectpicker_for_semesters = $('<select>', {
                'name': 'selected_semesters_for_' + typ_semester_course_id + '_[]',
                'id': 'selected_semester_first_for_' + typ_semester_course_id,
                'class': 'form-control selectpicker',
                'data-live-search':'true',
            });
            options_for_semesters = '<option value = "0">Nothing Selected</option>';



            $.each(course_code.future_typ_course_id.future_semesters, function(index, typ_future) {
                options_for_semesters += '<option value="' + typ_future.typ_future_course_id +
                    '" data-semester-id ="' + typ_future.semester_id + '" data-objective-id = "' + typ_future
                    .objective_id + '" >' + typ_future.semester_name + ' [' + typ_future.semester_code + '] ' +
                    '</option>';



            });
            selectpicker_for_semesters.html(options_for_semesters);

            modalBody.append(selectpicker_for_semesters);
            modalBody.append('<br><br>');

            button_for_more = $('<button>', {
                'class': 'btn btn-secondary',
                'id': 'add_more_semesters_button_for_' + typ_semester_course_id,
                'onclick': 'addMoreSemesters(' + typ_semester_course_id + ', this)',
                'style': 'float:right'
            }).html('<span class="glyphicon glyphicon-plus">' +
                '</span>Add another semester');

            modalBody.append(button_for_more);
            modalBody.append('<br><br>');






            modalFooter = $('<div>', {
                'class': 'modal-footer'
            });
            modalContent.append(modalFooter);

            close_button = $('<button>', {
                'type': 'button',
                'class': 'btn btn-secondary',
                'data-dismiss': 'modal',
                'onclick': 'clearInputs()'
            }).html('Cancel');
            save_button = $('<button>', {
                'class': 'btn btn-primary',
                'id': 'save_button_for_' + typ_semester_course_id,
                'onclick': 'saveFutureTrans(' + typ_semester_course_id + ', "' + course_code.code + '", "' +
                    course_code.number + '")'
            }).html('Save');

            modalFooter.append(close_button);
            modalFooter.append(save_button);


            return_complete_div.append(modalComplete);

            //populating existing future transformative actions

            //dictionary_if_exists
            html_dictionary = {};
            $.each(course_code.future_typ_course_id.future_transformative_actions, function(index, typ_future) {
                //Populating table for transformative_actions
                if (typ_future.trans_id != null) {
                    //$("#transformative_action_row_"+typ_future.trans_id).length !==0
                    if (html_dictionary[typ_future.trans_id] !== undefined) {
                        //$('#transformative_future_semester_for_'+typ_future.trans_id).append(
                        $(html_dictionary[typ_future.trans_id]).append(
                            '<p style="display:inline" data-typ-future-course-id ="' + typ_future
                            .typ_future_course_id + '">, ' + typ_future.semester_code + '</p>');
                        //)

                    } else {
                        //create table rows

                        new_tr = $('<tr>', {
                            'id': 'transformative_action_row_' + typ_future.trans_id,
                            'data-at-text': typ_future.at_text,
                            'data-description': typ_future.description,
                            'data-type-of-TA': typ_future.type_of_TA
                        });
                        td_transformative = $('<td>').html("<strong>" + typ_future.at_text + ": </strong>" +
                            typ_future.description);
                        html_dictionary[typ_future.trans_id] = $('<td>', {
                            'id': 'transformative_future_semester_for_' + typ_future.trans_id
                        }).html('<p style="display:inline" data-typ-future-course-id = "' + typ_future
                            .typ_future_course_id + '">' + typ_future.semester_code + '</p>');

                        inputEdit = $('<button>', {
                            'type': 'button',
                            'class': 'btn btn-secondary',
                            'onclick': 'edit_ta_modal(' + typ_future.trans_id + ', ' +
                                typ_semester_course_id + ', "' + course_code.code + '", "' + course_code
                                .number + '");',

                            //'data-target':'#modal_for_future_trans_'+typ_future.trans_id,
                            'id': 'edit_button_for_trans_' + typ_future.trans_id
                            //'value': 'Edit'
                        }).html('Edit');
                        inputDelete = $('<input>', {
                            'type': 'button',
                            'class': 'btn btn-primary',
                            'style': 'display: inline',
                            'onclick': 'open_warning_modal(' + typ_future.trans_id + ')',
                            'value': 'Delete'
                        })
                        td_for_buttons = $('<td>');
                        td_for_buttons.append(inputEdit);
                        td_for_buttons.append(inputDelete);
                        new_tr.append(td_transformative);
                        new_tr.append(html_dictionary[typ_future.trans_id]);
                        new_tr.append(td_for_buttons);
                        new_tr.appendTo(table_for_transformative_future);

                    }
                }
            });


            return_complete_div.append(
                '<hr><button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#modal_for_future_trans_on_' +
                typ_semester_course_id + '">' +
                'Add Transformative Actions' +
                '</button><hr>')

            return return_complete_div;





        }

        function deleteTrans(trans_id) {
            $.post(
                "{{ URL::action('TransformativeActionsController@deleteTaFromOutcome') }}", {
                    trans_id: trans_id
                },
                function() {
                    $('#transformative_action_row_' + trans_id).remove();

                }
            )
        }

        function clearInputs() {
            $('.input-group').remove();
            $('textarea[name="description"]').val('');
            $('input[name="at_text"]').val('');
            $('select[name="type_of_ta"]').val('0');
            $('.selectpicker').selectpicker('refresh');
            $('.new_type').hide();
        }

        function edit_ta_modal(future_trans_id, typ_semester_course_id, course_code, course_number) {
            at_text_transformative = $('#transformative_action_row_' + future_trans_id).data('at-text');
            description = $('#transformative_action_row_' + future_trans_id).data('description');
            type_of_TA = $('#transformative_action_row_' + future_trans_id).data('type-of-ta');
            semesters_cell = $('#transformative_future_semester_for_' + future_trans_id);



            amount_of_semesters = $(semesters_cell).children().length;

            for (i = 1; i < amount_of_semesters; i++) {
                $('#add_more_semesters_button_for_' + typ_semester_course_id).click();
            }

            future_typ_for_ta = [];
            $.each($(semesters_cell).children(), function(index, p) {
                future_typ_for_ta.push($(p).data('typ-future-course-id'));
            })
            $.each($('select[name="selected_semesters_for_' + typ_semester_course_id + '_[]"]'), function(index, select) {
                $(select).val(future_typ_for_ta[index]);
            })
            $('#save_button_for_' + typ_semester_course_id).attr('onclick', 'saveFutureTrans(' + typ_semester_course_id +
                ', "' + course_code + '", "' + course_number + '", ' + future_trans_id + ')')
            $('#at_text_for_' + typ_semester_course_id).val(at_text_transformative)
            $('#description_for_' + typ_semester_course_id).val(description)
            $('#type_of_ta_of_' + typ_semester_course_id).val(type_of_TA);


            $('.selectpicker').selectpicker('refresh');

            $('#modal_for_future_trans_on_' + typ_semester_course_id).modal();



        }


        function saveFutureTrans(typ_semester_course_id, course_code, course_number, edit_ta_id = null) {
            annual_plan_id = $('#annual_plan').val()
            at_text = $('#at_text_for_' + typ_semester_course_id).val();
            type_of_TA = $('#type_of_ta_of_' + typ_semester_course_id).val();
            is_custom = $('#type_of_ta_of_' + typ_semester_course_id).find('option:selected').data('is-custom');
            if (type_of_TA == "new") {
                type_of_TA = $('#new_type_type_of_ta_of_' + typ_semester_course_id).val();
                is_custom = 1;
                new_option = "<option value= '" + type_of_TA + "' data-is-custom='1'>" + type_of_TA + "</option>";
                $('#program_custom_action').append(new_option);


            }
            description = $('#description_for_' + typ_semester_course_id).val();
            future_typ_course_id = [];
            future_semesters = [];
            objective_id = 0

            $.each($('select[name="selected_semesters_for_' + typ_semester_course_id + '_[]"]'), function(index, select) {
                objective_id = $(select).find('option:selected').data('objective-id');
                future_semesters.push($(select).find('option:selected').data('semester-id'));
                future_typ_course_id.push($(select).val());
            });
            $.post(
                "{{ URL::action('AnnualPlansController@futureTransformative') }}", {
                    at_text: at_text,
                    type_of_TA: type_of_TA,
                    description: description,
                    future_semesters: future_semesters,
                    future_typ_course_id: future_typ_course_id,
                    is_custom: is_custom,
                    program_id: {{ $program->id }},
                    annual_plan_id: annual_plan_id,
                    course_code: course_code,
                    course_number: course_number,
                    objective_id: objective_id,
                    edit_ta_id: edit_ta_id
                },
                function(trans_info) {
                    if (edit_ta_id != null) {
                        $('#transformative_action_row_' + edit_ta_id).remove();
                    }

                    new_tr = $('<tr>', {
                        'id': 'transformative_action_row_' + trans_info[0].trans_id,
                        'data-at-text': trans_info[0].at_text,
                        'data-description': trans_info[0].description,
                        'data-type-of-TA': trans_info[0].type_of_TA
                    });
                    td_transformative = $('<td>').html("<strong>" + trans_info[0].at_text + ": </strong>" + trans_info[
                        0].description);
                    td_semesters = $('<td>', {
                        'id': 'transformative_future_semester_for_' + trans_info[0].trans_id
                    });
                    $.each(trans_info, function(index, semester) {
                        td_semesters.append('<p style="display:inline" data-typ-future-course-id = "' + semester
                            .typ_future_course_id + '">' + semester.code + ', </p>');
                    });
                    inputEdit = $('<button>', {
                        'type': 'button',
                        'class': 'btn btn-secondary',
                        'onclick': 'edit_ta_modal(' + trans_info[0].trans_id + ', ' + typ_semester_course_id +
                            ')',
                        //'data-target':'#modal_for_future_trans_'+typ_future.trans_id,
                        'id': 'edit_button_for_trans_' + trans_info[0].trans_id
                        //'value': 'Edit'
                    }).html('Edit');
                    inputDelete = $('<input>', {
                        'type': 'button',
                        'class': 'btn btn-primary',
                        'style': 'display: inline',
                        'onclick': 'deleteTrans(' + trans_info[0].trans_id + ')',
                        'value': 'Delete'
                    })
                    td_for_buttons = $('<td>');
                    td_for_buttons.append(inputEdit);
                    td_for_buttons.append(inputDelete);
                    new_tr.append(td_transformative);
                    new_tr.append(td_semesters);
                    new_tr.append(td_for_buttons);
                    new_tr.appendTo("#transformative_action_future_body_" + typ_semester_course_id);


                    $('#modal_for_future_trans_on_' + typ_semester_course_id).modal('toggle');
                    clearInputs();

                }
            )

        }

        function addMoreSemesters(typ_semester_course_id, button_add_new_semester) {
            first_select_options = $('#selected_semester_first_for_' + typ_semester_course_id).html();
            /*<div class="input-group">
              <select class="form-control">
                <option>Select option..</option>
                <option>Option 1</option>
                <option>Option 2</option>
              </select>            
              <span class="input-group-btn">
                <button class="btn btn-default" type="button" tabindex="-1"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
              </span>
            </div> */
            input_group = $('<div>', {
                'class': 'input-group'
            });
            newselect = $('<select>', {
                'name': 'selected_semesters_for_' + typ_semester_course_id + '_[]',
                //'id':'selected_semester_first_for_'+typ_semester_course_id,
                'class': 'form-control selectpicker',
                'data-live-search':'true',
            }).html(first_select_options);

            span_group = $("<span>", {
                'class': 'input-group-btn',

            });
            button_for_close = $('<button>', {
                'class': 'btn btn-primary',
                'type': 'button',
                'onclick': '$(this).parent().parent().remove()'

            }).html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>');
            span_group.append(button_for_close);
            input_group.append(newselect);
            input_group.append(span_group);
            input_group.insertBefore($(button_add_new_semester));
            //input_group.prepend('<hr>');
            $('.selectpicker').selectpicker('refresh');

        }

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

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

                $(select).parent().after(new_div)

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


        }


        GlobalTransCategories = '';

        function fetchEverything(li) {
            var outcome_id = $(li).data('outcome-id');
            var name = $(li).data('outcome-name');
            var semester_id = $(li).data('semester-id');
            var annual_plan_id = $(li).data('annual-plan');
            var typ_semester_outcome_id = $(li).data('typ-semester-outcome-id');
            $('#theChange').data('annual-plan', annual_plan);
            $.post(
                "{{ URL::action('AnnualPlansController@fetchReportWithOutcome') }}", {
                    semester_id: semester_id,
                    outcome_id: outcome_id,
                    program_id: {{ $program->id }},
                    annual_plan_id: annual_plan_id,
                    typ_semester_outcome_id: typ_semester_outcome_id
                },
                function(outcome) {
                        console.log("outcome: " + JSON.stringify(outcome));                
                    if (outcome.objectives2) {
                        $('table').show();
                        $('#outcome-display').parent().show();
                        $('#outcome-display .panel-title').html(name);
                        $('#allLists').empty();
                        $('#levelTabs').empty();
                        $('.no-outcome').hide();
//                         console.log("outcome: " + outcome.jSon());
                        if (outcome.outcome_program_goal) {
                            outcome.outcome_program_goal = outcome.outcome_program_goal.expected_target;
                        } else {
                            outcome.outcome_program_goal = 'It has not been defined';
                        }
                        GlobalTransCategories = outcome.transformative_actions_categories_html;
                        var outcomeHTML = "<h4>Performance of Students by Learning Outcome</h4>" +
                            '<h5 style = "display: inline; margin:30px;">Target to achieve the learning outcome: </h5>' +
                            '<p  style = "display: inline;"> <i> ' + outcome.expected_outcome +
                            '% or more of the attempts </i>' + '</p>' +
                            '<br><h5 style = "display: inline; margin:30px;">Expected percent of students achieving the target by learning outcome: </h5>' +
                            '<p  style = "display: inline;"> <i>' + outcome.outcome_program_goal + '%</i></p>';
                        $('#outcomeInfo').html('<p class="outcome-definition">' + outcome.definition + '</p>' +
                            outcomeHTML);
                        //theStudentOutcomeTable = $("<table/>");
                        //theStudentOutcomeTable.hide();
                        ///$('#outcomeInfo').append(theStudentOutcomeTable);



                        wholeDict = {};


                        tableStudent = $('<table/>', {
                            'class': 'table table-striped table-condensed datatable'
                        });
                        tableStudent.html('<thead><tr>' +
                            '<th>Student</th>' +
                            '<th>Criteria Attempted</th>' +
                            '<th>Criteria Achieved</th>' +
                            '<th>Percentage</th>' +
                            '<th>Outcome Achieved</th>' +
                            '</tr></thead><tbody></tbody>');
                        first_objective_id = outcome.objectives2[0].id;
                        $.each(outcome.objectives2, function(index, objective) {

                            li = $('<li/>', {
                                'role': 'presentation',
                                'id': 'li_for_' + objective.objective_id
                            });
                            a = $('<a/>', {
                                'data-toggle': 'tab',
                                'id': 'a_for_' + objective.objective_id,
                                'href': '#' + objective.objective_id,
                                'role': 'tab'
                            }).html('Objective ' + (index + 1));
                            li.append(a);
                            $('#levelTabs').append(li);
                            objective_title = "<h3>" + objective.text + '</h3>';
                            div = $('<div/>', {
                                'role': 'tabpanel',
                                'class': 'tab-pane',
                                'id': objective.objective_id
                            }).html(objective_title);




                            div.appendTo($('#allLists'))

                            div.append(
                                '<p>The following results are from the courses in the selected semester with the focused criteria in the selected annual plan</p>'
                            );




                            if (objective.courses) {
                                $.each(objective.courses, function(index, course_code) {
                                    if (course_code.criteria.length) {

                                        $.each(course_code.students, function(index, student) {
                                            if (wholeDict[student.student_id] === undefined) {
                                                wholeDict[student.student_id] = {
                                                    'student': student.student_id,
                                                    'criteria_attempted': 0,
                                                    'criteria_achieved': 0
                                                }

                                            }
                                            wholeDict[student.student_id][
                                                    "criteria_attempted"
                                                ] += student
                                                .criteria_attempted;
                                            wholeDict[student.student_id][
                                                    "criteria_achieved"
                                                ] += student
                                                .criteria_achieved;

                                        });
                                        /*div.append(
                                            '<p>The following results are from the courses in the selected semester with the focused criteria in the selected annual plan</p>'
                                        );*/
                                        table = $('<table/>', {
                                            'class': 'table table-striped table-condensed datatable'
                                        }).html('<thead><th>Criterion</th><th>' +
                                            'Number of Students Assessed </th>' +
                                            '<th>Number of students that achieved the target</th></thead>'
                                        );
                                        tbody = $('<tbody/>')
                                        $.each(course_code.criteria, function(index, criterion) {

                                            tr = $('<tr/>').append(
                                                "<td>" + criterion.name + "</td>" +
                                                "<td>" + criterion.criteria_attempted +
                                                "</td>" +
                                                "<td>" + criterion.criteria_achieved +
                                                "</td>"
                                            );
                                            tbody.append(tr);
                                        });
                                        table.append(tbody);
                                        Course_section = '<h3>' + course_code.code + ' ' +
                                            course_code.number + '</h3><hr>';

                                        div.append(Course_section)
                                        div.append('<h4> Criteria Assessed in ' + course_code.code +
                                            ' ' + course_code.number + '</h4>')
                                        div.append(table);
                                        if (course_code.transforming_actions.length) {
                                            table_for_transformative_actions = $('<table>', {
                                                'class': 'table table-striped table-condensed datatable'
                                            }).html(
                                                '<thead><th>Transformative Actions Proposed in Annual Plan</th>' +
                                                '<th>Follow up </th>' +
                                                '</thead>'
                                            );
                                            tbody_for_transformative_actions = $('<tbody>');

                                            $.each(course_code.transforming_actions, function(index,
                                                transformative_action) {

                                                button_for_followup = $('<button>', {
                                                    'class': 'btn btn-secondary',
                                                    'onclick': 'give_follow_up_questions(' +
                                                        transformative_action.id +
                                                        ', "' + outcome.semester_info
                                                        .code + '", ' + outcome
                                                        .semester_info.id + ')'
                                                }).html('Follow Up Questions');
                                                table_row = "<tr>" +
                                                    '<td><p><strong>' + transformative_action
                                                    .at_text + ': </strong>' +
                                                    transformative_action.description +
                                                    '</p></td>' +
                                                    '<td>' + button_for_followup.prop(
                                                        'outerHTML') + '</td></tr>';

                                                tbody_for_transformative_actions.append(
                                                    table_row)


                                            })
                                            table_for_transformative_actions.append(
                                                tbody_for_transformative_actions);
                                            div.append('<hr><h4>Transformative actions for ' +
                                                course_code.code + ' ' + course_code.number +
                                                '</h4>')
                                            div.append(table_for_transformative_actions);
                                            div.append('<hr>');


                                            //table_for_transformative_actions.DataTable();
                                        }
                                        the_drawn_transformative_future_html =
                                            draw_transformative_future_course(course_code, outcome
                                                .transformative_actions_categories_html);
                                        div.append(the_drawn_transformative_future_html);
                                        $('.selectpicker').selectpicker('refresh');


                                        table.DataTable();


                                    }




                                })




                            } else {
                                div.append('<div class="no-outcome alert alert-info"' +
                                    '<p>No Course in plan has assessed yet</p>' +
                                    '</div>')
                            }


                        })

                        draw_transformative_actions(outcome.transforming_actions, outcome.semester_info.id)
                        draw_comment_section(typ_semester_outcome_id, outcome.comments);

                        //$('#a_for_'+first_objective_id).click();
                        theArray = [];

                        $('#tableOutcome').html(tableStudent);
                        //tableStudent.appendTo($('#outcomeInfo'));

                        tableStudent = tableStudent.DataTable({
                            dom: 'Bfrtip',
                            buttons: [
                                'csv', 'excel', 'pdf', 'print'
                            ]
                        });
                        students_attempted = 0;
                        students_achieved = 0;
                        $.each(wholeDict, function(key, dict) {


                            if (dict.criteria_attempted) {
                                students_attempted += 1;
                                percentage = ((dict.criteria_achieved / dict.criteria_attempted) * 100).toFixed(
                                    2);
                                if (parseFloat(percentage) >= parseFloat(outcome.expected_outcome)) {
                                    achieved = "Yes"
                                    students_achieved += 1;
                                } else achieved = "No"
                            } else {
                                percentage = "N/A"
                                achieved = "N/A"
                            }
                            tableStudent.row.add([
                                dict.student,
                                dict.criteria_attempted,
                                dict.criteria_achieved,
                                percentage,
                                achieved

                            ]);
                        })

                        tableStudent.draw();

                        if (students_attempted) {
                            studentPercentage = ((students_achieved / students_attempted) * 100).toFixed(2);
                            if (parseFloat(studentPercentage) >= parseFloat(outcome.outcome_program_goal)) {
                                FinalReport = "<p style = 'margin: 30px; '><strong>Results for " + outcome.name +
                                    ": </strong><em style = 'color: green'>" +
                                    studentPercentage + "% </em></p>";
                            } else {
                                FinalReport = "<p style = 'margin: 30px'><strong>Results for " + outcome.name +
                                    ": </strong><em style = 'color: red'>" +
                                    studentPercentage + "% </em></p>";

                            }
                        }
                        else{
                            FinalReport = "<p style = 'margin: 30px'><strong>Results for " + outcome.name +
                                    ": </strong><em style = 'color: red'>" +
                                    0+ "% </em></p>";
                        }

                        $("#outcomeInfo").append(FinalReport)









                        /* table.row.add([
                              objectivesHTML,
                              courseshtml,
                              
                              courseTAhtml
                              
                            ]);
                            table.draw();
                           */
                    } else {
                        $('table').hide();
                    }









                }

            );

        }

        function give_follow_up_questions(trans_id, semester_code, semester_id) {


            $.ajax({
                type: 'POST',
                url: "{{ URL::action('TransformativeActionsController@fetchStatus') }}",
                data: {
                    trans_id: trans_id,
                    semester_id: semester_id
                },
                success: function(transformative_action_with_status) {
                    transformative_action = transformative_action_with_status[0];

                    $('#transformative_modal_title').html('<strong>' + transformative_action.at_text +
                        '</strong>: ' + transformative_action.description);


                    $('input[name="implemented"]').prop('checked', false);
                    $('input[name="useful"]').prop('checked', false);
                    $('#comments').val(' ');
                    $('#useful_radio_div').hide();
                    $('#comment_div').hide();

                    if (transformative_action['status']) {
                        transformative_action['status'].accomplished;
                        $('input[name="implemented"][value="' + transformative_action['status'].accomplished +
                            '"]').prop('checked', true);
                        if (transformative_action['status'].accomplished) {
                            $('#useful_radio_div').show();
                            $('input[name="useful"][value="' + transformative_action['status'].it_was_useful +
                                '"]').prop('checked', true);
                            $('#implement_textarea').html(
                                "Explain briefly details about the implementation of this transformative action"
                            );

                        } else {
                            $('#implement_textarea').html(
                                "Explain briefly why this transformative action was not implemented")
                        }
                        $('#comment_div').show();
                        $('#comments').val(transformative_action['status'].comments);


                    }


                    $('#was_it_implemented').html(
                        'Was this transformative action implemented during Semester ' + semester_code);



                    $('#modal-status-trans').modal();
                    $('#save_transformative_info').attr('onclick', 'saveTransReport(' + trans_id + ',' +
                        semester_id + ',"modal")');

                },
                async: true
            });

        }

        function saveTransReport(trans_id, semester_id, type_of_input) {
            $('.alert-dismissible').remove();
            isEverythingOkay = true;
            if (type_of_input == 'modal') {
                comments = $('#comments').val();

                if (comments.trim().length === 0) {
                    alert = $('<div/>', {
                        'class': 'alert alert-danger alert-dismissible',
                        'role': 'alert'
                    })
                    button = $('<button/>', {
                        'type': 'button',
                        'class': 'close',
                        'data-dismiss': 'alert',
                        'alert-label': 'close'
                    }).html('<span aria-hidden="true">×</span>');
                    alert.append(button);
                    alert.append('<strong>Please write a valid comment </strong>')

                    $('#implement_texarea').after(alert);
                    isEverythingOkay = false;
                    $('html, body').animate({
                        scrollTop: $(alert).offset().top
                    }, 500);
                    $(alert).focus();

                }
                accomplished = parseInt($('input[name="implemented"]:checked').val());
                if (accomplished === undefined) {
                    alert = $('<div/>', {
                        'class': 'alert alert-danger alert-dismissible',
                        'role': 'alert'
                    })
                    button = $('<button/>', {
                        'type': 'button',
                        'class': 'close',
                        'data-dismiss': 'alert',
                        'alert-label': 'close'
                    }).html('<span aria-hidden="true">×</span>');
                    alert.append(button);
                    alert.append('<strong>Check if it was implemented </strong>')

                    $('#was_it_implemented').after(alert);
                    isEverythingOkay = false;
                    $('html, body').animate({
                        scrollTop: $(alert).offset().top
                    }, 500);
                    $(alert).focus();
                }

                if (accomplished == 1) {
                    was_it_useful = $('input[name="useful"]:checked').val();
                    if (was_it_useful === undefined) {
                        alert = $('<div/>', {
                            'class': 'alert alert-danger alert-dismissible',
                            'role': 'alert'
                        })
                        button = $('<button/>', {
                            'type': 'button',
                            'class': 'close',
                            'data-dismiss': 'alert',
                            'alert-label': 'close'
                        }).html('<span aria-hidden="true">×</span>');
                        alert.append(button);
                        alert.append('<strong>Check if it was implemented </strong>')

                        $('#useful_radio_div').prepend(alert);
                        isEverythingOkay = false;
                        $('html, body').animate({
                            scrollTop: $(alert).offset().top
                        }, 500);
                        $(alert).focus();
                    }
                } else was_it_useful = 0;
                results = "";
            } else {
                comments = $('#comments_for_' + trans_id).val();
                if (comments.trim().length === 0) {
                    alert = $('<div/>', {
                        'class': 'alert alert-danger alert-dismissible',
                        'role': 'alert'
                    })
                    button = $('<button/>', {
                        'type': 'button',
                        'class': 'close',
                        'data-dismiss': 'alert',
                        'alert-label': 'close'
                    }).html('<span aria-hidden="true">×</span>');
                    alert.append(button);
                    alert.append('<strong>Write a valid comment before saving! </strong>')

                    $('#comments_for_' + trans_id).before(alert);
                    isEverythingOkay = false;
                    $('html, body').animate({
                        scrollTop: $(alert).offset().top
                    }, 500);
                    $(alert).focus();
                }
                accomplished = 1;
                was_it_useful = $('input[name="useful_for_' + trans_id + '"]:checked').val();
                if (was_it_useful === undefined) {
                    alert = $('<div/>', {
                        'class': 'alert alert-danger alert-dismissible',
                        'role': 'alert'
                    })
                    button = $('<button/>', {
                        'type': 'button',
                        'class': 'close',
                        'data-dismiss': 'alert',
                        'alert-label': 'close'
                    }).html('<span aria-hidden="true">×</span>');
                    alert.append(button);
                    alert.append('<strong>Please check if it was helpful </strong>')

                    $('input[name="useful_for_' + trans_id + '"]').eq(0).parent().before(alert);
                    isEverythingOkay = false;
                    $('html, body').animate({
                        scrollTop: $(alert).offset().top
                    }, 500);
                    $(alert).focus();
                }
                results = $('#results_for_' + trans_id).val();
                if (results.trim().length === 0) {
                    alert = $('<div/>', {
                        'class': 'alert alert-danger alert-dismissible',
                        'role': 'alert'
                    })
                    button = $('<button/>', {
                        'type': 'button',
                        'class': 'close',
                        'data-dismiss': 'alert',
                        'alert-label': 'close'
                    }).html('<span aria-hidden="true">×</span>');
                    alert.append(button);
                    alert.append('<strong>Please check if it was helpful </strong>')

                    $('#results_for_' + trans_id).before(alert);
                    isEverythingOkay = false;
                    $('html, body').animate({
                        scrollTop: $(alert).offset().top
                    }, 2000);
                    $(alert).focus();
                }



            }

            if (isEverythingOkay == false) return;

            $.post(
                "{{ URL::action('TransformativeActionsController@saveTransStatus') }}", {
                    semester_id: semester_id,
                    trans_id: trans_id,
                    results: results,
                    comments: comments,
                    accomplished: accomplished,
                    was_it_useful: was_it_useful,
                },
                function(message) {
                    if (type_of_input == 'modal') {
                        $('#modal-status-trans').modal("toggle");
                    } else {
                        alert = $('<div/>', {
                            'class': 'alert alert-success alert-dismissible',
                            'role': 'alert'
                        })
                        button = $('<button/>', {
                            'type': 'button',
                            'class': 'close',
                            'data-dismiss': 'alert',
                            'alert-label': 'close'
                        }).html('<span aria-hidden="true">×</span>');
                        alert.append(button);
                        alert.append('<strong>Saved! </strong>')
                        $(type_of_input).parent().prepend(alert);
                    }

                }
            )
        }













        $('#allOutcomes').hide();



        function fetchInfo(id) {
            annual_id = $("#" + id).val();
            program_id = {{ $program->id }};
            $.post("{{ URL::action('AnnualPlansController@fetchInfo') }}", {
                    id: annual_id,
                    program_id: program_id


                },
                function(json) {

                    div = $('<div/>', {
                        'class': 'list-group',
                        'id': 'list'
                    });
                    if (json.outcomes.first) {
                        header5 = $('<h5/>', {
                            'style': "padding-left: 10px"
                        }).html("First Semester");
                        div.append(header5);
                        list = '';
                        for (outcome in json.outcomes.first) {
                            list +=
                                "<li style='padding-left: 25px' onclick = 'fetchEverything(this)' data-annual-plan = '" +
                                json.annual_plans.id + "' data-typ-semester-outcome-id ='" + json.outcomes.first[
                                    outcome].typ_semester_outcome_id + "' data-semester-id = '" + json.allSemesterOrder
                                .first.id +
                                "' data-outcome-id='" + json.outcomes.first[outcome].id + "' data-outcome-name ='" +
                                json
                                .outcomes.first[outcome].name + "' class='list-group-item' >" + json.outcomes.first[
                                    outcome]
                                .name + " </li>";

                        }
                        div.append(list);
                    }
                    if (json.outcomes.second) {
                        header4 = $('<h5/>', {
                            'style': "padding-left: 10px"
                        }).html("Second Semester");
                        div.append(header4);
                        list = '';
                        for (outcome in json.outcomes.second) {
                            list +=
                                "<li style='padding-left: 25px' onclick = 'fetchEverything(this)' data-annual-plan = '" +
                                json.annual_plans.id + "' data-typ-semester-outcome-id ='" + json.outcomes.second[
                                    outcome].typ_semester_outcome_id + "'data-semester-id = '" + json.allSemesterOrder
                                .second.id +
                                "' data-outcome-id='" + json.outcomes.second[outcome].id + "' data-outcome-name ='" +
                                json
                                .outcomes.second[outcome].name + "' class='list-group-item' >" + json.outcomes.second[
                                    outcome].name + " </li>";

                        }
                        div.append(list);
                    }
                    html = div[0].innerHTML;

                    $("#allOutcomes").html(div[0].innerHTML);
                    $("#allOutcomes").show();

                    //create button for print
                    div_btn_group = $('<div>', {
                        'class': 'btn-group-vertical',
                        'role': 'group'
                    });
                    button_save = $('<button>', {
                        'class': ' btn btn-lg btn-primary btn-block',
                        'type': 'button',
                        'onclick': 'check_if_ready(' + annual_id + ')'
                    }).html('Submit Annual Report');
                    button_print = $("<button>", {
                        "class": 'btn btn-lg btn-primary btn-block',
                        "type": "button",
                        "onclick": "window.location.href = " +
                            "'{{ URL::action('AnnualPlansController@printAnnualReport') }}" +
                            "/" +
                            annual_id + "'",
                    }).html("Print Report");
                    div_btn_group.append(button_print);
                    div_btn_group.append(button_save);


                    $('#printButton').html(div_btn_group);


                },
                "json",
            );

        }

        function check_if_ready(annual_id) {
            $.post(
                "{{ URL::action('AnnualPlansController@checkIfReady') }}", {
                    annual_id: annual_id
                },
                function(courses_with_missing_data) {

                    if (courses_with_missing_data.outcomes.length > 0 || courses_with_missing_data.courses.length > 0) {
                        //id="submit-modal">

                        //This means there is still data to be filled before submit.

                        $('#submit-modal-title').html("There is still some data to be filled. ")

                        //close button  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

                        button = $('<button>', {
                            'class': 'btn btn-secondary',
                            'type': 'button',
                            'data-dismiss': 'modal'
                        }).html('Close');
                        $('#submit-modal-footer').html(button);

                        $('#submit-modal-body').html("These are the following transformative actions");
                        if (courses_with_missing_data.courses.length > 0) {
                            div_for_courses = $("<div>", {
                                'id': 'courses_ta',

                            }).html("<h4>These are the Courses Transformative Actions need to be filled</h4>")
                            ol_course_ta = $("<ol>", {
                                'id': 'course_ta',
                                'type': 'I'
                            });
                            div_for_courses.append(ol_course_ta);
                            //"<ol id='course_ta' type='I'>");

                            //div_for_outcomes
                            $('#submit-modal-body').append(div_for_courses)

                            $.each(courses_with_missing_data.courses, function(index, info) {
                                /*
                                    $array_to_be_appended = [
                                        'course_name' => $course->code . '-' . $course->number,
                                        'objective' => $objective_info,
                                        'outcome' => $outcome_info,
                                        'transformative_action_title' => $ta->at_text,
                                        'transformative_action_description' => $ta->description
                                    ];
                                */

                                selector = $('#course_typ_outcome_' + info.outcome.typ_semester_outcome_id);
                                if (selector.length === 0) {
                                    li_outcome = $('<li>').html(info.outcome.name);
                                    ol = $("<ol>", {
                                        'id': 'course_typ_outcome_' + info.outcome
                                            .typ_semester_outcome_id,
                                        'type': 'A'
                                    });
                                    li_outcome.append(ol);
                                    $("#course_ta").append(li_outcome);





                                    //selector = $('<div>').html(info.outcome.typ_semester_outcome_id);
                                    //selector.append('<ol type = "A">');
                                    //objective_li = $("<li>");
                                    //objective_id = $("<div>",{
                                    //    'class':'typ-objective-'+info.objective.typ_semester_objective_id,

                                    //}).html();
                                    //li.append(selector);
                                }

                                selector = $("#course_typ_objective_" + info.objective
                                    .typ_semester_objective_id)
                                if (selector.length === 0) {
                                    li_objective = $("<li>").html(info.objective.text);
                                    ol_objective = $("<ol>", {
                                        'id': 'course_typ_objective_' + info.objective
                                            .typ_semester_objective_id,
                                        'type': '1'
                                    });
                                    li_objective.append(ol_objective);
                                    $('#course_typ_outcome_' + info.outcome.typ_semester_outcome_id).append(
                                        li_objective);

                                }
                                selector = $("#course_ul_" + info.typ_semester_course_id)
                                if (selector.length === 0) {
                                    li_course = $("<li>").html(info.course_name);
                                    ol_course = $("<ul>", {
                                        'id': "course_ul_" + info.typ_semester_course_id,
                                    });
                                    li_course.append(ol_course);
                                    $('#course_typ_objective_' + info.objective.typ_semester_objective_id)
                                        .append(li_course);
                                }
                                li_ta = $('<li>').html('<p><strong>' + info.transformative_action_title +
                                    ': </strong>' + info.transformative_action_description + '</p>');
                                $("#course_ul_" + info.typ_semester_course_id).append(li_ta);

                            });
                            //$('#submit-modal-body').append("</ol>")



                            //$('#submit-modal-footer').html(button);
                        }

                        if (courses_with_missing_data.outcomes.length > 0) {
                            div_for_outcomes = $("<div>", {
                                'id': 'outcomes_ta',

                            }).html("<h4>These are the Program Transformative Actions need to be filled</h4>");


                            ol = $('<ol>', {
                                'id': 'list_for_outcomes',
                                'type': 'I'
                            });
                            ol.appendTo(div_for_outcomes);
                            $('#submit-modal-body').append(div_for_outcomes);
                            $.each(courses_with_missing_data.outcomes, function(index, info) {

                                if ($("#outcome_ta_for_" + info.typ_semester_outcome_id).length === 0) {
                                    li_outcome = $("<li>").html(info.outcome_name);
                                    li_outcome.appendTo($("#list_for_outcomes"));
                                    ol = $('<ol>', {
                                        'id': "outcome_ta_for_" + info.typ_semester_outcome_id
                                    })
                                    ol.appendTo(li_outcome);
                                }

                                li = $('<li>').html('<p><strong>' + info.transformative_action_title +
                                    ': </strong>' + info.transformative_action_description + '</p>');
                                $('#outcome_ta_for_' + info.typ_semester_outcome_id).append(li);

                            })
                            // div_for_outcomes.append(ol);

                        }
                    } else {
                        button = $('<button>', {
                            'class': 'btn btn-secondary',
                            'type': 'button',
                            'data-dismiss': 'modal'
                        }).html('Close');
                        button_for_save = $("<button>", {

                            'class': 'btn btn-primary',
                            'type': 'button',
                            'onclick': "postAnnualReport(" + annual_id + ")"


                        }).html("Submit Annual Report");

                        $("#submit-modal-title").html("Are you sure you want to submit this report?");
                        $("#submit-modal-body")
                            .html(
                                "You can submit again later, but may need to give explination to administration on why was it resubmitted." +
                                "When submitting, please be patient. It may take a while."
                            );

                        $('#submit-modal-footer').html(button);


                        $("#submit-modal-footer").append(button_for_save);

                    }
                    $("#submit-modal").modal('toggle');

                }


            )
        }

        function postAnnualReport(annual_id) {
            $.post(
                "{{ URL::action('AnnualPlansController@postAnnualReport') }}/" + annual_id, {},
                function(message) {
                    if (message = '200') {
                        $("#submit-modal").modal('toggle');
                        alert = $('<div/>', {
                            'class': 'alert alert-success alert-dismissible',
                            'role': 'alert'
                        })
                        button = $('<button/>', {
                            'type': 'button',
                            'class': 'close',
                            'data-dismiss': 'alert',
                            'alert-label': 'close'
                        }).html('<span aria-hidden="true">×</span>');
                        alert.append(button);
                        alert.append(
                            '<strong>Report is complete, You can check it out in View Annual Reports or Print Report </strong>'
                        )
                        alert.appendTo($("#alert-for-save"));
                    }

                    window.open("{{URL::action('AnnualPlansController@printAnnualReport')}}/"+annual_id+'/1', "_blank");



                });
        }
    </script>




@stop

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