{% extends 'base.html' %}
{% block content %}
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>Deposit - {{ account.name }}</h2>
    <a class="btn-outline" href="{{ url_for('account_view', account_id=account.id) }}">Back to Account</a>
  </div>
  
  <!-- Current Balance Display -->
  <div class="card" style="margin-top: 16px; margin-bottom: 16px; background-color: #f0f9ff;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <h3 style="margin: 0 0 4px 0; color: #1e40af;">Current Balance</h3>
        <div style="font-size: 1.5em; font-weight: bold; color: {% if balance > 0 %}green{% else %}red{% endif %};">
          {{ balance|currency }}
        </div>
      </div>
      <div style="text-align: right;">
        <div style="color: #666; font-size: 0.9em;">After Deposit</div>
        <div style="font-size: 1.2em; font-weight: bold; color: #059669;" id="new-balance">
          {{ balance|currency }}
        </div>
      </div>
    </div>
  </div>
  
  <div class="card" style="margin-top:8px">
    <form method="POST" class="form">
      {{ form.hidden_tag() }}
      
      <div class="field">
        <label class="label">Date <span style="color: #dc2626;">*</span></label>
        {{ form.date(class="form-control") }}
        {% if form.date.errors %}
          <div class="error">{{ form.date.errors[0] }}</div>
        {% endif %}
      </div>
      
      <div class="field">
        <label class="label">Amount <span style="color: #dc2626;">*</span></label>
        {{ form.amount(class="form-control", placeholder="0.00", step="0.01", id="amount-input") }}
        {% if form.amount.errors %}
          <div class="error">{{ form.amount.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">Enter the amount to deposit</small>
      </div>
      
      <div class="field">
        <label class="label">Description <span style="color: #dc2626;">*</span></label>
        {{ form.description(class="form-control", placeholder="e.g., Cash deposit, Bank transfer, etc.") }}
        {% if form.description.errors %}
          <div class="error">{{ form.description.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">Brief description of the deposit</small>
      </div>
      
      <div class="field">
        <label class="label">Customer (Optional)</label>
        {{ form.ref_customer_id(class="form-control") }}
        {% if form.ref_customer_id.errors %}
          <div class="error">{{ form.ref_customer_id.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">Link this deposit to a customer (optional)</small>
      </div>
      
      <div style="display: flex; gap: 8px; margin-top: 16px;">
        {{ form.submit(class_='btn-primary', style='background-color: #059669; border-color: #059669;') }}
        <a class="btn-outline" href="{{ url_for('account_view', account_id=account.id) }}">Cancel</a>
      </div>
    </form>
  </div>
  
  <script>
    // Calculate new balance in real-time
    document.addEventListener('DOMContentLoaded', function() {
      const amountInput = document.getElementById('amount-input');
      const newBalanceDiv = document.getElementById('new-balance');
      const currentBalance = {{ balance }};
      
      if (amountInput && newBalanceDiv) {
        amountInput.addEventListener('input', function() {
          const depositAmount = parseFloat(this.value) || 0;
          const newBalance = currentBalance + depositAmount;
          
          newBalanceDiv.textContent = new Intl.NumberFormat('en-PK', {
            style: 'currency',
            currency: 'PKR',
            minimumFractionDigits: 2
          }).format(newBalance);
          
          newBalanceDiv.style.color = newBalance >= 0 ? '#059669' : '#dc2626';
        });
      }
    });
  </script>
{% endblock %}