<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NDUTH WiFi — Register</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: 16px;
      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;
      line-height: 1.3;
    }

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

    .badge {
      display: inline-block;
      background: rgba(255,255,255,0.15);
      color: white;
      font-size: 11px;
      padding: 4px 12px;
      border-radius: 20px;
      margin-top: 10px;
      border: 1px solid rgba(255,255,255,0.2);
    }

    .body { padding: 28px 32px; }

    .plan-box {
      background: linear-gradient(135deg, #e8f4fd, #dbeafe);
      border: 1px solid #93c5fd;
      border-radius: 12px;
      padding: 14px 18px;
      margin-bottom: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .plan-box .plan-label { color: #1e40af; font-size: 13px; font-weight: 600; }
    .plan-box .plan-price { color: #1e40af; font-size: 20px; font-weight: 800; }
    .plan-box .plan-sub   { color: #3b82f6; font-size: 11px; }

    .flash-error {
      background: #fef2f2;
      border: 1px solid #fca5a5;
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 16px;
      color: #dc2626;
      font-size: 13px;
    }

    .flash-success {
      background: #f0fdf4;
      border: 1px solid #86efac;
      border-radius: 10px;
      padding: 10px 14px;
      margin-bottom: 16px;
      color: #16a34a;
      font-size: 13px;
    }

    .row { display: flex; gap: 12px; }
    .row .field { flex: 1; }

    .field { margin-bottom: 16px; }

    label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    input {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid #e5e7eb;
      border-radius: 10px;
      font-size: 14px;
      color: #111;
      transition: border-color 0.2s;
      outline: none;
    }

    input:focus { border-color: #1a4a7a; }

    .btn {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #0a2540, #1a4a7a);
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 8px;
      transition: opacity 0.2s;
    }

    .btn:hover { opacity: 0.9; }

    .links {
      text-align: center;
      margin-top: 18px;
      font-size: 13px;
      color: #6b7280;
    }

    .links a { color: #1a4a7a; text-decoration: none; font-weight: 600; }

    .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 Okolobiri<br>WiFi Registration</h1>
      <p>Niger Delta University Teaching Hospital</p>
      <span class="badge">Staff &amp; Student Access</span>
    </div>

    <div class="body">

      {% with messages = get_flashed_messages(with_categories=true) %}
        {% for category, message in messages %}
          <div class="flash-{{ category }}">{{ message }}</div>
        {% endfor %}
      {% endwith %}

      <div class="plan-box">
        <div>
          <div class="plan-label">Monthly Subscription</div>
          <div class="plan-sub">30 days unlimited access</div>
        </div>
        <div style="text-align:right;">
          <div class="plan-price">₦{{ "{:,.0f}".format(site.amount_kobo / 100) }}</div>
          <div class="plan-sub">per month</div>
        </div>
      </div>

      <form method="POST" action="/nduth/register">
        <div class="row">
          <div class="field">
            <label>First Name</label>
            <input type="text" name="first_name"
                   value="{{ first_name or '' }}" required
                   placeholder="John">
          </div>
          <div class="field">
            <label>Surname</label>
            <input type="text" name="surname"
                   value="{{ surname or '' }}" required
                   placeholder="Doe">
          </div>
        </div>

        <div class="field">
          <label>Email Address</label>
          <input type="email" name="email"
                 value="{{ email or '' }}" required
                 placeholder="you@gmail.com">
        </div>

        <div class="field">
          <label>Phone Number</label>
          <input type="tel" name="phone"
                 value="{{ phone or '' }}" required
                 placeholder="08012345678">
        </div>

        <div class="row">
          <div class="field">
            <label>Password</label>
            <input type="password" name="password"
                   required placeholder="Min. 6 characters">
          </div>
          <div class="field">
            <label>Confirm</label>
            <input type="password" name="confirm_password"
                   required placeholder="Repeat password">
          </div>
        </div>

        <button type="submit" class="btn">
          💳 &nbsp;Proceed to Payment
        </button>
      </form>

      <div class="links">
        Already registered?
        <a href="/nduth/login">Log in here</a>
        &nbsp;·&nbsp;
        <a href="/nduth/forgot-password">Forgot password?</a>
      </div>
    </div>

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