{% 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 }}/receipts" aria-label="Back to receipts">←</a>
      <h1>{{ receipt.document_number }}</h1>
    </div>
    <div class="page-actions">
      {% if can['documents.export_pdf'] %}
        <a class="btn btn-outline" href="{{ base_url }}/receipts/{{ receipt.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">Payment recorded and receipt created.</div>
  {% endif %}

  <article class="quotation-card preview-card">
    <div class="form-top">
      <section>
        <h2 class="section-title">Received From</h2>
        <div class="detail-list">
          <div><span>Name</span><strong>{{ receipt.customer_name }}</strong></div>
          <div><span>Company</span><strong>{{ receipt.company_name ?: '-' }}</strong></div>
          <div><span>Email</span><strong>{{ receipt.email ?: '-' }}</strong></div>
          <div><span>Phone</span><strong>{{ receipt.phone ?: '-' }}</strong></div>
        </div>
      </section>
      <section>
        <h2 class="section-title">Receipt Details</h2>
        <div class="detail-list">
          <div><span>Payment Date</span><strong>{{ receipt.issue_date }}</strong></div>
          <div><span>Invoice</span><strong>{{ invoice.document_number ?: '-' }}</strong></div>
          <div><span>Status</span><strong>{{ receipt.status|title }}</strong></div>
          <div><span>Currency</span><strong>{{ receipt.currency }}</strong></div>
        </div>
      </section>
    </div>

    <section class="bottom-section">
      <div>
        <h2 class="section-title">Payment Notes</h2>
        <p class="notes-preview">{{ receipt.notes ? receipt.notes|nl2br : '-' }}</p>
      </div>
      <aside class="summary-card">
        <h2 class="section-title">Amount Received</h2>
        <div class="grand-total">
          <span>Total</span>
          <strong>{{ receipt.currency }} {{ receipt.grand_total|number_format(2) }}</strong>
        </div>
      </aside>
    </section>
  </article>
{% endblock %}