<?php
        $xcrud = Xcrud::get_instance();  
        $xcrud->table('ktsgk');
        $xcrud->where('datum >', '2017-01-01');
        $xcrud->columns('datum,maincategorie,subcategorie,cost,comment');
        $xcrud->duplicate_button();
        $xcrud->benchmark(true);
        $xcrud->label(array(
            'maincategorie' => 'Főkategória', 
            'subcategorie' => 'Alkategória',
            'datum' => 'Dátum',
            'created' => 'Rögzítve',
            'cost' => 'Költség',
            'comment' => 'Megjegyzés',
        ));
        
        $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');
       //$grid_data = $xcrud->chart_data( 'functions.php');
        $xcrud->change_type('cost', 'text', '', array('maxlength'=>100));
        $xcrud->before_insert('math_input', 'functions.php');
        $xcrud->before_update('math_input', 'functions.php');
        //$xrcud->before_list_callback($grid_data, $xcrud);
       //print_r($xcrud->result);
        $xcrud->change_type('simple_upload', 'file', '', array('not_rename'=>true));
        //$xcrud->change_type('created', 'hidden', false);
        $xcrud->sum('cost', 'align-center', 'Total {value}');
     echo Xcrud::load_css();
        echo Xcrud::load_js();    
    ?>
    
    <button onclick="Xcrud.request('.xcrud-ajax',Xcrud.list_data('.xcrud-ajax',{task:'edit',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>

<link rel='stylesheet' href='assets/fullcalendar.css' />
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.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 () {

     
    $.ajax({ 
        type: 'POST', 
        url: '../demos/ownpages/ajax_fc.php', 
        data: { 
            start: '2017-01-01',
            end: '2018-12-31',
            table: 'ktsgk'
        }, 
        dataType: 'json',
        success: function (daata) { 
        // console.log(daata);
            var chart = AmCharts.makeChart( "chartdiv", {
                  "type": "pie",
                  "theme": "none",
                  "dataProvider": daata.pie,
                  "valueField": "loss",
                  "titleField": "cat",
                  "outlineAlpha": 0.1,
                  "depth3D": 15,
                  "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
                  "angle": 30,
                  "export": {
                    "enabled": true
                  }
                } );
            var chart3 = AmCharts.makeChart("chartdiv3", {
                "type": "serial",
            	"theme": "none",
                "legend": {
                    "horizontalGap": 10,
                    "maxColumns": 1,
                    "position": "right",
            		"useGraphSettings": true,
            		"markerSize": 10
                },
                "dataProvider":daata.compare.data,
                "valueAxes": [{
                    "stackType": "regular",
                    "axisAlpha": 0.3,
                    "gridAlpha": 0
                }],
                "graphs":daata.compare.graph,
                "categoryField": "type",
                "categoryAxis": {
                    "gridPosition": "start",
                    "axisAlpha": 0,
                    "gridAlpha": 0,
                    "position": "left"
                },
                "export": {
                	"enabled": true
                 }
            
            });
        }
    }); 
    $.ajax({ 
        type: 'POST', 
        url: '../demos/ownpages/ajax_ch.php', 
        data: { 
            start: '2017-01-01',
            end: '2018-12-31',
            table: 'ktsgk'
        }, 
        dataType: 'json',
        success: function (data_ch) { 
        // console.log(data_ch);
        var chart2 = AmCharts.makeChart("chartdiv2", {
            "type": "serial",
            "theme": "none",
            "marginRight": 40,
            "marginLeft": 40,
            "autoMarginOffset": 20,
            "mouseWheelZoomEnabled":true,
            "dataDateFormat": "YYYY-MM-DD",
            "valueAxes": [{
                "id": "v1",
                "axisAlpha": 0,
                "position": "left",
                "ignoreAxisWidth":true
            }],
            "balloon": {
                "borderThickness": 1,
                "shadowAlpha": 0
            },
            "graphs": [{
                "id": "g1",
                "balloon":{
                  "drop":true,
                  "adjustBorderColor":false,
                  "color":"#ffffff"
                },
                "bullet": "round",
                "bulletBorderAlpha": 1,
                "bulletColor": "#FFFFFF",
                "bulletSize": 5,
                "hideBulletsCount": 50,
                "lineThickness": 2,
                "title": "red line",
                "useLineColorForBulletBorder": true,
                "valueField": "value",
                "balloonText": "<span style='font-size:10px;'>[[info]]</span>"
            }],
            "chartScrollbar": {
                "graph": "g1",
                "oppositeAxis":false,
                "offset":30,
                "scrollbarHeight": 80,
                "backgroundAlpha": 0,
                "selectedBackgroundAlpha": 0.1,
                "selectedBackgroundColor": "#888888",
                "graphFillAlpha": 0,
                "graphLineAlpha": 0.5,
                "selectedGraphFillAlpha": 0,
                "selectedGraphLineAlpha": 1,
                "autoGridCount":true,
                "color":"#AAAAAA"
            },
            "chartCursor": {
                "pan": true,
                "valueLineEnabled": true,
                "valueLineBalloonEnabled": true,
                "cursorAlpha":1,
                "cursorColor":"#258cbb",
                "limitToGraph":"g1",
                "valueLineAlpha":0.2,
                "valueZoomable":true
            },
            "valueScrollbar":{
              "oppositeAxis":false,
              "offset":50,
              "scrollbarHeight":10
            },
            "categoryField": "date",
            "categoryAxis": {
                "parseDates": true,
                "dashLength": 1,
                "minorGridEnabled": true
            },
            "export": {
                "enabled": true
            },
            "dataProvider": data_ch,
        });

        }
    });
  
});

</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='calendar'></div>
    </div>
</div>
