@extends('layouts.master')

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

    <div class="row">

        <div class="col-md-6">
            <!-- Form to add a new criterion -->
            <div class="panel panel-default panel-button">
                <div class="panel-heading">
                    Create
                </div>
                <div class="panel-body">
                    {{ Form::open(['action' => 'CriteriaController@create', 'id' => 'create_criterion']) }}
                    <div id='allOutcomes' class='form_validation outcome_form'>
                        <div id='outcomeGroup0' class='createOutcome' data-value="1">
                            <div class="form-group col-md-12 selectOutcome">
                                <label>Outcome 1</label>

                                {{ Form::select('outcome[]', $outcomes, reset($outcomes), ['class' => 'form-control selectpicker', 'id' => 'outcome0', 'onchange' => 'fetchObjectiveForSelect("outcome0", "objectiveGroupFor0")']) }}
                            </div>

                            <div id='objectiveGroupFor0' class='createObjective' data-value='1'>
                                <div class="form-group col-md-11 selectObjective">
                                    <label>Associated Objectives for Outcome 1</label>
                                    <select id="objective_0_counter_1" name="objective[]" class="form-control selectpicker"
                                        onchange="visiblePrograms('allOutcomes')">
                                    </select>

                                </div>
                                <div class="col-md-1">
                                </div>
                            </div>
                            <input type='hidden' name='counterObjective' id='counterObjective' value=1>
                            <button class='btn btn-md btn-secondary button-add-objective'
                                onclick='addObjectiveTest("objectiveGroupFor0", "objective_0")'>
                                <span class='glyphicon glyphicon-plus'>

                                </span>
                                Add another Objective
                            </button>

                            <br>

                            <hr>
                        </div>

                    </div>

                    <input type='hidden' name='counterOutcome' id='counterOutcome' value=1>

                    <button id='button-add-outcome' class='btn btn-md btn-secondary' onclick='addOutcomeTest()'>
                        <span class='glyphicon glyphicon-plus'>

                        </span>
                        Add another Outcome
                    </button>

                    <!-- Associated Program -->
                    <div class="form-group form_validation program_form" id='program-checkboxes'>
                        {{ Form::label('program_id', 'Associated Program2') }}<br>
                        <br>
                        @if (count($programs) == 1)
                            <input type="checkbox" id="program-{{ $programs[0]->name }}" name="program_id[]"
                                value="{{ $programs[0]->id }}" checked>
                            <label for="program-{{ $programs[0]->name }}"> {{ $programs[0]->name }}
                                [{{ $programs[0]->school->name }}]</label><br>
<!--                             <input type="hidden" id="{{ $programs[0]->name }}" name="program_id[]" value="{{ $programs[0]->id }}"> -->
                        @else
                            @foreach ($programs as $program)
                                <input type="checkbox" id="program-{{ $program->id }}" name="program_id[]"
                                    value="{{ $program->id }}">
                                <label for="program-{{ $program->id }}"> {{ $program->name }}
                                    [{{ $program->school->name }}]</label><br>
                            @endforeach

                        @endif
                    </div>

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

                    <div class="form-group">
                        {{ Form::label('subcriteria', 'Subcriteria') }}
                        <p class="help-block"><strong>Manually add</strong> bullets or numbering.</p>
                        {{ Form::textarea('subcriteria', '', ['class' => 'form-control', 'rows' => 3, 'aria-labelledby' => 'subcriteria']) }}
                    </div>
                    <div class="form-group form_validation maximum_form">
                        {{ Form::label('maximum_score', 'Maximum Score') }}
                        {{ Form::text('maximum_score', '8', ['class' => 'form-control', 'id' => 'maximum_score', 'oninput' => 'addOptions("Num_scale", "maximum_score", "Scales")']) }}
                    </div>
                    <div class="form-group form_validation number_of_scales">
                        {{ Form::label('scales', 'Number of Scales') }}
                        <select id="Num_scale" name="scales" class="form-control selectpicker"
                            onchange='numberOfScales("Num_scale", "Scales")'>

                        </select>
                    </div>
                    <div id='Scales' class='form_validation scales_form' data-value="0">

                    </div>


                    <div class="form-group">
                        {{ Form::label('copyright', 'Copyright') }}
                        {{ Form::textarea('copyright', '', ['class' => 'form-control', 'rows' => 2, 'placeholder' => '(optional)', 'aria-labelledby' => 'copyright']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('notes', 'Notes') }}
                        {{ Form::textarea('notes', '', ['class' => 'form-control', 'rows' => 2, 'placeholder' => '(optional)', 'aria-labelledby' => 'notes']) }}
                    </div>

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

        <div class="col-md-6">
            <div class="panel panel-default panel-button">
                <div class="panel-heading">
                    Edit
                </div>
                <div class="panel-body">
                    {{ Form::open(['action' => 'CriteriaController@update', 'id' => 'update_criterion', 'data-form-id' => 'update_criterion']) }}

                    <button class="btn btn-md btn-secondary filterButton">
                        <span class="glyphicon glyphicon-minus">
                        </span>
                        Filters
                    </button>
                    <div class="filterSection">
                        <div class="form-group">
                            {{ Form::label('program_id2', 'Associated Program') }}
                            <select id='select-program' class="form-control selectpicker"
                                onchange='fetchAllCriterion("select-program", "assoc_outcomes_fetch")'>

                                @foreach ($programs as $program)
                                    <option value='{{ $program->id }}' data-subtext="{{ $program->code }}">
                                        {{ $program->name }}</option>
                                @endforeach

                            </select>
                        </div>
                        <div class="form-group">
                            <label>Associated Outcome</label>
                            {{ Form::select('assoc_outcome_fetch', $outcomes, null, ['class' => 'form-control selectpicker', 'id' => 'assoc_outcomes_fetch', 'onchange' => 'fetchAllCriterion("select-program", "assoc_outcomes_fetch")']) }}

                        </div>
                    </div>
                    <hr>

                    <div class="form-group">
                        {{ Form::label('criterion_id', 'Criterion') }}
                        <select id="select-criterion" name="id" class="form-control selectpicker"
                            onchange='fetchCriterionForEditing()'>

                        </select>
                    </div>
                    <div id='allAssocOutcomes' class='form_validation outcome_form'>
                        <!-- Associated Outcome -->
                        <div id='assocOutcomeGroup0' class='createOutcome' data-value="1">
                            <div class="form-group col-md-12 selectOutcome">
                                <label>Outcome 1</label>
                                {{ Form::select('outcome[]', $outcomes, null, ['class' => 'form-control selectpicker', 'id' => 'assoc_outcome_0', 'onchange' => 'fetchObjectiveForSelect("assoc_outcome_0", "assoc_objectiveGroupFor0")']) }}

                            </div>
                            <div id='assoc_objectiveGroupFor0' class='createObjective' data-value="1">
                                <div class="form-group col-md-11 selectObjective">
                                    <label>Associated Objectives for Outcome 1</label>
                                    <select id="assoc_objective_0_counter_1" name="objective[]"
                                        class="form-control selectpicker" onchange="visiblePrograms('allAssocOutcomes')">
                                        <option value="0">No associated objectives</option>
                                    </select>

                                </div>
                                <div class='col-md-1'></div>
                            </div>


                            <button id='button-add-objective-assoc' class='btn btn-md btn-secondary'
                                onclick='addAssocObjective("assoc_objectiveGroupFor0", "assoc_objective_0")'>
                                <span class='glyphicon glyphicon-plus'>

                                </span>
                                Add another Objective
                            </button>

                            <hr>
                        </div>
                    </div>
                    <button class='btn btn-md btn-secondary button-add-outcome-assoc' onclick='addAssocOutcome()'>
                        <span class='glyphicon glyphicon-plus'>

                        </span>
                        Add another Outcome
                    </button>




                    <!-- Associated Program -->
                    <div class="form-group form_validation program_form" id='assoc-program-checkboxes'>

                        {{ Form::label('program_id2', 'Associated Program') }}<br><br>

                        @if (count($programs) == 1)

<!--                             <input type="hidden" id="{{ $programs[0]->name }}" name="program_id[]" value="{{ $programs[0]->id }}"> -->

                            <input type="checkbox" id="assoc_program-{{ $programs[0]->id }}" name="program_id[]"
                                value="{{ $programs[0]->id }}" checked>
                            <label for="assoc_program-{{ $programs[0]->id }}"> {{ $programs[0]->name }}
                                <sub>[{{ $programs[0]->school->name }}]</sub></label><br>
                        @else
                            @foreach ($programs as $program)
                                <input type="checkbox" id="assoc_program-{{ $program->id }}" name="program_id[]"
                                    value="{{ $program->id }}">
                                <label for="assoc_program-{{ $program->id }}"> {{ $program->name }}
                                    <sub>[{{ $program->school->name }}]</sub></label><br>
                            @endforeach

                        @endif


                    </div>


                    <!-- Status -->
                    <div class="form-group form_validation status_form">
                        {{ Form::label('status', 'Status') }}
                        <span data-toggle="tooltip" data-placement="top"
                            title="Use this option to deactivate or reactivate criteria. Inactive criteria will stay in the system, but will not be available to use in new rubrics."
                            class="glyphicon glyphicon-question-sign"></span>

                        <select id="status" name="status" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>



                    <div class="form-group form_validation name_form">
                        {{ Form::label('name', 'Name') }}
                        {{ Form::text('name', Input::old('name'), ['class' => 'form-control', 'id' => 'criterion_name']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('subcriteria', 'Subcriteria') }}
                        <p class="help-block"><strong>Manually add</strong> bullets or numbering.</p>
                        {{ Form::textarea('subcriteria', '', ['class' => 'form-control', 'rows' => 3, 'id' => 'criterion_subcriteria']) }}
                    </div>
                    <div class="form-group form_validation maximum_form">
                        {{ Form::label('maximum_score', 'Maximum Score') }}
                        {{ Form::text('maximum_score', '', ['class' => 'form-control', 'id' => 'assoc_maximum_score', 'oninput' => 'addOptions("Num_assoc_scale", "assoc_maximum_score", "Assoc_Scales")']) }}
                    </div>


                    <div class="form-group form_validation number_of_scales">
                        {{ Form::label('scales', 'Number of Scales') }}
                        <select id="Num_assoc_scale" class="form-control selectpicker"
                            onchange='numberOfAssoc("Num_assoc_scale", "Assoc_Scales")'>

                        </select>
                    </div>
                    <div id='Assoc_Scales' class=' form_validation scales_form' data-value="0">

                    </div>




                    <div class="form-group">
                        {{ Form::label('copyright', 'Copyright Information') }}
                        {{ Form::textarea('copyright', Input::old('copyright'), ['class' => 'form-control', 'rows' => 2, 'id' => 'criterion_copyright', 'placeholder' => '(optional)']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('notes', 'Additional Notes') }}
                        {{ Form::textarea('notes', Input::old('notes'), ['class' => 'form-control', 'rows' => 2, 'id' => 'criterion_notes', 'placeholder' => '(optional)']) }}
                    </div>

                    {{ Form::submit('Update', ['class' => 'btn btn-primary btn-block', 'id' => 'update_the_criterion_button', 'data-form-id' => 'update_criterion']) }}
                    {{ Form::close() }}
                    {{ Form::open(['action' => 'CriteriaController@delete', 'id' => 'deleteCriterionForm']) }}

                    {{ Form::hidden('criterion_delete', '0', ['id' => 'deleteCriteria']) }}
                    <!--<input type='hidden' name='criterion_delete' id='deleteCriteria'>-->

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

                </div>
            </div>
        </div>
    </div>
    <script>
        var selectOptions = document.getElementById('outcome0').innerHTML;

        var counter = 1;
        var counterObj = 1;
        var outcomeString = 'OutcomeGroup_';

        $(document).ready(function() {
            addOptions('Num_scale', 'maximum_score', 'Scales');
            $('#Num_scale').val('4');
            numberOfScales('Num_scale', 'Scales');

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

        });

        function checkIfNewCriterion(scaleBox) {
            if ($(scaleBox).val() == $(scaleBox).data('old-scale')) {



                //$('#DeleteButton').prop('disabled', false);
                $("#update_the_criterion_button").val('Update');
                $("#update_criterion").attr('action', "{{ URL::action('CriteriaController@update') }}")

                $(scaleBox).parent().children('.alert-placeholder').remove();
            } else {
                if ($(scaleBox).parent().children('.alert-placeholder').length === 0) {
                    div_placeholder = $('<div>', {
                        'class': 'alert-placeholder'
                    });
                    $(div_placeholder).html(
                        '<div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong>Warning!</strong> If a criterion is already used in assessments, editting it will actually create a new one </div>'
                    );
                    $(scaleBox).parent().prepend(div_placeholder);

                }

                //$('#DeleteButton').prop('disabled', true);
                $("#update_the_criterion_button").val("Create New")
                $("#update_criterion").attr('action', "{{ URL::action('CriteriaController@create') }}")



            }
        }

        function fetchCriterionForEditing() {
            var id = $('#select-criterion').find(':selected').val();

            $.post(
                "{{ URL::action('CriteriaController@fetchCriterionWithTrashed') }}", {
                    id: id
                },
                function(criterion) {


                    if (!(criterion.length)) {
                        name = ' ';
                        var subcriteria = '';
                        copyright = null;
                        notes = null;
                        $('#status').val(0);
                        maximum = 1;
                        $('#assoc_maximum_score').val(1);


                    } else {
                        criterion = criterion[0];

                        var name = criterion.name;
                        if (criterion.subcriteria) {
                            subcriteria = JSON.parse(criterion.subcriteria).join('\n');
                        } else {
                            subcriteria = "";
                        }
                        if (criterion.copyright) {
                            var copyright = criterion.copyright;
                        } else {
                            var copyright = ''
                        }
                        if (criterion.notes) notes = criterion.notes;
                        else notes = '';

                        // Display info
                        $('#criterion_name').val(name);
                        $('#criterion_subcriteria').text(subcriteria);
                        if (criterion.deleted_at)
                            $('#status').val(0);
                        else
                            $('#status').val(1);
                        $('#assoc_maximum_score').val(criterion.max_score);
                        var maximum = criterion.max_score;

                        addOptions("Num_assoc_scale", "assoc_maximum_score", "Assoc_Scales");
                        $('#Num_assoc_scale').val(criterion.num_scales)
                        $('#Num_assoc_scale').selectpicker('refresh');
                        $('#Num_assoc_scale').trigger('change');

                        for (i = 0; i < criterion.num_scales; i++) {
                            $('#assoc_scale_' + i).val(criterion.scales[i].description);
                        }
                        if ((criterion.activity_criterion.length)) {
                            for (i = 0; i < criterion.num_scales; i++) {
                                $("#assoc_scale_" + i).attr('oninput', 'checkIfNewCriterion(this)')
                                $("#assoc_scale_" + i).data('old-scale', $('#assoc_scale_' + i).val())
                            }

                            $('#DeleteButton').prop('disabled', true);





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


                        // If copyright or notes aren't empty, load them

                    }



                    $('#criterion_copyright').text(copyright);


                    $('#criterion_notes').text(notes);







                    // Select associated outcome
                    try {
                        assocOutcomeCounter = parseInt($("#assocOutcomeGroup0").data('value'));
                        for (var i = assocOutcomeCounter - 1; i > 0; i--) {
                            $('#assoc_close_button' + i).click();
                        }
                        $('#assocOutcomeGroup0').data('value', 1);
                    } catch (err) {
                        var Notran = true;
                    }

                    if (criterion.outcomes.length) {
                        $('#assoc_outcome_0').val(criterion.outcomes[0].id);
                        $('#assoc_outcome_0').selectpicker('refresh');

                        var first_outcome = criterion.outcomes[0];
                        options = "<option value ='0'>Nothing Selected</option>";
                        $(first_outcome.assoc_objectives).each(function(index, objective) {

                            options += '<option data-program-ids = "' + objective.program_ids + '" value ="(' +
                                first_outcome.id + ',' + objective.objective_id + ')">' +
                                objective.text + '</option>';

                        })
                        /*for (objective_index in json.objectives_assoc[first_outcome_id]) {
                            objective = json.objectives_assoc[first_outcome_id][objective_index]
                            options += '<option value ="(' + first_outcome_id + ',' + objective.objective_id + ')">' +
                                objective.text + '</option>';
                        }*/
                        $('#assoc_objective_0_counter_1').html(options);
                        $('#assoc_objective_0_counter_1').selectpicker('refresh');

                        if (first_outcome.objectives_criteria.length) {
                            objective_id = first_outcome.objectives_criteria[0].objective_id;
                            value = '(' + first_outcome.id + ',' + objective_id + ')';
                            $('#assoc_objective_0_counter_1').val(value);
                            $('#assoc_objective_0_counter_1').selectpicker('refresh');

                        }

                        if ($("#assoc_objectiveGroupFor0").find(".btn-primary").length > 0) {
                            $("#assoc_objectiveGroupFor0").find(".btn-primary").each(function() {
                                $(this).click()
                            })
                        }

                        for (var i = 1; i < first_outcome.objectives_criteria.length; i++) {
                            addAssocObjective("assoc_objectiveGroupFor0", "assoc_objective_0");
                            objective_id = first_outcome.objectives_criteria[i].objective_id;
                            value = "(" + first_outcome.id + "," + objective_id + ")";
                            $('#assoc_objective_0_counter_' + (i + 1)).val(value);
                            $('#assoc_objective_0_counter_' + (i + 1)).selectpicker('refresh');




                        }

                    } else {
                        $('#assoc_outcome_0').val($('#assoc_outcomes_fetch').find(':selected').val());
                        $('#assoc_outcome_0').selectpicker('refresh');

                    }



                    for (var i = 1; i < criterion.outcomes.length; i++) {
                        addAssocOutcome(true);


                        $('#assoc_outcome_' + i.toString()).val(criterion.outcomes[i].id);
                        $('#assoc_outcome_' + i.toString()).selectpicker('refresh');

                        var outcome = criterion.outcomes[i];
                        options = "<option value ='0'>Nothing Selected</option>";


                        $(outcome.assoc_objectives).each(function(index, objective) {

                            options += '<option value ="(' + outcome.id + ',' + objective.objective_id + ')">' +
                                objective.text + '</option>';

                        })
                        /*for (objective_index in json.objectives_assoc[outcome_id]) {
                            objective = json.objectives_assoc[outcome_id][objective_index]
                            options += '<option value ="(' + outcome_id + ',' + objective.objective_id + ')">' +
                                objective.text + '</option>';
                        }*/
                        $('#assoc_objective_' + i + '_counter_1').html(options);
                        $('#assoc_objective_' + i + '_counter_1').selectpicker('refresh');
                        if (outcome.objectives_criteria.length) {
                            objective_id = outcome.objectives_criteria[0].objective_id;
                            value = "(" + outcome.id + "," + objective_id + ")"
                            $('#assoc_objective_' + i + '_counter_1').val(value);
                            $('#assoc_objective_' + i + '_counter_1').selectpicker('refresh')
                        }



                        for (var j = 1; j < outcome.objectives_criteria.length; j++) {
                            addAssocObjective("assoc_objectiveGroupFor" + i, "assoc_objective_" + i);
                            objective_id = outcome.objectives_criteria[j].objective_id;
                            value = "(" + outcome.id + "," + objective_id + ")";
                            $('#assoc_objective_' + i + '_counter_' + (j + 1)).val(value);
                            $('#assoc_objective_' + i + '_counter_' + (j + 1)).selectpicker('refresh');



                        }

                    }




                    /*try {
                        for (var i = counterObj - 1; i > 0; i--) {
                            deleteObjective('assoc_objectiveForm' + i.toString(), 'assoc_closeObj' + i.toString(), 'assoc_objectiveGroup')
                        }
                    } catch (err) {
                        var noEntro = true;
                    }*/


                    //$('#assoc_objectiveGroup').data('value', 1);
                    //counterObj =$('#assoc_objectiveGroup').data('value');




                    /*
                            assocOutcomeCounter = 0;
                            var i = 0;
                            optionName = '<option value ="0">Nothing Selected</option>';
                            for(outcome in json.outcomes_assoc){
                                optionName += '<optgroup label="' + json.outcomes_assoc[outcome][0].name + '">';
                                var objectiveForOutcome = json.objectives_assoc;
                                var objectives = objectiveForOutcome[outcome];
                                for (objective in objectives) {
                            

                                    var obj= objectives[objective];
                                    var option = '<option value ="' + obj.id + '">' +obj.text + '</option>';
                                    optionName += (option);
                                }
                                optionName+= '</optgroup>';
                            }
                            $('#assoc_objective_0').html(optionName);

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




                    





                            try {
                                $('#assoc_objective_0').val(json.objectives[0].id);
                                $('#assoc_objective_0').selectpicker('refresh');
                            } catch (err) {
                                if (!json.objectives.length) {
                                    $('#assoc_objective_0').val(0);
                                    $('#assoc_objective_0').selectpicker('refresh');
                                }
                                var thereIsNoObjective = true;
                            }

                            for (var i = 1; i < json.objectives.length; i++) {
                                addAssocObjective();
                                $('#assoc_objective_' + i.toString()).val(json.objectives[i].id);
                                $('#assoc_objective_' + i.toString()).selectpicker('refresh');
                            }
                            $('assoc_objectiveGroup').data('value',json.objectives.length);

                            


                    */
                    visiblePrograms('allAssocOutcomes');

                    var program_length = criterion.program.length;

                    $('input[type=checkbox]').prop('checked', false);
                    for (var i = 0; i < program_length; i++) {
                        $('#assoc_program-' + criterion.program[i].program_id).prop("checked", true);
                    }


                    $("#deleteCriteria").val(criterion.id);







                },
                'json'
            );
        }
        //Input Validation function to client side

        $(document).on('submit', function(e) {

            isEverythingOkay = true;
            $('.alert-dismissible').remove();
            if (e.originalEvent.submitter.id == "create_the_criterion_button" || e.originalEvent.submitter.id ==
                "update_the_criterion_button") {
                submitter = e.originalEvent.submitter;

                // Input Validation
                children = $(submitter).children();

                what = $(submitter).data('form-id');
                form_id = $(submitter).data('form-id');
                form = $("#" + form_id)
                form = $("#" + form_id).children('div');


                $("#" + form_id).children('.form_validation').each(function(index) {
                    //alert($(this).attr('id') + '   ' + index);
                    //id_from_this_object = $(this).attr('id');

                    if ($(this).hasClass('outcome_form')) {

                        $.each($(this).children('.createOutcome'), function() {

                            selectOutcomeDiv = $(this).children('.selectOutcome')[0];

                            div_bootstrap_select = $(selectOutcomeDiv).children('div')[0];
                            div_button = $(selectOutcomeDiv).children('button')[0];

                            select = $(div_bootstrap_select).children('select')[0];

                            value = $(select).val();


                            if (isNaN(value)) {
                                var timer;

                                alert = $('<div/>', {
                                    'class': 'alert alert-danger alert-dismissible',
                                    'role': 'alert'
                                })
                                button = $('<button/>', {
                                    'type': 'button',
                                    'class': 'close',
                                    'data-dismiss': 'alert',
                                    'alert-label': 'close'
                                }).html('<span aria-hidden="true">×</span>');
                                alert.append(button);
                                alert.append('<strong>Select a valid Outcome</strong>')

                                $(selectOutcomeDiv).prepend(alert);
                                isEverythingOkay = false;
                                $('html, body').animate({
                                    scrollTop: $(alert).offset().top
                                }, 2000);
                                $(alert).focus();

                                //$(div_bootstrap_select).css('border')

                            }
                            divContainsObjectives = $(this).children('.createObjective')[0];

                            $.each($(divContainsObjectives).children('.selectObjective'),
                                function() {
                                    divGroup = $(this).children('.btn-group')[0];
                                    select = $(divGroup).children('select')[0];
                                    if (parseInt($(select).val()) == 0) {
                                        var timer;

                                        alert = $('<div/>', {
                                            'class': 'alert alert-danger alert-dismissible',
                                            'role': 'alert'
                                        })
                                        button = $('<button/>', {
                                            'type': 'button',
                                            'class': 'close',
                                            'data-dismiss': 'alert',
                                            'alert-label': 'close'
                                        }).html('<span aria-hidden="true">×</span>');
                                        alert.append(button);
                                        alert.append('<strong>Select an objective</strong>')

                                        $(this).prepend(alert);
                                        $('html, body').animate({
                                            scrollTop: $(alert).offset().top
                                        }, 1000);
                                        $(divGroup).focus();
                                        isEverythingOkay = false;
                                    }


                                })



                        })


                    } else if ($(this).hasClass('program_form')) {
                        checkedboxes = $(this).children('input[type="checkbox"]:checked').length;
                        if (!checkedboxes) {


                            alert = $('<div/>', {
                                'class': 'alert alert-danger alert-dismissible',
                                'role': 'alert'
                            })
                            button = $('<button/>', {
                                'type': 'button',
                                'class': 'close',
                                'data-dismiss': 'alert',
                                'alert-label': 'close'
                            }).html('<span aria-hidden="true">×</span>');
                            alert.append(button);
                            alert.append('<strong>Check at least one program</strong>')

                            $(this).prepend(alert);
                            $('html, body').animate({
                                scrollTop: $(alert).offset().top
                            }, 300);
                            //$(divGroup).focus();
                            isEverythingOkay = false;
                        }

                    } else if ($(this).hasClass('name_form')) {

                        input = $(this).children('input')[0];
                        if ($(input).val() == '') {
                            var timer;

                            alert = $('<div/>', {
                                'class': 'alert alert-danger alert-dismissible',
                                'role': 'alert'
                            })
                            button = $('<button/>', {
                                'type': 'button',
                                'class': 'close',
                                'data-dismiss': 'alert',
                                'alert-label': 'close'
                            }).html('<span aria-hidden="true">×</span>');
                            alert.append(button);
                            alert.append('<strong>Write a name for the criterion</strong>')

                            $(this).prepend(alert);
                            $('html, body').animate({
                                scrollTop: $(alert).offset().top
                            }, 300);
                            //$(divGroup).focus();
                            isEverythingOkay = false;
                        }

                    } else if ($(this).hasClass('maximum_form')) {
                        input = $(this).children('input')[0];
                        if (isNaN($(input).val())) {
                            alert = $('<div/>', {
                                'class': 'alert alert-danger alert-dismissible',
                                'role': 'alert'
                            })
                            button = $('<button/>', {
                                'type': 'button',
                                'class': 'close',
                                'data-dismiss': 'alert',
                                'alert-label': 'close'
                            }).html('<span aria-hidden="true">×</span>');
                            alert.append(button);
                            alert.append('<strong>Write a valid number for maximum score</strong>')

                            $(this).prepend(alert);
                            $('html, body').animate({
                                scrollTop: $(alert).offset().top
                            }, 300);
                            //$(divGroup).focus();
                            isEverythingOkay = false;
                        }


                    } else if ($(this).hasClass('number_of_scales')) {
                        btn_group = $(this).children('div.btn-group')[0];
                        select = $(btn_group).children('select')[0];
                        if (isNaN($(select).val())) {

                            alert = $('<div/>', {
                                'class': 'alert alert-danger alert-dismissible',
                                'role': 'alert'
                            })
                            button = $('<button/>', {
                                'type': 'button',
                                'class': 'close',
                                'data-dismiss': 'alert',
                                'alert-label': 'close'
                            }).html('<span aria-hidden="true">×</span>');
                            alert.append(button);
                            alert.append('<strong>Select a valid number</strong>')

                            $(this).prepend(alert);
                            $('html, body').animate({
                                scrollTop: $(alert).offset().top
                            }, 300);
                            //$(divGroup).focus();
                            isEverythingOkay = false;
                        }

                    } else if ($(this).hasClass('scales_form')) {

                        //amount_of_scales = parseInt($(this).data('value'));

                        $.each($(this).children('div'), function() {
                            form_group = $(this).children('div.form-group')[0];
                            textarea = $(form_group).children('textarea')[0];
                            if ($(textarea).val() == '') {
                                alert = $('<div/>', {
                                    'class': 'alert alert-danger alert-dismissible',
                                    'role': 'alert'
                                })
                                button = $('<button/>', {
                                    'type': 'button',
                                    'class': 'close',
                                    'data-dismiss': 'alert',
                                    'alert-label': 'close'
                                }).html('<span aria-hidden="true">×</span>');
                                alert.append(button);
                                alert.append('<strong>Make sure to fill this scale</strong>')

                                $(form_group).prepend(alert);
                                $('html, body').animate({
                                    scrollTop: $(alert).offset().top
                                }, 300);
                                //$(divGroup).focus();
                                isEverythingOkay = false;
                            }
                        })


                    } else return;



                })



                if (!isEverythingOkay)
                    e.preventDefault();


            } else if (e.originalEvent.submitter.id == "DeleteButton") {

            } else e.preventDefault();
        })

        /*$(document).on('submit', '#update_criterion', function(e) {

        if (e.originalEvent.submitter.id != "update_the_criterion_button")
            e.preventDefault();

        })*/

        visibleProgram = {};
        visibleProgram["allAssocOutcomes"] = {}
        visibleProgram["allOutcomes"] = {}

        function visiblePrograms(allOutcomesDiv) {
            checkedPrograms = {}
            $('#' + allOutcomesDiv).parent().find('input:checkbox').each(function(index) {

                id = $(this).attr('id');
                if ($(this).is(':checked')) {
                    checkedPrograms[$(this).attr('id')] = 1;
                    $(this).prop("checked", false);
                }
                program_id = $(this).val();
                if (!(program_id in visibleProgram[allOutcomesDiv])) {
                    visibleProgram[allOutcomesDiv][program_id] = {};
                }
                visibleProgram[allOutcomesDiv][program_id]["checkbox"] = $(this).detach();
                $("label[for='" + id + "']").next('br').remove();
                visibleProgram[allOutcomesDiv][program_id]["label"] = $("label[for='" + id + "']").detach();

            })
            if (allOutcomesDiv == "allOutcomes") {
                $('#' + allOutcomesDiv).parent().find("select[name='objective[]']").each(function(index) {

                    //program_ids in objective
                    var the_programs = $(this).find(':selected').data('program-ids');
                    if (!the_programs) return;


                    for (index in the_programs) {
                        program_id = the_programs[index];

                        //if the program_id is inside the visibleProgram scope
                        //and the checkbox isnt alread present

                        if (program_id in visibleProgram[allOutcomesDiv] &&
                            !($('#program-checkboxes').find('#' + visibleProgram[allOutcomesDiv][program_id][
                                'checkbox'
                            ].attr('id')).val())) {
                            //if it was checked, check it again
                            id = visibleProgram[allOutcomesDiv][program_id]['checkbox'].attr('id');
                            if (checkedPrograms[id]) {
                                visibleProgram[allOutcomesDiv][program_id]['checkbox'].prop('checked', true);
                            }
                            visibleProgram[allOutcomesDiv][program_id]['checkbox'].appendTo('#program-checkboxes');


                            visibleProgram[allOutcomesDiv][program_id]['label'].appendTo("#program-checkboxes");
                            $('#program-checkboxes').append('<br>');



                        }
                    }

                })
            } else {
                $('#' + allOutcomesDiv).find("select[name='objective[]']").each(function(index) {
                    var the_programs = $(this).find(':selected').data('program-ids');
                    if (!the_programs) return;


                    for (index in the_programs) {
                        program_id = the_programs[index];
                        if (program_id in visibleProgram[allOutcomesDiv] &&
                            !($('#assoc-program-checkboxes').find('#' + visibleProgram[allOutcomesDiv][program_id][
                                'checkbox'
                            ].attr('id')).val())) {

                            id = visibleProgram[allOutcomesDiv][program_id]['checkbox'].attr('id');
                            if (checkedPrograms[id]) {
                                visibleProgram[allOutcomesDiv][program_id]['checkbox'].prop('checked', true);

                            }
                            visibleProgram[allOutcomesDiv][program_id]['checkbox'].appendTo(
                                '#assoc-program-checkboxes');

                            visibleProgram[allOutcomesDiv][program_id]['label'].appendTo(
                                "#assoc-program-checkboxes");
                            $('#assoc-program-checkboxes').append('<br>');



                        }
                    }

                })
            }

        }


        function addOptions(select, max, scaleDiv) {


            var maxscore = parseInt($('#' + max).val())
            options = '<option value = "1"> 1</option>';
            selectedValue = 1;
            valueBefore = 0;
            for (var i = 2; i <= 20; i++) {
                if (maxscore % i == 0) {
                    options += '<option value="' + i.toString() + '">' + i.toString() + '</option>';

                }

            }

            var previousvalue = parseInt($('#' + select).val());
            $('#' + select).html(options);
            $('#' + select).val(previousvalue);
            $('#' + select).selectpicker('refresh');
            $('#' + select).trigger('change');
        }

        function numberOfAssoc(string, Scales) {
            var maximum = $('#assoc_maximum_score').val();
            var amountOfScale = parseInt($('#' + string).val());
            var dataValue = parseInt($('#' + Scales).attr('data-value'));
            var division = maximum / amountOfScale;
            //add


            fullDiv = '';
            if (division == 1) {
                for (var i = 0; i < amountOfScale; i++) {
                    div = '<div id="assoc_eval' + i.toString() + Scales + '">' +
                        '<div class ="form-group">' +
                        '<label for ="assoc_descripcion' + i.toString() + '">Scale Description (' + (i + 1) + ')</label>' +
                        '<textarea id = "assoc_scale_' + i +
                        '" class="form-control" rows="2" aria-labelledby="assoc_descripcion' + i.toString() +
                        '" name="Scales[]" cols="50" ></textarea></div></div>';
                    fullDiv += div;


                }
            } else if (division == maximum) {
                div = '<div id="assoc_eval' + 0 + Scales + '">' +
                    '<div class ="form-group">' +
                    '<label for ="assoc_descripcion' + 0 + '">Scale Description (' + 1 + ' - ' + maximum + ') </label>' +
                    '<textarea id = "assoc_scale_' + 0 +
                    '" class="form-control" rows="2" aria-labelledby="assoc_descripcion' + 0 +
                    '" name="Scales[]" cols="50" ></textarea></div></div>';
                fullDiv += div;
            } else {
                for (var i = 0; i < amountOfScale; i++) {

                    div = '<div id="assoc_eval' + i.toString() + Scales + '">' +
                        '<div class ="form-group">' +
                        '<label for ="assoc_descripcion' + i.toString() + '">Scale Description (' + (1 + (i * division)) +
                        ' - ' + ((1 + i) * division) + ')</label>' +
                        '<textarea  id = "assoc_scale_' + i +
                        '" class="form-control" rows="2" aria-labelledby="assoc_descripcion' + i.toString() +
                        '" name="Scales[]" cols="50" ></textarea></div></div>';
                    fullDiv += div;
                }
            }

            $('#' + Scales).html(fullDiv);
            $('#' + Scales).attr('data-value', amountOfScale);
        }





        //add







        function numberOfScales(string, Scales) {
            var maximum = parseInt($('#maximum_score').val());
            var amountOfScale = parseInt($('#' + string).val());
            var dataValue = parseInt($('#' + Scales).attr('data-value'));
            var division = maximum / amountOfScale;




            //add


            fullDiv = '';
            if (division == 1) {
                for (var i = 0; i < amountOfScale; i++) {
                    div = '<div id="eval' + i.toString() + Scales + '">' +
                        '<div class ="form-group">' +
                        '<label id = "label_for_des' + i.toString() + '" for ="descripcion' + i.toString() +
                        '">Scale Description (' + (i + 1) + ')</label>' +
                        '<textarea class="form-control" rows="2" aria-labelledby="descripcion' + i.toString() + '" name="' +
                        Scales + '[]" cols="50" ></textarea></div></div>';
                    fullDiv += div;
                }
            } else if (division == maximum) {

                div = '<div id="eval' + 0 + Scales + '">' +
                    '<div class ="form-group">' +
                    '<label id = "label_for_des' + 0 + '" for ="descripcion' + 0 + '">Scale Description (' + 1 + ' - ' +
                    maximum + ')</label>' +
                    '<textarea class="form-control" rows="2" aria-labelledby="descripcion' + 0 + '" name="' + Scales +
                    '[]" cols="50" ></textarea></div></div>';
                fullDiv += div;
            } else {
                for (var i = 0; i < amountOfScale; i++) {
                    div = '<div id="eval' + i.toString() + Scales + '">' +
                        '<div class ="form-group">' +
                        '<label id = "label_for_des' + i.toString() + '" for ="descripcion' + i.toString() +
                        '">Scale Description (' + (1 + (i * division)) + ' - ' + ((1 + i) * division) + ')</label>' +
                        '<textarea class="form-control" rows="2" aria-labelledby="descripcion' + i.toString() + '" name="' +
                        Scales + '[]" cols="50" ></textarea></div></div>';
                    fullDiv += div;
                }
            }

            $('#' + Scales).html(fullDiv);


            $('#' + Scales).attr('data-value', amountOfScale);

        }

        $('.filterSection').show();
        $('.filterButton').on('click', function() {
            var span = $(this).find('span');
            if (span.attr('class') == 'glyphicon glyphicon-plus') {
                span.attr('class', 'glyphicon glyphicon-minus');
            } else {
                span.attr('class', 'glyphicon glyphicon-plus');
            }
            $('.filterSection').toggle(533);
        });



        //Add outcome Button
        function addOutcomeTest() {


            counter = parseInt($('#outcomeGroup0').data("value"));
            var $select = $('<select/>', {
                'class': "selectpicker form-control",
                'name': "outcome[]",
                'data-live-search': 'true',
                'id': 'outcome' + counter.toString(),
                'onchange': 'fetchObjectiveForSelect("outcome' + counter + '", "objectiveGroupFor' + counter + '")'

            });
            var $div = $('<div/>', {
                'id': 'outcomeForm' + counter.toString(),
                'class': 'form-group col-md-11 selectOutcome'
            }).html("<label>Outcome " + (counter + 1) + "</label>");

            var $divForButton = $('<div/>', {
                'class': 'col-md-1',
                'id': 'close' + counter.toString()

            });
            var $button = $('<button/>', {
                'type': 'button',
                'class': 'btn btn-primary',
                'onclick': '$(this).parent().parent().remove();'
            });
            var divForGroup = $('<div/>', {
                'id': 'outcomeGroup' + counter.toString(),
                'class': 'createOutcome'
            });


            var objectiveGroup = $('<div/>', {
                'id': 'objectiveGroupFor' + counter,
                'class': 'createObjective',
                'data-value': '1'
            });

            var form_group_for_objective = $('<div/>', {
                'class': 'form-group col-md-11 selectObjective'
            }).html('<label>Associated Objectives for Outcome ' + (counter + 1) + '</label>');


            var $select_objective = $('<select/>', {
                'class': "selectpicker form-control",
                'name': "objective[]",
                'data-live-search': 'true',
                'id': 'objective_' + counter + '_counter_1',
                'onchange': "visiblePrograms('allOutcomes')"
            });

            var empty_div = $('<div/>', {
                'class': 'col-md-1'
            });



            var button_for_add = $('<button/>', {
                'class': 'btn btn-md btn-secondary button-add-objective',
                'onclick': 'addObjectiveTest("objectiveGroupFor' + counter + '", "objective_' + counter + '")'
            }).html("<span class='glyphicon glyphicon-plus'></span>Add another Objective");


            divForGroup.append($div)

            $button.append('X');
            $divForButton.append($button);


            $('#allOutcomes').append(divForGroup);
            $select.append(selectOptions);

            $select.appendTo('#outcomeForm' + counter.toString()).selectpicker('refresh');
            $('#outcomeGroup0').data("value", (counter + 1));


            divForGroup.append($divForButton);

            form_group_for_objective.append($select_objective)
            objectiveGroup.append(form_group_for_objective);
            objectiveGroup.append(empty_div);
            //objectiveGroup.append(button_for_add);

            divForGroup.append(objectiveGroup);
            divForGroup.append(button_for_add);
            divForGroup.append('<hr>');
            fetchObjectiveForSelect('outcome' + counter, "objectiveGroupFor" + counter);
            $select_objective.selectpicker('refresh');





        }



        //Delete Outcome and OptGroup associated

        function deleteLast(outcomeForm, outcomeDiv, closeButton, objectiveGroup) {
            $div = document.getElementById(outcomeForm);
            $div.remove();
            $div = document.getElementById(closeButton);
            $div.remove();
            if (outcomeDiv == 'outcomeGroup') {
                $('#' + outcomeDiv).data('value', parseInt($('#' + outcomeDiv).data('value')) - 1);
                fetchObjectiveForSelect(outcomeDiv, objectiveGroup);
            }

        }
        //Delete Objective
        function deleteObjective(objectiveForm, closeObj, objectiveGroup, allOutcomes) {
            $div = document.getElementById(objectiveForm);
            $div.remove();
            $div = document.getElementById(closeObj);
            $div.remove();
            counter = parseInt($('#' + objectiveGroup).data("value"));
            $('#' + objectiveGroup).data("value", counter - 1);
            visiblePrograms(allOutcomes);


        }

        //Add objective when editing

        function addAssocObjective(objForGroup, originalObjective) {
            counter = $("#" + objForGroup).data('value');

            selectObj = document.getElementById(originalObjective + '_counter_1').innerHTML;
            assocObjectiveCounter = parseInt($('#' + objForGroup).data('value'));
            var $select = $('<select/>', {
                'class': "selectpicker form-control",
                'name': "objective[]",
                'data-live-search': 'true',
                'id': originalObjective + '_counter_' + (assocObjectiveCounter + 1).toString(),
                'onchange': "visiblePrograms('allAssocOutcomes')"


            });
            var $div = $('<div/>', {
                'id': 'assoc_objectiveForm_' + objForGroup + '_' + assocObjectiveCounter.toString(),
                'class': 'form-group col-md-10 selectObjective'
            });
            var $divForButton = $('<div/>', {
                'class': 'col-md-2',
                'id': 'assoc_closeObj_' + objForGroup + '_' + assocObjectiveCounter.toString()

            });
            var $button = $('<button/>', {
                'type': 'button',
                'class': 'btn btn-primary',
                'onclick': 'deleteObjective("assoc_objectiveForm_' + objForGroup + '_' + assocObjectiveCounter
                    .toString() + '", "assoc_closeObj_' + objForGroup + '_' + assocObjectiveCounter.toString() +
                    '", "' + objForGroup + '", "allAssocOutcomes")'
            });

            $button.append('X');
            $divForButton.append($button);

            $div.appendTo('#' + objForGroup)
            $select.append(selectObj);

            $select.appendTo($div).selectpicker('refresh');
            //$('#assoc_objectiveGroup').data("value", assocObjectiveCounter +1);

            $divForButton.appendTo('#' + objForGroup);
            $('#' + objForGroup).data('value', counter + 1);

        }


        //Add objective when creating a criteria
        function addObjectiveTest(objForGroup, originalObjective) {

            counter = $('#' + objForGroup).data('value');

            selectObj = document.getElementById(originalObjective + '_counter_1').innerHTML;

            var $select = $('<select/>', {
                'class': "selectpicker form-control",
                'name': "objective[]",
                'data-live-search': 'true',
                'id': originalObjective + '_counter_' + (counter + 1).toString(),
                'onchange': "visiblePrograms('allOutcomes')"
            });
            var $div = $('<div/>', {
                'id': 'objectiveForm_' + objForGroup + '_' + counter.toString(),
                'class': 'form-group col-md-10 selectObjective'
            });
            var $divForButton = $('<div/>', {
                'class': 'col-md-2',
                'id': 'closeObj_' + objForGroup + '_' + counter.toString()

            });
            var $button = $('<button/>', {
                'type': 'button',
                'class': 'btn btn-primary',
                'onclick': 'deleteObjective("objectiveForm_' + objForGroup + '_' + counter.toString() +
                    '", "closeObj_' + objForGroup + '_' + counter.toString() + '", "' + objForGroup +
                    '", "allOutcomes")'
            });

            $button.append('X');
            $divForButton.append($button);

            $div.appendTo('#' + objForGroup)
            $select.append(selectObj);

            $select.appendTo($div).selectpicker('refresh');


            $divForButton.appendTo('#' + objForGroup);
            $('#' + objForGroup).data('value', counter + 1);
        }

        //Create outcome for editing

        var assocOutcomeCounter = 0;

        //if it was from a fetched criteria, dont fetch the outcome data

        function addAssocOutcome(fetchedCriterion = null) {
            assocOutcomeCounter = parseInt($('#assocOutcomeGroup0').data('value'));
            var $select = $('<select/>', {
                'class': "selectpicker form-control",
                'name': "outcome[]",
                'data-live-search': 'true',
                'id': 'assoc_outcome_' + assocOutcomeCounter.toString(),
                'onchange': 'fetchObjectiveForSelect("assoc_outcome_' + assocOutcomeCounter.toString() +
                    '", "assoc_objectiveGroupFor' + assocOutcomeCounter + '")'

            });
            var $div = $('<div/>', {
                'id': 'assoc_outcomeForm' + assocOutcomeCounter.toString(),
                'class': 'form-group col-md-11 selectOutcome'
            }).html("<label>Outcome " + (assocOutcomeCounter + 1) + "</label>");

            var $divForButton = $('<div/>', {
                'class': 'col-md-1',
                'id': 'assoc_close' + assocOutcomeCounter.toString()

            });
            var $button = $('<button/>', {
                'type': 'button',
                'class': 'btn btn-primary',
                'id': 'assoc_close_button' + assocOutcomeCounter,
                'onclick': '$(this).parent().parent().remove(); visiblePrograms("allAssocOutcomes")'
            });

            var divForGroup = $('<div/>', {
                'id': 'assocOutcomeGroup' + assocOutcomeCounter.toString(),
                'class': 'createOutcome'
            });
            var objectiveGroup = $('<div/>', {
                'id': 'assoc_objectiveGroupFor' + assocOutcomeCounter,
                'class': 'createObjective',
                'data-value': '1'
            });
            var form_group_for_objective = $('<div/>', {
                'class': 'form-group col-md-11 selectObjective'
            }).html('<label>Associated Objectives for Outcome ' + (assocOutcomeCounter + 1) + '</label>');

            var $select_objective = $('<select/>', {
                'class': "selectpicker form-control",
                'name': "objective[]",
                'data-live-search': 'true',
                'id': 'assoc_objective_' + assocOutcomeCounter + '_counter_1',
                'onchange': "visiblePrograms('allAssocOutcomes')"
            });

            var empty_div = $('<div/>', {
                'class': 'col-md-1'
            });

            var button_for_add = $('<button/>', {
                'class': 'btn btn-md btn-secondary button-add-objective',
                'onclick': 'addAssocObjective("assoc_objectiveGroupFor' + assocOutcomeCounter +
                    '", "assoc_objective_' + assocOutcomeCounter + '")'
            }).html("<span class='glyphicon glyphicon-plus'></span>Add another Objective");

            divForGroup.append($div)
            $button.append('X');
            $divForButton.append($button);

            $('#allAssocOutcomes').append(divForGroup);


            //$div.appendTo('#assocOutcomeGroup')
            $select.append(selectOptions);

            $select.appendTo('#assoc_outcomeForm' + assocOutcomeCounter.toString()).selectpicker('refresh');
            //assocOutcomeCounter += 1;
            $('#assocOutcomeGroup0').data('value', assocOutcomeCounter + 1);
            //$divForButton.appendTo('#assocOutcomeGroup');
            divForGroup.append($divForButton);

            form_group_for_objective.append($select_objective)
            objectiveGroup.append(form_group_for_objective);
            objectiveGroup.append(empty_div);
            //objectiveGroup.append(button_for_add);

            divForGroup.append(objectiveGroup);
            divForGroup.append(button_for_add);
            divForGroup.append('<hr>');
            if (!fetchedCriterion) fetchObjectiveForSelect('assoc_outcome_' + assocOutcomeCounter,
                'assoc_objectiveGroupFor' +
                assocOutcomeCounter);
            $select_objective.selectpicker('refresh');




        }
        //Fetch associated objective for editing


        var assocObjectiveCounter = 1;

        /*  function fetchAssocObjective(outcomeDiv, objectiveGroup) {
              var count = $('#' + outcomeDiv).data('value');
              var allOutcomes = [];

              $("#" + outcomeDiv + ' select').each(function() {
                  allOutcomes.push(this.value);

              })
              var allObjectives = [];
              $("#" + objectiveGroup + ' select').each(function() {
                  var temp = {
                      id: this.id,
                      value: this.value
                  }
                  allObjectives.push(temp);
              })


              $.post(
                  "{{ URL::action('CriteriaController@fetchObjectivesForSelect') }}", {
                      allOutcomes: allOutcomes
                  },

                  function(varArray) {

                      optionName = '<option value ="0">Nothing Selected</option>';
                      for (outcome in varArray.outcomes) {
                          optionName += '<optgroup label="' + varArray.outcomes[outcome][0].name + '">';
                          var objectiveForOutcome = varArray.objectives;
                          var objectives = objectiveForOutcome[outcome];
                          for (objective in objectives) {


                              var obj = objectives[objective];
                              var option = '<option value ="' + obj.id + '">' + obj.text + '</option>';
                              optionName += (option);
                          }
                          optionName += '</optgroup>';
                      }


                      $('#assoc_objective_0').html(optionName);
                      $('#assoc_objective_0').selectpicker('refresh');
                      if ($("#assoc_objective_0 option[value='" + allObjectives[0].value + "']").length > 0) {
                          $("#assoc_objective_0").val(allObjectives[0].value);
                          $('#assoc_objective_0').selectpicker('refresh');
                      }

                      for (var i = allObjectives.length - 1; i > 0; i--) {
                          deleteObjective('assoc_objectiveForm_' + objectiveGroup +'_'+i, 'assoc_closeObj_'+objectiveGroup+'_' + i.toString(), objectiveGroup);
                      }
                      /*for (var i = 1; i < allObjectives.length; i++) {
                          addAssocObjective();
                          $('#assoc_objective_' + i.toString()).selectpicker('refresh');
                          if ($("#assoc_objective_" + i.toString() + " option[value='" + allObjectives[i].value + "']").length > 0) {
                              $("#assoc_objective_" + i.toString()).val(allObjectives[i].value);
                              $("#assoc_objective_" + i.toString()).selectpicker("refresh");
                          }
                      }



                  },
                  'json'
              );
          }*/

        //Fetch objective at creating criteria
        counterForPost = 0;



        function fetchObjectiveForSelect(outcome, objectiveGroup) {
            outcomeID = $('#' + outcome).val();
            var allObjectives = [];
            $("#" + objectiveGroup + ' select').each(function() {
                var temp = {
                    id: this.id,
                    value: this.value
                }
                allObjectives.push(temp);
            })

            $.post(
                "{{ URL::action('CriteriaController@fetchObjectivesForSelect') }}", {
                    outcomeID: outcomeID
                },
                function(varArray) {
                    counterOutcome = 0;
                    optionName = '<option value ="0">Nothing Selected</option>';
                    for (index in varArray) {
                        objectiveObject = varArray[index];
                        optionName += '<option data-program-ids = "' + objectiveObject.program_ids + '" value ="(' +
                            objectiveObject.outcome_id + ',' + objectiveObject.objective_id + ')">' +
                            objectiveObject.text + '</option>';

                    }
                    /*
                    for(outcome in varArray.outcomes){
                        optionName += '<optgroup label="' + varArray.outcomes[outcome][0].name + '">';
                        var objectiveForOutcome = varArray.objectives;
                        var objectives = objectiveForOutcome[outcome];
                        for (objective in varArray.objectives[outcome]) {
                    

                            var obj= objectives[objective];
                            var option = '<option value ="' + obj.id + '">' +obj.text + '</option>';
                            optionName += (option);
                        }
                        optionName += "</optgroup>";
                    }*/

                    for (index in allObjectives) {

                        id = allObjectives[index].id
                        $('#' + id).html(optionName);
                        $('#' + id).selectpicker('refresh');
                    }


                    /*$('#objective_0').html(optionName);
                    $('#objective_0').selectpicker('refresh');
                    if($("#objective_0 option[value='"+allObjectives[0].value+"']").length>0){
                        $("#objective_0").val(allObjectives[0].value);
                        $('#objective_0').selectpicker('refresh');
                    }
                    

                    for (var i = allObjectives.length - 1; i > 0; i--) {
                        deleteObjective('objectiveForm' + i.toString(), 'closeObj' + i.toString(), 'objectiveGroup');
                    }
                    for(var i =1; i<allObjectives.length; i++){
                        addObjectiveTest();
                        $('#objective_'+i.toString()).selectpicker('refresh');
                        if($("#objective_"+i.toString()+" option[value='"+allObjectives[i].value+"']").length>0){
                        $("#objective_"+i.toString()).val(allObjectives[i].value);
                        $("#objective_"+i.toString()).selectpicker("refresh");
                    }
                    }*/






                },
                'json'
            );
        }
        //after post


        //For editing criterion
        function fetchAllCriterion(program, outcome) {
            var program_id_fetch = $('#' + program).find(':selected').val();
            var outcome_fetch = $('#' + outcome).find(':selected').val();
            $.post(
                "{{ URL::action('CriteriaController@fetchAllCriterion') }}", {
                    program_fetch: program_id_fetch,
                    outcome_fetch: outcome_fetch
                },
                function(json) {
                    json_length = (json.criterion.length);
                    fullHTML = '';
                    for (var i = 0; i < json_length; i++) {
                        fullHTML += '<option value="' + json.criterion[i].id + '">' + json.criterion[i].name +
                            '</option>';
                    }
                    $('#select-criterion').html(fullHTML);
                    $('#select-criterion').selectpicker('refresh');
                    fetchCriterionForEditing()

                },
                'json'
            );
        }

        function deleteCriterion() {
            var id = $('#select-criterion').find(':selected').val()

            $.post(
                "{{ URL::action('CriteriaController@delete') }}", {
                    id: id
                },
                function() {
                    window.location.reload(true)
                }
            )
        }
    </script>
@stop

@section('javascript')

    // --------------------------------------------------------------------------
    // Page load
    // --------------------------------------------------------------------------

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

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

    fetchCriterionForEditing();
    fetchObjectiveForSelect('outcome0', 'objectiveGroupFor0');
    // setCriterionStatus();


    fetchAllCriterion("select-program", "assoc_outcomes_fetch");
    visiblePrograms('allOutcomes');
    // --------------------------------------------------------------------------
    // Functions
    // --------------------------------------------------------------------------
    $('#button-add-outcome').on('click', function(e) {
    // Prevent the default action of the clicked item. In this case that is submit
    e.preventDefault();


    return false;
    });
    $('.filterButton').on('click', function(e) {
    // Prevent the default action of the clicked item. In this case that is submit
    e.preventDefault();


    return false;
    });
    $('.button-add-objective-assoc').on('click', function(e) {
    // Prevent the default action of the clicked item. In this case that is submit
    e.preventDefault();


    return false;
    });
    $('#button-add-outcome-assoc').on('click', function(e) {
    // Prevent the default action of the clicked item. In this case that is submit
    e.preventDefault();


    return false;
    });
    $('.button-add-objective').on('click', function(e) {
    // Prevent the default action of the clicked item. In this case that is submit
    e.preventDefault();


    return false;
    });
    // Fetch criterion info for editing


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

    // When panel heading is clicked, toggle it
    $('.panel-group .panel-heading').on('click', function()
    {
    $(this).next().stop().slideToggle();
    })

    //$('#outcome[0]').on('change', function(){

    //$('.selectpicker').selectpicker('refresh');
    //})
    // When list item is clicked, load corresponding info


    // When list item is clicked, load corresponding info
    $('.selectpicker').on('change', function()
    {
    //alert($(this).find(':selected').val());
    $('.selectpicker').selectpicker('refresh');
    });

@stop