OLAS/app/views/local/managers/admins/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'>
                    <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("outcome0")']) }}

                    </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') }}
                    <select id="program_id" name="program_id" class="form-control selectpicker">
                        <option value="0">All</option>
                        @foreach ($programs as $program)
                        <option value="{{ $program->id }}">{{ $program->name }} [{{ $program->school->name }}]</option>
                        @endforeach
                    </select>
                </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('description12', 'Beginning (1-2)') }}
                    {{ Form::textarea('description12', '', array('class' => 'form-control', 'rows'=>2, 'aria-labelledby'=>'description12')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('description34', 'In Progress (3-4)') }}
                    {{ Form::textarea('description34', '', array('class' => 'form-control', 'rows'=>2, 'aria-labelledby'=>'description34')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('description56', 'Satisfactory (5-6)') }}
                    {{ Form::textarea('description56', '', array('class' => 'form-control', 'rows'=>2, 'aria-labelledby'=>'description56')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('description78', 'Excellent (7-8)') }}
                    {{ Form::textarea('description78', '', array('class' => 'form-control', 'rows'=>2, 'aria-labelledby'=>'description78')) }}
                </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('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'>
                    <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') }}
                    <select id="program_id2" name="program_id" class="form-control selectpicker">
                        <option value="0">All</option>
                        @foreach ($programs as $program)
                        <option value="{{ $program->id }}">{{ $program->name }} [{{ $program->school->name }}]</option>
                        @endforeach
                    </select>
                </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('description12', 'Beginning (1-2)') }}
                    {{ Form::textarea('description12', Input::old('description12'), array('class' => 'form-control', 'rows'=>2, 'id'=>'criterion_description12')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('description34', 'In Progress (3-4)') }}
                    {{ Form::textarea('description34', Input::old('description34'), array('class' => 'form-control', 'rows'=>2, 'id'=>'criterion_description34')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('description56', 'Satisfactory (5-6)') }}
                    {{ Form::textarea('description56', Input::old('description56'), array('class' => 'form-control', 'rows'=>2, 'id'=>'criterion_description56')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('description78', 'Excellent (7-8)') }}
                    {{ Form::textarea('description78', Input::old('description78'), array('class' => 'form-control', 'rows'=>2, 'id'=>'criterion_description78')) }}
                </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() }}
            </div>
        </div>
    </div>
</div>
<script>
    var selectOptions = document.getElementById('outcome0').innerHTML;

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


    //Add outcome Button

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

        });
        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' + counter.toString() + '", "' + outcomeString + (counter).toString() + '", "close' + counter.toString() + '","objective_")'
        });

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

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

        $select.appendTo('#outcomeForm' + counter.toString()).selectpicker('refresh');
        fetchObjectiveForSelect('outcome' + counter.toString());
        counter += 1;
        $divForButton.appendTo('#outcomeGroup');

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


    }


    //Delete Outcome and OptGroup associated

    function deleteLast(outcomeForm, outcomeOptGroup, closeButton, objective) {
        $div = document.getElementById(outcomeForm);
        $div.remove();
        $div = document.getElementById(outcomeOptGroup);
        $div.remove();
        $div = document.getElementById(closeButton)
        $div.remove();

        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(outcomeInput) {


        var id = $('#' + outcomeInput).find(':selected').val();

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

                var optionName = '<optgroup id="' + outcomeString + (counter - 1).toString() + '"label="' + outcomeString + (counter).toString() + '"';
                for (var i = 0; i < varArray.length; i++) {
                    var option = '<option value ="' + varArray[i].id.toString() + '">' + varArray[i].text + '</option>'
                    optionName += (option)

                }
                optGroup = document.getElementById(outcomeString + (counter - 1).toString());
                if (optGroup != null) {
                    optGroup.remove()

                }


                $('#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


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

        $.post(
            "{{ URL::action('CriteriaController@fetchCriterionWithTrashed') }}", {
                id: id
            },
            function(json) {
                var name = json.criteria[0].name;


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

                var description12 = json.criteria[0].description12;
                var description34 = json.criteria[0].description34;
                var description56 = json.criteria[0].description56;
                var description78 = json.criteria[0].description78;
                var copyright = json.criteria[0].copyright;
                var notes = json.criteria[0].notes;

                // Display info
                $('#criterion_name').val(name);
                $('#criterion_subcriteria').text(subcriteria);
                $('#criterion_description12').text(description12);
                $('#criterion_description34').text(description34);
                $('#criterion_description56').text(description56);
                $('#criterion_description78').text(description78);

                // If copyright or notes aren't empty, load them
                if (copyright) {
                    $('#criterion_copyright').text(copyright);
                } else {
                    $('#criterion_copyright').text('');
                }
                if (notes) {
                    $('#criterion_notes').text(notes);
                } else {
                    $('#criterion_notes').text('');
                }
                // 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;
                }


                $('#assoc_outcome_0').val(json.outcomes[0].id);
                $('#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="' + 'Associated Outcome' + (assocOutcomeCounter).toString() + '"';
                    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) {
                    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
                if (json.criteria[0].program_id) {
                    $('#program_id2').val(json.criteria[0].program_id);

                } else {
                    $('#program_id2').val(0);
                }

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


                // Select status
                if (json.criteria[0].deleted_at)
                    $('#status').val(0);
                else
                    $('#status').val(1);
            },
            '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');
// 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