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

    <script>
        $(document).ready(function () {
            <?php for($i = 0; $i < sizeof($rse); $i++): ?>
            <?php if(sizeof(array_keys(array_values($rse)[$i])) > 0): ?>
            new Chart($('#rse-<?php echo e($i); ?>-chart'), {
                type: 'doughnut',
                data: {
                    datasets: [{
                        data: [<?php echo e(implode(',', array_values(array_values($rse)[$i]))); ?>],
                        backgroundColor: backgroundColor,
                        borderColor: borderColor,
                        borderWidth: 1
                    }],
                    labels: [<?php echo '"' . implode('","', array_keys(array_values($rse)[$i])) . '"'; ?>]
                },
                options: {
                    title: {
                        display: true,
                        text: '<?php echo e(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) + '%';
                            }
                        }
                    }
                },
            });
            <?php endif; ?>
            <?php endfor; ?>
        })
    </script>
<?php 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>
<?php endif; ?>
<?php /**PATH /var/www/html/resources/views/home/GHT/charts/rse/rse.blade.php ENDPATH**/ ?>