{% extends 'admin/base_site.html' %}

{% block content %}
  <h1>Transaction Overview</h1>
  <div style="width: 60%; margin: 0 auto;">
    <canvas id="transactionChart"></canvas>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    var ctx = document.getElementById('transactionChart').getContext('2d');
    var transactionChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Success', 'Refunded'],
        datasets: [{
          label: 'Transaction Counts',
          data: [{{ success_count }}, {{ refunded_count }}],
          backgroundColor: ['#4CAF50', '#FF9800'],
          borderColor: ['#4CAF50', '#FF9800'],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
{% endblock %}