@extends('layouts.master')

@section('navigation')
@include('local.managers.admins._navigation')
@stop

@section('main')

<div>
    <!-- Nav tabs -->
    <ul id="levelTabs" class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#undergraduate" aria-controls="undergraduate" role="tab">Undergraduate</a></li>
        <li role="presentation"><a href="#graduate" aria-controls="graduate" role="tab">Graduate</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="undergraduate">
            <div class="row">
                <div class="col-md-9 graph" id="graph_undergrad"></div>
                <div class="col-md-3">
                    <br>
                    <div class="panel panel-default panel-scrolling">
                        <div class="panel-heading" role="tab">
                            <h4 class="panel-title">
                                Participating Programs
                            </h4>
                        </div>
                        <div>
                            <table class="table table-striped table-condensed">
                                @foreach ($participating_undergrad_programs as $program)
                                <tr>
                                    <td>{{ HTML::linkAction('ProgramsController@show', $program->name, array($program->id)) }}</td>
                                </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h4>Assessment Results by Learning Outcomes in the Undergraduate Academic Programs</h4>
                    <table class="table table-striped table-condensed datatable">
                        <thead>
                            <th>Learning Outcome</th>
                            <th>Undergraduate Programs doing Assessment</th>
                            <th>Undergraduate Programs Achieved</th>
                            <th>Undergraduate Success Rate</th>
                        </thead>
                        <tbody>
                            @foreach($outcomes_subgrad as $outcome)
                            <tr>
                                <td>{{ link_to_action('OutcomesController@show', $outcome->name, array($outcome->id), $attributes = array()) }}</td>
                                <td>{{{ $attemptedUndergradProgramsPerOutcome[$outcome->id] }}}</td>
                                <td>{{{ $achievedUndergradProgramsPerOutcome[$outcome->id] }}}</td>
                                <td>
                                    @if($attemptedUndergradProgramsPerOutcome[$outcome->id]!=0)
                                    {{{ round($achievedUndergradProgramsPerOutcome[$outcome->id] / $attemptedUndergradProgramsPerOutcome[$outcome->id]*100, 2) }}}%
                                    @else
                                    N/M
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot></tfoot>
                        <caption>N/M: Not Measured</caption>
                    </table>
                </div>
            </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="graduate">
            <div class="row">
                <div class="col-md-9 graph" id="graph_grad">
                </div>
                <div class="col-md-3">
                    <br>
                    <div class="panel panel-default panel-scrolling">
                        <div class="panel-heading" role="tab">
                            <h4 class="panel-title">
                                Participating Programs
                            </h4>
                        </div>
                        <div>
                            <table class="table table-striped table-condensed">
                                @foreach ($participating_grad_programs as $program)
                                <tr>
                                    <td>{{ HTML::linkAction('ProgramsController@show', $program->name, array($program->id)) }}</td>
                                </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h4>Assessment Results by Learning Outcomes in the Graduate Academic Programs</h4>
                    <table class="table table-striped table-condensed datatable">
                        <thead>
                            <th>Learning Outcome</th>
                            <th>Graduate Programs doing Assessment</th>
                            <th>Graduate Programs Achieved</th>
                            <th>Graduate Success Rate</th>
                        </thead>
                        <tbody>
                            @foreach($outcomes_grad as $outcome)
                            <tr>
                                <td>{{ link_to_action('OutcomesController@show', $outcome->name, array($outcome->id), $attributes = array()) }}</td>
                                <td>{{{ $attemptedGradProgramsPerOutcome[$outcome->id] }}}</td>
                                <td>{{{ $achievedGradProgramsPerOutcome[$outcome->id] }}}</td>
                                <td>
                                    @if($attemptedGradProgramsPerOutcome[$outcome->id]!=0)
                                    {{{ round($achievedGradProgramsPerOutcome[$outcome->id] / $attemptedGradProgramsPerOutcome[$outcome->id]*100, 2) }}}%
                                    @else
                                    N/M
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot></tfoot>
                        <caption>N/M: Not Measured</caption>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

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

<!-- Datatables -->
@include('global._datatables_js')

@stop

@section('javascript')
$(function () {

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


// Load grad charts after clicking tab, so they are sized correctly.
$('#graph_undergrad').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Undergraduate Performance by Learning Outcome Criteria (Campus)'
},
legend: {
reversed: true,
},
xAxis: {
categories: [
@foreach($outcomes_subgrad as $outcome)
"{{{ $outcome->name }}}",
@endforeach
],
labels: {
style: {
fontSize:'11px'
},
step:1,
useHTML:true,
formatter: function() {
return '<div style="max-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:.1f}</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_subgrad as $index => $outcome)
@if(
is_array($undergrad_outcomes_attempted)
&& array_key_exists($outcome->id, $undergrad_outcomes_attempted)
&& $undergrad_outcomes_attempted[$outcome->id]!=0)
{{{ $outcome->expected_outcome }}},
@else
null,
@endif
@endforeach
],
pointPadding: 0,
}, {
name: 'Obtained Value',
color: 'rgba(231, 0, 51, 1)',
dataLabels: {
enabled: true,
fontSize: 8,
color: '#fff',
align: 'right',
format: '{y:.1f}%',
style: {
//fontWeight: 'bold'
},
y:-1
},
data:[
@foreach($outcomes_subgrad as $index => $outcome)
@if(
is_array($undergrad_outcomes_attempted)
&& array_key_exists($outcome->id, $undergrad_outcomes_attempted)
&& $undergrad_outcomes_attempted[$outcome->id]!=0)
@if (($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 > $outcome->expected_outcome)
{y:{{{ ($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 }}} },
@else
{y:{{{ ($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 }}}, color:'#e70033' },
@endif
@else
null,
@endif
@endforeach
],
pointPadding: 0,
}]
});

$('#graph_grad').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Graduate Performance by Learning Outcome Criteria (Campus)'
},
legend: {
reversed: true,
},
xAxis: {
categories: [
@foreach($outcomes_grad 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_grad as $index => $outcome)
@if(
is_array($grad_outcomes_attempted)
&& array_key_exists($outcome->id, $grad_outcomes_attempted)
&& $grad_outcomes_attempted[$outcome->id]!=0)
{{{ $outcome->expected_outcome }}},
@else
null,
@endif
@endforeach
],
pointPadding: 0,

}, {
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_grad as $index => $outcome)
@if(
is_array($grad_outcomes_attempted)
&& array_key_exists($outcome->id, $grad_outcomes_attempted)
&& $grad_outcomes_attempted[$outcome->id]!=0)
{{{ ($grad_outcomes_achieved[$outcome->id]/$grad_outcomes_attempted[$outcome->id])*100 }}},
@else
null,
@endif
@endforeach
],
pointPadding: 0,
}]
});
})

$('#graph_undergrad').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Undergraduate Performance by Learning Outcome Criteria (Campus)'
},
legend: {
reversed: true,
},
xAxis: {
categories: [
@foreach($outcomes_subgrad as $outcome)
"{{{ $outcome->name }}}",
@endforeach
],
labels: {
style: {
fontSize:'11px'
},
step:1,
useHTML:true,
formatter: function() {
return '<div style="max-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:.1f}</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_subgrad as $index => $outcome)
@if(
is_array($undergrad_outcomes_attempted)
&& array_key_exists($outcome->id, $undergrad_outcomes_attempted)
&& $undergrad_outcomes_attempted[$outcome->id]!=0)
{{{ $outcome->expected_outcome }}},
@else
null,
@endif
@endforeach
],
pointPadding: 0,
},
{
name: 'Obtained Value',
color: 'rgba(231, 0, 51, 1)',
dataLabels: {
enabled: true,
fontSize: 8,
color: '#fff',
align: 'right',
format: '{y:.1f}%',
style: {
//fontWeight: 'bold'
},
y:-1
},
data:[
@foreach($outcomes_subgrad as $index => $outcome)
@if(
is_array($undergrad_outcomes_attempted)
&& array_key_exists($outcome->id, $undergrad_outcomes_attempted)
&& $undergrad_outcomes_attempted[$outcome->id]!=0)
{{{ ($undergrad_outcomes_achieved[$outcome->id]/$undergrad_outcomes_attempted[$outcome->id])*100 }}},
@else
null,
@endif
@endforeach
],
pointPadding: 0,
}]
});


$('#objectives_count').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Programs Assessing Each Learning Outcome'
},
xAxis: {
categories: [
@foreach($outcomes_subgrad as $outcome)
"{{{ $outcome->name }}}",
@endforeach
],
labels: {
style: {
fontSize:'11px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Programs'
}
},
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}</b></td></tr>',
    footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Undergraduate',
color: '#e70033',
data:[
@foreach($outcomes_subgrad as $outcome)
{{{ $attemptedUndergradProgramsPerOutcome[$outcome->id] }}},
@endforeach
],
pointPadding: 0,
}]
});
});

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

@stop