{% extends 'base.html' %}
{% block content %}
  <h2>New User</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">Email</label>
        {{ form.email(type='email') }}
      </div>
      <div class="field">
        <label class="label">Role</label>
        {{ form.role() }}
      </div>
      <div class="field">
        <label class="label">Reports To (Admin)</label>
        {{ form.manager_id() }}
      </div>
      <div class="field">
        <label class="label">Company</label>
        {{ form.company_name() }}
      </div>
      <div class="grid cols-2">
        <div class="field">
          <label class="label">Phone</label>
          {{ form.phone() }}
        </div>
        <div class="field">
          <label class="label">GST/VAT</label>
          {{ form.gst_vat() }}
        </div>
      </div>
      <div class="field">
        <label class="label">Address Line 1</label>
        {{ form.address_line1() }}
      </div>
      <div class="field">
        <label class="label">Address Line 2</label>
        {{ form.address_line2() }}
      </div>
      <div class="grid cols-2">
        <div class="field">
          <label class="label">City</label>
          {{ form.city() }}
        </div>
        <div class="field">
          <label class="label">State</label>
          {{ form.state() }}
        </div>
      </div>
      <div class="grid cols-2">
        <div class="field">
          <label class="label">Postal Code</label>
          {{ form.postal_code() }}
        </div>
        <div class="field">
          <label class="label">Country</label>
          {{ form.country() }}
        </div>
      </div>
      <div class="grid cols-2">
        <div class="field">
          <label class="label">Bank Account Name</label>
          {{ form.bank_account_name() }}
        </div>
        <div class="field">
          <label class="label">Account Number</label>
          {{ form.bank_account_number() }}
        </div>
      </div>
      <div class="field">
        <label class="label">IFSC/SWIFT</label>
        {{ form.bank_ifsc_swift() }}
      </div>
      <div id="opening-balance-section" style="display: none;">
        <div class="field">
          <label class="label">{{ form.opening_balance.label }}</label>
          {{ form.opening_balance(step='0.01', placeholder='0.00') }}
          {% if form.opening_balance.errors %}
            <div class="error">{{ form.opening_balance.errors[0] }}</div>
          {% endif %}
        </div>
        <div class="field">
          <label class="label">{{ form.opening_balance_type.label }}</label>
          <div style="display: flex; gap: 20px; margin-top: 8px;">
            {% for choice in form.opening_balance_type %}
              <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                {{ choice() }}
                <span>{{ choice.label.text }}</span>
              </label>
            {% endfor %}
          </div>
          {% if form.opening_balance_type.errors %}
            <div class="error">{{ form.opening_balance_type.errors[0] }}</div>
          {% endif %}
          <small style="color: #666;">Debit = Customer owes you, Credit = You owe customer</small>
        </div>
      </div>
      <div class="field">
        <label class="label">Password</label>
        {{ form.password(type='password') }}
      </div>
      <script>
        document.addEventListener('DOMContentLoaded', function() {
          const roleSelect = document.querySelector('select[name="role"]');
          const openingBalanceSection = document.getElementById('opening-balance-section');
          
          function toggleOpeningBalance() {
            if (roleSelect.value === 'customer') {
              openingBalanceSection.style.display = 'block';
            } else {
              openingBalanceSection.style.display = 'none';
            }
          }
          
          roleSelect.addEventListener('change', toggleOpeningBalance);
          toggleOpeningBalance(); // Initial check
        });
      </script>
      <div>
        {{ form.submit(class_='btn-primary') }}
      </div>
    </form>
  </div>
{% endblock %}