{% extends "base.html" %}
{% from "partials/_tag_picker.html" import tag_picker %}
{% from "partials/_view_toggle.html" import view_toggle %}
{% from "partials/_show_all.html" import show_all_bar with context %}
{% block title %}گزارشات — {{ APP_NAME }}{% endblock %}
{% block content %}
{% set can_open_profile = "customer_profile" in allowed_page_keys() %}
{# کل query string (همه‌ی شهرها/تگ‌های انتخاب‌شده) به لینک خروجی منتقل می‌شه، نه فقط مقدار اول هر فیلتر #}
{% set export_query = ("?" ~ request.query_string.decode()) if request.query_string else "" %}
<div class="page-header">
  <a class="btn btn-ghost back-btn" href="{{ url_for('dashboard.index') }}">‹ بازگشت</a>
  <h1 class="title">گزارشات</h1>
  <div class="spacer"></div>
  <a class="btn btn-ghost" href="{{ url_for('reports.customers') }}">مشتری‌ها</a>
  <a class="btn btn-ghost" href="{{ url_for('reports.salespeople') }}">فروشنده‌ها</a>
  <a class="btn btn-ghost" href="{{ url_for('reports.calls') }}">📞 تماس‌ها</a>

</div>

<form method="get" action="{{ url_for('reports.customers') }}">
<button type="button" class="btn btn-ghost filter-toggle" onclick="document.querySelector('.filter-col').classList.toggle('open')">فیلترها</button>
<div class="two-col">
  <div class="filter-col floating-surface filter-panel" style="max-height:80vh; overflow-y:auto;">
    <div class="subtitle">فیلترها</div>
    <hr class="divider">

    <div class="filter-field">
      <label>شهر</label>
      <div style="max-height:120px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;">
        {% for c in cities %}
        <label style="display:flex; align-items:center; gap:6px; font-size:13px;">
          <input type="checkbox" name="cities" value="{{ c }}" {% if c in args.getlist('cities') %}checked{% endif %}> {{ c }}
        </label>
        {% endfor %}
      </div>
    </div>

    <div class="filter-field">
      <label>تگ‌ها</label>
      {{ tag_picker(tag_groups, args.getlist('tag_ids'), "reportsTagPicker", title="فیلتر بر اساس تگ") }}
    </div>

    <div class="filter-field">
      <label>بازه وزن کل خرید (گرم)</label>
      <div style="display:flex; gap:8px;">
        <input type="number" step="0.001" name="max_weight" placeholder="حداکثر" value="{{ args.get('max_weight', '') }}">
        <input type="number" step="0.001" name="min_weight" placeholder="حداقل" value="{{ args.get('min_weight', '') }}">
      </div>
    </div>

    <div class="filter-field">
      <label>بازه تاریخ خرید (شمسی)</label>
      <div style="display:flex; gap:8px;">
        <input type="text" name="date_to" placeholder="تا" data-jalali-picker="1" value="{{ args.get('date_to', '') }}">
        <input type="text" name="date_from" placeholder="از" data-jalali-picker="1" value="{{ args.get('date_from', '') }}">
      </div>
      <span class="muted">با انتخاب بازه، فقط مشتری‌هایی که در این بازه خرید داشتن نمایش داده می‌شن.</span>
    </div>

    <div class="filter-field">
      <label>حالت زمانی (همراه با بازه تاریخ)</label>
      <label style="display:flex; align-items:center; gap:6px; font-size:13px;"><input type="radio" name="time_mode" value="none" {% if args.get('time_mode','none')=='none' %}checked{% endif %}> بدون حالت خاص</label>
      <label style="display:flex; align-items:center; gap:6px; font-size:13px;"><input type="radio" name="time_mode" value="sleeping" {% if args.get('time_mode')=='sleeping' %}checked{% endif %}> مشتری خوابیده (همه‌ی مشتری‌ها، کمترین خرید در بازه اول)</label>
      <label style="display:flex; align-items:center; gap:6px; font-size:13px;"><input type="radio" name="time_mode" value="active" {% if args.get('time_mode')=='active' %}checked{% endif %}> فعال‌ترین مشتری‌ها (بیشترین خرید در بازه اول)</label>
    </div>

    <div class="filter-field">
      <label>مرتب‌سازی</label>
      {% set current_sort = {"amount_desc": "weight_desc", "amount_asc": "weight_asc"}.get(args.get('sort', 'weight_desc'), args.get('sort', 'weight_desc')) %}
      <select name="sort">
        <option value="weight_desc" {% if current_sort=='weight_desc' %}selected{% endif %}>بیشترین خرید (وزن)</option>
        <option value="weight_asc" {% if current_sort=='weight_asc' %}selected{% endif %}>کمترین خرید (وزن)</option>
        <option value="name" {% if current_sort=='name' %}selected{% endif %}>نام (الفبا)</option>
      </select>
    </div>

    <div class="filter-actions">
      <button type="submit" class="btn btn-gold">✓ اعمال فیلتر و پیش‌نمایش</button>
      <a href="{{ url_for('reports.customers') }}" class="btn btn-danger">✕ حذف فیلتر</a>
    </div>
  </div>

  <div class="main-col">
    <p class="subtitle">{{ jalali.to_fa_digits(total) }} مشتری یافت شد</p>
    <div style="display:flex; gap:10px; margin-bottom:10px;">
      <a class="btn btn-ghost" href="{{ url_for('reports.customers_export', fmt='xlsx') }}{{ export_query }}">📊 خروجی Excel</a>
      <a class="btn btn-ghost" href="{{ url_for('reports.customers_export', fmt='pdf') }}{{ export_query }}">📄 خروجی PDF</a>
    </div>
    {{ 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>{% if has_range %}<th>خرید در بازه (گرم)</th>{% endif %}<th>رتبه</th></tr></thead>
      <tbody>
        {% for r in rows %}
        <tr {% if can_open_profile %}onclick="location.href='{{ url_for('customer_profile.show', customer_id=r.customer.id) }}'" style="cursor:pointer;"{% endif %}>
          <td data-label="نام">{{ r.customer.first_name }}</td>
          <td data-label="نام خانوادگی">{{ r.customer.last_name }}</td>
          <td data-label="شهر">{{ r.customer.city or "-" }}</td>
          <td data-label="شماره تماس">{{ r.customer.mobile_phone or "-" }}</td>
          <td data-label="وزن خرید (گرم)">{{ r.total_weight|grams }}</td>
          <td data-label="تعداد خرید">{{ r.purchase_count }}</td>
          {% if has_range %}<td data-label="خرید در بازه (گرم)">{{ r.range_weight|grams }}</td>{% endif %}
          <td data-label="رتبه">{{ r.customer.rating or "-" }}</td>
        </tr>
        {% else %}
        <tr><td colspan="{{ 8 if has_range else 7 }}" style="text-align:center; padding:30px;">مشتری‌ای یافت نشد</td></tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    <div class="card-list" data-view-target="mainList">
      {% for r in rows %}
      <div class="record-card" {% if can_open_profile %}onclick="location.href='{{ url_for('customer_profile.show', customer_id=r.customer.id) }}'"{% else %}style="cursor:default;"{% endif %}>
        <div class="record-card-main">
          <div class="record-card-title">{{ r.customer.first_name }} {{ r.customer.last_name }}</div>
          <div class="record-card-sub">{{ r.customer.city or "بدون شهر" }} · {{ r.customer.mobile_phone or "بدون شماره" }}</div>
        </div>
        <div class="record-card-meta">
          <div class="record-card-value">{{ r.total_weight|grams }} گرم</div>
          <div class="record-card-value2">{{ r.purchase_count }} خرید{% if has_range %} · در بازه: {{ r.range_weight|grams }} گرم{% endif %}</div>
        </div>
      </div>
      {% else %}
      <div class="record-card-empty">مشتری‌ای یافت نشد</div>
      {% endfor %}
    </div>

    {{ show_all_bar(rows|length, total) }}
  </div>
</div>
</form>
{% endblock %}