<?php
    $total_male = @$age['male']['50-60'] + @$age['male']['61-70'] + @$age['male']['71-80'] + @$age['male']['81-90'] + @$age['male']['90'];
    $total_female = @$age['female']['50-60'] + @$age['female']['61-70'] + @$age['female']['71-80'] + @$age['female']['81-90'] + @$age['female']['90'];
?>
<div class="row m-0">
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <span class="text-header-chart">Age / Gender</span>
            <div style="display: flex; flex-direction: column; align-items: flex-end;">

            </div>

        </div>
        <div class="card-body p-0">
            <div>
                <div style="flex: 1;">
                    <div id="column_age" data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger"]' class="apex-charts" dir="ltr"></div>
                </div>
                <div class="col-12 text-center mb-3">
                    <span style="background:#7ecbff; border-radius:3px; padding:2px 16px; margin-right:8px;"><i class="ri-men-line"></i>Male</span>
                    <span><?php echo e($total_male); ?> คน</span> &ensp;
                    <span style="background:#a7e9d1; border-radius:3px; padding:2px 8px; margin-right:14px;"><i class="ri-women-line"></i>Female</span>
                    <span><?php echo e($total_female); ?> คน</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    var options = {
        series: [{
            name: 'Male',
            data: [<?php echo e(@$age['male']['50-60']); ?>, <?php echo e(@$age['male']['61-70']); ?>, <?php echo e(@$age['male']['71-80']); ?>, <?php echo e(@$age['male']['81-90']); ?>, <?php echo e(@$age['male']['90']); ?>]
        }, {
            name: 'Female',
            data: [<?php echo e(@$age['female']['50-60']); ?>, <?php echo e(@$age['female']['61-70']); ?>, <?php echo e(@$age['female']['71-80']); ?>, <?php echo e(@$age['female']['81-90']); ?>, <?php echo e(@$age['female']['90']); ?>]
        }],
        chart: {
            type: 'bar',
            height: 190,
            width: '100%',
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '55%',
                endingShape: 'rounded'
            },
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
        },
        xaxis: {
            categories:
            ['50-60', '61-70', '71-80', '81-90', '90+'],
        },
        yaxis: {
            tickAmount: 5,
            ticks: { stepSize: 10 },
            max: 100
        },
        fill: {
            opacity: 1,
            colors:['#7ecbff', '#a7e9d1'],
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " คน"
                }
            }

        },
        legend: {
            show: false,
            position: 'bottom',
            horizontalAlign: 'center',
        },
        colors: ['#7ecbff', '#a7e9d1'],
    };

    var chart = new ApexCharts(document.querySelector("#column_age"), options);
    chart.render();
</script>
<?php /**PATH D:\laragon\htdocs\screening\resources\views/allanalysis/13_Age.blade.php ENDPATH**/ ?>