{% 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="join join-vertical w-full" id="balanceAccordionFlush">
        {% for form in form.forms %}
          <c-ui.components.collapse>
            <c-slot name="title">
              {% if form.account_group %}<span class="badge badge-primary badge-outline me-2">{{ form.account_group.name }}</span>{% endif %}{{ form.account_name }}
            </c-slot>
            <c-slot name="content">
              <div class="fieldset">
                <span class="fieldset-legend">{% translate 'Current balance' %}</span>
                <div data-amount="{{ form.current_balance|floatformat:"-40u" }}"
                  data-decimal-places="{{ form.currency_decimal_places }}"
                  id="amount-{{ forloop.counter0 }}" class="text-base">
                  <c-amount.display
                    :amount="form.current_balance"
                    :prefix="form.currency_prefix"
                    :suffix="form.currency_suffix"
                    :decimal_places="form.currency_decimal_places"
                    color="auto"></c-amount.display>
                </div>
              </div>
              <div>
                {% crispy form %}
              </div>
              <div class="fieldset">
                <span class="fieldset-legend">{% translate 'Difference' %}</span>
                <div  class="text-base"
                      _="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 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>
            </c-slot>
          </c-ui.components.collapse>
        {% endfor %}
        </div>
        <div class="mt-3">
          <div>
            <input type="submit" name="submit" value="{% translate 'Reconcile balances' %}" class="btn btn-primary w-full" id="submit-id-submit">
          </div>
        </div>
    </form>
{% endblock %}