<!DOCTYPE html>
<html>
<head>
    <title>Dashboard Pembeli Harian</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<form method="get" action="">
    <label for="month">Bulan:</label>
    <select name="month" id="month">
        <?php foreach ($months as $m): ?>
            <option value="<?= str_pad($m, 2, '0', STR_PAD_LEFT); ?>" <?= (date('m') == str_pad($m, 2, '0', STR_PAD_LEFT)) ? 'selected' : ''; ?>>
                <?= date('F', mktime(0, 0, 0, $m, 1)); ?>
            </option>
        <?php endforeach; ?>
    </select>

    <label for="year">Tahun:</label>
    <select name="year" id="year">
        <?php foreach ($years as $y): ?>
            <option value="<?= $y; ?>" <?= (date('Y') == $y) ? 'selected' : ''; ?>><?= $y; ?></option>
        <?php endforeach; ?>
    </select>

    <input type="submit" value="Filter">
</form>

<canvas id="buyersChart"></canvas>
<script>
    const ctx = document.getElementById('buyersChart').getContext('2d');
    const labels = <?= json_encode(array_column($buyers_data, 'transaction_date')); ?>;
    const new_buyers = <?= json_encode(array_column($buyers_data, 'new_buyers')); ?>;
    const old_buyers = <?= json_encode(array_column($buyers_data, 'old_buyers')); ?>;

    const buyersChart = new Chart(ctx, {
        type: 'line', // Change to 'bar' for a bar chart
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Pembeli Baru',
                    data: new_buyers,
                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    fill: false,
                },
                {
                    label: 'Pembeli Lama',
                    data: old_buyers,
                    backgroundColor: 'rgba(153, 102, 255, 0.5)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    fill: false,
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>
</body>
</html>
