@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>                        
                </div>
                <div class="card-body"> 
                    @if(session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif                                                                        
                    <div class="row mt-3">
                        <div class="col-lg-6 mb-3">
                            <div class="card h-100">
                                <div class="card-header">
                                    <h5 class="mb-0">Users by Date</h5>
                                </div>
                                <div class="card-body p-2">
                                    <canvas id="users-date" width="400" height="200"></canvas>
                                </div>
                            </div>
                        </div> 
                        <div class="col-lg-6 mb-3">
                          <div class="card h-100">
                              <div class="card-header">
                                  <h5 class="mb-0">Users by Country</h5>
                              </div>
                              <div class="card-body p-2">
                                  <canvas id="users-country" width="400" height="200"></canvas>
                              </div>
                           </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                          <div class="card h-100">
                              <div class="card-header">
                                  <h5 class="mb-0">Venue Checkins</h5>
                              </div>
                              <div class="card-body p-2">
                                <canvas id="venue-chart" width="400" height="200"></canvas>
                              </div>
                           </div>
                        </div>
                        <div class="col-lg-6 mb-3">
                          <div class="card h-100">
                              <div class="card-header">
                                  <h5 class="mb-0">Gifts</h5>
                              </div>
                              <div class="card-body p-2">
                                  <canvas id="gift-chart" width="400" height="200"></canvas>
                              </div>
                           </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="card">
                                <div class="card-header"><h5 class="mb-0">User Analytics:</h5></div>
                                <div class="card-body">
                                    <div>
                                        <canvas id="userChartByAllStatuses"></canvas>
                                    </div>	                                   
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 mb-3">
                            <div class="card">
                                <div class="card-header"><h5 class="mb-0">UX & Performance Reports:</h5></div>
                                <div class="card-body">
                                    <div>
                                        <canvas id="performanceChart"></canvas>
                                    </div>	                                   
                                </div>
                            </div>
                        </div>    
                        
                        <div class="col-md-6 mb-3">
                            <div class="card">
                                <div class="card-header"><h5 class="mb-0">Location Analytics Report:</h5></div>
                                <div class="card-body">
                                    <div>
                                        <canvas id="locationChart"></canvas>
                                    </div>	                                   
                                </div>
                            </div>
                        </div>       
                        
                        <div class="col-md-6 mb-3">
                            <div class="card">
                                <div class="card-header"><h5 class="mb-0">Demographic Report:</h5></div>
                                <div class="card-body">
                                    <div>
                                        <canvas id="demographicChart"></canvas>
                                    </div>	                                   
                                </div>
                            </div>
                        </div>                         
                        <div class="col-md-6 mb-3">
                            <div class="card">
                                <div class="card-header"><h5 class="mb-0">Revenue Report:</h5></div>
                                <div class="card-body">
                                    <div>
                                        <canvas id="revenueChart"></canvas>
                                    </div>	                                   
                                </div>
                            </div>
                        </div>                         


                    </div> 
                </div>
              </div>
              <!--/ Ajax Sourced Server-side -->
</div>
@stop
@section('script')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
        // Define the data for the chart
        var transactionData = [1000, 1500, 2000, 2500, 3000, 3500];
        var revenueByUserTypeData = {
            'New Users': 30,
            'Returning Users': 70,
        };
        var revenueByLocationData = {
            'Dubai': 2500,
            'Abu Dhabi': 1800,
            'Sharjah': 1200,
            'Ajman': 900,
        };
        var voucherReconciliationData = [10, 20, 30, 40, 50, 60];

        // Prepare the data for the chart
        var revenueChartData = {
            labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            datasets: [
                {
                    type: 'line',
                    label: 'Transactions',
                    data: transactionData,
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1,
                    yAxisID: 'y-axis-1',
                },
                {
                    type: 'bar',
                    label: 'Revenue by User Type',
                    data: Object.values(revenueByUserTypeData),
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1,
                    yAxisID: 'y-axis-2',
                },
                {
                    type: 'bar',
                    label: 'Revenue by Location',
                    data: Object.values(revenueByLocationData),
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1,
                    yAxisID: 'y-axis-2',
                },
                {
                    type: 'line',
                    label: 'Voucher Reconciliation',
                    data: voucherReconciliationData,
                    fill: false,
                    borderColor: 'rgb(255, 205, 86)',
                    tension: 0.1,
                    yAxisID: 'y-axis-1',
                },
            ]
        };

        // Prepare the options for the chart
        var revenueChartOptions = {
            scales: {
                yAxes: [
                    {
                        id: 'y-axis-1',
                        type: 'linear',
                        position: 'left',
                        ticks: {
                            beginAtZero: true,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Transactions / Voucher Reconciliation',
                        },
                    },
                    {
                        id: 'y-axis-2',
                        type: 'linear',
                        position: 'right',
                        ticks: {
                            beginAtZero: true,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Revenue',
                        },
                    },
                ],
                xAxes: [
                    {
                        ticks: {
                            beginAtZero: true,
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Months',
                        },
                    },
                ],
            },
        };

        // Create the chart
        var ctx = document.getElementById('revenueChart').getContext('2d');
        var revenueChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [
            {
                label: 'Transaction Data',
                data: [500, 750, 1000, 1250, 1500, 1750, 2000],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
            },
            {
                label: 'Revenue by User Type',
                data: [1500, 2500, 3500, 4500, 5500, 6500, 7500],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            },
            {
                label: 'Revenue by Venue/Location',
                data: [2000, 3000, 4000, 5000, 6000, 7000, 8000],
                backgroundColor: 'rgba(255, 206, 86, 0.2)',
                borderColor: 'rgba(255, 206, 86, 1)',
                borderWidth: 1
            },
            {
                label: 'Voucher Reconciliation',
                data: [1000, 2000, 3000, 4000, 5000, 6000, 7000],
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }
            ]
        },
        options: {
            scales: {
            yAxes: [{
                ticks: {
                beginAtZero: true
                }
            }]
            }
        }
        });
</script>
<script>
		// Define the data for the chart
		var data = {
			labels: ['Dubai', 'Sharjah', 'Ajman', 'Abu Dhabi'],
			datasets: [{
				label: 'Male',
				data: [40, 25, 15, 30],
				backgroundColor: 'rgba(54, 162, 235, 0.2)',
				borderColor: 'rgba(54, 162, 235, 1)',
				borderWidth: 1
			}, {
				label: 'Female',
				data: [60, 75, 85, 70],
				backgroundColor: 'rgba(255, 99, 132, 0.2)',
				borderColor: 'rgba(255, 99, 132, 1)',
				borderWidth: 1
			}]
		};

		// Prepare the options for the chart
		var options = {
			scales: {
				yAxes: [{
					ticks: {
						beginAtZero: true
					},
					scaleLabel: {
						display: true,
						labelString: 'Percentage'
					}
				}],
				xAxes: [{
					scaleLabel: {
						display: true,
						labelString: 'Location'
					}
				}]
			}
		};

		// Create the chart
		var ctx = document.getElementById('demographicChart').getContext('2d');
		var myChart = new Chart(ctx, {
			type: 'bar',
			data: data,
			options: options
		});
</script>
<script>
var locationChartCtx = document.getElementById('locationChart').getContext('2d');

var locationChart = new Chart(locationChartCtx, {
    type: 'bar',
    data: {
        labels: ['Jumeirah Lake Towers', 'Port Saeed', 'Al Qusais', 'Al Nahda Sharjah', 'Business Bay'],
        datasets: [{
            label: 'Average Visit Duration',
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1,
            data: [50, 30, 20, 40, 60]
        }, {
            label: 'Number of Visits',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
            data: [100, 70, 50, 80, 120]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});    
</script>
<script>
  var performanceChartCtx = document.getElementById('performanceChart').getContext('2d');
  var performanceChart = new Chart(performanceChartCtx, {
    type: 'bar',
    data: {
      labels: ['Load Speed', 'App Response Time', 'Server Response Time', 'Uptime'],
      datasets: [{
        label: 'Performance Metrics',
        backgroundColor: ['rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(153, 102, 255, 0.2)'],
        borderColor: ['rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(255, 99, 132, 1)', 'rgba(153, 102, 255, 1)'],
        borderWidth: 1,
        data: [90, 95, 85, 99]
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
</script>
<script>
var userStatusChartCtx = document.getElementById('userChartByAllStatuses').getContext('2d');

var userStatusChart = new Chart(userStatusChartCtx, {
    type: 'bar',
    data: {
        labels: null,
        datasets: [{
            label: 'User Status',
            backgroundColor: ['rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(153, 102, 255, 0.2)'],
            borderColor: ['rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(255, 99, 132, 1)', 'rgba(153, 102, 255, 1)'],
            borderWidth: 1,
            data: null        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>
<script>
  var ctx = document.getElementById('users-country').getContext('2d');
  var usersChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [
              ],
      datasets: [{
        data: [
                  ],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom'
      }
    }
  });
</script>

<script>
var canvas = document.getElementById('gift-chart');
var ctx = canvas.getContext('2d');

var chartData = {
    labels: {!! json_encode($gifts->pluck('month')->toArray()) !!},
    datasets: [{
        label: 'Number of Gifts',
        data: {!! json_encode($gifts->pluck('count')->toArray()) !!},
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
    }, {
        label: 'Total Amount Spent on Gifts',
        data: {!! json_encode($gifts->pluck('total_amount')->toArray()) !!},
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
    }]
};

var chartOptions = {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true,
                callback: function(value, index, values) {
                    return '$' + value.toFixed(2);
                }
            },
            scaleLabel: {
                display: true,
                labelString: 'Amount in USD'
            }
        }],
        xAxes: [{
            scaleLabel: {
                display: true,
                labelString: 'Month'
            }
        }]
    }
};

var chart = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: chartOptions
});

</script>


<script>
var ctx = document.getElementById('users-date').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [
            @foreach($users as $user)
                "{{ $user->month }}",
            @endforeach
        ],
        datasets: [{
            label: 'New users',
            data: [
                @foreach($users as $user)
                    {{ $user->total }},
                @endforeach
            ],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>
<script>
   var data = {!! $venues !!};

var groupedData = {};

data.forEach(function(d) {
    if (!groupedData[d.venue]) {
        groupedData[d.venue] = {
            venue: d.venue,
            time_spent: 0
        };
    }

    groupedData[d.venue].time_spent += d.time_spent;
});

var labels = [];
var values = [];

Object.keys(groupedData).forEach(function(key) {
    labels.push(groupedData[key].venue);
    values.push(groupedData[key].time_spent);
});

var ctx = document.getElementById('venue-chart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Time Spent',
            data: values,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

</script>
@stop