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._navigation')
    @elseif(Auth::user()->role == 2)
        @include('local.managers.sCoords._navigation')
    @elseif(Auth::user()->role == 3)
        @include('local.managers.pCoords._navigation')
    @elseif(Auth::user()->role == 4)
        @include('local.professors._navigation')
    @endif
@stop
@section('main')

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


    <div class="row">
        <div class="col-md-3">
            <select class="form-control selectpicker" 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>
        </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">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 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 -->
    <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 for Outcome</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>')
        if(outcome_comments.length){
            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();
            $.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();
         });
         
        }

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



           
       

        
        }

        function add_comments_to_plan(edit_id = null){
            $('#add_comments_button').hide();
            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();
                        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').prepend('<li role = "presentation" id = "transformative_for_outcome">'+
                            '<a data-toggle="tab" id="a_for_ta_outcome" href="#transformative_actions" role="tab" >Transformative Actions to Outcome</a>'+
                            '</li>');
                $('#allLists').prepend('<div role="tabpanel" class="tab-pane" id="transformative_actions"></div>');
                        
                $('#transformative_actions').html('<h3>Tranformative actions for Learning Outcome')
                $.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+')',
                        '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>');

            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" 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',
                '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'
            });
            options_for_semesters='<option value = "0">Nothing Selected</option>';
            $.each(course_code.future_typ_course_id, 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', 
                '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'
            }).html('Cancel');
            save_button = $('<button>',{
                'class':'btn btn-primary',
                '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);

            return_complete_div.append('<h3>Future Transformative Actions for '+course_code.code+' '+course_code.number);
            

            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 saveFutureTrans(typ_semester_course_id, course_code, course_number){
            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;
            }
            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
                },
                function(data){
                    alert('estamos');
                }
            )

        }

        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'
            }).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) {
                    if (outcome.objectives) {
                        $('table').show();
                        $('#outcome-display').parent().show();
                        $('#outcome-display .panel-title').html(name);
                        $('#allLists').empty();
                        $('#levelTabs').empty();
                        $('.no-outcome').hide();
                        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 learning by learning outcome: </h5>' +
                            '<p  style = "display: inline;"> <i>>= ' + outcome.expected_outcome +
                            ' 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.objectives[0].id;
                        $.each(outcome.objectives, function(index, objective) {

                            li = $('<li/>', {
                                'role': 'presentation',
                                'id':'li_for_'+objective.id
                            });
                            a = $('<a/>', {
                                'data-toggle': 'tab',
                                'id': 'a_for_'+objective.id,
                                'href': '#' + 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.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 = "<br><p><strong>The students achieved the Learning Outcome with " +
                                    studentPercentage + "% of students achieving.</strong></p>";
                            } else {
                                FinalReport = "<br><p><strong>The students did not achieve the Learning Outcome with " +
                                    studentPercentage + "% of students achieving.</strong></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);
                        }
                        $('#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){
            if(type_of_input=='modal'){
                comments = $('#comments').val();
                accomplished = parseInt($('input[name="implemented"]:checked').val());
                if(accomplished)
                was_it_useful = $('input[name="useful"]:checked').val();
                else was_it_useful =0;
                results = "";
            }
            else{
                comments = $('#comments_for_'+trans_id).val();
                accomplished = 1;
                was_it_useful = $('input[name="useful_for_'+trans_id+'"]:checked').val();
                results = $('#results_for_'+trans_id).val();
            }

            $.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){
                    alert(message);
                }
            )
        }



        function posttoTransAnnual(annual_id, selectTransId, typ_course_id) {
            ta = $("#" + selectTransId).val();
            old_ta = $("#" + selectTransId).data('old-TA');
            if (ta == "0") return;
            $.post("../annual-plan-postTA", {
                    annual_id: annual_id,
                    TA_id: ta,
                    typ_course_id: typ_course_id,
                    old_ta: old_ta
                },
                function(message) {

                    $("#" + selectTransId).data('old-TA', ta);

                }
            )
        }

        function addTAselect(options, master_div, annual_plan_id, objective_id, typ_course_id, selected_ta) {
            var $div = $('<div/>', {

                'class': 'form-group '
            });
            counter = parseInt($('#' + master_div).data('amount-ta'));

            var selectTA = $('<select/>', {
                'class': "selectpicker form-control",
                'data-live-search': 'true',
                'data-old-TA': '0',
                'data-width': '180px',

                'id': 'transformativeForObjective' + master_div + '_' + counter,
                'onchange': 'posttoTransAnnual(' + annual_plan_id + ', "transformativeForObjective' + master_div +
                    '_' + counter + '", ' + typ_course_id + ')'

            });
            selectTA.append(options);

            selectTA.appendTo($div);
            selectTA.val(selected_ta);
            selectTA.data('old-TA', selected_ta);
            selectTA.selectpicker('refresh');
            $span = $('<span/>', {
                'id': 'close',
                'onclick': '  postDeleteTA(' + annual_plan_id + ', "transformativeForObjective' + master_div + '_' +
                    counter + '", ' + typ_course_id +
                    '); this.parentNode.parentNode.removeChild(this.parentNode);return false;'
            }).html('x');
            $span.appendTo($div);
            $div.append("<br><br>");
            $('#' + master_div).append("<br>");

            $div.appendTo($('#' + master_div));
            $('#' + master_div).data('amount-ta', counter + 1);


        }

        function postDeleteTA(annual_id, selectTransId, typ_course_id) {
            ta = $("#" + selectTransId).val();


            if (ta == "0") return;
            $.post("../annual-plan-deleteTA", {
                annual_id: annual_id,
                TA_id: ta,
                typ_id: typ_course_id,

            });
            parent = $("#" + selectTransId).parent().parent().parent();
            counter = parseInt(parent.data('amount-ta'));
            parent.data('amount-ta', counter - 1);
        }

        function postToAnnualPlans(typ_course_id, criteria_select) {
            var criteria = $('#' + criteria_select).val();
            var oldCriteria = $('#' + criteria_select).data('old-criteria');
            var criteriaNode = document.getElementById(criteria_select).parentNode.parentNode.parentNode;

            var annual = criteriaNode.dataset.annualPlan;
            $.post("../annual-plan-postOnChange", {
                    criteria: criteria,
                    typ_course_id: typ_course_id,
                    annual_plan: annual,
                    old_criteria: oldCriteria
                },
                function(message) {
                    if (message == "Duplicate entry, please choose another criteria.") {
                        alert(message)
                    } else {
                        $('#' + criteria_select).data('old-criteria', criteria);
                        changed = true;
                    }

                })
        }


        function addCriteriaTest(div, new_id_for_select, typ_course_id, i = null, options) {

            if (!i) amount_select = $('#' + div).data("amount-select");
            else amount_select = i;
            $select = $('<select/>', {
                'class': "selectpicker form-control",
                'data-live-search': 'true',
                'data-old-criteria': '0',
                'data-width': '180px',

                'id': 'criteriaFor' + new_id_for_select + '_' + amount_select,
                'onchange': 'postToAnnualPlans(' + typ_course_id + ', "criteriaFor' + new_id_for_select + '_' +
                    amount_select + '")'

            })

            var $div = $('<div/>', {
                'id': 'courseSelect_' + new_id_for_select + '_' + amount_select,
                'class': 'form-group '
            });

            $select.append(options);
            $select.appendTo($div);
            $span = $('<span/>', {
                'id': 'close',
                'onclick': '  postDelete(' + typ_course_id + ', "criteriaFor' + new_id_for_select + '_' +
                    amount_select + '"); this.parentNode.parentNode.removeChild(this.parentNode);return false;'
            }).html('x');
            $div.append($span);
            $div.append("<br><br>")
            $('#' + div).append("<br>");
            $div.appendTo($("#" + div));



            $select.selectpicker('refresh');




            $("#" + div).data("amount-select", amount_select + 1);

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

        function postDelete(typ_course_id, criteria_select) {
            var criteria = $('#' + criteria_select).val();
            var oldCriteria = $('#' + criteria_select).data('old-criteria');
            var criteriaNode = document.getElementById(criteria_select).parentNode.parentNode.parentNode;

            var annual = criteriaNode.dataset.annualPlan;
            $.post("../annual-plan-deleteCriteria", {
                criteria: criteria,
                typ_course_id: typ_course_id,
                annual_plan: annual,
                old_criteria: oldCriteria
            });

        }

        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();

                },
                "json",
            );

        }


        function deleteObjective(objectiveSelectDiv, closeObj) {

            $('#' + objectiveSelectDiv).remove();
            $('#' + closeObj).remove();
            $('#' + div).data("amount-select", $('#' + div).data("amount-select") - 1);

        }
    </script>




@stop

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