@extends('layouts.master')

@section('navigation')
    @if (Auth::user()->role == 1)
        @include('local.managers.admins._new_navigation')
    @elseif(Auth::user()->role == 2)
        @include('local.managers.sCoords._new_navigation')
    @elseif(Auth::user()->role == 3)
        @include('local.managers.pCoords._new_navigation')
    @endif
@stop

@section('main')

    <div class="row">
        <div class="col-md-3">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                <!-- Form to add a new Learning Outcome -->
                <!--         <div class="panel panel-default">
              <div class="panel-heading">
                New Learning Outcome
              </div>
              <div class="panel-body">
                {{ Form::open(['action' => 'OutcomesController@create']) }}

                <div class="form-group">
                  {{ Form::label('name', 'Name') }}
                  {{ Form::text('name', '', ['class' => 'form-control']) }}
                </div>

                <div class="form-group">
                  {{ Form::label('definition', 'Definition') }}
                  {{ Form::textarea('definition', '', ['class' => 'form-control', 'rows' => 2]) }}
                </div>

                {{ Form::submit('Submit', ['class' => 'btn btn-primary btn-block']) }}

                {{ Form::close() }}
              </div>
            </div> -->

                <!-- 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(['action' => 'CriteriaController@create']) }}

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

                        <div class="form-group">
                            {{ Form::label('name', 'Name') }}
                            {{ Form::text('name', '', ['class' => 'form-control']) }}
                        </div>

                        <div class="form-group">
                            {{ Form::label('description12', 'Beginning (1-2)') }}
                            {{ Form::textarea('description12', '', ['class' => 'form-control', 'rows' => 2]) }}
                        </div>

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

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

                        <div class="form-group">
                            {{ Form::label('description78', 'Excellent (7-8)') }}
                            {{ Form::textarea('description78', '', ['class' => 'form-control', 'rows' => 2]) }}
                        </div>

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

                <div class="panel panel-default panel-button">
                    <div class="panel-heading">
                        Edit
                    </div>
                    <div class="panel-body">
                        {{ Form::open(['action' => 'CriteriaController@update']) }}

                        <div class="form-group">
                            {{ Form::label('criterion_id', 'Criterion') }}
                            <select id="select-criterion" name="id" class="form-control">
                                @foreach ($criteria as $criterion)
                                    <option value="{{ $criterion->id }}">{{ $criterion->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            {{ Form::label('assoc_outcome_id', 'Associated Learning Outcome') }}
                            <select id="assoc_outcome_id" name="outcome_id" class="form-control">
                                @foreach ($outcomes as $outcome)
                                    <option value="{{ $outcome->id }}">{{ $outcome->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            {{ Form::label('name', 'Name') }}
                            {{ Form::text('name', Input::old('name'), ['class' => 'form-control', 'id' => 'criterion_name']) }}
                        </div>

                        <div class="form-group">
                            {{ Form::label('description12', 'Beginning (1-2)') }}
                            {{ Form::textarea('description12', Input::old('description12'), ['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'), ['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'), ['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'), ['class' => 'form-control', 'rows' => 2, 'id' => 'criterion_description78']) }}
                        </div>

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

                <div class="panel panel-default panel-button">
                    <div class="panel-heading">
                        Change Status
                    </div>
                    <div class="panel-body">
                        <p>Use this form to deactivate or reactivate criteria. Inactive criteria will
                            stay in the system, but will not be available to use in new rubrics.</p>
                        {{ Form::open(['action' => 'CriteriaController@destroy', 'method' => 'delete']) }}

                        <div class="form-group">
                            {{ Form::label('criterion_id', 'Criterion') }}
                            <select id="select-criterion-with-status" name="id" class="form-control">
                                @foreach ($criteria as $criterion)
                                    <option data-status="{{ $criterion->trashed() }}" value="{{ $criterion->id }}">
                                        {{ $criterion->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            {{ Form::label('status', 'Status') }}
                            <p name="status" id="status" class="form-control-static"></p>
                        </div>

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

                <!-- Form to edit a Learning Outcome -->
                <!--         <div class="panel panel-default">
              <div class="panel-heading">
                Edit a Learning Outcome
              </div>
              <div class="panel-body">
                {{ Form::open(['action' => 'OutcomesController@update']) }}

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

                <div class="form-group">
                  {{ Form::label('name', 'Name') }}
                  {{ Form::text('name', Input::old('name'), ['class' => 'form-control', 'id' => 'outcome_name']) }}
                </div>

                <div class="form-group">
                  {{ Form::label('definition', 'Definition') }}
                  {{ Form::textarea('definition', Input::old('definition'), ['class' => 'form-control', 'rows' => 2, 'id' => 'outcome_definition']) }}
                </div>

                {{ Form::submit('Update', ['class' => 'btn btn-primary btn-block']) }}

                {{ Form::close() }}
              </div>
            </div> -->

            </div>

            <ul class="list-group">
                @foreach ($outcomes as $outcome)
                    <li data-outcome-id="{{ $outcome->id }}" class="list-group-item">{{ $outcome->name }}</li>
                @endforeach
            </ul>
        </div>

        <div class="col-md-9">
            <div id="outcome-display" class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title"></div>
                    </h4>
                </div>
                <div class="panel-body">
                    <p class="outcome-definition"></p>
                    <table class="table table-striped table-condensed">
                        <thead>
                            <tr>
                                <th>Criterion</th>
                                <th>Beginning (1-2)</th>
                                <th>In Progress (3-4)</th>
                                <th>Satisfactory (5-6)</th>
                                <th>Excellent (7-8)</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="no-outcome alert alert-info">
                <p>Select a Learning Outcome to view its criteria.</p>
            </div>
        </div>

    </div>
@stop

@section('javascript')


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

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

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

    fetchOutcomeForEditing();
    fetchCriterionForEditing();
    setCriterionStatus();




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

    // Fetch outcome info for editing
    function fetchOutcomeForEditing()
    {
    var id = $('#select-outcome').find(':selected').val();

    $.post(
    "{{ URL::action('OutcomesController@fetchOutcome') }}",
    { id: id },
    function(json)
    {
    var name = json.outcome.name;
    var definition = json.outcome.definition;

    //Display title and definition
    $('#outcome_name').val(name);
    $('#outcome_definition').text(definition);
    },
    'json'
    );
    }

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

    $.post(
    "{{ URL::action('CriteriaController@fetchCriterionWithTrashed') }}",
    { id: id },
    function(json)
    {
    var name = json.name;
    var description12 = json.description12;
    var description34 = json.description34;
    var description56 = json.description56;
    var description78 = json.description78;

    // Display title and definition
    $('#criterion_name').val(name);
    $('#criterion_description12').text(description12);
    $('#criterion_description34').text(description34);
    $('#criterion_description56').text(description56);
    $('#criterion_description78').text(description78);

    // Select associated outcome
    $('#assoc_outcome_id').val(json.outcome_id);
    },
    'json'
    );
    }

    // Set criterion status
    function setCriterionStatus()
    {
    $('#select-criterion-with-status').find(':selected').data('status')
    switch($('#select-criterion-with-status').find(':selected').data('status'))
    {
    case 1:
    $('#status').text('Inactive');
    break;
    default:
    $('#status').text('Active');
    break;

    }
    }

    // --------------------------------------------------------------------------
    // 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
    $('.list-group-item').on('click', function()
    {
    var id = $(this).data('outcome-id');

    $.post(
    "{{ URL::action('OutcomesController@fetchOutcome') }}",
    { id: id },
    function(json)
    {
    var name = json.outcome.name;
    var definition = json.outcome.definition;
    var criteria =json.outcome.criteria;
    var deleted = json.outcome.deleted_at;


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

    //Display title and definition
    $('#outcome-display .panel-title').html(name);
    $('#outcome-display .outcome-definition').html(definition);


    //Empty table body
    $('tbody').empty();

    if(criteria.length>0)
    {
    $('table').show();
    $.each(criteria, function(index, value)
    {
    $('tbody').append('<tr>
        <td>'+value.name+'</td>
        <td>'+value.description12+'</td>
        <td>'+value.description34+'</td>
        <td>'+value.description56+'</td>
        <td>'+value.description78+'</td>
    </tr>');
    });
    }
    else
    {
    $('table').hide();
    }
    },
    'json'
    );

    });

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

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

    // When list item is clicked, load corresponding info
    $('#select-criterion-with-status').on('change', function()
    {
    setCriterionStatus();
    });

@stop