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

{% block content %}
  <div class="page-header page-header-split">
    <div>
      <h1>Vouchers</h1>
      <p class="page-subtitle">Outgoing payments and expense vouchers.</p>
    </div>
    {% if can['documents.create'] %}
      <a class="btn btn-primary" href="{{ base_url }}/vouchers/create">Create Voucher</a>
    {% endif %}
  </div>

  <section class="list-panel">
    <form class="list-toolbar" method="get" action="{{ base_url }}/vouchers">
      <div class="search-field"><input type="search" name="search" value="{{ search }}" placeholder="Search voucher number or payee..."></div>
      <button class="btn btn-outline" type="submit">Search</button>
    </form>

    {% if vouchers is empty %}
      <div class="empty-state">
        <h2>No vouchers found</h2>
        <p>Create a voucher to record an outgoing payment.</p>
        {% if can['documents.create'] %}
          <a class="btn btn-primary" href="{{ base_url }}/vouchers/create">Create Voucher</a>
        {% endif %}
      </div>
    {% else %}
      <div class="table-wrap">
        <table>
          <thead><tr><th>Voucher</th><th>Payee</th><th>Payment Date</th><th>Status</th><th>Total</th><th></th></tr></thead>
          <tbody>
            {% for voucher in vouchers %}
              <tr>
                <td><div class="item-name">{{ voucher.document_number }}</div></td>
                <td>{{ voucher.company_name ?: voucher.customer_name ?: '-' }}</td>
                <td>{{ voucher.issue_date }}</td>
                <td><span class="status-badge status-{{ voucher.status }}">{{ voucher.status|title }}</span></td>
                <td class="line-total">{{ voucher.currency }} {{ voucher.grand_total|number_format(2) }}</td>
                <td><a class="btn btn-outline btn-small" href="{{ base_url }}/vouchers/{{ voucher.id }}">View</a></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="pagination-row">
        <span>Showing {{ vouchers|length }} of {{ pagination.total }} vouchers</span>
        <div class="pagination-actions">
          {% if pagination.page > 1 %}<a class="btn btn-outline btn-small" href="{{ base_url }}/vouchers?page={{ pagination.page - 1 }}">Previous</a>{% endif %}
          <span class="page-indicator">Page {{ pagination.page }} of {{ pagination.last_page }}</span>
          {% if pagination.page < pagination.last_page %}<a class="btn btn-outline btn-small" href="{{ base_url }}/vouchers?page={{ pagination.page + 1 }}">Next</a>{% endif %}
        </div>
      </div>
    {% endif %}
  </section>
{% endblock %}