<div class="col-12 mt-2">
    <div class="card h-charts">
        <div class="card-header d-flex justify-content-between">
            <span class="text-header-chart">Physician</span>
            <a href="{{url("dashboardscreening/physician?")}}
            @php
            if(isset($_GET['start_date']))
            {echo "start_date=".$_GET['start_date'];}
            if(isset($_GET['end_date']))
            {echo "&end_date=".$_GET['end_date'];}
            if(isset($_GET['province']))
            {echo "&province=".$_GET['province'];}
            if(isset($_GET['hospital']))
            {echo "&hospital=".$_GET['hospital'];}
            @endphp
            " class="btn btn-light">Show all</a>
        </div>
        <div class="card-body p-0 mt-4">
            <div id="bar_Physician" data-colors='["--vz-success"]' class="apex-charts" dir="ltr"></div>
        </div>
    </div>
</div>

<script>
    var options = {
        series: [{
            name: 'Cases',
            data: [
                @foreach ($physician as $key => $val)
                    {{ $val }},
                @endforeach
            ]
        }],
        chart: {
            type: 'bar',
            height: 190,
            width: '80%',
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: true,
                dataLabels: {
                    position: 'center',
                }
            }
        },
        dataLabels: {
            enabled: true,
            textAnchor: 'start',
            style: {
                colors: ['#fff']
            },
            formatter: function (val, opt) {
                return val
            },
            offsetX: 0
        },
        fill: {
            colors: ['#245788'],
        },
        xaxis: {
            categories: [
                @foreach ($physician as $key => $val)
                    '{{ $key }}',
                @endforeach
            ],
            labels: {
                formatter: function(value) {
                    return Math.floor(value);
                }
            }
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return `${val} เคส`
                }
            }
        }
    };

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