@extends('layouts.master')

@section('css')
    {{ HTML::style('vendor/jquery-ui-1.11.4.custom/jquery-ui.min.css') }}
    {{ HTML::style('vendor/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css') }}
@stop

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

<!-- Edit Activity -->
<div class="modal fade" id="modal-edit-activity">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Edit Activity</h4>
      </div>
        <div class="modal-body">
            {{ Form::open(array('action' => array('ActivitiesController@update', $activity->id))) }}
                <div class="form-group">
                    {{ Form::label('name', 'Name') }}
                    {{ Form::text('name', $activity->name, array('class' => 'form-control')) }}
                </div>
                <div class="form-group">
                    {{ Form::label('description', 'Description') }}
                    {{ Form::textarea('description', $activity->description, array('class' => 'form-control', 'rows'=> 4, 'placeholder'=>'Minimum 10 characters')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('date', 'Date') }}
                    {{ Form::text('date', $activity->date, array('id'=>'date', 'class' => 'form-control', 'maxLength'=>10)) }}
                </div>
        </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input class="btn btn-primary" name="update_activity_information" value="Save" type="submit"/>
        {{ Form::close() }}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Edit Transforming Actions -->
<div class="modal fade" id="modal-edit-transforming-actions">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Edit Transforming Actions</h4>
      </div>
        <div class="modal-body">
            {{ Form::open(array('action' => array('ActivitiesController@update', $activity->id))) }}

                <p>A Transforming Action is the educational action to be taken to address the criteria of an unachieved Learning Outcome.</p>
                <p>Una acción transformadora es una acción educativa a tomarse para atender el o los criterios de un dominio dado que no se alcanzaron.</p>

                <div class="form-group">
                    {{ Form::label('transforming_actions', 'Transforming Actions') }}
                    {{ Form::textarea('transforming_actions', $activity->transforming_actions, array('class' => 'form-control', 'rows'=> 4, 'placeholder'=>'Actions to improve student performance after assessment (optional)')) }}
                </div>
        </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input class="btn btn-primary" name="update_transforming_actions" value="Save" type="submit"/>
        {{ Form::close() }}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Edit Transforming Actions -->
<div class="modal fade" id="modal-edit-assessment-comments">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Edit Assessment Comments</h4>
      </div>
        <div class="modal-body">
            {{ Form::open(array('action' => array('ActivitiesController@update', $activity->id))) }}

                <p>Write any additional comments about this activity.</p>
                <p>Escriba cualquier comentario adicional sobre esta actividad.</p>

                <div class="form-group">
                    {{ Form::label('assessment_comments', 'Assessment Comments') }}
                    {{ Form::textarea('assessment_comments', $activity->assessment_comments, array('class' => 'form-control', 'rows'=> 4, 'placeholder'=>'(optional)')) }}
                </div>
        </div>
      <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input class="btn btn-primary" name="update_assessment_comments" value="Save" type="submit"/>
        {{ Form::close() }}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Delete Activity Modal -->
<div class="modal fade" id="modal-confirm-delete-activity">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Delete Activity</h4>
      </div>
      <div class="modal-body">
        <p>Deleting this activity will also delete any related assessment data. Do you want to continue?</p>
      </div>
      <div class="modal-footer">
        <!-- Confirm deletion (must use form, because Laravel needs to use the DELETE method) -->
        {{ Form::open(array('action' => array('ActivitiesController@destroy', $activity->id), 'method'=>'delete')) }}
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button class="btn btn-primary" type="submit">Delete</button>
        {{ Form::close() }}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!-- Delete Assessment Modal -->
<div class="modal fade" id="modal-confirm-delete-assessment">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Delete Assessment</h4>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete the assessment results?</p>
      </div>
      <div class="modal-footer">
        <!-- Confirm deletion (must use form, because Laravel needs to use the DELETE method) -->
        {{ Form::open(array('action' => array('ActivitiesController@deleteAssessment'))) }}
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <input type="hidden" id="id" name="id" value="{{ $activity->id }}">
            <button class="btn btn-primary" type="submit">Delete</button>
        {{ Form::close() }}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="row">
    <div class="col-md-9" id="graph"></div>
	<div class="col-md-3">
        <div class="btn-group-vertical btn-block" role="group" aria-label="...">

            <!-- If semester is active, allow users to delete the activity -->
            @if (in_array($course->semester->id, $active_semesters))
            <button class="btn btn-primary btn-sm btn-block" btn-block data-toggle="modal" data-target="#modal-edit-activity">Edit Activity Information</button>
            @endif

            <!-- If no rubric is assigned and the semester is active -->
            @if($activity->rubric == NULL && in_array($course->semester->id, $active_semesters))
                {{ HTML::linkAction('RubricsController@newRubric', 'Assign Rubric', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}
            @else

                {{ HTML::linkAction('RubricsController@show', 'View Rubric', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}

                <!-- If semester is active, allow users to change rubrics -->
                @if (in_array($course->semester->id, $active_semesters))
                {{ HTML::linkAction('RubricsController@newRubric', 'Change Rubric', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}
                @endif

                <!-- If there is no assessment and the semester is active -->
                @if($activity->outcomes_attempted == NULL && in_array($course->semester->id, $active_semesters))
                    {{ HTML::linkAction('ActivitiesController@assess', 'Assess', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}
                @else
                    {{ HTML::linkAction('ActivitiesController@viewAssessment', 'View Assessment Sheet', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}


                    <!-- If semester is active, allow users to edit assessments -->
                    @if (in_array($course->semester->id, $active_semesters))
                        {{ HTML::linkAction('ActivitiesController@assess', 'Edit Assessment', array($activity->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}
                        <button class="btn btn-primary btn-sm btn-block" btn-block data-toggle="modal" data-target="#modal-confirm-delete-assessment">Delete Assessment</button>
                        <button class="btn btn-primary btn-sm btn-block" btn-block data-toggle="modal" data-target="#modal-edit-transforming-actions">Transforming Actions</button>
                        <button class="btn btn-primary btn-sm btn-block" btn-block data-toggle="modal" data-target="#modal-edit-assessment-comments">Assessment Comments</button>

                    @endif
                @endif
            @endif

            <!-- If semester is active, allow users to delete the activity -->
            @if (in_array($course->semester->id, $active_semesters))
            <button class="btn btn-primary btn-sm btn-block" btn-block data-toggle="modal" data-target="#modal-confirm-delete-activity">Delete Activity</button>
            @endif
            {{ HTML::linkAction('CoursesController@show', 'Back to Section', array($course->id), array('class'=>'btn btn-primary btn-sm btn-block')) }}
        </div>

        <hr>
            <h5>Description</h5>
            <p>{{ $activity->description }}</p>

        @if($activity->transforming_actions != NULL)
            <hr>
            <h5>Transforming Actions</h5>
            {{{ $activity->transforming_actions }}}
        @endif

        @if($activity->assessment_comments != NULL)
            <hr>
            <h5>Assessment Comments</h5>
            {{{ $activity->assessment_comments }}}
        @endif
	</div>
</div>
<div class="row">
    <div class="col-md-12" id="criteriaGraph"></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 -->

<!-- Datepicker -->
<script src="{{ asset('vendor/jquery-ui-1.11.4.custom/jquery-ui.min.js') }}"></script>

@stop

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

    $('#date').datepicker({
      dateFormat: "yy-mm-dd"
    });

    $('#criteriaGraph').highcharts({
        chart: {
            type: 'bar',
            height: {{{ count(json_decode($activity->criteria_achieved, true))*22+225 }}},
        },
        title: {
            text: 'Criteria Achievement',
        },
        xAxis: {
            categories: [
                @if($activity->criteria_achieved_percentage!=NULL)
                    @foreach(json_decode($activity->criteria_achieved, true) as $id=>$value)
                        "{{{ Criterion::withTrashed()->find($id)->name }}}",
                    @endforeach
                @endif
            ],
            labels: {
                style: {
                    fontSize:'12px'
                },
                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($activity->rubric!=NULL)
            plotLines:[{
                value:{{ $activity->rubric->expected_percentage }},
                color: '#000',
                width:3,
                zIndex:4,
                label:{
                    text: 'Goal ({{ $activity->rubric->expected_percentage }}%)',
                    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.1
            },
        },
        series: [{
            type:'column',
            name: 'Passed',
            color: '#e70033',
            dataLabels: {
                enabled: true,
                fontSize: 8,
                color: '#fff',
                align: 'right',
                format: '{y:.1f}%',
                style: {
                    //fontWeight: 'bold'
                },
                y:-1
            },
            data:[
                @if($activity->criteria_achieved_percentage!=NULL)
                    @foreach(json_decode($activity->criteria_achieved_percentage, true) as $id=>$value)

                        //This conditional is to ignore criteria that weren't assessed. These would have a value of null.
                        @if($value)
                            {{{ $value }}},
                        @else
                            0,
                        @endif
                    @endforeach
                @endif
            ],
            pointPadding: 0,
            }
        ]
    });

    $('#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: '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
            ],
            pointPadding: 0,
        }, {
            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
            ],
            pointPadding: 0,
        }]
    });

    var chart = $('#graph').highcharts();
    var titletext = $('#graph').highcharts().options.title.text;
    var newtitletext = titletext.replace("&#039;", "\'");
    chart.setTitle({text: newtitletext});

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

@stop