@extends('layouts.master')

@section('navigation')
    @if($role==1)
        @include('local.managers.admins._new_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')
<a href="{{ action('ProgramsController@studentsProgramAssessmentReportForProfessors', array($program->id)); }}" class="btn btn-primary pull-left" alt="print">Go to Performance by Program Students</a>
<div class="row" id = "allGraph">
    <div class="col-md-12" id="graph"></div>
</div>
<div class="row graph-stu" id = "programGraph">
    <div class = "col-md-12" id="graph-stu-program"></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>

<script>

function changeView(graph_to_hide, graph_to_show, index, message){

current_message = $("#change-view-btn"+index).html();
$("#change-view-btn"+index).html(message);

$(graph_to_hide).hide()
$(graph_to_show).show()


$("#change-view-btn"+index).attr('onclick','changeView("'+graph_to_show+'", "'+graph_to_hide+'","'+index+'","'+current_message+'")')
}

$(".graph-stu").hide();
</script>

@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 }}}<br> (N = {{$outcomes_attempted[$outcome->id]}}, {{$outcomes_achieved[$outcome->id]}})",
                @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'
            },@if($program->expected_outcome_target == null)
            plotLines:[{
        value:70.00,
        color: '#000',
        width:3,
        zIndex:4,
        label:{
            text: 'Goal (70.00%)',
            style: {
                color: '#000',
                fontSize: '14px',
            }

        }
    }]
    @else
    plotLines:[{
        value:{{$program->expected_outcome_target->expected_target}},
        color: '#000',
        width:3,
        zIndex:4,
        label:{
            text: 'Goal ({{$program->expected_outcome_target->expected_target}}%)',
            style: {
                color: '#000',
                fontSize: '14px',
            }

        }
    }]

    @endif
        },
        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)

                        <?php
                            if (isset($outcomes_achieved[$outcome->id])){
                                $achieved = $outcomes_achieved[$outcome->id];
                            }
                            else $achieved = 0;
                        ?>
                        {{{ ($achieved/$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,

        } --}}]
    });

    
$('#graph-stu-program').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Performance by Learning Outcome Criteria in Program\'s students'
    },
    legend: {
        reversed: true,
    },
    xAxis: {
        categories: [
            @foreach($outcomes as $outcome)
                "{{{ $outcome->name }}} <br>(N = {{$program_outcomes_attempted[$outcome->id]}}, {{$program_outcomes_achieved[$outcome->id]}})",
            @endforeach
        ],
        labels: {
            style: {
                fontSize:'11px'
            },
            step:1,
            useHTML:true,
            formatter: function() {
                return '<div style="width:100px; word-break:break; text-overflow:ellipsis; overflow:hidden;">'+this.value+'</div>';
            },
        }
    },
   
    yAxis: {
        min: 0,
        max: 100,
        title: {
        text: 'Percentage'
        }, 
        @if($program->expected_outcome_target == null)
                plotLines:[{
            value:70.00,
            color: '#000',
            width:3,
            zIndex:4,
            label:{
                text: 'Goal (70.00%)',
                style: {
                    color: '#000',
                    fontSize: '14px',
                }
    
            }
        }]
        @else
        plotLines:[{
            value:{{$program->expected_outcome_target->expected_target}},
            color: '#000',
            width:3,
            zIndex:4,
            label:{
                text: 'Goal ({{$program->expected_outcome_target->expected_target}}%)',
                style: {
                    color: '#000',
                    fontSize: '14px',
                }
    
            }
        }]

        @endif
    },
    tooltip: {
        enabled:false
    },
    plotOptions: {
            bar: {
                //grouping: false,
                shadow: false,
                borderWidth: 0,
            },
            series: {
                pointPadding: 0,
                groupPadding: 0.075,
                animation: false
            },
        },
    series: [{
        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($program_outcomes_attempted)
                    && array_key_exists($outcome->id, $program_outcomes_attempted)
                    && $program_outcomes_attempted[$outcome->id]!=0)
                    {{{ ($program_outcomes_achieved[$outcome->id]/$program_outcomes_attempted[$outcome->id])*100 }}},
                @else
                    0,
                @endif
            @endforeach

        ]
    }]
});

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



@stop