<?php    
// Konfigurasi database    
define('DB_HOST', 'localhost');          // Set database host    
define('DB_USER', 'wiselie_nanda');      // Set database user       
define('DB_PASS', 'Clemira123');         // Set database password      
define('DB_NAME', 'wiselie_inventory');  // Set database name    
    
// Membuat koneksi ke database    
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);    
    
// Memeriksa koneksi    
if ($conn->connect_error) {    
    die("Koneksi gagal: " . $conn->connect_error);    
}    
    
// Query untuk mengambil data produk dengan categorie_id 7, dibatasi 20 produk teratas    
$sql = "SELECT name, quantity FROM products WHERE categorie_id = 7 ORDER BY quantity DESC LIMIT 20";    
$result = $conn->query($sql);    
    
$products = [];    
if ($result->num_rows > 0) {    
    while ($row = $result->fetch_assoc()) {    
        $products[] = $row;    
    }    
}    
    
// Menutup koneksi    
$conn->close();    
?>    
    
<!DOCTYPE html>    
<html lang="id">    
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Chart Produk berdasarkan Kuantitas</title>    
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>    
    <style>    
        body {    
            font-family: Arial, sans-serif;    
            background-color: #f4f4f4;    
            margin: 0;    
            padding: 0;    
            height: 100vh; /* Mengatur tinggi penuh */    
        }    
        h1 {    
            text-align: center;    
            color: #333;    
            margin: 20px 0; /* Menambahkan margin untuk jarak */    
        }    
        .chart-container {    
            position: relative;    
            height: calc(100vh - 200px); /* Mengatur tinggi chart agar memenuhi sisa halaman */    
            width: 100%; /* Mengatur lebar penuh */    
        }    
        canvas {    
            height: 100% !important; /* Mengatur tinggi canvas penuh */    
            width: 100% !important; /* Mengatur lebar canvas penuh */    
        }    
        table {    
            width: 100%;    
            border-collapse: collapse;    
            margin: 20px 0;    
        }    
        th, td {    
            border: 1px solid #ddd;    
            padding: 8px;    
            text-align: center;    
        }    
        th {    
            background-color: #f2f2f2;    
        }    
    </style>    
</head>    
<body>    
    <h1>Chart Produk berdasarkan Kuantitas</h1>    
    <div class="chart-container">    
        <canvas id="productChart"></canvas>    
    </div>    
    <table>    
        <thead>    
            <tr>    
                <th>Nama Produk</th>    
                <th>Kuantitas</th>    
            </tr>    
        </thead>    
        <tbody>    
            <?php foreach ($products as $product): ?>    
                <tr>    
                    <td><?php echo htmlspecialchars($product['name']); ?></td>    
                    <td><?php echo htmlspecialchars($product['quantity']); ?></td>    
                </tr>    
            <?php endforeach; ?>    
        </tbody>    
    </table>    
    <script>    
        // Data untuk chart    
        const labels = <?php echo json_encode(array_column($products, 'name')); ?>;    
        const quantities = <?php echo json_encode(array_column($products, 'quantity')); ?>;    
    
        const ctx = document.getElementById('productChart').getContext('2d');    
        const productChart = new Chart(ctx, {    
            type: 'bar', // Jenis chart    
            data: {    
                labels: labels,    
                datasets: [{    
                    label: 'Kuantitas',    
                    data: quantities,    
                    backgroundColor: 'rgba(54, 162, 235, 0.6)', // Warna batang    
                    borderColor: 'rgba(54, 162, 235, 1)', // Warna border    
                    borderWidth: 1,    
                    hoverBackgroundColor: 'rgba(54, 162, 235, 0.8)', // Warna saat hover    
                    hoverBorderColor: 'rgba(54, 162, 235, 1)', // Warna border saat hover    
                }]    
            },    
            options: {    
                responsive: true,    
                maintainAspectRatio: false,    
                scales: {    
                    y: {    
                        beginAtZero: true,    
                        title: {    
                            display: true,    
                            text: 'Kuantitas',    
                            font: {    
                                size: 16,    
                                weight: 'bold'    
                            }    
                        }    
                    },    
                    x: {    
                        title: {    
                            display: true,    
                            text: 'Nama Produk',    
                            font: {    
                                size: 16,    
                                weight: 'bold'    
                            }    
                        }    
                    }    
                },    
                plugins: {    
                    legend: {    
                        display: true,    
                        position: 'top',    
                        labels: {    
                            font: {    
                                size: 14,    
                                weight: 'bold'    
                            }    
                        }    
                    },    
                    tooltip: {    
                        callbacks: {    
                            label: function(tooltipItem) {    
                                return tooltipItem.dataset.label + ': ' + tooltipItem.raw;    
                            }    
                        }    
                    }    
                }    
            }    
        });    
    </script>    
</body>    
</html>    
