<?php
    echo '<h1>'. $school->dst_schluessel . ' ' . $school->dst_name .'</h1>';
?>

<div class="controls">
        <button name="load" id="load" class="intext-btn">Load</button>
        <button name="save" id="save" class="intext-btn">Save</button>
      </div>
<div id="showbudget"></div>
<script>
var data = <?php echo json_encode($data); ?>;
  
  var container = document.getElementById('showbudget');
  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: 800,
    rowHeaders: true,
    wordWrap: false,
    colHeaders: ['Name','Count','Comment'] ,
    colWidths: ['500','50','500'],
    columns: [{type: 'dropdown', source: <?php echo json_encode($budgets_arr); ?>},{renderer: "text"},{renderer: "text"}],
    filters: true,
    dropdownMenu: true
  });

  Handsontable.dom.addEvent(save, 'click', function() {
    // save all cell's data
    //console.log(hot.getData());
    //console.log(JSON.stringify({data: hot.getData()}));
    $.ajax({
            url: "<?php echo $this->Url->build(array('controller' => 'schools', 'action' => 'showajax',$school->dst_schluessel), true); ?>",
            data: JSON.stringify(hot.getData()),
            type: 'POST',
            success: function (res) {
                //console.log(res);
                //var data = JSON.parse(res);
              
            }
        });
  });

  $('#load').click(function() {
    location.reload(true);
  });

  </script>