{% extends 'base.html' %}
{% block content %}
  <h2>New Account</h2>
  <div class="card">
    <form method="post" class="form">
      {{ form.hidden_tag() }}
      <div class="field">
        <label class="label">Name</label>
        {{ form.name() }}
      </div>
      <div class="field">
        <label class="label">Account Holder</label>
        {{ form.holder_name() }}
      </div>
      <div class="grid cols-2">
        <div class="field">
          <label class="label">Account Number</label>
          {{ form.account_number() }}
        </div>
        <div class="field">
          <label class="label">Phone</label>
          {{ form.phone() }}
        </div>
      </div>
      <div class="grid cols-2">
        <div class="field">
          <label class="label">Bank/Provider</label>
          {{ form.bank_name() }}
        </div>
        <div class="field">
          <label class="label">Branch</label>
          {{ form.branch() }}
        </div>
      </div>
      <div class="grid cols-2">
        <div class="field">
          <label class="label">IFSC/SWIFT</label>
          {{ form.ifsc_swift() }}
        </div>
        <div class="field">
          <label class="label">Opening Balance</label>
          {{ form.opening_balance(step='0.01') }}
        </div>
      </div>
      <div class="field">
        <label class="label">Type</label>
        {{ form.type() }}
      </div>
      
      <!-- Online Payment Settings -->
      <div class="card" style="margin: 16px 0; padding: 16px; background-color: #f9fafb; border: 1px solid #e5e7eb;">
        <h4 style="margin: 0 0 12px 0;">Online Payment Settings</h4>
        <div class="field">
          <label class="label">Enable Online Payment</label>
          <div style="display: flex; gap: 16px; margin-top: 8px;">
            {% for choice in form.is_online_payment_enabled %}
              <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                {{ choice() }}
                <span>{{ choice.label.text }}</span>
              </label>
            {% endfor %}
          </div>
          <small style="color: #666;">If enabled, customers can see this account for online payments</small>
        </div>
        <div class="field">
          <label class="label">Payment Instructions</label>
          {{ form.payment_instructions(placeholder="e.g., Please include your name in payment description") }}
          <small style="color: #666;">Instructions for customers making payments to this account</small>
        </div>
      </div>
      
      <div class="field">
        <label class="label">Note</label>
        {{ form.note() }}
      </div>
      <div>
        {{ form.submit(class_='btn-primary') }}
      </div>
    </form>
  </div>
{% endblock %}