{% extends "base.html" %}
{% block title %}Session {{ session.id }} — deliveryday-companion{% endblock %}
{% block nav_extra %}
  <a href="/session/{{ session.id }}/report.html">Preview</a>
  <a href="/session/{{ session.id }}/report.pdf">PDF</a>
{% endblock %}

{% block content %}
<section class="panel">
  <h2>Session</h2>
  <div style="display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 14px;">
    <div><span class="muted">VIN</span> &nbsp; <code>{{ session.vin or "—" }}</code></div>
    <div><span class="muted">Location</span> &nbsp; {{ session.location or "—" }}</div>
    <div><span class="muted">Started</span> &nbsp; {{ session.created_at.strftime("%Y-%m-%d %H:%M") }} UTC</div>
    <div><span class="muted">Status</span> &nbsp;
      {% if session.signed_at %}
        <span class="pill pass">signed at {{ session.signed_at.strftime("%H:%M") }} UTC</span>
      {% else %}
        <span class="pill pending">in progress</span>
      {% endif %}
    </div>
  </div>
  <div style="margin-top: 0.75rem;">
    <div class="progress"><div style="width: {{ (100 * completed / total) | round(0, 'floor') }}%"></div></div>
    <div class="muted" style="font-size: 12px; margin-top: 4px;">
      {{ completed }} / {{ total }} steps recorded
    </div>
  </div>
</section>

{% for cat in categories %}
  {% set rows = by_category[cat] %}
  {% if rows %}
    <section class="panel">
      <h2>{{ cat }} <span class="muted" style="text-transform: none; letter-spacing: 0; font-size: 11px;">({{ rows | length }} steps)</span></h2>
      {% for step, result in rows %}
        <div class="step" id="step-{{ step.id }}">
          <div>
            {% if result %}
              <span class="pill {{ result.status | lower }}">{{ result.status }}</span>
            {% else %}
              <span class="pill pending">pending</span>
            {% endif %}
            <span class="title">{{ step.title }}</span>
            {% if step.photo_required %}
              <span class="pill cat">photo</span>
            {% endif %}
          </div>
          <div class="desc">{{ step.description }}</div>
          {% if result and result.note %}
            <div class="meta">Note: {{ result.note }}</div>
          {% endif %}
          {% if result and result.photo_path %}
            <div class="meta">Photo on file (embedded in PDF report).</div>
          {% endif %}
          <form method="post" action="/session/{{ session.id }}/check/{{ step.id }}" enctype="multipart/form-data">
            <div>
              <label>Status</label>
              <select name="status">
                <option value="PASS"   {% if result and result.status == "PASS" %}selected{% endif %}>PASS</option>
                <option value="NOTE"   {% if result and result.status == "NOTE" %}selected{% endif %}>NOTE</option>
                <option value="FAIL"   {% if result and result.status == "FAIL" %}selected{% endif %}>FAIL</option>
                <option value="PENDING" {% if not result or result.status == "PENDING" %}selected{% endif %}>PENDING</option>
              </select>
            </div>
            <div>
              <label>Note (optional)</label>
              <input name="note" type="text" value="{{ result.note if result and result.note else '' }}" placeholder="e.g. small chip on lower fascia">
            </div>
            <div>
              <label>Photo</label>
              <input name="photo" type="file" accept="image/*" capture="environment">
            </div>
            <div>
              <input type="submit" value="Save">
            </div>
          </form>
        </div>
      {% endfor %}
    </section>
  {% endif %}
{% endfor %}

<section class="panel">
  <h2>Finalize</h2>
  <p class="muted" style="font-size: 13px;">
    Once every FAIL item has been captured on a Due Bill and you're ready to accept delivery, sign the session below.
    The signed PDF report is your record — you can email it to yourself and to your Tesla delivery specialist.
  </p>
  <div style="display: flex; gap: 0.5rem;">
    <form method="post" action="/session/{{ session.id }}/sign">
      <button type="submit" class="ok">Sign &amp; finalize</button>
    </form>
    <a href="/session/{{ session.id }}/report.pdf"><button class="secondary" type="button">Download PDF</button></a>
    <a href="/session/{{ session.id }}/report.html"><button class="secondary" type="button">Preview HTML</button></a>
  </div>
</section>
{% endblock %}