<?php
        $xcrud = Xcrud::get_instance();  
        $xcrud->table('konyvtar');
        $xcrud->columns('datum,name,categorie,cost,special_cost,comment,simple_upload','who','owning');
        $xcrud->order_by('datum','desc');
        $xcrud->duplicate_button();
        $xcrud->table_name('Könyvtár Vivinek', '','icon-leaf');
        $xcrud->benchmark(true);
        $xcrud->where('datum >', '2019-12-31')->where('datum <=', '2020-12-31');
        $xcrud->limit(100);
        $xcrud->label(array(
            'simple_upload'=> 'Kép',
            'name' => 'Név', 
            'categorie' => 'Kategória',
            'datum' => 'Dátum',
            'created' => 'Rögzítve',
            'cost' => 'Költség',
            'comment' => 'Megjegyzés',
            'simple_upload'=> 'kép',
            'who'=> 'ki veszi meg',
            'owning'=> 'Megvan',
        ));
        /**/
        $xcrud->validation_required('categorie');
        $xcrud->highlight_row('special_cost', '>', 0, '#9ADAFF');
        $xcrud->highlight('priceEach', '>', -300, '#9ADAFF');
        $xcrud->pass_default('datum', date('Y-m-d'));
        $xcrud->pass_default('created', date('Y-m-d H:i:s'));
        $xcrud->before_list('chart_data', 'functions.php');
        $xcrud->field_callback('maincategorie','cat_input');
        $xcrud->field_callback('subcategorie','cat_input');
        $xcrud->change_type('cost', 'text', '', array('maxlength'=>100));
        $xcrud->before_insert('math_input', 'functions.php');
        $xcrud->before_update('math_input', 'functions.php');
        $xcrud->change_type('simple_upload', 'file', '', array('not_rename'=>true));
      
        $xcrud->sum('cost', 'align-center', 'Total {value}');
        $xcrud->create_action('my_action','my_function'); 
        
        echo Xcrud::load_css();
        echo Xcrud::load_js();   
    ?>
    <button class="xcrud-action" data-task="action" data-action="my_action">GO!</button> 
    <button onclick="Xcrud.request('.xcrud-ajax',Xcrud.list_data('.xcrud-ajax',{task:'list',primary:270}))">Edit entry </button>
    
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/patterns.js"></script>

<!-- Resources amcharts 4-->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

    <script type="text/javascript">
     console.log(''+ JSON.stringify(Xcrud));
jQuery(document).on("xcrudafterrequest",function(event,container){
//   console.log('dsdsds'+Xcrud.data);
    if(Xcrud.current_task == 'list')
    {
       // Xcrud.show_message(container,'WOW!','success');

    }
 
});
</script>

<script>
var chart2 ="";
 $(document).ready(function () {
  
});

</script>

<!-- Chart code -->
<script>
/*am4core.ready(function() {
    
    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end
    
    // Create chart instance
    var chart = am4core.create("chartdiv4", am4charts.XYChart);

   // Add data
    $.ajax({ 
        type: 'POST', 
        url: '../demos/ownpages/ajax_cat_sum.php', 
        data: { 
            start: '2017-01-01',
            end: '2020-12-31',
            table: 'ktsgkbank'
        }, 
        dataType: 'json',
        success: function (cat_sum) { 
            chart.data = cat_sum;
            console.log(cat_sum);
        }
    }); 

    // Create axes
    var yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
    yAxis.dataFields.category = "maincat";
    yAxis.renderer.grid.template.location = 0;
    yAxis.renderer.labels.template.fontSize = 10;
    yAxis.renderer.minGridDistance = 10;
    
    var xAxis = chart.xAxes.push(new am4charts.ValueAxis());
    
    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueX = "sum";
    series.dataFields.categoryY = "maincat";
    series.columns.template.tooltipText = "{categoryY}: [bold]{valueX}[/]";
    series.columns.template.strokeWidth = 0;
    series.columns.template.adapter.add("fill", function(fill, target) {
      if (target.dataItem) {
        switch(target.dataItem.dataContext.Month) {
          case "01":
            return chart.colors.getIndex(0);
            break;
          case "02":
            return chart.colors.getIndex(1);
            break;
          case "03":
            return chart.colors.getIndex(2);
            break;
          case "04":
            return chart.colors.getIndex(3);
            break;
         case "05":
            return chart.colors.getIndex(4);
            break;  
         case "06":
            return chart.colors.getIndex(5);
            break;
         case "07":
            return chart.colors.getIndex(6);
            break;
        case "08":
            return chart.colors.getIndex(7);
            break;
        }
      }
      return fill;
    });
    
    // Add ranges
    function addRange(label, start, end, color) {
      var range = yAxis.axisRanges.create();
      range.category = start;
      range.endCategory = end;
      range.label.text = label;
      range.label.disabled = false;
      range.label.fill = color;
      range.label.location = 0;
      range.label.dx = -130;
      range.label.dy = 12;
      range.label.fontWeight = "bold";
      range.label.fontSize = 12;
      range.label.horizontalCenter = "left"
      range.label.inside = true;
      
      range.grid.stroke = am4core.color("#396478");
      range.grid.strokeOpacity = 1;
      range.tick.length = 200;
      range.tick.disabled = false;
      range.tick.strokeOpacity = 0.6;
      range.tick.stroke = am4core.color("#396478");
      range.tick.location = 0;
      
      range.locations.category = 1;
    }
    
    addRange("01", "Banki költség", "Lakás", chart.colors.getIndex(0));
    addRange("02", "Egyéb", "Lakás", chart.colors.getIndex(1));
    addRange("03", "Banki költség", "Lakás", chart.colors.getIndex(2));
    addRange("04", "Banki költség", "Lakás", chart.colors.getIndex(3));
    addRange("05", "Egyéb", "Lakás", chart.colors.getIndex(4));
    addRange("06", "Banki költség", "Autó", chart.colors.getIndex(5));
    addRange("07", "Banki költség", "Autó", chart.colors.getIndex(6)); 
    addRange("08", "Tömegközlekedés", "Szórakozás", chart.colors.getIndex(7));

    
    chart.cursor = new am4charts.XYCursor();

}); // end am4core.ready()*/
</script>
<script>


function zoomChart() {
    chart2.zoomToIndexes(chart2.dataProvider.length - 40, chart2.dataProvider.length - 1);
}
</script>
<?echo $xcrud->render();?>
<div class="row">
    <div class="col-md-12">
        <div id="chartdiv2" style="width: 100%;height: 550px;"></div>
    </div>
    <div class="col-md-12">
        <div id="chartdiv" style="width: 100%;height: 350px;"></div>
    </div>
    <div class="col-md-12">
        <div id="chartdiv3" style="width: 100%;height: 350px;"></div>
    </div>
    <div class="col-md-12">
        <div id="chartdiv4" style=" width: 100%;height: 800px;"></div>
    </div>
</div>