<div class="col-4">
    <div class="card h-charts mt-2">
        <div class="card-header">
            <span class="text-header-chart">จำนวนคนไข้</span>
        </div>
        <div class="card-body p-0 mt-4 ">
            <div id="count-procedure" data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]' class="apex-charts" dir="ltr">

            </div>
        </div>
        @php
            $series = [];
            $labels = [];
            for ($i=0; $i < $stations ; $i++) {
                $str        = str_pad($i, 2, "0", STR_PAD_LEFT);
                $all        = isset($station["hos$str"."_gender"]['all']) ? $station["hos$str"."_gender"]['all'] : 0;
                $name       = isset($station["hos$str"."_gender"]['name']) ? $station["hos$str"."_gender"]['name'] : '';
                $series[]   = $all;
                $labels[]   = "$name $all ราย";
                // dd($str , $station);
            }

            // $series = $room_capture_count;
            // $labels = $room_capture;




        @endphp
    </div>
</div>
<script>
    var patient_series = @json($series);
    var patient_labels = @json($labels);
    var options = {
            series: patient_series,
            chart: {
                height: 200,
                type: 'pie',
            },
            labels: patient_labels,
            legend: {
                show: true,
                offsetX: 10,
                horizontalAlign: 'center',
                itemMargin: {
                    vertical: 10
                },
                fontSize: '50px',
                fontFamily: 'Anuphan, sans-serif',
                foreColor: '#00000',
            },
            colors: ['#122B44', '#193D61', '#245788', '#2E669C', '#3A70A3', '#789DC0'],
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {

                        fontFamily: 'Anuphan, sans-serif',
                    },
                    fill: {
                        //  colors: ['#415089', '#F36349', '#08AF9D']
                    },
                    legend: {
                    // position: 'bottom'
                    },
                    yaxis:{
                        max: 6,
                    },
                }
            }],
            tooltip: {
                y: {
                formatter: function (val) {
                    return  ``
                }
                }
            }
        };


        var chart = new ApexCharts(document.querySelector("#count-procedure"), options);
        chart.render();
</script>
