@extends('layouts.master')

@section('navigation')
    @if($role==1)
        @include('local.managers.admins._navigation')
    @elseif($role==2)
        @include('local.managers.sCoords._navigation')
    @elseif($role==3)
        @include('local.managers.pCoords._navigation')
    @else
        @include('local.professors._navigation')
    @endif
@stop

@section('main')
<!-- View criterion info -->
<div class="modal fade" id="modal-view-criterion">
    <div class="modal-dialog modal-lg">
        <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"></h4>
            </div>
            <div class="modal-body">
                <table class="table table-bordered">
                    <thead>
                        <th>Beginning (1-2)</th>
                        <th>In Progress (3-4)</th>
                        <th>Good (5-6)</th>
                        <th>Excellent (7-8)</th>
                        <th>Notes</th>
                    </thead>
                    <tbody>
                        <tr></tr>
                    </tbody>
                </table>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="row">
    <div class="col-md-12">

        <div class="btn-group pull-right">
            {{ HTML::linkAction('ActivitiesController@show', 'Back to Activity', array($activity->id), array('class'=>'btn btn-default btn-sm')) }}
            {{ HTML::linkAction('ActivitiesController@printAssessment', 'Print', array($activity->id), array('class'=>'btn btn-default btn-sm')) }}
        </div>
        <p id="course">Course: {{{ $course->code }}} {{{ $course->number }}}</p>
        <p id="section">Section: {{{ $course->section }}}</p>

        <p id="activity" data-activity-id="{{{ $activity->id }}}">Activity: {{{ $activity->name}}} </p>
        <p>Passing Criteria: <span id="expected_percentage">{{{ $rubric->expected_percentage }}}% of students must obtain at least </span><span id="expected_points">{{{$rubric->expected_points}}}</span> points </p>


        <table id="assessment-table" class="table table-striped table-condensed table-bordered">
            <thead>
                    <tr>
                        <th>Student</th>
                        @foreach ($rubric_contents as $criterion)
                            <th class="criterion-field" data-criterion-id="{{{ $criterion->id }}}"><div class="th-box">{{ $criterion->name}}</div></th>
                        @endforeach
                        <th>Student Percentage</th>
                    </tr>
            </thead>
            <tbody>

            <!-- If the activity was assessed, load the assessment. Otherwise load empty sheet -->
            @if(sizeof($assessments)!=0)
                <!-- For each assessment -->
                @foreach ($assessments as $assessment)
                    <tr class="student-row">
                        <!-- Fetch student name -->
                        <td class="student-field" data-student-id="{{ $assessment->student_id }}">
                            {{{ Student::find($assessment->student_id)->name }}}
                        </td>

                        <!-- For each criterion in the rubric, there's a score field -->
                        @for ($i = 0; $i<sizeof($rubric_contents); $i++)
                            <td class="score-field text-center">
                                {{ $scores_array[$assessment->id][$rubric_contents[$i]->id] }}
                            </td>
                        @endfor
                        <td class="percentage text-center">{{{ $assessment->percentage }}}</td>
                     </tr>
                @endforeach
            @endif
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        <strong>Passed Criteria Percentage </strong>
                    </td>
                    @for ($i = 0; $i<sizeof($rubric_contents); $i++)
                        <td class="total text-center"><strong><span class="total-value"></span>%</strong>
                        </td>
                    @endfor
                    <td></td>

                 </tr>
            </tfoot>
        </table>
    </div>
</div>

@stop

@section('included-js')

<!-- StickyTableHeaders js -->
<script src="{{ asset('vendor/stickyTableHeaders/js/jquery.stickytableheaders.min.js') }}"></script>

@stop

@section ('javascript')

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

// Enable fixed headers
$('table').stickyTableHeaders();


$('.total').each(function(index)
{
    percentagePerCriterionPlain(index+1);
});

$('.student-row').each(function(index)
{
    percentagePerStudentPlain($(this));
});

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

// Calculate average of students that passed a specific criterion
function percentagePerCriterionPlain(columnIndex)
{
    // Object to hold the score sum of each criterion
    var sum = 0 ;
    var total = 0;

    columnIndex+=1;

    // Iterate through rows of column
    $('table tbody tr td:nth-child('+columnIndex+')').each(function( index )
    {
        var val = parseInt($(this).text());

        /* Check if number is integer. If N/A or 0 are chosen, they are ignored in the calculation.  */
        if(val % 1 === 0 && val!=0)
        {
            if(val >= parseInt($('#expected_points').text()))
            {
                sum+=1;
            }

            total+=1;
        }
    });

    var percentage= (sum/total*100).toFixed(2);

    // If no criteria were assessed, set the percentage to 0.
    // This is to avoid show NaN%
    if(total==0)
        percentage="0.00";

    $('.total:nth-child('+columnIndex+') span').html(percentage);

}


// Calculate total for a specific student
function percentagePerStudentPlain(row)
{
    // Object to hold the score student's total score
    var sum = 0 ;
    var total = 0;
    var percentage = 0;

    row.find('td.score-field').each(function(index)
    {
        var val = parseInt($(this).text());
        if(val % 1 === 0) // Check if number is an integer
        {
            sum += val;
            total+=1;
        }
    });

    percentage =((sum/(total*8))*100).toFixed(2);

    //If percentage is not a number, set it to 0.
    if(isNaN(percentage))
        percentage="0.00";

    row.find('.percentage').html('<strong>'+percentage+'%</strong>');

}



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


// Criterion name is clicked
$('.criterion-field').on('click', function()
{
    $.ajax({
        type: 'POST',
        url: "{{ URL::action('CriteriaController@fetchCriterionWithTrashed') }}",
        data: { id: $(this).data('criterion-id') },
        success: function(data)
        {
            $('.modal-title').html(data.name);

            $('.modal-body tbody tr').empty();
            $('.modal-body tbody tr').append
            (
                '<td>'+data.description12+'</td>'
                +'<td>'+data.description34+'</td>'
                +'<td>'+data.description56+'</td>'
                +'<td>'+data.description78+'</td>'
            );

            if(data.notes!=null)
                $('.modal-body tbody tr').append('<td>'+data.notes+'</td>');
            else
                $('.modal-body tbody tr').append('<td></td>');

        },
        async:true
    });
    $('#modal-view-criterion').modal();
});


@stop