{% 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>

  {% if "customer_account" in allowed_page_keys() %}
  <a class="btn btn-gold"
     href="{{ url_for('customer_account.edit', customer_id=customer.id) }}">
    ✎ ویرایش
  </a>
  {% endif %}

  {% 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>


    <!-- گزارش تماس -->

    <a class="btn btn-ghost"
       href="{{ url_for('calls.customer_calls_report', customer_id=customer.id) }}">
      📊 گزارش تماس
    </a>

    {% endif %}

  </div>


  <!-- ========================= -->
  <!-- جدول تماس‌ها -->
  <!-- ========================= -->

  <table class="data-table">

    <thead>

      <tr>

        <th>
          تاریخ تماس
        </th>

        <th>
          فروشنده
        </th>

        <th>
          پاسخ داده شد؟
        </th>

        <th>
          نتیجه
        </th>

        {% if current_user.is_authenticated and current_user.is_admin() %}

        <th>
          عملیات
        </th>

        {% endif %}

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


        <!-- حذف تماس فقط برای مدیر -->

        {% if current_user.is_authenticated and current_user.is_admin() %}

        <td data-label="عملیات"
            onclick="event.stopPropagation();">

          <form method="post"
                action="{{ url_for('calls.delete', call_id=c.id) }}"
                onsubmit="return confirm('آیا مطمئن هستید که می‌خواهید این تماس را حذف کنید؟');"
                style="margin:0;">

            <input type="hidden"
                   name="csrf_token"
                   value="{{ csrf_token() }}">

            <button type="submit"
                    class="btn btn-danger"
                    style="padding:6px 12px;">
              🗑 حذف تماس
            </button>

          </form>

        </td>

        {% endif %}


      </tr>


      {% else %}

      <tr>

        <td colspan="{% if current_user.is_authenticated and current_user.is_admin() %}5{% else %}4{% endif %}"
            style="text-align:center; padding:20px;">

          هنوز تماسی ثبت نشده

        </td>

      </tr>

      {% endfor %}

    </tbody>

  </table>

</div>

{% endblock %}