{% extends "./base.html" %}
{% load custom_tags %}

{% block bodyPage %}
<div class="container mt-5" dir="rtl">
  <h1 class="title is-4">گزارش ارسال پیامک</h1>
  <p class="has-text-grey mb-3">
    پیامک‌های <strong>تأییدشده و ارسال‌شده</strong> (موارد «در انتظار تأیید» و «لغو‌شده»
    در این گزارش نمی‌آیند) به‌همراه «تعداد پیامکی که اپراتور محاسبه کرده»
    (بر اساس کدگذاری GSM-7 برای انگلیسی/عدد و UCS-2 برای فارسی/یونیکد) — برای تحلیل هزینه.
  </p>

  {# --- کارت‌های خلاصه (روی کل نتیجهٔ فیلترشده) --- #}
  <div class="columns is-multiline mb-2">
    <div class="column is-narrow">
      <div class="box py-3 px-4 has-text-centered">
        <p class="heading mb-0">تعداد پیامک (رکورد)</p>
        <p class="title is-5 mb-0">{{ total_records }}</p>
      </div>
    </div>
    <div class="column is-narrow">
      <div class="box py-3 px-4 has-text-centered">
        <p class="heading mb-0">مجموع پیامک محاسبه‌شده</p>
        <p class="title is-5 mb-0 has-text-danger">{{ total_parts }}</p>
      </div>
    </div>
    <div class="column is-narrow">
      <div class="box py-3 px-4 has-text-centered">
        <p class="heading mb-0">GSM-7 / UCS-2</p>
        <p class="title is-6 mb-0">{{ gsm7_parts }} / {{ ucs2_parts }}</p>
      </div>
    </div>
    {% for code, label, count in status_stats %}
    <div class="column is-narrow">
      <a href="?status={{ code }}" class="box py-3 px-4 has-text-centered"
         {% if status == code %}style="border:2px solid #3273dc"{% endif %}>
        <p class="heading mb-0">{{ label }}</p>
        <p class="title is-5 mb-0">{{ count }}</p>
      </a>
    </div>
    {% endfor %}
  </div>

  {# --- فرم فیلتر --- #}
  <form method="get" class="box">
    <div class="columns is-multiline is-variable is-2">
      <div class="column is-2">
        <label class="label is-small">از تاریخ (شمسی)</label>
        <input class="input" type="text" id="dateFromP" name="date_from"
               value="{{ date_from }}" placeholder="1404/01/01" autocomplete="off">
      </div>
      <div class="column is-2">
        <label class="label is-small">تا تاریخ (شمسی)</label>
        <input class="input" type="text" id="dateToP" name="date_to"
               value="{{ date_to }}" placeholder="1404/12/29" autocomplete="off">
      </div>
      <div class="column is-2">
        <label class="label is-small">وضعیت ارسال</label>
        <div class="select is-fullwidth">
          <select name="status">
            <option value="">همه</option>
            {% for value, label in status_choices %}
            <option value="{{ value }}" {% if status == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="column is-2">
        <label class="label is-small">وضعیت تحویل</label>
        <div class="select is-fullwidth">
          <select name="delivery">
            <option value="">همه</option>
            {% for value, label in delivery_choices %}
            <option value="{{ value }}" {% if delivery == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="column is-2">
        <label class="label is-small">نوع پیامک</label>
        <div class="select is-fullwidth">
          <select name="sms_type">
            <option value="">همه</option>
            {% for value, label in type_choices %}
            <option value="{{ value }}" {% if sms_type == value %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="column is-2">
        <label class="label is-small">جستجو (متن/شماره/نام مشتری)</label>
        <input class="input" type="text" name="q" value="{{ query }}" placeholder="جستجو…">
      </div>
    </div>
    <div class="buttons">
      <button class="button is-link" type="submit">اعمال فیلتر</button>
      {% if has_filter %}
      <a class="button is-light" href="{% url 'admin_panel:sms_report' %}">حذف فیلترها</a>
      {% endif %}
    </div>
  </form>

  {# --- جدول --- #}
  <div class="table-container">
    <table class="table is-fullwidth is-narrow is-hoverable is-striped is-bordered">
      <thead>
        <tr>
          <th>شناسه</th>
          <th style="min-width: 16rem;">متن دقیق پیامک</th>
          <th style="min-width: 8rem;">شماره گیرنده</th>
          <th>نوع پیامک</th>
          <th style="min-width: 8rem;">مشتری</th>
          <th>سوابق</th>
          <th>تعداد پیامک</th>
          <th>وضعیت ارسال</th>
          <th>تحویل</th>
          <th style="min-width: 8rem;">تاریخ ایجاد</th>
          <th style="min-width: 8rem;">تاریخ ارسال</th>
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
        <tr>
          <td>{{ row.item.id }}</td>
          <td class="smsrep-msg">{{ row.item.message }}</td>
          <td dir="ltr">{{ row.item.phone_number }}</td>
          <td>{{ row.item.get_sms_type_display|default:'دستی/سفارشی' }}</td>
          <td>
            {% if row.item.customer_id %}
            <a href="{% url 'admin_panel:customer' row.item.customer_id %}">{{ row.item.customer.name_family }}</a>
            {% else %}—{% endif %}
          </td>
          <td>
            {% if row.item.customer_id %}
            <a class="button is-small is-light"
               href="{% url 'admin_panel:customerSmsHistory' row.item.customer_id %}"
               title="مشاهدهٔ سوابق پیامک این مشتری">سوابق پیامک</a>
            {% else %}—{% endif %}
          </td>
          <td class="has-text-centered">
            <span class="tag {% if row.parts > 1 %}is-danger{% else %}is-success{% endif %} is-light"
                  title="{{ row.encoding }} · {{ row.length }} واحد">{{ row.parts }}</span>
          </td>
          <td>{{ row.item.get_status_display }}</td>
          <td>{{ row.item.get_delivery_status_display|default:'—' }}</td>
          <td>{{ row.item.created_at|toJalaliDT }}</td>
          <td>{{ row.item.sent_at|toJalaliDT|default:'—' }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="11" class="has-text-centered">پیامکی با این شرایط یافت نشد.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if page.has_other_pages %}
  <nav class="pagination is-centered" role="navigation" aria-label="pagination">
    {% if page.has_previous %}
    <a class="pagination-previous" href="?{{ base_query }}&page={{ page.previous_page_number }}">قبلی</a>
    {% else %}<a class="pagination-previous" disabled>قبلی</a>{% endif %}
    {% if page.has_next %}
    <a class="pagination-next" href="?{{ base_query }}&page={{ page.next_page_number }}">بعدی</a>
    {% else %}<a class="pagination-next" disabled>بعدی</a>{% endif %}
    <ul class="pagination-list">
      <li><span class="pagination-link">صفحهٔ {{ page.number }} از {{ page.paginator.num_pages }}</span></li>
    </ul>
  </nav>
  {% endif %}
</div>
{% endblock %}

{% block cssEnd %}
<style>
  /* متن پیامک با حفظ شکست خطوط و شکستن متن‌های طولانی/بدون‌فاصله */
  .smsrep-msg { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 26rem; line-height: 1.9; }
</style>
{% endblock %}

{% block jsEnd %}
<script>
  (function () {
    if (typeof kamaDatepicker !== 'function') { return; }
    var opts = { buttonsColor: "red", forceFarsiDigits: true, sync: true };
    ['dateFromP', 'dateToP'].forEach(function (id) {
      if (document.getElementById(id)) { kamaDatepicker(id, opts); }
    });
  })();
</script>
{% endblock %}