<html>
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Dashboard</title>
        <link rel="shortcut icon" href="<?php echo e(url('public/images/favicon.png')); ?>">

        <!-- One of the following themes -->
        <script src="<?php echo e(url('assets/js/layout.js')); ?>"></script>
        <script src="<?php echo e(url('public/js/jquery-3.6.0.min.js')); ?>"></script>

        <link href="<?php echo e(url('assets/css/bootstrap.min.css')); ?>" rel="stylesheet" type="text/css" />
        <link href="<?php echo e(url('assets/css/icons.min.css')); ?>" rel="stylesheet" type="text/css" />
        <link href="<?php echo e(url('assets/css/app.min.css')); ?>" rel="stylesheet" type="text/css" />
        <link href="<?php echo e(url('assets/css/custom.min.css')); ?>" rel="stylesheet" type="text/css" />
        <link href="<?php echo e(url('assets/libs/@simonwep/pickr/themes/classic.min.css')); ?>" rel="stylesheet" />
        <!-- 'classic' theme -->
        <link href="<?php echo e(url('assets/libs/@simonwep/pickr/themes/monolith.min.css')); ?>" rel="stylesheet" />
        <!-- 'monolith' theme -->
        <link href="<?php echo e(url('assets/libs/@simonwep/pickr/themes/nano.min.css')); ?>" rel="stylesheet" /> <!-- 'nano' theme -->
        <link href="<?php echo e(url('assets/css/select2.min.css')); ?>" rel="stylesheet" />
        <script src="<?php echo e(url('assets/js/select2.min.js')); ?>"></script>
        <script src="<?php echo e(url('assets/js/pages/select2.init.js')); ?>"></script>
        <link href="<?php echo e(url('assets/libs/fullcalendar/main.min.css')); ?>" rel="stylesheet" type="text/css" />
        <style>
            @font-face {
                font-family: 'Anuphan';
                font-style: normal;
                font-weight: 100;
                src: url("<?php echo e(url('public/fonts/Anuphan-Thin.ttf')); ?>") format("truetype");
            }

            @font-face {
                font-family: 'Anuphan';
                font-style: normal;
                font-weight: 200;
                src: url("<?php echo e(url('public/fonts/Anuphan-ExtraLight.ttf')); ?>") format("truetype");
            }

            @font-face {
                font-family: 'Anuphan';
                font-style: normal;
                font-weight: 300;
                src: url("<?php echo e(url('public/fonts/Anuphan-Light.ttf')); ?>") format("truetype");
            }

            @font-face {
                font-family: 'Anuphan';
                font-style: normal;
                font-weight: 400;
                src: url("<?php echo e(url('public/fonts/Anuphan-Regular.ttf')); ?>") format("truetype");
            }

            @font-face {
                font-family: 'Anuphan';
                font-style: normal;
                font-weight: 500;
                src: url("<?php echo e(url('public/fonts/Anuphan-Medium.ttf')); ?>") format("truetype");
            }

            @font-face {
                font-family: 'Anuphan';
                font-style: normal;
                font-weight: 600;
                src: url("<?php echo e(url('public/fonts/Anuphan-SemiBold.ttf')); ?>") format("truetype");
            }

            @font-face {
                font-family: 'Anuphan';
                font-style: italic;
                font-weight: 700;
                src: url("<?php echo e(url('public/fonts/Anuphan-Bold.ttf')); ?>") format("truetype");
            }

            * {
                font-family: 'Anuphan' !important;
                font-size: 14px;

            }

            .text-header-chart {
                text-align: center;
                margin-top: 0.5rem;
                font-size: 18px !important;
            }

            .btn-showall {
                background: #F3F6F9;
            }

            .text-header-fullchart {
                font-size: 25px !important;
            }
        </style>
    </head>
    <script src="<?php echo e(url('assets/libs/cleave.js/cleave.min.js')); ?>"></script>
<script src="<?php echo e(url('assets/libs/apexcharts/apexcharts.min.js')); ?>"></script>
<script src="<?php echo e(url('assets/js/pages/form-masks.init.js')); ?>"></script>
<script src="<?php echo e(url('assets/libs/chart.js/chart.min.js')); ?>"></script>
<script src="<?php echo e(url('assets/js/pages/chartjs.init.js')); ?>"></script>
<script src="<?php echo e(url('assets/js/pages/apexcharts-pie.init.js')); ?>"></script>
<script src="<?php echo e(url('assets/js/pages/apexcharts-bar.init.js')); ?>"></script>
<script src="<?php echo e(url('assets/js/pages/apexcharts-column.init.js')); ?>"></script>
    <body>
        <?php
        use App\models\Mongo;

        ?>
        <?php
            $registered = [];
            $finished = [];
            $labels = [];

            $countall = 0;
            $polypectomyall = 0;



            foreach ($polyp as $hospital_name => $data) {

                $hospital_name = str_replace("โรงพยาบาล", "รพ.", $hospital_name);

                $polyp_count = $data['polyp'];
                $polypectomy_count = $data['polypectomy'];

                $countall += $polyp_count;
                $polypectomyall += $polypectomy_count;

                $registered[] = $polyp_count;
                $finished[] = $polypectomy_count;
                $labels[] = $hospital_name;
            }
        ?>

        <div class="col-12">
            <div class="card h-charts mt-2">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span class="text-header-chart">Polyp (<?php echo e($countall); ?>) | Polypectomy (<?php echo e($polypectomyall); ?>)</span>
                    <a href="<?php echo e(url("dashboardscreening/")); ?>

                 "class="btn btn-light">Back</a>
                </div>
                <div class="card-body p-0 mt-4">
                    <div id="bar_status" data-colors='["--vz-danger", "--vz-primary", "--vz-success"]' class="apex-charts" dir="ltr"></div>
                </div>
            </div>
        </div>

        <script>
            var registered = <?php echo json_encode($registered, 15, 512) ?>;
            var finished = <?php echo json_encode($finished, 15, 512) ?>;
            var status_labels = <?php echo json_encode($labels, 15, 512) ?>;

            var options = {
                series: [{
                    name: 'Polyp',
                    data: registered
                }, {
                    name: 'Polypectomy',
                    data: finished
                }],
                chart: {
                    type: 'bar',
                    height: 600,
                    width: '100%',
                },
                plotOptions: {
                    bar: {
                        horizontal: false,
                        columnWidth: '100%',
                        barHeight: '100%',
                        endingShape: 'rounded'

                    },
                },
                dataLabels: {
            enabled: true,
            textAnchor: 'middle',
            style: {
                colors: ['#fff']
            },
            formatter: function (val, opt) {
                return val
            },
            offsetX: 0
        },
                stroke: {
                    show: true,
                    width: 2,
                    colors: ['transparent']
                },
                xaxis: {
                    categories: status_labels,
                },
                yaxis: {
                    title: {
                        text: ''
                    }
                },
                fill: {
                    opacity: 1,
                    colors:['#245788', '#0ab39c'],
                },
                tooltip: {
                    y: {
                        formatter: function (val) {
                            return `${val} เคส`
                        }
                    }
                },
                legend: {
                    show: true,
                    position: 'bottom',
                    horizontalAlign: 'center',
                },
                colors: ['#245788', '#0ab39c'],
            };

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


<?php /**PATH D:\laragon\htdocs\screening\resources\views/dashboardscreening/17_fullpolyp.blade.php ENDPATH**/ ?>