{% extends "base.html" %}
{% 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.salespeople') }}">
<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">
    <div class="subtitle">فیلترها</div>
    <hr class="divider">

    <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>
    </div>

    <div class="filter-field">
      <label>فروشندگان</label>
      <div style="max-height:140px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;">
        {% for u in salespeople %}
        <label style="display:flex; align-items:center; gap:6px; font-size:13px;">
          <input type="checkbox" name="salesperson_ids" value="{{ u.id }}" {% if u.id|string in args.getlist('salesperson_ids') %}checked{% endif %}> {{ u.full_name }}
        </label>
        {% endfor %}
      </div>
    </div>

    <div class="filter-field">
      <label>وضعیت پاسخ</label>
      <select name="answered">
        <option value="">همه</option>
        <option value="1" {% if args.get('answered')=='1' %}selected{% endif %}>بله</option>
        <option value="0" {% if args.get('answered')=='0' %}selected{% endif %}>خیر</option>
      </select>
    </div>

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

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

  <div class="main-col">
    {% if calls is not none %}
    <p class="subtitle">{{ calls|length }} تماس یافت شد</p>
    <div style="display:flex; gap:10px; margin-bottom:10px;">
      <a class="btn btn-ghost" href="{{ url_for('reports.salespeople_export', fmt='xlsx', **request.args) }}">📊 خروجی Excel</a>
      <a class="btn btn-ghost" href="{{ url_for('reports.salespeople_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></tr></thead>
      <tbody>
        {% for c in calls %}
        <tr onclick="location.href='{{ url_for('calls.detail', call_id=c.id) }}'" style="cursor:pointer;">
          <td data-label="تاریخ">{{ jalali.to_jalali_str(c.call_date, with_time=true) }}</td>
          <td data-label="فروشنده">{{ c.salesperson.full_name if c.salesperson else "-" }}</td>
          <td data-label="مشتری">{{ c.customer.first_name }} {{ c.customer.last_name }}</td>
          <td data-label="پاسخ داده شد؟">{{ "بله" if c.answered == true else ("خیر" if c.answered == false else "-") }}</td>
          <td data-label="نتیجه">{{ (c.result_text or "-")[:50] }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    <div class="card-list" data-view-target="mainList">
      {% for c in calls %}
      <div class="record-card" onclick="location.href='{{ url_for('calls.detail', call_id=c.id) }}'">
        <div class="record-card-main">
          <div class="record-card-title">{{ c.customer.first_name }} {{ c.customer.last_name }}</div>
          <div class="record-card-sub">{{ jalali.to_jalali_str(c.call_date, with_time=true) }} · {{ c.salesperson.full_name if c.salesperson else "-" }}</div>
        </div>
        <div class="record-card-meta">
          <div class="record-card-value">{{ "بله" if c.answered == true else ("خیر" if c.answered == false else "-") }}</div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <p class="subtitle">برای مشاهده نتیجه، فیلترها را اعمال کنید.</p>
    {% endif %}
  </div>
</div>
</form>
{% endblock %}