@extends("admin.template.layout")

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        <!-- Ajax Sourced Server-side -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{$mode ?? $page_heading}}</h5>
{{--                @if(get_user_permission('events','c'))--}}
{{--                    <a href="{{route('events.create')}}" class="main-btn primary-btn btn-hover btn-sm"><i class='bx bx-plus'></i> Create</a>--}}
{{--                @endif--}}
            </div>
            <div class="card-body">
                <!-- chart-->
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <div class="card">
                                <div class="card-header">All Time Active Members</div>
                                <div class="card-body">
                                    <canvas id="alltime"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">Daily Active Members</div>
                                <div class="card-body">
                                    <canvas id="dailyChart"></canvas>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header">Most Popular Days/Times</div>
                                <div class="card-body">
                                    <canvas id="popularChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end chars -->
            </div>
        </div>
        <!--/ Ajax Sourced Server-side -->






    </div>
@stop
@section('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
		var dates = ["2022-01-01", "2022-01-02", "2022-01-03", "2022-01-04", "2022-01-05"];
		var times = ["12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00", "17:00:00", "18:00:00"];
		var data = [
			[1, 3, 2, 4, 5, 3, 6],
			[2, 4, 3, 5, 6, 4, 7],
			[3, 5, 4, 6, 7, 5, 8],
			[4, 6, 5, 7, 8, 6, 9],
			[5, 7, 6, 8, 9, 7, 10]
		];
		var chartData = {
			labels: dates,
			datasets: []
		};
		for (var i = 0; i < times.length; i++) {
			var dataset = {
				label: times[i],
				data: data[i],
				fill: false,
				borderColor: 'rgb(75, 192, 192)',
				lineTension: 0.1
			};
			chartData.datasets.push(dataset);
		}
		var options = {
			title: {
				display: true,
				text: 'Active Community Members by Date and Time'
			},
			scales: {
				yAxes: [{
					scaleLabel: {
						display: true,
						labelString: 'Active Members'
					},
					ticks: {
						beginAtZero: true
					}
				}],
				xAxes: [{
					type: 'time',
					time: {
						unit: 'day',
						displayFormats: {
							day: 'M/D/YYYY'
						}
					},
					scaleLabel: {
						display: true,
						labelString: 'Date'
					},
					gridLines: {
						display: false
					}
				}]
			},
			legend: {
				display: true,
				position: 'bottom'
			}
		};
		var ctx = document.getElementById('alltime').getContext('2d');
		var chart = new Chart(ctx, {
			type: 'line',
			data: chartData,
			options: options
		});
	</script>
<script>

var dailyCtx = document.getElementById('dailyChart').getContext('2d');
var dailyChart = new Chart(dailyCtx, {
    type: 'line',
    data: {
        labels: {!! json_encode($dailyChartData->pluck('date')) !!},
        datasets: [{
            label: 'Active Members',
            data: {!! json_encode($dailyChartData->pluck('num_active_members')) !!},
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'day'
                },
                distribution: 'linear'
            }]
        }
    }
});

var popularCtx = document.getElementById('popularChart').getContext('2d');
var popularChart = new Chart(popularCtx, {
    type: 'bar',
    data: {
        labels: {!! json_encode($popularChartData->pluck('day')) !!},
        datasets: [{
            label: 'Most Popular Days/Times',
            data: {!! json_encode($popularChartData->pluck('num_active_members')) !!},
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>


    <script>
        jQuery(document).ready(function(){

            App.initTreeView();

        })
    </script>
@stop