OLAS/app/views/local/managers/admins/new_criteria.blade.php

@extends('layouts.master')

@section('navigation')
@include('local.managers.admins._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')) }}
                <div id='outcomeGroup' data-value="1">
                    <div class="form-group col-md-11">
                        <label>Associated Outcomes</label>

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

                    </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>
                <div id='objectiveGroup'>
                    <div class="form-group">
                        <label>Associated Objectives</label>
                        <select id="objective_0" name="objective[]" class="form-control selectpicker">
                        </select>

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

                    </span>
                    Add another Objective
                </button>

                <!-- Associated Program -->
                <div class="form-group">
                    {{ Form::label('program_id', 'Associated Program') }}<br>
                    <br>

                    @foreach ($programs as $program)

                    <input type="checkbox" id="{{ $program->name }}" name="program_id[]" value="{{$program->id}}">
                    <label for="{{ $program->name }}"> {{ $program->name }} [{{ $program->school->name }}]</label><br>
                    @endforeach

                </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')) }}
                {{ 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')) }}


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

                <!-- Associated Outcome -->
                <div id='assocOutcomeGroup' data-value="1">
                    <div class="form-group">
                        <label>Associated Outcome</label>
                        {{ Form::select('assoc_outcome[]', $outcomes, null, ['class'=>'form-control selectpicker', 'id'=>'assoc_outcome_0', 'onchange'=>'fetchAssocObjective("assoc_outcome_0")']) }}

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

                    </span>
                    Add another Outcome
                </button>

                <div id='assoc_objectiveGroup'>
                    <div class="form-group">
                        <label>Associated Objectives</label>
                        <select id="assoc_objective_0" name="assoc_objective[]" class="form-control selectpicker">
                        </select>

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

                    </span>
                    Add another Objective
                </button>

                <!-- Associated Program -->
                <div class="form-group">

                    {{ Form::label('program_id2', 'Associated Program') }}<br><br>
                    @foreach ($programs as $program)

                    <input type="checkbox" id="assoc_program_id_{{ $program->id }}" name="program_id[]" value="{{$program->id}}">
                    <label for="assoc_program_id_{{ $program->id }}"> {{ $program->name }} <sub>[{{ $program->school->name }}]</sub></label><br>
                    @endforeach
                </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('assoc_maximum_score', 'Maximum Score') }}
                    {{ Form::text('assoc_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')) }}
                {{ 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');
    });


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

            fullDiv = '';

            for (var i = dataValue; i < amountOfScale; i++) {
                div = '<div id="assoc_eval' + i.toString() + Scales + '">' +
                    '<div class ="form-row">' +
                    '<label for="header' + (i).toString() + '">Evaluación ' + (i + 1).toString() + '</label><br><br>' +
                    '<input type="hidden"  id="header' + i.toString() + '">' +
                    '<div class="form-group col-md-8" >' +
                    '<label for="title' + i.toString() + '">Nombre de Evaluación ' + (i + 1).toString() + '</label>' +
                    '<input class="form-control" name="assoc_title[]" type="text"  id="title' + i.toString() + '" placeholder ="Nombre de evaluacion" ></div>' +
                    '<div class ="form-group col-md-2">' +
                    '<label for="min' + i.toString() + '">Mínimo </label>' +
                    '<input class="form-control" type="number" id="assoc_min' + i.toString() + '" min="1" max = "' + maximum + '" oninput ="changedMin(' + "'assoc_min" + i.toString() + "', '" + i.toString() + "', 'Assoc_Scales' " + ')" name = "assoc_min[]"></div>' +
                    '<div class ="form-group col-md-2">' +
                    '<label for="max' + i.toString() + '">Máximo </label>' +
                    '<input class="form-control" type="number" id="assoc_max' + i.toString() + '" min="1" max = "' + maximum + '" oninput ="changedMax(' + "'assoc_max" + i.toString() + "', '" + i.toString() + "', 'Assoc_Scales' " + ')" name = "assoc_max[]"></div></div>' +
                    '<div class ="form-group">' +
                    '<label for ="descripcion' + i.toString() + '">Descripción de evaluación</label>' +
                    '<textarea class="form-control" rows="2" aria-labelledby="descripcion' + i.toString() + '" name="assoc_scales[]" cols="50" ></textarea></div></div>';
                fullDiv += div;


            }

            $('#' + Scales).append(fullDiv);
            $('#' + Scales).attr('data-value', amountOfScale);
        } else {
            for (var i = dataValue; i > amountOfScale; i--) {
                $('#assoc_eval' + (i - 1).toString()).remove();
            }
        }
        $('#' + Scales).attr('data-value', amountOfScale);

    }

    function addOptions(select, max, scaleDiv) {
        var maxscore = parseInt($('#' + max).val())
        options = '';
        for (var i = 1; i <= maxscore; i++) {
            options += '<option value="' + i.toString() + '">' + i.toString() + '</option>';

        }

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

        var attribute = parseInt($('#' + scaleDiv).attr('data-value'));

        for (var i = 0; i < attribute; i++) {
            $('#max' + i.toString()).attr('max', maxscore);
            $('#min' + i.toString()).attr('max', maxscore);
        }

    }



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

            fullDiv = '';

            for (var i = dataValue; i < amountOfScale; i++) {
                div = '<div id="eval' + i.toString() + Scales + '">' +
                    '<div class ="form-row">' +
                    '<label for="header' + (i).toString() + '">Evaluación ' + (i + 1).toString() + '</label><br><br>' +
                    '<input type="hidden"  id="header' + i.toString() + '">' +
                    '<div class="form-group col-md-8" >' +
                    '<label for="title' + i.toString() + '">Nombre de Evaluación ' + (i + 1).toString() + '</label>' +
                    '<input class="form-control" name="title[]" type="text"  id="title' + i.toString() + '" placeholder ="Nombre de evaluacion" ></div>' +
                    '<div class ="form-group col-md-2">' +
                    '<label for="min' + i.toString() + '">Mínimo </label>' +
                    '<input class="form-control" type="number" id="min' + i.toString() + '" min="1" max = "' + maximum + '" oninput ="changedMin(' + "'min" + i.toString() + "', '" + i.toString() + "', 'Scales' " + ')" name = "min[]"></div>' +
                    '<div class ="form-group col-md-2">' +
                    '<label for="max' + i.toString() + '">Máximo </label>' +
                    '<input class="form-control" type="number" id="max' + i.toString() + '" min="1" max = "' + maximum + '" oninput ="changedMax(' + "'max" + i.toString() + "', '" + i.toString() + "', 'Scales' " + ')" name = "max[]"></div></div>' +
                    '<div class ="form-group">' +
                    '<label for ="descripcion' + i.toString() + '">Descripción de evaluación</label>' +
                    '<textarea class="form-control" rows="2" aria-labelledby="descripcion' + i.toString() + '" name="' + Scales + '[]" cols="50" ></textarea></div></div>';
                fullDiv += div;
            }

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

        } else {
            for (var i = dataValue; i > amountOfScale; i--) {
                $('#eval' + (i - 1).toString() + Scales).remove();
            }
        }
        $('#' + Scales).attr('data-value', amountOfScale);

    }

    function changedMin(min, index, scaleDiv) {
        var maximum = parseInt($('#' + min).val()) + 1;
        var maxScaleScore = parseInt($('#' + scaleDiv).attr('data-value'));

        for (var i = parseInt(index); i < maxScaleScore; i++) {
            $('#max' + i).attr('min', maximum);

        }

    }

    function changedMax(max, index, scaleDiv) {
        var maximum = parseInt($('#' + max).val()) + 1;
        var maxScaleScore = parseInt($('#' + scaleDiv).attr('data-value'));

        for (var i = parseInt(index) + 1; i < maxScaleScore; i++) {
            $('#min' + i).attr('min', maximum)

        }


    }

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

        });
        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': 'deleteLast("outcomeForm", "outcomeGroup", "close' + counter.toString() + '", "objectiveGroup")'
        });

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

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

        $select.appendTo('#outcomeForm' + counter.toString()).selectpicker('refresh');
        $('#outcomeGroup').data("value") = parseInt($('#outcomeGroup').data("value")) + 1;
        fetchObjectiveForSelect('outcomeGroup', "objectiveGroup");
        counter += 1;
        $divForButton.appendTo('#outcomeGroup');

        $('#counterOutcome').val(counter)


    }


    $('.filterSection').hide();
    //Delete Outcome and OptGroup associated

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



        for (var i = 0; i < counterObj; i++) {


            $('#' + objective + i.toString()).selectpicker('refresh');
        }

    }
    //Delete Objective
    function deleteObjective(objectiveForm, closeObj) {
        $div = document.getElementById(objectiveForm);
        $div.remove();
        $div = document.getElementById(closeObj);
        $div.remove();


    }

    //Add objective when editing

    function addAssocObjective() {
        selectObj = document.getElementById('assoc_objective_0').innerHTML;
        var $select = $('<select/>', {
            'class': "selectpicker form-control",
            'name': "assoc_objective[]",
            'data-live-search': 'true',
            'id': 'assoc_objective_' + assocObjectiveCounter.toString(),


        });
        var $div = $('<div/>', {
            'id': 'assoc_objectiveForm' + assocObjectiveCounter.toString(),
            'class': 'form-group col-md-11'
        });
        var $divForButton = $('<div/>', {
            'class': 'col-md-1',
            'id': 'assoc_closeObj' + assocObjectiveCounter.toString()

        });
        var $button = $('<button/>', {
            'type': 'button',
            'class': 'btn btn-primary',
            'onclick': 'deleteObjective("assoc_objectiveForm' + assocObjectiveCounter.toString() + '", "assoc_closeObj' + assocObjectiveCounter.toString() + '")'
        });

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

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

        $select.appendTo('#assoc_objectiveForm' + assocObjectiveCounter.toString()).selectpicker('refresh');
        counterObj += 1;

        $divForButton.appendTo('#assoc_objectiveGroup');

    }


    //Add objective when creating a criteria
    function addObjectiveTest() {
        selectObj = document.getElementById('objective_0').innerHTML;
        var $select = $('<select/>', {
            'class': "selectpicker form-control",
            'name': "objective[]",
            'data-live-search': 'true',
            'id': 'objective_' + counterObj.toString()

        });
        var $div = $('<div/>', {
            'id': 'objectiveForm' + counterObj.toString(),
            'class': 'form-group col-md-11'
        });
        var $divForButton = $('<div/>', {
            'class': 'col-md-1',
            'id': 'closeObj' + counterObj.toString()

        });
        var $button = $('<button/>', {
            'type': 'button',
            'class': 'btn btn-primary',
            'onclick': 'deleteObjective("objectiveForm' + counterObj.toString() + '", "closeObj' + counterObj.toString() + '")'
        });

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

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

        $select.appendTo('#objectiveForm' + counterObj.toString()).selectpicker('refresh');
        counterObj += 1;

        $divForButton.appendTo('#objectiveGroup');
        $('#counterObjective').val(counterObj)
    }

    //Create outcome for editing

    var assocOutcomeCounter = 0;


    function addAssocOutcome() {
        var $select = $('<select/>', {
            'class': "selectpicker form-control",
            'name': "assoc_outcome[]",
            'data-live-search': 'true',
            'id': 'assoc_outcome_' + assocOutcomeCounter.toString(),
            'onchange': 'fetchAssocObjective("assoc_outcome_' + assocOutcomeCounter.toString() + '")'

        });
        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',
            'onclick': 'deleteLast("assoc_outcomeForm' + assocOutcomeCounter.toString() + '", "' + 'Associated_Outcome' + (assocOutcomeCounter).toString() + '", "assoc_close' + assocOutcomeCounter.toString() + '","assoc_objective_")'
        });

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

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

        $select.appendTo('#assoc_outcomeForm' + assocOutcomeCounter.toString()).selectpicker('refresh');
        //fetchAssocObjective('assoc_outcome_' + assocOutcomeCounter.toString());
        assocOutcomeCounter += 1;
        $divForButton.appendTo('#assocOutcomeGroup');




    }
    //Fetch associated objective for editing


    var assocObjectiveCounter = 1;

    function fetchAssocObjective(outcomeId) {
        var id = $('#' + outcomeId).find(':selected').val();


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

            function(json) {

                var optionName = '<optgroup id="' + 'Associated_Outcome' + (assocOutcomeCounter - 1).toString() + '"label="' + 'Associated Outcome' + (assocOutcomeCounter).toString() + '"';
                for (var i = 0; i < json.length; i++) {
                    var option = '<option value ="' + json[i].id.toString() + '">' + json[i].text + '</option>'
                    optionName += (option)

                }
                optGroup = document.getElementById('Associated_Outcome' + (assocOutcomeCounter - 1).toString());
                if (optGroup != null) {
                    optGroup.remove()

                }


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

                for (var i = assocObjectiveCounter - 1; i > 0; i--) {
                    deleteObjective('assoc_objectiveForm' + i.toString(), 'assoc_closeObj' + i.toString())
                }
                assocObjectiveCounter = 1;



            },
            'json'
        );
    }

    //Fetch objective at creating criteria
    counterForPost = 0;

    function fetchObjectiveForSelect(outcomeDiv, objectiveGroup) {
        var count = $("#" + outcomeDiv).data('value');
        var allOutcomes = [];
        $("#" + outcomeDiv + ' select').each(function() {
            array_push(allOutcomes, this.find(':selected').val());

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

        $.post(
            "{{ URL::action('CriteriaController@fetchObjectivesForSelect') }}", {
                allOutcomes: allOutcomes
            },
            function(varArray) {
                
                var optionName = '<optgroup label="' + varArray[0].name + '"';
                for (var i = 0; i < varArray.length; i++) {
                    var option = '<option value ="' + varArray[i].id.toString() + '">' + varArray[i].text + '</option>';
                    optionName += (option);
                }



                $('#objective_0').append(optionName);
                $('#objective_0').selectpicker('refresh');

                for (var i = counterObj - 1; i > 0; i--) {
                    deleteObjective('objectiveForm' + i.toString(), 'closeObj' + i.toString())
                }
                counterObj = 1;




            },
            'json'
        );
    }

    //after post

    fetchAllCriterion("select-program", "assoc_outcomes_fetch");
    //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', true);

                } else {
                    $('#DeleteButton').prop('enabled', true);
                }

                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].maximum_score);
                    var maximum = json.criteria[0].maximum_score;

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

                }



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


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







                // Select associated outcome
                try {
                    for (var i = assocOutcomeCounter - 1; i > 0; i--) {
                        deleteLast("assoc_outcomeForm" + (i).toString(), 'Associated_Outcome' + (i).toString(), "assoc_close" + (i).toString(), "assoc_objective_");
                    }
                } catch (err) {
                    var Notran = true;
                }

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

                }




                try {
                    for (var i = counterObj - 1; i > 0; i--) {
                        deleteObjective('objectiveForm' + i.toString(), 'closeObj' + i.toString())
                    }
                } catch (err) {
                    var noEntro = true;
                }
                counterObj = 1;





                assocOutcomeCounter = 0;
                var i = 0;
                for (var j = 0; j < json.outcomes.length; j++) {
                    assocOutcomeCounter += 1;
                    var optionName = '<optgroup id="' + 'Associated_Outcome' + (assocOutcomeCounter - 1).toString() + '"label="' + json.outcomes[j].name + '"';
                    for (; i < json.objectives_outcome.length; i++) {
                        if (json.objectives_outcome[i].outcome_id != json.outcomes[j].id) break;

                        var option = '<option value ="' + json.objectives_outcome[i].id.toString() + '">' + json.objectives_outcome[i].text + '</option>'
                        optionName += (option)

                    }
                    optGroup = document.getElementById('Associated_Outcome' + (assocOutcomeCounter - 1).toString());
                    if (optGroup != null) {
                        optGroup.remove()

                    }
                    $('#assoc_objective_0').append(optionName);
                    $('#assoc_objective_0').selectpicker('refresh');
                }




                for (var i = assocObjectiveCounter - 1; i > 0; i--) {
                    deleteObjective('assoc_objectiveForm' + i.toString(), 'assoc_closeObj' + i.toString())
                }
                assocObjectiveCounter = 1;





                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');
                }
                assocObjectiveCounter = json.objectives.length;






                // Select associated program
                var program_length = json.program.length;
                $('input[type=checkbox]').prop('checked', false);

                for (var i = 0; i < program_length; i++) {
                    $('#assoc_program_id_' + json.program[i].program_id).prop("checked", true);
                }


                // Select status


                scaleLength = json.scales.length;
                fullDiv = '';
                if (!scaleLength) {
                    div = '<div id="assoc_eval 0"">' +
                        '<div class ="form-row">' +
                        '<label for="header0">Evaluación 1</label><br><br>' +
                        '<input type="hidden"  id="header0">' +
                        '<div class="form-group col-md-8" >' +
                        '<label for="title0">Nombre de Evaluación 1</label>' +
                        '<input class="form-control" name="assoc_title[]" value =" "type="text"  id="title0" placeholder ="Nombre de evaluacion" ></div>' +
                        '<div class ="form-group col-md-2">' +
                        '<label for="min0">Mínimo </label>' +
                        '<input class="form-control" type="number" id="assoc_min0" min="1" max = "1" value =" " name = "assoc_min[]"></div>' +
                        '<div class ="form-group col-md-2">' +
                        '<label for="max">Máximo </label>' +
                        '<input class="form-control" type="number" id="assoc_max" min="1" max = "" value =" " name = "assoc_max[]"></div></div>' +
                        '<div class ="form-group">' +
                        '<label for ="descripcion">Descripción de evaluación</label>' +
                        '<textarea class="form-control" rows="2" aria-labelledby="descripcion" name="assoc_scales[]" cols="50" ></textarea></div></div>';
                    fullDiv += div;
                } else {
                    var dataValue = parseInt($('#Assoc_Scales').attr('data-value'));
                    $('#assoc_maximum_score').val(json.criteria[0].maximum_score);
                    var maximum = json.criteria[0].maximum_score;


                    $('#Assoc_Scales').html(' ');
                    for (var i = 0; i < scaleLength; i++) {

                        div = '<div id="assoc_eval' + i.toString() + '">' +
                            '<div class ="form-row">' +
                            '<label for="header' + (i).toString() + '">Evaluación ' + (i + 1).toString() + '</label><br><br>' +
                            '<input type="hidden"  id="header' + i.toString() + '">' +
                            '<div class="form-group col-md-8" >' +
                            '<label for="title' + i.toString() + '">Nombre de Evaluación ' + (i + 1).toString() + '</label>' +
                            '<input class="form-control" name="assoc_title[]" value ="' + json.scales[i].title + '"type="text"  id="title' + i.toString() + '" placeholder ="Nombre de evaluacion" ></div>' +
                            '<div class ="form-group col-md-2">' +
                            '<label for="min' + i.toString() + '">Mínimo </label>' +
                            '<input class="form-control" type="number" id="assoc_min' + i.toString() + '" min="1" max = "' + maximum + '" value ="' + json.scales[i].min_score + '"oninput ="changedMin(' + "'assoc_min" + i.toString() + "', '" + i.toString() + "', 'Assoc_Scales' " + ')" name = "assoc_min[]"></div>' +
                            '<div class ="form-group col-md-2">' +
                            '<label for="max' + i.toString() + '">Máximo </label>' +
                            '<input class="form-control" type="number" id="assoc_max' + i.toString() + '" min="1" max = "' + maximum + '" value ="' + json.scales[i].max_score + '"oninput ="changedMax(' + "'assoc_max" + i.toString() + "', '" + i.toString() + "', 'Assoc_Scales' " + ')" name = "assoc_max[]"></div></div>' +
                            '<div class ="form-group">' +
                            '<label for ="descripcion' + i.toString() + '">Descripción de evaluación</label>' +
                            '<textarea class="form-control" rows="2" aria-labelledby="descripcion' + i.toString() + '" name="assoc_scales[]" cols="50" >' + json.scales[i].description + '</textarea></div></div>';
                        fullDiv += div;

                    }
                }

                addOptions('Num_assoc_scale', 'assoc_maximum_score');

                $('#Assoc_Scales').append(fullDiv);
                $('#Assoc_Scales').attr('data-value', scaleLength);
                $('#Num_assoc_scale').val(scaleLength);
                $('#Num_assoc_scale').selectpicker('refresh')





            },
            'json'
        );
    }
</script>
@stop

@section('javascript')

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

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

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

fetchCriterionForEditing();
fetchObjectiveForSelect('outcomeGroup', 'objectiveGroup');
// setCriterionStatus();




// --------------------------------------------------------------------------
// 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;
});
$('#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(){
//fetchObjectiveForSelect(0);
//$('.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