{% extends "base.html" %}
{% block title %}Enrollment — {{ record.project_name }}{% endblock %}

{# One submitted enrollment form, rendered through the same schema the public
   page uses. The customer's answers are READ-ONLY here — only the office-use
   block and the status are editable, so the file stays a faithful record of
   what was actually requested. #}

{% block content %}
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
  <div>
    <h2 class="mb-0"><i class="bi bi-clipboard-check"></i> {{ record.project_name }}</h2>
    <div class="text-muted small">
      Reference {{ record.id }} · submitted {{ record.submitted_at | replace('T', ' ') }}
      {% if record.updated_at %}
      · updated {{ record.updated_at | replace('T', ' ') }}
      {% endif %}
    </div>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ url_for('enrollment.admin_list') }}" class="btn btn-outline-secondary">
      <i class="bi bi-arrow-left"></i> Back
    </a>
    <a href="{{ url_for('enrollment.admin_download', submission_id=record.id) }}"
       class="btn btn-outline-primary">
      <i class="bi bi-filetype-json"></i> Download JSON
    </a>
  </div>
</div>

<div class="row g-3">
  {# ── Request details ─────────────────────────────────────────────── #}
  <div class="col-12 col-lg-6">
    <div class="card shadow-sm h-100">
      <div class="card-header fw-semibold">Request</div>
      <div class="card-body">
        <dl class="row mb-0">
          <dt class="col-5">Project Name</dt><dd class="col-7">{{ record.project_name or '—' }}</dd>
          <dt class="col-5">Request by</dt><dd class="col-7">{{ record.request_by or '—' }}</dd>
          <dt class="col-5">Date Requested</dt><dd class="col-7">{{ record.date_requested or '—' }}</dd>
        </dl>
        {% if record.notes %}
        <hr>
        <div class="fw-semibold small text-muted mb-1">Customer notes</div>
        <div style="white-space:pre-wrap;">{{ record.notes }}</div>
        {% endif %}
      </div>
    </div>
  </div>

  {# ── Office use — the only editable part ─────────────────────────── #}
  <div class="col-12 col-lg-6">
    <div class="card shadow-sm h-100">
      <div class="card-header fw-semibold">For Office Use</div>
      <div class="card-body">
        <form method="POST">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          {% for key, label in schema.OFFICE_FIELDS %}
          <div class="mb-2">
            <label class="form-label small mb-1">{{ label }}</label>
            <input type="text" name="{{ key }}" class="form-control form-control-sm"
                   value="{{ record.office.get(key, '') }}">
          </div>
          {% endfor %}
          <div class="mb-3">
            <label class="form-label small mb-1">Status</label>
            <select name="status" class="form-select form-select-sm">
              {% for s in schema.STATUSES %}
              <option value="{{ s }}" {{ 'selected' if record.status == s }}>
                {{ schema.STATUS_LABELS[s] }}
              </option>
              {% endfor %}
            </select>
          </div>
          <button type="submit" class="btn btn-sm btn-primary">
            <i class="bi bi-save"></i> Save
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

{# ── Step 2: who to set up ──────────────────────────────────────────── #}
<div class="card shadow-sm mt-3">
  <div class="card-header fw-semibold">Users to Register</div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table mb-0">
        <thead class="table-light">
          <tr>
            <th>Seat</th><th>Name</th><th>Job Title</th><th>Email</th>
            <th class="text-center">Mobile App</th>
          </tr>
        </thead>
        <tbody>
          {% for reg in record.registrants %}
          {% if reg.name or reg.email %}
          <tr>
            <td>
              {{ reg.label }}
              {% if reg.include %}
              <i class="bi bi-check-circle-fill text-success ms-1"
                 title="Ticked on the form"></i>
              {% endif %}
            </td>
            <td class="fw-semibold">{{ reg.name or '—' }}</td>
            <td>{{ reg.job_title or '—' }}</td>
            <td>
              {% if reg.email %}
              <a href="mailto:{{ reg.email }}">{{ reg.email }}</a>
              {% else %}—{% endif %}
            </td>
            <td class="text-center">
              {% if record.mobile_app.get(reg.key) %}
              <i class="bi bi-phone-fill text-primary" title="Wants the mobile app"></i>
              {% else %}<span class="text-muted">—</span>{% endif %}
            </td>
          </tr>
          {% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{# ── Step 1: the requested matrix ───────────────────────────────────── #}
<div class="card shadow-sm mt-3">
  <div class="card-header fw-semibold">Requested Tasks &amp; Functions</div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table table-sm mb-0">
        <thead class="table-light">
          <tr>
            <th style="width:50px;">Ref</th>
            <th>Task / Function</th>
            {% for col_key, col_label in schema.COLUMNS %}
            <th class="text-center" style="width:110px;">
              {{ col_label.replace('\n', ' ') }}
            </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for ref, label, scope in schema.TASKS %}
          {% set row = record.matrix.get(ref|string, {}) %}
          <tr>
            <td class="text-center">{{ ref }}</td>
            <td>{{ label }}</td>
            {% for col_key, _col_label in schema.COLUMNS %}
            <td class="text-center">
              {% if scope != 'all' and col_key != 'admin' %}
              <span class="text-muted">·</span>
              {% elif row.get(col_key) %}
              <i class="bi bi-check-square-fill text-success"></i>
              {% else %}
              <span class="text-muted">—</span>
              {% endif %}
            </td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{% if record.meta %}
<div class="text-muted small mt-3">
  Submitted from {{ record.meta.ip or 'unknown address' }}
</div>
{% endif %}
{% endblock %}