WYGIWYH/app/templates/accounts/fragments/account_reconciliation.html

{% extends 'extends/offcanvas.html' %}
{% load currency_display %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% translate 'Account Reconciliation' %}{% endblock %}

{% block body %}
    <form hx-post="{% url 'account_reconciliation' %}">
        {% csrf_token %}
        {{ form.management_form }}
        <div class="tw:space-y-2" id="balanceAccordionFlush">
        {% for form in form.forms %}
          <div class="tw:collapse tw:collapse-arrow tw:bg-base-200">
            <input type="radio" name="my-accordion-flush" id="accordion-{{ forloop.counter0 }}" />
            <label for="accordion-{{ forloop.counter0 }}" class="tw:collapse-title tw:text-base tw:font-medium">
              {% if form.account_group %}<span class="tw:badge tw:badge-primary tw:me-2">{{ form.account_group.name }}</span>{% endif %}{{ form.account_name }}
            </label>
            <div class="tw:collapse-content">
              <div class="tw:mb-3">
                <div class="tw:label">
                  <span class="tw:label-text">{% translate 'Current balance' %}</span>
                </div>
                <div data-amount="{{ form.current_balance|floatformat:"-40u" }}"
                     data-decimal-places="{{ form.currency_decimal_places }}"
                     id="amount-{{ forloop.counter0 }}">
                  {% currency_display amount=form.current_balance prefix=form.currency_prefix suffix=form.currency_suffix decimal_places=form.currency_decimal_places %}
                </div>
              </div>
              <div>
                {% crispy form %}
              </div>
              <div class="tw:mb-3">
                <div class="tw:label">
                  <span class="tw:label-text">{% translate 'Difference' %}</span>
                </div>
                <div _="on input from #id_form-{{ forloop.counter0 }}-new_balance
                          set original_amount to parseFloat('{{ form.current_balance|floatformat:"-40u" }}')
                          then set prefix to '{{ form.currency_prefix }}'
                          then set suffix to '{{ form.currency_suffix }}'
                          then set decimal_places to {{ form.currency_decimal_places }}
                          then call parseLocaleNumber(#id_form-{{ forloop.counter0 }}-new_balance.value)
                          then set new_amount to result
                          then set diff to (Math.round((new_amount - original_amount) * Math.pow(10, decimal_places))) / Math.pow(10, decimal_places)
                          then log diff
                          then set format_new_amount to
                            Intl.NumberFormat(
                              undefined,
                              {
                                minimumFractionDigits: decimal_places,
                                maximumFractionDigits: decimal_places,
                                roundingMode: 'trunc'
                              }
                            ).format(diff)
                          then set formatted_string to `${prefix}${format_new_amount}${suffix}`
                          then put formatted_string into me if diff else
                          put '-' into me">-</div>
              </div>
            </div>
          </div>
        {% endfor %}
        </div>
        <div class="tw:mt-3">
          <div>
            <input type="submit" name="submit" value="{% translate 'Reconcile balances' %}" class="tw:btn tw:btn-outline tw:btn-primary tw:w-full" id="submit-id-submit">
          </div>
        </div>
    </form>
{% endblock %}