<div class="page-inner">
    <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
        <div>
            <h3 class="fw-bold mb-3">Dashboard</h3>
            <h6 class="op-7 mb-2">Hệ thống quản lý sinh viên</h6>
        </div>
        <div class="ms-md-auto py-2 py-md-0">
            <a href="/wp-admin/schedule/index" class="btn btn-primary btn-round">Lịch dạy</a>
            <a href="/wp-admin/schedule/index" class="btn btn-primary btn-round">Lịch học</a>
        </div>
    </div>

    <div class="row">
        
        <div class="col-sm-6 col-md-3">
            <div class="card card-stats card-round">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-icon">
                            <div class="icon-big text-center icon-info bubble-shadow-small">
                                <i class="fas fa-user-tie"></i>
                            </div>
                        </div>
                        <div class="col col-stats ms-3 ms-sm-0">
                            <div class="numbers">
                                <p class="card-category">Quản trị viên</p>
                                <h4 class="card-title"><?php echo e($adminCount); ?></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         <div class="col-sm-6 col-md-3">
            <div class="card card-stats card-round">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-icon">
                            <div class="icon-big text-center icon-warning bubble-shadow-small">
                                <i class="fas fa-user-shield"></i>
                            </div>
                        </div>
                        <div class="col col-stats ms-3 ms-sm-0">
                            <div class="numbers">
                                <p class="card-category">Cán bộ đào tạo</p>
                                <h4 class="card-title"><?php echo e($trainingOfficerCount); ?></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="card card-stats card-round">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-icon">
                            <div class="icon-big text-center icon-success bubble-shadow-small">
                                <i class="fas fa-user-graduate"></i>
                            </div>
                        </div>
                        <div class="col col-stats ms-3 ms-sm-0">
                            <div class="numbers">
                                <p class="card-category">Sinh viên</p>
                                <h4 class="card-title"><?php echo e($studentCount); ?></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="card card-stats card-round">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-icon">
                            <div class="icon-big text-center icon-secondary bubble-shadow-small">
                                <i class="fas fa-chalkboard-teacher"></i>
                            </div>
                        </div>
                        <div class="col col-stats ms-3 ms-sm-0">
                            <div class="numbers">
                                <p class="card-category">Giảng viên</p>
                                <h4 class="card-title"><?php echo e($teacherCount); ?></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>


    <div class="row">
        <div class="col-md-12">
            <div class="card card-round">
                <div class="card-header">
                    <div class="card-head-row">
                        <div class="card-title">Thống kê người dùng</div>
                        
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container" style="min-height: 375px">
                        <canvas id="statisticsChart"></canvas>
                    </div>
                    <div id="myChartLegend"></div>
                </div>
            </div>
        </div>
        

        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card card-round">
                    <div class="card-body pb-0">
                        <div class="h1 fw-bold float-end text-primary">
                            <i class="fas fa-book"></i>
                        </div>
                        <h2 class="mb-2"><?php echo e($classesCount); ?></h2>
                        <p class="text-muted">Lớp học</p>
                        <div class="pull-in sparkline-fix">
                            <div id="classesLineChart"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card card-round">
                    <div class="card-body pb-0">
                        <div class="h1 fw-bold float-end text-success">
                            <i class="fas fa-door-open"></i>
                        </div>
                        <h2 class="mb-2"><?php echo e($classroomsCount); ?></h2>
                        <p class="text-muted">Phòng học</p>
                        <div class="pull-in sparkline-fix">
                            <div id="classroomsLineChart"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card card-round">
                    <div class="card-body pb-0">
                        <div class="h1 fw-bold float-end text-warning">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <h2 class="mb-2"><?php echo e($coursesCount); ?></h2>
                        <p class="text-muted">Khóa học</p>
                        <div class="pull-in sparkline-fix">
                            <div id="coursesLineChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card card-round">
                    <div class="card-body pb-0">
                        <div class="h1 fw-bold float-end text-danger">
                            <i class="fas fa-building"></i>
                        </div>
                        <h2 class="mb-2"><?php echo e($departmentsCount); ?></h2>
                        <p class="text-muted">Khoa/Phòng</p>
                        <div class="pull-in sparkline-fix">
                            <div id="departmentsLineChart"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card card-round">
                    <div class="card-body pb-0">
                        <div class="h1 fw-bold float-end text-info">
                            <i class="fas fa-laptop-code"></i>
                        </div>
                        <h2 class="mb-2"><?php echo e($majorsCount); ?></h2>
                        <p class="text-muted">Ngành học</p>
                        <div class="pull-in sparkline-fix">
                            <div id="majorsLineChart"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card card-round">
                    <div class="card-body pb-0">
                        <div class="h1 fw-bold float-end text-primary">
                            <i class="fas fa-book-open"></i>
                        </div>
                        <h2 class="mb-2"><?php echo e($subjectsCount); ?></h2>
                        <p class="text-muted">Môn học</p>
                        <div class="pull-in sparkline-fix">
                            <div id="subjectsLineChart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    


    


</div>



    <!-- Add script at the bottom of your view or in the appropriate section for scripts -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // User statistics chart
            var ctx = document.getElementById('statisticsChart').getContext('2d');
            
            // Pass PHP data to JavaScript
            var chartData = <?php echo json_encode($data, 15, 512) ?>;
            var chartLabels = <?php echo json_encode($labels, 15, 512) ?>;
            
            // Define chart colors
            var chartColors = {
                primary: '#007bff',
                info: '#17a2b8',
                success: '#28a745',
                warning: '#ffc107',
                danger: '#dc3545'
            };
            
            // Create chart
            var statisticsChart = new Chart(ctx, {
                type: 'pie', // You can change to 'doughnut', 'bar', etc.
                data: {
                    labels: chartLabels,
                    datasets: [{
                        data: chartData,
                        backgroundColor: [
                            chartColors.primary,
                            chartColors.info,
                            chartColors.success,
                            chartColors.warning
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        position: 'bottom',
                        labels: {
                            fontColor: 'rgb(154, 154, 154)',
                            fontSize: 11,
                            usePointStyle: true,
                            padding: 20
                        }
                    },
                    pieceLabel: {
                        render: 'percentage',
                        fontColor: 'white',
                        fontSize: 14,
                    },
                    tooltips: {
                        bodySpacing: 4,
                        mode: "nearest",
                        intersect: 0,
                        position: "nearest",
                        xPadding: 10,
                        yPadding: 10,
                        caretPadding: 10
                    },
                    layout: {
                        padding: {
                            left: 20,
                            right: 20,
                            top: 20,
                            bottom: 20
                        }
                    }
                }
            });
            
            // Generate the legend for the chart
            document.getElementById('myChartLegend').innerHTML = statisticsChart.generateLegend();
            
            // Daily sales chart - this is just a placeholder, modify as needed
            var dailyCtx = document.getElementById('dailySalesChart').getContext('2d');
            var dailySalesChart = new Chart(dailyCtx, {
                type: 'line',
                data: {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    datasets: [{
                        label: "Sales",
                        fill: true,
                        backgroundColor: chartColors.primary,
                        borderColor: chartColors.primary,
                        data: [50, 40, 300, 220, 500, 250, 400, 230, 500, 300, 450, 380],
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                display: false
                            },
                            gridLines: {
                                display: false
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                display: false
                            },
                            gridLines: {
                                display: false
                            }
                        }]
                    },
                }
            });
            
            // Line chart - this is just a placeholder, modify as needed
            if($("#lineChart").length > 0) {
                $("#lineChart").sparkline([105, 103, 123, 100, 95, 105, 115], {
                    type: 'line',
                    height: '70',
                    width: '100%',
                    lineWidth: '2',
                    lineColor: '#ffa534',
                    fillColor: 'rgba(255, 165, 52, .14)'
                });
            }

        });
    </script><?php /**PATH C:\laragon\www\3_LARAVEL\SchoolManagementSystem\SchoolManagementSystem\resources\views/admin/dashboard/pages/index.blade.php ENDPATH**/ ?>