{% extends "base.html" %}
{% block content %}
<h2>Mentees</h2>
<div class="mb-3">
  <form method="post" class="d-inline">
    <input type="hidden" name="action" value="activate_all">
    <button class="btn btn-sm btn-outline-secondary">Mark all active</button>
  </form>
  <form method="post" class="d-inline ms-2">
    <input type="hidden" name="action" value="deactivate_all">
    <button class="btn btn-sm btn-outline-secondary">Mark all inactive</button>
  </form>
  <a href="{{ url_for('main.mentees_export_csv', include_archived=('1' if show_archived else None)) }}" class="btn btn-sm btn-outline-primary ms-2">Export as CSV</a>
  <form method="get" class="d-inline ms-3">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="showArchivedMentees" name="show_archived" value="1" {% if show_archived %}checked{% endif %} onchange="this.form.submit()">
      <label class="form-check-label" for="showArchivedMentees">Show archived</label>
    </div>
  </form>
</div>
<form method="post">
  <input type="hidden" name="action" value="save">
  <input type="hidden" name="mentee_id" id="deleteMenteeId" value="">
  <input type="hidden" name="bulk_query" id="menteeBulkQuery" value="">
  <input type="hidden" name="show_archived" value="{{ '1' if show_archived else '' }}">
  
<div class="row g-2 align-items-end mb-2">
  <div class="col-md-9">
    <label class="form-label small mb-1">Search mentees...</label>
    <input type="text" class="form-control form-control-sm table-search-input" id="menteeSearch" placeholder="Search mentees..." data-target-table-id="mentees-table">
  </div>
  <div class="col-md-3 text-end">
    <button type="submit" name="action" value="bulk_archive_filtered" class="btn btn-sm btn-outline-secondary"
      onclick="document.getElementById('menteeBulkQuery').value=document.getElementById('menteeSearch').value || ''; return confirm('Archive all filtered mentees? Only inactive mentees with no assignments will be archived.');">Archive filtered</button>
    {% if show_archived %}
      <button type="submit" name="action" value="bulk_restore_filtered" class="btn btn-sm btn-outline-success ms-1"
        onclick="document.getElementById('menteeBulkQuery').value=document.getElementById('menteeSearch').value || ''; return confirm('Restore all filtered mentees?');">Restore filtered</button>
    {% endif %}
  </div>
</div>
<div class="table-responsive" style="max-height: 600px; overflow-y: auto; overflow-x: auto;">
    <table id="mentees-table" class="table table-sm table-bordered align-middle sortable">
      <thead class="table-light">
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Application Date</th>
          <th>Email</th>
          <th>CUNY ID</th>
          <th>Phone</th>
          <th>GPA</th>
          <th>Gender</th>
          <th>Identity</th>
          <th>Major</th>
          <th>Hobbies/Interests</th>
          <th>Needs</th>
          <th>Status at BMCC</th>
          <th>Active?</th>
          <th>Notes</th>
          {% if show_archived %}
            <th>Archived?</th>
            <th>Archived by</th>
            <th>Archived on</th>
          {% endif %}
          <th>Archive / Delete</th>
        </tr>
      </thead>
      <tbody>
        {% for t in mentees %}
        <tr>
          <td><input type="text" name="t_{{t.id}}_first_name" value="{{ t.first_name }}" class="form-control form-control-sm" style="min-width: 140px;"></td>
          <td><input type="text" name="t_{{t.id}}_last_name" value="{{ t.last_name }}" class="form-control form-control-sm" style="min-width: 140px;"></td>
          <td style="min-width: 120px; white-space: nowrap;">{% if t.application_date %}{{ t.application_date }}{% else %}<span class="text-muted">—</span>{% endif %}</td>
          <td><input type="text" name="t_{{t.id}}_email" value="{{ t.email }}" class="form-control form-control-sm" style="min-width: 220px;"></td>
          <td><input type="text" name="t_{{t.id}}_cuny" value="{{ t.cuny }}" class="form-control form-control-sm" style="min-width: 140px;"></td>
          <td><input type="text" name="t_{{t.id}}_phone" value="{{ t.phone }}" class="form-control form-control-sm" style="min-width: 140px;"></td>
          <td>{{ t.gpa }}</td>
          <td>{{ t.gender }}</td>
          <td>{{ t.identity }}</td>
          <td><input type="text" name="t_{{t.id}}_major" value="{{ t.major or '' }}" class="form-control form-control-sm" style="min-width: 160px;"></td>
          <td style="min-width: 260px; white-space: pre-wrap;">{{ t.hobbies_interests }}</td>
          <td style="min-width: 260px; white-space: pre-wrap;">{{ t.needs }}</td>
          <td>{{ t.status_at_bmcc }}</td>
          <td class="text-center">
            <div class="d-flex justify-content-center align-items-center">
              <input type="checkbox" name="t_{{t.id}}_is_active" value="1" class="form-check-input mentee-active" {% if t.is_active %}checked{% endif %}>
              <button type="button" class="btn btn-sm btn-link p-0 ms-1" onclick="fillDownCheckbox('mentee-active', {{ loop.index0 }})" title="Fill active down">↓</button>
            </div>
          </td>
          <td><input type="text" name="t_{{t.id}}_notes" value="{{ t.notes }}" class="form-control form-control-sm" style="min-width: 220px;"></td>
          {% if show_archived %}
            <td class="text-center">
              {% if t.is_archived %}<span class="badge text-bg-secondary">Archived</span>{% else %}<span class="text-muted">—</span>{% endif %}
            </td>
            <td style="min-width: 140px;">{% if t.is_archived %}{{ t.archived_by }}{% else %}<span class="text-muted">—</span>{% endif %}</td>
            <td style="min-width: 170px;">{% if t.is_archived %}{{ t.archived_on }}{% else %}<span class="text-muted">—</span>{% endif %}</td>
          {% endif %}
          <td class="text-center" style="min-width: 110px;">
            {% if not t.is_archived %}
              <button type="submit" name="action" value="archive_mentee" class="btn btn-sm btn-outline-secondary" title="Archive mentee"
                onclick="document.getElementById('deleteMenteeId').value='{{ t.id }}'; return confirm('Archive this mentee? They will be removed from operational views but retained for history.');">📦</button>
            {% else %}
              <button type="submit" name="action" value="restore_mentee" class="btn btn-sm btn-outline-success" title="Restore mentee"
                onclick="document.getElementById('deleteMenteeId').value='{{ t.id }}'; return confirm('Restore this mentee to the active pool?');">↩</button>
              <button type="submit" name="action" value="hard_delete_mentee" class="btn btn-sm btn-outline-danger ms-1" title="Permanently delete mentee"
                onclick="document.getElementById('deleteMenteeId').value='{{ t.id }}'; return confirm('Permanently delete this archived mentee? This cannot be undone.');">🗑</button>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="mt-2">
    <button class="btn btn-primary btn-sm">Save mentees</button>
  </div>
</form>

<script>
  // Prevent Enter key in the search box from submitting the form (which could trigger bulk actions)
  (function(){
    const search = document.getElementById('menteeSearch');
    if (!search) return;
    search.addEventListener('keydown', function(ev){
      if (ev.key === 'Enter') { ev.preventDefault(); }
    });
  })();
</script>
{% endblock %}