{% extends "base.html" %}
{% block content %}
<h2>Assignments</h2>

<div class="mb-3">
  
  <form method="post" class="d-inline">
    <input type="hidden" name="action" value="lock_all">
    <button class="btn btn-sm btn-outline-secondary">Lock all assignments</button>
  </form>
  <form method="post" class="d-inline ms-2">
    <input type="hidden" name="action" value="unlock_all">
    <button class="btn btn-sm btn-outline-secondary">Unlock all assignments</button>
  </form>
  <form method="post" class="d-inline ms-2" onsubmit="return handleBulkUnpair(this);">
    <input type="hidden" name="action" value="unpair_all_unlocked">
    <input type="hidden" name="unpair_reason" value="" class="unpairReasonField">
    <button class="btn btn-sm btn-outline-danger">Unpair unlocked assignments</button>
  </form>
</div>

<!-- Hidden form to unpair a single unlocked match (avoids nested forms) -->
<form id="unpairOneForm" method="post" class="d-none">
  <input type="hidden" name="action" value="unpair_match">
  <input type="hidden" name="match_id" id="unpairMatchId" value="">
  <input type="hidden" name="unpair_reason" value="" class="unpairReasonField">
</form>

<form method="post">
  <input type="hidden" name="action" value="save_locks">
  
<div class="d-flex justify-content-end mb-2">
  <input type="text" class="form-control form-control-sm table-search-input" placeholder="Search assignments..." data-target-table-id="assignments-table">
</div>
<div class="table-responsive" style="max-height: 600px; overflow-y: auto; overflow-x: auto;">
    <table id="assignments-table" class="table table-sm table-bordered align-middle sortable">
      <thead class="table-light">
        <tr>
          <th>Lock?</th>
          <th>Mentor</th>
          <th>Mentee</th>
          <th>Score</th>
          <th>Why this match?</th>
          <th style="min-width: 70px;">Unpair</th>
        </tr>
      </thead>
      <tbody>
        {% for a in assignments %}
        <tr>
          <td class="text-center">
            <input type="checkbox" name="lock_{{a.id}}" value="1" {% if a.locked %}checked{% endif %}>
          </td>
          <td>{{ a.mentor_label }}</td>
          <td>{{ a.mentee_label }}</td>
          <td>{{ "%.1f"|format(a.score) }}</td>
          <td>{{ a.explanation }}</td>
          <td class="text-center">
            {% if not a.locked %}
              <button type="button" class="btn btn-sm btn-outline-danger" title="Unpair assignment"
                onclick="return handleUnpairOne({{ a.id }});">
                ⛓✖
              </button>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="mt-2">
    <button class="btn btn-sm btn-primary">Save lock states</button>
  </div>
</form>

<hr>

<h4>Manual assignment</h4>
<form method="post" class="row g-3">
  <input type="hidden" name="action" value="add_manual_assignment">
  <div class="col-md-4">
    <label class="form-label">Mentee (active & without locked assignments)</label>
    <select name="manual_mentee_id" class="form-select" required>
      <option value="">-- choose mentee --</option>
      {% for t in manual_mentees %}
      <option value="{{ t.id }}">{{ t.first_name }} {{ t.last_name }} {% set cuny = (t.attrs or {}).get('CUNY ID# (EMPLID)', '') %}{% if cuny %}{{ cuny }}{% endif %}</option>
      {% endfor %}
    </select>
  </div>
  <div class="col-md-4">
    <label class="form-label">Mentor (Hired & active; shows remaining capacity)</label>
    <select name="manual_mentor_id" class="form-select" required>
      <option value="">-- choose mentor --</option>
      {% for m in manual_mentors %}
      {% set attrs = m.attrs or {} %}
      {% set cuny = attrs.get('CUNY ID# (EMPLID)', '') %}
      <option value="{{ m.id }}">
        {{ m.first_name }} {{ m.last_name }}
        {% if cuny %} {{ cuny }}{% endif %}
        (remaining: {{ m.remaining_capacity }} of {{ m.effective_capacity }})
      </option>
      {% endfor %}
    </select>
  </div>
  <div class="col-md-4 d-flex flex-column justify-content-end">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="manual_allow_overcapacity" id="manual_allow_overcapacity">
      <label class="form-check-label" for="manual_allow_overcapacity">
        Allow this mentor to go over capacity
      </label>
    </div>
    <div class="form-check mt-1">
      <input class="form-check-input" type="checkbox" name="manual_allow_min_overlap" id="manual_allow_min_overlap">
      <label class="form-check-label" for="manual_allow_min_overlap">
        Ignore minimum availability overlap for this match
      </label>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-success btn-sm">Create & lock assignment</button>
  </div>
</form>

<hr>

<h4>Mentees without an assignment</h4>
{% if active_unassigned %}
  
<div class="d-flex justify-content-end mb-2">
  <input type="text" class="form-control form-control-sm table-search-input" placeholder="Search unpaired mentees..." data-target-table-id="unpaired-mentees-table">
</div>
<div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
    <table id="unpaired-mentees-table" class="table table-sm table-bordered align-middle sortable">
      <thead class="table-light">
        <tr>
          <th>Mentee</th>
          <th>Email</th>
          <th>CUNY ID</th>
          <th>Major</th>
        </tr>
      </thead>
      <tbody>
        {% for t in active_unassigned %}
        {% set attrs = t.attrs or {} %}
        <tr>
          <td>{{ t.first_name }} {{ t.last_name }} {% set cuny = attrs.get('CUNY ID# (EMPLID)', '') %}{% if cuny %}{{ cuny }}{% endif %}</td>
          <td>{{ t.email }}</td>
          <td>{{ attrs.get('CUNY ID# (EMPLID)', '') }}</td>
          <td>{{ attrs.get('Major', '') }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
{% else %}
  <p>All active mentees currently have a mentor assignment.</p>
{% endif %}

<script>
  function _fillReason(form, reason){
    form.querySelectorAll('.unpairReasonField').forEach(el => el.value = reason || '');
  }

  function handleUnpairOne(matchId){
    if(!confirm('Unpair this unlocked assignment? Locked assignments will remain unchanged.')) return false;
    const reason = prompt('Optional: Reason for unpair (internal record). Leave blank if not needed:', '') || '';
    const form = document.getElementById('unpairOneForm');
    document.getElementById('unpairMatchId').value = matchId;
    _fillReason(form, reason);
    form.submit();
    return false;
  }

  function handleBulkUnpair(form){
    if(!confirm('Unpair ALL unlocked assignments? This cannot be undone. Locked assignments will remain.')) return false;
    const reason = prompt('Optional: Reason for unpair (internal record). Leave blank if not needed:', '') || '';
    _fillReason(form, reason);
    return true;
  }
</script>

{% endblock %}