

<?php $__env->startSection('title'); ?>
    رسم بياني توضيحي
<?php $__env->stopSection(); ?>

<?php $__env->startSection('first-css'); ?>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content-body'); ?>
    <!--**********************************
                                    Content body start
                                ***********************************-->
    <?php echo $__env->make('massages', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php $__env->startSection('route-path'); ?>
    <div class="container-fluid container-fluid-traning px-0">
        <div class="d-flex flex-wrap align-items-end justify-content-between  mb-3">
            <h3>
                رسم بياني توضيحي
                <?php if(isset($exams[0]->room->name)): ?>
                    <?php echo e($exams[0]->room->name); ?>

                    <?php echo e($exams[0]->room->course->title); ?>

                <?php endif; ?>
            </h3>
            <div class="link">
                <a href="" class="px-4 ">
                </a>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>
<!-- row -->
<div class="container-fluid container-fluid-traning bg-white">
    <!--**********************************Tabs Start***********************************-->

    <div data-name="البرنامج" data-excellent="60" data-very="100" data-good="80" data-acceptable="88" class="ele">1</div>
    <div class="row chart-box">
        
        <div class="clearfix"></div>
        <div class="col-md-12">
            <div id="chart_div1" class="chart"></div>
        </div>
    </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script>
    const eles = document.querySelectorAll(".ele");
    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart1);

    function drawChart1() {
        var data = google.visualization.arrayToDataTable([
            ['البنود', 'ممتاز', 'جيد جداً', 'جيد', 'مقبول'],
            ['البرنامج', 0, 0, 0, 0],
        ]);
        eles.forEach((element, index) => {
            data.addRow([element.dataset.name, Number(element.dataset.excellent), Number(element.dataset.very),
                Number(element.dataset.good), Number(element.dataset.acceptable)
            ]);
        });

        var options = {

            hAxis: {
                title: 'بنود التقييم',
                titleTextStyle: {
                    color: 'black'
                }
            }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
        chart.draw(data, options);
    }

    google.load("visualization", "1", {
        packages: ["corechart"]
    });
    google.setOnLoadCallback(drawChart2);
    $(window).resize(function() {
        drawChart1();
    });

    // Reminder: you need to put https://www.google.com/jsapi in the head of your document or as an external resource on codepen //
</script>
<!--**********************************
                        Content body end
            ***********************************-->
<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\Users\Nasser\Desktop\TrainingManagementPlatform\resources\views/reports/chart_evaluation.blade.php ENDPATH**/ ?>