{% extends 'base.html' %}
{% block title %}Super Admin — Avighna{% endblock %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
  <div>
    <h4 style="font-weight:700;margin:0;">Super Admin Panel</h4>
    <p style="color:#888;font-size:.87rem;margin:0;">All clients and platform overview</p>
  </div>
  <a href="{% url 'platform_settings' %}" class="btn btn-outline-primary btn-sm">⚙️ OVSE / Platform Settings</a>
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-2">
    <div class="stat-card c-blue">
      <div class="s-num">{{ total_orgs }}</div>
      <div class="s-lbl">Total Clients</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="stat-card c-green">
      <div class="s-num">{{ active_orgs }}</div>
      <div class="s-lbl">Active</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="stat-card c-gold">
      <div class="s-num">{{ trial_orgs }}</div>
      <div class="s-lbl">On Trial</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="stat-card c-red">
      <div class="s-num">{{ expired_orgs }}</div>
      <div class="s-lbl">Trial Expired</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="stat-card c-blue">
      <div class="s-num">{{ paid_orgs }}</div>
      <div class="s-lbl">Paid Clients</div>
    </div>
  </div>
  <div class="col-6 col-md-2">
    <div class="stat-card c-green">
      <div class="s-num">{{ total_verifs }}</div>
      <div class="s-lbl">Total Verif.</div>
    </div>
  </div>
</div>

<!-- Clients Table -->
<div class="card">
  <div class="card-header-bar">
    <h5>All Clients</h5>
  </div>
  <div style="padding:20px;">
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Organisation</th>
            <th>Sector</th>
            <th>Plan</th>
            <th>Trial</th>
            <th>Verifications</th>
            <th>UIDAI</th>
            <th>Status</th>
            <th>Joined</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for org in orgs %}
          <tr>
            <td>{{ forloop.counter }}</td>
            <td>
              <strong>{{ org.name }}</strong><br>
              <small style="color:#888;">{{ org.slug }}.{{ MAIN_DOMAIN }}</small>
            </td>
            <td style="font-size:.83rem;">{{ org.get_sector_display }}</td>
            <td>
              <span style="
                background:{% if org.plan == 'enterprise' %}#1a3c5e{% elif org.plan == 'business' %}#e8a020{% elif org.plan == 'trial' %}#17a2b8{% else %}#6c757d{% endif %};
                color:white;border-radius:20px;padding:3px 10px;font-size:.73rem;font-weight:600;white-space:nowrap;
              ">{{ org.get_plan_display }}</span>
            </td>
            <td style="font-size:.83rem;">
              {% if org.is_trial and not org.trial_expired %}
                <span style="color:#1a7a4a;font-weight:600;">{{ org.trial_days_remaining }} days left</span>
              {% elif org.trial_expired %}
                <span style="color:#d62828;font-weight:600;">Expired</span>
              {% else %}
                <span style="color:#888;">Paid</span>
              {% endif %}
            </td>
            <td>{{ org.verif_count }}</td>
            <td>
              {% if org.uidai_setup_done %}
                <span style="color:#1a7a4a;font-weight:600;">Done</span>
              {% else %}
                <span style="color:#d62828;">Pending</span>
              {% endif %}
            </td>
            <td>
              {% if org.is_active %}
                <span style="color:#1a7a4a;font-weight:600;">Active</span>
              {% else %}
                <span style="color:#d62828;font-weight:600;">Inactive</span>
              {% endif %}
            </td>
            <td style="font-size:.82rem;white-space:nowrap;">{{ org.created_at|date:"d M Y" }}</td>
            <td style="white-space:nowrap;">
              <a href="/superadmin/toggle/{{ org.slug }}/"
                 style="font-size:.78rem;padding:4px 10px;border-radius:20px;border:1.5px solid {% if org.is_active %}#d62828{% else %}#1a7a4a{% endif %};color:{% if org.is_active %}#d62828{% else %}#1a7a4a{% endif %};text-decoration:none;margin-right:4px;">
                {% if org.is_active %}Deactivate{% else %}Activate{% endif %}
              </a>
              {% if org.is_trial or org.trial_expired %}
              <a href="/superadmin/extend/{{ org.slug }}/"
                 style="font-size:.78rem;padding:4px 10px;border-radius:20px;border:1.5px solid #1a3c5e;color:#1a3c5e;text-decoration:none;">
                +15 Days
              </a>
              {% endif %}
              <form method="POST" action="/superadmin/activate-plan/{{ org.slug }}/" style="display:inline-flex;gap:4px;margin-top:4px;">
                {% csrf_token %}
                <select name="plan" style="font-size:.76rem;padding:3px 4px;border-radius:8px;border:1px solid #ccc;">
                  <option value="starter">Starter</option>
                  <option value="business">Business</option>
                  <option value="enterprise">Enterprise</option>
                </select>
                <button type="submit"
                        onclick="return confirm('Activate this plan for {{ org.name }} manually (no payment collected)?');"
                        style="font-size:.76rem;padding:3px 10px;border-radius:20px;border:1.5px solid #b8860b;background:#fff7e6;color:#8a5a00;cursor:pointer;">
                  💳 Mark Paid
                </button>
              </form>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="10" class="text-center text-muted py-4">No clients yet.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% endblock %}