{% 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-gold" href="{{ url_for('calls.new') }}">📞 ثبت تماس جدید</a>
</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="salesperson_id">
        <option value="">همه فروشنده‌ها</option>
        {% for u in salespeople %}<option value="{{ u.id }}" {% if u.id == selected_salesperson %}selected{% endif %}>{{ u.full_name }}</option>{% endfor %}
      </select>
    </div>
    <div class="filter-field">
      <label>وضعیت پاسخ (آخرین تماس)</label>
      <select name="answered">
        <option value="">همه</option>
        <option value="1" {% if selected_answered == "1" %}selected{% endif %}>بله</option>
        <option value="0" {% if selected_answered == "0" %}selected{% endif %}>خیر</option>
      </select>
    </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="{{ date_to }}">
        <input type="text" name="date_from" placeholder="از" data-jalali-picker="1" value="{{ date_from }}">
      </div>
    </div>
    <div class="filter-actions">
      <button type="submit" class="btn btn-gold">✓ اعمال فیلتر</button>
      <a href="{{ url_for('calls.index') }}" 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></tr></thead>
      <tbody>
        {% for customer, call_id, call_date, salesperson_id, answered, result_text in rows %}
        <tr onclick="location.href='{{ url_for('calls.detail', call_id=call_id) if call_id else url_for('calls.new', customer_id=customer.id) }}'" style="cursor:pointer;">
          <td data-label="مشتری">{{ customer.first_name }} {{ customer.last_name }}</td>
          <td data-label="آخرین تماس">{{ jalali.to_jalali_str(call_date, with_time=true) if call_date else "هنوز تماس نگرفته" }}</td>
          <td data-label="فروشنده">{{ salespeople_by_id.get(salesperson_id, "-") }}</td>
          <td data-label="پاسخ داده شد؟">{{ "بله" if answered == true else ("خیر" if answered == false else "-") }}</td>
          <td data-label="نتیجه">{{ (result_text or "-")[:60] }}</td>
        </tr>
        {% else %}
        <tr><td colspan="5" style="text-align:center; padding:30px;">مشتری‌ای یافت نشد</td></tr>
        {% endfor %}
      </tbody>
    </table>
    </div>

    <div class="card-list" data-view-target="mainList">
      {% for customer, call_id, call_date, salesperson_id, answered, result_text in rows %}
      <div class="record-card" onclick="location.href='{{ url_for('calls.detail', call_id=call_id) if call_id else url_for('calls.new', customer_id=customer.id) }}'">
        <div class="record-card-main">
          <div class="record-card-title">{{ customer.first_name }} {{ customer.last_name }}</div>
          <div class="record-card-sub">{{ jalali.to_jalali_str(call_date, with_time=true) if call_date else "هنوز تماس نگرفته" }} · {{ salespeople_by_id.get(salesperson_id, "-") }}</div>
        </div>
        <div class="record-card-meta">
          <div class="record-card-value">{{ "بله" if answered == true else ("خیر" if answered == false else "-") }}</div>
        </div>
      </div>
      {% else %}
      <div class="record-card-empty">مشتری‌ای یافت نشد</div>
      {% endfor %}
    </div>
  </div>
</div>
</form>
{% endblock %}