{% extends 'base.html' %}
{% block content %}
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>Edit Transaction - {{ customer.name }}</h2>
    <a class="btn-outline" href="{{ url_for('account_ledger', customer_id=customer.id) }}">Back to Ledger</a>
  </div>
  
  <div class="card" style="margin-top:8px">
    <form method="POST">
      {{ form.hidden_tag() }}
      
      <div class="form-group">
        {{ form.date.label(class="form-label") }}
        {{ form.date(class="form-control") }}
        {% if form.date.errors %}
          <div class="error">{{ form.date.errors[0] }}</div>
        {% endif %}
      </div>
      
      <div class="form-group">
        {{ form.description.label(class="form-label") }}
        {{ form.description(class="form-control") }}
        {% if form.description.errors %}
          <div class="error">{{ form.description.errors[0] }}</div>
        {% endif %}
      </div>
      
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
        <div class="form-group">
          {{ form.debit.label(class="form-label") }}
          {{ form.debit(class="form-control", placeholder="0.00") }}
          {% if form.debit.errors %}
            <div class="error">{{ form.debit.errors[0] }}</div>
          {% endif %}
          <small class="form-text">Amount customer owes (sale/purchase)</small>
        </div>
        
        <div class="form-group">
          {{ form.credit.label(class="form-label") }}
          {{ form.credit(class="form-control", placeholder="0.00") }}
          {% if form.credit.errors %}
            <div class="error">{{ form.credit.errors[0] }}</div>
          {% endif %}
          <small class="form-text">Payment received from customer</small>
        </div>
      </div>
      
      <div class="form-actions">
        <button type="submit" class="btn-primary">Update Transaction</button>
        <a class="btn-outline" href="{{ url_for('account_ledger', customer_id=customer.id) }}">Cancel</a>
      </div>
    </form>
  </div>
  
  <!-- Current Balance Display -->
  <div class="card" style="margin-top: 16px;">
    <h3>Current Balance</h3>
    <div style="font-size: 1.2em; font-weight: bold; color: {% if current_balance > 0 %}red{% else %}green{% endif %};">
      {{ current_balance|currency }}
    </div>
    <p style="margin: 8px 0 0 0; color: #666;">
      {% if current_balance > 0 %}
        Customer owes {{ current_balance|currency }}
      {% else %}
        Customer has credit of {{ (current_balance * -1)|currency }}
      {% endif %}
    </p>
  </div>
{% endblock %}