<?php $__env->startSection('css'); ?>
<link href="<?php echo e(asset('css/dataTables.bootstrap4.min.css')); ?>" rel="stylesheet" />
<link href="<?php echo e(asset('css/bootstrap-datepicker.min.css')); ?>" rel="stylesheet" />
<style>
    canvas {
        max-height: 350px;
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="container-fluid pt-3">
    <div class="row mt-3">
        <div class="col-3">
            <form action="<?php echo e(route('report.submit')); ?>"
            novalidate class="<?php echo e(($errors->any()) ? 'was-validated' : 'needs-validation'); ?>"
            method="post"
            >
            <?php echo csrf_field(); ?>
                <div class="form-group">
                    <label for="date">รายงาน ประจำปี <span class="text-red">*</span></label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control datepiacker" id="year" name="year" placeholder="ปี" autocomplete="off" value="<?php echo e($year); ?>" required>
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
                        </div>
                        <button type="submit" class="btn btn-outline-success show-outline-btn ml-2" value="search">แสดง</button>
                    </div>
                    <?php $__errorArgs = ['year'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                    <div class="text-danger"><?php echo e($message); ?></div>
                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                </div>
            </form>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-6">
            <div class="card card-outline card-success">
                <div class="card-body">
                    <canvas id="incomeChart" class="w-100"></canvas>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card card-outline card-success">
                <div class="card-body">
                    <canvas id="expensesChart" class="w-100"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-2">
        <div class="col-6">
            <div class="card card-outline card-success">
                <div class="card-body">
                    <canvas id="studentChart" class="w-100"></canvas>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card card-outline card-success">
                <div class="card-body">
                    <canvas id="courseChart" class="w-100"></canvas>
                </div>
            </div>
        </div>
    </div>

</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('footerscript'); ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="<?php echo e(asset('js/jquery.dataTables.min.js')); ?>"></script>
<script src="<?php echo e(asset('js/dataTables.bootstrap4.min.js')); ?>"></script>
<script src="<?php echo e(asset('js/bootstrap-datepicker.min.js')); ?>"></script>
<script src="<?php echo e(asset('js/bootstrap-datepicker.th.min.js')); ?>"></script>
<script src="<?php echo e(asset('js/report.js')); ?>"></script>
<script>
    //var month = <?php echo $month; ?>;
    var month = <?php echo $month; ?>;
    var income = <?php echo $income; ?>;
    var expenses = <?php echo $expenses; ?>;
    var student = <?php echo $student; ?>;

    const options = {
                        elements: {
                            point:{
                                radius: 0
                            }
                        },
                        responsive: true,
                        scales: {
                            xAxes: [{
                                    ticks: {
                                        maxRotation: 90,
                                        minRotation: 80
                                    },
                                    gridLines: {
                                        offsetGridLines: true
                                    }
                                },
                                {
                                    position: "top",
                                    ticks: {
                                        maxRotation: 90,
                                        minRotation: 80
                                    },
                                    gridLines: {
                                        offsetGridLines: true
                                    }
                            }],
                            yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                            }]
                        }
                    };

    var iChart = document.getElementById("incomeChart");
    var incomeChart = new Chart(iChart, {
        type: 'bar',
        data: {
            labels: month,
            datasets: [
                {
                    label: 'รายได้',
                    data: income,
                    backgroundColor: [
                        'rgba(59, 169, 231, 0.5)',
                    ],
                    borderColor: [
                        'rgba(59, 169, 231, 1)',
                    ],
                    borderWidth: 1
                }
            ]
        },
        options: options
    });

    var eChart = document.getElementById("expensesChart");
    var expensesChart = new Chart(eChart, {
        type: 'bar',
        data: {
            labels: month,
            datasets: [
                {
                    label: 'รายจ่าย',
                    data: expenses,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.5)',
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                    ],
                    borderWidth: 1
                }
            ]
        },
        options: options
    });

    var sChart = document.getElementById("studentChart");
    var studentChart = new Chart(sChart, {
        type: 'bar',
        data: {
            labels: month,
            datasets: [
                {
                    label: 'นักเรียน',
                    data: student,
                    backgroundColor: [
                        'rgba(40, 157, 88, 0.5)',
                    ],
                    borderColor: [
                        'rgba(40, 157, 88, 1)',
                    ],
                    borderWidth: 1
                }
            ]
        },
        options: options
    });

    var cChart = document.getElementById("courseChart");
    var courseChart = new Chart(cChart, {
        type: 'pie',
        data: {
            labels: <?php echo $courses_label; ?>,
            datasets: [
                {
                    label: 'จำนวนนักเรียนในแต่ละคอร์ส',
                    data: <?php echo $courses; ?>,
                    backgroundColor: [  'rgb(255, 205, 86)',
                                        'rgb(69, 179, 157)',
                                        'rgb(255, 99, 132)',
                                        'rgb(255, 159, 64)',
                                        'rgb(205, 92, 92)',
                                        'rgb(54, 162, 235)',
                                        'rgb(153, 102, 255)',
                                        'rgb(201, 203, 207)',
                                        'rgb(128, 128, 0)',
                                        'rgb(46, 64, 83)',
                                        'rgb(118, 68, 138)',
                                        'rgb(31, 97, 141)',
                                        'rgb(75, 192, 192)',
                                    ]
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'right',
                },
                title: {
                    display: false,
                    text: 'จำนวนนักเรียนในแต่ละคอร์ส'
                },
                datalabels: {
                    formatter: (value, ctx) => {
                        let sum = 0;
                        let dataArr = ctx.chart.data.datasets[0].data;
                        dataArr.map(data => {
                            sum += data;
                        });
                        let percentage = (value*100 / sum).toFixed(2)+"%";
                        return percentage;
                    },
                    color: '#fff',
                }
            },
            maintainAspectRatio: false
        }
    });

</script>
<?php $__env->stopSection(); ?>



<?php echo $__env->make('layouts.web', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\laragon\www\system.pongpetrdriving.com\resources\views/report/index.blade.php ENDPATH**/ ?>