@if(sizeof($rse) > 0)
    <div class="row mb-4">
        @for($i = 0; $i < sizeof($rse); $i++)
            <div class="col-4">
                <div class="card">
                    <div class="card-body">
                        @if(sizeof(array_keys(array_values($rse)[$i])) > 0)
                            <canvas id="rse-{{ $i }}-chart" width="300" height="300">
                        @else
                            <h5 class="card-title text-center font-weight-bold">{{ array_keys($rse)[$i] }}</h5>
                            <p class="card-text">Pas de données disponible.</p>
                        @endif
                    </div>
                </div>
            </div>
        @endfor
    </div>

    <script>
        $(document).ready(function () {
            @for($i = 0; $i < sizeof($rse); $i++)
            @if(sizeof(array_keys(array_values($rse)[$i])) > 0)
            new Chart($('#rse-{{ $i }}-chart'), {
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: [{{ implode(',', array_values(array_values($rse)[$i])) }}],
                        backgroundColor: backgroundColor,
                        borderColor: borderColor,
                        borderWidth: 1
                    }],
                    labels: [{!! '"' . implode('","', array_keys(array_values($rse)[$i])) . '"' !!}]
                },
                options: {
                    title: {
                        display: true,
                        text: '{{ array_keys($rse)[$i] }}',
                        fontSize: 18,
                        fontStyle: 'bold',
                        fontFamily: 'Nunito',
                        fontColor: '#222529'
                    },
                    responsive: true,
                    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(0) + '%';
                            }
                        }
                    }
                },
            });
            @endif
            @endfor
        })
    </script>
@else
    <div class="row mb-4">
        <div class="col-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-center font-weight-bold">RSE</h5>
                    <p class="card-text">Pas de données disponible.</p>
                </div>
            </div>
        </div>
    </div>
@endif