{% extends "./customerBaseNew.html" %}
{% load custom_tags %}
{% load static %}

{% block BodyCustomer1 %}

<style>
  /* جدول سوابق پیامک مشتری */
  .smshist-msg {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 34rem;
    line-height: 1.9;
  }
  .smshist-meta { font-size: .78rem; line-height: 1.7; }
  .smshist-badge { white-space: nowrap; }
</style>

<div id="customerSmsHistory" class="column is-12-mobile is-12-desktop" dir="rtl">
  <h1 class="has-text-centered has-text-weight-bold mb-1">سوابق پیامک مشتری</h1>
  <p class="has-text-centered has-text-grey smshist-meta mb-3">
    همهٔ پیامک‌های ارسال‌شده برای شماره‌های این مشتری — جمعاً
    <strong>{{ total_count }}</strong> پیامک.
  </p>

  <form method="get" class="field is-grouped is-grouped-multiline mb-3">
    <div class="control">
      <div class="select">
        <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="control">
      <div class="select">
        <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="control"><button class="button is-link" type="submit">فیلتر</button></div>
    {% if status or delivery %}
    <div class="control">
      <a class="button is-light" href="{% url 'admin_panel:customerSmsHistory' customer.id %}">حذف فیلتر</a>
    </div>
    {% endif %}
  </form>

  {% if status or delivery %}
  <p class="mb-2 smshist-meta">نتایج فیلترشده: <strong>{{ filtered_count }}</strong> مورد</p>
  {% endif %}

  <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: 7rem;">نوع پیامک</th>
          <th style="min-width: 8rem;">شماره گیرنده</th>
          <th style="min-width: 18rem;">متن پیامک</th>
          <th>وضعیت ارسال</th>
          <th style="min-width: 8rem;">وضعیت تحویل</th>
          <th>تاریخ ایجاد</th>
          <th>تاریخ ارسال</th>
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        <tr>
          <td>{{ item.id }}</td>
          <td>{{ item.get_sms_type_display|default:'—' }}</td>
          <td dir="ltr">{{ item.phone_number }}</td>
          <td class="smshist-msg">{{ item.message }}</td>
          <td>
            <span class="tag smshist-badge
              {% if item.status == 'sent' %}is-success
              {% elif item.status == 'failed' %}is-danger
              {% elif item.status == 'pending' %}is-warning
              {% elif item.status == 'approved' %}is-info
              {% else %}is-light{% endif %}">
              {{ item.get_status_display }}
            </span>
            {% if item.last_error %}
            <div class="has-text-danger smshist-meta" title="{{ item.last_error }}">
              خطا: {{ item.last_error|truncatechars:80 }}
            </div>
            {% endif %}
          </td>
          <td>
            <span class="tag smshist-badge
              {% if item.delivery_status == 'delivered' %}is-success
              {% elif item.delivery_status == 'not_delivered' %}is-danger
              {% elif item.delivery_status == 'expired' %}is-danger
              {% elif item.delivery_status == 'pending' %}is-warning
              {% else %}is-light{% endif %}">
              {{ item.get_delivery_status_display|default:'بدون پیگیری' }}
            </span>
            {% if item.delivery_checked_at %}
            <div class="has-text-grey smshist-meta">استعلام: {{ item.delivery_checked_at|toJalaliDT }}</div>
            {% endif %}
          </td>
          <td class="smshist-meta">{{ item.created_at|toJalaliDT }}</td>
          <td class="smshist-meta">{{ item.sent_at|toJalaliDT|default:'—' }}</td>
        </tr>
        {% empty %}
        <tr><td colspan="8" class="has-text-centered">پیامکی برای این مشتری ثبت نشده است.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

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

{% endblock %}