@extends('layouts.master-2')

@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')
    @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 --}}


  <div class="row">
    <div class="col-md-3">
      <a role ="button" class="btn btn-secondary" href="{{URL::action("AnnualPlansController@viewAllPlans", array($program->id))}}">View Plans</a>


      @foreach ($annual_plans as $an_plan)
      <h4>Plan for {{$an_plan->academic_year}}</h4>
      <div class="list-group" id='list'>
        <h5 style="padding-left: 10px">First Semester {{$an_plan->academic_year}}</h6>
        @foreach ($outcomes[$an_plan->id]["first"] as $outcome)

            @if($outcome)
              
              <li style="padding-left: 25px" data-annual-plan = "{{$an_plan->id}}" data-semester-id = "{{$allSemesterOrder[$an_plan->id]["first"]->id}}" data-outcome-id="{{ $outcome->id }}" data-outcome-name ="{{$outcome->name}}"class="list-group-item">{{ $outcome->name }} </li>
            @endif
          
        @endforeach
        <h5  style="padding-left: 10px">Second Semester {{$an_plan->academic_year}}</h6>
        @foreach ($outcomes[$an_plan->id]["second"] as $outcome)

        @if($outcome)
          
          <li style="padding-left: 25px" data-semester-id = "{{$allSemesterOrder[$an_plan->id]["second"]->id}}" data-outcome-id="{{ $outcome->id }}" data-outcome-name ="{{$outcome->name}}"class="list-group-item">{{ $outcome->name }} </li>
        @endif
      
    @endforeach
      </div>
        @endforeach
      </div>
    

    <div class="col-md-9">
      <div id="outcome-display" class="panel panel-default">
        <div class="panel-heading">
          <h4 class=" panel-title" style="cursor:auto!important;">
            Primer Semestre 2019-2020
          </h4>
        </div>
        <div class="panel-body">
          <p class="outcome-definition "></p>
            <div class="table-responsive">
                <table class="table table-striped table-condensed datatable" style="table-layout: fixed ; width : 100%">
                  <thead><tr><th>Objectives for courses</th><th>Criteria per Course</th><th>Transformative Actions</th></tr></thead>
                  <tbody>
                  </tbody>

                </table>
                
            </div>

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


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

  </div>
  <script>
   function nextChar(c) {
    return String.fromCharCode(c.charCodeAt(0) + 1);
}
changed = false;

$(document).ready(function()
{
  // --------------------------------------------------------------------------
  // Page load
  // --------------------------------------------------------------------------

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

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

  // --------------------------------------------------------------------------
  // Functions
  // --------------------------------------------------------------------------

  // --------------------------------------------------------------------------
  // Events
  // --------------------------------------------------------------------------

  $('.datatable').append($('<tfoot/>',{
          "style":'padding-top:10px;',
          'align':'right'
        }).html("<td></td><td></td><td><a href='{{ URL::action('CriteriaController@editSchool')}}'>Add A New Criteria</a></td>"));
  // When list item is clicked, load corresponding info
  $('.list-group-item').on('click', function()
  {
    var id = $(this).data('outcome-id');
    var name = $(this).data('outcome-name');
    var semester = $(this).data('semester-id');
    var annual_plan = $(this).data('annual-plan');
    $('#theChange').data('annual-plan', annual_plan);
    $.post(
    "../annual-plan-fetchTYP/{{$program->id}}",
    { id: id,
    semester: semester
  },
    function(json)
    {
        // Retrieve datatable instance
        
        

        var table = $('.datatable').DataTable();
        
        table.clear();
        


       
        var objectives = json.objectives;
        var courses = json.courses;
        var criteria = json.criteria;
        var selected_criteria = json.selected_criteria;
        var nextLetter ="A";
        if(courses)
        {
          $('table').show();
          $('#outcome-display').parent().show();
        $('.no-outcome').parent().hide();

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

        //Empty table
        table.clear();
        
        for(objective in objectives){
        
        var objectivesHTML = '';
        var courseshtml = '';
        
       

        var criteriaHTML = '';
          objectivesHTML += '<strong>' + nextLetter +'.    '+objectives[objective].text+'</strong>';
         // courseshtml += "<strong>Objective "+nextLetter+"</strong>";
         // courseshtml += '<ul>';
          criteriaHTML +="<strong>Objective "+nextLetter+"</strong>";
          //criteriaHTML+= '<ol>';
          
          var typ_objective_id = json.typ_objective_id[objectives[objective].id].id;
          nextLetter= nextChar(nextLetter);
          for(course in courses[objectives[objective].id]){
            
            courseshtml += ' &#8226; '+courses[objectives[objective].id][course].code+' '+courses[objectives[objective].id][course].number+'<br>'
            $divForEach =$('<div/>',{
            'id':'objective-'+objectives[objective].id
          });
          $divForSelects = $('<div/>', {
            'id' : 'forObjective-'+objectives[objective].id+'-course-'+courses[objectives[objective].id][course].id,
            'data-amount-select':'0',
            'class':'form-group',
            'data-annual-plan': json.annual_plan.id
          });
          options = "<option value = '0' >Nothing Selected</option>"
          for (criterion in criteria[objectives[objective].id]){
            options += "<option value='"+criteria[objectives[objective].id][criterion].id+"'>"+criteria[objectives[objective].id][criterion].name+"</option>";
          } 
           var $button = $('<button/>', {
           'type': 'button',
      'class': 'btn btn-secondary',
      'onclick': 'addObjectiveTest("forObjective-'+objectives[objective].id+"-course-"+courses[objectives[objective].id][course].id+'", "'+objectives[objective].id+"-course-"+courses[objectives[objective].id][course].id+'", '+courses[objectives[objective].id][course].typ_course_id+', null, "'+options+'")'
  });
           
          $button.append("+ Add criteria");
 
          $divForEach.append($divForSelects);
          $divForEach.append("<br>")
          $divForEach.append($button);
          courseshtml += $divForEach[0].innerHTML +"<br><br>";
          }


          //for(criterion in selected_criteria[objectives[objective].id]){
          //  criteriaHTML += '<li>'+selected_criteria[objectives[objective].id][criterion].name+'</li>';
          //}
          //criteriaHTML +='</ol>';
          //courseshtml +="</ul>";
         



          
          /*$divForSelects = $('<div/>', {
            'id' : 'forObjective-'+objectives[objective].id,
            'data-amount-select':'0',
            'class':'form-group',
            'data-annual-plan': json.annual_plan.id
          });*/




          
          var annual_plan = json.annual_plan.id;
          $divForTA = $('<div/>',{
            'id':'objectiveTA-'+objectives[objective].id
          });
          $divForTASelects = $('<div/>', {
            'id': 'forTA-objective-'+objectives[objective].id,
            'class':'form-group',
            'data-amount-ta':'0'
          });

          var optionsForTa = "<option value = '0'>Nothing Selected</option>";
          transformativeDefault = json.transformative_actions;
          optionsForTa+= "<optgroup label='Default'>";
          for(trans in transformativeDefault){
            optionsForTa+= "<option value='"+transformativeDefault[trans].id+"'>"+transformativeDefault[trans].at_text+"</option> ";
            
          }
          optionsForTa+='</optgroup>';
          
          transformativeDefault = json.custom_transformative[objectives[objective].id];
          if(transformativeDefault!= undefined){
          optionsForTa+="<optgroup label = 'Custom'>";
            for(trans in transformativeDefault){
            optionsForTa+= "<option value='"+transformativeDefault[trans].id+"'>"+transformativeDefault[trans].at_text+"</option> ";
            
          }
          }
          var $buttonTA = $('<button/>', {
           'type': 'button',
      'class': 'btn btn-secondary',
      'onclick': 'addTAselect("'+optionsForTa+'", "forTA-objective-'+objectives[objective].id+'", '+annual_plan+', '+objectives[objective].id+', '+typ_objective_id+', 0)'
  });
           
          $buttonTA.append("+ Add TA");


          
          

          


          $divForTA.append($divForTASelects);
          
          $divForTA.append($buttonTA)
          $divForTA.append('<br>');


           table.row.add([
                objectivesHTML,
                courseshtml,
                
                $divForTA[0].innerHTML
                
              ]);
              table.draw();
          if(json.annual_plans_transformative[objectives[objective].id].length){
            for(i=0; i<json.annual_plans_transformative[objectives[objective].id].length; i++){
              selected_ta = json.annual_plans_transformative[objectives[objective].id][i].trans_id;
              addTAselect(optionsForTa, "forTA-objective-"+objectives[objective].id, annual_plan, objectives[objective].id, typ_objective_id, selected_ta);
              
            }
          }
            else{
              addTAselect(optionsForTa, "forTA-objective-"+objectives[objective].id, annual_plan, objectives[objective].id, typ_objective_id, 0);
            }
        for(course in courses[objectives[objective].id]){ 
        course_id = courses[objectives[objective].id][course].id
        if(json.selected_criteria[objectives[objective].id][course_id].length){
         
         
            
            for(i =0; i<json.selected_criteria[objectives[objective].id][course_id].length; i++){
              addObjectiveTest("forObjective-"+objectives[objective].id+"-course-"+course_id, ""+objectives[objective].id+"-course-"+course_id, ""+json.selected_criteria[objectives[objective].id][course_id][i].typ_course_id+"", i, options);
              $('#criteriaFor'+objectives[objective].id+"-course-"+course_id+'_'+i).val(json.selected_criteria[objectives[objective].id][course_id][i].criteria_id);
              $('#criteriaFor'+objectives[objective].id+"-course-"+course_id+'_'+i).data('old-criteria', json.selected_criteria[objectives[objective].id][course_id][i].criteria_id);
              $('#criteriaFor'+objectives[objective].id+"-course-"+course_id+'_'+i).selectpicker('refresh');

            } // Update display
      
          }
       
          else{
           
            addObjectiveTest("forObjective-"+objectives[objective].id+"-course-"+course_id, ""+objectives[objective].id+"-course-"+course_id+"", ""+courses[objectives[objective].id][course].typ_course_id+"", 0, options);
            $('#criteriaFor'+objectives[objective].id+"-course-"+course_id+'_0').val(0);
              $('#criteriaFor'+objectives[objective].id+"-course-"+course_id+'_0').data('old-criteria', 0);
              $('#criteriaFor'+objectives[objective].id+"-course-"+course_id+'_0').selectpicker('refresh');
              
          } 
           }
            
        }
                table.draw();


        }

        else
        {
          $('table').hide();
        }

       

    

    
        
        
 
    },
    'json'
    );

  })
});
function posttoTransAnnual(annual_id, selectTransId, typ_id){
  ta = $("#"+selectTransId).val();
  old_ta = $("#"+selectTransId).data('old-TA');
  if(ta == "0")return;
  $.post("../annual-plan-postTA",
  {annual_id : annual_id,
  TA_id:ta,
  typ_id : typ_id,
  old_ta:old_ta
  },
  function(message){
    
      $("#"+selectTransId).data('old-TA', ta);
    
  }
  )
}
function addTAselect(options, master_div, annual_plan_id, objective_id, typ_objective_id, selected_ta){
  var $div = $('<div/>', {
      
      'class': 'form-group '
  });
  counter = parseInt($('#'+master_div).data('amount-ta'));
  
  var selectTA = $('<select/>',{
            'class': "selectpicker form-control",
            'data-live-search':'true',
            'data-old-TA' :'0',
            'data-width': '180px',
            
            'id': 'transformativeForObjective'+objective_id+'_'+counter,
            'onchange':'posttoTransAnnual('+annual_plan_id+', "transformativeForObjective'+objective_id+'_'+counter+'", '+typ_objective_id+')'

          });
          selectTA.append(options);
          
          selectTA.appendTo($div);
          selectTA.val(selected_ta);
          selectTA.data('old-TA', selected_ta);
          selectTA.selectpicker('refresh');
          $span = $('<span/>', {
    'id':'close',
    'onclick':'  postDeleteTA('+annual_plan_id+', "transformativeForObjective'+objective_id+'_'+counter+'", '+typ_objective_id+'); this.parentNode.parentNode.removeChild(this.parentNode);return false;'
  }).html('x');
  $span.appendTo($div);
  $div.append("<br><br>");
  $div.appendTo('#'+master_div);
  $('#'+master_div).data('amount-ta', counter+1);


}
function postDeleteTA(annual_id, selectTransId, typ_id){
  ta = $("#"+selectTransId).val();

  
  if(ta == "0")return;
  $.post("../annual-plan-deleteTA",
  {annual_id : annual_id,
  TA_id:ta,
  typ_id : typ_id,

  }
  );
  parent = $("#"+selectTransId).parent().parent().parent();
  counter = parseInt(parent.data('amount-ta'));
  parent.data('amount-ta', counter-1);
}
function postToAnnualPlans(typ_course_id, criteria_select){
  var criteria = $('#'+criteria_select).val();
  var oldCriteria = $('#'+criteria_select).data('old-criteria');
  var criteriaNode = document.getElementById(criteria_select).parentNode.parentNode.parentNode;
  
  var annual = criteriaNode.dataset.annualPlan;
  $.post("../annual-plan-postOnChange",
  {criteria : criteria, 
  typ_course_id : typ_course_id,
  annual_plan : annual,
  old_criteria :oldCriteria
  },
  function(message){
    if(message =="Duplicate entry, please choose another criteria."){
      alert(message)
    }
    else{
        $('#'+criteria_select).data('old-criteria', criteria);  
    changed = true;
    }

  })
}


function addObjectiveTest(div, new_id_for_select, typ_course_id, i=null, options) {
  
  if(!i) amount_select = $('#'+div).data("amount-select");
  else amount_select = i;
  $select = $('<select/>',{
            'class': "selectpicker form-control",
            'data-live-search':'true',
            'data-old-criteria' :'0',
            'data-width': '180px',
            
            'id': 'criteriaFor'+new_id_for_select+'_'+amount_select,
            'onchange':'postToAnnualPlans('+typ_course_id+', "criteriaFor'+new_id_for_select+'_'+amount_select+'")'

          })

  var $div = $('<div/>', {
      'id': 'courseSelect_' + new_id_for_select +'_'+amount_select,
      'class': 'form-group '
  });

  $select.append(options);
  $select.appendTo($div);
  $span = $('<span/>', {
    'id':'close',
    'onclick':'  postDelete('+typ_course_id+', "criteriaFor'+new_id_for_select+'_'+amount_select+'"); this.parentNode.parentNode.removeChild(this.parentNode);return false;'
  }).html('x');
  $div.append($span);
 $div.append("<br><br>")
  $div.appendTo($("#forObjective-"+new_id_for_select));
  

  
          $select.selectpicker('refresh');
  
  

 
  $("#forObjective-"+new_id_for_select).data("amount-select", amount_select+1);

}

function postDelete(typ_course_id, criteria_select){
  var criteria = $('#'+criteria_select).val();
  var oldCriteria = $('#'+criteria_select).data('old-criteria');
  var criteriaNode = document.getElementById(criteria_select).parentNode.parentNode.parentNode;
  
  var annual = criteriaNode.dataset.annualPlan;
  $.post("../annual-plan-deleteCriteria",
  {criteria : criteria, 
  typ_course_id : typ_course_id,
  annual_plan : annual,
  old_criteria :oldCriteria
  });

}



function deleteObjective(objectiveSelectDiv, closeObj){

  $('#'+objectiveSelectDiv).remove();
  $('#'+closeObj).remove();
  $('#'+div).data("amount-select", $('#'+div).data("amount-select")-1);

}
</script>


  

@stop

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