@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 --}}
  <script type="text/javascript">
  function filterOutcomes() {
    // Declare variables
    var input, filter, div, li, i, outcomeText;
    input = document.getElementById('userInput');
    filter = input.value.toUpperCase();
    div = document.getElementById("list");
    li = div.getElementsByTagName('li');

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

  
    <div class="row" style="display: flex;">
        <div class="category" >
          <label for="school">School</label>
          <div class="select">
            <select multiple class="selectpicker" name="school" id="school">
              <option value="0" selected="selected">All</option>
              @foreach ($schools as $school)
                <option value="{{$school->id}}">{{$school->name}}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="category" >
          <label for="program" >Academic Program</label>
          <div class="select">
            <select multiple class="selectpicker" name="program" id="program">
              <option value="0" selected="selected">All</option>
              @foreach ($programs as $program)
                <option value="{{$program->id}}">{{$program->name}}</option>
              @endforeach
            </select>
          </div>
        </div>
        <div class="category" >
            <label for="semesters">Semester</label>
            <div class="select">
              <select multiple class="selectpicker" name="semesters" id="semesters">
                <option value="0" selected="selected">All</option>
                @foreach ($semesters as $semester)
                  <option value="{{$semester->id}}">{{$semester->name}}</option>
                @endforeach
              </select>
            </div>
          </div>
      </div>
      <br>
      
  
  <div class = "row">
    <div class="col-md-3">
      <input class="form-control" type="text" id="userInput" onkeyup="filterOutcomes()" placeholder="Search for Learning Outcomes..">
      <div class="list-group" id='list'>
        @foreach ($outcomes as $outcome)
          
            
              <li data-outcome-id="{{ $outcome->id }}"class="list-group-item">{{ $outcome->name }} </li>
        
        @endforeach
      </div>
    </div>

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



          <div class="table-responsive table-responsive-0">
            {{-- tables are appended here --}}
            {{-- <table id="example" class="table table-striped table-condensed" width="100%"></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 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 =['20%', '20%', '20%', '20%', '20%']
                                    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;
}


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

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

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

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

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

  // When export button is clicked, export all tables as PDF
 
  // When list item is clicked, load corresponding info
  $('.list-group-item').on('click', function()
  {
    var id = $(this).data('outcome-id');
    var semester = $('#semesters').val();
    var programs = $('#program').val();

    $.post(
    "{{ URL::action('TransformativeActionsController@fetchCourses') }}",
    { id: id, 
        
        programs:programs,
        semesters:semesters,

    
    },
    function(data)
    {
        
    }
    );


  })
});
    </script>
@stop

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

@section('javascript')
/*
$(document).ready(function()
{
  // --------------------------------------------------------------------------
  // Page load
  // --------------------------------------------------------------------------

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

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

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

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

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

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

  // When export button is clicked, export all tables as PDF
  $(document).on('click', '.export-all', function() {
    var export_type = $(this).attr('class');
    console.log('export_type');
    console.log(export_type);
    var r = confirm("Are you sure you want to download all programs info as separate PDFs? \n It may take a moment to process.");
    if (r == true) {

      //var 'tables' is defined in master.blade.php
      console.log("export all");
      $('table').each(function( t ) {
        var table = $(this).DataTable();

        if(export_type =="export-all print-all"){
          $('.table-responsive').show();
          table.buttons('0-0').trigger();
        }
        else if (export_type =="export-all excel-all"){
          $('.table-responsive').show();
          table.buttons('0-1').trigger();
        }
        else if (export_type =="export-all pdf-all"){
          $('.table-responsive').show();
          table.buttons('0-2').trigger();
        }
      });

      var current = $('select').val();
      $('.table-responsive').hide();
      $('.table-responsive-0').show();
      $('.table-'+current).show();
    }
  });

  // When list item is clicked, load corresponding info
  $('.list-group-item').on('click', function()
  {
    var id = $(this).data('outcome-id');
    var tables = [];

    $.post(
    "{{ URL::action('OutcomesController@fetchOutcome') }}",
    { id: id },
    function(data)
    {
      var outcome = data.outcome;
      var outcome_id = outcome.id;
      var name = outcome.name;
      var definition = outcome.definition;
      var criteria = outcome.criteria;

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

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

      //Empty table
      $('.table-responsive-0').empty();

      // Add new criteria
      if(criteria.length>0){

        // populate the selector for viewing different levels
        var selector = $('.view-scales');
        selector.empty();
        $.each(criteria, function(index, criterion_info){
          var criterions_levels = criterion_info.amount_of_levels;
          var new_option = $('<option />');
          new_option.attr('value',criterions_levels).html(criterions_levels);
          new_option.appendTo(selector);
        });

        //escibir los valores del outcome seleccionado
        $.each(criteria, function(index, criterion_info){
          var dataset = Array();
          var criterions = criterion_info[0];
          var criterions_levels = criterion_info.amount_of_levels;

          $.each(criterions, function(index, criterion){
              //
              var row = Array();
              var criterion_name = criterion.name;
              var criterion_scales = criterion.scales;

              row.push(criterion_name);
              $.each(criterion_scales, function(index, scale){
                  //
                  var title = scale.title;
                  var description = scale.description;

                  var cell_text = '<b>'+title+'</b><br>\n'+description;
                  row.push(cell_text);
              });
              if(criterion_scales.length < criterions_levels){
                var i = criterion_scales.length;
                while (i < criterions_levels){
                  //
                  var description = ' ';

                  row.push(description);
                  i++;
                }
              }
              dataset.push(row);
          });
          var columns_titles = Array();
          columns_titles.push({title: "Criterion"})
          var i = 0;
          while(i < criterions_levels){
            columns_titles.push({title: "Level "+(i+1)})
            i++;
          }

          var table_id = 'table-'+criterions_levels;
          var new_table_div = $('<div />').attr('class','table-responsive table-div '+table_id);
          new_table_div.append('<hr>');

          new_table_div.append('<hr>');
          new_table_div.append('<p><b class="h3">Criterions with '+criterions_levels+' levels</b></p>');
          new_table_div.append('<table id="'+table_id+'" class="table table-striped table-condensed" width="100%"></table>');

          new_table_div.appendTo('.table-responsive-0');

          var table2 = $('#'+table_id).DataTable( {
            buttons: [
            {
              lengthMenu: [5, 10, 25, 50],
              autoWidth: false,
              retrieve: true,
              pageLength: 10,
              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,
                },
                customize: function(doc){
                  //$('#loadingModal').modal('show');

                  doc.pageSize = 'LEGAL';
                  doc.pageOrientation ='landscape';
                  doc.defaultStyle.fontSize = 10;
                  doc.styles.tableHeader.fillColor = '#E70033';

                  // doc.content[1].layout= 'lightHorizontalLines';
                  doc.content[1].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]'
                    } );

                  }
                },
                ]
              },
              {
                extend: 'colvis',
                columns: ':gt(0)',
                text: 'Column visibility <span class="caret"></span>',
              }
              ],
              data: dataset,
              columns: columns_titles,
            } );

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


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

          tables.push(table);

        });

        var first_table = '.table-'+criteria[0].amount_of_levels;

        $('.table-responsive').hide();
        $('.table-responsive-0').show();
        $(first_table).show();
      } // if


      //else
      //$('table').hide();

      // Update display
      {{-- table.draw(); --}}
    }
    );


  })
});
*/
@stop
