@extends('layouts.app')

@section('content')
<main class="py-4" style="flex: 1;">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 py-4">
                <div class="card">
                    <div class="card-header">{{ __('การเช้าใช้งาน') }}</div>

                    <div class="card-body bg-white" style="display: flex; width: 100%; height: 450px; justify-content: center; align-items: center;">
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>
            <div class="col-md-6 py-4">
                <div class="card">
                    <div class="card-header">{{ __('ประเภทเกมยอดนิยม') }}</div>

                    <div class="card-body bg-white" style="display: flex; width: 100%; height: 450px; justify-content: center; align-items: center;">
                        <canvas id="myChart1"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const chartDataLine = JSON.parse(@json($data_line));

    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: chartDataLine,
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    const chartData = JSON.parse(@json($chartData));

    const ctx1 = document.getElementById('myChart1').getContext('2d');
    new Chart(ctx1, {
        type: 'polarArea',
        data: chartData,
        options: {}
    });
</script>
@endsection