<?php      
error_reporting(E_ALL);      
ini_set('display_errors', 1);      
  
ob_start(); // Start output buffering      
  
require_once('includes/load.php'); // Load database connection and functions      
  
// Fetch overtime records grouped by division      
$sql = "SELECT e.division, SUM(oa.hours_worked) as total_hours   
        FROM overtime_attendance oa   
        JOIN employees e ON oa.employee_id = e.id   
        GROUP BY e.division";      
$records = $db->query($sql);      
  
// Prepare data for the chart      
$divisions = [];  
$total_hours = [];  
  
while ($row = $db->fetch_assoc($records)) {      
    $divisions[] = $row['division'];      
    $total_hours[] = (float)$row['total_hours'];      
}      
  
// Simple header      
?>      
<!DOCTYPE html>      
<html lang="en">      
<head>      
    <meta charset="UTF-8">      
    <meta name="viewport" content="width=device-width, initial-scale=1.0">      
    <title>Overtime Chart by Division - HRIS</title>      
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">      
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>      
    <style>      
        body {      
            background-color: #f4f7fa;      
        }      
        .card-header {      
            background-color: #007bff;      
            color: white;      
        }      
    </style>      
</head>      
<body>      
  
<div class="container-fluid mt-5">      
    <h2 class="text-center mb-4">Overtime Hours by Division</h2>      
  
    <div class="card mb-4">      
        <div class="card-header">      
            <h4 class="card-title">Overtime Chart</h4>      
        </div>      
        <div class="card-body">      
            <canvas id="overtimeChart"></canvas>      
        </div>      
    </div>      
  
    <div class="text-right mb-3">    
        <a href="overtime_absensi.php" class="btn btn-secondary">Back to Overtime Records</a>    
    </div>      
</div>      
  
<script>      
    var ctx = document.getElementById('overtimeChart').getContext('2d');      
    var overtimeChart = new Chart(ctx, {      
        type: 'bar',      
        data: {      
            labels: <?php echo json_encode($divisions); ?>,      
            datasets: [{      
                label: 'Total Overtime Hours',      
                data: <?php echo json_encode($total_hours); ?>,      
                backgroundColor: 'rgba(0, 123, 255, 0.5)',      
                borderColor: 'rgba(0, 123, 255, 1)',      
                borderWidth: 1      
            }]      
        },      
        options: {      
            scales: {      
                y: {      
                    beginAtZero: true      
                }      
            }      
        }      
    });      
</script>      
  
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>      
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>      
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>      
</body>      
</html>      
