{% extends "base.html" %}
{% from "partials/_tag_picker.html" import tag_picker %}
{% from "partials/_view_toggle.html" import view_toggle %}
{% block title %}گزارشات — {{ APP_NAME }}{% endblock %}
{% block content %}
<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>
</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" name="max_amount" placeholder="حداکثر" value="{{ args.get('max_amount', '') }}">
        <input type="number" name="min_amount" placeholder="حداقل" value="{{ args.get('min_amount', '') }}">
      </div>
    </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>
      <div style="display:flex; gap:8px;">
        <input type="text" name="date_to" placeholder="تا" value="{{ args.get('date_to', '') }}">
        <input type="text" name="date_from" placeholder="از" value="{{ args.get('date_from', '') }}">
      </div>
    </div>

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

    <div class="filter-actions">
      <button type="submit" class="btn btn-gold">✓ اعمال فیلتر و پیش‌نمایش</button>
    </div>
  </div>

  <div class="main-col">
    {% if rows is not none %}
    <p class="subtitle">{{ rows|length }} مشتری یافت شد</p>
    <div style="display:flex; gap:10px; margin-bottom:10px;">
      <a class="btn btn-ghost" href="{{ url_for('reports.customers_export', fmt='xlsx', **request.args) }}">📊 خروجی Excel</a>
      <a class="btn btn-ghost" href="{{ url_for('reports.customers_export', fmt='pdf', **request.args) }}">📄 خروجی 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><th>تعداد خرید</th><th>رتبه</th></tr></thead>
      <tbody>
        {% for r in rows %}
        <tr onclick="location.href='{{ url_for('customer_profile.show', customer_id=r.customer.id) }}'" style="cursor:pointer;">
          <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="مجموع خرید">{{ "{:,.0f}".format(r.total_amount) }}</td>
          <td data-label="وزن (گرم)">{{ "{:,.1f}".format(r.total_weight) }}</td>
          <td data-label="تعداد خرید">{{ r.purchase_count }}</td>
          <td data-label="رتبه">{{ r.customer.rating or "-" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    <div class="card-list" data-view-target="mainList">
      {% for r in rows %}
      <div class="record-card" onclick="location.href='{{ url_for('customer_profile.show', customer_id=r.customer.id) }}'">
        <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">{{ "{:,.0f}".format(r.total_amount) }} ت</div>
          <div class="record-card-value2">{{ "{:,.1f}".format(r.total_weight) }} گرم · {{ r.purchase_count }} خرید</div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="subtitle">برای مشاهده نتیجه، فیلترها را اعمال کنید.</p>
    {% endif %}
  </div>
</div>
</form>
{% endblock %}