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

{% block content %}
  <div class="page-header page-header-split">
    <div>
      <h1>Receipts</h1>
      <p class="page-subtitle">Payments recorded against customer invoices.</p>
    </div>
  </div>

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

    {% if receipts is empty %}
      <div class="empty-state">
        <h2>No receipts found</h2>
        <p>Open an invoice and select Record Payment to create a receipt.</p>
        <a class="btn btn-primary" href="{{ base_url }}/invoices">View Invoices</a>
      </div>
    {% else %}
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>Receipt</th>
              <th>Customer</th>
              <th>Payment Date</th>
              <th>Status</th>
              <th>Amount</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for receipt in receipts %}
              <tr>
                <td><div class="item-name">{{ receipt.document_number }}</div></td>
                <td>{{ receipt.company_name ?: receipt.customer_name ?: '-' }}</td>
                <td>{{ receipt.issue_date }}</td>
                <td><span class="status-badge status-{{ receipt.status }}">{{ receipt.status|title }}</span></td>
                <td class="line-total">{{ receipt.currency }} {{ receipt.grand_total|number_format(2) }}</td>
                <td><a class="btn btn-outline btn-small" href="{{ base_url }}/receipts/{{ receipt.id }}">View</a></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="pagination-row">
        <span>Showing {{ receipts|length }} of {{ pagination.total }} receipts</span>
        <div class="pagination-actions">
          {% if pagination.page > 1 %}
            <a class="btn btn-outline btn-small" href="{{ base_url }}/receipts?page={{ pagination.page - 1 }}{% if search %}&search={{ search|url_encode }}{% endif %}">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 }}/receipts?page={{ pagination.page + 1 }}{% if search %}&search={{ search|url_encode }}{% endif %}">Next</a>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </section>
{% endblock %}