OLAS/app/views/local/managers/pCoords/criteria.blade.php

@extends('layouts.master')

@section('navigation')
@include('local.managers.pCoords._navigation')
@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(array('action' => 'CriteriaController@create', 'id'=> 'create_criterion')) }}
                <div id ='allOutcomes'>
                <div id='outcomeGroup0' data-value = "1">
                    <div class="form-group col-md-12">
                        <label>Outcome 1</label>

                        {{ Form::select('outcome[]', $outcomes, reset($outcomes),  ['class'=>'form-control selectpicker', 'id' =>'outcome0', 'onchange'=>'fetchObjectiveForSelect("outcome0", "objectiveGroupFor0")']) }}
                    </div>
                
                <div id='objectiveGroupFor0' data-value = '1'>
                    <div class="form-group col-md-11">
                        <label>Associated Objectives for Outcome 1</label>
                        <select id="objective_0_counter_1" name="objective[]" class="form-control selectpicker">
                        </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></div><hr>
                </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::label('program_id', 'Associated Program') }}<br>
                    <br>


                    <input type = "hidden" id = "{{ $programs[0]->name }}"  name="program_id[]" value="{{$programs[0]->id}}">
                    <input type="checkbox" id="{{ $programs[0]->name }}" name="program_id[]" value="{{$programs[0]->id}}" disabled checked>
                    <label for="{{ $programs[0]->name }}"> {{ $programs[0]->name }} [{{ $programs[0]->school->name }}]</label><br>


                </div>

                <div class="form-group">
                    {{ Form::label('name', 'Name') }}
                    {{ Form::text('name', '', array('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', '', array('class' => 'form-control', 'rows'=>3, 'aria-labelledby'=>'subcriteria')) }}
                </div>
                <div class="form-group">
                    {{ Form::label('maximum_score', 'Maximum Score') }}
                    {{ Form::text('maximum_score', '1', array('class' => 'form-control', 'id'=>'maximum_score', 'oninput'=>'addOptions("Num_scale", "maximum_score", "Scales")')) }}
                </div>
                <div class="form-group">
                    {{ 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' data-value="0">

                </div>


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

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

                {{ Form::submit('Create', array('class' => 'btn btn-primary btn-block', 'id'=>'create_the_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(array('action' => 'CriteriaController@update', 'id'=>'update_criterion')) }}

                <button class="btn btn-md btn-secondary filterButton">
                    <span class="glyphicon glyphicon-plus">
                    </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")'>

                        <option value='{{$programs[0]->id}}' data-subtext="{{$programs[0]->code}}">{{$programs[0]->name}}</option>

                    </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()'>
                        @foreach ($criteria as $criterion)
                        <option value="{{ $criterion->id }}" data-subtext="
                                        @if($criterion->program)
                                            &nbsp;&nbsp;&nbsp;[{{ $criterion->program->name }}]
                                        @endif
                                        ">
                            {{ $criterion->name }}



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

                    </div>
<div id='assoc_objectiveGroupFor0' data-value="1">
                    <div class="form-group col-md-11">
                        <label>Associated Objectives for Outcome 1</label>
                        <select id="assoc_objective_0_counter_1" name="objective[]" class="form-control selectpicker">
                            <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> </div><hr></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::label('program_id2', 'Associated Program') }}<br><br>

                    <input type = "hidden" id = "{{ $programs[0]->name }}"  name="program_id[]" value="{{$programs[0]->id}}">
                 
                    <input type="checkbox" id="assoc_program_id_{{ $programs[0]->id }}" name="program_id[]" value="{{$programs[0]->id}}" disabled checked>
                    <label for="assoc_program_id_{{ $programs[0]->id }}"> {{ $programs[0]->name }} <sub>[{{ $programs[0]->school->name }}]</sub></label><br>

                </div>


                <!-- Status -->
                <div class="form-group">
                    {{ 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::label('name', 'Name') }}
                    {{ Form::text('name', Input::old('name'), array('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', '', array('class' => 'form-control', 'rows'=>3, 'id' => 'criterion_subcriteria')) }}
                </div>
                <div class="form-group">
                    {{ Form::label('maximum_score', 'Maximum Score') }}
                    {{ Form::text('maximum_score', '', array('class' => 'form-control', 'id'=>'assoc_maximum_score', 'oninput'=>'addOptions("Num_assoc_scale", "assoc_maximum_score", "Assoc_Scales")')) }}
                </div>


                <div class="form-group">
                    {{ 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' data-value="0">

                </div>




                <div class="form-group">
                    {{ Form::label('copyright', 'Copyright Information') }}
                    {{ Form::textarea('copyright', Input::old('copyright'), array('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'), array('class' => 'form-control', 'rows'=>2, 'id'=>'criterion_notes', 'placeholder'=>'(optional)')) }}
                </div>
               
                {{ Form::submit('Update', array('class' => 'btn btn-primary btn-block', 'id'=>'update_the_criterion')) }}
                {{ Form::close() }}
                {{ Form::open(array('action' => 'CriteriaController@delete')) }}
                
                                <input type='hidden' name='criterion_delete' id='deleteCriteria'>
               
                                {{Form::submit("Delete", array('class'=> 'btn btn-primary btn-block', 'id'=>"DeleteButton"))}}

            </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');
        numberOfScales('Num_scale', 'Scales');
    });

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

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

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

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


    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').hide();
    $('.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 '
        });

        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(),
        }).html("<label>Outcome "+(counter+1)+"</label>");
        

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

        var form_group_for_objective = $('<div/>', {
            'class': 'form-group col-md-11'
        }).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'  
        });

        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) {
        $div = document.getElementById(objectiveForm);
        $div.remove();
        $div = document.getElementById(closeObj);
        $div.remove();
        //counter = parseInt($('#'+objectiveGroup).data("value"));
       // $('#'+objectiveGroup).data("value", counter-1);


    }

    //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(),


        });
        var $div = $('<div/>', {
            'id': 'assoc_objectiveForm_'+objForGroup +'_' + assocObjectiveCounter.toString(),
            'class': 'form-group col-md-10'
        });
        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+'")'
        });

        $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()
        });
        var $div = $('<div/>', {
            'id': 'objectiveForm_'+objForGroup + '_' + counter.toString(),
            'class': 'form-group col-md-10'
        });
        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+'")'
        });

        $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;


    function addAssocOutcome(depends= 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': 'fetchAssocObjective("assoc_outcome_' + assocOutcomeCounter.toString() + '", "assoc_objectiveGroupFor'+assocOutcomeCounter+'")'

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

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

        var divForGroup = $('<div/>', {
            'id' : 'assocOutcomeGroup'+assocOutcomeCounter.toString(),
        }).html("<label>Outcome "+(assocOutcomeCounter+1)+"</label>");

        var objectiveGroup = $('<div/>', {
            'id' : 'assoc_objectiveGroupFor'+assocOutcomeCounter,
            'data-value': '1'
        });
        var form_group_for_objective = $('<div/>', {
            'class': 'form-group col-md-11'
        }).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'  
        });

        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(!depends)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(json) {

                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' + i.toString(), 'assoc_closeObj' + i.toString(), 'assoc_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 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)
            }
        )
    }


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

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

                if (!(json.activity_criterion.length)) {

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

                } else {
                    $('#DeleteButton').prop('disabled', true);
                    $("#update_the_criterion").val("Create New")
                    $("#update_criterion").attr('action', "{{ URL::action('CriteriaController@create')}}")
                    alert("The criterion is already used in assessments. Editting the criterion will actually create a new criterion");

                    }

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


                } else {
                    var name = json.criteria[0].name;
                    if (json.criteria[0].subcriteria) {
                        subcriteria = JSON.parse(json.criteria[0].subcriteria).join('\n');
                    }else {
                        subcriteria = "";
                    }
                    if (json.criteria[0].copyright) {
                        var copyright = json.criteria[0].copyright;
                    } else {
                        var copyright = ''
                    }
                    if (json.criteria[0].notes) notes = json.criteria[0].notes;
                    else notes = '';

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

                    addOptions("Num_assoc_scale", "assoc_maximum_score", "Assoc_Scales");
                    $('#Num_assoc_scale').val(json.criteria[0].num_scales)
                    $('#Num_assoc_scale').selectpicker('refresh');
                    $('#Num_assoc_scale').trigger('change');

                    for(i=0; i<json.criteria[0].num_scales;i++){
                        $('#assoc_scale_'+i).val(json.scales[i].description);
                    }



                    // 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 (json.outcomes.length) {
                    $('#assoc_outcome_0').val(json.outcomes[0].id);
                    $('#assoc_outcome_0').selectpicker('refresh');

                    var first_outcome_id = json.outcomes[0].id;
                    options = "<option value ='0'>Nothing Selected</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(json.objectives[first_outcome_id].length){
                        objective_id = json.objectives[first_outcome_id][0].objective_id;
                    value = '('+first_outcome_id+','+objective_id+')';
                    $('#assoc_objective_0_counter_1').val(value);
                    $('#assoc_objective_0_counter_1').selectpicker('refresh');

                    }
                    

                    for(var i =1; i<json.objectives[first_outcome_id].length; i++ ){
                        addAssocObjective("assoc_objectiveGroupFor0", "assoc_objective_0");
                        objective_id = json.objectives[first_outcome_id][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 < json.outcomes.length; i++) {
                    addAssocOutcome(true);


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

                    var outcome_id = json.outcomes[i].id;
                    options = "<option value ='0'>Nothing Selected</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(json.objectives[outcome_id].length){
                        objective_id = json.objectives[outcome_id][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; i<json.objectives[outcome_id].length; i++ ){
                        addAssocObjective("assoc_objectiveGroupFor"+i, "assoc_objective_"+i);
                        objective_id = json.objectives[outcome_id][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);

                


        */



                // Select status


             





            },
            'json'
        );
    }
</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");

// --------------------------------------------------------------------------
// 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