@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')
    <div class ='row'>
        <div  class ='col-md-3'>
            <div class="form-group">
                {{ Form::label('program_id2', 'Select Program') }}
                <select id='select-program' class="form-control selectpicker"
                    onchange='fetchAllObjectives("#select-program")'>
                    @foreach ($programs as $program)
                        <option value='{{ $program->id }}' data-is-graduate = "{{$program->is_graduate}}" data-subtext="{{ $program->code }}">
                            {{ $program->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <div class = 'row'>
        <div class = 'col-md-12' id ='div_table'>
        <table id = 'theMainTable' class ='table table-striped table-condensed datatable'>
        <thead>
            <tr id = 'outcomes-thead'>
                <th>Objectives</th>
            </tr>
            
            
            
        </thead>
        <tbody id = 'objectves-outcomes'>

        </tbody>
        </table>
        </div>


    </div>

            <!-- Modal -->
            <div id="criteria-modal" class="modal fade" role="dialog">
                <div class="modal-dialog">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                           
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

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

    

    <script>

        $(document).ready(function(){
            onLoad();
        });

        function onLoad(){

            fetchAllObjectives('#select-program');

        }

        function fetchAllObjectives(select){
            program_id =$(select).val();
            is_graduate = $(select).find(':selected').data('is-graduate');


            $.post(
                "{{URL::action('Objective2Controller@fetchObjectiveOutcome')}}", 
                {
                    program_id:program_id
                },
                function(objectives_outcomes){

                    
                    drawTable(objectives_outcomes.objectives, objectives_outcomes.outcomes, is_graduate);

                }
            )
        }

        function drawTable(objectives, outcomes, is_graduate){
            
            
            table = $('<table>',{
                'id': 'theMainTable',
                'class': 'table table-striped table-condensed datatable'
            });

            thead = $("<thead>");
                thead_row = $('<tr>');
            
            th= $('<th>').html('Objectives');
            thead_row.append(th);

            

            outcomes_th = [];
            $.each(outcomes, function(ind, outcomes){

                th = $('<th>', {
                    'class':'th-outcomes th-out-id',
                    'data-outcome-id':outcomes.id
                }).html(outcomes.name);

                outcomes_th.push(th);

                thead_row.append(th);
                        
                    
            })
            th = $('<th>', {
                    'class':'th-outcomes'
                }).html('Criteria');

            thead_row.append(th);

            thead.append(thead_row);

            tbody = $('<tbody>');
            
            
            $.each(objectives, function(ind, objective){

                tr = $("<tr>", {
                    'class':'objectives',
                    'data-objective-id':objective.id,
                })

                td = $("<td>", {
                    'class': 'objective',
                    'data-objective-id':objective.id,
                }).html(objective.text);

                tr.append(td);
                
                $(outcomes_th).each(function(id, th){

                    var td = $('<td>');
                    outcome_id = $(th).data('outcome-id');
                    //console.log(outcome_id);
                    if(objective.outcome_ids.includes(outcome_id)){
                        var span = $("<span>", {
                            'class':'glyphicon glyphicon-ok'
                        })
                        td.append(span);
                    }
                    tr.append(td);

                });

                td_link = $('<td>');
                a = $("<a>",{
                    'onclick':'fetchObjectiveCriteria("'+objective.id+'", "#select-program")'
                }).html('View Criteria');

                td_link.append(a);
                tr.append(td_link);

                tbody.append(tr);


            });

            table.append(thead)
            table.append(tbody);
            $('#div_table').html(table);

            table = $("#theMainTable").DataTable();
            table.draw();
        }


        function fetchObjectiveCriteria(objective_id,program_select){
            program_id = $(program_select).val();
            $.post(
                "{{URL::action('CriteriaController@fetchObjectiveCriteria')}}",
                {
                    program_id:program_id,
                    objective_id:objective_id
                },
                function(data){
                    modal = "#criteria-modal";


                    $(modal).find('.modal-body').html(createModalContent(data.outcomes));
                    
                    $(modal).find('.modal-title').html("Criteria for <strong>"+data.objective.text+"</strong>")
                    $(modal).modal('show');
                }
            )
        }

        function createModalContent(outcomes){
            ol_out = $("<ol>")
            $.each(outcomes, function(ind, out){
                //ol_out = $("<ol>")
                if(out.criteria.length == 0)
                return;
                li = $('<li>').html("<p><strong>"+out.name+"</strong></p>");
                
                ul = $('<ul>');
                

                $.each(out.criteria, function(ind, crit){
                    li2 = $("<li>").html(crit.name);
                    ul.append(li2);    
                });
                li.append(ul);
                ol_out.append(li)

                //div.append(ol_out)
                
                
                
            })

            return ol_out;
        }

    </script>

@stop


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

@section('javascript')
@stop