<?php
$this->pageTitle='Laporan Pendaftaran';
?>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div class="row">
<div class="col-md-12 no-padding">
<div id="report-daily" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
</div>
<div class="col-md-6 no-padding">
<div id="report-type" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
</div>
<div class="col-md-6 no-padding">
<div id="report-status" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
</div>
</div>

<script>
Highcharts.chart('report-daily', {
  chart: {
    type: 'column'
  },
  credits: {
    enabled: false
  },
  colors: [
    '#3498db',
    '#e67e22',
  ],
  title: {
    text: 'Jumlah Pendaftar Per Hari'
  },
  subtitle: {
    text: 'Terakhir Update <?php echo date('d-m-Y h:i:s'); ?>'
  },
  xAxis: {
    categories: [
      <?php
      $x=0;
      foreach (Users::model()->getReportByDate(1,1) as $data) {
        $x++;
        echo "'".$data['dates']."',";
      }
      ?>
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Peserta'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
    '<td style="padding:0"><b>{point.y:.0f} Peserta</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Perorangan',
    data: [
      <?php
      $x=0;
      foreach (Users::model()->getReportByDate(1,1) as $data) {
        $x++;
        echo $data['totals'].",";
      }
      ?>
      ]
      
    }, {
      name: 'Kelompok',
      data: [
        <?php
        foreach (Users::model()->getReportByDate(1,1) as $data) {
          echo Users::model()->getReportByDate(2,6,$data['dates']);
        }
        ?>
        ]
        
      },
      ]
    });
    
    
    Highcharts.chart('report-type', {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      credits: {
        enabled: false
      },
      colors: [
        '#3498db',
        '#e67e22',
      ],
      title: {
        text: 'Komposisi Pendaftar'
      },
      tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.0f}</b> %'
      },
      accessibility: {
        point: {
          valueSuffix: '%'
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.0f} %'
          }
        }
      },
      series: [{
        name: 'Peserta',
        colorByPoint: true,
        data: [
          {
            name: 'Perorangan',
            y: <?php echo Users::model()->getReportByDate(1,2); ?>
          }, {
            name: 'Kelompok',
            y: <?php echo Users::model()->getReportByDate(2,2); ?>
          },
          ]
        }]
      });
      
      
      
      Highcharts.chart('report-status', {
        chart: {
          type: 'column'
        },
        title: {
          text: 'Status Pendaftar'
        },
        credits: {
          enabled: false
        },
        xAxis: {
          type: 'category',
          labels: {
            rotation: -45,
            style: {
              fontSize: '13px',
              fontFamily: 'Verdana, sans-serif'
            }
          }
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Total Pendaftar'
          },
          labels:{
            formatter:function(){
              if(this.value !=0){
                return this.value;
              }
            }
          },
        },
        colors: [
          '#3498db',
          '#27ae60',
          '#e74c3c',
          '#f1c40f',
        ],
        plotOptions: {
          column: {
            colorByPoint: true
          }
        },
        legend: {
          enabled: false
        },
        tooltip: {
          pointFormat: 'Total Pendaftar: <b>{point.y:.0f} Pendaftar</b>'
        },
        series: [
          {
            name: 'Pendaftar',
            data: [
              <?php
              echo "['Baru',".Users::model()->getReportByDate(1,4)."],";
              echo "['Approve',".Users::model()->getReportByDate(1,3)."],";
              echo "['Reject',".Users::model()->getReportByDate(2,3)."],";
              echo "['Belum TL',".Users::model()->getReportByDate(0,3)."],";
              echo "['Belum Kirim',".Users::model()->getReportByDate(0,5)."],";
              ?>
            ],
            dataLabels: {
              enabled: true,
              rotation: -90,
              color: '#FFFFFF',
              align: 'right',
              format: '{point.y:.0f}',
              y: 10,
              style: {
                fontSize: '11px',
                
              }
            }
          }],
          
        });
        </script>