{% extends "layout.njk" %}
{% block title %}Order #{{ order.order_number }} — Harding's Clocks{% endblock %}
{% block content %}
  <div class="page-header">
    <h1>Order #{{ order.order_number }}</h1>
    <div class="header-actions">
      <a class="button-link" href="/orders/{{ order.id }}/invoice" target="_blank">Print Invoice</a>
      <button type="button" class="danger"
              hx-delete="/orders/{{ order.id }}"
              hx-confirm="Delete this order? It can be recovered later if needed.">
        Delete Order
      </button>
    </div>
  </div>

  <section class="card two-col">
    <div>
      <h2>Customer</h2>
      <p>{{ order.customer_name }}</p>
      {% if order.address_line1 %}<p>{{ order.address_line1 }}{% if order.address_line2 %}, {{ order.address_line2 }}{% endif %}</p>{% endif %}
      {% if order.city or order.state or order.zip %}<p>{{ order.city or '' }}{% if order.state %}, {{ order.state }}{% endif %} {{ order.zip or '' }}</p>{% endif %}
      {% if order.phone %}<p>{{ order.phone }}{% if order.alt_phone %} / {{ order.alt_phone }}{% endif %}</p>{% endif %}
      {% if order.email %}<p>{{ order.email }}</p>{% endif %}
    </div>
    <div>
      <h2>Clock</h2>
      {% if order.clock_description %}<p>{{ order.clock_description }}</p>{% endif %}
      {% if order.clock_note %}<p>{{ order.clock_note }}</p>{% endif %}
      {% if not order.clock_description and not order.clock_note %}
        <p class="empty">No clock on file.</p>
      {% endif %}
    </div>
  </section>

  {% include "orders/_order_summary.njk" %}

  <section class="card">
    <h2>Line Items</h2>
    <table class="data-table">
      <thead>
        <tr><th>Type</th><th>Stock #</th><th>Description</th><th>Qty</th><th>Unit Price</th><th>Total</th><th></th></tr>
      </thead>
      <tbody id="lines-body">
        {% for line in order.lineItems %}
          {% include "orders/_line_item_row.njk" %}
        {% endfor %}
      </tbody>
    </table>

    <form class="inline-form"
          hx-post="/orders/{{ order.id }}/line-items"
          hx-target="#lines-body"
          hx-swap="beforeend"
          hx-on::after-request="this.reset()">
      <select name="kind">
        <option value="labor">Labor</option>
        <option value="part">Part</option>
        <option value="sublet">Sublet</option>
      </select>
      <input type="text" name="stock_code" placeholder="Stock #">
      <input type="text" name="description" placeholder="Description" required>
      <input type="number" name="quantity" placeholder="Qty" value="1" step="0.25" min="0">
      <input type="text" name="unit_price" placeholder="Unit price">
      <button type="submit">Add Line</button>
    </form>
  </section>

  <section class="card">
    <h2>Internal Work Log</h2>
    <ul id="work-log-list" class="work-log-list">
      {% for entry in order.workLog %}
        {% include "orders/_work_log_item.njk" %}
      {% endfor %}
    </ul>

    <form class="inline-form work-log-form"
          hx-post="/orders/{{ order.id }}/work-log"
          hx-target="#work-log-list"
          hx-swap="afterbegin"
          hx-on::after-request="this.reset()">
      <textarea name="note" placeholder="Add a note…" rows="4" required></textarea>
      <button type="submit">Add Note</button>
    </form>
  </section>
{% endblock %}