@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>
                
            <table class="table table-striped table-condensed editable-table" id='outcomes_table'>
                <thead>
                    <tr class="center-text">
                        <th class="col-md-1">ID</th>
                        <th class="col-md-4">Learning Outcome</th>
                        <th class="col-md-6">Definition</th>
                        <th class="col-md-1">Expected Value</th>
                        <th class="col-md-2">Activation date</th>
                        <th class="col-md-2">Deactivation date</th>
                        <th class="col-md-1">Level<br><font size="-5">1:undergrad, 2:grad, 3:both</font></th>
                        <th class="col-md-1">Equivalent to</th>

                </thead>
                <tbody>
                    @foreach ($outcomes as $outcome)
                        {{-- @foreach ($semesters as $semester) --}}
                        {{-- display an outcome only if it is part of a currently selected semester --}}
                        @if ($outcome->deactivation_date == '0000-00-00' or $outcome->deactivation_date == '')
                         {{-- and ($outcome->activation_date >= $semester->start && $outcome->activation_date <= $semester->end)) --}}
                            <tr data-id="{{ $outcome->id }}">
                                <td class="id col-md-1">{{ $outcome->id }}</td>
                                <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>
                                <td contenteditable="true" class="activation-date col-md-2">{{ $outcome->activation_date }}</td>
                                <td contenteditable="true" class="deactivation-date col-md-2">{{ $outcome->deactivation_date }}</td>
                                <td contenteditable="true" class="level col-md-1">{{ $outcome->level }}</td>
                                <td></td>
                                <td><button class="btn btn-sm btn-primary center-block del" id='del{{ $outcome->id }}'>Del</button></td>
                           </tr>
                        @endif
                        {{-- @endforeach --}}
                    @endforeach
                    @foreach ($outcomes as $outcome)
                        {{-- @foreach ($semesters as $semester) --}}
                        {{-- display an outcome only if it is part of a currently selected semester --}}
                        @if ($outcome->deactivation_date != '0000-00-00' and $outcome->deactivation_date != '')
                         {{--  and ($outcome->deactivation_date != '0000-00-00') and ($outcome->deactivation_date != '')) --}}
                            <tr data-id="{{ $outcome->id }}">
                                <td class="id col-md-1">{{ $outcome->id }}</td>
                                <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>
                                <td contenteditable="true" class="activation-date col-md-2">{{ $outcome->activation_date }}</td>
                                <td contenteditable="true" class="deactivation-date col-md-2">{{ $outcome->deactivation_date }}</td>
                                <td contenteditable="true" class="level col-md-1">{{ $outcome->level }}</td>
                                <td contenteditable="true" class="new_outcome_id col-md-1">{{ $outcome->new_outcome_id }}</td>
                                <td><button class="btn btn-sm btn-primary center-block del" id='del{{ $outcome->id }}'>Del</button></td>
                            </tr>
                        @endif
                        {{-- @endforeach --}}
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6"><button class="btn btn-lg btn-secondary center-block" id='show'>New Outcome</button>
        </div>
        <div class="col-md-6"><button class="btn btn-lg btn-primary center-block" id='save'>Save</button></div>
    </div>

    <div class="" id='new_outcome_form'>
        <h2>Add a new Learning Outcomes</h2>
        {{-- For for adding a new outcome --}}
        {{ Form::open(['action' => 'OutcomesController@create']) }}
        <div class="form-group">
            {{ Form::label('name', 'Name') }}
            {{ Form::text('name', '', ['class' => 'form-control', 'id' => 'outcome_name']) }}
        </div>
        <div class="form-group">
            {{ Form::label('definition', 'Definition') }}
            {{ Form::textarea('definition', 'At least 10 characters long', ['class' => 'form-control', 'id' => 'outcome_definition']) }}
        </div>
        Due to technical limitationss, the following must be edited after adding the new Outcome:
        {{-- the technical limitation is: the Outcome Model has to be edited --}}
        <ul>
            <li>Expected Outcome</li>
            <li>Activation Date</li>
            <li>Deactivation Date</li>
            <li>Level</li>
        </ul>

        <div class="row">
            <div class="col-md-6"><button type="reset" class="btn btn-lg btn-secondary center-block" id='hide'>Hide
                    Form</button></div>
            <div class="col-md-6"><button type="submit" class="btn btn-lg btn-primary center-block">Submit New
                    Outcome</button></div>
        </div>
        {{ Form::close() }}

        <hr>
    </div>

    
<div class="modal fade" id="delete-outcome-modal">
    <div class="modal-dialog modal-md">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title text-center" id ="modal-title-rubric">Are you sure you want to delete this Learning Outcome?</h4>
        </div>
          <div class="modal-body" id ="delete-outcome-modal-body">
              <p>You won't be able to retrieve it</p>
  
  
  
                 
                  
                  
          </div>
        <div class="modal-footer">
              <button type="button" class="btn btn-default modal-but" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary modal-but" id='modal-delete-button' data-dismiss="modal" onclick ="">Delete Outcome</button>
            
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>

  <script>
function deleteOutcome(outcome_id){
    var outcomeObject = new Object();

    outcomeObject.id= outcome_id;
    outcomeObject.delete=1;
    console.log("algo"+JSON.stringify(outcome_id));
    console.log("algo"+JSON.stringify(outcomeObject));
    var clone = jQuery.extend({}, outcomeObject);
    //	outcomeArray.push(clone);
    //	console.log("algo"+JSON.stringify(outcomeArray));
    $.post(
        "{{ URL::action('OutcomesController@delete') }}",
        {    outcomeArray: JSON.stringify(outcomeObject)},
    function(data)
        {
            location.reload();
        }
    );
}
    </script>
@stop

@section('javascript')

$(".modal-but").on('click',function(e){
    e.preventDefault();
})


@foreach ($outcomes as $outcome)
     $('#del{{ $outcome->id }}').on('click', function(e)
    {
    	e.preventDefault();
    	//outcomeObject.id= $(this).data('id');

        $("#delete-outcome-modal").modal("show");
        $("#modal-delete-button").attr('onclick', 'deleteOutcome({{$outcome->id}})')

    }
     );



@endforeach

    $('#new_outcome_form').hide();

    //show form
    $('#show').on('click', function(e)
    {
    $('#new_outcome_form').show();
    $('#show').hide();
    });

    //hide form
    $('#hide').on('click', function(e)
    {
    $('#new_outcome_form').hide();
    $('#show').show();
    });

	
    $('#save').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();
    outcomeObject.activation_date= $(this).children('.activation-date').text();
    outcomeObject.deactivation_date= $(this).children('.deactivation-date').text();
    outcomeObject.level= $(this).children('.level').text();
    if($(this).children('.new_outcome_id').text()!="")outcomeObject.new_outcome_id= $(this).children('.new_outcome_id').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@updateMore') }}",
    { 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