@php
    $for_max = max($procedure_sub) + 10;
@endphp
<div class="row m-0 h-charts" style="margin-top: 10px;">
    <div class="card ">
        <div class="card-header d-flex justify-content-between">
            <span class="text-header-chart">Intervention</span>
            <a href="{{url("allanalysis/intervention?")}}@php
            if(isset($_GET['date'])){echo "date=".$_GET['date'];}
            if(isset($_GET['hoscode'])){echo "&hoscode=".$_GET['hoscode'];}
            @endphp" class="btn btn-light">Show all</a>
        </div>
        <div class="card-body p-0">
            <div id="bar_intervention1" data-colors='["--vz-success"]' class="" dir="ltr"></div>
        </div>
    </div>
</div>
<script>
    var options = {
        series: [{
            data: [
                @foreach (@$procedure_sub ?? [] as $key => $val)
                    {{ $val }},
                @endforeach
            ]
        }],
        chart: {
            type: 'bar',
            height: 211,
            width: '100%',
        },
        plotOptions: {
            bar: {
                borderRadius: 4,
                horizontal: true,
            }
        },
        dataLabels: {
            enabled: false
        },
        xaxis: {
            categories: [
                @foreach (@$procedure_sub ?? [] as $key => $val)
                    '{{ $key }}',
                @endforeach
            ],
            labels: {formatter: function (value) {return Math.floor(value);}},
            tickAmount: 5,
            ticks: { stepSize: 10 },
            min: 0,
            max: {{ @$for_max }}

        },
        fill: {
            colors: ['#80E4E7']
        }
    };

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