{% extends "base.html" %}
{% block title %}Change Password{% endblock %}

{% block body %}

<nav>
  <span class="brand">
    <img src="{{ url_for('static', filename='kvs.png') }}"
         alt="kvs" style="height:40px; vertical-align:middle; margin-right:8px;">
    Digital Attendance
  </span>

  <div class="links">
    <a href="/dashboard">📊 Dashboard</a>
    <a href="/students">👤 Students</a>
    <a href="/teachers">👩‍🏫 Teachers</a>
    <a href="/no_class">❓ No-Class</a>
    <a href="/logs">📋 Logs</a>
    <a href="/change-password" class="active">🔑 Change Password</a>
    <span class="role-chip">{{ role }}</span>
    <a href="/logout">🚪 {{ username }}</a>
  </div>
</nav>

<div class="wrap">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for cat, msg in messages %}<div class="alert {{ cat }}">{{ msg }}</div>{% endfor %}
  {% endwith %}

  <div class="card" style="max-width:500px;margin:auto;">
    <h2>🔑 Change Password</h2>

    <form method="POST">
      <label>Select Type</label>
      <select name="user_type" onchange="showBox(this.value)" required>
        <option value="">Select</option>
        <option value="admin">Admin</option>
        <option value="principal">Principal</option>
        <option value="teachers">Teachers</option>
      </select>

      <div id="adminBox" style="display:none;margin-top:12px;">
        <label>Admin</label>
        <select name="admin_id">
          {% for u in admins %}
            <option value="{{ u.id }}">{{ u.username }}</option>
          {% endfor %}
        </select>
      </div>

      <div id="principalBox" style="display:none;margin-top:12px;">
        <label>Principal</label>
        <select name="principal_id">
          {% for u in principals %}
            <option value="{{ u.id }}">{{ u.username }}</option>
          {% endfor %}
        </select>
      </div>

      <div id="teacherBox" style="display:none;margin-top:12px;">
        <label>Teacher</label>
        <select name="teacher_id">
          {% for t in teachers %}
            <option value="{{ t.id }}">{{ t.username }}</option>
          {% endfor %}
        </select>
      </div>

      <div style="margin-top:12px;">
        <label>New Password</label>
        <input type="password" name="new_password" required>
      </div>

      <button class="btn btn-navy" type="submit" style="margin-top:14px;">Update</button>
    </form>
  </div>
</div>

<script>
function showBox(val){
  document.getElementById("adminBox").style.display = "none";
  document.getElementById("principalBox").style.display = "none";
  document.getElementById("teacherBox").style.display = "none";
  if(val === "admin") document.getElementById("adminBox").style.display = "block";
  if(val === "principal") document.getElementById("principalBox").style.display = "block";
  if(val === "teachers") document.getElementById("teacherBox").style.display = "block";
}
</script>

{% endblock %}