@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-12">
            <p>Click on the values you want to change. Invalid values will be rejected automatically. To save your changes,
                click the 'Save' button at the bottom of the page.</p>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#undergraduate" aria-controls="undergraduate"
                        role="tab" data-toggle="tab">
                        <h4>Undergraduate Program Participation</h4>
                    </a></li>
                <li role="presentation"><a href="#graduate" aria-controls="graduate" role="tab" data-toggle="tab">
                        <h4>Graduate Program Participation</h4>
                    </a></li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="undergraduate">
                    <table class="table table-striped table-condensed editable-table">
                        <thead>
                            <tr class="center-text">
                                <th class="col-md-4">Learning Outcome</th>
                                <th class="col-md-7">Definition</th>
                                <th class="col-md-1">Expected Value</th>

                        </thead>
                        <tbody>
                            @foreach ($outcomes as $outcome)
                                <tr data-id="{{ $outcome->id }}">
                                    <td contenteditable="true" class="name col-md-4">{{ $outcome->name }}</td>
                                    <td contenteditable="true" data-type="textarea" class="definition col-md-6">
                                        {{ $outcome->definition }}</td>
                                    <td contenteditable="true" class="expected-outcome col-md-1">
                                        {{ $outcome->expected_outcome }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div role="tabpanel" class="tab-pane" id="graduate">
                    <table class="table table-striped table-condensed editable-table">
                        <thead>
                            <tr class="center-text">
                                <th class="col-md-4">Learning Outcome</th>
                                <th class="col-md-7">Definition</th>
                                <th class="col-md-1">Expected Value</th>

                        </thead>
                        <tbody>
                            @foreach ($outcomes as $outcome)
                                <tr data-id="{{ $outcome->id }}">
                                    <td contenteditable="true" class="name col-md-4">{{ $outcome->name }}</td>
                                    <td contenteditable="true" data-type="textarea" class="definition col-md-6">
                                        {{ $outcome->definition }}</td>
                                    <td contenteditable="true" class="expected-outcome col-md-1">
                                        {{ $outcome->expected_outcome }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12"><button class="btn btn-lg btn-primary center-block">Save</button></div>
    </div>
@stop

@section('javascript')

    $('button').on('click', function(e)
    {
    e.preventDefault();

    var outcomeArray= new Array();

    // For each learning outcome, get its value and put it into an array
    $('tbody tr').each(function( index )
    {
    var outcomeObject = new Object();

    outcomeObject.id= $(this).data('id');
    outcomeObject.name= $(this).children('.name').text();
    outcomeObject.definition= $(this).children('.definition').text();
    outcomeObject.expected_outcome= $(this).children('.expected-outcome').text();

    if($(this).find('.glyphicon-eye-close').length>0)
    {
    outcomeObject.delete=1;
    }

    else
    outcomeObject.delete=0;

    var clone = jQuery.extend({}, outcomeObject);
    outcomeArray.push(clone);
    });

    $.post(
    "{{ URL::action('OutcomesController@update') }}",
    { outcomeArray: JSON.stringify(outcomeArray)},
    function(data)
    {
    location.reload();
    }
    );
    });

    $('span').on('click', function()
    {
    if($(this).hasClass('glyphicon-eye-open'))
    $(this).removeClass('glyphicon-eye-open').addClass('glyphicon-eye-close');
    else
    $(this).removeClass('glyphicon-eye-close').addClass('glyphicon-eye-open');

    });
@stop