@extends('layouts.default')
@section('content')
<script src="{{ asset ('/assets/js/fusioncharts/fusioncharts.js') }}"></script>
<script src="{{ asset ('/assets/js/fusioncharts/fusioncharts.theme.fusion.js') }}"></script>
<!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">Report </h1>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    
    @php $i=0;@endphp
    @foreach($array as $graph)
      @php
        $data         = json_encode($graph['report_data']); 
        $chart_config = json_decode($graph['chart_config'],true);
        $animation    = $chart_config['animation'];
        $theme        = $chart_config['theme'];
        $width        = $chart_config['width'];
        $height       = $chart_config['height'];
        $graph_type   = $graph['report_type'].$animation;
        $graph_name   = $graph['name'];
      @endphp
      <div class="chart-container" id="chart-container{{$i}}">FusionCharts XT will load here!</div>
      @php
      $div_id = "chart-container".$i;
      $barChart = new FusionCharts($graph_type, "myFirstChart".$i , $width, $height, $div_id, "json",
            ' {
                "chart": {
                    "caption":"'.$chart_config['caption'].'",
                    "numberSuffix": "'.$chart_config['numberSuffix'].'",
                    "paletteColors": "#876EA1",
                    "useplotgradientcolor": "0",
                    "plotBorderAlpha": "0",
                    "bgColor": "#FFFFFFF",
                    "canvasBgColor": "#FFFFFF",
                    "showValues":"1",
                    "showCanvasBorder": "0",
                    "showBorder": "0",
                    "divLineColor": "#DCDCDC",
                    "alternateHGridColor": "#DCDCDC",
                    "labelDisplay": "auto",
                    "baseFont": "Assistant",
                    "baseFontColor": "#153957",
                    "outCnvBaseFont": "Assistant",
                    "outCnvBaseFontColor": "#8A8A8A",
                    "baseFontSize": "13",
                    "outCnvBaseFontSize": "13",
                    "yAxisMinValue":"40",
                    "labelFontColor": "#8A8A8A",
                    "captionFontColor": "#153957",
                    "captionFontBold": "1",
                    "captionFontSize": "20",
                    "subCaptionFontColor": "#153957",
                    "subCaptionfontSize": "17",
                    "subCaptionFontBold": "0",
                    "captionPadding": "20",
                    "valueFontBold": "0",
                    "showAxisLines": "1",
                    "yAxisLineColor": "#DCDCDC",
                    "xAxisLineColor": "#DCDCDC",
                    "xAxisLineAlpha": "15",
                    "yAxisLineAlpha": "15",
                    "toolTipPadding": "7",
                    "toolTipBorderColor": "#DCDCDC",
                    "toolTipBorderThickness": "0",
                    "toolTipBorderRadius": "2",
                    "showShadow": "0",
                    "toolTipBgColor": "#153957",
                    "theme": "'.$theme.'"
                  },

                "data": '.$data.'
            }');
        $barChart->render();      
      $i++;
      @endphp
    @endforeach
   
  </div>
  <!-- /.content-wrapper -->
 
@endsection