@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>
      
      <select class = "form-control selectpicker" id = "annual_plan" onchange="fetchInfo('annual_plan')">
        <option value = '0'> Nothing Selected</option>
        @foreach ($annual_plans as $an_plan)
        <option value={{$an_plan->id}}>Plan {{$an_plan->academic_year}}</option>
            
        @endforeach
      </select>
      <br>
     

    
      <div id='allOutcomes'> 
      
      </div>
    </div>
    

    <div class="col-md-9">
      <div id="expected-outcome" class="panel panel-default" data-semester-id ="">
        <div class="panel-heading">
          <h3 class="panel-title">
            Expected Target Outcomes
          </h3>
          <input style="width: 150px;" min="0" class="form-control" type="number" >
        </div>
      </div>
      <div id="outcome-display" class="panel panel-default">
        <div class="panel-heading">
          <h4 class=" panel-title" >
            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();

  $('.panel-group .panel-body').hide();

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

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

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

   // When list item is clicked, load corresponding info
   $('#expected-outcome .form-control').on('change', function(){
          
           program_id = {{$program->id}};

           semester_id = $('#expected-outcome').data('semester-id');
            $.post(
            "../annual-plan-CreateOrEdit/{{$program->id}}",
            { 
              program_id: program_id,
              semester_id: semester_id,
              expected_target: $('#expected-outcome .form-control').val(),
            },

            ) 
      
           });

});
  //   function CreateOrEdit(id){
  //   //send data to the database
  //   console.log(id);
  //   annual_id = $("#"+id);
  //   console.log(console.log(annual_id));
  // }

     function fetchEverything(li)
  {
    var id = $(li).data('outcome-id');
    var name = $(li).data('outcome-name');
    var semester = $(li).data('semester-id');
    var annual_plan = $(li).data('annual-plan');
    $('#expected-outcome').data('semester-id', semester);

    
    
    $('#theChange').data('annual-plan', annual_plan);
    $.post(
    "../annual-plan-fetchTYP/{{$program->id}}",
    { id: id,
    semester: semester
  },

    function(json)
    {
        
        

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

        var optionsForTADict ={};
        


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


        var expected_target = json.expected_target;


        //check the data type of the expected target   
        //if the expected_target var is an empty array, set default value
        if(expected_target.length == 0)
        {
          $('#expected-outcome .form-control').val(0);
          
          
        }
        else
        {
          $('#expected-outcome .form-control').val(expected_target[0].expected_target);
      
        
          
        }
        
        
     

        //Empty table
        table.clear();
        var annual_plan = json.annual_plan.id;
        for(objective in objectives){
        
        var objectivesHTML = '';
        var courseshtml = '';
        var courseTAhtml = '';
        
       
        
        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].name+'<br>'
            courseTAhtml += ' &#8226; '+courses[objectives[objective].id][course].code+' '+courses[objectives[objective].id][course].name+'<br>'
      
            $divForEach =$('<div/>',{
            'id':'objective-'+objectives[objective].id
            });
            $divForSelects = $('<div/>', {
              'id' : 'forObjective-'+objectives[objective].id+'-course-'+courses[objectives[objective].id][course].typ_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': 'addCriteriaTest("forObjective-'+objectives[objective].id+"-course-"+courses[objectives[objective].id][course].typ_course_id+'", "'+objectives[objective].id+"-course-"+courses[objectives[objective].id][course].typ_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);
            $divForTA = $('<div/>',{
            'id':'objectiveTA-'+objectives[objective].id
          });
          $divForTASelects = $('<div/>', {
            'id': 'forTA-objective-'+objectives[objective].id+'-course-'+courses[objectives[objective].id][course].typ_course_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>';
          course_id = courses[objectives[objective].id][course].id
          transformativeDefault = json.custom_transformative[objectives[objective].id][course_id];
          if(transformativeDefault!= undefined){
          optionsForTa+="<optgroup label = 'Custom'>";
            for(trans in transformativeDefault){
            optionsForTa+= "<option value='"+transformativeDefault[trans].ta_id+"'>"+transformativeDefault[trans].at_text+"</option> ";
            
          }
          }
          typ_course_id = courses[objectives[objective].id][course].typ_course_id
          var $buttonTA = $('<button/>', {
           'type': 'button',
           'class': 'btn btn-secondary',

            'onclick': 'addTAselect("'+optionsForTa+'", "forTA-objective-'+objectives[objective].id+'-course-'+courses[objectives[objective].id][course].typ_course_id+'", '+annual_plan+', '+objectives[objective].id+', '+typ_course_id+', 0)'
  });
           
          $buttonTA.append("+ Add TA");
          typ_course_id = courses[objectives[objective].id][course].typ_course_id
          optionsForTADict[typ_course_id] = optionsForTa;
          
          

          


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

            
            courseshtml += $divForEach[0].innerHTML +"<br><br>";
            courseTAhtml += $divForTA[0].innerHTML +"<br><br>";

          
          }


         




          
          
          /*$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('<br>');
          $divForTA.append($buttonTA)
          

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

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


        }

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

       

    

    
        
        
 
    },
    'json'
    );

  }
function posttoTransAnnual(annual_id, selectTransId, typ_course_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_course_id : typ_course_id,
  old_ta:old_ta
  },
  function(message){
    
      $("#"+selectTransId).data('old-TA', ta);
    
  }
  )
}
function addTAselect(options, master_div, annual_plan_id, objective_id, typ_course_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'+master_div+'_'+counter,
            'onchange':'posttoTransAnnual('+annual_plan_id+', "transformativeForObjective'+master_div+'_'+counter+'", '+typ_course_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'+master_div+'_'+counter+'", '+typ_course_id+'); this.parentNode.parentNode.removeChild(this.parentNode);return false;'
  }).html('x');
  $span.appendTo($div);
  $div.append("<br><br>");
  $('#'+master_div).append("<br>");
  
  $div.appendTo($('#'+master_div));
  $('#'+master_div).data('amount-ta', counter+1);


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

  
  if(ta == "0")return;
  $.post("../annual-plan-deleteTA",
  {annual_id : annual_id,
  TA_id:ta,
  typ_id : typ_course_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 addCriteriaTest(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).append("<br>");
  $div.appendTo($("#"+div));
  

  
          $select.selectpicker('refresh');
  
  

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

}
$('#allOutcomes').hide();
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 fetchInfo(id){
  annual_id = $("#"+id).val();
  program_id = {{$program->id}};
  $.post("{{URL::action('AnnualPlansController@fetchInfo')}}",
    {
        id:annual_id,
        program_id:program_id
        

    },
    function(json){
      
      div = $('<div/>', {
        'class':'list-group',
        'id':'list'
      });
      header5 = $('<h5/>', {
        'style':"padding-left: 10px"
      }).html("First Semester");
      div.append(header5);
      list = '';
      for(outcome in json.outcomes.first){
        list+= "<li style='padding-left: 25px' onclick = 'fetchEverything(this)' data-annual-plan = '"+json.annual_plans.id+"' data-semester-id = '"+json.allSemesterOrder.first.id+"' data-outcome-id='"+json.outcomes.first[outcome].id+"' data-outcome-name ='"+json.outcomes.first[outcome].name+"' class='list-group-item' >"+json.outcomes.first[outcome].name+" </li>";
        
      }
      div.append(list);
      header4 = $('<h5/>', {
        'style':"padding-left: 10px"
      }).html("Second Semester");
      div.append(header4);
      list = '';
      for(outcome in json.outcomes.second){
        list+= "<li style='padding-left: 25px' onclick = 'fetchEverything(this)' data-annual-plan = '"+json.annual_plans.id+"' data-semester-id = '"+json.allSemesterOrder.second.id+"' data-outcome-id='"+json.outcomes.second[outcome].id+"' data-outcome-name ='"+json.outcomes.second[outcome].name+"' class='list-group-item' >"+json.outcomes.second[outcome].name+" </li>";
        
      }
      div.append(list);
     html = div[0].innerHTML;
     
      $("#allOutcomes").html(div[0].innerHTML);
      $("#allOutcomes").show();

},
"json",
  );
  
  }


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