<?php
$cols = array();
array_push($cols,'SNR');
array_push($cols,'Schule');
$col_width = array();
array_push($col_width,'50');
array_push($col_width,'300');
foreach($wlBudgets as $budget) {
    array_push($cols,$budget);
    array_push($col_width,'30');
}
//debug(json_encode($cols));
?>
<div class="controls">
        <button name="load" id="load" class="intext-btn">Load</button>
        <button name="save" id="save" class="intext-btn">Save</button>
        <label><input name="autosave" id="autosave" checked="checked" autocomplete="off" type="checkbox">Autosave</label>
      </div>
      <pre id="example1console" class="console">Data loaded</pre>
<div id="example"></div>
<script>
var data = <?php echo json_encode($data); ?>;
  
  var container = document.getElementById('example');
  var exampleConsole = document.getElementById('example1console');
  var autosave = document.getElementById('autosave');
  var load = document.getElementById('load');
  var save = document.getElementById('save');
  var autosaveNotification;
  var rotated = false;
  
  var hot = new Handsontable(container, {
    data: data,
    width: 1400,
    height: 1000,
    rowHeaders: true,
    wordWrap: false,
    colHeaders: <?php echo json_encode($cols) ?> ,
    colWidths: <?php echo json_encode($col_width) ?>,
    filters: true,
    dropdownMenu: true,
    afterGetColHeader: function(i, TH) {    
        if($(TH).find(".testhead").length == 0) {
            TH.innerHTML = '<div class="testhead">' + TH.innerHTML + '</div>';
        }
    }
  });

  Handsontable.dom.addEvent(save, 'click', function() {
    // save all cell's data
    //console.log(hot.getData());
    //console.log(JSON.stringify({data: hot.getData()}));
    $.ajax({
            url: "sajax",
            data: JSON.stringify(hot.getData()),
            type: 'POST',
            success: function (res) {
                //console.log(res);
                //var data = JSON.parse(res);
              
            }
        });
  });

  </script>