<?php
// Koneksi database
define('DB_HOST', 'localhost');
define('DB_USER', 'wiselie_nanda');
define('DB_PASS', 'Clemira123');
define('DB_NAME', 'wiselie_inventory');

$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Query untuk mendapatkan data summary
$sql = "SELECT kode, SUM(quantity) as total_quantity 
        FROM incoming_accurate 
        GROUP BY kode 
        ORDER BY total_quantity DESC";
$result = $conn->query($sql);

$labels = [];
$data = [];
$backgroundColors = [];

// Warna acak untuk chart
function getRandomColor() {
    return '#' . str_pad(dechex(mt_rand(0, 0xFFFFFF)), 6, '0', STR_PAD_LEFT);
}

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $labels[] = $row['kode'];
        $data[] = (float)$row['total_quantity'];
        $backgroundColors[] = getRandomColor();
    }
}

$conn->close();
?>

<!DOCTYPE html>
<html>
<head>
    <title>Perbandingan Quantity Incoming Accurate</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .chart-container {
            width: 80%;
            margin: 0 auto;
        }
        table {
            border-collapse: collapse;
            width: 50%;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Perbandingan Quantity Incoming Accurate</h1>
        <p>Summary quantity berdasarkan kode barang</p>
    </div>

    <div class="chart-container">
        <canvas id="quantityChart"></canvas>
    </div>

    <div class="table-container">
        <h2>Data Summary</h2>
        <table>
            <thead>
                <tr>
                    <th>Kode Barang</th>
                    <th>Total Quantity</th>
                </tr>
            </thead>
            <tbody>
                <?php
                foreach($labels as $index => $label) {
                    echo "<tr>
                            <td>{$label}</td>
                            <td>{$data[$index]}</td>
                          </tr>";
                }
                ?>
            </tbody>
        </table>
    </div>

    <script>
        // Data untuk chart
        const chartData = {
            labels: <?php echo json_encode($labels); ?>,
            datasets: [{
                label: 'Total Quantity',
                data: <?php echo json_encode($data); ?>,
                backgroundColor: <?php echo json_encode($backgroundColors); ?>,
                borderColor: '#333',
                borderWidth: 1
            }]
        };

        // Konfigurasi chart
        const config = {
            type: 'bar',
            data: chartData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Perbandingan Total Quantity Berdasarkan Kode Barang'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.parsed.y.toFixed(2);
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Quantity'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Kode Barang'
                        }
                    }
                }
            }
        };

        // Render chart
        window.onload = function() {
            const ctx = document.getElementById('quantityChart').getContext('2d');
            new Chart(ctx, config);
        };
    </script>
</body>
</html>