<div class="row m-0 h-charts">
    <div class="card w-100">
        <div class="card-body d-flex align-items-center justify-content-between">
            <div style="flex: 1;">
                <h4 style="font-weight: bold; color: #16294f;">Boston Bowel Preparation Scale</h4>
                <canvas id="bbpsChart" height="180"></canvas>
            </div>
            <div class="" style="border-bottom: 1px solid #e0e0e0; "></div>
            <div style="min-width: 135px; margin-left: 30px;">
                {{-- <div style="border: 2px solid #6ee7f7; border-radius: 10px; padding: 12px 12px; background: #fff; box-shadow: 2px 2px 8px #e0f7fa33; font-size: 20px; color: #222;">
                    <div>8-9 &nbsp;= <b>Excellent</b></div>
                    <div>6-7 &nbsp;= <b>Good</b></div>
                    <div>4-5 &nbsp;= <b>Fair</b></div>
                    <div>1-3 &nbsp;= <b>Poor</b></div>
                    <div>0 &nbsp;&nbsp;&nbsp;&nbsp;= <b>Very Poor</b></div>
                </div> --}}
                <div style="border: 2px solid #6ee7f7; border-radius: 10px; padding: 12px 12px; background: #fff; box-shadow: 2px 2px 8px #e0f7fa33; font-size: 20px; color: #222;">
                    <div>A = Excellent</div>
                    <div>B = Good </div>
                    <div>C = Fair </div>
                    <div>D = Poor </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js CDN -->
<script src="{{ url('assets/js/chartjs-plugin-datalabels.min.js') }}"></script>
<script>
    @php
        $for_max = (is_array($bowel) && count($bowel) > 0) ? max($bowel) + 10 : 0;
    @endphp
    const ctx = document.getElementById('bbpsChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['A', 'B', 'C', 'D'],
            datasets: [{
                label: '',
                data: [{{@$bowel['Excellent']}}, {{@$bowel['Good']}}, {{@$bowel['Fair']}}, {{@$bowel['Poor']}}],
                borderRadius: 4,
                barPercentage: 0.7,
                categoryPercentage: 0.7,
                backgroundColor: [
                    '#6ee7f7'
                ]
            }]
        },
        options: {
            plugins: {
                legend: { display: false },
                datalabels: {
                    anchor: 'center',
                    align: 'center',
                    color: '#16294f',
                    font: {
                        weight: 'normal',
                        size: 16
                    },
                    formatter: function(value) {
                        return value;
                    }
                }
            },
            scales: {
                x: {
                    grid: { display: false },
                    title: { display: false }
                },
                y: {
                    beginAtZero: true,
                    grid: { color: '#e0f7fa' },
                    max: {{ @$for_max }}
                }
            }
        },
        plugins: [ChartDataLabels]
    });
</script>
