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.depositor_name hint='نام شخصی که وجه را واریز کرده است؛ اگر واریزکننده شخص دیگری است، نام او را بنویسید.' %}
        {% 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>
      <p id="destination-deposit-warning" class="pay-deposit-warning" role="alert" hidden>واریز به بانک <strong data-destination-bank></strong> باید با ثبت شناسه واریز اختصاصی شما، <bdi>{{ customer_deposit_id }}</bdi>، در فرم بانکی، موبایل‌بانک یا اینترنت‌بانک انجام شده باشد. در صورت ثبت نکردن این شناسه، ممکن است مبلغ واریزی به حساب شما برگشت بخورد. پیش از ارسال فیش، شناسه ثبت‌شده روی آن را بررسی کنید.</p>
      <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>
      <section id="receipt-upload" class="receipt-upload" aria-labelledby="receipt-upload-title" hidden>
        <strong id="receipt-upload-title" role="status">در حال ارسال فیش…</strong>
        <div class="receipt-upload-meter"><progress id="receipt-upload-progress" max="100" value="0" aria-label="پیشرفت ارسال فیش"></progress><span id="receipt-upload-percent">۰٪</span></div>
        <p id="receipt-upload-bytes"></p><p id="receipt-upload-time"></p>
        <small>لطفاً تا پایان ثبت، این صفحه را باز نگه دارید.</small>
      </section>
      <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>