@extends('layouts.' . $viewPrefix . '.' . session('layout', 'iframe'))

@section('title','Training Record Graph')

@section('content')


    <div class="row">
        <div class="col-md-12">
            <div style="height: 400px">
                <canvas id="training-records-chart" height="400"></canvas>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.min.js" integrity="sha512-O2fWHvFel3xjQSi9FyzKXWLTvnom+lOYR/AUEThL/fbP4hv1Lo5LCFCGuTXBRyKC4K4DJldg5kxptkgXAzUpvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>

        $(document).ready(function() {

            const ctx = document.getElementById('training-records-chart');
            const chart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: JSON.parse('{!! json_encode(array_keys($graph)) !!}'),
                    datasets: [{
                        label: '# of Training Records',
                        data: JSON.parse('{!! json_encode(array_values($graph)) !!}'),
                        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,
                    scales: {

                    }
                }
            });
        });
    </script>
@endpush