@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 class="row">
    <div class="col-md-12" id="graph"></div>
</div>

<div class="row">
    <div class="col-md-12">
        <h3>Contact Information</h3>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <h4>School/College Coordinator(s)</h4>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Office Phone</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($scoords as $scoord)
                    <tr>
                        <td>{{ $scoord->surnames }}, {{ $scoord->first_name }}</td>
                        <td>
                            <a href="mailto:{{ $scoord->email }}">{{ $scoord->email }}</a>
                        </td>
                        <td>
                            @if($scoord->office_phone)
                                {{{ $scoord->office_phone }}}

                                @if($scoord->office_extension)
                                    <span>ext.</span> {{{ $scoord->office_extension }}}
                                @endif
                            @else
                                Not set
                            @endif
                        </td>
                    </tr>

                @endforeach
            </tbody>
        </table>
    </div>
    <div class="col-md-6">
        <h4>Program Coordinator(s)</h4>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Office Phone</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($pcoords as $pcoord)
                    <tr>
                        <td>{{ $pcoord->surnames }}, {{ $pcoord->first_name }}</td>
                        <td>
                            <a href="mailto:{{ $pcoord->email }}">{{ $pcoord->email }}</a>
                        </td>
                        <td>
                            @if($pcoord->office_phone)
                                {{{ $pcoord->office_phone }}}

                                @if($pcoord->office_extension)
                                    <span>ext.</span> {{{ $pcoord->office_extension }}}
                                @endif
                            @else
                                Not set
                            @endif
                        </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')
$(function () {
    $('#graph').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 $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

            ],
            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 $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
            ],
            pointPadding: 0,

        }]
    });

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



@stop