@extends('layouts.master')

@section('navigation')
    @if ($role == 1)
        @include('local.managers.admins._new_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', [$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(['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', '', ['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', ['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(['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', '', ['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', ['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