{% extends "base.html" %}
{% from "partials/_view_toggle.html" import view_toggle %}
{% from "partials/_tag_picker.html" import tag_picker %}
{% from "partials/_show_all.html" import show_all_bar with context %}

{% block title %}گزارشات — {{ APP_NAME }}{% endblock %}

{% block content %}

{# کل query string (همه‌ی فروشنده‌ها/تگ‌های انتخاب‌شده) به لینک خروجی منتقل می‌شه، نه فقط مقدار اول #}
{% set export_query = ("?" ~ request.query_string.decode()) if request.query_string else "" %}

<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>
  <a class="btn btn-ghost" href="{{ url_for('reports.calls') }}">📞 تماس‌ها</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>

        {{ tag_picker(
            tag_groups,
            args.getlist('tag_ids'),
            "callsReportTagPicker",
            title="فیلتر تماس‌ها بر اساس تگ",
            trigger_label="انتخاب تگ‌ها"
        ) }}

      </div>


      <!-- وضعیت پاسخ -->

      <div class="filter-field">

        <label>
          وضعیت پاسخ
        </label>

        <select name="answered">

          <option
            value=""
            {% if args.get('answered', '') == '' %}
              selected
            {% endif %}
          >
            همه
          </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>

        <a
          href="{{ url_for('reports.salespeople') }}"
          class="btn btn-danger"
        >
          ✕ حذف فیلتر
        </a>

      </div>

    </div>


    <!-- =========================
         نتایج
    ========================== -->

    <div class="main-col">

      <p class="subtitle">
        {{ jalali.to_fa_digits(total) }} تماس یافت شد
      </p>


      <!-- خروجی ها -->

      <div
        style="
          display:flex;
          gap:10px;
          margin-bottom:10px;
          flex-wrap:wrap;
        "
      >

        <a
          class="btn btn-ghost"
          href="{{ url_for(
              'reports.salespeople_export',
              fmt='xlsx'
          ) }}{{ export_query }}"
        >
          📊 خروجی Excel
        </a>

        <a
          class="btn btn-ghost"
          href="{{ url_for(
              'reports.salespeople_export',
              fmt='pdf'
          ) }}{{ export_query }}"
        >
          📄 خروجی 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 %}

            {% 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="مشتری">

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

            {% 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 c in calls %}

        <div
          class="record-card"

          {% if "calls" in allowed_page_keys() %}

          onclick="location.href='{{ url_for(
              'calls.detail',
              call_id=c.id
          ) }}'"

          {% endif %}
        >

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

        {% else %}

        <div class="record-card-empty">

          هیچ تماسی یافت نشد

        </div>

        {% endfor %}

      </div>


      {{ show_all_bar(calls|length, total, noun="تماس", button="نمایش تمامی تماس‌ها") }}

    </div>

  </div>

</form>

{% endblock %}