{% 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">Requester email</dt>
          <dd class="col-7">
            {% if record.requester_email %}
            <a href="mailto:{{ record.requester_email }}">{{ record.requester_email }}</a>
            {% else %}<span class="text-muted">—</span>{% endif %}
          </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>

{# ── The people to set up ───────────────────────────────────────────── #}
{% set people = schema.people_of(record) %}
<div class="card shadow-sm mt-3">
  <div class="card-header fw-semibold">
    Users to Register
    <span class="badge bg-secondary rounded-pill ms-1">{{ people | length }}</span>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table mb-0">
        <thead class="table-light">
          <tr>
            <th style="width:50px;">No.</th>
            <th>Role</th><th>Name</th><th>Job Title</th><th>Email</th>
            <th class="text-center">Mobile App</th>
          </tr>
        </thead>
        <tbody>
          {% for person in people %}
          <tr>
            <td>{{ loop.index }}</td>
            <td><span class="badge bg-light text-dark border">{{ person.role_label }}</span></td>
            <td class="fw-semibold">{{ person.name or '—' }}</td>
            <td>{{ person.job_title or '—' }}</td>
            <td>
              {% if person.email %}
              <a href="mailto:{{ person.email }}">{{ person.email }}</a>
              {% else %}—{% endif %}
            </td>
            <td class="text-center">
              {% if schema.wants_mobile(record, person.key) %}
              <i class="bi bi-phone-fill text-primary" title="Wants the mobile app"></i>
              {% else %}<span class="text-muted">—</span>{% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

{# ── The requested task matrix — one column per person ──────────────── #}
<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 style="min-width:280px;">Task / Function</th>
            {% for person in people %}
            <th class="text-center" style="min-width:120px;">
              {{ person.name or 'Person ' ~ loop.index }}
              <div class="fw-normal text-muted" style="font-size:.75rem;">
                {{ person.role_label }}
              </div>
            </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for ref, label, scope in schema.TASKS %}
          <tr>
            <td class="text-center">{{ ref }}</td>
            <td>{{ label }}</td>
            {% for person in people %}
            <td class="text-center">
              {% if not schema.task_applies(scope, person.role) %}
              <span class="text-muted" title="Not available for this role">·</span>
              {% elif schema.cell(record, ref, person.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 %}