{% load i18n crispy_forms_tags sekizai_tags %}
<div class="card mt-4 door-payment-section" id="payatdoor-payment-form-card">
    <h6 class="card-header" role="tab" id="door_headingOne">
        {% trans "Cash Payment" %}
    </h6>
    <div class="card-body">
        <div id="payatdoor-auto-submit-message" class="d-none">
          <p>  
            {% blocktrans %}
            You have reported a {{ paymentMethod }} payment in the amount of:
            {% endblocktrans %}
            <strong>{{ currencySymbol }}{{ invoice.outstandingBalance|floatformat:"-2" }}</strong>.
          </p>
          <p>
            <button class="btn btn-primary" id="submit-quick">
              {% trans "Record Payment" %}: {{ currencySymbol }}{{ invoice.outstandingBalance|floatformat:"-2" }}
            </button>
          </p>
        </div>
        <form id="payatdoor-payment-form" action="{{ form.helper.form_action }}" method="POST" class="my-4">
          {% crispy form %}

          {% addtoblock "js" %}
            {{ form.media }}
          {% endaddtoblock %}          
        </form>
    </div>
</div>

{% addtoblock "js" %}
<script type="text/javascript">
 
    var regParams = {
      payAtDoor: "{{ payAtDoor }}",
      autoSubmit: "{{ autoSubmit }}",
      paymentMethod: "{{ paymentMethod }}",
      outstandingBalance: "{{ invoice.outstandingBalance|floatformat:'-2' }}"
    }

    $(document).ready(function() {
        if (
          regParams.autoSubmit == "True" && 
          regParams.payAtDoor == "True" && 
          regParams.paymentMethod !== ""
        ) {
            $('.door-payment-section').not('#payatdoor-payment-form-card').addClass('d-none');
            $('#payatdoor-payment-form').addClass('d-none');
            $('#payatdoor-auto-submit-message').removeClass('d-none');
            $("#id_amountPaid").val(regParams.outstandingBalance);
            $("#id_paymentMethod").val(regParams.paymentMethod);

            $('#submit-quick').click(function() {
              $('#submit-id-submit').click();
            });
        }
    });

</script>
{% endaddtoblock %}