{% extends "admin/admin_base.html" %}

{% block title %}Abonați Newsletter — Admin{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h2 class="h3 fw-bold mb-1">📧 Management Abonați Newsletter</h2>
    <p class="text-secondary small mb-0">Gestionează lista de abonați, blochează adresele nedorite sau exportă lista în format CSV.</p>
  </div>
  <div>
    <a href="/admin/plugins/newsletter/subscribers/export" class="btn btn-success rounded-pill px-4 shadow-sm fw-semibold">
      📥 Export CSV
    </a>
  </div>
</div>

{% if request.query_params.get('msg') %}
<div class="alert alert-info alert-dismissible fade show rounded-3 shadow-sm mb-4" role="alert">
  {{ request.query_params.get('msg') }}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

<!-- Stats Cards -->
<div class="row g-3 mb-4">
  <div class="col-md-3">
    <div class="card border-0 shadow-sm rounded-3 p-3 bg-body-tertiary">
      <span class="text-secondary small fw-semibold">Total Abonați</span>
      <h3 class="fw-bold mb-0 text-body mt-1">{{ total_count }}</h3>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card border-0 shadow-sm rounded-3 p-3 bg-success-subtle text-success-emphasis">
      <span class="small fw-semibold">🟢 Activi</span>
      <h3 class="fw-bold mb-0 mt-1">{{ active_count }}</h3>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card border-0 shadow-sm rounded-3 p-3 bg-warning-subtle text-warning-emphasis">
      <span class="small fw-semibold">🟡 Dezbonați</span>
      <h3 class="fw-bold mb-0 mt-1">{{ unsubscribed_count }}</h3>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card border-0 shadow-sm rounded-3 p-3 bg-danger-subtle text-danger-emphasis">
      <span class="small fw-semibold">🔴 Blocați</span>
      <h3 class="fw-bold mb-0 mt-1">{{ blocked_count }}</h3>
    </div>
  </div>
</div>

<!-- Subscribers Table -->
<div class="card border-0 shadow-sm rounded-3 overflow-hidden">
  <div class="card-header bg-body-tertiary py-3 d-flex justify-content-between align-items-center">
    <h5 class="card-title h6 fw-bold mb-0">Lista de Abonați ({{ total_count }})</h5>
  </div>
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead class="table-light">
        <tr>
          <th>#ID</th>
          <th>Adresă E-mail</th>
          <th>Limbă</th>
          <th>Status</th>
          <th>Data Abonării</th>
          <th class="text-end">Acțiuni</th>
        </tr>
      </thead>
      <tbody>
        {% if subscribers and subscribers|length > 0 %}
          {% for sub in subscribers %}
          <tr>
            <td><span class="text-secondary small">#{{ sub.id }}</span></td>
            <td>
              <span class="fw-semibold text-body">{{ sub.email }}</span>
            </td>
            <td>
              <span class="badge text-bg-light border px-2 py-1">{{ sub.locale|upper }}</span>
            </td>
            <td>
              {% if sub.status == 'active' %}
                <span class="badge text-bg-success rounded-pill px-3 py-1">🟢 Activ</span>
              {% elif sub.status == 'blocked' %}
                <span class="badge text-bg-danger rounded-pill px-3 py-1">🔴 Blocat</span>
              {% else %}
                <span class="badge text-bg-warning rounded-pill px-3 py-1">🟡 Dezabonat</span>
              {% endif %}
            </td>
            <td>
              <span class="text-secondary small">{{ sub.subscribed_at }}</span>
            </td>
            <td class="text-end">
              <div class="d-inline-flex gap-1">
                {% if sub.status == 'blocked' %}
                  <form action="/admin/plugins/newsletter/subscribers/action" method="post" class="d-inline">
                    <input type="hidden" name="email" value="{{ sub.email }}" />
                    <input type="hidden" name="action" value="activate" />
                    <button type="submit" class="btn btn-sm btn-outline-success" title="Activează / Deblochează">
                      🟢 Activează
                    </button>
                  </form>
                {% else %}
                  <form action="/admin/plugins/newsletter/subscribers/action" method="post" class="d-inline">
                    <input type="hidden" name="email" value="{{ sub.email }}" />
                    <input type="hidden" name="action" value="block" />
                    <button type="submit" class="btn btn-sm btn-outline-warning" title="Blochează abonatul">
                      🚫 Blochează
                    </button>
                  </form>
                {% endif %}

                <form action="/admin/plugins/newsletter/subscribers/action" method="post" class="d-inline" onsubmit="return confirm('Sigur dorești să ștergi acest abonat din baza de date?')">
                  <input type="hidden" name="email" value="{{ sub.email }}" />
                  <input type="hidden" name="action" value="delete" />
                  <button type="submit" class="btn btn-sm btn-outline-danger" title="Șterge definitiv">
                    🗑️ Șterge
                  </button>
                </form>
              </div>
            </td>
          </tr>
          {% endfor %}
        {% else %}
          <tr>
            <td colspan="6" class="text-center py-5 text-secondary">
              <div class="fs-2 mb-2">📧</div>
              Nu există niciun abonat înregistrat în acest moment.
            </td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}