<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div class="wow_content wow_sett_content">
	<div class="wo_page_hdng pag_neg_padd">
		<div class="wo_page_hdng_innr">
			<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-download"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg></span> <?php echo $wo['lang']['page_analytics'];?>
		</div>
	</div>
  <br>
  <div class="clear"></div>
  <div class="row">
	<div class="col-md-9 col-sm-6">
		<div class="wow_sett_stats">
			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" class="feather"><path fill="currentColor" d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"></path></svg> <?php echo Wo_CountGroupMembers($wo['setting']['id']);?> <?php echo $wo['lang']['total_member'];?>
		</div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <select id="type" name="type" class="form-control">
          <option value="today" <?php echo ($wo['type'] == 'today')   ? ' selected' : ''; ?>><?php echo $wo['lang']['today']; ?></option>
          <option value="week" <?php echo ($wo['type'] == 'week')   ? ' selected' : ''; ?>><?php echo $wo['lang']['this_week']; ?></option>
          <option value="month" <?php echo ($wo['type'] == 'month')   ? ' selected' : ''; ?>><?php echo $wo['lang']['this_month']; ?></option>
          <option value="year" <?php echo ($wo['type'] == 'year')   ? ' selected' : ''; ?>><?php echo $wo['lang']['this_year']; ?></option>
        </select>
      </div>
    </div>
  </div>
  <br>
  <div id="chart-container"></div>
</div>

<script>
    $(document).on('change', '#type', function(event) {
    window.location.href = "<?php echo($wo['config']['site_url'].'/group-setting/'.$wo['setting']['group_name'].'/analytics?type='); ?>"+$(this).val();
  });

   $(function () {
    Highcharts.setOptions({
      colors: ['#6abd46', '#ce3d3d', '#f2b92b', '#6abd46']
    });
    $('#chart-container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '(Based on UTC timezone)'
        },
        xAxis: {
            <?php if ($wo['type'] == 'today') { ?>
                categories: [
                    '00 AM',
                    '1 AM',
                    '2 AM',
                    '3 AM',
                    '4 AM',
                    '5 AM',
                    '6 AM',
                    '7 AM',
                    '8 AM',
                    '9 AM',
                    '10 AM',
                    '11 AM',
                    '12 PM',
                    '1 PM',
                    '2 PM',
                    '3 PM',
                    '4 PM',
                    '5 PM',
                    '6 PM',
                    '7 PM',
                    '8 PM',
                    '9 PM',
                    '10 PM',
                    '11 PM'
                ]
            <?php }elseif ($wo['type'] == 'week') { ?>
                categories: [
                    'Saturday',
                    'Sunday',
                    'Monday',
                    'Tuesday',
                    'Wednesday',
                    'Thursday',
                    'Friday'
                ]
            <?php }elseif ($wo['type'] == 'month') { ?>
                <?php if ($wo['month_days'] == 31) { ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
                <?php }elseif ($wo['month_days'] == 30) { ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30]
                <?php }elseif ($wo['month_days'] == 29) { ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29]
                <?php }elseif ($wo['month_days'] == 28) {  ?>
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28]
                <?php } ?>
            <?php }elseif ($wo['type'] == 'year') { ?>
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            <?php } ?>,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px;color:#fff;">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:#fff;padding:0">{series.name}: </td>' +
                '<td style="padding:0;color:#fff;"><b>{point.y}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true,
            backgroundColor: '#444'
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '<?php echo $wo['lang']['joined'];?>',
            data: [<?php echo $wo['likes_array']; ?>]
	    }]
    });
});
</script>