{% 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 }}/vouchers" aria-label="Back to vouchers">←</a>
      <h1>{{ voucher.document_number }}</h1>
    </div>
    <div class="page-actions">
      {% if can['documents.export_pdf'] %}
        <a class="btn btn-outline" href="{{ base_url }}/vouchers/{{ voucher.id }}/print">Preview / Download</a>
      {% endif %}
    </div>
  </div>

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

  <article class="quotation-card preview-card">
    <div class="form-top">
      <section>
        <h2 class="section-title">Paid To</h2>
        <div class="detail-list">
          <div><span>Name</span><strong>{{ voucher.customer_name }}</strong></div>
          <div><span>Company</span><strong>{{ voucher.company_name ?: '-' }}</strong></div>
          <div><span>Email</span><strong>{{ voucher.email ?: '-' }}</strong></div>
          <div><span>Phone</span><strong>{{ voucher.phone ?: '-' }}</strong></div>
        </div>
      </section>
      <section>
        <h2 class="section-title">Voucher Details</h2>
        <div class="detail-list">
          <div><span>Payment Date</span><strong>{{ voucher.issue_date }}</strong></div>
          <div><span>Status</span><strong>{{ voucher.status|title }}</strong></div>
          <div><span>Currency</span><strong>{{ voucher.currency }}</strong></div>
          <div><span>Total</span><strong>{{ voucher.currency }} {{ voucher.grand_total|number_format(2) }}</strong></div>
        </div>
      </section>
    </div>

    <section class="items-section">
      <div class="section-header-row"><h2 class="section-title">Expense Items</h2></div>
      <div class="table-wrap">
        <table>
          <thead><tr><th>#</th><th>Description</th><th>Quantity</th><th>Unit Amount</th><th>Tax</th><th>Total</th></tr></thead>
          <tbody>
            {% for item in voucher.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>
                <td>{{ voucher.currency }} {{ item.unit_price|number_format(2) }}</td>
                <td>{{ item.tax_rate|number_format(2) }}%</td>
                <td class="line-total">{{ voucher.currency }} {{ item.line_total|number_format(2) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    <section class="bottom-section">
      <div><h2 class="section-title">Payment Details</h2><p class="notes-preview">{{ voucher.notes ? voucher.notes|nl2br : '-' }}</p></div>
      <aside class="summary-card">
        <div class="summary-row"><span>Subtotal</span><strong>{{ voucher.currency }} {{ voucher.subtotal|number_format(2) }}</strong></div>
        <div class="summary-row discount"><span>Discount</span><strong>- {{ voucher.currency }} {{ voucher.discount_total|number_format(2) }}</strong></div>
        <div class="summary-row"><span>Tax</span><strong>{{ voucher.currency }} {{ voucher.tax_total|number_format(2) }}</strong></div>
        <div class="summary-divider"></div>
        <div class="grand-total"><span>Total</span><strong>{{ voucher.currency }} {{ voucher.grand_total|number_format(2) }}</strong></div>
      </aside>
    </section>
  </article>
{% endblock %}