@extends('layouts.print')

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

<p class="header-text">{{{ $grouped_courses[0]->program->name }}}</p>
<p class="header-text">{{{ $grouped_courses[0]->name }}}</p>
<h1 class="header-text">Assessment Results for {{{ $grouped_courses[0]->code }}}{{{ $grouped_courses[0]->number }}} ({{{ $grouped_courses[0]->semester->code }}})</h1>

@stop


@section('main')

<div id="graph"></div>

<h3>Sections</h3>
<table>
    <thead>
        <tr>
            <th>Identifier</th>
            <th>Professor</th>
            <th>Assessed</th>
        </tr>
    </thead>
    <tbody>
    @foreach($sections as $section)
        <tr>
            <td>{{{ $section->code.$section->number.'-'.$section->section.' ('.$section->semester->code.')'}}}</td>
            <td>{{ $section->user->surnames }}, {{ $section->user->first_name }}</td>
            <td>
                @if($section->outcomes_attempted!=NULL)
                    <span class="glyphicon glyphicon-ok"></span>
                @endif
            </td>
        </tr>
    @endforeach
    </tbody>
</table>

<h3>Transformative Action Overview</h3>
<table>
    <thead>
        <tr>
            <th class="col-md-3">Activity</th>
            <th class="col-md-1">Section</th>
            <th class="col-md-8">Transformative Action</th>
        </tr>
    </thead>
    <tbody>
    @foreach ($activities as $activity)
        <tr>
            <td>{{ $activity->name }} </td>
            <td>{{ $activity->course->section }}</td>
            <td>{{ $activity->transforming_actions }}</td>
        </tr>
    @endforeach

    </tbody>
</table>
@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 }}'
        },
        legend: {
            reversed: true,
        },
        xAxis: {
            categories: [
                @foreach($outcomes as $outcome)
                    "{{{ $outcome->name }}}",
                @endforeach
            ],
            labels: {
                style: {
                    fontSize:'10px'
                },
                step:1,
                useHTML:true,
                formatter: function() {
                    return '<div class="blue" style="word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
                },
            }
        },
        yAxis: {
            min: 0,
            max: 100,
            title: {
                text: 'Percentage'
            }
        },
        tooltip: {
            enabled:false,
        },
        plotOptions: {
            bar: {
                //grouping: false,
                shadow: false,
                borderWidth: 0,
            },
            series: {
                pointPadding: 0,
                groupPadding: 0.075,
                animation:false,
            },
        },
        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')
});

@stop