@extends('layouts.master')

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

@section('main')
<div class="row">
	<div class="col-md-12">
		<div id="quinquennium" data-quinquennium-id="{{ $current_quinquennium->id }}"></div>
		<div id="program" data-program-id="{{ $program->id }}"></div>
		<div class="plan">
			<table class="table table-bordered">
				<thead>
					<tr class="bg-danger text-center">
						<th class="text-center col-md-3">Learning Outcome to be assessed</th>
						<th class="text-center col-md-4">Learning Objectives</th>
						<th class="text-center col-md-4">Courses to use for assessment</th>
						<th></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="outcome-cell">
							<select name="outcome" class="outcome form-control">
								@foreach($outcomes as $outcome)
									<option value="{{ $outcome->id }}">{{ $outcome->name }}</option>
								@endforeach
							</select>
						</td>
						<td class="objectives-cell">
							<div class="objective-select-wrapper">
								<select name="objectives[]" class="objective shortened-select form-control">
								</select>
								<span class="glyphicon glyphicon-remove text-danger icon-btn remove-objective"></span>
								<br><br>
							</div>
							<button class="add-objective btn btn-success pull-right btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
						</td>
						<td>
							<div class="course-select-wrapper">
								<select name="courses[]" class="course shortened-select form-control">
									@foreach($courses as $course)
										<option value="{{ $course->id }}" data-course-code="{{ $course->code }}" data-course-number="{{ $course->number }}" data-course-name="{{ $course->name }}">{{ $course->code }}{{ $course->number }}: {{ $course->name }}</option>
									@endforeach
								</select>
								<span class="glyphicon glyphicon-remove text-danger icon-btn remove-course"></span>
								<br><br>
							</div>
							<button class="add-course btn btn-success pull-right btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
						</td>
						<td></td>
					</tr>
				</tbody>
			</table>
			<div>
				<button class="add-outcome btn btn-success pull-right btn-sm"><span class="glyphicon glyphicon-plus"></span>Add Learning Outcome</button>
				<br><br><br>
			</div>
		</div>
		<div class="text-center">
            <button id="button-create-rubric" class="btn btn-lg btn-primary save">
                <span class="glyphicon glyphicon-floppy-disk"></span>
                Save
            </button>
        </div>
	</div>
</div>

@stop

@section('included-js')

@stop

@section('javascript')

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

// Hide all 'x' buttons for courses and objectives
$('.remove-course, .remove-objective').hide();

$('.outcome').each(function()
{
	fetchObjectives($(this));
});

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

// On clicking a button to add outcome
$('.add-outcome').on('click', function(e)
{
	var table = $(this).closest('.plan').find('table');
	addOutcome(table);
});

// On clicking a button to remove a course
$('table').on('click', '.remove-objective', function(e)
{
	removeObjective($(this));
});

// On clicking a button to remove a course
$('table').on('click', '.remove-course', function(e)
{
	removeCourse($(this));
});

// On clicking the x to remove an outcome from the plan
$('table').on('click', '.remove-outcome', function(e)
{
	var table = $(this).closest('.plan').find('table');
	var row = $(this).closest('tr');
	removeOutcome(table, row);
});

// On clicking a button to add a objective
$('.add-objective').on('click', function(e)
{
	var table = $(this).closest('.plan').find('table');
	var objective_select_wrapper = $(this).parent().find('.objective-select-wrapper:last');
	var select = $(this).parent().find('select:last');
	var selected_objective_id = select.find(':selected').val();
	var clone = objective_select_wrapper.clone();
	clone.insertAfter(objective_select_wrapper);
	objective_select_wrapper.parent().find('.remove-objective').show();
});

// On clicking a button to add a course
$('.add-course').on('click', function(e)
{
	var table = $(this).closest('.plan').find('table');
	var course_select_wrapper = $(this).parent().find('.course-select-wrapper:last');
	var select = $(this).parent().find('select:last');
	var selected_course_id = select.find(':selected').val();
	var clone = course_select_wrapper.clone();
	clone.insertAfter(course_select_wrapper);
	course_select_wrapper.parent().find('.remove-course').show();
});

// When user selects another outcome
$('.outcome').on('change', function(e)
{
	fetchObjectives($(this));
});

// Gather, structure and send data to server for saving
$('.save').on('click', function(e)
{
	var five_year_plan = new Object();
	five_year_plan.quinquennium_id = $('#quinquennium').data('quinquennium-id');
	five_year_plan.program_id = $('#program').data('program-id');
	five_year_plan.mini_plans = new Array();

	$('.plan').each(function(index){

		var mini_plan = new Object();

		mini_plan.year_start = $(this).find('.year-start').text();
		mini_plan.year_end = $(this).find('.year-end').text();

		// Array for outcome objects
		mini_plan.outcomes = new Array();

		$(this).find('.outcome').each(function(index){

			// Outcome object
			var outcome = new Object();

			outcome.id = $(this).find(':selected').val();
			outcome.objectives = new Array();
			outcome.courses = new Array();

			// Gather objective information
			$(this).closest('tr').find('.objective').each(function()
			{
				var objective = new Object();

				objective.original_id = $(this).find(':selected').val();
				objective.text = $(this).find(':selected').text();

				outcome.objectives.push(jQuery.extend({}, objective));

				objective = null;
			});

			// Gather course information
			$(this).closest('tr').find('.course').each(function()
			{
				var course = new Object();

				course.code = $(this).find(':selected').data('course-code');
				course.number = $(this).find(':selected').data('course-number');
				course.name = $(this).find(':selected').data('course-name');

				outcome.courses.push(jQuery.extend({}, course));
				course = null;
			});

			mini_plan.outcomes.push(jQuery.extend({}, outcome));
			outcome = null;

		});

		five_year_plan.mini_plans.push(jQuery.extend({}, mini_plan));
		mini_plan = null;
	});

	//console.log(five_year_plan);

	$.post(
		"{{ URL::action('FiveYearPlansController@store', array($program->id)) }}",
		{
			five_year_plan: JSON.stringify(five_year_plan)
		},
		function(data)
		{
			//console.log(data);
			var response = data;

			//console.log('status: '+response.status);
			if(response.status == 'success')
			{
				//console.log('success');
				window.location = response.redirect_url;
			}
			else
			{
				jsError(response.message);
			}
		},
		"json"
	)
	.fail( function(xhr, status, error) {

		//console.log('fail:'+error);
		// Always scroll to the top
        $(this).scrollTop(0);
        $('html').animate({scrollTop:0}, 1);
        $('body').animate({scrollTop:0}, 1);

		jsError(error);

		// Show js error with default message
		$('#js-error-row').fadeIn('slow', function () {
			$(this).delay(3000).fadeOut('slow');
		});
	}
	);
});

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

// Removes a objective
function removeObjective(button)
{
	var objective_select_wrapper = button.parent();

	// If only one objective will remain, hide 'x' button
	if(objective_select_wrapper.siblings('.objective-select-wrapper').length == 1)
	{
		objective_select_wrapper.siblings('.objective-select-wrapper').find('.remove-objective').hide();
	}

	// Remove objective
	objective_select_wrapper.remove();
}

// Removes a course
function removeCourse(button)
{
	var course_select_wrapper = button.parent();

	// If only one course will remain, hide 'x' button
	if(course_select_wrapper.siblings('.course-select-wrapper').length == 1)
	{
		course_select_wrapper.siblings('.course-select-wrapper').find('.remove-course').hide();
	}

	// Remove course
	course_select_wrapper.remove();
}


// Checks whether a plan has outcomes
function hasOutcomes(table)
{
	if(table.find('.outcome-cell').length > 0)
		return true;
	else
		return false;
}

// Add an outcome to an annual plan
function addOutcome(table)
{
	var header_rowspan = Number(table.find('.academic-year').attr('rowspan'));

	var clone = table.find('tbody tr:first').clone(true, true);

	// Remove all objectives and course except the first ones
	clone.find('.objective-select-wrapper').not(':first').remove();
	clone.find('.course-select-wrapper').not(':first').remove();

	// Add removal button
	clone.children(':last').append('<span class="glyphicon glyphicon-remove text-danger icon-btn remove-outcome"></span>');

	if(hasOutcomes(table))
	{
		table.find('tbody').append(clone);

		table.find('.academic-year').attr('rowspan', header_rowspan+1);
	}
}

// Remove an Outcome
function removeOutcome(table, row)
{
	var header_rowspan = Number(table.find('.academic-year').attr('rowspan'));

	row.remove();
	table.find('.academic-year').attr('rowspan', header_rowspan-1);
}

// Fetch objectives associated to an outcome and program
function fetchObjectives(outcome)
{
	var outcome_id = outcome.find(':selected').val();
	var program_id = $('#program').data('program-id');

	$.post(
		"{{ URL::action('ObjectivesController@fetch') }}",
		{
			outcome_id: outcome_id,
			program_id: program_id,
			format: 'select'
		},
		function(data)
		{
			var select = outcome.closest('tr').find('.objective');
			if(data == '')
			{
				select.prop('disabled', true);
				select.empty().append('<option value="0"><span class="glyphicon glyphicon-remove"></span> None</option>');
			}
			else
			{
				select.prop('disabled', false);
				select.empty().append(data);
			}

			if(select.length > 1) {
				select.first().parent().siblings('.objective-select-wrapper').remove();
			}
		}
	);
}

@stop