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

{% block title %}{% if mode == "add" %}Add Party{% else %}Edit Party{% endif %}{% endblock %}

{% block heading %}{% if mode == "add" %}Add Party{% else %}Edit Party — {{ party.name }}{% endif %}{% endblock %}

{% block content %}
<div class="card shadow border-0">
  <div class="card-header text-white" style="background:#1A2B4C;">
    <h5 class="mb-0">
      <i class="fas fa-{% if mode == 'add' %}user-plus{% else %}user-edit{% endif %} mr-2"></i>
      {% if mode == "add" %}New Party{% else %}Edit Party — {{ party.name }}{% endif %}
    </h5>
  </div>
  <div class="card-body p-4">
    <form method="post">
      {% csrf_token %}

      <h6 class="text-uppercase text-muted small font-weight-bold mb-3 border-bottom pb-2">
        <i class="fas fa-id-card mr-1"></i> Basic Information
      </h6>
      <div class="form-row">
        <div class="form-group col-md-5">
          <label>Party Name <span class="text-danger">*</span></label>
          <input type="text" name="name" class="form-control" value="{{ party.name|default:'' }}" required placeholder="e.g. ABC Traders">
        </div>
        <div class="form-group col-md-3">
          <label>Party Type <span class="text-danger">*</span></label>
          <select name="party_type" class="form-control" id="partyTypeSelect">
            {% for val, label in party_types %}
              <option value="{{ val }}" {% if party.party_type == val %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
          <small class="form-text text-muted" id="partyTypeHint">Customer → Receivable. Vendor → Payable.</small>
        </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 party.linked_account_id == a.id %}selected{% endif %}>{{ a.code }} — {{ a.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <h6 class="text-uppercase text-muted small font-weight-bold mb-3 mt-4 border-bottom pb-2">
        <i class="fas fa-address-book mr-1"></i> Contact Information
      </h6>
      <div class="form-row">
        <div class="form-group col-md-4">
          <label><i class="fas fa-phone text-muted mr-1"></i> Phone</label>
          <input type="text" name="phone" class="form-control" value="{{ party.phone|default:'' }}" placeholder="03XX-XXXXXXX">
        </div>
        <div class="form-group col-md-4">
          <label><i class="fas fa-envelope text-muted mr-1"></i> Email</label>
          <input type="email" name="email" class="form-control" value="{{ party.email|default:'' }}" placeholder="name@example.com">
        </div>
        {% if mode == "edit" %}
        <div class="form-group col-md-4">
          <label class="d-block">Status</label>
          <div class="custom-control custom-switch mt-2">
            <input type="checkbox" class="custom-control-input" id="isActiveSwitch" name="is_active" {% if party.is_active %}checked{% endif %}>
            <label class="custom-control-label" for="isActiveSwitch">Active</label>
          </div>
        </div>
        {% endif %}
      </div>
      <div class="form-group">
        <label><i class="fas fa-map-marker-alt text-muted mr-1"></i> Address</label>
        <textarea name="address" class="form-control" rows="2" placeholder="Address">{{ party.address|default:'' }}</textarea>
      </div>

      <h6 class="text-uppercase text-muted small font-weight-bold mb-3 mt-4 border-bottom pb-2">
        <i class="fas fa-shield-alt mr-1"></i> Balance Limit
      </h6>
      <div class="form-row">
        <div class="form-group col-md-3">
          <label>Maximum Balance</label>
          <input type="number" step="0.01" name="max_balance" class="form-control"
                 value="{{ party.max_balance|default_if_none:'' }}" placeholder="Leave blank for no limit">
        </div>
        <div class="form-group col-md-9 d-flex align-items-end">
          <small class="text-muted">
            <i class="fas fa-info-circle mr-1"></i>
            In the party list, balance turns <strong class="text-warning">orange</strong> at 70% of this
            limit and <strong class="text-danger">red</strong> once it's crossed. Leave blank for no limit.
          </small>
        </div>
      </div>

      <h6 class="text-uppercase text-muted small font-weight-bold mb-3 mt-4 border-bottom pb-2">
        <i class="fas fa-balance-scale mr-1"></i> Opening Balance
      </h6><div class="form-row align-items-center">
        <div class="form-group col-md-3">
          <label>Amount</label>
          {% if party.ob_posted %}
            <input type="text" class="form-control" value="{{ party.opening_balance }}" disabled>
          {% else %}
            <input type="number" step="0.01" name="opening_balance" class="form-control" value="{{ party.opening_balance|default:'0' }}">
          {% endif %}
        </div>
        <div class="form-group col-md-3">
          <label>Type</label>
          {% if party.ob_posted %}
            <input type="text" class="form-control" value="{{ party.opening_balance_type }}" disabled>
          {% else %}
            <select name="opening_balance_type" class="form-control">
              {% for val, label in balance_types %}
                <option value="{{ val }}" {% if party.opening_balance_type == val %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
          {% endif %}
        </div>
        <div class="form-group col-md-6">
          {% if party.ob_posted %}
            <small class="text-muted"><i class="fas fa-lock mr-1"></i> Already posted — adjust karne ke liye Journal Voucher use karen.</small>
          {% else %}
            <small class="text-muted"><i class="fas fa-info-circle mr-1"></i> Save hone par Opening Balance Equity (3300) ke against automatically post hoga.</small>
          {% endif %}
        </div>
      </div>

      <hr>
      <button type="submit" class="btn btn-primary px-4"><i class="fas fa-save mr-1"></i> {% if mode == "add" %}Create Party{% else %}Save Changes{% endif %}</button>
      <a href="{% url 'coa:party_list' %}" class="btn btn-outline-secondary px-4">Cancel</a>
    </form>
  </div>
</div>
{% endblock %}

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

    var hints = {{ party_type_hints|default:'{}'|safe }};
    function updateHint(){
      var v = $('#partyTypeSelect').val();
      var map = {"CUSTOMER": "Customer → Receivable account.", "VENDOR": "Vendor → Payable account.", "OTHER": "Other → no fixed side."};
      $('#partyTypeHint').text(map[v] || "Customer → Receivable. Vendor → Payable.");
    }
    $('#partyTypeSelect').on('change', updateHint);
    updateHint();
  });
</script>
{% endblock %}