{% extends 'base.html' %}
{% block content %}
  <h2>Record Payment - {{ customer.name }}</h2>
  
  <!-- Current Balance Display -->
  <div class="card" style="margin-bottom: 16px;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <h3 style="margin: 0;">Current Balance</h3>
      <div id="current-balance" data-balance="{{ balance }}" style="font-size: 1.5em; font-weight: bold; color: {% if balance > 0 %}red{% else %}green{% endif %};">
        {{ balance|currency }}
      </div>
    </div>
    <p style="margin: 8px 0 0 0; color: #666;">
      {% if balance > 0 %}
        Customer owes you {{ balance|currency }}
      {% else %}
        Customer has credit of {{ (balance * -1)|currency }}
      {% endif %}
    </p>
  </div>

  <div class="card">
    <form method="post" class="form">
      {{ form.hidden_tag() }}
      <div class="grid cols-2">
        <div class="field">
          <label class="label">Date</label>
          {{ form.date(type='date') }}
        </div>
        <div class="field">
          <label class="label">Amount</label>
          {{ form.amount(step='0.01') }}
        </div>
      </div>
      <div class="grid cols-2">
        <div class="field">
          <label class="label">Payment Method</label>
          {{ form.account_id() }}
        </div>
        <div class="field">
          <label class="label">Payment Type</label>
          <div class="payment-type-options">
            {% for subfield in form.payment_type %}
              <div class="payment-type-option">
                {{ subfield() }}
                {{ subfield.label }}
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="field">
        <label class="label">Note</label>
        {{ form.note() }}
      </div>
      <div>
        {{ form.submit(class_='btn-primary') }}
      </div>
    </form>
  </div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/payments.js') }}"></script>
{% endblock %}