{% extends "pos/base.html" %}
{% load static %}

{% block title %}{% if mode == "add" %}Add Cash/Bank Account{% else %}Edit Cash/Bank Account{% endif %}{% endblock %}

{% block heading %}{% if mode == "add" %}Add Cash/Bank Account{% else %}Edit — {{ account.account_name }}{% endif %}{% endblock %}

{% block content %}
<div class="card shadow">
  <div class="card-body">
    <form method="post">
      {% csrf_token %}

      <div class="form-row">
        <div class="form-group col-md-5">
          <label>Account Name <span class="text-danger">*</span></label>
          <input type="text" name="account_name" class="form-control"
                 value="{{ account.account_name|default:'' }}" required>
        </div>
        <div class="form-group col-md-3">
          <label>Type <span class="text-danger">*</span></label>
          <select name="account_type" class="form-control">
            {% for val, label in cb_types %}
              <option value="{{ val }}" {% if account.account_type == val %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="form-group col-md-4">
          <label>Linked COA Account</label>
          <select name="linked_account" class="form-control select2-account">
            <option value="">— None —</option>
            {% for a in accounts %}
              <option value="{{ a.id }}" {% if account.linked_account_id == a.id %}selected{% endif %}>
                {{ a.code }} — {{ a.name }}
              </option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label>Bank Name</label>
          <input type="text" name="bank_name" class="form-control" value="{{ account.bank_name|default:'' }}">
        </div>
        <div class="form-group col-md-4">
          <label>Account Number</label>
          <input type="text" name="account_number" class="form-control" value="{{ account.account_number|default:'' }}">
        </div>
        {% if mode == "edit" %}
        <div class="form-group col-md-2">
          <label class="d-block">Active?</label>
          <input type="checkbox" name="is_active" {% if account.is_active %}checked{% endif %}>
        </div>
        {% endif %}
      </div>

      <div class="form-row">
        <div class="form-group col-md-3">
          <label>Opening Balance</label>
          {% if account.ob_posted %}
            <input type="text" class="form-control" value="{{ account.opening_balance }}" disabled>
            <small class="text-muted">Already posted — use Journal Voucher to adjust.</small>
          {% else %}
            <input type="number" step="0.01" name="opening_balance" class="form-control"
                   value="{{ account.opening_balance|default:'0' }}">
          {% endif %}
        </div>
        <div class="form-group col-md-3">
          <label>OB Type</label>
          {% if account.ob_posted %}
            <input type="text" class="form-control" value="{{ account.opening_balance_type }}" disabled>
          {% else %}
            <select name="opening_balance_type" class="form-control">
              {% for val, label in balance_types %}
                <option value="{{ val }}" {% if account.opening_balance_type == val %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          {% endif %}
        </div>
      </div>

      <button type="submit" class="btn btn-primary">
        {% if mode == "add" %}Create Account{% else %}Save Changes{% endif %}
      </button>
      <a href="{% url 'coa:cashbank_list' %}" class="btn btn-secondary">Cancel</a>
    </form>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
  $(document).ready(function(){
    $('.select2-account').select2({ width: '100%' });
  });
</script>
{% endblock %}