<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NDUTH WiFi — Active</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      background: linear-gradient(135deg, #0a2540 0%, #1a4a7a 50%, #0d3b6e 100%);
      font-family: 'Segoe UI', Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .card {
      background: white;
      border-radius: 20px;
      width: 100%;
      max-width: 440px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,0.3);
    }

    .header {
      background: linear-gradient(135deg, #0a2540, #1a4a7a);
      padding: 28px 32px;
      text-align: center;
    }

    .header .logo {
      width: 64px; height: 64px;
      background: rgba(255,255,255,0.15);
      border-radius: 50%; margin: 0 auto 14px;
      display: flex; align-items: center;
      justify-content: center; font-size: 28px;
    }

    .header h1 { color: white; font-size: 18px; font-weight: 700; }
    .header p  { color: rgba(255,255,255,0.7); font-size: 12px; margin-top: 6px; }

    /* Green tick banner */
    .success-banner {
      background: linear-gradient(135deg, #16a34a, #15803d);
      padding: 18px 32px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .success-banner span {
      color: white; font-size: 15px; font-weight: 700;
    }

    .body { padding: 28px 32px; }

    /* Info rows */
    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f3f4f6;
      font-size: 14px;
    }
    .info-row:last-child { border-bottom: none; }
    .info-row .label { color: #6b7280; font-weight: 500; }
    .info-row .value { color: #111827; font-weight: 600; text-align: right; }
    .info-row .value.green { color: #16a34a; }
    .info-row .value.red   { color: #dc2626; }
    .info-row .value.amber { color: #d97706; }

    /* Days remaining pill */
    .days-pill {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
    }
    .days-pill.green  { background: #dcfce7; color: #15803d; }
    .days-pill.amber  { background: #fef9c3; color: #92400e; }
    .days-pill.red    { background: #fee2e2; color: #b91c1c; }

    /* Credentials box */
    .creds-box {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 20px;
      margin-top: 20px;
    }
    .creds-box .creds-title {
      font-size: 12px; font-weight: 700; color: #374151;
      text-transform: uppercase; letter-spacing: 0.05em;
      margin-bottom: 10px;
    }
    .creds-box .cred-row {
      display: flex; justify-content: space-between;
      font-size: 13px; margin-bottom: 6px;
    }
    .creds-box .cred-row .k { color: #6b7280; }
    .creds-box .cred-row .v { color: #111; font-family: monospace; font-weight: 600; }

    /* Renew button */
    .btn-renew {
      display: block; width: 100%;
      padding: 14px; margin-top: 20px;
      background: linear-gradient(135deg, #0a2540, #1a4a7a);
      color: white; border: none; border-radius: 12px;
      font-size: 15px; font-weight: 700; cursor: pointer;
      text-align: center; text-decoration: none;
      transition: opacity 0.2s;
    }
    .btn-renew:hover { opacity: 0.9; }

    .logout-link {
      display: block; text-align: center;
      margin-top: 14px; font-size: 13px; color: #9ca3af;
      text-decoration: none;
    }
    .logout-link:hover { color: #6b7280; }

    .footer {
      background: #0a2540; padding: 12px 32px; text-align: center;
    }
    .footer p { color: rgba(255,255,255,0.5); font-size: 11px; }
  </style>
</head>
<body>
  <div class="card">
    <div class="header">
      <div class="logo">🏥</div>
      <h1>NDUTH WiFi Portal</h1>
      <p>Niger Delta University Teaching Hospital</p>
    </div>

    <div class="success-banner">
      <span>✅ &nbsp;You are connected to the internet</span>
    </div>

    <div class="body">

      <div class="info-row">
        <span class="label">Name</span>
        <span class="value">{{ subscriber.first_name }} {{ subscriber.surname }}</span>
      </div>

      <div class="info-row">
        <span class="label">Email</span>
        <span class="value">{{ subscriber.email }}</span>
      </div>

      <div class="info-row">
        <span class="label">Status</span>
        {% if subscriber.payment_status == 'active' %}
          <span class="value green">● Active</span>
        {% elif subscriber.payment_status == 'expired' %}
          <span class="value red">● Expired</span>
        {% else %}
          <span class="value amber">● {{ subscriber.payment_status | capitalize }}</span>
        {% endif %}
      </div>


      {% if subscriber.expiry_date %}
       <div class="info-row">
      <span class="label">Expires On</span>
      <span class="value">{{ subscriber.expiry_date.strftime('%d %b %Y') }}</span>
     </div>
      <div class="info-row">
     <span class="label">Status</span>
      <span class="value">
      {% if subscriber.payment_status == 'active' %}
        <span class="days-pill green">Active until {{ subscriber.expiry_date.strftime('%d %b %Y') }}</span>
      {% else %}
        <span class="days-pill red">Expired</span>
      {% endif %}
      </span>
    </div>
    {% endif %}

      {% if subscriber.last_payment %}
        <div class="info-row">
          <span class="label">Last Payment</span>
          <span class="value">{{ subscriber.last_payment.strftime('%d %b %Y') }}</span>
        </div>
      {% endif %}

      <!-- WiFi login credentials reminder -->
      <div class="creds-box">
        <div class="creds-title">📶 WiFi Login Credentials</div>
        <div class="cred-row">
          <span class="k">Username</span>
          <span class="v">{{ subscriber.email }}</span>
        </div>
        <div class="cred-row">
          <span class="k">Password</span>
          <span class="v">Your registration password</span>
        </div>
        <div style="margin-top:8px;font-size:11px;color:#9ca3af;">
          Use these on the MikroTik hotspot login page.
        </div>
      </div>

      {% if subscriber.payment_status != 'active' %}
        <a href="/nduth/register" class="btn-renew">
          🔄 &nbsp;Renew Subscription — ₦{{ "{:,.0f}".format(site.amount_kobo / 100) }}
        </a>
      {% else %}
        <a href="/nduth/register" class="btn-renew">
          🔄 &nbsp;Renew Early — ₦{{ "{:,.0f}".format(site.amount_kobo / 100) }}
        </a>
      {% endif %}

      <a href="/nduth/login" class="logout-link">← Back to login</a>
    </div>

    <div class="footer">
      <p>Powered by Collnetwork Technology LTD &nbsp;·&nbsp; © 2026</p>
    </div>
  </div>
</body>
</html>
