customerTicket/templates/payments/_customer_receipt_form.html

<section class="chaharsu customer-finance customer-receipt {% if staff_form %}pay-workspace pay-form-workspace staff-receipt-workspace{% endif %}">
  {% include 'payments/_link_status.html' %}
  <nav class="pay-breadcrumb" aria-label="مسیر صفحه">{% if staff_form %}<a href="{% url 'staff_payments:desk' %}">اعلامیه‌ها و فیش‌ها</a>{% elif payment_link_access.notice_id %}<a href="{% url 'payments:notice_detail' payment_link_access.notice.public_id %}">اعلامیه واریز</a>{% elif not payment_link_access %}<a href="{% url 'payments:home' %}">خدمات چهارسو</a>{% endif %}<span aria-hidden="true">/</span><span aria-current="page">ارسال فیش واریزی</span></nav>
  <header class="customer-finance-title"><span class="pay-page-icon">{% include 'payments/_icon.html' with name='receipt' %}</span><div><h1>{% if staff_form %}ثبت فیش برای مشتری{% elif revision_version %}اصلاح فیش واریزی{% else %}ارسال فیش واریزی{% endif %}</h1><p>فیش را مستقل یا برای یکی از واریزهای اعلام‌شده ارسال کنید.</p>{% if staff_form %}{% include 'payments/_customer_identity.html' with customer=customer %}{% endif %}</div></header>
  <form id="receipt-form" class="customer-receipt-form pay-form" method="post" enctype="multipart/form-data" data-max-bytes="{{ max_bytes }}" novalidate>
    {% csrf_token %}{{ form.submission_key }}{% if revision_version %}<input type="hidden" name="version" value="{{ revision_version }}">{% endif %}
    <div id="receipt-errors" class="pay-errors" role="alert" {% if not form.errors %}hidden{% endif %}><strong>لطفاً این موارد را اصلاح کنید</strong><ul>{% for field in form %}{% for error in field.errors %}<li><a href="#{{ field.id_for_label }}">{{ error }}</a></li>{% endfor %}{% endfor %}{% for error in form.non_field_errors %}<li>{{ error }}</li>{% endfor %}</ul></div>
    <section class="pay-card" aria-labelledby="association-title">
      <h2 id="association-title">این فیش مربوط به کدام واریز است؟</h2>
      <fieldset class="pay-field receipt-mode-field" data-field="receipt_mode"><legend class="sr-only">نوع واریز</legend>
        <div class="customer-receipt-modes">{% for radio in form.receipt_mode %}<div class="customer-mode {% if radio.data.value == 'linked' %}recommended-mode{% endif %}"><label for="{{ radio.id_for_label }}">{{ radio.tag }}<strong>{{ radio.choice_label }}</strong></label><small>{% if radio.data.value == 'linked' %}با اعلامیه واریز کارشناس{% else %}بدون اعلامیه واریز{% endif %}</small></div>{% endfor %}</div>
        <p class="field-error" id="error-receipt_mode" {% if not form.receipt_mode.errors %}hidden{% endif %}>{% for error in form.receipt_mode.errors %}{{ error }}{% endfor %}</p>
      </fieldset>
      <p class="finance-guidance">{% if staff_form %}اعلامیه مشتری را انتخاب کنید تا مبلغ و حساب مقصد قابل تطبیق باشد؛ ثبت واریز مستقل نیز امکان‌پذیر است.{% else %}برای ثبت دقیق‌تر، از کارشناس بخواهید اعلامیه واریز ایجاد کند؛ این کار توصیه می‌شود و اجباری نیست.{% endif %}</p>
      {% if staff_form %}{% include 'payments/_receipt_field.html' with field=form.notice_id hint='موضوع، مبلغ و شماره فاکتور را با فیش مشتری تطبیق دهید.' %}{% elif payment_link_access %}{% include 'payments/_receipt_field.html' with field=form.notice_id hint='این لینک به اعلامیه مربوط به خودش دسترسی دارد؛ ارسال واریز مستقل نیز ممکن است.' %}{% else %}{% include 'payments/_receipt_field.html' with field=form.notice_id hint='۱۰ واریز اخیرِ تسویه‌نشده؛ برای واریزهای قدیمی‌تر، از صفحه شماره حساب‌ها وارد شوید.' %}{% endif %}
      <div id="selected-payment" class="pay-supplement" hidden><h3 data-selected-notice-title></h3><p data-selected-notice-summary></p><p class="pay-deposit-warning" data-selected-deposit-warning hidden>هنگام واریز، حتماً شناسه واریز ارائه‌شده را در فرم بانکی، موبایل‌بانک یا اینترنت‌بانک وارد کنید؛ واریز بدون این شناسه معتبر نخواهد بود.</p><a class="pay-text-link" data-selected-notice-link>مشاهده اطلاعات و کپی شماره‌ها {% include 'payments/_icon.html' with name='arrow' %}</a></div>
    </section>
    <section class="pay-card" aria-labelledby="receipt-title">
      <h2 id="receipt-title">اطلاعات فیش پرداخت</h2><p class="pay-section-help">مبلغ، حساب مقصد، تاریخ کامل و تصویر فیش الزامی‌اند.</p>
      <div class="customer-field-grid">
        {% include 'payments/_receipt_field.html' with field=form.paid_amount hint='مبلغی که واقعاً پرداخت کرده‌اید؛ ممکن است با مبلغ اعلام‌شده متفاوت باشد.' %}
        {% include 'payments/_receipt_field.html' with field=form.tracking_number hint='شماره درج‌شده روی فیش بانکی' %}
        {% include 'payments/_receipt_field.html' with field=form.origin_bank %}
        {% include 'payments/_receipt_field.html' with field=form.destination_account hint='نام حسابی را که وجه به آن واریز کرده‌اید انتخاب کنید.' %}
        {% include 'payments/_receipt_field.html' with field=form.origin_other %}
        {% include 'payments/_receipt_field.html' with field=form.deposit_id hint='در صورت تمایل، شناسه‌ای را که هنگام پرداخت وارد کرده‌اید بنویسید؛ ارسال فیش بدون تکمیل این فیلد نیز امکان‌پذیر است.' %}
      </div>
      <fieldset class="customer-date"><legend>تاریخ واریز <span class="pay-optional">شمسی · الزامی</span></legend><div class="customer-date-selects">{% include 'payments/_receipt_field.html' with field=form.paid_day %}{% include 'payments/_receipt_field.html' with field=form.paid_month %}{% include 'payments/_receipt_field.html' with field=form.paid_year %}</div><div class="customer-date-tools"><p class="pay-field-hint">تاریخ درج‌شده روی فیش را کامل انتخاب کنید.</p><button id="date-today" type="button" class="pay-today">امروز</button></div><p id="date-preview" aria-live="polite"></p><input id="paid-date-iso" type="hidden" name="paid_date" value=""></fieldset>
      <div class="pay-field customer-upload-field" data-field="receipt_image"><div class="customer-upload-zone">{% include 'payments/_icon.html' with name='upload' %}<label class="customer-file-button" for="{{ form.receipt_image.id_for_label }}">انتخاب تصویر فیش <span>الزامی</span></label>{{ form.receipt_image }}<p>تصویر JPG، PNG، GIF یا WEBP؛ حداکثر {{ max_bytes|filesizeformat }}.</p></div><p class="field-error" id="error-receipt_image" {% if not form.receipt_image.errors %}hidden{% endif %}>{% for error in form.receipt_image.errors %}{{ error }}{% endfor %}</p><div class="customer-file-selection" id="receipt-file-selection" hidden><p id="receipt-file-status" role="status" aria-live="polite"></p><button type="button" id="receipt-clear-file">حذف انتخاب</button></div><img id="receipt-file-preview" alt="پیش‌نمایش تصویر فیش" hidden></div>
      {% include 'payments/_receipt_field.html' with field=form.description %}
      <p id="receipt-summary" class="finance-guidance" role="status"></p><p role="status" id="form-status"></p>
      <div class="customer-receipt-actions"><button class="pay-button" id="submit-receipt" type="submit">ثبت و ارسال فیش</button>{% if staff_form %}<a class="pay-text-link" href="{% url 'staff_payments:desk' %}">انصراف و بازگشت</a>{% elif payment_link_access.notice_id %}<a class="pay-text-link" href="{% url 'payments:notice_detail' payment_link_access.notice.public_id %}">مشاهده اعلامیه واریز</a>{% elif not payment_link_access %}<a class="pay-text-link" href="{% url 'payments:notices' %}">مشاهده واریزهای اعلام‌شده {% include 'payments/_icon.html' with name='arrow' %}</a>{% endif %}</div>
    </section>
  </form>
{% if not staff_form %}
  <div class="customer-service-footer">{% if not payment_link_access %}<a class="pay-text-link" href="{% url 'payments:home' %}">بازگشت به خدمات چهارسو</a>{% endif %}<a class="pay-text-link" href="{% url 'payments:receipt_list' %}">فیش‌های من و وضعیت بررسی</a></div>
{% endif %}
  {{ notice_data|json_script:'notice-data' }}{{ account_requirements|json_script:'account-requirements' }}
</section>