{% extends 'payments/base.html' %}
{% load static %}
{% block title %}بانک‌ها و حساب‌های شرکت{% endblock %}
{% block content %}
<section class="chaharsu pay-workspace">
  <header class="pay-page-head">
    <div class="pay-page-title"><span class="pay-page-icon">{% include 'payments/_icon.html' with name='bank' %}</span><div><h1>بانک‌ها و حساب‌های شرکت</h1><p>حساب‌های قابل انتخاب برای کارشناسان و مشتریان را مدیریت کنید.</p></div></div>
    <a class="pay-button" href="{% url 'staff_payments:bank_new' %}">{% include 'payments/_icon.html' with name='plus' %}ایجاد حساب</a>
  </header>
  <form class="pay-card pay-filter-panel" method="get">
    <div class="pay-filter-grid pay-bank-filters">
      <label class="pay-search-field">جست‌وجوی حساب<span class="pay-search-input">{% include 'payments/_icon.html' with name='search' %}<input type="search" name="q" value="{{ request.GET.q }}" placeholder="نام حساب، بانک یا صاحب حساب"></span></label>
      {% for flag in bank_flags %}<label>{{ flag.label }}<select name="{{ flag.key }}"><option value="">همه</option><option value="1" {% if flag.value == '1' %}selected{% endif %}>فعال</option><option value="0" {% if flag.value == '0' %}selected{% endif %}>غیرفعال</option></select></label>{% endfor %}
      <button class="pay-button" type="submit">جست‌وجو</button>
    </div>
    {% if request.GET.q or request.GET.is_active or request.GET.available_to_staff or request.GET.available_to_customers %}<div class="pay-filter-bottom"><a class="pay-reset" href="{% url 'staff_payments:banks' %}">پاک کردن فیلترها</a></div>{% endif %}
  </form>
  <form class="pay-bank-panel" method="post" action="{% url 'staff_payments:bank_bulk' %}" data-bank-selection>
    {% csrf_token %}
    <div class="pay-list-head"><h2>حساب‌های شرکت</h2><span>{{ page_obj.paginator.count }} حساب</span></div>
    {% if page_obj %}
    <div class="pay-bank-table-head"><label class="pay-select-all"><input type="checkbox" data-select-all aria-label="انتخاب همه حساب‌های این صفحه"><span>انتخاب همه</span></label><span>حساب و بانک</span><span>وضعیت کلی</span><span>کارشناسان</span><span>مشتریان</span><span>مدیریت</span></div>
    {% for account in page_obj %}
    <article class="pay-bank-row">
      <label class="pay-bank-select"><input type="checkbox" name="accounts" value="{{ account.pk }}" aria-label="انتخاب {{ account.name }}"></label>
      <div class="pay-bank-identity"><span class="pay-record-icon">{% include 'payments/_icon.html' with name='bank' %}</span><div><h3><a href="{% url 'staff_payments:bank_edit' account.public_id %}">{{ account.name }}</a></h3><p>{{ account.bank.name }} · {{ account.holder }}</p>{% if account.requires_deposit_id %}<span class="pay-identifier-badge">شناسه واریز الزامی</span>{% endif %}</div></div>
      <div class="pay-bank-flag"><span class="pay-mobile-label">وضعیت کلی</span><span class="pay-status {% if account.is_active %}approved{% else %}neutral{% endif %}">{{ account.is_active|yesno:'فعال,غیرفعال' }}</span></div>
      <div class="pay-bank-flag"><span class="pay-mobile-label">کارشناسان</span><span class="pay-status {% if account.is_active and account.available_to_staff %}approved{% else %}neutral{% endif %}">{% if not account.is_active %}غیرفعال{% else %}{{ account.available_to_staff|yesno:'فعال,غیرفعال' }}{% endif %}</span></div>
      <div class="pay-bank-flag"><span class="pay-mobile-label">مشتریان</span><span class="pay-status {% if account.is_active and account.available_to_customers %}approved{% else %}neutral{% endif %}">{% if not account.is_active %}غیرفعال{% else %}{{ account.available_to_customers|yesno:'فعال,غیرفعال' }}{% endif %}</span></div>
      <a class="pay-bank-edit" href="{% url 'staff_payments:bank_edit' account.public_id %}">{% include 'payments/_icon.html' with name='edit' %}ویرایش</a>
    </article>
    {% endfor %}
    <div class="pay-bulk-bar">
      <div class="pay-bulk-label"><strong>تغییر گروهی وضعیت</strong><span data-selection-count role="status" aria-live="polite">حساب‌های موردنظر را انتخاب کنید.</span></div>
      <label>بخش موردنظر<select name="field"><option value="is_active">وضعیت کلی حساب</option><option value="available_to_staff">پنل کارشناسان</option><option value="available_to_customers">پنل مشتریان</option></select></label>
      <label>وضعیت جدید<select name="value"><option value="1">فعال</option><option value="0">غیرفعال</option></select></label>
      <button class="pay-button" type="submit" data-bulk-submit>اعمال بر انتخاب‌شده‌ها</button>
    </div>
    <p class="pay-bank-hint">حساب غیرفعال کلی در هیچ پنلی قابل انتخاب نیست؛ تنظیم هر پنل جداگانه حفظ می‌شود.</p>
    {% else %}<div class="pay-empty"><span class="pay-empty-icon">{% include 'payments/_icon.html' with name='bank' %}</span><h3>{% if request.GET %}حسابی با این فیلترها پیدا نشد{% else %}هنوز حسابی تعریف نشده است{% endif %}</h3><p>{% if request.GET %}فیلترها را تغییر دهید یا پاک کنید.{% else %}برای شروع، اولین حساب شرکت را ایجاد کنید.{% endif %}</p></div>{% endif %}
  </form>
  {% include 'payments/_pagination.html' %}
</section>
{% endblock %}
{% block extra_scripts %}{{ block.super }}<script defer src="{% static 'js/chaharsu/bank-selection.js' %}?v={{ static_asset_version }}"></script>{% endblock %}