@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" id ="here">  


      <select class = "form-control selectpicker" id = "annual_plan" onchange="createAllTables('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 = "here2">

     </div>
    
       
      </div>
      <div class ="col-md-9" id="allTables">
        <div class="no-outcome alert alert-info">
          <p>Select an Annual Plan to view its information</p>
        </div>
        
      </div>
  </div>
 
    
<!-- Modal -->
<div class="modal fade" id="modal_inform" tabindex="-1" role="dialog" aria-labelledby="title" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="title">Generating Report</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="theReport">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick=" postToTransformativeReport(); fetchInfoTrans();">Save changes</button>
      </div>
    </div>
  </div>
</div>

  
  <script>
    counter = 0;
    json_to_use = [];
    function triggerForYear(){
    $('#print_BUTTON').click();
       
    }
    function changeOutput(show, hide){
      $(show).show();
      $(hide).hide();
    }
    function postToTransformativeReport(){
      program_id = {{$program_id}};
      an_id = $("#annual_plan").val();
      realized = [];
      logrado = [];
      continued =[];
      semester = [];
      typ_objective = [];
      transformative =[];
      comments = [];
      for(i = 0; i<counter;i++){
        realized.push($('input[name="seHizo'+i+'"]:checked').val());
        logrado.push( $('input[name="logro'+i+'"]:checked').val());
        continued.push( $('input[name="continued'+i+'"]:checked').val());
        typ_objective.push($('input[name="objective_'+i+'"]').val());
        semester.push($('input[name="what_semester_'+i+'"]').val());
        transformative.push($('input[name="transformative_'+i+'"]').val());
        comments.push($('textarea[name="comment2'+i+'"]').val())
      }
        

        $.post("{{URL::action('AnnualPlansController@postReport')}}",
        {program_id: program_id,
        realized: realized,
        logrado:logrado,
        continued: continued,
        semester:semester,
        typ_objective: typ_objective,
        transformative:transformative, 
        annual_id: an_id,
        comments: comments}
        )
    }


function fetchInfoTrans(){
  an_id = $("#annual_plan").val();
  $.post("{{URL::action('AnnualPlansController@transformativeReport')}}",
                                    {
                                        an_id:an_id
                                    },
                                    function(json){
                                      json_to_use = json;
                                      $('#report_print').click();
                                      $('#trans_print').click();
                                    },
                                    'json'

                                    );
}    
amount_of_TA_per_objective = [];
function createAllTables(id){
    id = $('#'+id).val();
    program_id = {{$program_id}}
    $.post("{{URL::action('AnnualPlansController@fetchAllTables')}}",
    {
        id:id,
        program_id:program_id
        

    },
    function(json){
      counter = 0;
        $('#allTables').empty();
        $('#buttonForAll').remove();
$buttonAll = $('<button/>',{
  'class': 'btn btn-secondary',
  'type':'button',
  'onclick':'triggerForYear()',
  'id':"buttonForAll"

}).html('Export whole year');
/*
$buttonForInform = $('<button/>', {
  'class':'btn btn-secondary',
  'type':'button',
  'data-toggle':'modal',
  'data-target':'#modal_inform'
  
}).html('Report annual plan');*/
$('#here2').html($buttonAll);
$('#here2').append("<br><br>"); /*
$('#here2').append($buttonForInform);*/



        $button = $('<button/>',{
          'class': 'btn btn-secondary',
          'type': 'button',
          'style': 'width: 50%',
          'onclick': 'changeOutput("#firstSemester","#secondSemester")'

        }).html('First Semester');
        $button2 = $('<button/>',{
          'class': 'btn btn-secondary',
          'type': 'button',
          'style': 'float:right; width:50%',
          'onclick': 'changeOutput("#secondSemester","#firstSemester")'
        }).html('Second Semester');
        $button.appendTo('#allTables');
        $button2.appendTo('#allTables');
        
        plan = $( "#annual_plan option:selected" ).text();
        $divForAll = $('<div/>',{
          'id': "forExportAllTable"
        });
        $tableForAll = $('<table/>',{
               "class": "table table-striped table-condensed datatable",
               "style": "table-layout: fixed",
               "id": 'allTablesToExport',
              "data-title": plan});
        $thead = $('<thead/>').html("<tr><th>Objectives for courses</th><th>Criteria per course</th><th>Transformative Actions</th></tr>");
        $tbody = $('<tbody/>');
        $tableForAll.append($thead);
        $tableForAll.append($tbody);
        $tableForAll.appendTo($divForAll);
        $divForAll.appendTo("#allTables")
        $tableForAll = createTheReportAll($tableForAll);
        $('#forExportAllTable').hide();

        $divForReport = $('<div/>',{
          'id': "forReportAllTable"
        });
        $tableForAll = $('<table/>',{
               "class": "table table-striped table-condensed datatable",
               "style": "table-layout: fixed",
               "id": 'allReportToExport',
              "data-title": plan});
        $thead = $('<thead/>').html("<tr><th>Objectives for courses</th><th>Criteria per Courses</th><th>Transformative Actions</th></tr>");
        $tbody = $('<tbody/>');
        $tableForAll.append($thead);
        $tableForAll.append($tbody);
        $tableForAll.appendTo($divForAll);
        $divForAll.appendTo("#allTables")
        $tableForAll = createTheExportAll($tableForAll);
        $('#forReportAllTable').hide();


            $('#theReport').empty();
        

            $divForTrans = $('<div/>',{
          'id': "forTransAllTable"
        });
        $tableForTrans = $('<table/>',{
               "class": "table table-striped table-condensed datatable",
               "style": "table-layout: fixed",
               "id": 'allTransToExport',
              "data-title": plan});
        $theadTrans = $('<thead/>').html("<tr><th>Objectives evaluated</th><th>Date Proposed</th><th>Proposed by</th><th>Phase</th><th>Semester it was carried out</th><th>Comments</th></tr>");
        $tbodyTrans = $('<tbody/>');
        $tableForTrans.append($theadTrans);
        $tableForTrans.append($tbodyTrans);
        $tableForTrans.appendTo($divForTrans);
        $divForTrans.appendTo("#allTables")
        $tableForTrans = createTheTrans($tableForTrans);
        $('#forTransAllTable').hide();


        //First semester

         $divForFirstSemester = $('<div/>',{
           'id': "firstSemester"
         });
         $divForFirstSemester.appendTo('#allTables');
         index_per_objective = 0;
         for(outcome in json.first.outcomes){
           $panel = $('<div/>',{
             'id': 'outcome_'+json.first.outcomes[outcome].id,
             'class': 'panel panel-default'
           });
           $div = $('<div/>',{
             'class': 'panel-heading'
           });
           $h4 = $('<h4/>',{
             'class':'panel-title',
             'style':"cursor:auto!important;"
           }).html(json.first.outcomes[outcome].name);
           

           $('#theReport').append('<h4>'+json.first.outcomes[outcome].name+'</h4>');
           $div.append($h4);
           $panel.append($div);

           $div = $('<div/>',{
             'class': 'panel-body'
             });
             $divTable = $('<div/>',{
               "class" : "table-responsive"
             })
             $table = $('<table/>',{
               "class": "table table-striped table-condensed datatable",
               "style": "table-layout: fixed",
               "id": json.first.outcomes[outcome].id +'first',
               "data-title": json.first.outcomes[outcome].name
             })
             $thead = $('<thead/>').html("<tr><th>Objectives for courses</th><th>Criteria per Course</th><th>Transformative Actions</th></tr>")
             $table.append($thead);
             $table.append($('<tbody/>')); 
             $divTable.append($table);
             $div.append($divTable);

            $panel.append($div);
            $panel.appendTo($divForFirstSemester);
             $table = createDataTable($table);
             var outcomeID = json.first.outcomes[outcome].id;
             var nextLetter = 'A';
             
             for(objective in json.first.objectives[outcomeID]){
              var theObj = json.first.objectives[outcomeID][objective];
              var objHTML = '<strong> '+nextLetter+'. '+theObj.text+'</strong>';
              nextLetter = nextChar(nextLetter);
              var courseHTML = '';
              var courseTAhtml ='';

              for(course in json.first.courses[theObj.id]){

                var theCourse = json.first.courses[theObj.id][course];
                courseHTML+= '&#8226; '+theCourse.code + " "+ theCourse.number +'\n\n\n<br>';
                courseTAhtml += '&#8226; '+theCourse.code + " "+ theCourse.number +'\n\n\n<br>';

                for(criterion in json.first.criteria[theObj.id][theCourse.typ_course_id]){
                  theCrit = json.first.criteria[theObj.id][theCourse.typ_course_id][criterion];
                  courseHTML += '\t&nbsp;&nbsp; '+(parseInt(criterion)+1)+". "+theCrit.name+'\n\n<br>';
                  
                }
                for(trans in json.first.trans_actions[theObj.id][theCourse.typ_course_id]){
                  theTA = json.first.trans_actions[theObj.id][theCourse.typ_course_id][trans]
                  courseTAhtml +='\t&nbsp;&nbsp; '+(parseInt(trans)+1)+". "+theTA.description+'\n\n<br>'; 
                }
              }
              //courseHTML += '</ul>';
             // var criteriaHTML = '';

             // for(criterion in json.first.criteria[theObj.id]){
            //    crit = json.first.criteria[theObj.id][criterion];
             //   criteriaHTML += '&#8226; '+crit.name+'\n<br>';
              //}

              /*var trans_html ='';
              number = 1;
              amount_of_TA_per_objective[index_per_objective]= [];
              for(trans in json.first.trans_actions[theObj.id]){
                transformative = json.first.trans_actions[theObj.id][trans];
                trans_html+= '<p>'+number.toString()+'. '+transformative.at_text+'\n\n<p>';
                number++;
              
              //criteriaHTML+= '';
              $('#theReport').append('<h5>For the objective: "<strong>'+theObj.text+'</strong>: <br><br> The transformative action: "<strong>'+json.first.trans_actions[theObj.id][trans].at_text+'</strong>": <h5><br>');
              form = $("<form/>",{
                'id':'form'+counter,
                'class':"form-for-ta"
              })
              
              $('#theReport').append("1. Was the transformative action done?: <br>");
              
              form.append('<label class="radio-inline"><input type="radio" id="hizo-trans-'+json.first.trans_actions[theObj.id][trans].id+'_typ-'+json.first.typ_objective_id[theObj.id].id+'-1" name="seHizo'+counter+'" value = "1">Yes</label>');
              form.append('<label class="radio-inline"><input type="radio" id="hizo-trans-'+json.first.trans_actions[theObj.id][trans].id+'_typ-'+json.first.typ_objective_id[theObj.id].id+'-0" name="seHizo'+counter+'" value = "0">No</label>');
        
              form.append('<br>2. Was the transformative action useful?<br>');
              form.append('<label class="radio-inline"><input type="radio" id="logro-trans-'+json.first.trans_actions[theObj.id][trans].id+'_typ-'+json.first.typ_objective_id[theObj.id].id+'-1" name="logro'+counter+'" value = "1">Yes</label>');
              form.append('<label class="radio-inline"><input type="radio" id="logro-trans-'+json.first.trans_actions[theObj.id][trans].id+'_typ-'+json.first.typ_objective_id[theObj.id].id+'-0" name="logro'+counter+'" value = "0">No</label>');
 
              form.append('<br>3. Is the transformative action going to be continued?<br>');
              form.append('<label class="radio-inline"><input type="radio" id="continued-trans-'+json.first.trans_actions[theObj.id][trans].id+'_typ-'+json.first.typ_objective_id[theObj.id].id+'-1" name="continued'+counter+'" value = "1">Yes</label>');
              form.append('<label class="radio-inline"><input type="radio" id="continued-trans-'+json.first.trans_actions[theObj.id][trans].id+'_typ-'+json.first.typ_objective_id[theObj.id].id+'-0" name="continued'+counter+'" value = "0">No</label>');
              form.append('<br><label for="comment2'+counter+'">Comments about TA:</label><textarea class="form-control" rows="3" name="comment2'+counter+'"></textarea>');
              form.append('<input class="hidden" name= "what_semester_'+counter+'"value = "'+json.first.semester.id+'"> ');
              $('#theReport').append(form);
              form.append('<input class="hidden" name= "transformative_'+counter+'"value = "'+json.first.trans_actions[theObj.id][trans].id+'"> ');
              form.append('<input class="hidden" name= "objective_'+counter+'"value = "'+json.first.typ_objective_id[theObj.id].id+'"> ');

              theTypId = json.first.typ_objective_id[theObj.id].id;
              
              /*for(fill_info in json.fill_info[theTypId]){
           theInfo = json.fill_info[theTypId][fill_info];
                $('#hizo-trans-'+fill_info+'_typ-'+theTypId+'-'+((theInfo.cycle_of_life)-1)).prop("checked", true);
                $('#logro-trans-'+fill_info+'_typ-'+theTypId+'-'+theInfo.accomplished).prop("checked", true);
                continuedSem = 1;
                if(!theInfo.semester_continue) continuedSem =0;
                $('#continued-trans-'+fill_info+'_typ-'+theTypId+'-'+continuedSem).prop("checked", true);
              }*/
             /*
              amount_of_TA_per_objective[index_per_objective].push(counter);

              counter+=1;

              }*/


              //$('#theReport').append()
              
              $table.row.add([
                objHTML,
                courseHTML,
                courseTAhtml
              ]);

              index_per_objective +=1;
             }
             

            $table.draw();

         }
         $divForSecondSemester = $('<div/>',{
           'id': "secondSemester"
         });
         //Second Semester
         $divForSecondSemester.appendTo('#allTables');
         for(outcome in json.second.outcomes){
           $panel = $('<div/>',{
             'id': 'outcome_'+json.second.outcomes[outcome].id,
             'class': 'panel panel-default'
           });
           $div = $('<div/>',{
             'class': 'panel-heading'
           });
           $h4 = $('<h4/>',{
             'class':'panel-title',
             'style':"cursor:auto!important;"
           }).html(json.second.outcomes[outcome].name);
           $('#theReport').append('<h4>'+json.second.outcomes[outcome].name+'</h4>');
           $div.append($h4);
           $panel.append($div);

           $div = $('<div/>',{
             'class': 'panel-body'
             });
             $divTable = $('<div/>',{
               "class" : "table-responsive"
             })
             $table = $('<table/>',{
               "class": "table table-striped table-condensed datatable",
               "style": "table-layout: fixed",
               "id": json.second.outcomes[outcome].id +'second',
               "data-title": json.second.outcomes[outcome].name
             })
             $thead = $('<thead/>').html("<tr><th>Objectives for courses</th><th>Criteria per Course</th><th>Transformative Actions</th></tr>")
             $table.append($thead);
             $table.append($('<tbody/>')); 
             $divTable.append($table);
             $div.append($divTable);

            $panel.append($div);
            $panel.appendTo($divForSecondSemester);
             $table = createDataTable($table);
             var outcomeID = json.second.outcomes[outcome].id;
             var nextLetter = 'A';
             
             for(objective in json.second.objectives[outcomeID]){
              var theObj = json.second.objectives[outcomeID][objective];
              var objHTML = '<strong> '+nextLetter+'. '+theObj.text+'</strong>';
              nextLetter = nextChar(nextLetter);
              var courseHTML = '';
              var courseTAhtml ='';

              for(course in json.second.courses[theObj.id]){

                var theCourse = json.second.courses[theObj.id][course];
                courseHTML+= '&#8226'+theCourse.code + " "+ theCourse.number +'\n\n\n<br>';
                courseTAhtml += '&#8226; '+theCourse.code + " "+ theCourse.number +'\n\n\n<br>';
                for(criterion in json.second.criteria[theObj.id][theCourse.typ_course_id]){
                  theCrit = json.second.criteria[theObj.id][theCourse.typ_course_id][criterion];
                  courseHTML += '&nbsp;&nbsp; '+(parseInt(criterion)+1)+". "+theCrit.name+'\n\n<br>';


                }

                for(trans in json.second.trans_actions[theObj.id][theCourse.typ_course_id]){
                  theTA = json.second.trans_actions[theObj.id][theCourse.typ_course_id][trans]
                  courseTAhtml +='\t&nbsp;&nbsp; '+(parseInt(trans)+1)+". "+theTA.description+'\n\n<br>'; 
                }
              }
              //courseHTML += '</ul>';
              /*var criteriaHTML = '';

              for(criterion in json.second.criteria[theObj.id]){
                crit = json.second.criteria[theObj.id][criterion];
                criteriaHTML += '&#8226; '+crit.name+'\n<br>';
              }
              var trans_html ='';
              number = 1;
              amount_of_TA_per_objective[index_per_objective]= [];
              for(trans in json.second.trans_actions[theObj.id]){
                transformative = json.second.trans_actions[theObj.id][trans];
                trans_html+= '<p>'+number.toString() +'. '+transformative.at_text+'<p>\n\n';
                number++;
              
              $('#theReport').append('<h5>For the objective: "<strong>'+theObj.text+'</strong>: <br><br> The transformative action: "<strong>'+json.second.trans_actions[theObj.id][trans].at_text+'</strong>": <h5><br>');
              form = $("<form/>",{
                'id':"form"+counter,
                'class':"form-for-ta"
              })
              
              $('#theReport').append("1. Was the transformative action done?: <br>");
              form.append('<label class="radio-inline"><input type="radio" id="hizo-trans-'+json.second.trans_actions[theObj.id][trans].id+'_typ-'+json.second.typ_objective_id[theObj.id].id+'-1" name="seHizo'+counter+'" value = "1">Yes</label>');
              form.append('<label class="radio-inline"><input type="radio" id="hizo-trans-'+json.second.trans_actions[theObj.id][trans].id+'_typ-'+json.second.typ_objective_id[theObj.id].id+'-0" name="seHizo'+counter+'" value = "0">No</label>');
   
              form.append('<br>2. Was the transformative action useful?<br>');
              form.append('<label class="radio-inline"><input type="radio" id="logro-trans-'+json.second.trans_actions[theObj.id][trans].id+'_typ-'+json.second.typ_objective_id[theObj.id].id+'-1" name="logro'+counter+'" value = "1">Yes</label>');
              form.append('<label class="radio-inline"><input type="radio" id="logro-trans-'+json.second.trans_actions[theObj.id][trans].id+'_typ-'+json.second.typ_objective_id[theObj.id].id+'-0" name="logro'+counter+'" value = "0">No</label>');
              form.append('<br>3. Is the transformative action going to be continued?<br>');
              form.append('<label class="radio-inline"><input type="radio" id="continued-trans-'+json.second.trans_actions[theObj.id][trans].id+'_typ-'+json.second.typ_objective_id[theObj.id].id+'-1" name="continued'+counter+'" value = "1">Yes</label>');
              form.append('<label class="radio-inline"><input type="radio" id="continued-trans-'+json.second.trans_actions[theObj.id][trans].id+'_typ-'+json.second.typ_objective_id[theObj.id].id+'-0" name="continued'+counter+'" value = "0">No</label>');
              form.append('<br><label for="comment">Comments about TA:</label><textarea class="form-control" rows="3" name="comment2'+counter+'"></textarea>');

             form.append('<input class="hidden" name= "what_semester_'+counter+'"value = "'+json.second.semester.id+'"> ');
              form.append('<input class="hidden" name= "transformative_'+counter+'"value = "'+json.second.trans_actions[theObj.id][trans].id+'"> ');
              form.append('<input class="hidden" name= "objective_'+counter+'"value = "'+json.second.typ_objective_id[theObj.id].id+'"> ');

              $('#theReport').append(form);

              theTypId = json.second.typ_objective_id[theObj.id].id;
              /*
              for(fill_info in json.fill_info[theTypId]){
                theInfo = json.fill_info[theTypId][fill_info];
                $('#hizo-trans-'+fill_info+'_typ-'+theTypId+'-'+((theInfo.cycle_of_life)-1)).prop("checked", true);
                $('#logro-trans-'+fill_info+'_typ-'+theTypId+'-'+theInfo.accomplished).prop("checked", true);
                continuedSem = 1;
                if(!theInfo.semester_continue) continuedSem =0;
                $('#continued-trans-'+fill_info+'_typ-'+theTypId+'-'+continuedSem).prop("checked", true);
             }

              
              amount_of_TA_per_objective[index_per_objective].push(counter);

              counter+=1;
              }*/
              index_per_objective +=1;
              
              $table.row.add([
                objHTML,
                courseHTML,
                
                courseTAhtml
              ]);
             }
             

            $table.draw();

         }
         $('#secondSemester').hide();
        
    },
    'json'
    )
}

function nextChar(c){
  return String.fromCharCode(c.charCodeAt(0) + 1);
}

function createDataTable(table1){
  title1 = table1[0].dataset.title
  
            table = $(table1).DataTable({
                lengthMenu: [5, 10, 25, 50],
                autoWidth: false,
                retrieve: true,
                pageLength: 10,
                // //fixed cols
                // fixedColumns:   {
                //     leftColumns: 1,
                // },
                // scrollY:        "600px",
                // scrollX:        true,
                // scrollCollapse: true,

                bSortCellsTop: true, // To apply sort using top row only
                order: [[ 0, "asc" ]],
                dom: 'Bflrtip',
                buttons: [
                    {
                        extend: 'collection',
                        text: 'Export <span class="caret"></span>',
                        buttons: [
                            {
                                extend: 'print',
                                exportOptions: {
                                    columns: ':visible'
                                },
                                text: 'Print',
                            },
                            {
                                extend: 'excelHtml5',
                                exportOptions: {
                                    columns: ':visible'
                                }
                            },
                            {
                                extend: 'pdfHtml5',
                                exportOptions: {
                                  
                                    columns: ':visible',
                                    stripNewlines: false,
                                    title: title1,
                                    text: title1,
                                    
                                },
                                customize: function(doc, dt){
                                    //$('#loadingModal').modal('show');
                                    tableCopy = doc.content[1];
                                    doc.content[1] = { text: dt.exportOptions.text, style:'title', margin : [0,0,0,12]};
                                    doc.content[2] =tableCopy;
                                    doc.content[2].table.widths =['33%', '33%', '34%']
                                    doc.pageSize = 'LEGAL';
                                    doc.pageOrientation ='landscape';
                                    doc.defaultStyle.fontSize = 10;
                                    doc.styles.tableHeader.fillColor = '#E70033';

                                    // doc.content[1].layout= 'lightHorizontalLines';
                                    doc.content[2].layout = {
                                        hLineWidth: function (i, node) {
                                            if(i === 1){
                                                return 2;
                                            }
                                            else if(i > 1){
                                                return 1;
                                            }
                                            else {
                                                return 0;
                                            }
                                        },
                                        vLineWidth: function (i, node) {
                                            return 0;
                                        },
                                        hLineColor: function (i, node) {
                                            if(i === 1){
                                                return '#000';
                                            }
                                            else if(i > 1){
                                                return '#ccc';
                                            }
                                            else {
                                                return 'transparent';
                                            }
                                        },
                                        // vLineColor: function (i, node) {
                                        //     return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';
                                        // },
                                        paddingLeft: function(i, node) { return 5; },
                                        paddingRight: function(i, node) { return 5; },
                                        paddingTop: function(i, node) { return 5; },
                                        paddingBottom: function(i, node) { return 5; }
                                    };

                                    doc.content.splice( 0, 0, {
                                        margin: [ 0, 0, 0, 12 ],
                                        alignment: 'center',
                                        width: 150,
                                        image: 'data:image/png;base64,[encoded data, 31780 characters]'
                                    } );

                                    //$('#loadingModal').modal('hide');

                                }
                            },
                        ]
                    },
                    {
                        extend: 'colvis',
                        columns: ':gt(0)',
                        text: 'Column visibility <span class="caret"></span>',
                    }
                ],
            });
            // tables.push(table);

            // Apply the search
            table.columns().every( function ()
            {
                // Search by keyword
                var column = this;
                $('input.column-search-bar', column.footer()).on('keyup change', function () {
                    if (column.search() !== this.value) {
                        console.log(this.value)

                        column
                            .search(this.value)
                            .draw();
                    }
                } );

                // Search by dropdown menu
                column.data().unique().sort().each( function (d, j) {
                    $('select.column-search-select', column.footer()).append('<option value="'+d+'">'+d+'</option>');
                });

                $('.column-search-select', column.footer()).on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex($(this).val());

                column
                    .search(val ? '^'+val+'$' : '', true, false)
                    .draw();

                } );
            } );

            table.buttons().container()
            .appendTo( $('.col-sm-6:eq(0)', table.table().container()));

            $(document).on('click', '.buttons-columnVisibility', function(){
                console.log('visibility toggled');
                table.columns.adjust().responsive.recalc();
            });
        return table;
}

function createTheExportAll(table1){
  title1 = table1[0].dataset.title
  
            table = $(table1).DataTable({
                lengthMenu: [5, 10, 25, 50],
                autoWidth: false,
                retrieve: true,
                pageLength: 10,
                // //fixed cols
                // fixedColumns:   {
                //     leftColumns: 1,
                // },
                // scrollY:        "600px",
                // scrollX:        true,
                // scrollCollapse: true,

                bSortCellsTop: true, // To apply sort using top row only
                order: [[ 0, "asc" ]],
                dom: 'Bflrtip',
                buttons: [
                    {
                        
   
                                extend: 'pdfHtml5',
                                attr: {
                                  id:'print_BUTTON'
                                },
                                exportOptions: {
                                  
                                    columns: ':visible',
                                    stripNewlines: false,
                                    title: title1,
                                    text: title1,
                                    
                                },
                                customize: function(doc, dt){
                                    //$('#loadingModal').modal('show');

                                    $('.panel').each(function(index, element){
                                      title = this.children[0].innerText;
                                      table = this.children[1].children[0].children[0].children[3];
                                      theadTR = table.children[0].children[0];
                                      body1 = [];
                                      body2 = [];
                                      $(theadTR).children('th').each(function(ind, el){
                                        text1 = this.innerText;
                                        style1 = "tableHeader";
                                        body2.push({text :text1, style:style1})
                                      });
                                      body1.push(body2);


                                      tbody = table.children[1];
                                      $(tbody).children('tr').each(function(){
                                        body2 =[];
                                        $(this).children('td').each(function(ind, el){
                                          text1 = this.innerText;
                                          style1 = (ind%2==0)?"tableBodyEven":"tableBodyOdd";
                                          body2.push({text:text1, style:style1});
                                        });
                                        body1.push(body2);
                                      });
                                      layout1 = "noBorders";
                                      

                                      doc.content.push({text:title,style:"title", margin:[0,0,0,12],  });
                                      doc.content.push({table: {body:body1, headerRows:1, widths:['33%', '33%', '34%']},layout:"noBorders", pageBreak:'after'});


                                      
                                    })
                                    doc.content[1] = { text: "Annual Plan ", style:'title', margin : [0,0,0,12]};
                                   
                                    doc.pageSize = 'LEGAL';
                                    doc.pageOrientation ='landscape';
                                    doc.defaultStyle.fontSize = 10;
                                    doc.styles.tableHeader.fillColor = '#E70033';

                                    // doc.content[1].layout= 'lightHorizontalLines';
                                    for(j = 3; j<doc.content.length; j+=2){
                                    doc.content[j].layout = {
                                        hLineWidth: function (i, node) {
                                            if(i === 1){
                                                return 2;
                                            }
                                            else if(i > 1){
                                                return 1;
                                            }
                                            else {
                                                return 0;
                                            }
                                        },
                                        vLineWidth: function (i, node) {
                                            return 0;
                                        },
                                        hLineColor: function (i, node) {
                                            if(i === 1){
                                                return '#000';
                                            }
                                            else if(i > 1){
                                                return '#ccc';
                                            }
                                            else {
                                                return 'transparent';
                                            }
                                        },
                                        // vLineColor: function (i, node) {
                                        //     return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';
                                        // },
                                        paddingLeft: function(i, node) { return 5; },
                                        paddingRight: function(i, node) { return 5; },
                                        paddingTop: function(i, node) { return 5; },
                                        paddingBottom: function(i, node) { return 5; }
                                    };
                                  }
                                    doc.content.splice( 0, 0, {
                                        margin: [ 0, 0, 0, 12 ],
                                        alignment: 'center',
                                        width: 150,
                                        image: 'data:image/png;base64,[encoded data, 31780 characters]'
                                    } );

                                    //$('#loadingModal').modal('hide');

                                }
                            }
                        
                    
     
                ],
            });
            // tables.push(table);

            // Apply the search
            table.columns().every( function ()
            {
                // Search by keyword
                var column = this;
                $('input.column-search-bar', column.footer()).on('keyup change', function () {
                    if (column.search() !== this.value) {
                        console.log(this.value)

                        column
                            .search(this.value)
                            .draw();
                    }
                } );

                // Search by dropdown menu
                column.data().unique().sort().each( function (d, j) {
                    $('select.column-search-select', column.footer()).append('<option value="'+d+'">'+d+'</option>');
                });

                $('.column-search-select', column.footer()).on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex($(this).val());

                column
                    .search(val ? '^'+val+'$' : '', true, false)
                    .draw();

                } );
            } );

            table.buttons().container()
            .appendTo( $('.col-sm-6:eq(0)', table.table().container()));

            $(document).on('click', '.buttons-columnVisibility', function(){
                console.log('visibility toggled');
                table.columns.adjust().responsive.recalc();
            });
        return table;
}


function createTheReportAll(table1){
  title1 = table1[0].dataset.title
  
            table = $(table1).DataTable({
                lengthMenu: [5, 10, 25, 50],
                autoWidth: false,
                retrieve: true,
                pageLength: 10,
                // //fixed cols
                // fixedColumns:   {
                //     leftColumns: 1,
                // },
                // scrollY:        "600px",
                // scrollX:        true,
                // scrollCollapse: true,

                bSortCellsTop: true, // To apply sort using top row only
                order: [[ 0, "asc" ]],
                dom: 'Bflrtip',
                buttons: [
                    {
                        
   
                                extend: 'pdfHtml5',
                                attr: {
                                  id:'report_print'
                                },
                                exportOptions: {
                                  
                                    columns: ':visible',
                                    stripNewlines: false,
                                    title: title1,
                                    text: title1,
                                    
                                },
                                customize: function(doc, dt){
                                    //$('#loadingModal').modal('show');
                                    counterTable = 0;
                                    $('.panel').each(function(index, element){
                                      title = this.children[0].innerText;
                                      table = this.children[1].children[0].children[0].children[3];
                                      theadTR = table.children[0].children[0];
                                      body1 = [];
                                      body2 = [];
                                      $(theadTR).children('th').each(function(ind, el){
                                        text1 = this.innerText;
                                        style1 = "tableHeader";
                                        body2.push({text :text1, style:style1})

                                      });
                                      style1 = "tableHeader";
                                      body2.push({text: "Was the transformative action achieved?", style:style1})
                                    
                                      body2.push({text: "Was it useful?", style:style1});
                                      body2.push({text:"Is it going to be continued next semester?", style:style1});
                                      body2.push({text:"Comments about TA", style:style1});
                                      

                                      body1.push(body2);


                                      tbody = table.children[1];
                                      
                                      $(tbody).children('tr').each(function(){
                                        body2 =[];
                                        indexFor = 0
                                        $(this).children('td').each(function(ind, el){
                                          text1 = this.innerText;
                                          indexFor = ind;
                                          style1 = (ind%2==0)?"tableBodyEven":"tableBodyOdd";
                                          body2.push({text:text1, style:style1});
                                        });
                                        $()
                                        if($('input[name="seHizo'+amount_of_TA_per_objective[counterTable][0]+'"]:checked').val()=="1"){
                                        ta_done = '1. Yes';
                                        }
                                        else{
                                          ta_done = '1. No';
                                        }
                                        
                                        if($('input[name="logro'+amount_of_TA_per_objective[counterTable][0]+'"]:checked').val()=="1"){
                                          ta_logr ="1. Yes";
                                        }
                                        else{
                                          
                                          ta_logr = "1. No";
                                        }
                                        
                                        paragraph2 = '1. ' +$('textarea[name="comment2'+amount_of_TA_per_objective[counterTable][0]+'"]').val();
                                        
                                        if($('input[name="continued'+amount_of_TA_per_objective[counterTable][0]+'"]:checked').val()=="1"){
                                          ta_continued= "1. Yes";
                                        }
                                        else{
                                          
                                          ta_continued= "1. No";
                                        }

                                        for(j = 1; j<amount_of_TA_per_objective[counterTable].length;j++){
                                          
                                        if($('input[name="seHizo'+amount_of_TA_per_objective[counterTable][j]+'"]:checked').val()=="1"){
                                          
                                          ta_done += '\n\n'+(j+1) +'. Yes';
                                        }
                                        else{
                                          
                                          ta_done += '\n\n'+(j+1) +'. No';
                                        }
                                        
                                        if($('input[name="logro'+amount_of_TA_per_objective[counterTable][j]+'"]:checked').val()=="1"){
                                          ta_logr += '\n\n'+(j+1) +'. Yes';
                                        }
                                        else{
                                          
                                          ta_logr += '\n\n'+(j+1) +'. No';
                                        }
                                        paragraph2 += '\n\n' +(j+1) +'. '+$('textarea[name="comment2'+amount_of_TA_per_objective[counterTable][j]+'"]').val();
                                        
                                        if($('input[name="continued'+amount_of_TA_per_objective[counterTable][j]+'"]:checked').val()=="1"){
                                          ta_continued += '\n\n'+(j+1) +'. Yes'; 
                                        }
                                        else{
                                          
                                          ta_continued += '\n\n'+(j+1) +'. No'; 
                                        }
                                        }
                                        indexFor +=1;
                                        style1 =(indexFor%2==0)?"tableBodyEven":"tableBodyOdd";
                                        indexFor +=1;
                                        style2 =(indexFor%2==0)?"tableBodyEven":"tableBodyOdd";
                                        indexFor +=1;
                                        style3 = (indexFor%2==0)?"tableBodyEven":"tableBodyOdd";
                                        indexFor +=1;
                                        style4 = (indexFor%2==0)?"tableBodyEven":"tableBodyOdd";
                                        
                                        body2.push({text: ta_done, style: style1 });
                                        body2.push({text: ta_logr, style: style2});
                                        body2.push({text: ta_continued, style: style3});
                                        body2.push({text: paragraph2, style: style4 });
                                        body1.push(body2);
                                        counterTable +=1;
                                          
                                      
                                      });
                                      
                                      layout1 = "noBorders";
                                      

                                      doc.content.push({text:title,style:"title", margin:[0,0,0,12],  });
                                      doc.content.push({table: {body:body1, headerRows:1, widths: ['12.5%', '12.5%', '12.5%', '12.5%', '12.5%', '12.5%', '12.5%', '12.5%']},layout:"noBorders", pageBreak:'after'});


                                      
                                    })
                                    
                                    doc.content[1] = { text: "Annual Plan", style:'title', margin : [0,0,0,12]};
                                   
                                    doc.pageSize = 'LEGAL';
                                    doc.pageOrientation ='landscape';
                                    doc.defaultStyle.fontSize = 10;
                                    doc.styles.tableHeader.fillColor = '#E70033';

                                    // doc.content[1].layout= 'lightHorizontalLines';
                                    for(j = 3; j<doc.content.length; j+=2){
                                    doc.content[j].layout = {
                                        hLineWidth: function (i, node) {
                                            if(i === 1){
                                                return 2;
                                            }
                                            else if(i > 1){
                                                return 1;
                                            }
                                            else {
                                                return 0;
                                            }
                                        },
                                        vLineWidth: function (i, node) {
                                            return 0;
                                        },
                                        hLineColor: function (i, node) {
                                            if(i === 1){
                                                return '#000';
                                            }
                                            else if(i > 1){
                                                return '#ccc';
                                            }
                                            else {
                                                return 'transparent';
                                            }
                                        },
                                        // vLineColor: function (i, node) {
                                        //     return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';
                                        // },
                                        paddingLeft: function(i, node) { return 5; },
                                        paddingRight: function(i, node) { return 5; },
                                        paddingTop: function(i, node) { return 5; },
                                        paddingBottom: function(i, node) { return 5; }
                                    };
                                  }
                                    doc.content.splice( 0, 0, {
                                        margin: [ 0, 0, 0, 12 ],
                                        alignment: 'center',
                                        width: 150,
                                        image: 'data:image/png;base64,[encoded data, 31780 characters]'
                                    } );

                                    //$('#loadingModal').modal('hide');

                                }
                            }
                        
                    
     
                ],
            });
            // tables.push(table);

            // Apply the search
            table.columns().every( function ()
            {
                // Search by keyword
                var column = this;
                $('input.column-search-bar', column.footer()).on('keyup change', function () {
                    if (column.search() !== this.value) {
                        console.log(this.value)

                        column
                            .search(this.value)
                            .draw();
                    }
                } );

                // Search by dropdown menu
                column.data().unique().sort().each( function (d, j) {
                    $('select.column-search-select', column.footer()).append('<option value="'+d+'">'+d+'</option>');
                });

                $('.column-search-select', column.footer()).on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex($(this).val());

                column
                    .search(val ? '^'+val+'$' : '', true, false)
                    .draw();

                } );
            } );

            table.buttons().container()
            .appendTo( $('.col-sm-6:eq(0)', table.table().container()));

            $(document).on('click', '.buttons-columnVisibility', function(){
                console.log('visibility toggled');
                table.columns.adjust().responsive.recalc();
            });
        return table;
}

function createTheTrans(table1){
  title1 = table1[0].dataset.title
  
            table = $(table1).DataTable({
                lengthMenu: [5, 10, 25, 50],
                autoWidth: false,
                retrieve: true,
                pageLength: 10,
                // //fixed cols
                // fixedColumns:   {
                //     leftColumns: 1,
                // },
                // scrollY:        "600px",
                // scrollX:        true,
                // scrollCollapse: true,

                bSortCellsTop: true, // To apply sort using top row only
                order: [[ 0, "asc" ]],
                dom: 'Bflrtip',
                buttons: [
                    {
                        
   
                                extend: 'pdfHtml5',
                                attr: {
                                  id:'trans_print'
                                },
                                exportOptions: {
                                  
                                    columns: ':visible',
                                    stripNewlines: false,
                                    title: title1,
                                    text: title1,
                                    
                                },
                                customize: function(doc, dt){
                                    //$('#loadingModal').modal('show');

                                    this_is_the_json = json_to_use.Trans_act;
                                    table = $('#allTransToExport');
                                    for(trans in this_is_the_json)
                                    {
                                      if(json_to_use.suggested && json_to_use.suggested[trans]){
                                        suggested = json_to_use.suggested[trans][0];
                                      }
                                      else suggested =0;
                                      title_trans = this_is_the_json[trans].description;
                                      json_outcomes = json_to_use.outcomes[trans];
                                      if(suggested){
                                      doc.content.push({text:'\n\n'+title_trans+'['+suggested.surnames + ', '+suggested.first_name+']' ,style:"title", margin:[0,0,0,12],  });
                                      }
                                      else{
                                        doc.content.push({text:'\n\n'+title_trans ,style:"title", margin:[0,0,0,12],  });
                                      }

                                      for(outcome_index in json_outcomes){
                                      outcome = json_outcomes[outcome_index];
                                      title_outcome = outcome.name;
                                      
                                      theadTR = table[0].children[0].children[0];
                                      body1 = [];
                                      body2 = [];
                                      $(theadTR).children('th').each(function(ind, el){
                                        text1 = this.innerText;
                                        style1 = "tableHeader";
                                        body2.push({text :text1, style:style1})

                                      });
                                      
                                      body1.push(body2);
                                     
                                      doc.content.push({text:'\n\n'+title_outcome+'\n',style:"title", margin:[0,0,0,12],  });
                                      counter =0;
                                      for(typ_index in json_to_use.typ_objective[outcome.id][trans]){
                                        body2 =[];
                                        typ = json_to_use.typ_objective[outcome.id][trans][typ_index];
                                        objective = json_to_use.objective[outcome.id][typ.id][trans];
                                        coordinator = json_to_use.coordinator[outcome.id][typ.id][trans];
                                        proposed_date = json_to_use.proposed_date[outcome.id][typ.id][trans].proposed_date;
                                        all_info =json_to_use.all_info_report[outcome.id][typ.id][trans];
                                        if(all_info.cycle_of_life ==2){
                                          cycle = "Realized";
                                        }
                                        else{
                                          cycle = "Proposed";
                                        }
                                        if(all_info.semester_continue){
                                          cycle += " and continued";
                                        }
                                        else{
                                          cycle += "and discontinued";
                                        }
                                        semester_used = all_info.name;
                                        style1 = (counter%2==0)?"tableBodyEven":"tableBodyOdd";
                                        
                                        body2.push({text:objective.text, style:style1});
                                        counter +=1;
                                        style1 = (counter%2==0)?"tableBodyEven":"tableBodyOdd";
                                        body2.push({text:proposed_date.substr(0, 10), style:style1});
                                        counter +=1;
                                        style1 = (counter%2==0)?"tableBodyEven":"tableBodyOdd";
                                        body2.push({text:coordinator.surnames + ', '+coordinator.first_name, style:style1});
                                        counter +=1;
                                        style1 = (counter%2==0)?"tableBodyEven":"tableBodyOdd";
                                        body2.push({text: cycle, style:style1});
                                        counter +=1;
                                        style1 = (counter%2==0)?"tableBodyEven":"tableBodyOdd";
                                        body2.push({text:semester_used, style:style1});
                                        counter +=1;
                                        style1 = (counter%2==0)?"tableBodyEven":"tableBodyOdd";
                                        body2.push({text:'', style:style1});

                                        body1.push(body2);
                                        


                              


                                      }
                                      doc.content.push({table: {body:body1, headerRows:1, widths: ['30%', '12%','14%','14%','10%','20%']},layout:"noBorders"});
                                      
                                      




                                      



                                    }
                                    }
                                    doc.content[1] = { text: "Transformative Actions Report", style:'title', margin : [0,0,0,12]};
                                   
                                    doc.pageSize = 'LEGAL';
                                    doc.pageOrientation ='landscape';
                                    doc.defaultStyle.fontSize = 10;
                                    doc.styles.tableHeader.fillColor = '#E70033';

                                    // doc.content[1].layout= 'lightHorizontalLines';
                                    for(j = 3; j<doc.content.length; j+=2){
                                    doc.content[j].layout = {
                                        hLineWidth: function (i, node) {
                                            if(i === 1){
                                                return 2;
                                            }
                                            else if(i > 1){
                                                return 1;
                                            }
                                            else {
                                                return 0;
                                            }
                                        },
                                        vLineWidth: function (i, node) {
                                            return 0;
                                        },
                                        hLineColor: function (i, node) {
                                            if(i === 1){
                                                return '#000';
                                            }
                                            else if(i > 1){
                                                return '#ccc';
                                            }
                                            else {
                                                return 'transparent';
                                            }
                                        },
                                        // vLineColor: function (i, node) {
                                        //     return (i === 0 || i === node.table.widths.length) ? 'black' : 'gray';
                                        // },
                                        paddingLeft: function(i, node) { return 5; },
                                        paddingRight: function(i, node) { return 5; },
                                        paddingTop: function(i, node) { return 5; },
                                        paddingBottom: function(i, node) { return 5; }
                                    };
                                  }
                                    doc.content.splice( 0, 0, {
                                        margin: [ 0, 0, 0, 12 ],
                                        alignment: 'center',
                                        width: 150,
                                        image: 'data:image/png;base64,[encoded data, 31780 characters]'
                                    } );

                                    //$('#loadingModal').modal('hide');

                                }
                            }
                        
                    
     
                ],
            });
            // tables.push(table);

            // Apply the search
            table.columns().every( function ()
            {
                // Search by keyword
                var column = this;
                $('input.column-search-bar', column.footer()).on('keyup change', function () {
                    if (column.search() !== this.value) {
                        console.log(this.value)

                        column
                            .search(this.value)
                            .draw();
                    }
                } );

                // Search by dropdown menu
                column.data().unique().sort().each( function (d, j) {
                    $('select.column-search-select', column.footer()).append('<option value="'+d+'">'+d+'</option>');
                });

                $('.column-search-select', column.footer()).on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex($(this).val());

                column
                    .search(val ? '^'+val+'$' : '', true, false)
                    .draw();

                } );
            } );

            table.buttons().container()
            .appendTo( $('.col-sm-6:eq(0)', table.table().container()));

            $(document).on('click', '.buttons-columnVisibility', function(){
                console.log('visibility toggled');
                table.columns.adjust().responsive.recalc();
            });
        return table;
}
      </script>

@stop


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

