<script>
document.addEventListener("DOMContentLoaded", function () {
    const ctx = document.getElementById("transactionsChart").getContext("2d");

    const transactionsChart = new Chart(ctx, {
        type: "line",
        data: {
            labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], // Sample months
            datasets: [
                {
                    label: "Deposits (GHS)",
                    data: [<?php echo $total_deposit; ?>, 400, 800, 600, 1200, 700, 1100], // Replace with real data
                    borderColor: "#007bff",
                    backgroundColor: "rgba(0,123,255,0.2)",
                    fill: true,
                    tension: 0.4,
                    pointRadius: 0, // Invisible points
                    pointHoverRadius: 6, // Show points on hover
                    pointBackgroundColor: "#007bff",
                },
                {
                    label: "Withdrawals (GHS)",
                    data: [<?php echo $total_withdrawal; ?>, 300, 500, 400, 800, 600, 900], // Replace with real data
                    borderColor: "#dc3545",
                    backgroundColor: "rgba(220,53,69,0.2)",
                    fill: true,
                    tension: 0.4,
                    pointRadius: 0, // Invisible points
                    pointHoverRadius: 6, // Show points on hover
                    pointBackgroundColor: "#dc3545",
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                tooltip: {
                    enabled: true,
                    mode: "nearest",
                    intersect: false
                }
            },
            scales: {
                x: { grid: { display: false } },
                y: { beginAtZero: true }
            }
        }
    });
});
</script>

      <h4 class="mt-4">Deposits & Withdrawals Chart</h4>
            <canvas id="transactionsChart"></canvas>


               .notification-container { position: relative; cursor: pointer; }
        .notification-badge {
            background: red; color: white; font-size: 12px;
            padding: 2px 6px; border-radius: 50%;
            position: absolute; top: 0; right: 0;
        }
        .notification-dropdown {
            display: none; position: absolute; top: 30px; right: 0;
            background: white; width: 250px; border: 1px solid #ddd;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 5px; padding: 10px; z-index: 1000;
        }