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

    <!-- 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(['action' => ['ActivitiesController@update', $activity->id]]) }}
                    <div class="form-group">
                        {{ Form::label('name', 'Name') }}
                        {{ Form::text('name', $activity->name, ['class' => 'form-control']) }}
                    </div>
                    <div class="form-group">
                        {{ Form::label('description', 'Description') }}
                        {{ Form::textarea('description', $activity->description, ['class' => 'form-control', 'rows' => 4, 'placeholder' => 'Minimum 10 characters']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('date', 'Date') }}
                        {{ Form::text('date', $activity->date, ['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 Formative Actions</h4>
                </div>
                <div class="modal-body">
                    {{ Form::open(['action' => ['TransformativeActionsController@postActivityCriterion', $activity->id]]) }}


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

                    <h5>Choose criteria for the transforming action <br>
                        Escoge los criterion para la acción transformadora</h5>

                    <div class="form-group">

                        {{ Form::label('select-activity-criterion', 'Criteria') }}

                        <select id='select-activity-criterion' name="trans_act[]" data-count="1"
                            class="form-control selectpicker">
                            @foreach ($activity_criterion as $ac)
                                <option value='{{ $ac->id }}' selected>{{ $ac->name }}</option>
                            @endforeach
                        </select>
                    </div>


                    <button id='button-add-activity-criterion' class='btn btn-md btn-secondary'>
                        <span class='glyphicon glyphicon-plus'>

                        </span>
                        Add another Criteria
                    </button>
                    <hr>

                    <div class="form-group">
                        {{ Form::label('name_trans', 'Name of Formative Actions') }}
                        {{ Form::text('name_trans', '', ['class' => 'form-control']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::label('transforming_actions', 'Formative Actions') }}
                        {{ Form::textarea('transforming_actions', $activity->transforming_actions, ['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(['action' => ['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, ['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(['action' => ['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(['action' => ['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 (count($activity->rubric) == 0 && in_array($course->semester->id, $active_semesters))
                    {{ HTML::linkAction('RubricsController@newRubric', 'Assign Rubric', [$activity->id], ['class' => 'btn btn-primary btn-sm btn-block']) }}
                    <!--{{ HTML::linkAction('RubricsController@newOtherMethod', 'Assign Other Assessment Method', [$activity->id], ['class' => 'btn btn-primary btn-sm btn-block']) }}-->
                @else
                    @if (count($activity->rubric) != 0)
                        {{ HTML::linkAction('RubricsController@show', 'View Rubric', [$activity->id], ['class' => 'btn btn-primary btn-sm btn-block']) }}
                    @else
                        <h5>No rubric associated to this activity</h5>
                    @endif
                    <!-- If semester is active, allow users to change rubrics -->
                    @if (in_array($course->semester->id, $active_semesters))
                        {{ HTML::linkAction('RubricsController@newRubric', 'Change Rubric', [$activity->id], ['class' => 'btn btn-primary btn-sm btn-block']) }}
                    @endif

                    <!-- If there is no assessment and the semester is active -->
                    @if (!$activity->is_assessed() && in_array($course->semester->id, $active_semesters))
                        {{ HTML::linkAction('ActivitiesController@assess', 'Assess', [$activity->id], ['class' => 'btn btn-primary btn-sm btn-block']) }}
                    @else
                        @if ($activity->is_assessed())
                            {{ HTML::linkAction('ActivitiesController@viewAssessment', 'View Assessment Sheet', [$activity->id], ['class' => 'btn btn-primary btn-sm btn-block']) }}
                        @else
                            <h5>No assessment associated to this activity</h5>
                        @endif

                        <!-- If semester is active, allow users to edit assessments -->
                        @if (in_array($course->semester->id, $active_semesters))
                            {{ HTML::linkAction('ActivitiesController@assess', 'Edit Assessment', [$activity->id], ['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">Formative 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', [$course->id], ['class' => 'btn btn-primary btn-sm btn-block']) }}
            </div>

            <hr>
            <h5>Description</h5>
            <p>{{ $activity->description }}</p>
            <?php
            $formative_actions = $activity->formativeActionsWithCriteria();
            ?>
            @if ($formative_actions != null)
                <hr>
                <h5>Formative Actions</h5>
                <p><strong>{{ $formative_actions[0]->at_text }}: </strong> {{ $formative_actions[0]->description }}
                </p>
                <h5>Formative Action's Associated Criteria</h5>
                <ul>
                    @foreach ($formative_actions as $criteria)
                        <li>{{ $criteria->name }}</li>
                    @endforeach
                </ul>
            @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>

    <script>
        $('#button-add-activity-criterion').on('click', function(e) {
            e.preventDefault();

            options = $('#select-activity-criterion').html();
            counter = $('#select-activity-criterion').data('count');

            var div = $('<div/>', {
                'id': "selectFor" + counter

            });
            var divForSelect = $('<div/>', {
                'class': 'col-12 form-group'
            });
            var select = $('<select/>', {
                'class': 'selectpicker',
                'name': 'trans_act[]',

            })



            var $button = $('<button/>', {
                'type': 'button',
                'class': 'btn btn-primary',
                'onclick': '$(this).parent().parent().remove();$("#button-add-activity-criterion").show(); '
            }).html('X');

            divForSelect.append(select);
            divForSelect.append($button);
            div.append(divForSelect);

            $('#select-activity-criterion').parent().parent().after(div);
            select.html(options);

            refreshSelects();

            countSelects = $('.selectpicker').length;
            countOptions = $('#select-activity-criterion option').length;
            if (countOptions == countSelects) {
                $('#button-add-activity-criterion').hide();
            }



        });

        function refreshSelects() {
            $('.selectpicker').each(function() {
                $(this).selectpicker('refresh');
            });
        }
        $(document).ready(function() {

            if ({{ count($transformative_actions) }}) {
                var trans_actions = {{ json_encode($transformative_actions) }};
                //$('#select-activity-criterion').val(trans_actions[0].activity_id);
                $('#name_trans').val(trans_actions[0].at_text);
                $('#transforming_actions').val(trans_actions[0].description);
                refreshSelects();

                for (index in trans_actions) {
                    if (index == 0) continue;
                    $('#button-add-activity-criterion').click();
                }
                $('.selectpicker').each(function(index) {
                    $(this).val(trans_actions[index].activity_criterion_id);
                });
                refreshSelects();
            }
        });
    </script>
@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"
    });

    string_for_format = "";


    $('#criteriaGraph').highcharts({
    chart: {
    type: 'bar',
    height:
    @if ($activity->is_assessed())
        {{ count($activity->criteria_achieved()) * 22 + 225 }}
    @else
        {{ 22 + 225 }}
    @endif
    ,
    },
    title: {
    text: 'Criteria Achievement',
    },
    xAxis: {
    categories: [
    @if ($activity->is_assessed())
        @foreach ($activity->criteria_achieved() 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 (isset($activity->rubric[0]) and isset($activity->rubric[0]->expected_percentage))
        plotLines:[{
        value:{{ $activity->rubric[0]->expected_percentage }},
        color: '#000',
        width:3,
        zIndex:4,
        label:{
        text: 'Goal ({{ $activity->rubric[0]->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>'+
        '{point.outcomes}',
        //'<tr><td style="color:{series.color};padding:0">Learning Outcomes:</td>'+

            // '<td style="padding:0">{point.outcomes}, <br>Outcome2</td></tr>',

            // '<td style="padding:0">{point.outcomes}, <br>Outcome2</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->is_assessed())
        @foreach ($activity->cap_array as $id => $crit)
            //This conditional is to ignore criteria that weren't assessed. These would have a value of null.
            @if ($crit->score_percentage)
                {y: {{ $crit->score_percentage }}, outcomes: "{{ $crit->outcome_names_html }}"},
            @else
                {y:0, outcomes:"{{ $crit->outcome_names_html }}"},
            @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)
        @if( array_key_exists($outcome->id, $outcomes_activity) &&
        $outcomes_activity[$outcome->id]  //&&
        //array_key_exists($outcome->id, $outcomes_attempted) &&
        //$outcomes_attempted[$outcome->id] != 0
        )
         
            <?php
            $attempted = $outcomes_activity[$outcome->id]->attempted;
            $achieved = $outcomes_activity[$outcome->id]->achieved;
            ?>

        @else
            <?php
            $attempted = 0;
            $achieved = 0;
            ?>
        @endif
        "{{ $outcome->name }}<br> (N = {{$attempted}} , {{$achieved}})",

    @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($activity->course->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:{{$activity->course->program->expected_outcome_target->expected_target}},
		color: '#000',
		width:3,
		zIndex:4,
		label:{
			text: 'Goal ({{$activity->course->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: '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( array_key_exists($outcome->id, $outcomes_activity) &&
        $outcomes_activity[$outcome->id] && $outcomes_activity[$outcome->id]->attempted!=0)
            {{$outcomes_activity[$outcome->id]->achieved / $outcomes_activity[$outcome->id]->attempted * 100}}
            {{-- ($outcomes_achieved[$outcome->id] / $outcomes_attempted[$outcome->id]) * 100 --}},
        {{--@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