{% extends 'layouts/app.twig' %}

{% block content %}
  <div class="page-header page-header-split">
    <div class="page-heading-inline">
      <a class="back-btn" href="{{ base_url }}/delivery-notes" aria-label="Back to delivery notes">←</a>
      <h1>{{ document.document_number }}</h1>
    </div>
    <div class="page-actions">
      {% if can['documents.export_pdf'] %}
        <a class="btn btn-outline" href="{{ base_url }}/delivery-notes/{{ document.id }}/print">Preview / Download</a>
      {% endif %}
      {% if invoice %}<a class="btn btn-primary" href="{{ base_url }}/invoices/{{ invoice.id }}">View Invoice</a>{% endif %}
    </div>
  </div>

  {% if saved %}
    <div class="alert alert-success">Delivery note created.</div>
  {% endif %}

  <article class="quotation-card preview-card">
    <div class="form-top">
      <section>
        <h2 class="section-title">Deliver To</h2>
        <div class="detail-list">
          <div><span>Name</span><strong>{{ document.customer_name }}</strong></div>
          <div><span>Company</span><strong>{{ document.company_name ?: '-' }}</strong></div>
          <div><span>Phone</span><strong>{{ document.phone ?: '-' }}</strong></div>
          <div><span>Address</span><strong class="address-value">{{ document.billing_address ? document.billing_address|nl2br : '-' }}</strong></div>
        </div>
      </section>
      <section>
        <h2 class="section-title">Delivery Details</h2>
        <div class="detail-list">
          <div><span>Issue Date</span><strong>{{ document.issue_date }}</strong></div>
          <div><span>Invoice</span><strong>{{ invoice.document_number ?: '-' }}</strong></div>
          <div><span>Status</span><strong>{{ document.status|title }}</strong></div>
          <div><span>Items</span><strong>{{ document.items|length }}</strong></div>
        </div>
      </section>
    </div>

    <section class="items-section">
      <div class="section-header-row"><h2 class="section-title">Delivered Items</h2></div>
      <div class="table-wrap">
        <table>
          <thead>
            <tr><th>#</th><th>Item Description</th><th>Quantity</th></tr>
          </thead>
          <tbody>
            {% for item in document.items %}
              <tr>
                <td>{{ loop.index }}</td>
                <td><div class="item-name">{{ item.name }}</div><div class="item-desc">{{ item.description }}</div></td>
                <td>{{ item.quantity|number_format(2) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    <section class="bottom-section">
      <div>
        <h2 class="section-title">Delivery Notes</h2>
        <p class="notes-preview">{{ document.notes ?: '-' }}</p>
      </div>
    </section>
  </article>
{% endblock %}