@extends('layouts.frontend.share')

@section('content')
    <div class="row">
        <div class="my-3 h2">Types of Completed Training</div>
        @foreach($charts as $id => $chart)
            <div class="col-sm-12">
                <div class="main-card card mb-2">
                    <div class="card-body">
                        <div style="height: 400px">
                            <canvas id="{{ $id }}" data-dataset="" height="400"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        <div class="my-3 d-flex justify-content-between">
            <span><b>Copyright &copy; {{ now()->format('Y') }} <span style="color: #2683DA;">OHSMATE</span></b>. All rights reserved.</span>
            <span>Date created: {{ $createdAt->format(setting('site_date_format')) }}</span>
        </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 src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
    <script>
        $(document).ready(function(){
            const ctx = document.getElementById('training_provider_pie');
            Chart.register(ChartDataLabels);
            const chart = new Chart(ctx, {
                type: 'pie',
                data: {
                    labels: JSON.parse('{!! json_encode(array_keys($charts['training_provider_pie'])) !!}'),
                    datasets: [{
                        label: '# of Training Records',
                        data: JSON.parse('{!! json_encode(array_values($charts['training_provider_pie'])) !!}'),
                        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: {

                    },
                    tooltips: {
                        enabled: false
                    },
                    plugins: {
                        datalabels: {
                            formatter: (value, ctx) => {
                                let sum = 0;
                                let dataArr = ctx.chart.data.datasets[0].data;
                                dataArr.map(data => {
                                    sum += data;
                                });
                                return (value*100 / sum).toFixed(2)+"%";
                            },
                            color: '#000',
                        }
                    }
                }
            });
        });
    </script>
@endpush