{% extends 'base.html' %}
{% block content %}
  <div style="display:flex;justify-content:space-between;align-items:center;">
    <h2>Withdraw - {{ 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: #fef2f2;">
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <h3 style="margin: 0 0 4px 0; color: #991b1b;">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 Withdrawal</div>
        <div style="font-size: 1.2em; font-weight: bold; color: #dc2626;" id="new-balance">
          {{ balance|currency }}
        </div>
      </div>
    </div>
    {% if balance < 0 %}
    <div style="margin-top: 8px; padding: 8px; background-color: #fee2e2; border-left: 3px solid #dc2626; color: #991b1b;">
      ⚠️ Account is currently overdrawn
    </div>
    {% endif %}
  </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 withdraw</small>
      </div>
      
      <div class="field">
        <label class="label">Description <span style="color: #dc2626;">*</span></label>
        {{ form.description(class="form-control", placeholder="e.g., Cash withdrawal, Payment to supplier, etc.") }}
        {% if form.description.errors %}
          <div class="error">{{ form.description.errors[0] }}</div>
        {% endif %}
        <small style="color: #666;">Brief description of the withdrawal</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 withdrawal to a customer (optional)</small>
      </div>
      
      <div id="overdraft-warning" style="display: none; margin-top: 16px; padding: 12px; background-color: #fef3c7; border-left: 3px solid #f59e0b; color: #92400e; border-radius: 4px;">
        ⚠️ <strong>Warning:</strong> This withdrawal will result in an overdraft (negative balance).
      </div>
      
      <div style="display: flex; gap: 8px; margin-top: 16px;">
        {{ form.submit(class_='btn-outline', style='color: #dc2626; border-color: #dc2626;') }}
        <a class="btn-outline" href="{{ url_for('account_view', account_id=account.id) }}">Cancel</a>
      </div>
    </form>
  </div>
  
  <script>
    // Calculate new balance and show overdraft warning
    document.addEventListener('DOMContentLoaded', function() {
      const amountInput = document.getElementById('amount-input');
      const newBalanceDiv = document.getElementById('new-balance');
      const overdraftWarning = document.getElementById('overdraft-warning');
      const currentBalance = {{ balance }};
      
      if (amountInput && newBalanceDiv) {
        amountInput.addEventListener('input', function() {
          const withdrawAmount = parseFloat(this.value) || 0;
          const newBalance = currentBalance - withdrawAmount;
          
          newBalanceDiv.textContent = new Intl.NumberFormat('en-PK', {
            style: 'currency',
            currency: 'PKR',
            minimumFractionDigits: 2
          }).format(newBalance);
          
          newBalanceDiv.style.color = newBalance >= 0 ? '#059669' : '#dc2626';
          
          // Show/hide overdraft warning
          if (overdraftWarning) {
            if (newBalance < 0) {
              overdraftWarning.style.display = 'block';
            } else {
              overdraftWarning.style.display = 'none';
            }
          }
        });
      }
    });
  </script>
{% endblock %}