OLAS/app/views/local/managers/pCoords/objectives.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 objective -->
        <div class="panel panel-default panel-button">
            <div class="panel-heading">
                Create
            </div>
            <div class="panel-body">
                {{ Form::open(array('action' => 'Objective2Controller@create' )) }}
                <div id='outcomeGroup'>
                    <label> Associated Outcome</label>
                    <div class="form-group col-md-11" id='outcomeForm'>


                        {{ Form::select('outcome[0]', $outcomes, null, ['class'=>'form-control selectpicker', 'id' =>'outcome[0]']) }}

                    </div>

                </div>
                <input type='hidden' name='counter' id='counter' 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') }}
                    <select id="program_id" name="program_id" class="form-control selectpicker">

                        <option value="{{ $programs[0]->id }}">{{ $programs[0]->name }} [{{ $programs[0]->school->name }}]</option>

                    </select>
                </div>


                <div class="form-group">
                    {{ Form::label('text', 'Text') }}
                    {{ Form::text('text', '', array('class' => 'form-control')) }}
                </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' => 'Objective2Controller@update')) }}

                <div class="form-group">
                    {{ Form::label('objective_id', 'Objectives') }}
                    <select id="select-objective" name="id" class="form-control selectpicker">
                        @foreach ($objectives as $objective)
                        <option value="{{ $objective->id }}" data-subtext="
                                        @if($objective->program)
                                            &nbsp;&nbsp;&nbsp;[{{ $objective->program->name }}]
                                        @endif
                                        ">
                            {{ $objective->text }}



                        </option>
                        @endforeach
                    </select>
                </div>

                <!-- Associated Outcome -->

                <div class="form-group">
                    <div id='assocOutcomeGroup'>
                        <label>Associated Outcome</label>

                        {{ Form::select('assoc_outcome[]', $outcomes, null, ['class'=>'form-control selectpicker', 'id'=>'assoc_outcome0']) }}

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

                    </span>
                    Add another Outcome
                </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="{{ $programs[0]->id }}">{{ $programs[0]->name }} [{{ $programs[0]->school->name }}]</option>

                    </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 objectives. Inactive objective 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('text', 'Text') }}
                    {{ Form::text('text', Input::old('text'), array('class' => 'form-control', 'id'=>'objective-text')) }}
                </div>
                {{ Form::submit('Update', array('class' => 'btn btn-primary btn-block')) }}
                {{ Form::close() }}
            </div>




        </div>
    </div>
</div>
<script>
    var outcomeHTML = document.getElementById('outcomeGroup').innerHTML;
    var selectOptions = document.getElementById('outcome[0]').innerHTML;
    var ran = false;

    var counter = 1;
    var counterAssoc = 1;
    //Add Another Outcome

    function changeOutcomeHtml() {
        var outcomeHTML = document.getElementById('outcomeGroup').innerHTML;

        outcomeHTML = outcomeHTML.replace('outcome[' + counter.toString() + ']', 'outcome[' + (counter + 1).toString() + ']');
        counter += 1;
        document.getElementById("outcomeGroup").innerHTML += outcomeHTML;




        document.getElementById('button-add-outcome').onclick = addOutcome;
    }

    function addOutcome() {
        outcomeHTML = outcomeHTML.replace('outcome[' + counter.toString() + ']', 'outcome[' + (counter + 1).toString() + ']');
        counter += 1;

        document.getElementById("outcomeGroup").innerHTML += outcomeHTML;
    }

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

        });
        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()'
        });
        $button.append('X');
        $divForButton.append($button);

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

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

    }

    function deleteLast() {

        div = document.getElementById('outcomeForm' + (counter - 1).toString());
        div.remove();
        button = document.getElementById('close' + (counter - 1).toString());
        button.remove();
        counter -= 1;
        $('#counter').val(counter);
    }

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

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

                var text = json[0].text;



                // Display info
                $('#objective-text').val(text);


                // Select associated outcome
                var outcome_id = json[0].outcome_id;
                $('#assoc_outcome0').val(outcome_id);
                $('#assoc_outcome0').selectpicker('refresh');

                var length = json.length;
                if (ran == true) {
                    for (var i = counterAssoc; i != 0; i--) {
                        deleteLastAssoc(i);

                    }
                    counterAssoc = 1
                }
                for (var i = 1; i < length; i++) {
                    var $select = $('<select />', {
                        'class': "selectpicker form-control",
                        'name': "assoc_outcome[]",
                        'data-live-search': 'true',
                        'id': 'assoc_outcome' + i.toString()

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

                    });
                    var $button = $('<button />', {
                        'type': 'button',
                        'class': 'btn btn-primary',
                        'onclick': 'deleteLastAssoc()'
                    });
                    $button.append('X');
                    $divForButton.append($button);

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

                    $select.appendTo('#assocOutcomeForm' + i.toString()).selectpicker('refresh');
                    $divForButton.appendTo('#assocOutcomeGroup');

                    $('#assoc_outcome' + i.toString()).val(json[i].outcome_id);
                    $('#assoc_outcome' + i.toString()).selectpicker('refresh');

                    counterAssoc = i;
                    ran = true;

                }

                // Select associated program
                if (json[0].program_id) {
                    $('#program_id2').val(json[0].program_id);

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

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


                // Select status
                if (json[0].deleted_at)
                    $('#status').val(0);
                else
                    $('#status').val(1);
            },
            'json'
        );
    }

    function deleteLastAssoc() {

        div = document.getElementById('assocOutcomeForm' + (counterAssoc).toString());
        div.remove();
        button = document.getElementById('closeAssoc' + (counterAssoc).toString());
        button.remove();
        counterAssoc -= 1;

    }

    function addAssoc() {


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

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

        });
        var $button = $('<button />', {
            'type': 'button',
            'class': 'btn btn-primary',
            'onclick': 'deleteLastAssoc()'
        });
        $button.append('X');
        $divForButton.append($button);

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

        $select.appendTo('#assocOutcomeForm' + counterAssoc.toString()).selectpicker('refresh');
        $divForButton.appendTo('#assocOutcomeGroup');


        ran = true;
        counterAssoc += 1;


    }
</script>
@stop

@section('javascript')

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

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

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

fetchObjectiveForEditing();
// setCriterionStatus();




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

// Fetch criterion info for editing

$('#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-assoc-outcome').on('click', function(e) {
// Prevent the default action of the clicked item. In this case that is submit
e.preventDefault();


return false;
});

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

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


// When list item is clicked, load corresponding info
$('#select-objective').on('change', function()
{
fetchObjectiveForEditing();
$('.selectpicker').selectpicker('refresh');
});

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

@stop