OLAS/app/views/global/view-objectives-criteria.bl...

@extends('layouts.master')

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

@section('main')
    {{-- TODO: look where to place this script.
          if placed inside .ready() or before it,
            an error that the function is not defined occurs. --}}
    {{-- TODO: no reconoce acentos --}}
    <script type="text/javascript">
        function filterObjectives() {
            // Declare variables
            var input, filter, div, li, i, objectiveText;
            input = document.getElementById('userInput');
            filter = input.value.toUpperCase();
            div = document.getElementById("list");
            li = div.getElementsByTagName('li');

            // Loop through all list items, and hide those who don't match the search query
            for (i = 0; i < li.length; i++) {
                objectiveText = li[i].textContent;
                if (objectiveText.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";
                }
            }
        }
    </script>

    <div class="row">
        <div class="col-md-3">
            <input class="form-control" type="text" id="userInput" onkeyup="filterObjectives()"
                placeholder="Search for Learning Outcomes..">
            <div class="list-group" id='list'>
                @foreach ($outcomes as $outcome)
                    <li data-outcome-id="{{ $outcome->id }}" class="list-group-item">{{ $outcome->name }}</li>
                @endforeach
            </div>
        </div>

        <div class="col-md-9">
            <div id="objective-display" class="panel panel-default">
                <div class="panel-heading">
                    <h4 class=" panel-title" style="cursor:auto!important;">
                    </h4>
                </div>
                <div class="panel-body">
                    <p class="objective-definition "></p>

                    <div class="table-responsive table-responsive-0">
                        <table class="table table-striped table-condensed datatable">
                            <thead id="theHead">
                                <th>Objective</th>
                                <th>Program</th>
                                <th>Match to Criteria</th>
                            </thead>
                            <tfoot>

                            </tfoot>
                            <tbody id="table_objectives">
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-md-9">
            <div class="no-objective alert alert-info">
                <p>Select a Learning Objective to view its information</p>
            </div>
        </div>

    </div>

    <div id="match_criteria" class="modal fade" tabindex="-1" data-objective-id="0">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id = 'match_criteria_title'></h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body" id = "match_criteria_body">
                    <p>The following criteria appear based on objective's programs and your available programs</p>

                    <div class ='form-group col-md-12'>
                        <select id="match_criteria_program" class ='form-control selectpicker select_program' onchange="changeCriteriaDisplayed('#match_criteria_program')">
                            
                        </select>
                    </div>
                    <hr>

                    <div id="program_objectives">

                    </div>

                




                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#match_criteria').data('objective-id', '0');">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick = 'matchCriteriaToObjective("#match_criteria")'>Save</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            // --------------------------------------------------------------------------
            // Page load
            // --------------------------------------------------------------------------

            // Hide accordion panel contents by default
            $('.panel-group .panel-body').hide(); -

            $('#objective-display').parent().hide();

            // --------------------------------------------------------------------------
            // Functions
            // --------------------------------------------------------------------------
            /*

              */

            
            function fetchObjectives(li) {
                {

                    var id = $(li).data('outcome-id');

                    $.post(
                        "{{ URL::action('Objective2Controller@fetchObjectivesForOutcome') }}", {
                            id: id,
                        },
                        function(json) {

                            // Retrieve datatable instance
                            //var table = $('.table-responsive-0').;

                            var name = $(li).html();
                            //var definition = json.objective.program.name;
                            //var criteria = json.objective.criteria;

                            $('#objective-display').parent().show();
                            $('.no-objective').parent().hide();

                            //Display title and definition
                            $('#objective-display .panel-title').html(name);
                            // $('#objective-display .objective-definition').html(definition);

                            //Empty table
                            $('#table_objectives').empty();

                            $.each(json, function(ind2, objective) {
                                tr = $("<tr>");

                                //objectives
                                td_text = $("<td>",{
                                    'id':"objective-"+objective.id
                                }).html(objective.text);
                                 //programs
                                td_programs = $("<td>");
                                ol = $("<ol>");

                                $.each(objective.programs, function(ind, prog) {
                                    li = $("<li>").html(prog.name);
                                    li.appendTo(ol);
                                })
                                ol.appendTo(td_programs);

                                //link to criteria matching
                                link_td = $("<td>");
                                
                                a = $('<a>',{
                                    'onclick':'fetchCriteria(this)',
                                    'data-objective-id': objective.id,
                                    'data-outcome-id':id

                                    
                                }).html("Change Associated Criteria");

                                link_td.append(a)

                                
                                tr.append(td_text);
                                tr.append(td_programs);
                                tr.append(link_td)
                                tr.appendTo($('#table_objectives'))


                                

                            })
                        },
                        'json'
                    );

                }
            }
            // --------------------------------------------------------------------------
            // Events
            // --------------------------------------------------------------------------

            // When list item is clicked, load corresponding info
            $('.list-group-item').on('click', function() {
                fetchObjectives(this);
            })
        });


        function createSelectForModal(options){
            
            div_master = $('<div>',{
                'class':'removable_div'
            })
            div_select = $("<div>",{
                'class':'form-group col-md-11',

            })
            select = $('<select>',{
                'class':'selectpicker form-control criteria_select',
                'name':'criteria[]'

            }).html(options);
            div_rem_button = $('<div>',
                {
                    'class':'col-md-1 remove-btn'
                    
                })
            rem_button = $('<button>',{
                'type':'button',
                'class':'btn btn-primary',
                'onclick':'$(this).parent().parent().remove()'
            }).html("<span class='glyphicon glyphicon-remove'></span>")

            div_select.append(select);
            div_rem_button.append(rem_button);
            div_master.append(div_select);
            div_master.append(div_rem_button);

            return div_master;

        }

        function fetchCriteria(a){
            objective_id = $(a).data('objective-id');
            objective_text = $("#objective-"+objective_id).html()
            outcome_id = $(a).data('outcome-id')

            $.post(
                "{{URL::action('Objective2Controller@fetchProgramCriteria')}}",
                {
                    objective_id:objective_id,
                    outcome_id:outcome_id
                },
                function(programs){
                    //modal, and its subvariants
                    mc = "#match_criteria";

                    $(mc).data('objective-id', objective_id)

                    title_h = $('<h5>',{
                        'class':'modal-title'
                    }).html("Match "+ objective_text +" to Criteria")
                    $(mc+"_title").html(title_h)

                    $('.removable_div').remove();

                    //select= $(".select_criteria").html(" ");
                    program_select = $("#match_criteria_program").html(" ");
                    
                    $.each(programs, function(ind, program){

                        prog_div = $("<div>",{
                            "id":"program-"+program.id,
                            "class": "program_divs removable_div",
                            "style":"display: none"
                        })
                        program_option = $('<option>',{
                            "value":program.id
                        }).html(program.name)

                        program_select.append(program_option);
                        

                        criteria = program.criteria
                        options_html = '<option value="0">Nothing Selected</option>';

                        more_than_one = false;
                        selected_options  = [];

                        $.each(criteria, function(ind, cri){

                            if(cri.objective_id == objective_id && cri.outcome_id == outcome_id){
                                option = $("<option>",{
                                'value':cri.criterion_id,
                                'data-program-id':program.id,
                                'data-outcome-id':outcome_id,
                                
                            }).html(cri.name)
                           // option.prop('selected', true);

                            
                            selected_options.push(cri.criterion_id);
                            
                            
                            
                            

                            }
                            else if (cri.outcome_id == outcome_id){
                            option = $("<option>",{
                                'value':cri.criterion_id,
                                'data-program-id':program.id,
                                'data-outcome-id':outcome_id,
                                
                            }).html(cri.name)
                        }
                  

                            options_html += option.prop('outerHTML');
                            //$(select).selectpicker('refresh');

                            //if(criteria)

                        
                        })


                        //create multiple selects. 

                        // el query es , Si no esta en program id, objetivo es 0. 
                        //Si program id 



                        
                        $('#program_objectives').append(prog_div);
                        select = createSelectForModal(options_html)

                        select.find('.remove_btn').hide()
                        prog_div.append(select);
                        $('select.criteria_select').selectpicker('refresh');

                        $.each(selected_options, function(ind, cri_id){

                            the_picker = select.find('select.criteria_select').first();
                            the_picker.val(cri_id);

                            select = createSelectForModal(options_html)
                            prog_div.append(select)
                           // $('.criteria_select').selectpicker('refresh');
                        })

                        //prog_div.append(select)

                       // $('#program_objectives').append(prog_div);

                        $('select.criteria_select').selectpicker('refresh');

                        prog_div.append(createAddCriteriaButton("program-"+program.id))

                    
                    })

                    program_select.selectpicker('refresh');
                    program_select.trigger('change');

                    $(mc).modal('show');


                    

                    

                    

                }
            )
        }

        function createAddCriteriaButton(program_div_id){


            button = $("<button>", {
                'class':'add_criteria btn btn-secondary',
                'type':'button',
                'onclick':'addSelect('+program_div_id+')'
                
            }).html("+ Add Criteria");

        }

        $('.view-scales').on('click', function() {
            var number_of_scales = this.value;

            $('.table-responsive').hide();
            $('.table-responsive-0').show();
            $('.table-' + number_of_scales).show();
        })

        function changeCriteriaDisplayed(select){

            select = $(select)

            program_id = select.val();

            $('.program_divs').hide();
            $("#program-"+program_id).show();
        }

    </script>
@stop

@section('included-js')
    @include('global._datatables_js')
@stop

@section('javascript')