<div class="m-0 p-0">
    <canvas id="myChart" style="height:25rem; max-height:25rem;"></canvas>
    <div class="row p-2">
        <div class="col-12 col-md-4">
            <div class="alert alert-success" role="alert">
                <strong class="text-dark"><?php echo e($pagados); ?></strong>&nbsp;<small>Pagados</small>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="alert alert-warning" role="alert">
                <strong class="text-dark"><?php echo e($posee_deudas); ?></strong>&nbsp;<small>Pagos parciales</small>
            </div>
        </div>
        <div class="col-12 col-md-4">
            <div class="alert alert-danger" role="alert">
                <strong class="text-bg-dark"><?php echo e($deuda_completas); ?></strong>&nbsp;<small>Deuda</small>
            </div>
        </div>
    </div>
    <script>
        /* datos */
        const LABELS = ['Pagados', 'Pagos parciales', 'Deuda completa'];
        const DATA = {
            labels: LABELS,
            datasets: [{
                data: <?php echo e($array_grafica); ?>,
                backgroundColor: [
                    'rgb(75, 192, 192)',
                    'rgb(255, 205, 86)',
                    'rgb(255, 99, 132)',
                ]
            }]
        };
        /* grafica */
        const GRAFICA_STATUS_PAGO = document.getElementById('myChart');
        new Chart(GRAFICA_STATUS_PAGO, {
            type: 'doughnut',
            data: DATA,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                }
            },
        });
    </script>
</div>
<?php /**PATH C:\laragon\www\SistemaMedicoV1\resources\views/livewire/home/grafica-status-pagos.blade.php ENDPATH**/ ?>