<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Reset Password – Collnetwork Technology LTD</title>
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
  <style>
    :root {
      --purple-deep: #3b1f6e;
      --purple-mid:  #6b3fa0;
      --green-vivid: #22c55e;
      --green-mid:   #16a34a;
      --green-glow:  #4ade80;
    }
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

    body {
      font-family: 'Nunito', sans-serif;
      min-height: 100vh;
      background: var(--purple-deep);
      display: flex; flex-direction: column;
      overflow-x: hidden;
    }
    body::before {
      content:''; position:fixed; inset:0; z-index:0;
      background:
        radial-gradient(ellipse 70% 60% at 80% 10%, rgba(34,197,94,0.15) 0%, transparent 55%),
        radial-gradient(ellipse 80% 70% at 10% 90%, rgba(107,63,160,0.5) 0%, transparent 60%),
        radial-gradient(ellipse 100% 100% at 50% 50%, #2a1250 0%, #0d0620 100%);
    }

    .orb { position:fixed; border-radius:50%; filter:blur(65px); pointer-events:none; z-index:0; }
    .orb-1 { width:300px; height:300px; background:rgba(107,63,160,0.3); top:10%; right:5%;
              animation:fl1 12s ease-in-out infinite; }
    .orb-2 { width:220px; height:220px; background:rgba(34,197,94,0.15); bottom:10%; left:5%;
              animation:fl2 10s ease-in-out infinite; }
    @keyframes fl1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-25px,20px)} }
    @keyframes fl2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-25px)} }

    header {
      position:relative; z-index:10;
      display:flex; align-items:center; gap:14px;
      padding:16px 32px;
      background:rgba(59,31,110,0.7); backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(155,109,206,0.25);
    }
    .logo-badge {
      width:46px; height:46px;
      background:linear-gradient(135deg, var(--green-vivid), var(--purple-mid));
      border-radius:11px; overflow:hidden; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
    }
    .logo-badge img { width:100%; height:100%; object-fit:contain; padding:5px; }
    .logo-text { font-size:18px; font-weight:800; color:white; }
    .logo-text span { color:var(--green-vivid); }

    .page-wrap {
      flex:1; position:relative; z-index:5;
      display:flex; align-items:center; justify-content:center;
      padding:32px 16px;
    }

    .card-container {
      width:100%; max-width:470px;
      animation: slideUp 0.55s cubic-bezier(0.22,1,0.36,1) forwards;
    }
    @keyframes slideUp {
      from { opacity:0; transform:translateY(28px); }
      to   { opacity:1; transform:translateY(0); }
    }

    .card {
      background:white; border-radius:24px; overflow:hidden;
      box-shadow:0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(155,109,206,0.2);
    }

    .card-header {
      background:linear-gradient(135deg, var(--purple-deep), var(--purple-mid));
      padding:30px 32px 26px; text-align:center;
      position:relative; overflow:hidden;
    }
    .card-header::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse 80% 80% at 50% 120%, rgba(34,197,94,0.22) 0%, transparent 70%);
    }
    .shield-icon {
      width:64px; height:64px;
      background:linear-gradient(135deg, rgba(34,197,94,0.25), rgba(255,255,255,0.1));
      border:2px solid rgba(255,255,255,0.3);
      border-radius:16px;
      display:flex; align-items:center; justify-content:center;
      font-size:30px;
      margin:0 auto 14px; position:relative; z-index:1;
    }
    .card-header h1 { color:white; font-size:22px; font-weight:800; margin-bottom:4px; position:relative; z-index:1; }
    .card-header p  { color:rgba(255,255,255,0.72); font-size:13px; position:relative; z-index:1; }

    .card-body { padding:28px 32px 32px; }

    .flash-msg { padding:12px 16px; border-radius:10px; margin-bottom:18px; font-size:13px; font-weight:700; }
    .flash-msg.error   { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }
    .flash-msg.success { background:#f0fdf4; border:1px solid #bbf7d0; color:var(--green-mid); }

    .mikrotik-note {
      background:linear-gradient(135deg, rgba(34,197,94,0.08), rgba(107,63,160,0.06));
      border:1px solid rgba(34,197,94,0.25);
      border-radius:12px; padding:13px 16px;
      font-size:13px; color:#3a5a40; line-height:1.6;
      margin-bottom:22px;
    }
    .mikrotik-note strong { color:var(--green-mid); }

    .form-group { margin-bottom:18px; }
    .form-group label {
      display:block; font-size:12px; font-weight:700;
      color:#7c6fa0; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:7px;
    }
    .input-wrap { position:relative; }
    .input-wrap .icon {
      position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:17px; pointer-events:none;
    }
    .input-wrap .eye-toggle {
      position:absolute; right:14px; top:50%; transform:translateY(-50%);
      background:none; border:none; cursor:pointer; font-size:18px; padding:0;
      color:#9b8ab8; transition:color 0.2s;
    }
    .input-wrap .eye-toggle:hover { color:var(--purple-mid); }
    .input-wrap input {
      width:100%; padding:13px 44px 13px 44px;
      border:2px solid #e4d9f5; border-radius:12px;
      font-family:'Nunito',sans-serif; font-size:14px; font-weight:600;
      color:#1a0a3c; background:#faf7ff; outline:none;
      transition:border-color 0.25s, box-shadow 0.25s, background 0.25s;
    }
    .input-wrap input:focus {
      border-color:var(--purple-mid); background:white;
      box-shadow:0 0 0 4px rgba(107,63,160,0.12);
    }
    .input-wrap input::placeholder { color:#b8a9d4; font-weight:400; }
    .input-wrap input.match  { border-color:#22c55e; }
    .input-wrap input.no-match { border-color:#ef4444; }

    /* strength meter */
    .strength-row {
      display:flex; align-items:center; gap:8px; margin-top:7px;
    }
    .strength-bar {
      flex:1; height:5px; border-radius:5px; background:#e4d9f5; overflow:hidden;
    }
    .strength-fill { height:100%; width:0%; border-radius:5px; transition:width 0.3s, background 0.3s; }
    .strength-label { font-size:11px; font-weight:700; color:#9b8ab8; min-width:44px; }

    .submit-btn {
      width:100%; padding:14px;
      background:linear-gradient(135deg, var(--green-mid), var(--green-vivid), var(--green-glow));
      color:white; border:none; border-radius:13px;
      font-family:'Nunito',sans-serif; font-size:15px; font-weight:800;
      cursor:pointer;
      box-shadow:0 6px 20px rgba(34,197,94,0.4);
      transition:transform 0.2s, box-shadow 0.2s;
      margin-top:8px;
    }
    .submit-btn:hover { transform:translateY(-2px); box-shadow:0 10px 28px rgba(34,197,94,0.5); }
    .submit-btn:active { transform:translateY(0); }
    .submit-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none; }

    .links-row { text-align:center; margin-top:18px; font-size:13px; color:#7c6fa0; }
    .links-row a { color:var(--purple-mid); font-weight:700; text-decoration:none; }
    .links-row a:hover { color:var(--green-mid); }

    footer {
      position:relative; z-index:10;
      background:rgba(59,31,110,0.7); backdrop-filter:blur(12px);
      border-top:1px solid rgba(155,109,206,0.25);
      padding:12px 32px;
      display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
    }
    footer .ft { color:rgba(255,255,255,0.5); font-size:12px; }
    footer a.support {
      display:flex; align-items:center; gap:6px;
      background:rgba(255,255,255,0.1); padding:7px 16px; border-radius:20px;
      color:white; text-decoration:none; font-size:12px; font-weight:700;
    }
  </style>
</head>
<body>

  <div class="orb orb-1"></div>
  <div class="orb orb-2"></div>

  <header>
    <div class="logo-badge">
      <img src="/static/img/collnetwork_logo.png" alt="Logo" onerror="this.style.display='none'">
    </div>
    <div class="logo-text">Collnetwork <span>Technology</span> LTD</div>
  </header>

  <div class="page-wrap">
    <div class="card-container">
      <div class="card">

        <div class="card-header">
          <div class="shield-icon">🛡️</div>
          <h1>Set New Password</h1>
          <p>Choose a strong password for your account</p>
        </div>

        <div class="card-body">

          {% with messages = get_flashed_messages(with_categories=true) %}
            {% for cat, msg in messages %}
              <div class="flash-msg {{ cat }}">
                {% if cat == 'success' %}✅{% else %}⚠️{% endif %} {{ msg }}
              </div>
            {% endfor %}
          {% endwith %}

          <div class="mikrotik-note">
            🌐 Your new password will be automatically updated on the
            <strong>WiFi hotspot</strong> — use it immediately after resetting.
          </div>

          <form method="POST" action="/reset-password/{{ token }}" id="resetForm">

            <div class="form-group">
              <label>New Password</label>
              <div class="input-wrap">
                <span class="icon">🔒</span>
                <input type="password" name="password" id="passwordField"
                       placeholder="At least 6 characters" required
                       oninput="checkStrength(this.value)"/>
                <button type="button" class="eye-toggle" onclick="toggleVis('passwordField', this)">👁</button>
              </div>
              <div class="strength-row">
                <div class="strength-bar"><div class="strength-fill" id="strengthFill"></div></div>
                <span class="strength-label" id="strengthLabel">–</span>
              </div>
            </div>

            <div class="form-group">
              <label>Confirm Password</label>
              <div class="input-wrap">
                <span class="icon">🔒</span>
                <input type="password" name="confirm_password" id="confirmField"
                       placeholder="Repeat your password" required
                       oninput="checkMatch()"/>
                <button type="button" class="eye-toggle" onclick="toggleVis('confirmField', this)">👁</button>
              </div>
            </div>

            <button type="submit" class="submit-btn" id="submitBtn">
              ✅ &nbsp;Reset Password
            </button>
          </form>

          <div class="links-row">
            <a href="/login">Back to Login</a>
            &nbsp;|&nbsp;
            <a href="/forgot-password">Request New Link</a>
          </div>

        </div>
      </div>
    </div>
  </div>

  <footer>
    <div class="ft">© 2025 Collnetwork Technology LTD</div>
    <a class="support" href="https://customersupport.collnetwork.net" target="_blank">💬 Support</a>
  </footer>

  <script>
    const labels = ['', 'Weak', 'Fair', 'Good', 'Strong', 'Very Strong'];
    const colors = ['', '#ef4444', '#f59e0b', '#3b82f6', '#22c55e', '#16a34a'];

    function checkStrength(val) {
      let score = 0;
      if (val.length >= 6)  score++;
      if (val.length >= 10) score++;
      if (/[A-Z]/.test(val)) score++;
      if (/[0-9]/.test(val)) score++;
      if (/[^A-Za-z0-9]/.test(val)) score++;
      const fill = document.getElementById('strengthFill');
      const lbl  = document.getElementById('strengthLabel');
      fill.style.width      = (score / 5 * 100) + '%';
      fill.style.background = colors[score] || '#e4d9f5';
      lbl.style.color       = colors[score] || '#9b8ab8';
      lbl.textContent       = labels[score] || '–';
      checkMatch();
    }

    function checkMatch() {
      const pw  = document.getElementById('passwordField').value;
      const cf  = document.getElementById('confirmField');
      if (!cf.value) { cf.className = ''; return; }
      cf.classList.toggle('match',    pw === cf.value);
      cf.classList.toggle('no-match', pw !== cf.value);
    }

    function toggleVis(fieldId, btn) {
      const f = document.getElementById(fieldId);
      if (f.type === 'password') { f.type = 'text'; btn.textContent = '🙈'; }
      else                       { f.type = 'password'; btn.textContent = '👁'; }
    }

    document.getElementById('resetForm').addEventListener('submit', function(e) {
      const pw = document.getElementById('passwordField').value;
      const cf = document.getElementById('confirmField').value;
      if (pw !== cf) {
        e.preventDefault();
        alert('Passwords do not match!');
        return;
      }
      const btn = document.getElementById('submitBtn');
      btn.disabled = true;
      btn.textContent = '⏳  Updating…';
    });
  </script>
</body>
</html>
