{% extends 'admin/base.html' %}
{% block content %}

{# 1. Site Filter Dropdown #}
{% if is_super %}
<div style="margin-bottom: 20px; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px;">
    <form method="GET" action="{{ url_for('admin_sessions') }}" style="display: flex; gap: 10px; align-items: center;">
        <label style="color: #ccc; font-size: 13px;">Filter Router View:</label>
        <select name="site_id" onchange="this.form.submit()" style="padding: 8px; border-radius: 5px; background: #1e1b4b; color: white; border: 1px solid #4338ca;">
            <option value="">All Connected Routers</option>
            {% for site in all_sites %}
            <option value="{{ site.id }}" {% if selected_site == site.id %}selected{% endif %}>{{ site.name }}</option>
            {% endfor %}
        </select>
        <a href="{{ url_for('admin_sessions') }}" class="btn btn-purple" style="padding: 8px 16px; text-decoration:none; font-size:12px;">Reset</a>
    </form>
</div>
{% endif %}

<div class="stats-grid" style="margin-bottom:20px;">
  <div class="stat-card">
    <div class="stat-icon green">📡</div>
    <div><div class="stat-val">{{ mt_sessions|length }}</div><div class="stat-label">Live Online Sessions</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon purple">👤</div>
    <div><div class="stat-val">{{ mt_users|length }}</div><div class="stat-label">Verified Registered Users</div></div>
  </div>
</div>

<div class="two-col">
  <div class="card">
    <div class="card-title">🟢 Currently Online</div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Subscriber</th> 
            <th>Site</th>
            <th>Uptime</th>
          </tr>
        </thead>
        <tbody>
          {% for s in mt_sessions %}
          {% set db_sub = db_users.get(s.get('user','')) %}
          <tr>
            <td>
              <div style="font-weight:700; color:white;">{{ db_sub.first_name ~ ' ' ~ db_sub.surname if db_sub else 'Trial User' }}</div>
              <div class="mono" style="font-size:11px; color:rgba(255,255,255,0.5);">{{ s.get('user','') }}</div>
            </td>
            <td><span class="badge purple" style="font-size:10px;">{{ s._site_name }}</span></td>
            <td class="mono">{{ s.get('uptime','—') }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="card">
    <div class="card-title">👥 Verified Hotspot Registry</div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Username</th>
            <th>Campus</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
    {% for u in mt_users %}
    {% set db_sub = db_users.get(u.get('name','')) %}
  <tr>
    <td class="mono">
        {% if db_sub %}
            <div style="color:white; font-weight:700; font-size:14px;">
                {{ db_sub.first_name }} {{ db_sub.surname }}
            </div>
            <div style="font-size:11px; color:var(--muted);">
                User: {{ u.get('name','') }}
            </div>
        {% else %}
            <div style="color:white; font-weight:700;">Trial User</div>
            <div style="font-size:11px; color:var(--muted);">{{ u.get('name','') }}</div>
        {% endif %}
    </td>
    <td><span class="badge purple" style="font-size:10px;">{{ u.get('_site_name') }}</span></td>
    <td>
        <span class="badge {{ 'active' if u.get('disabled') == 'false' else 'expired' }}">
            {{ 'Enabled' if u.get('disabled') == 'false' else 'Disabled' }}
        </span>
    </td>
    <td>
      {% if db_sub %}
        <span class="badge {{ db_sub.payment_status }}">{{ db_sub.payment_status|upper }}</span>
      {% else %}
        <span class="badge failed">NO DB RECORD</span>
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}