@extends('layouts.master')

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

@section('main')
<p>{{{ $grouped_courses[0]->program->name }}}</p>

<a href="{{ action('CoursesController@print_course', array($grouped_courses[0]->code, $grouped_courses[0]->number, $grouped_courses[0]->semester->code )); }}" class="btn btn-primary pull-right" alt="print"><span class="glyphicon glyphicon-print"></span></a>
<br>
<br>

<div class="row">
    <div class="col-md-12 graph" id="graph"></div>
</div>
<div class="row">
    <div class="col-md-5">
        <h3>Sections</h3>
        <table class="table table-striped table-condensed">
            <thead>
                <tr>
                    <th>Identifier</th>
                    <th>Professor</th>
                    <th>Assessed</th>
                    <th>Published</th>
                </tr>
            </thead>
            <tbody>
            @foreach($sections as $section)
                <tr>
                    <td>{{ HTML::linkAction('CoursesController@showLimited', $section->code.$section->number.'-'.$section->section.' ('.$section->semester->code.')', array($section->id)) }}</td>
                    <td>{{ $section->user->surnames }}, {{ $section->user->first_name }}</td>
                    <td>
                        @if(count($section->assessedActivities))
                            <span class="glyphicon glyphicon-ok"></span>
                        @endif
                    </td>
                    <td>
                        @if(count($section->publishedActivities))
                            <span class="glyphicon glyphicon-ok"></span>
                        @endif
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div class="col-md-7">
        <h3>Transformative Action Overview</h3>
        <table class="table table-striped table-condensed">
            <thead>
                <tr>
                    <th>Activity</th>
                    <th>Section</th>
                    <th>Transformative Action</th>
                    <th>Comments</th>
                </tr>
            </thead>
            <tbody>
            @foreach ($activities as $activity)
                <tr>
                    <td>{{ $activity->name }} </td>
                    <td>{{ $activity->course->section }}</td>
                    <td>{{ $activity->transforming_actions }}</td>
                    <td>{{ $activity->assessment_comments }}</td>
                </tr>
            @endforeach

            </tbody>
        </table>
    </div>
</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
// --------------------------------------------------------------------------


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

$(function () {

    $('#graph').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Performance by Learning Outcome Criteria in {{ $title }}'
        },
        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: 'Expected Value',
            color: '#555555',
            dataLabels: {
                enabled: true,
                fontSize: 8,
                color: '#fff',
                align: 'right',
                format: '{y:.1f}%',
                style: {
                    //fontWeight: 'bold'
                },
                y:-1
            },
            data: [
                @foreach($outcomes as $index => $outcome)
                    @if(
                        is_array($outcomes_attempted)
                        && array_key_exists($outcome->id, $outcomes_attempted)
                        && $outcomes_attempted[$outcome->id]!=0)
                        {{{ $outcome->expected_outcome }}},
                    @else
                        0,
                    @endif
                @endforeach
            ]

        }, {
            name: 'Obtained Value',
            color: '#e70033',
            dataLabels: {
                enabled: true,
                fontSize: 8,
                color: '#fff',
                align: 'right',
                format: '{y:.1f}%',
                style: {
                    //fontWeight: 'bold'
                },
                y:-1
            },
            data:[
                @foreach($outcomes as $index => $outcome)
                    @if(
                        is_array($outcomes_attempted)
                        && array_key_exists($outcome->id, $outcomes_attempted)
                        && $outcomes_attempted[$outcome->id]!=0)
                        {{{ ($outcomes_achieved[$outcome->id]/$outcomes_attempted[$outcome->id])*100 }}},
                    @else
                        0,
                    @endif
                @endforeach

            ]
        }]
    });

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

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


@stop