OLAS/app/views/local/managers/shared/rubrics.blade.php

@extends('layouts.master')

@section('navigation')
        @if(Auth::user()->role==1)
            @include('local.managers.admins._navigation')
        @elseif(Auth::user()->role==2)
            @include('local.managers.sCoords._navigation')
        @elseif(Auth::user()->role==3)
            @include('local.managers.pCoords._navigation')
        @endif
@stop

@section('main')

<!-- Update Rubric Modal -->
<div class="modal fade" id="modal-confirm-update">
    <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">Update Rubric</h4>
            </div>
            <div class="modal-body">
                <p>Speak to any coordinators and/or professors in your School or
                    Program that may be affected when you update this rubric. <strong>Professors
                    that have already used this rubric will keep a copy of it as
                    they used it, not an updated one.</strong></p>
                <p>Do you want to update this rubric?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                <button id="button-update-rubric" class="btn btn-primary save">Update</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Delete Rubric Modal -->
<div class="modal fade" id="modal-confirm-delete">
    <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 Rubric</h4>
            </div>
            <div class="modal-body">
                <p>Please note: By deleting this rubric, it will no longer be available
                 to your school's or program's professors. However, professors that
                 have already used it will keep a copy in their activities. Speak to
                 any coordinators and/or professors in your School or Program that may be affected.</p>
                <p>Are you sure you want to delete this rubric?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                <button id="button-delete-rubric" class="btn btn-primary">Delete</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="row">
    <div class="col-md-12">

        <div class="panel panel-default">
            <div class="panel-heading">
                <span class="glyphicon glyphicon-triangle-bottom"></span>
                General Information
            </div>
            <div class="panel-body">
                <form>
                    <div class="form-group">
                        <label>Select a template, or create your own rubric</label>
                        <select id="select-template" class="form-control selectpicker">
                            <option data-template-id="0">Custom</option>
                            @foreach ($templates as $template)
                                @if($template->school_id==NULL &&  $template->program_id==NULL)
                                    <option
                                        data-template-id="{{ $template->id }}"
                                        data-template-program-id="{{ $template->program_id }}"
                                        data-admin="1"
                                    >
                                    {{{ $template->name }}}
                                    </option>
                                @else
                                <option
                                    data-template-id="{{ $template->id }}"
                                    data-template-program-id="{{ $template->program_id }}"
                                >
                                {{{ $template->name }}}
                                </option>
                                @endif

                            @endforeach
                        </select>
                    </div>

                    <!-- If user is admin s/he can pick which schools can view the rubric -->
                    @if(Auth::user()->role==1)
                    <div class="form-group">
                        <label>Select the School this rubric will be visible from</label>
                        <select id="select-school" class="form-control selectpicker">
                            <option data-school-id="0">All</option>
                            @foreach ($schools as $school)
                            <option data-school-id="{{ $school->id }}">
                                {{ $school->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                    <!-- If user is admin or school coordinator, s/he can pick which programs -->
                    @if(Auth::user()->role==1 || Auth::user()->role==2)
                    <div class="form-group">
                        <label>Select the Program this rubric belongs to</label>
                        <select id="select-program" class="form-control selectpicker">
                            <option data-program-id="0">All</option>
                            @foreach ($programs as $program)
                                <option
                                    data-program-id="{{ $program->id }}"
                                    data-program-program-id="{{ $program->program_id }}"
                                >
                                    {{ $program->name }}
                                </option>

                            @endforeach
                        </select>
                    </div>
                    @endif
                </form>
          
               

                <label for="">Select the lower bound for passing criteria</label>
                <form class="form-inline">
                    <div class="form-group">
                        <!-- Select percentage. If there is a rubric, select the saved value -->

                        <select id="expected_percentage" class="form-control selectpicker">
                            @for($i = 50; $i <= 100; $i++)
                                @if($i==70)
                                    <option selected="selected" value="{{ $i }}">{{ $i }}</option>
                                @else
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endif
                            @endfor
                        </select>
                        % of all students must score at least



                        
                        <!-- Select points. If there is a rubric, select the saved value -->
                        <select id="expected_points" class="form-control selectpicker">
                            @for($i = 0; $i <= 8; $i++)
                                @if($i==5)
                                    <option selected="selected" value="{{ $i }}">{{ $i }}</option>
                                @else
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endif
                            @endfor
                        </select>
                        point(s) in a criterion for it to pass.
                    </div>
                </form>
                <br>

                <form>
                    <div class="form-group">
                        <label>Select Status (you can change this later)</label>
                        <div class="radio">
                            <label>
                                <input type="radio" name="is_visible" id="is_visible0" value="0" checked>
                                This rubric is <strong>not complete</strong> yet and will not be available to professors.
                            </label>
                        </div>
                        <div class="radio">
                            <label>
                                <input type="radio" name="is_visible" id="is_visible1" value="1">
                                This rubric is <strong>complete</strong> and will be available to professors.
                            </label>
                        </div>
                    </div>
                </form>
                <div>
                    <p class="small">Note: You can hide or show this section by clicking on its heading. You may want to hide it to have more space. </p>
                </div>
            </div>
        </div>



        <div class="well">
            <form>
                <div class="form-group">
                    <label>Select a Learning Outcome</label>
                    <select id="select-outcome" class="form-control selectpicker" >
                        @foreach ($outcomes as $outcome)
                        <option data-outcome-id="{{ $outcome->id }}">{{ $outcome->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group">
                    <label>Select an Objective</label>
                    <select id="select-objective" class="form-control selectpicker" >
                        
                    </select>
                </div>

                    <div class="form-group">
                        <label>Select the Maximum Score</label>
                    <select id="max_score" class="form-control selectpicker">
                        @for($i = 1; $i <= 100; $i++)
                            @if($i==8)
                                <option selected="selected" value="{{ $i }}">{{ $i }}</option>
                            @else
                                <option value="{{ $i }}">{{ $i }}</option>
                            @endif
                        @endfor
                        
                    </select>
                    
                </div>
                <div class="form-group">
                    <label>Select the Type of Rubric</label>
                <select id="number_of_scales" class="form-control selectpicker" >
                    @for($i = 1; $i <= 20; $i++)
                    @if(8%$i == 0)
                    @if($i==1)
                    <option value="{{ $i }}">Cuantitative Rubric</option>
                    
                        @elseif($i==4)
                        <option selected="selected" value="{{ $i }}">{{ $i }}-Scale Rubric</option>
                        @else
                        <option value="{{ $i }}">{{ $i }}-Scale Rubric</option>
                    @endif
                    @endif
                    @endfor
                    
                </select>

                <div>
                @if(Auth::user()->role != '1')

                    <label>Filter Criteria</label>
                    <div class="form-group">
                        <label class="radio-inline">
                            <input type="radio" checked name="criteria-filter" id="criteria-all" value="all"> All Criteria
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="criteria-filter" id="criteria-school" value="school"> Criteria from my School
                        </label>
                        @if(Auth::user()->role == '3')
                            <label class="radio-inline">
                                <input type="radio" name="criteria-filter" id="criteria-program" value="program"> Criteria from my Program(s)
                            </label>
                        @endif
                    </div>
                @endif

                <div class="form-group">
                    <label>Select a Criterion</label><span id="updated-text" class="text-success small">  updated</span>
                    <select id="select-criterion" class="form-control selectpicker">
                    </select>
                </div>

                <button id="button-add-criterion" class="btn btn-md btn-primary center-block"> <span class="glyphicon glyphicon-plus"></span> Add Criterion to Rubric</button>
            </form>
        </div>
    </div>
</div>

<div id="rubric-container" class="row">
    <div class="col-md-12">
        <table class="table table-striped table-condensed" style="table-layout: fixed">
            <thead id="theHead"><tr><th colspan="7 "><input id="rubric-name" type="text" class="form-control input-lg" placeholder="Rubric Name"></th></tr></thead>
            <thead id = "theScaleTitles">

            </thead>
            <thead>
                <tr id ="criterion-header">
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody id = "allCriteria">
            </tbody>
        </table>

        <div id="copyright-info">
            <hr>
            <p class="small"><strong>Copyright</strong></p>
            <ul id="copyright-list" class="list-unstyled small">
            </ul>
            <hr>
        </div>

        <div class="text-center">
            <div class="btn-group" role="group" aria-label="...">
                <button id="button-create-rubric" class="btn btn-lg btn-primary save">
                    <span class="glyphicon glyphicon-floppy-disk"></span>
                    Create
                </button>
                <button id="button-confirm-update-rubric" data-toggle="modal" data-target="#modal-confirm-update" class="btn btn-lg btn-primary">
                    <span class="glyphicon glyphicon-pencil"></span>
                    Update
                </button>
                <button id="button-confirm-delete-rubric" data-toggle="modal" data-target="#modal-confirm-delete" class="btn btn-lg btn-primary">
                    <span class="glyphicon glyphicon-remove"></span>
                    Delete
                </button>
                <button id="button-print-rubric" class="btn btn-lg btn-primary"><span class="glyphicon glyphicon-print"></span> Print <span class="small">(saved version)</span></button>
            </div>
        </div>
    </div>
</div>
<script>

    </script>
@stop

@section('included-js')

<!-- jQuery Sortable Tables -->
<script src="{{ asset('vendor/jQuerySortable/jquery-sortable-min.js') }}"></script>

<!-- X-Editable js -->
<script src="{{ asset('vendor/xeditable/bootstrap-editable.min.js') }}"></script>

@stop

@section('javascript')
$('#select-outcome').on('change',function(){
    fetchObjective(this);
})
// --------------------------------------------------------------------------
// Functions
// --------------------------------------------------------------------------

function fetchObjective(outcome){
    $.post(
        "{{URL::route('fetchObjectivesForSelect')}}",
        {
            outcomeID:$(outcome).find(':selected').data('outcome-id'),
        },
        function(data){
            options = '';
            for(objective_index in data){
                options += '<option value = "'+data[objective_index].objective_id+'">'+data[objective_index].text+'</option>';

            }
            $('#select-objective').html(options);
            $('#select-objective').selectpicker('refresh');
            fetchCriteria($('#select-outcome'), $('#select-objective'));

        }, 'json',
    );

}
// Fetch criteria associated to a specific learning outcome 

function fetchCriteria(outcome, objective)
{
    amount_of_scales = parseInt($('#number_of_scales').find(':selected').val());
            
    maximum = parseInt($('#max_score').find(":selected").val());
    $.post
    (
        "{{ URL::route('fetchCriteria') }}",
        {
            outcome_id: outcome.find(':selected').data('outcome-id'),
            objective_id: objective.find(':selected').val(),
            num_scales: amount_of_scales,
            maximum: maximum,
            filter: $('input[name=criteria-filter]:checked').val()
        },
        function(data)
        {
            $('#select-criterion').empty();

            // Append criteria
            data.forEach( function (arrayItem)
            {
                $('#select-criterion')
                    .append('<option data-criterion-id="'+arrayItem.id+'" >'+arrayItem.name+'</option>');
            });

            // If there are no criteria assigned to the selected outcome, disable the
            // input and the button used to add criteria.
            if(!$('#select-criterion').children().length)
            {

                $('#select-criterion').prop('disabled', true);
                $('#button-add-criterion').prop('disabled', true);
            }

            // Otherwise, enable both the input and the button
            else
            {
                $('#select-criterion').prop('disabled', false);
                $('#button-add-criterion').prop('disabled', false);
            }

            $('#updated-text').fadeIn('slow').fadeOut('slow');

            refreshSelects();


        }
    );
}

// Add a new criterion to the rubric
function addCriterion()
{

    // Show the rubric container
    if(!$('tbody').children().length)
    {
        $('#rubric-container').show();
    }

    // Get the selected criterion's id
    var id= parseInt($('#select-criterion').find(':selected').data('criterion-id'));

    // Check for duplicates
    var duplicates=false;
    numberOfScale = $('#number_of_scales').find(':selected').val();
    $('tbody tr').each(function()
    {
        if ($(this).data('criterion-id') == id)
        {
            duplicates=true;
        }
    });

    // If there are any, display an error
    if(duplicates)
    {
        $('#js-error-row').show();
        $('#js-error-row').find('#error-message').text('Error: The selected criterion was already added.');
        return;
    }

    // Otherwise, hide the error container
    else
    {
        $('#js-error-row').hide();
    }


    // Fetch information of the criterion selected
    $.post
    (
        "{{ URL::route('fetchCriterionWithTemplate') }}",
        { id: id,
         },
        function(data)
        {
            // Append the fetched data
            copyright = null;
            notes = null;
            if(data.criterion.copyright){
                copyright = data.criterion.copyright;
            }
            if(data.criterion.notes){
                notes = data.criterion.notes;
            }
            
            
            var str ='<tr data-criterion-id="'+data.criterion.id+'" data-criterion-copyright="'+copyright+'" data-criterion-notes="'+notes+'" data-outcomes = "'+data.outcomes+'"><th><span class="glyphicon glyphicon-move"></span></th><td>';

            var subcriteria = '';
            if(data.criterion.subcriteria){

                var subcriteria_array = JSON.parse(data.criterion.subcriteria);
                subcriteria = '<ul class="subcriteria list-unstyled">';
                subcriteria_array.forEach(function (value) {
                    subcriteria += '<li>'+value+'</li>';
                });
                subcriteria += '</ul>';

            }

            if(notes)
            {
                str+='<span><em data-toggle="tooltip" data-placement="top" title="'+notes+'">'+data.criterion.name+'</em></span><sup></sup>'+subcriteria+'</td>';
            }
            else
            {
                str+='<span>'+data.criterion.name+'</span><sup></sup>'+subcriteria+'</td>';
            }
            numberOfScale = $('#number_of_scales').find(':selected').val();
            
            for(i=0; i<numberOfScale; i++){
                str+='<td>'+data.scales[i].description+'</td>';
                
          
            }
           
        
        str+= '<td>'+data.outcomes+'</td>'
        

            str +='<th><span class="glyphicon glyphicon-remove icon-btn" aria-hidden="true"></span></th></tr>';

            $('table tbody').append(str);

            // Build copyright list
            buildCopyrightList();

            // Enable X-Edtable on this new row
            $('.editable').editable({
                unsavedclass: null,
                rows: 4
            });

            // Turn on tooltips again (because content is dynamic)
            $('[data-toggle="tooltip"]').tooltip();

            // Sortable rows
            $('.table').sortable({
                handle: 'span.glyphicon.glyphicon-move',
                containerSelector: 'table',
                itemPath: '> tbody',
                itemSelector: 'tr',
                placeholder: '<tr class="placeholder"><th><span class="glyphicon glyphicon-arrow-right"></span></th></tr>'
            });
        },
        'json',
    );
}

// Fetch single criterion
function fetchCriterion(criterion)
{
    $.post
    (
        "{{ URL::route('fetchCriterion') }}",
        { id: outcome.find(':selected').data('outcome-id')},
        function(data)
        {
            $('#select-criterion').empty();

            data.forEach( function (arrayItem)
            {
                $('#select-criterion')
                    .append('<option data-criterion-id="'+arrayItem.id+'" >'+arrayItem.name+'</option>');
            });

            $('#select-criterion').append('<option data-criterion-id="0">Custom</option>');

            refreshSelects();

        }
    );
}

// Build list from copyright info in rubric
function buildCopyrightList()
{
    // Empty the copyright list
    $('#copyright-list').empty();

    $('tbody tr').each(function( index )
    {
        var criterion = $(this);
        // If there's copyright info
        if(criterion.data('criterion-copyright')!=null){
            var copyright = criterion.data('criterion-copyright');
            if($('#copyright-list li').length>0)
            {
                var found = false;
                $('#copyright-list li').each(function()
                {
                    // If found, give the string its number
                    if(copyright==$(this).find('span').text())
                    {

                        copyrightNumber = Number.parseInt($(this).find('sup').text());

                        console.log('a: '+copyrightNumber);

                        criterion.children('td:nth-child(2)').find('sup').text(copyrightNumber);
                        found =true;

                        //to break
                        return false;
                    }
                });

                // Otherwise, give it the next number and append a new item to the
                // list
                if(!found)
                {
                    var copyrightNumber = $('#copyright-list li').length+1;

                    console.log('b: '+copyrightNumber);
                    console.log(criterion.children('td:nth-child(2)').find('sup').length);

                    criterion.children('td:nth-child(2)').find('sup').text(copyrightNumber);
                    $('#copyright-list').append('<li><sup>'+copyrightNumber+' </sup><span>'+copyright+'<span></li>');
                }
            }
            else
            {
                criterion.children('td:nth-child(2)').find('sup').text('1');
                $('#copyright-list').append('<li><sup>1 </sup><span>'+copyright+'<span></li>');
            }
        }
    });

    if($('#copyright-info li').length>0)
    {
    $('#copyright-info').show();
    }
    else
    {
       $('#copyright-info').hide();
}}
    /*        if(criterion.data('criterion-copyright')!=null)
        {
            var copyright = criterion.data('criterion-copyright');

            // If there is anything in the copyright list
            if($('#copyright-list li').length>0)
            {
                // Check copyright list for the same copyright text
                var found = false;
                $('#copyright-list li').each(function()
                {
                    // If found, give the string its number
                    if(copyright==$(this).find('span').text())
                    {

                        copyrightNumber = Number.parseInt($(this).find('sup').text());

                        console.log('a: '+copyrightNumber);

                        criterion.children('td:nth-child(2)').find('sup').text(copyrightNumber);
                        found =true;

                        //to break
                        return false;
                    }
                });

                // Otherwise, give it the next number and append a new item to the
                // list
                if(!found)
                {
                    var copyrightNumber = $('#copyright-list li').length+1;

                    console.log('b: '+copyrightNumber);
                    console.log(criterion.children('td:nth-child(2)').find('sup').length);

                    criterion.children('td:nth-child(2)').find('sup').text(copyrightNumber);
                    $('#copyright-list').append('<li><sup>'+copyrightNumber+' </sup><span>'+copyright+'<span></li>');
                }
            }
            // Otherwise, give it number 1 and append it
            else
            {
                criterion.children('td:nth-child(2)').find('sup').text('1');
                $('#copyright-list').append('<li><sup>1 </sup><span>'+copyright+'<span></li>');
            }
        }
        });

        if($('#copyright-info li').length>0)
        {
            $('#copyright-info').show();
        }
        else
        {
            $('#copyright-info').hide();
        }
        }
    */
function refreshSelects()
{
    $('#select-template').selectpicker('refresh');
    $('#select-school').selectpicker('refresh');
    $('#select-program').selectpicker('refresh');
    $('#select-outcome').selectpicker('refresh');
    $('#select-criterion').selectpicker('refresh');
    $('#expected_percentage').selectpicker('refresh');
    $('#expected_points').selectpicker('refresh');
    $('#number_of_scales').selectpicker('refresh');
    $('#select-objective').selectpicker('refresh');
}

// Fetch programs associated to a specific school
function fetchPrograms(school)
{
    $.ajax({
        type: 'POST',
        url: "{{ URL::action('ProgramsController@fetch') }}",
        data: { id: school.find(':selected').data('school-id')},
        success: function(data)
        {
            $('#select-program').empty();
            $('#select-program').append('<option data-program-id="0">All</option>');

            data.forEach( function (program)
            {
                $('#select-program')
                    .append('<option data-program-id="'+program.id+'" >'+program.name+'</option>');
            });
        },
        async:false
    });

    if($('#select-school').find(':selected').data('school-id')!=0)
        $('#select-program').prop('disabled', false);
    else
        $('#select-program').prop('disabled', true);

    refreshSelects();

}

// Load a template. This function is different from the one for professors
function loadTemplate()
{
    $.post
    (
        "{{ URL::to('loadTemplate') }}",
        { id: $('#select-template').find(':selected').data('template-id')},
        function(data)
        {
            // Show the container and empty all rows
            $('#rubric-container').show();
            $('tbody').empty();

            //Set the name of the rubric
            $('#rubric-name').val(data.template.name);

            // Set school id to 0, then to the saved value if it exists
            $('#select-school option[data-school-id="0"]').prop('selected', true);
            $('#select-school option[data-school-id="'+data.template.school_id+'"]').prop('selected', true);

            // Fetch programs associated to that school
            fetchPrograms($('#select-school'));

            // Set program id to 0, then to the saved value if it exists
            $('#select-program option[data-program-id="0"]').prop('selected', true);
            $('#select-program option[data-program-id="'+data.template.program_id+'"]').prop('selected', true);

            // Set expected values
            console.log(data.template.expected_percentage);

            console.log(data.template.expected_points);
            console.log(data.template.max_score);
        
        $('#max_score').val(data.template.max_score);
          
        $('#max_score').trigger("change");
            
            $('#expected_percentage').val(data.template.expected_percentage);
            
            $('#expected_points').val(data.template.expected_points);
            
            $('#number_of_scales').val(data.template.num_scales);
            refreshSelects();
            changeTable();
            // Set visibility
            var is_visible = data.template.is_visible;
            if(is_visible)
            {
                $('#is_visible0').prop('checked', false);
                $('#is_visible1').prop('checked', true);
            }
            else
            {
                $('#is_visible1').prop('checked', false);
                $('#is_visible0').prop('checked', true);
            }


            // Set the contents of the rubric
            var temp_criterion = data.criterion;
            for(temp_c in temp_criterion){
                var str = '<tr data-criterion-id="'+temp_criterion[temp_c].criterion_id+'" data-criterion-copyright="'+temp_criterion[temp_c].copyright+'" data-criterion-notes="'+temp_criterion[temp_c].notes+'" data-outcomes = "'+temp_criterion[temp_c].outcomes+'"><th><span class="glyphicon glyphicon-move"></span></th><td>';
                current_criterion = temp_criterion[temp_c]
                var subcriteria ='';
                if(current_criterion.subcriteria){
                    var subcriteria_array = JSON.parse(current_criterion.subcriteria);
                    subcriteria = '<ul class="subcriteria list-unstyled">';
                    subcriteria_array.forEach(function (value) {
                        subcriteria += '<li>'+value+'</li>';
                    });
                    subcriteria += '</ul>';
                }
                if(current_criterion.notes)
                {
                    str+='<span><em data-toggle="tooltip" data-placement="top" title="'+current_criterion.notes+'">'+current_criterion.name+'</em></span><sup></sup>'+subcriteria;
                }
                else
                {
                    str+='<span>'+current_criterion.name+'</span><sup></sup>'+subcriteria;
                }
                str+= '</td>';
                
                for(scaleIndex in current_criterion.scales){

                    scale = current_criterion.scales[scaleIndex];

                    str+='<td>'+scale.description+'</td>';

                }
                str+= '<td>'+current_criterion.outcomes+'</td>'
  
                str+='<th><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></th></tr>';

    $('table tbody').append(str);

    

    

                // Enable X-Edtable on this new row
                $('.editable').editable({
                    unsavedclass: null,
                    rows: 4
                });

                // Turn on tooltips again (because content is dynamic)
                $('[data-toggle="tooltip"]').tooltip();


                refreshSelects();
            

            
            }

            /*
            var contents = JSON.parse(data.contents);
            contents.forEach(function (data)
            {
                // Append the fetched data
                var str ='<tr data-criterion-id="'+data.id+'" data-criterion-copyright="'+data.copyright+'" data-criterion-notes="'+data.notes+'"><th><span class="glyphicon glyphicon-move"></span></th><td>';


                var subcriteria = '';
                if(data.subcriteria){

                    var subcriteria_array = data.subcriteria;
                    subcriteria = '<ul class="subcriteria list-unstyled">';
                    subcriteria_array.forEach(function (value) {
                        subcriteria += '<li>'+value+'</li>';
                    });
                    subcriteria += '</ul>';

                }

                if(data.notes)
                {
                    str+='<span><em data-toggle="tooltip" data-placement="top" title="'+data.notes+'">'+data.name+'</em></span><sup></sup>'+subcriteria;
                }
                else
                {
                    str+='<span>'+data.name+'</span><sup></sup>'+subcriteria;
                }

                str+='</td><td class="editable" data-type="textarea">'+data.description12+'</td>'
                    +'<td class="editable" data-type="textarea">'+data.description34+'</td>'
                    +'<td class="editable" data-type="textarea">'+data.description56+'</td>'
                    +'<td class="editable" data-type="textarea">'+data.description78+'</td>'
                    +'<th><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></th></tr>';

                $('table tbody').append(str);

                // Build copyright list
                buildCopyrightList();

                // Enable X-Edtable on this new row
                $('.editable').editable({
                    unsavedclass: null,
                    rows: 4
                });

                // Turn on tooltips again (because content is dynamic)
                $('[data-toggle="tooltip"]').tooltip();


                refreshSelects();
            }); */

            // Sortable rows
            $('.table').sortable({
                handle: 'span.glyphicon.glyphicon-move',
                containerSelector: 'table',
                itemPath: '> tbody',
                itemSelector: 'tr',
                placeholder: '<tr class="placeholder"><th><span class="glyphicon glyphicon-arrow-right"></span></th></tr>'
            });

            // Build Copyright List
            buildCopyrightList();

            $('.editable').each(function (index){
                $(this).text(data.titles[index].text);
            })
            
            var selected = $('#select-template').find(':selected');
            var programs = {{ json_encode(Auth::user()->programs->lists('id')) }};
        
            var template_program = selected.data('template-program-id');
        
        if(
            {{ Auth::user()->role }}==1
            || ({{ Auth::user()->role }}==2 && selected.data('admin')!=1)
            || ({{ Auth::user()->role }}==3
                && programs.includes(selected.data('template-program-id'))

                && selected.data('admin')!=1
            )
        )
        {
            $('#button-confirm-delete-rubric').prop('disabled', false);
            $('#button-confirm-update-rubric').prop('disabled', false);
        }
        else
        {
            // Disable update and edit
            $('#button-confirm-delete-rubric').prop('disabled', true);
            $('#button-confirm-update-rubric').prop('disabled', true);
        }

        // Enable print button
        $('#button-print-rubric').prop('disabled', false);

        fetchCriteria($('#select-outcome'), $('#select-objective'));


        }, 
        'json',
    );
}

// Checks whether the user wants to save a rubric with a name that already exists
function nameExists()
{
    var duplicates = false;
    $('#select-template option').each(function()
    {
        var optionName = $(this).text().trim();
        if($('#rubric-name').val().trim()===optionName)
        {
            duplicates = true;
        }
    });

    refreshSelects();

    return duplicates;
}

//Enable disable program select
function toggleProgramSelect(school)
{
    if(school.find(':selected').data('school-id') <1)
    {
        $('#select-program option[data-program-id="0"]').prop('selected', true);
        $('#select-program').prop('disabled', true);
    }
    else
    {
        fetchPrograms(school);
        $('#select-program').prop('disabled', false);
    }

    refreshSelects();

}

fetchObjective($('#select-outcome'));
// --------------------------------------------------------------------------
// Events
// --------------------------------------------------------------------------

// Toggle visibility for accordion panels
$('.panel-heading').on('click', function()
{
    if($(this).find('.glyphicon').hasClass('glyphicon-triangle-right'))
    {
        $(this).find('.glyphicon').removeClass('glyphicon-triangle-right');
        $(this).find('.glyphicon').addClass('glyphicon-triangle-bottom');
    }
    else if($(this).find('.glyphicon').hasClass('glyphicon-triangle-bottom'))
    {
        $(this).find('.glyphicon').removeClass('glyphicon-triangle-bottom');
        $(this).find('.glyphicon').addClass('glyphicon-triangle-right');
    }

    $(this).siblings('.panel-body').stop().slideToggle();
});

// Fetch criteria everytime something changes 
$('#select-objective').on('change', function(){
    fetchCriteria($('#select-outcome'), $('#select-objective'));
})

$("#number_of_scales").on('change', function(){
    fetchCriteria($('#select-outcome'), $('#select-objective'));
})


// When trying to change the template, ask the user to confirm and reset the
// rubric if s/he does
$('#select-template').on('change', function()
{
    // If changing to custom template, reset
    if($('#select-template').find(':selected').data('template-id')=='0')
    {
        $('#rubric-container').hide();
        $('#rubric-name').val('');
        $('tbody').empty();

        // Disable delete, update and print buttons
        $('#button-confirm-delete-rubric').prop('disabled', true);
        $('#button-confirm-update-rubric').prop('disabled', true);
        $('#button-print-rubric').prop('disabled', true);
    }

    // Otherwise, load the selected template
    else
    {
        loadTemplate();

        //If user is admin, or the templates id matches user's, or the template
        // id's school matches user, allow editing
        /*var selected = $('#select-template').find(':selected');
        var programs = {{ json_encode(Auth::user()->programs->lists('id')) }};
        
        var template_program = selected.data('template-program-id');
        var dataset = selected.dataSet.templateProgramId;
        

        if(
            {{ Auth::user()->role }}==1
            || ({{ Auth::user()->role }}==2 && selected.data('admin')!=1)
            || ({{ Auth::user()->role }}==3
                && programs.includes(selected.data('template-program-id'))

                && selected.data('admin')!=1
            )
        )
        {
            $('#button-confirm-delete-rubric').prop('disabled', false);
            $('#button-confirm-update-rubric').prop('disabled', false);
        }
        else
        {
            // Disable update and edit
            $('#button-confirm-delete-rubric').prop('disabled', true);
            $('#button-confirm-update-rubric').prop('disabled', true);
        }

        // Enable print button
        $('#button-print-rubric').prop('disabled', false);
*/
    }

});

function changeTable(){
    
 
            amount_of_scales = parseInt($('#number_of_scales').find(':selected').val());
            counter2 = 0;
            maximum = parseInt($('#max_score').find(":selected").val());
            
           
            newScaleHeaders = '<th></th><th>Criterion</th>';
            editableTitles = '<th></th><th></th>';
            counter = 0;
            division = maximum/amount_of_scales;
            if(amount_of_scales==1){
                newScaleHeaders+= "<th>Score (1 - "+maximum+")</th>";
                editableTitles += "<th  class = 'editable' data-type = 'textarea'>Click to edit Title </th>"
            }
            else if(maximum!= amount_of_scales){
            while(counter <amount_of_scales){
                
                minimumScore = 1+(counter*division);
                maximumScore = (1+counter)*division;
                newScaleHeaders+= "<th>Scale "+ (counter +1) + " ("+minimumScore+" - "+maximumScore+")</th>";
                editableTitles+="<th  class = 'editable' data-type = 'textarea'>Click to edit Title "+(counter+1)+"</th>"
                counter++;
            }
            }else{
                while(counter <amount_of_scales){
                
       
                newScaleHeaders+= "<th>Scale "+ (counter +1) + " </th>";
                editableTitles+="<th  class = 'editable' data-type = 'textarea'>Click to edit Title "+(counter+1)+"</th>"
              
                counter++;
            }
            }
            newScaleHeaders += '<th>Outcomes</th><th></th>';
            editableTitles += '<th></th><th></th>';


            $('#theScaleTitles').html(editableTitles);
            $("#criterion-header").html(newScaleHeaders);
            $('#allCriteria').html(' ');
}


// When a school changes, update its programs. If all is selected, disable
$('#select-school').on('change', function()
{
    toggleProgramSelect($(this));
});

$('#max_score').on('change', function(){
    var max = parseInt($('#max_score').find(':selected').val());
    var stringToScales = "<option value= '1'>Cuantitative Rubric </option>";
    selectedValue = 1;
    valueBefore = 0;
    
    for(i=2; i<=20; i++){
        if(max%i==0){
        stringToScales += "<option value= '"+i+"'>"+i+"-Scale Rubric</option>";
        selectedValue = i - valueBefore;
        valueBefore = i;
        }
    }
    $('#number_of_scales').html(stringToScales);

    $('#number_of_scales').selectpicker('refresh');
    $('#number_of_scales').val(selectedValue);
    $('#number_of_scales').selectpicker('refresh');
    var expected_points = Math.floor(max *0.7);
    var expected_points_html = '';
    for(i=1; i<max; i++){
        expected_points_html += '<option value="'+i+'"> '+i+'</option>';
    }
    $('#expected_points').html(expected_points_html);
    refreshSelects();
    $('#expected_points').val(expected_points);
    refreshSelects();
    changeTable();
    fetchCriteria($('#select-outcome'), $('#select-objective'))
})
$('#number_of_scales').on('change', function(){
    changeTable();
    $('#rubric-container').hide();
    $('#rubric-name').val('');
    $('tbody').empty();

})
// When a learning outcome changes, update its criteria
/*$('#select-outcome, input[name=criteria-filter]').on('change', function()
{
    fetchCriteria($('#select-outcome'));
});
*/
// When the add button is clicked
$('#button-add-criterion').on('click', function(e)
{
    //Prevent page refresh
    e.preventDefault();

    //Add new criterion
    addCriterion();
});

// When the create or update buttons are clicked (.save)
$('.save').on('click', function(e)
{
    //Prevent page refresh
    e.preventDefault();

    // Empty field validation
    var emptyFields=false;

    $('#allCriteria').children('td').each(function()
    {
        if (($(this).text() == "" || $(this).text() == "Empty") && !($(this).hasClass('nullable')) )
        {
            emptyFields=true;
        }
    });


    // If any fields are empty, display error
    if(emptyFields || $.trim($('#rubric-name').val())=='')
    {
        $('#js-error-row').show();
        $('#js-error-row').find('#error-message').text('Error: Please fill all the fields. Make sure your rubric has a name and all scale scores are filled.');
        return;
    }
    else
    {
            $('#js-error-row').hide();
    }

    // Check whether a rubric with the written name already exists
    if($(this).attr('id')=='button-create-rubric' && nameExists())
    {
        $('#js-error-row').show();
        $('#js-error-row').find('#error-message').text('Error: A template with that name already exists.');
        return;
    }
    else
    {
            $('#js-error-row').hide();
    }

    var criterionObject = new Object();
    var criteriaArray = new Array();

    var criteria = [];
    var titles = [];

    
    var amount_of_scales =parseInt($('#number_of_scales').find(':selected').val())+2;
    var max = parseInt($('#max_score').find(':selected').val());
    // For each criterion in the rubric, get its value and put it into an array
    $('tbody tr').each(function( index )
    {
            criteria.push($(this).data('criterion-id'));
            
            
            

            

            
           

    });

    $('.editable').each(function(index){
        titles.push($(this).text());
    })


    //console.log('school', $('#select-school').find(':selected').data('school-id') );
    //console.log('program', $('#select-program').find(':selected').data('program-id') );

    if($(this).attr('id')=='button-create-rubric')
    {
        // Create
        $.post
        (
            "{{ URL::to('saveTemplate') }}",
            {
                name: $('#rubric-name').val(),
                
                school_id: $('#select-school').find(':selected').data('school-id'),
                program_id: $('#select-program').find(':selected').data('program-id'),
                expected_percentage: $('#expected_percentage').find(':selected').val(),
                expected_points: $('#expected_points').find(':selected').val(),
                is_visible: $('input[name=is_visible]:checked').val(),
                criteria : criteria,
                //scales: scales,
                max_score : max,
                /*copyright : copyright,
                notes :notes*/
                titles: titles

            },
            function(data)
            {
                location.reload(true);
            }
        );
    }
    else
    {
        console.log('school', $('#select-school').find(':selected').data('school-id') );
        console.log('program', $('#select-program').find(':selected').data('program-id') );

        // Update database
        $.post
        (
            "{{ URL::to('updateTemplate') }}",
            {
                id: $('#select-template').find(':selected').data('template-id'),
                name: $('#rubric-name').val(),
                
                school_id: $('#select-school').find(':selected').data('school-id'),
                program_id: $('#select-program').find(':selected').data('program-id'),
                expected_percentage: $('#expected_percentage').find(':selected').val(),
                expected_points: $('#expected_points').find(':selected').val(),
                is_visible: $('input[name=is_visible]:checked').val(),
                criteria : criteria,
                //scales: scales,
                max_score : max,
                /*copyright : copyright,
                notes :notes*/
                titles: titles
            },
            function(data)
            {
                location.reload(true);
            }
        );
    }

});

// When the confirm  delete button is clicked
$('#button-delete-rubric').on('click', function(e)
{
    $('#modal-confirm-delete').modal('hide');

    // Delete from database
    $.post
    (
        "{{ URL::to('deleteTemplate') }}",
        {
            id: $('#select-template').find(':selected').data('template-id')
        },
        function(data)
        {
            location.reload();
        }
    );
});

// Remove a criterion and hide the table if it was the only one
$('table').on('click', 'span.glyphicon-remove', function(e)
{
    $(this).closest('tr').remove();

    if(!$('tbody').children().length)
    {
        $('#rubric-container').hide();
    }

    buildCopyrightList();
});

// When print button is clicked, redirect to print page
$('#button-print-rubric').on('click', function(e)
{
    e.preventDefault();
    window.location = "printRubric/"+$('#select-template').find(':selected').data('template-id');

});

// --------------------------------------------------------------------------
// Page load
// --------------------------------------------------------------------------
$('#updated-text').hide();

// Enable/disable program selection depending on school selection if user is
// admin
if({{Auth::user()->role}}==1)
    toggleProgramSelect($('#select-school'));

// Fetch criteria of first outcome
fetchCriteria($('#select-outcome'), $('#select-objective'));
changeTable();

// Hide table
$('#rubric-container').hide();

// Disable Update and Delete Buttons by default
$('#button-confirm-update-rubric').prop('disabled', true);
$('#button-confirm-delete-rubric').prop('disabled', true);
$('#button-print-rubric').prop('disabled', true);


// Sortable rows
$('.table').sortable({
    handle: 'span.glyphicon.glyphicon-move',
    containerSelector: 'table',
    itemPath: '> tbody',
    itemSelector: 'tr',
    placeholder: '<tr class="placeholder"><th><span class="glyphicon glyphicon-arrow-right"></span></th></tr>'
});


@stop