{% extends "base.html" %}
{% from "partials/_tag_picker.html" import tag_picker %}
{% block title %}پرونده مشتری — {{ customer.first_name }} {{ customer.last_name }} — {{ APP_NAME }}{% endblock %}
{% block content %}
<div class="page-header no-print">
  <a class="btn btn-ghost back-btn" href="{{ url_for('dashboard.index') }}">‹ بازگشت</a>
  <h1 class="title">پرونده مشتری — {{ customer.first_name }} {{ customer.last_name }}</h1>
  <div class="spacer"></div>
  <a class="btn btn-gold" href="{{ url_for('customer_account.edit', customer_id=customer.id) }}">✎ ویرایش</a>
  {% if "customer_profile" in allowed_page_keys() %}
  <a class="btn btn-ghost" href="{{ url_for('customer_profile.weight_history', customer_id=customer.id) }}">⚖️ تاریخچه وزن</a>
  {% endif %}
  <a class="btn btn-ghost" href="{{ url_for('customer_profile.print_view', customer_id=customer.id) }}" target="_blank">🖨 پرینت</a>
</div>

<div class="page-body">
  <div class="profile-header-row">
    {% if has_photo %}
    <img id="PhotoFrame" src="{{ url_for('customer_profile.photo', customer_id=customer.id) }}"
         class="profile-photo" style="object-fit:cover;">
    {% else %}
    <div class="profile-photo glass-card" style="display:flex; align-items:center; justify-content:center; font-size:46px;">👤</div>
    {% endif %}

    <div class="glass-panel form-grid" style="flex:1; padding:18px 22px; min-width:0;">
      <div><span class="field-label">نام کامل</span><div class="field-value">{{ customer.first_name }} {{ customer.last_name }}</div></div>
      <div><span class="field-label">شهر</span><div class="field-value">{{ customer.city or "-" }}</div></div>
      <div><span class="field-label">تلفن ثابت</span><div class="field-value">{{ customer.landline_phone or "-" }}</div></div>
      <div><span class="field-label">شماره موبایل</span><div class="field-value">{{ customer.mobile_phone or "-" }}</div></div>
      <div><span class="field-label">جنسیت</span><div class="field-value">{{ gender_fa.get(customer.gender, "-") }}</div></div>
      <div><span class="field-label">تاریخ تولد</span><div class="field-value">{{ jalali.to_jalali_str(customer.birth_date) if customer.birth_date else "-" }}</div></div>
      <div><span class="field-label">تاریخ عضویت</span><div class="field-value">{{ jalali.to_jalali_str(customer.joined_at, with_time=true) }}</div></div>
      <div><span class="field-label">معرف</span><div class="field-value">{{ (referrer.first_name + " " + referrer.last_name) if referrer else (customer.referrer_text or "-") }}</div></div>
      <div><span class="field-label">کد مشتری</span><div class="field-value">{{ customer.customer_code or "-" }}</div></div>
      <div><span class="field-label">اینستاگرام</span><div class="field-value">{{ customer.instagram_id or "-" }}</div></div>
      <div><span class="field-label">نحوه آشنایی</span><div class="field-value">{{ customer.how_found or "-" }}</div></div>
      <div><span class="field-label">آدرس</span><div class="field-value">{{ customer.address or "-" }}</div></div>
    </div>
  </div>

  <div class="glass-panel" style="padding:16px 22px;">
    <span class="field-label">توضیحات</span>
    <div class="field-value">{{ customer.description or "-" }}</div>
  </div>

  <div class="stats-row">
    <div class="glass-card stat-card"><span class="muted">وزن خرید (گرم)</span><span class="stat-value" data-color="gold">{{ "{:,.2f}".format(customer.computed_total_weight) }}</span></div>
    <div class="glass-card stat-card"><span class="muted">رتبه مشتری</span><span class="stat-value" data-color="gold">{{ customer.rating or "-" }}</span></div>
    <div class="glass-card stat-card"><span class="muted">وضعیت</span><span class="stat-value" data-color="info">{{ status_fa.get(customer.status, customer.status or "-") }}</span></div>
    <div class="glass-card stat-card"><span class="muted">اولین تماس</span><span class="stat-value" data-color="purple">{{ jalali.to_jalali_str(customer.computed_first_call_date) if customer.computed_first_call_date else "-" }}</span></div>
    <div class="glass-card stat-card"><span class="muted">آخرین تماس</span><span class="stat-value" data-color="pink">{{ jalali.to_jalali_str(customer.computed_last_call_date) if customer.computed_last_call_date else "-" }}</span></div>
    <div class="glass-card stat-card"><span class="muted">تماس بعدی</span><span class="stat-value" data-color="info">{{ jalali.to_jalali_str(customer.next_call_date) if customer.next_call_date else "-" }}</span></div>
  </div>

  <div class="no-print" style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
    <span class="field-value">ثبت رتبه دستی:</span>
    {% for r in ratings %}
    <form method="post" action="{{ url_for('customer_profile.set_rating', customer_id=customer.id) }}" style="display:inline;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="rating" value="{{ r }}">
      <button type="submit" class="btn {{ 'btn-gold' if r == customer.rating else 'btn-ghost' }}" style="width:46px; padding:6px;">{{ r }}</button>
    </form>
    {% endfor %}
  </div>

  <div class="no-print glass-panel" style="padding:14px 22px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
    <span class="field-value" style="flex-shrink:0;">📅 تماس بعدی:</span>
    <form method="post" action="{{ url_for('customer_profile.set_next_call_date', customer_id=customer.id) }}"
          style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="text" name="next_call_date" placeholder="برای انتخاب تاریخ کلیک کنید" data-jalali-picker="1"
             value="{{ jalali.to_jalali_str(customer.next_call_date) if customer.next_call_date else '' }}" style="width:150px;">
      <button type="submit" class="btn btn-gold">✓ ثبت</button>
      {% if customer.next_call_date %}
      <button type="submit" name="clear" value="1" class="btn btn-danger" formnovalidate>✕ پاک کردن</button>
      {% endif %}
    </form>
  </div>

  <div class="glass-panel" style="padding:16px 22px;">
    <div style="display:flex; align-items:center; gap:10px;">
      <span class="subtitle">تگ‌های ثبت‌شده</span>
      <div class="spacer"></div>
      <div class="no-print">
        {{ tag_picker(all_tag_groups, tag_service_current_ids|map('string')|list, "customerTagPicker",
                       title="انتخاب تگ‌های مشتری", trigger_label="✎ ویرایش تگ‌ها",
                       form_action=url_for('customer_profile.set_tags', customer_id=customer.id)) }}
      </div>
    </div>
    <div style="display:flex; flex-direction:column; gap:8px; margin-top:10px;">
      {% for category, tags in tags_grouped.items() %}
      <div style="display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;">
        <span class="field-label" style="width:120px; flex-shrink:0;">{{ category }}:</span>
        {% for t in tags %}<span class="tag-chip">{{ t }}</span>{% endfor %}
      </div>
      {% else %}
      <span class="muted">هنوز تگی برای این مشتری ثبت نشده است.</span>
      {% endfor %}
    </div>
  </div>

  <div class="page-header no-print" style="margin:0;">
    <span class="subtitle">تاریخچه تماس‌ها</span>
    <div class="spacer"></div>
    {% if "calls" in allowed_page_keys() %}
    <a class="btn btn-gold" href="{{ url_for('calls.new', customer_id=customer.id) }}">📞 ثبت تماس جدید</a>
    {% endif %}
  </div>

  <table class="data-table">
    <thead><tr><th>تاریخ تماس</th><th>فروشنده</th><th>پاسخ داده شد؟</th><th>نتیجه</th></tr></thead>
    <tbody>
      {% for c in calls %}
      {% if "calls" in allowed_page_keys() %}
      <tr onclick="location.href='{{ url_for('calls.detail', call_id=c.id) }}'" style="cursor:pointer;">
      {% else %}
      <tr>
      {% endif %}
        <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="پاسخ داده شد؟">{{ "بله" if c.answered == true else ("خیر" if c.answered == false else "-") }}</td>
        <td data-label="نتیجه">{{ c.result_text or "-" }}</td>
      </tr>
      {% else %}
      <tr><td colspan="4" style="text-align:center; padding:20px;">هنوز تماسی ثبت نشده</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}