OLAS/app/views/local/managers/shared/rubrics_new.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_dentro 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
                            @foreach ($templates_fuera 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"
                                        data-unmatch-criteria="1"

                                    >
                                    ## {{{ $template->name }}}
                                    </option>
                                @else
                                <option
                                    data-template-id="{{ $template->id }}"
                                    data-template-program-id="{{ $template->program_id }}"
                                    data-unmatch-criteria="1"
                                >
                                ## {{{ $template->name }}}
                                </option>
                                @endif

                            @endforeach
                        </select>
					<span style="color: red;">Rubrics with "##" at the beginning contain criteria that are not associated with your program or school. You will not be able to use them until your criteria is matched with your program or school.
                    </span>
					</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>

<div class="modal fade" id="rubric-modal">
    <div class="modal-dialog modal-md">
      <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 text-center" id ="modal-title-rubric">You are adding criteria to your program</h4>
        </div>
          <div class="modal-body" id ="modal-body-rubric">
              
  
  
 
                 
                  
                  
          </div>
        <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" id ="saveButton" data-button-id = '' value="Save" type="button" onclick = "saveTemplate()" >Save</button>

        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div>
<script>

    </script>
@stop

@section('included-js')

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

    

    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());
    })

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

    if(button_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);
            }
        );
    }

}
    </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();
		console.log(data);
            // Append criteria
            data.forEach( function (arrayItem)
            {
                objectives = JSON.stringify(arrayItem.objectives);
                $('#select-criterion')
                    .append('<option data-criterion-id="'+arrayItem.id+'" data-program-ids = '+"'"+arrayItem.program_ids+"'"+' data-assoc-objectives= '+"'"+objectives+"'"+'>'+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'));
    var program_ids = $('#select-criterion').find(':selected').data('program-ids');
    var objectives = $('#select-criterion').find(':selected').data('assoc-objectives');
    // 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;
            }
            objectives = JSON.stringify(objectives);
            var str ='<tr data-criterion-name ="'+data.criterion.name+'" data-program-ids = "['+program_ids+']" data-assoc-objectives = '+"'"+objectives+"'"+' 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;
               console.log(temp_criterion);
            for(temp_c in temp_criterion){
                current_criterion = temp_criterion[temp_c]
               console.log(current_criterion.program_ids);
                objectives = JSON.stringify(current_criterion.objectives);
                //var str = '<tr data-assoc-objectives= '+"'"+objectives+"'"+' data-program_ids = "'+current_criterion.program_ids+'" data-criterion-name = "'+current_criterion.name+'" 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>';
                var str = "<tr data-assoc-objectives= "+"'"+objectives+"'"+" data-program_ids = '"+current_criterion.program_ids+"' data-criterion-name = '"+current_criterion.name+"' 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>";
                console.log(str);

                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>';
                console.log(str);

    $('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);
        }
        if($('#select-template').find(':selected').data('unmatch-criteria')=='1')
        {
        	$('#button-confirm-delete-rubric').prop('disabled', true);
	        $('#button-confirm-update-rubric').prop('disabled', true);
  	        $('#button-create-rubric').prop('disabled', true);
 
        }
        else
        {
   	        $('#button-create-rubric').prop('disabled', false);
       
        }

        // 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();
    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();
    }
    program_id = $('#select-program').find(':selected').data('program-id')
    if(program_id == 0){
        $('#modal-title-rubric').html("All criteria will be associated with this school's programs");
        htmlString = "<h5>The following criteria and objectives will be matched with all programs</h5>"
        htmlString += "<ol style='list-style-position: inside'>"

        $('tbody tr').each(function( index )
        {
            objectives = $(this).data('assoc-objectives');
           
            htmlString += "<li>" +$(this).data('criterion-name');
            htmlString += "<br><h5>This criterion is associated with these objectives</h5>"
            htmlString +="<ul style='padding-left: 5%; list-style-position: inside'>"
            for(index in objectives){
                
                objective_string = objectives[index];
                htmlString +="<li>"+objective_string+"</li>";

            }
            htmlString += "</ul>"
           
            htmlString +="</li>" 
            htmlString+= "<br>";
        });
        htmlString +='</ol>';
        $("#modal-body-rubric").html(htmlString);


    }
    else{
        $('#modal-title-rubric').html('Some criteria will be associated with this program');
        $('tbody tr').each(function( index )
        {
            htmlString = '';
            console.log($(this));

            program_ids = $(this).data('program_ids')
            if(!program_ids.includes(program_id) ){
                title = "<h6>The following criteria and objectives will be matched with this program</h6>"
                htmlString += "<ol style='list-style-position: inside'>"
        
                objectives = $(this).data('assoc-objectives');
            //objectives = objectives.split(',');
            htmlString += "<li>" +$(this).data('criterion-name');
            htmlString += "<br><h6>This criterion is associated with these objectives</h6>"
            htmlString +="<ul style='padding-left: 5%; list-style-position: inside'>"
            for(index in objectives){
                
                objective_string = objectives[index];
                htmlString +="<li>"+objective_string+"</li>";

            }
            htmlString += "</ul>"
           
            htmlString +="</li>" 
            htmlString+= "<br>";

            }
            if(htmlString != ''){
                $("#modal-body-rubric").html(title);

                $("#modal-body-rubric").append(htmlString);

            }
        });
    }
    
    $('#rubric-modal').modal('toggle');
    $('#saveButton').data('button-id',$(this).attr('id'));


});

// 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