{% extends "base.html" %}
{% from "partials/_view_toggle.html" import view_toggle %}
{% block title %}تسک — {{ category.title }} — {{ APP_NAME }}{% endblock %}
{% block content %}
<div class="page-header">
  <a class="btn btn-ghost back-btn" href="{{ url_for('tasks.index') }}">‹ بازگشت</a>
  <h1 class="title">تسک — {{ category.title }}</h1>
</div>

<form method="get">
<input type="search" name="q" class="search-bar" placeholder="جستجو در این لیست..." value="{{ q }}">
<button type="button" class="btn btn-ghost filter-toggle" onclick="document.querySelector('.filter-col').classList.toggle('open')">فیلترها</button>

<div class="two-col" style="margin-top:16px;">
  <div class="filter-col floating-surface filter-panel">
    <div class="subtitle">فیلتر</div>
    <hr class="divider">
    <div class="filter-field">
      <label>شهر</label>
      <select name="city">
        <option value="">همه شهرها</option>
        {% for c in cities %}<option value="{{ c }}" {% if c == selected_city %}selected{% endif %}>{{ c }}</option>{% endfor %}
      </select>
    </div>
    <div class="filter-actions">
      <button type="submit" class="btn btn-gold">✓ اعمال فیلتر</button>
      <a href="{{ url_for('tasks.result', key=category.key) }}" class="btn btn-danger">✕ حذف فیلتر</a>
    </div>
  </div>

  <div class="main-col">
    {{ view_toggle('mainList') }}

    <div class="data-table-wrap" data-view-target="mainList">
    <table class="data-table">
      <thead><tr><th>نام</th><th>نام خانوادگی</th><th>شهر</th><th>شماره تماس</th><th>مجموع خرید</th><th>آخرین تماس</th><th>تماس بعدی</th></tr></thead>
      <tbody>
        {% for c in rows %}
        <tr onclick="location.href='{{ url_for('customer_profile.show', customer_id=c.id) }}'" style="cursor:pointer;">
          <td data-label="نام">{{ c.first_name }}</td>
          <td data-label="نام خانوادگی">{{ c.last_name }}</td>
          <td data-label="شهر">{{ c.city or "-" }}</td>
          <td data-label="شماره تماس">{{ c.mobile_phone or "-" }}</td>
          <td data-label="مجموع خرید">{{ "{:,.0f}".format(c.computed_total_amount) }}</td>
          <td data-label="آخرین تماس">{{ jalali.to_jalali_str(c.computed_last_call_date) if c.computed_last_call_date else "-" }}</td>
          <td data-label="تماس بعدی">{{ jalali.to_jalali_str(c.next_call_date) if c.next_call_date else "-" }}</td>
        </tr>
        {% else %}
        <tr><td colspan="7" style="text-align:center; padding:30px;">موردی یافت نشد</td></tr>
        {% endfor %}
      </tbody>
    </table>
    </div>

    <div class="card-list" data-view-target="mainList">
      {% for c in rows %}
      <div class="record-card" onclick="location.href='{{ url_for('customer_profile.show', customer_id=c.id) }}'">
        <div class="record-card-main">
          <div class="record-card-title">{{ c.first_name }} {{ c.last_name }}</div>
          <div class="record-card-sub">{{ c.city or "بدون شهر" }} · {{ c.mobile_phone or "بدون شماره" }}</div>
        </div>
        <div class="record-card-meta">
          <div class="record-card-value">{{ "{:,.0f}".format(c.computed_total_amount) }} ت</div>
          <div class="record-card-value2">آخرین تماس: {{ jalali.to_jalali_str(c.computed_last_call_date) if c.computed_last_call_date else "-" }}</div>
        </div>
      </div>
      {% else %}
      <div class="record-card-empty">موردی یافت نشد</div>
      {% endfor %}
    </div>
  </div>
</div>
</form>
{% endblock %}