@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._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">
            {{-- <a role="button" class="btn btn-secondary"
                href="{{ URL::action('AnnualPlansController@viewAllPlans', [$program->id]) }}">View Plans</a> --}}

            <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->id }}>Plan {{ $an_plan->academic_year }}</option>
                @endforeach
            </select>
            <br>



            <div id='allOutcomes'>

            </div>
            <hr>
            <div id="printButton">

            </div>
        </div>


        <div class="col-md-9">
            <div id="expected-outcome" class="panel panel-default" data-semester-id="">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Expected Target Outcomes
                    </h3>
                    <input style="width: 150px;" min="0" class="form-control" type="number">
                </div>
            </div>
            <div id="outcome-display" class="panel panel-default">
                <div class="panel-heading">
                    <h4 class=" panel-title">
                        Primer Semestre 2019-2020
                    </h4>
                </div>
                <div class="panel-body">
                    <h3 id='criteria_for_courses'></h3>
                    <p class="outcome-definition "></p>

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

                        </table>

                    </div>
                    <h3 id='transformative_title'></h3>
                    <div id='existing_transformative_actions'>
                        <div class="table-responsive">
                            <table class="table table-striped table-condensed datatable"
                                style="table-layout: fixed ; width : 100%" id='transformative_action_table'>
                                <thead>
                                    <tr id='transformative_columns'>
                                        <th>Title</th>
                                        <th>Description</th>
                                        <th>Type of Transformative Action</th>
                                        <th>Edit Or Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>

                            </table>

                        </div>


                    </div>

                    <input type='hidden' id='typ_semester_outcome_id' value='0'>
                    <div id='new_transformative_actions_to_outcome'>


                    </div>

                    <button class='btn btn-md btn-secondary button-add-transformative' id='add_trans_action'
                        onclick='addTransToPlan()'>
                        <span class='glyphicon glyphicon-plus'>

                        </span>
                        Add another Transformative Action
                    </button>
                    <hr>
                    {{-- <button type="button" class="btn btn-primary" id="submit_modal" data-toggle="modal"
                        data-target="#modal-submit" style="float: right">Submit Annual Plan</button> --}}

                </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-view-objective">
        <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><!-- /.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 -->

    <div class="modal fade" id="modal-submit">
        <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">Are you sure you want to submit plan?</h3>
                </div>
                <div class="modal-body">

                    Once submitted, you may not be able to edit the plan unless you ask for permission in the "Feedback"
                    section.
                    Make sure to check every learning outcome.

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick='submit_annual_plan()'>Submit Annual Plan</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</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
            // --------------------------------------------------------------------------
            $('#transformative_action_table').hide();
            // Hide accordion panel contents by default
            // $('.panel-group .panel-body').hide();

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

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

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

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

            // When list item is clicked, load corresponding info


        });
        //   function CreateOrEdit(id){
        //   //send data to the database
        //   console.log(id);
        //   annual_id = $("#"+id);
        //   console.log(console.log(annual_id));
        // }

        //Submit Plan

        /*function submit_annual_plan() {
            annual_plan_id = $('#annual_plan').val();
            $.post("{{ URL::action('AnnualPlansController@submitAnnualPlan') }}", {
                    annual_plan_id: annual_plan_id
                },
                function() {
                    location.reload();
                })
        }*/

        //fetch after submit
        function fetchEverythingSubmitted(li) {
            var id = $(li).data('outcome-id');
            var name = $(li).data('outcome-name');
            var semester = $(li).data('semester-id');
            var annual_plan = $(li).data('annual-plan');
            var typ_semester_outcome_id = $(li).data('typ-semester-outcome-id');
            $('#expected-outcome').data('semester-id', semester);
            $('#typ_semester_outcome_id').val(typ_semester_outcome_id);
            $('#theChange').data('annual-plan', annual_plan);
            $.post(
                "{{ URL::action('AnnualPlansController@fetchTheAnnualPlan') }}", {
                    id: id,
                    semester: semester,
                    typ_semester_outcome_id: typ_semester_outcome_id,
                    program_id: program_id
                },

                function(array) {

                    objectives = array.typ_objectives;
                    courses = array.typ_courses;
                    criteria_for_courses = array.courses_criteria;
                    courses_transformatives = array.courses_transformative_actions;
                    transformative_to_outcome = array.transformative_outcome;
                    var nextLetter = "A";
                    $('table').show();
                    $('#outcome-display').parent().show();
                    $('.no-outcome').parent().hide();

                    $('#criteria_for_courses').html('Criteria for Courses Associated to ' + name);
                    $('#transformative_title').html('Transformative Actions for ' + name);
                    $('#outcome-display .panel-title').html(name);

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

                    var expected_target = array.expected_target;

                    $('#expected-outcome .form-control').val(expected_target.expected_target);

                    $('#expected-outcome .form-control').prop('disabled', true);

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

                    annual_table = $('#annual_plan_table').DataTable();
                    annual_table.clear();
                    $.each(objectives, function(index, objective) {

                        var objectivesHTML = '<div class="criterion-field" data-typ-objective-id = "' +
                            objective.typ_semester_objective_id + '" onclick = "fetchObjectiveInfo(this)">';

                        objectivesHTML += '<strong>' + nextLetter + '.    ' + objective.text +
                            '</strong></div>';
                        courses_cell_html = '<div  id="typ_semester_objective_id_' + objective
                            .typ_semester_objective_id +
                            '"></div>';
                        transformative_cell_html = '<div id="transformative_typ_semester_objective_id_' +
                            objective
                            .typ_semester_objective_id +
                            '"></div>'

                        nextLetter = nextChar(nextLetter);
                        //$('#annual_plan_table').children().eq(1).append(objectivesHTML);

                        annual_table.row.add([
                            objectivesHTML,
                            courses_cell_html,
                            transformative_cell_html

                        ])


                    });
                    annual_table.draw();

                    $.each(courses, function(index, course) {
                        div_for_course_criteria = $('<div>', {
                            'id': 'criteria_for_course_' + course.typ_semester_course_id
                        });
                        div_for_course_transformative = $('<div>', {
                            'id': 'transformative_for_course_' + course.typ_semester_course_id
                        });


                        courseshtml = ' &#8226; [' + course.code + course.number + '] ' +
                            course.name + '<br>'
                        courseTAhtml = ' &#8226; [' + course.code + course.number + '] ' +
                            course.name + '<br>';
                        div_for_course_criteria.append(courseshtml);
                        div_for_course_transformative.append(courseTAhtml);
                        $('#typ_semester_objective_id_' + course.typ_semester_objective_id).append(
                            div_for_course_criteria);
                        $('#transformative_typ_semester_objective_id_' + course.typ_semester_objective_id)
                            .append(
                                div_for_course_transformative);



                    })
                    $.each(criteria_for_courses, function(index, criterion) {


                        criteriaHTML = '\t&nbsp;&nbsp; ' + (index + 1) + ". " + criterion.name + '\n\n<br>';
                        $('#criteria_for_course_' + criterion.typ_semester_course_id).append(criteriaHTML);

                    })
                    $.each(courses_transformatives, function(index, transformative_action) {
                        transformativeHTML = '\t&nbsp;&nbsp; ' + (index + 1) + ". " + transformative_action
                            .description +
                            '\n\n<br>';
                        $('#transformative_for_course_' + transformative_action.typ_semester_course_id).append(
                            transformativeHTML);
                    })
                    //remove edit or delete column



                    transformative_table = $('#transformative_action_table').DataTable();
                    transformative_table.clear();

                    $.each(transformative_to_outcome, function(index, transformative_action) {
                        transformative_table.row.add([
                            transformative_action.at_text,
                            transformative_action.description,
                            transformative_action.type_of_TA,
                            'cannot be editted'

                        ])
                    })
                    transformative_table.draw();
                    transformative_table.column(3).visible(false);







                    //var typ_objective_id = json.typ_objective_id[objectives[objective].id].id;


                });
        }

        function fetchObjectiveInfo(objective_div) {
            typ_objective_id = $(objective_div).data('typ-objective-id');
            objective = $(objective_div).html();

            $.ajax({
                type: 'POST',
                url: "{{ URL::action('AnnualPlansController@fetchObjectiveInfo') }}",
                data: {
                    typ_objective_id: typ_objective_id
                },
                success: function(courses) {

                    $('.modal-title').html(objective);
                    descriptions = '';
                    $('.modal-body').empty();
                    $.each(courses, function(index, course) {

                        $('.modal-body').append('<h4>' + course.code + ' ' + course
                            .number + ': ' +
                            course.name + '</h4>')
                        $('.modal-body').append(
                            '<br><p>The following course is tied to these criteria: </p>'
                        )
                        $.each(course.criteria, function(index, criterion) {
                            criterion_html =
                                '<h5 style ="text-indent: 15px;">' + (index +
                                    1) +
                                '. ' + criterion.name + '</h5>';
                            table = $('<table>', {
                                'style': 'margin-left:15px',
                                //'id':'criteria-'+criterion.id,
                                'class': "table table-striped table-condensed table-bordered"
                            });
                            thead = $('<thead/>');
                            tr = $('<tr/>');
                            for (i = 0; i < criterion.num_scales; i++) {
                                minimumScore = 1 + (i * (criterion.max_score /
                                    criterion
                                    .num_scales));
                                maximumScore = (1 + i) * (criterion.max_score /
                                    criterion
                                    .num_scales);
                                th = '<th>Scale ' + (i + 1) + '. (' +
                                    minimumScore + ' - ' +
                                    maximumScore + ')</th>';
                                tr.append(th);
                            }
                            thead.append(tr);
                            table.append(thead);
                            tbody = $('<tbody>')
                            tr_for_body = $('<tr>', {
                                'id': 'criterion_' + criterion.id
                            })
                            td_for_criteria = '';
                            $.each(criterion.scales, function(index, scale) {

                                td_for_criteria += '<td>' + scale
                                    .description + '</td>';
                            });
                            tr_for_body.html(td_for_criteria);
                            tbody.append(tr_for_body);
                            table.append(tbody);
                            $('.modal-body').append(criterion_html);
                            $('.modal-body').append(table);
                        })

                        $('.modal-body').append('<hr>')
                    });



                    $('#modal-view-objective').modal();

                },
                async: true
            });

        }

        function fetchEverything(li) {
            $('#close_button').click();
            var id = $(li).data('outcome-id');
            var name = $(li).data('outcome-name');
            var semester = $(li).data('semester-id');
            var annual_plan = $(li).data('annual-plan');
            var typ_semester_outcome_id = $(li).data('typ-semester-outcome-id');
            $('#expected-outcome').data('semester-id', semester);
            $('#typ_semester_outcome_id').val(typ_semester_outcome_id);



            $('#theChange').data('annual-plan', annual_plan);
            $.post(
                "../annual-plan-fetchTYP/{{ $program->id }}", {
                    id: id,
                    semester: semester,
                    typ_semester_outcome_id: typ_semester_outcome_id,
                },

                function(json) {



                    var table = $('#annual_plan_table').DataTable();

                    table.clear();

                    var optionsForTADict = {};




                    var objectives = json.objectives;
                    var courses = json.courses;
                    var criteria = json.criteria;
                    var selected_criteria = json.selected_criteria;
                    var nextLetter = "A";
                    if (courses) {
                        $('table').show();
                        $('#outcome-display').parent().show();
                        $('.no-outcome').parent().hide();

                        //Display title and definition
                        $('#outcome-display .panel-title').html(name);


                        var expected_target = json.expected_target;


                        //check the data type of the expected target   
                        //if the expected_target var is an empty array, set default value

                        $('#expected-outcome .form-control').val(expected_target.expected_target);

                        $('#criteria_for_courses').html('Criteria for Courses Associated to ' + name);
                        $('#transformative_title').html('Transformative Actions for ' + name);








                        //Empty table
                        table.clear();
                        var annual_plan = json.annual_plan.id;
                        for (objective in objectives) {
                            var typ_objective_id = json.typ_objective_id[objectives[objective].id].id;
                            var objectivesHTML =
                                '<div class="criterion-field" data-typ-objective-id = "' +
                                typ_objective_id + '" onclick = "fetchObjectiveInfo(this)">';
                            var courseshtml = '';
                            var courseTAhtml = '';



                            var criteriaHTML = '';
                            objectivesHTML += '<strong>' + nextLetter + '.    ' + objectives[objective]
                                .text +
                                '</strong></div>';
                            // courseshtml += "<strong>Objective "+nextLetter+"</strong>";
                            // courseshtml += '<ul>';
                            criteriaHTML += "<strong>Objective " + nextLetter + "</strong>";
                            //criteriaHTML+= '<ol>';

                            //var typ_objective_id = json.typ_objective_id[objectives[objective].id].id;
                            nextLetter = nextChar(nextLetter);
                            for (course in courses[objectives[objective].id]) {

                                courseshtml += ' &#8226; ' + courses[objectives[objective].id][course]
                                    .code + courses[objectives[objective].id][course].number + ' ' +
                                    courses[objectives[objective].id][course].name + '<br>'
                                courseTAhtml += ' &#8226; ' + courses[objectives[objective].id][course]
                                    .code + courses[objectives[objective].id][course].number + ' ' +
                                    courses[objectives[objective].id][course].name + '<br>'

                                $divForEach = $('<div/>', {
                                    'id': 'objective-' + objectives[objective].id
                                });
                                $divForSelects = $('<div/>', {
                                    'id': 'forObjective-' + objectives[objective].id +
                                        '-course-' + courses[
                                            objectives[objective].id][course].typ_course_id,
                                    'data-amount-select': '0',
                                    'class': 'form-group',
                                    'data-annual-plan': json.annual_plan.id
                                });
                                options = "<option value = '0' >Nothing Selected</option>"
                                for (criterion in criteria[objectives[objective].id]) {
                                    options += "<option value='" + criteria[objectives[objective].id][
                                            criterion
                                        ].id +
                                        "'>" + criteria[objectives[objective].id][criterion].name +
                                        "</option>";
                                }
                                var $button = $('<button/>', {
                                    'type': 'button',
                                    'class': 'btn btn-secondary',
                                    'onclick': 'addCriteriaTest("forObjective-' + objectives[
                                            objective].id +
                                        "-course-" + courses[objectives[objective].id][course]
                                        .typ_course_id +
                                        '", "' + objectives[objective].id + "-course-" +
                                        courses[objectives[
                                            objective].id][course].typ_course_id + '", ' +
                                        courses[objectives[
                                            objective].id][course].typ_course_id + ', null, "' +
                                        options + '")'
                                });

                                $button.append("+ Add criteria");

                                $divForEach.append($divForSelects);
                                $divForEach.append("<br>")
                                $divForEach.append($button);
                                $divForTA = $('<div/>', {
                                    'id': 'objectiveTA-' + objectives[objective].id
                                });
                                $divForTASelects = $('<div/>', {
                                    'id': 'forTA-objective-' + objectives[objective].id +
                                        '-course-' + courses[
                                            objectives[objective].id][course].typ_course_id,
                                    'class': 'form-group',
                                    'data-amount-ta': '0'
                                });

                                var optionsForTa = "<option value = '0'>Nothing Selected</option>";
                                transformativeDefault = json.transformative_actions;
                                optionsForTa += "<optgroup label='Default'>";
                                for (trans in transformativeDefault) {
                                    optionsForTa += "<option value='" + transformativeDefault[trans]
                                        .id + "'>" +
                                        transformativeDefault[trans].at_text + "</option> ";

                                }
                                optionsForTa += '</optgroup>';
                                course_id = courses[objectives[objective].id][course].id
                                transformativeDefault = json.custom_transformative[objectives[objective]
                                    .id][course_id];
                                if (transformativeDefault != undefined) {
                                    optionsForTa += "<optgroup label = 'Custom'>";
                                    for (trans in transformativeDefault) {
                                        optionsForTa += "<option value='" + transformativeDefault[trans]
                                            .ta_id + "'>" +
                                            transformativeDefault[trans].at_text + "</option> ";

                                    }
                                }
                                typ_course_id = courses[objectives[objective].id][course].typ_course_id
                                var $buttonTA = $('<button/>', {
                                    'type': 'button',
                                    'class': 'btn btn-secondary',

                                    'onclick': 'addTAselect("' + optionsForTa +
                                        '", "forTA-objective-' +
                                        objectives[objective].id + '-course-' + courses[
                                            objectives[objective]
                                            .id][course].typ_course_id + '", ' + annual_plan +
                                        ', ' +
                                        objectives[objective].id + ', ' + typ_course_id + ', 0)'
                                });

                                $buttonTA.append("+ Add TA");
                                typ_course_id = courses[objectives[objective].id][course].typ_course_id
                                optionsForTADict[typ_course_id] = optionsForTa;






                                $divForTA.append($divForTASelects);
                                $divForTA.append('<br>');
                                $divForTA.append($buttonTA)


                                courseshtml += $divForEach[0].innerHTML + "<br><br>";
                                courseTAhtml += $divForTA[0].innerHTML + "<br><br>";


                            }









                            /*$divForTA = $('<div/>',{
                                        'id':'objectiveTA-'+objectives[objective].id
                                      });
                                      $divForTASelects = $('<div/>', {
                                        'id': 'forTA-objective-'+objectives[objective].id,
                                        'class':'form-group',
                                        'data-amount-ta':'0'
                                      });

                                      var optionsForTa = "<option value = '0'>Nothing Selected</option>";
                                      transformativeDefault = json.transformative_actions;
                                      optionsForTa+= "<optgroup label='Default'>";
                                      for(trans in transformativeDefault){
                                        optionsForTa+= "<option value='"+transformativeDefault[trans].id+"'>"+transformativeDefault[trans].at_text+"</option> ";
                                        
                                      }
                                      optionsForTa+='</optgroup>';
                                      
                                      transformativeDefault = json.custom_transformative[objectives[objective].id];
                                      if(transformativeDefault!= undefined){
                                      optionsForTa+="<optgroup label = 'Custom'>";
                                        for(trans in transformativeDefault){
                                        optionsForTa+= "<option value='"+transformativeDefault[trans].id+"'>"+transformativeDefault[trans].at_text+"</option> ";
                                        
                                      }
                                      }
                                      var $buttonTA = $('<button/>', {
                                       'type': 'button',
                                  'class': 'btn btn-secondary',
                                  'onclick': 'addTAselect("'+optionsForTa+'", "forTA-objective-'+objectives[objective].id+'", '+annual_plan+', '+objectives[objective].id+', '+typ_objective_id+', 0)'
                              });
                                       
                                      $buttonTA.append("+ Add TA");


                                      
                                      

                                      


                                      $divForTA.append($divForTASelects);
                                      $divForTA.append('<br>');
                                      $divForTA.append($buttonTA)
                                      

                            */
                            table.row.add([
                                objectivesHTML,
                                courseshtml,

                                courseTAhtml

                            ]);
                            table.draw();


                            for (course in courses[objectives[objective].id]) {
                                typ_course_id = courses[objectives[objective].id][course].typ_course_id
                                if (json.annual_plans_transformative[objectives[objective].id][
                                        typ_course_id
                                    ].length) {
                                    for (i = 0; i < json.annual_plans_transformative[objectives[
                                            objective].id][
                                            typ_course_id
                                        ].length; i++) {
                                        selected_ta = json.annual_plans_transformative[objectives[
                                            objective].id][
                                            typ_course_id
                                        ][i].trans_id;
                                        addTAselect(optionsForTADict[typ_course_id],
                                            "forTA-objective-" + objectives[
                                                objective].id + '-course-' + typ_course_id,
                                            annual_plan, objectives[
                                                objective].id, typ_course_id, selected_ta);

                                    }
                                } else {
                                    $('#')
                                    addTAselect(optionsForTADict[typ_course_id], "forTA-objective-" +
                                        objectives[
                                            objective].id + '-course-' + typ_course_id, annual_plan,
                                        objectives[
                                            objective].id, typ_course_id, 0);
                                }
                                if (json.selected_criteria[objectives[objective].id][typ_course_id]
                                    .length) {



                                    for (i = 0; i < json.selected_criteria[objectives[objective].id][
                                            typ_course_id
                                        ]
                                        .length; i++) {
                                        addCriteriaTest("forObjective-" + objectives[objective].id +
                                            "-course-" +
                                            typ_course_id, "" + objectives[objective].id +
                                            "-course-" +
                                            typ_course_id, "" + json.selected_criteria[objectives[
                                                objective].id][
                                                typ_course_id
                                            ][i].typ_course_id + "", i, options);
                                        $('#criteriaFor' + objectives[objective].id + "-course-" +
                                            typ_course_id + '_' +
                                            i).val(json.selected_criteria[objectives[objective].id][
                                            typ_course_id
                                        ][
                                            i
                                        ].criteria_id);
                                        $('#criteriaFor' + objectives[objective].id + "-course-" +
                                            typ_course_id + '_' +
                                            i).data('old-criteria', json.selected_criteria[
                                                objectives[objective].id]
                                            [typ_course_id][i].criteria_id);
                                        $('#criteriaFor' + objectives[objective].id + "-course-" +
                                            typ_course_id + '_' +
                                            i).selectpicker('refresh');

                                    } // Update display

                                } else {

                                    addCriteriaTest("forObjective-" + objectives[objective].id +
                                        "-course-" +
                                        typ_course_id, "" + objectives[objective].id + "-course-" +
                                        typ_course_id +
                                        "", "" + typ_course_id + "", 0, options);
                                    $('#criteriaFor' + objectives[objective].id + "-course-" +
                                            typ_course_id + '_0')
                                        .val(0);
                                    $('#criteriaFor' + objectives[objective].id + "-course-" +
                                            typ_course_id + '_0')
                                        .data('old-criteria', 0);
                                    $('#criteriaFor' + objectives[objective].id + "-course-" +
                                            typ_course_id + '_0')
                                        .selectpicker('refresh');

                                }
                            }

                        }
                        table.draw();


                        //transformative actions in outcome
                        GlobalTransCategories = json.categories;
                        trans_table = $('#transformative_action_table').DataTable();
                        trans_table.clear();

                        if (json.transformative_actions_for_outcome.length) {

                            //trans_table.show()
                            $.each(json.transformative_actions_for_outcome, function(index, ta) {
                                title = ta.at_text;
                                description = ta.description;
                                category = ta.type_of_TA;
                                inputEdit = $('<input>', {
                                    'type': 'button',
                                    'class': 'btn btn-secondary',
                                    'onclick': 'editTa(this,' + ta.trans_id + ')',
                                    'id': 'edit_button_for_ta_' + ta.trans_id,
                                    'value': 'Edit'
                                }).html('Edit');
                                inputDelete = $('<input>', {
                                    'type': 'button',
                                    'class': 'btn btn-primary',
                                    'style': 'display: inline',
                                    'onclick': 'deleteTAFromOutcome(this,' + ta
                                        .trans_id + ')',
                                    'value': 'Delete'
                                }).html('Delete');

                                div = $('<div>');
                                div.append(inputEdit);
                                div.append(inputDelete);

                                trans_table.row.add([
                                    title,
                                    description,
                                    category,
                                    div.html()
                                ])

                            })


                        }



                    } else {
                        $('table').hide();
                    }
                    trans_table.draw();

                    //transformative actions in outcome









                },
                'json'
            );

        }

        GlobalTransCategories = '';

        function editTa(input, trans_id) {
            $('#close_button').click()
            addTransToPlan();
            tableRow = $(input).parent().parent();
            title = tableRow.children().eq(0).html();
            description = tableRow.children().eq(1).html();
            type_of_TA = tableRow.children().eq(2).html();
            $('#at_text').val(title);
            $('#type_of_ta').val(type_of_TA);
            $('#type_of_ta').selectpicker('refresh');
            $('#description').val(description);
            $('#saveTrans').attr('onclick', 'saveTransToOutcome(' + trans_id + ')');
        }



        function addTransToPlan() {
            $('#saveTrans').attr('onclick', 'saveTransToOutcome()');
            div_for_name = $('<div>', {
                'class': 'form-group',

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

                'name': 'at_text',
                'id': 'at_text'
            });
            div_for_name.html("<label> Name</label>");
            div_for_name.append(input_name);
            $('#new_transformative_actions_to_outcome').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',
                'class': 'form-control selectpicker',
                'onchange': 'checkIfNew(this)'
            }).html(GlobalTransCategories);

            div_for_category.append(select_for_category);
            $('#new_transformative_actions_to_outcome').append(div_for_category);
            select_for_category.selectpicker('refresh');



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

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

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

            div_description.append(textarea);

            closeButton = $('<button/>', {
                'class': 'btn btn-secondary',
                'type': "button",
                'id': 'close_button',
                'style': 'float: right',
                'onclick': '$(".editting_action").show(); $(".button-add-transformative").show(); $("#new_transformative_actions_to_outcome").html(" ")'
            }).html('Close');
            saveButton = $('<button/>', {
                'class': 'btn btn-primary',
                'id': 'saveTrans',
                'type': 'button',
                'style': 'float:right; display:inline-block;',
                'onclick': "saveTransToOutcome()"

            }).html('Save');

            $('#new_transformative_actions_to_outcome').append(div_description);
            $('#new_transformative_actions_to_outcome').append(closeButton);
            $('#new_transformative_actions_to_outcome').append(saveButton)
            $('#new_transformative_actions_to_outcome').append("<br>")

            $('.button-add-transformative').hide();




        }

        function saveTransToOutcome(edit = null) {
            is_new = false;
            is_custom = 0;
            if ($('.new_type').length !== 0) {
                category = $('#new_type').val();
                is_custom = 1;
                is_new = true;
            } else {
                is_custom = parseInt($('#type_of_ta').find('option:selected').data('is-custom'));
                category = $('#type_of_ta').val();
            }
            name = $('#at_text').val();
            textarea = $('#description').val();
            $typ_semester_outcome_id = $('#typ_semester_outcome_id').val();

            $.post(
                "{{ URL::action('TransformativeActionsController@createTAForOutcome') }}", {
                    edit: edit,
                    is_custom: is_custom,
                    category: category,
                    name: name,
                    description: textarea,
                    is_new: is_new,
                    program_id: {{ $program->id }},
                    typ_semester_outcome_id: $typ_semester_outcome_id
                },
                function(transformative_action_id) {
                    newTitle = $('#at_text').val();
                    new_description = $('#description').val();
                    new_category = $('#type_of_ta').val();
                    $('#close_button').click();
                    if ($('#edit_button_for_ta_' + transformative_action_id).length === 0) {


                        inputEdit = $('<input>', {
                            'type': 'button',
                            'class': 'btn btn-secondary',
                            'onclick': 'editTa(this,' + transformative_action_id + ')',
                            'id': 'edit_button_for_ta_' + transformative_action_id,
                            'value': 'Edit'
                        });
                        inputDelete = $('<input>', {
                            'type': 'button',
                            'class': 'btn btn-primary',
                            'style': 'display: inline',
                            'onclick': 'deleteTAFromOutcome(this,' + transformative_action_id +
                                ')',
                            'value': 'Delete'
                        })
                        div = $('<div>');
                        div.append(inputEdit);
                        div.append(inputDelete);
                        trans_table = $('#transformative_action_table').DataTable();
                        trans_table.row.add([
                            newTitle,
                            new_description,
                            category,
                            div.html()
                        ]).draw();

                    } else {


                        tableRow = $('#edit_button_for_ta_' + transformative_action_id).parent()
                            .parent();
                        tableRow.children().eq(0).html(newTitle);
                        tableRow.children().eq(1).html(new_description);
                        tableRow.children().eq(2).html(category);
                    }



                }
            );
        }

        function deleteTAFromOutcome(delete_button, trans_id) {

            $.post(" {{ URL::action('TransformativeActionsController@deleteTaFromOutcome') }}", {
                    trans_id: trans_id
                },
                function() {

                    $('#edit_button_for_ta_' + trans_id).parent().parent().remove();


                }
            )
        }


        function checkIfNew(select) {

            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',
                    'name': "new_type",
                    'class': 'form-control'
                });
                new_div.append(input);

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

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


        }

        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'
                    });
                    var onclick = "";
                    //TODO CHange this


                    if (json.annual_plans.is_submitted != 2)
                        onclick = "fetchEverything(this)";
                    else onclick = "fetchEverything(this)";
                    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 = '" + onclick +
                                "' 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 = '" + onclick +
                                "' 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 to print report

                    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 Plan');
                    button_print = $("<button>", {
                        "class": 'btn btn-lg btn-primary btn-block',
                        "type": "button",
                        "onclick": "window.location.href = " +
                            "'{{ URL::action('AnnualPlansController@printAnnualPlan') }}" +
                            "/" +
                            annual_id + "'",
                    }).html("Print Plan");
                    div_btn_group.append(button_print);
                    div_btn_group.append(button_save);


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


                },
                "json",
            );

        }


        function deleteObjective(objectiveSelectDiv, closeObj) {

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

        }

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

                    if (courses_with_missing_data.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);



                        div_for_courses = $("<div>", {
                            'id': 'courses_criteria',

                        }).html("<h4>These are the Courses that need at least one Criteria paired</h4>")
                        ol_course_ta = $("<ol>", {
                            'id': 'course_criteria',
                            'type': 'I'
                        });
                        div_for_courses.append(ol_course_ta);
                        //"<ol id='course_ta' type='I'>");

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

                        $.each(courses_with_missing_data, function(index, info) {


                            selector = $('#course_typ_outcome_' + info.typ_semester_outcome_id);
                            if (selector.length === 0) {
                                li_outcome = $('<li>').html(info.outcome_name);
                                ol = $("<ol>", {
                                    'id': 'course_typ_outcome_' + info
                                        .typ_semester_outcome_id,
                                    'type': 'A'
                                });
                                li_outcome.append(ol);
                                $("#course_criteria").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.typ_semester_objective_id)
                            if (selector.length === 0) {
                                li_objective = $("<li>").html(info.objective_text);
                                ol_objective = $("<ol>", {
                                    'id': 'course_typ_objective_' + info.typ_semester_objective_id,
                                    'type': '1'
                                });
                                li_objective.append(ol_objective);
                                $('#course_typ_outcome_' + info.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_code);
                                ol_course = $("<ul>", {
                                    'id': "course_ul_" + info.typ_semester_course_id,
                                });
                                li_course.append(ol_course);
                                $('#course_typ_objective_' + info.typ_semester_objective_id)
                                    .append(li_course);
                            }


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



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



                    } 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': "postAnnualPlan(" + annual_id + ")"


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

                        $("#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 postAnnualPlan(annual_id) {
            $.post(
                "{{ URL::action('AnnualPlansController@submitAnnualPlan') }}/" + 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>The Annual Plan was submitted. You can check it out in View Annual Plans or Print Plan </strong>'
                        )
                        alert.appendTo($("#alert-for-save"));
                    }



                });
        }
    </script>






@stop

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