{% extends "base.html" %}
{% block title %}Job {{ job.job_number }} - {{ company.name }}{% endblock %}
{% block header_right %}
<span class="muted">Viewing job {{ job.job_number }}</span>
<form class="inline-form" method="post" action="{{ url_for('logout') }}">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
  <button class="link-button" type="submit">Sign out</button>
</form>
{% endblock %}
{% block content %}
<div class="container">

  <div class="toolbar">
    <div class="stack-sm">
      <span class="eyebrow">Job {{ job.job_number }}</span>
      <h1 class="job-title">{{ job.unit or "Your repair" }}</h1>
      <span class="muted">{% if job.make_model %}{{ job.make_model }} &middot; {% endif %}Received {{ job.created_at|dt }}</span>
    </div>
    <div class="status-pill pill s{{ job.stage }}"><span class="dot"></span>{{ stages[job.stage] }}</div>
  </div>

  <div class="row">
    <div class="col-main">

      {% if not confirmed %}
      <section class="card attention">
        <div class="stack-sm">
          <h2>Please confirm our conditions</h2>
          <p class="soft">We need you to read and accept our repair conditions for job {{ job.job_number }}. It only takes a minute.</p>
        </div>
        <div class="scrollbox" tabindex="0" role="region" aria-label="Repair conditions">{{ conditions_text }}</div>
        <form class="stack" method="post" action="{{ url_for('customer_conditions') }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <div class="check">
            <input id="agree" name="agree" type="checkbox" value="1" required>
            <label for="agree">I have read and accept the conditions for job {{ job.job_number }}.</label>
          </div>
          <div class="field narrow-field">
            <label for="signed_name">Your full name</label>
            <input id="signed_name" name="signed_name" type="text" autocomplete="name" placeholder="Type your name to confirm" required minlength="2" maxlength="120">
          </div>
          <div class="btn-row">
            <button class="btn btn-primary" type="submit">Confirm conditions</button>
            <span class="small grow-note">We save your name, the date and the time against job {{ job.job_number }}{% if job.email %} and email you a copy{% endif %}.</span>
          </div>
        </form>
      </section>
      {% else %}
      <section class="card ok" role="status">
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="#14532D" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="14" cy="14" r="11"/><path d="M8.5 14.5L12.5 18.5L19.5 10"/></svg>
        <div class="stack-sm">
          <strong>Conditions confirmed</strong>
          <span class="small ok-text">Accepted by {{ job.conditions_name }} on {{ job.conditions_at|dt }}.</span>
        </div>
      </section>
      {% endif %}

      <section class="card">
        <h2>Progress</h2>
        <ol class="tracker">
          {% for step in tracker %}
          <li class="{{ step.state }}">
            <span class="bar"></span>
            <span class="stage-name">
              {% if step.state == "done" %}<svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="#14181C" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 9.5L7 13.5L15 4.5"/></svg>{% endif %}
              {{ step.name }}
            </span>
            <span class="stage-note">
              {% if step.state == "done" %}Done{% if step.date %} &middot; {{ step.date|day }}{% endif %}
              {% elif step.state == "current" %}In progress now
              {% else %}Up next{% endif %}
            </span>
          </li>
          {% endfor %}
        </ol>
      </section>

      {% if photos %}
      <section class="card">
        <div class="stack-sm">
          <h2>Photos from check-in</h2>
          <p class="soft">Taken when your unit was booked in, so we both have a record of its condition on arrival. Only you can see these after signing in with your job number.</p>
        </div>
        <div class="photos">
          {% for photo in photos %}
          <figure>
            <a href="{{ url_for('customer_photo', photo_id=photo.id) }}" target="_blank" rel="noopener"><img src="{{ url_for('customer_photo', photo_id=photo.id) }}" alt="{{ photo.caption or 'Photo of your unit' }}" loading="lazy"></a>
            {% if photo.caption %}<figcaption>{{ photo.caption }}</figcaption>{% endif %}
          </figure>
          {% endfor %}
        </div>
      </section>
      {% endif %}

      <section class="card">
        <div class="stack-sm">
          <h2>Test report</h2>
          <p class="soft">When your unit passes the quality check, its bench test report is saved here as a PDF you can download and keep.</p>
        </div>
        <div class="filebox">
          <svg width="40" height="48" viewBox="0 0 40 48" fill="none" stroke="#5B636B" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><path d="M6 3h20l9 9v33H6z"/><path d="M26 3v9h9"/><path d="M12 28h16M12 34h16M12 22h8"/></svg>
          <div class="grow">
            <strong>Bench test report, job {{ job.job_number }} (PDF)</strong>
            {% if job.report_file and job.report_visible %}<span class="small">Ready to download</span>
            {% else %}<span class="small">Available after the quality check</span>{% endif %}
          </div>
          {% if job.report_file and job.report_visible %}
          <a class="btn btn-dark" href="{{ url_for('customer_report') }}">Download PDF</a>
          {% else %}
          <span class="btn btn-disabled" aria-disabled="true">Download PDF</span>
          {% endif %}
        </div>
      </section>

      <section class="card updates">
        <h2>Latest updates</h2>
        {% for update in updates %}
        <article>
          <time datetime="{{ update.created_at }}">{{ update.created_at|dt }}</time>
          <div class="body">
            <h3>{{ update.title }}</h3>
            {% if update.body %}<p>{{ update.body }}</p>{% endif %}
          </div>
        </article>
        {% else %}
        <p class="muted">No updates yet.</p>
        {% endfor %}
      </section>
    </div>

    <aside class="col-side">
      {% if job.eta %}
      <section class="card dark compact">
        <span class="small">Estimated ready by</span>
        <span class="big-date">{{ job.eta|longday }}</span>
        <span class="small">We will update this date if anything changes.</span>
      </section>
      {% endif %}

      <section class="card compact">
        <h2>Job details</h2>
        <dl class="facts">
          <div><dt>Job number</dt><dd class="mono">{{ job.job_number }}</dd></div>
          <div><dt>Received</dt><dd>{{ job.created_at|dt }}</dd></div>
          <div><dt>Last updated</dt><dd>{{ job.updated_at|dt }}</dd></div>
          <div><dt>Test report</dt><dd>{% if job.report_file and job.report_visible %}Ready{% else %}After quality check{% endif %}</dd></div>
        </dl>
      </section>

      <section class="card compact">
        <h2>Payment</h2>
        {% if job.pay_status == "paid" %}
        <p class="paid-note">Paid. Thank you.</p>
        <dl class="facts">
          <div><dt>Reference</dt><dd class="mono">{{ job.pay_ref or ("Job " ~ job.job_number) }}</dd></div>
          {% if job.pay_amount %}<div><dt>Amount</dt><dd>R {{ job.pay_amount }}</dd></div>{% endif %}
        </dl>
        {% elif job.show_pay and job.pay_link %}
        <p class="soft">Your job is complete. You can pay securely online.</p>
        <dl class="facts">
          <div><dt>Reference</dt><dd class="mono">{{ job.pay_ref or ("Job " ~ job.job_number) }}</dd></div>
          <div><dt>Amount due</dt><dd>{% if job.pay_amount %}R {{ job.pay_amount }}{% else %}On the payment page{% endif %}</dd></div>
        </dl>
        <a class="btn btn-primary btn-block" href="{{ job.pay_link }}" rel="noopener noreferrer">Pay online</a>
        <span class="small">You pay on our payment provider's secure page. Your card details are never entered on this site.</span>
        {% else %}
        <p class="soft">When your job is complete we will send you a secure payment link. It will also appear here.</p>
        <dl class="facts">
          <div><dt>Reference</dt><dd class="mono">Job {{ job.job_number }}</dd></div>
          <div><dt>Amount due</dt><dd>Shown when ready</dd></div>
        </dl>
        <span class="btn btn-disabled btn-block" aria-disabled="true">Pay online</span>
        {% endif %}
      </section>

      <section class="card compact">
        <h2>Questions?</h2>
        <p class="soft">Contact us and quote job number {{ job.job_number }}.</p>
        <strong>{{ company.phone }}</strong>
        <strong class="wrap">{{ company.email }}</strong>
      </section>
    </aside>
  </div>
</div>
{% endblock %}