{% extends "base.html" %}
{% from "partials/_view_toggle.html" import view_toggle %}
{% block title %}صفحه اصلی — {{ APP_NAME }}{% endblock %}
{% block content %}
<div class="page-header">
  <span class="muted">{{ jalali.today_jalali_display() }}</span>
  <div class="spacer"></div>
  <div class="header-actions">
    {% if "reports" in allowed_page_keys() %}<a class="btn btn-ghost" href="{{ url_for('reports.index') }}">📊 گزارشات</a>{% endif %}
    {% if "customer_account" in allowed_page_keys() %}<a class="btn btn-gold" href="{{ url_for('customer_account.new') }}">👤 حساب مشتری</a>{% endif %}
    {% if "weight_management" in allowed_page_keys() %}<a class="btn btn-gold" href="{{ url_for('weight.search') }}">⚖️ مدیریت وزن</a>{% endif %}
    {% if "tasks" in allowed_page_keys() %}<a class="btn btn-ghost" href="{{ url_for('tasks.index') }}">📋 تسک</a>{% endif %}
  </div>
</div>

<form method="get" id="filter-form">
<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-field">
      <label>وضعیت</label>
      <select name="status">
        <option value="">همه</option>
        {% for key, label in statuses %}<option value="{{ key }}" {% if key == selected_status %}selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
    </div>

    <div class="filter-field">
      <label>رتبه مشتری</label>
      <select name="rating">
        <option value="">همه</option>
        {% for r in ratings %}<option value="{{ r }}" {% if r == selected_rating %}selected{% endif %}>{{ r }}</option>{% endfor %}
      </select>
    </div>

    <div class="filter-field">
      <label>مرتب‌سازی</label>
      <select name="sort">
        {% for key, label in sorts %}<option value="{{ key }}" {% if key == selected_sort %}selected{% endif %}>{{ label }}</option>{% endfor %}
      </select>
    </div>

    <div class="filter-actions">
      <button type="submit" class="btn btn-gold">✓ اعمال فیلتر</button>
      <a href="{{ url_for('dashboard.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>
          <th>مجموع خرید</th><th>وضعیت</th><th>رتبه</th><th>آخرین تماس</th><th>تاریخ عضویت</th>
        </tr>
      </thead>
      <tbody>
        {% for c in customers %}
        <tr onclick="location.href='{{ url_for('customer_profile.show', customer_id=c.id) }}'" style="cursor:pointer;">
          <td data-label="کد">{{ c.customer_code or c.id }}</td>
          <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="وضعیت">{{ dict(statuses).get(c.status, c.status or "-") }}</td>
          <td data-label="رتبه">{{ c.rating or "-" }}</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.joined_at) }}</td>
        </tr>
        {% else %}
        <tr><td colspan="10" style="text-align:center; padding:30px;">مشتری‌ای یافت نشد</td></tr>
        {% endfor %}
      </tbody>
    </table>
    </div>

    <div class="card-list" data-view-target="mainList">
      {% for c in customers %}
      <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">{{ dict(statuses).get(c.status, c.status or "-") }} · {{ c.rating or "-" }}</div>
        </div>
      </div>
      {% else %}
      <div class="record-card-empty">مشتری‌ای یافت نشد</div>
      {% endfor %}
    </div>
  </div>
</div>
</form>
{% endblock %}