@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')

<div>
    @if(!$grouped_courses->isEmpty())
        <!-- Nav tabs -->
        <ul id="levelTabs" class="nav nav-tabs" role="tablist">
        @foreach($grouped_courses as $index=>$grouped_course) 
            <li role="presentation"><a href="#{{ $index }}" aria-controls="{{ $index }}" role="tab">{{ $grouped_course->code }}{{ $grouped_course->number }} <span class="small attention">({{ $grouped_course->semester->code }})</span></a></li>
        @endforeach
        </ul>
        <br>

        <!-- Tab panes -->
        <div class="tab-content">
            @foreach($grouped_courses as $index=>$grouped_course) 
            <div role="tabpanel" class="tab-pane" id="{{ $index }}">
                <div class="row">
                    <div class="col-md-8 graph" id="graph-{{ $index }}"></div>

                    <div class="col-md-4">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <h3>About this Course</h3>

                                <p>{{ $grouped_course->name }}</p>
                                <p>Term: {{ $grouped_course->semester->name }}</p>
                                <p>School: {{ $grouped_course->program->school->name }}</p>
                                <p>Program: {{ $grouped_course->program->name }}</p>
                                
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th class="text-center">Section</th>
                                            <th class="text-center">Activities</th>
                                            <th class="text-center">Students</th>
                                            <th class="text-center">Assessed</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-center">
                                    @foreach($grouped_sections[$index] as $section)
                                        <tr>
                                            <td>{{ HTML::linkAction('CoursesController@show', $section->section, array($section->id)) }}</td>
                                            <td>{{ count($section->activities) }}</td>
                                            <td>{{ count($section->students) }}</td>
                                            <td>
                                                @if($section->outcomes_attempted!=NULL)
                                                    <span class="glyphicon glyphicon-ok"></span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    
    @else
        <div class="alert alert-info">
            You have no classes assigned for the selected semester(s). Select other semesters or contact the administrators via the Feedback page if you think it is a mistake.
        </div>

    @endif
</div>
@stop

@section('included-js')

<!-- HighCharts -->
<script src="{{ asset('vendor/highcharts/highcharts.js') }}"></script>
<!--script src="http://code.highcharts.com/modules/exporting.js"></script -->

@stop

@section('javascript')

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

$('#levelTabs a:first').tab('show');
loadGraphs();

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

function loadGraphs() {

    @foreach($grouped_courses as $index=>$grouped_course)
        // Load grad charts after clicking tab, so they are sized correctly.  
        $('#graph-{{ $index }}').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Achieved vs Expected Learning Outcomes'
            },
            xAxis: {
                categories: [
                    @foreach($outcomes as $outcome)
                        "{{{ $outcome->name }}}",
                    @endforeach
                ],
                labels: {
                    style: {
                        fontSize:'11px'
                    },
                    step:1,
                    useHTML:true,
                    formatter: function() {
                        return '<div style="width:200px; word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
                    },
                }
            },
            yAxis: {
                min: 0,
                max: 100,
                title: {
                    text: 'Percentage'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.2f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                bar: {
                    //grouping: false,
                    shadow: false,
                    borderWidth: 0,
                },
                series: {
                pointPadding: 0,
                groupPadding: 0.075
                },
            },
            series: [{
                name: 'Achieved',
                color: '#e70033',
                dataLabels: {
                    enabled: true,
                    fontSize: 8,
                    color: '#fff',
                    align: 'right',
                    format: '{y:.1f}%',
                    style: {
                        //fontWeight: 'bold'
                    },
                    y:-1
                },
                data:[
                    @foreach($outcomes as $outcome)
                        @if(
                            is_array($grouped_outcomes_attempted_results[$index])
                            && array_key_exists($outcome->id, $grouped_outcomes_attempted_results[$index])
                            && $grouped_outcomes_attempted_results[$index][$outcome->id]!=0)
                            {{{ ($grouped_outcomes_achieved_results[$index][$outcome->id]/$grouped_outcomes_attempted_results[$index][$outcome->id])*100 }}},
                        @else
                            0,
                        @endif
                    @endforeach
                ],
                pointPadding: 0,
            }, {
                name: 'Expected',
                color: '#555555',
                    dataLabels: {
                    enabled: true,
                    fontSize: 8,
                    color: '#fff',
                    align: 'right',
                    format: '{y:.1f}%',
                    style: {
                        //fontWeight: 'bold'
                    },
                    y:-1
                },
                data: [
                    @foreach($outcomes as $outcome)
                        @if(
                            is_array($grouped_outcomes_attempted_results[$index])
                            && array_key_exists($outcome->id, $grouped_outcomes_attempted_results[$index])
                            && $grouped_outcomes_attempted_results[$index][$outcome->id]!=0)
                            {{{ $outcome->expected_outcome }}},
                        @else
                            0,
                        @endif
                    @endforeach
                ],
                pointPadding: 0,

            }]
        });
    @endforeach  
}


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

$('#levelTabs a').click(function (e) {
    e.preventDefault()
    $(this).tab('show');
    loadGraphs();
});

// Include dummy graph for outcomes
@include('global.dummy-outcomes')

@stop