@extends('layouts.master')

@section('navigation')
    @if($role==1)
        @include('local.managers.admins._navigation')
    @elseif($role==2)
        @include('local.managers.sCoords._new_navigation')
    @elseif($role==3)
        @include('local.managers.pCoords._new_navigation')
    @else
        @include('local.professors._navigation')
    @endif
@stop

@section('main')

    <div class="row">
        <div class="col-md-9">
            <p class="lead">You should establish at least one objective per Learning Outcome. Inactive objectives will not be available to new rubrics, but the criteria already associated to them will remain unaffected.</p>

            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th class="col-md-6">Learning Outcome</th>
                        <th class="col-md-6">Objectives</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($objectives_by_outcome as $outcome)
                        <?php $first_objective = true; ?>

                            <?php
                                // $criteria = DB::table('criterion_objective_program')
                                //     ->where('objective_id', $objective->objective_id)
                                //     ->where('criterion_objective_program.program_id', $program->id)
                                //     ->join('criteria', 'criterion_objective_program.criterion_id', '=', 'criteria.id')
                                //     ->get();
                            ?>
                            <tr>
                                <td>{{ $outcome->outcome_name }} {{ json_encode($outcome) }}</td>
                            </tr>

                    @endforeach
                </tbody>
            </table>

            <a href="{{ action('ProgramsController@show', array($program->id)) }}" class="btn btn-primary pull-right"> Back to Program</a>
        </div>
        <div class="col-md-3">
            <br><br>

            <!-- Form to add a new objective -->
            <div class="panel panel-default panel-button">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-triangle-right"></span>
                    <strong>Create</strong>
                </div>
                <div class="panel-body">
                    {{ Form::open(array('action' => 'ObjectivesController@create')) }}

                        <p class="small">Write the name or description of the objective you want to create. Then, select the Learning Outcome to which it be associated. Finally, click Create.</p>

                        {{ Form::hidden('program_id', $program->id) }}

                        <div class="form-group">
                            {{ Form::label('learning_objective', 'Objective') }}
                            {{ Form::textarea('learning_objective', '', array('class' => 'form-control', 'rows'=>2)) }}

                        </div>

                        <div class="form-group">
                            {{ Form::label('outcome_id', 'Select the Learning Outcome') }}
                            <select name="outcome_id" class="form-control">
                            @foreach ($outcomes as $outcome)
                                @if(Input::old('outcome_id')==$outcome->id)
                                    <option selected="selected" value="{{ $outcome->id }}">{{ $outcome->name }}</option>
                                @else
                                    <option value="{{ $outcome->id }}">{{ $outcome->name }}</option>
                                @endif
                            @endforeach
                            </select>
                        </div>

                        {{ Form::submit('Create', array('class' => 'btn btn-primary btn-block')) }}
                    {{ Form::close() }}
                </div>
            </div>

            <br>
            <!-- Form to add a new objective -->
            <div class="panel panel-default panel-button">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-triangle-right"></span>
                    <strong>Edit</strong>
                </div>
                <div class="panel-body">
                    {{ Form::open(array('action' => 'ObjectivesController@update')) }}

                        <p class="small">Select the objective you want to edit. Its information will be automatically loaded. You can change the name and select a different Learning Outcome if you wish. Click Update to save the changes.</p>

                        {{ Form::hidden('edit_program_id', $program->id) }}

                        <div class="form-group">
                            {{ Form::label('edit_objective_id', 'Objective Selection') }}

                            <select name="edit_objective_id" id="edit_objective_id" class="form-control">
                            @foreach ($program->objectives() as $objective)
                                @if(false)
                                    <option selected="selected" value="{{ $objective->objective_id }}">{{ $objective->objective }}</option>
                                @else
                                    <option value="{{ $objective->objective_id }}">{{ $objective->objective }}</option>
                                @endif
                            @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            {{ Form::label('edit_learning_objective', 'Objective Name') }}
                            {{ Form::textarea('edit_learning_objective', '', array('class' => 'form-control', 'rows'=>2)) }}
                        </div>

                        <div class="form-group">
                            {{ Form::label('edit_outcome_id', 'Associated Learning Outcome') }}
                            <select name="edit_outcome_id" id="edit_outcome_id" class="form-control">
                            @foreach ($outcomes as $outcome)
                                @if(Input::old('edit_outcome_id')==$outcome->id)
                                    <option selected="selected" value="{{ $outcome->id }}">{{ $outcome->name }}</option>
                                @else
                                    <option value="{{ $outcome->id }}">{{ $outcome->name }}</option>
                                @endif
                            @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            {{ Form::label('edit_active', 'Status') }}
                            <select name="edit_active" id="edit_active" class="form-control">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>

                        {{ Form::submit('Update', array('class' => 'btn btn-primary btn-block')) }}
                    {{ Form::close() }}
                </div>
            </div>
        </div>
    </div>

@stop


@section('javascript')

// ----------------------------------------------------------------------------
// Page Load
// ----------------------------------------------------------------------------

$('.panel-body').hide();

loadObjective();

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

// Toggle visibility for accordion panels
$('.panel-heading').on('click', function()
{
    toggleTriangles($(this));
    $(this).siblings('.panel-body').stop().slideToggle();
});

$('#edit_objective_id').on('change', function()
{
    loadObjective();
});

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

function toggleTriangles(element)
{
    if(element.find('.glyphicon').hasClass('glyphicon-triangle-right'))
    {
        element.find('.glyphicon').removeClass('glyphicon-triangle-right');
        element.find('.glyphicon').addClass('glyphicon-triangle-bottom');
    }
    else if(element.find('.glyphicon').hasClass('glyphicon-triangle-bottom'))
    {
        element.find('.glyphicon').removeClass('glyphicon-triangle-bottom');
        element.find('.glyphicon').addClass('glyphicon-triangle-right');
    }
}

function loadObjective()
{
    $.post(
        '{{ action('ObjectivesController@fetchObjective') }}',
        {
            objective_id: $('#edit_objective_id').find(':selected').val()
        },
        function(data)
        {
            if(data == '')
                return;

            objective = JSON.parse(data);

            $('#edit_learning_objective').text(objective.text);
            $('#edit_active').val(objective.active);
            $('#edit_outcome_id').val(objective.outcome_id);
        }
    )
}

@stop