{% extends "admin_base.html" %}
{% block title %}Job {{ job.job_number }} - {{ company.name }}{% endblock %}
{% block content %}
<div class="container wide">

  <div class="toolbar">
    <div class="stack-sm">
      <a href="{{ url_for('admin_home') }}">&larr; All jobs</a>
      <h1 class="job-title">Job {{ job.job_number }}</h1>
      <span class="muted">{{ job.customer_name }}{% if job.unit %} &middot; {{ job.unit }}{% endif %}{% if job.make_model %} &middot; {{ job.make_model }}{% endif %}</span>
    </div>
    <div class="btn-row">
      <a class="btn btn-outline" href="{{ url_for('admin_label', job_id=job.id) }}">Print barcode label</a>
      <span class="status-pill pill s{{ job.stage }}"><span class="dot"></span>{{ stages[job.stage] }}</span>
    </div>
  </div>

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

      <form class="card" method="post" action="{{ url_for('admin_progress', job_id=job.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <h2>Progress and update</h2>
        <div class="form-grid">
          <div class="field">
            <label for="stage">Stage</label>
            <select id="stage" name="stage">
              {% for name in stages %}<option value="{{ loop.index0 }}" {% if loop.index0 == job.stage %}selected{% endif %}>{{ name }}</option>{% endfor %}
            </select>
          </div>
          <div class="field">
            <label for="eta">Estimated completion</label>
            <input id="eta" name="eta" type="date" value="{{ job.eta }}">
          </div>
        </div>
        <div class="field">
          <label for="title">Update heading (optional)</label>
          <input id="title" name="title" type="text" maxlength="120" placeholder="For example: Bench testing started">
        </div>
        <div class="field">
          <label for="body">Note for the customer (optional)</label>
          <textarea id="body" name="body" rows="4" maxlength="2000" placeholder="Write a short note. The customer sees it on their job page."></textarea>
        </div>
        <div class="check">
          <input id="notify" name="notify" type="checkbox" value="1" {% if job.email %}checked{% else %}disabled{% endif %}>
          <label for="notify">Email the customer about this update{% if not job.email %} (no email address on this job){% endif %}</label>
        </div>
        <div class="btn-row"><button class="btn btn-primary" type="submit">Save and post update</button></div>
      </form>

      <section class="card">
        <h2>Check-in photos</h2>
        <form class="stack" method="post" enctype="multipart/form-data" action="{{ url_for('admin_photos', job_id=job.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <div class="field">
            <label for="photos">Add photos</label>
            <input id="photos" name="photos" type="file" accept="image/jpeg,image/png,image/webp" multiple>
            <span class="small">JPG, PNG or WebP. Tip: photograph the front, the connector side and the serial number label before work starts.</span>
          </div>
          <div class="field">
            <label for="caption">Caption for these photos (optional)</label>
            <input id="caption" name="caption" type="text" maxlength="120" placeholder="For example: Connector side">
          </div>
          <div class="btn-row"><button class="btn btn-dark" type="submit">Upload photos</button></div>
        </form>
        {% if photos %}
        <div class="photos">
          {% for photo in photos %}
          <figure>
            <img src="{{ url_for('admin_photo', job_id=job.id, photo_id=photo.id) }}" alt="{{ photo.caption or 'Photo of the unit' }}" loading="lazy">
            {% if photo.caption %}<figcaption>{{ photo.caption }}</figcaption>{% endif %}
            <form method="post" action="{{ url_for('admin_photo_delete', job_id=job.id, photo_id=photo.id) }}" data-confirm="Remove this photo?">
              <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
              <button class="link-button" type="submit">Remove</button>
            </form>
          </figure>
          {% endfor %}
        </div>
        {% else %}
        <p class="muted">No photos yet.</p>
        {% endif %}
      </section>

      <section class="card">
        <h2>Test report</h2>
        <form class="stack" method="post" enctype="multipart/form-data" action="{{ url_for('admin_report', job_id=job.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <div class="field">
            <label for="report">{% if job.report_file %}Replace the report (PDF){% else %}Upload the report (PDF){% endif %}</label>
            <input id="report" name="report" type="file" accept="application/pdf,.pdf">
          </div>
          <div class="btn-row"><button class="btn btn-dark" type="submit">Upload report</button></div>
        </form>
        {% if job.report_file %}
        <div class="filebox">
          <div class="grow">
            <strong>{{ job.report_name or "Test report.pdf" }}</strong>
            <span class="small">{% if job.report_visible %}The customer can download this.{% else %}Hidden from the customer.{% endif %}</span>
          </div>
          <a class="btn btn-outline" href="{{ url_for('admin_report_download', job_id=job.id) }}">Download</a>
        </div>
        <form class="stack" method="post" action="{{ url_for('admin_report_visibility', job_id=job.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <div class="check">
            <input id="visible" name="visible" type="checkbox" value="1" {% if job.report_visible %}checked{% endif %}>
            <label for="visible">Show this report to the customer</label>
          </div>
          <span class="small">Tick this once the unit has passed its quality check. Until then the customer sees "Available after the quality check".</span>
          <div class="btn-row">
            <button class="btn btn-outline" type="submit">Save</button>
          </div>
        </form>
        <form method="post" action="{{ url_for('admin_report_delete', job_id=job.id) }}" data-confirm="Remove this test report?">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <button class="link-button" type="submit">Remove report</button>
        </form>
        {% endif %}
      </section>

      <section class="card updates">
        <h2>Updates the customer can see</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 col-edit">

      <section class="card compact">
        <h2>Customer conditions</h2>
        {% if job.conditions_at %}
        <span class="pill good">Confirmed</span>
        <dl class="facts">
          <div><dt>Name typed</dt><dd>{{ job.conditions_name }}</dd></div>
          <div><dt>When</dt><dd>{{ job.conditions_at|dt }}</dd></div>
        </dl>
        <details>
          <summary>Wording they accepted</summary>
          <div class="scrollbox">{{ job.conditions_text }}</div>
        </details>
        {% else %}
        <span class="pill warn">Not confirmed yet</span>
        <p class="small">When the customer confirms, their name, the date and the time are saved here.</p>
        <form method="post" action="{{ url_for('admin_remind', job_id=job.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <button class="btn btn-outline" type="submit" {% if not job.email %}disabled{% endif %}>Email a reminder</button>
        </form>
        {% endif %}
      </section>

      <form class="card compact" method="post" action="{{ url_for('admin_payment', job_id=job.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <h2>Payment link</h2>
        <p class="small">Create a payment link in your payment provider's dashboard (Yoco, PayFast, Paystack or similar), then paste it here. The customer pays on the provider's secure page, so card details never touch this site.</p>
        <div class="field">
          <label for="pay_amount">Amount due (Rand)</label>
          <div class="money"><span>R</span><input id="pay_amount" name="pay_amount" type="text" inputmode="decimal" maxlength="20" value="{{ job.pay_amount }}" placeholder="0.00"></div>
        </div>
        <div class="field">
          <label for="pay_ref">Reference shown to the customer</label>
          <input id="pay_ref" name="pay_ref" type="text" maxlength="80" value="{{ job.pay_ref or ('Job ' ~ job.job_number) }}">
        </div>
        <div class="field">
          <label for="pay_link">Payment link</label>
          <input id="pay_link" name="pay_link" type="text" maxlength="500" value="{{ job.pay_link }}" placeholder="https://" class="mono">
        </div>
        <div class="field">
          <label for="pay_status">Payment status</label>
          <select id="pay_status" name="pay_status">
            <option value="none" {% if job.pay_status == "none" %}selected{% endif %}>Not sent</option>
            <option value="sent" {% if job.pay_status == "sent" %}selected{% endif %}>Link sent, waiting for payment</option>
            <option value="paid" {% if job.pay_status == "paid" %}selected{% endif %}>Paid</option>
          </select>
          <span class="small">Mark it Paid yourself once the money shows in your payment provider.</span>
        </div>
        <div class="check">
          <input id="show_pay" name="show_pay" type="checkbox" value="1" {% if job.show_pay %}checked{% endif %}>
          <label for="show_pay">Show a Pay button on the customer's job page</label>
        </div>
        <div class="check">
          <input id="send_email" name="send_email" type="checkbox" value="1" {% if not job.email %}disabled{% endif %}>
          <label for="send_email">Email the link to the customer when I save</label>
        </div>
        <div class="btn-row"><button class="btn btn-dark" type="submit">Save payment details</button></div>

        {% if job.pay_link %}
        {% set share = "Hello " ~ job.customer_name ~ ", your job " ~ job.job_number ~ " is complete." ~ ((" The amount due is R " ~ job.pay_amount ~ ".") if job.pay_amount else "") ~ " You can pay securely here: " ~ job.pay_link %}
        <div class="section-break stack-sm">
          <span class="label">Send the link yourself</span>
          <div class="btn-row">
            <button class="btn btn-outline" type="button" data-copy="pay_link">Copy link</button>
            {% if job.phone %}<a class="btn btn-outline" href="https://wa.me/{{ job.phone|wa_phone }}?text={{ share|urlencode }}" target="_blank" rel="noopener">WhatsApp</a>
            <a class="btn btn-outline" href="sms:{{ job.phone|replace(' ', '') }}?body={{ share|urlencode }}">SMS</a>{% endif %}
            {% if job.email %}<a class="btn btn-outline" href="mailto:{{ job.email }}?subject={{ ('Payment for job ' ~ job.job_number)|urlencode }}&amp;body={{ share|urlencode }}">Email app</a>{% endif %}
          </div>
        </div>
        {% endif %}
      </form>

      <form class="card compact" method="post" action="{{ url_for('admin_details', job_id=job.id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <h2>Customer and unit</h2>
        <div class="field"><label for="d_name">Customer name</label><input id="d_name" name="customer_name" type="text" required maxlength="120" value="{{ job.customer_name }}"></div>
        <div class="field"><label for="d_email">Email</label><input id="d_email" name="email" type="email" maxlength="160" value="{{ job.email }}"></div>
        <div class="field"><label for="d_phone">Phone</label><input id="d_phone" name="phone" type="text" inputmode="tel" maxlength="40" value="{{ job.phone }}"></div>
        <div class="field"><label for="d_unit">Unit</label><input id="d_unit" name="unit" type="text" maxlength="120" value="{{ job.unit }}"></div>
        <div class="field"><label for="d_model">Make and model</label><input id="d_model" name="make_model" type="text" maxlength="120" value="{{ job.make_model }}"></div>
        <span class="small">The customer signs in with job number {{ job.job_number }} plus this email address or phone number. Changing them changes what the customer must type.</span>
        <div class="btn-row"><button class="btn btn-dark" type="submit">Save details</button></div>
      </form>
    </aside>
  </div>
</div>
{% endblock %}