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

{% block content %}
  <div class="page-header">
    <a class="back-btn" href="{{ base_url }}/invoices/{{ invoice.id }}" aria-label="Back to invoice">←</a>
    <h1>Record Payment</h1>
  </div>

  {% if error %}
    <div class="alert alert-danger">{{ error }}</div>
  {% elseif errors is not empty %}
    <div class="alert alert-danger">Please correct the highlighted fields.</div>
  {% endif %}

  <div class="dashboard-grid">
    <section class="metric-card">
      <span>Invoice Total</span>
      <strong class="metric-money">{{ invoice.currency }} {{ invoice.grand_total|number_format(2) }}</strong>
    </section>
    <section class="metric-card">
      <span>Received</span>
      <strong class="metric-money">{{ invoice.currency }} {{ received_total|number_format(2) }}</strong>
    </section>
    <section class="metric-card">
      <span>Remaining Balance</span>
      <strong class="metric-money">{{ invoice.currency }} {{ balance|number_format(2) }}</strong>
    </section>
  </div>

  <form class="quotation-card product-form" method="post" action="{{ base_url }}/receipts">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="invoice_id" value="{{ invoice.id }}">

    {% if errors._csrf_token is defined %}<div class="form-error form-error-top">{{ errors._csrf_token }}</div>{% endif %}

    <div class="form-top product-form-grid">
      <section>
        <h2 class="section-title">Payment for {{ invoice.document_number }}</h2>
        <p class="page-subtitle receipt-customer">{{ invoice.company_name ?: invoice.customer_name }}</p>

        <div class="form-grid">
          <div class="field {{ errors.payment_date is defined ? 'has-error' : '' }}">
            <label>Payment Date <span class="required">*</span></label>
            <input type="date" name="payment_date" value="{{ form.payment_date }}">
            {% if errors.payment_date is defined %}<span class="form-error">{{ errors.payment_date }}</span>{% endif %}
          </div>

          <div class="field {{ errors.amount is defined ? 'has-error' : '' }}">
            <label>Amount ({{ invoice.currency }}) <span class="required">*</span></label>
            <input type="number" step="0.01" min="0.01" max="{{ balance }}" name="amount" value="{{ form.amount }}">
            {% if errors.amount is defined %}<span class="form-error">{{ errors.amount }}</span>{% endif %}
          </div>

          <div class="field">
            <label>Payment Method</label>
            <select name="payment_method">
              <option value="">Select method</option>
              {% for method in ['Cash', 'Bank Transfer', 'M-Pesa', 'Cheque', 'Card', 'Other'] %}
                <option value="{{ method }}" {{ form.payment_method == method ? 'selected' : '' }}>{{ method }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="field">
            <label>Reference</label>
            <input type="text" name="reference" value="{{ form.reference }}">
          </div>

          <div class="field full">
            <label>Notes</label>
            <textarea name="notes">{{ form.notes }}</textarea>
          </div>
        </div>
      </section>
    </div>

    <div class="action-bar">
      <a class="btn btn-outline" href="{{ base_url }}/invoices/{{ invoice.id }}">Cancel</a>
      <button class="btn btn-primary" type="submit">Save Receipt</button>
    </div>
  </form>
{% endblock %}