{% extends "base.html" %}
{% block title %}Campaign{% endblock %}

{% block content %}
<h1>📊 {{ campaign.name }}</h1>

<div class="cards">
    <div class="card">
        <h3>Total</h3>
        <p class="total">{{ total }}</p>
    </div>
    <div class="card">
        <h3>Sent</h3>
        <p class="success">{{ sent }}</p>
    </div>
    <div class="card">
        <h3>Bounced</h3>
        <p class="failed">{{ bounced }}</p>
    </div>
</div>

<div class="card">
    <h3>Email Performance</h3>
    <div class="chart-container">
    <canvas id="emailChart"></canvas>
</div>

</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
fetch("/api/campaign/{{ campaign.id }}/stats")
  .then(res => res.json())
  .then(data => {
      new Chart(document.getElementById("emailChart"), {
          type: "bar",
          data: {
              labels: ["Sent", "Failed", "Pending"],
              datasets: [{
                  label: "Emails",
                  data: [data.sent, data.failed, data.pending],
                  backgroundColor: ["#22c55e", "#ef4444", "#facc15"]
              }]
          }
      });
  });
</script>



<div class="card">
<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Email</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        {% for email in emails %}
        <tr>
            <td>{{ email.id }}</td>
            <td>{{ email.email }}</td>
            <td>
                <span class="badge {{ email.status|lower }}">
                    {{ email.status }}
                </span>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
{% endblock %}