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

{% 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" action="{{ url_for('reports.calls') }}">

  <!-- ======================================================
       جستجو
  ======================================================= -->

  <input
    type="search"
    name="q"
    class="search-bar"
    placeholder="جستجو بر اساس نام یا شماره مشتری ..."
    value="{{ args.get("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>

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

        <select name="answered">

          <option
            value=""
            {% if not 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>

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

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

      </div>


      <!-- ==================================================
           دکمه‌های فیلتر
      =================================================== -->

      <div class="filter-actions">

        <button
          type="submit"
          class="btn btn-gold">

          ✓ اعمال فیلتر

        </button>


        <a
          href="{{ url_for('reports.calls') }}"
          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 c in calls %}


            <tr
              onclick="location.href='{{ url_for('calls.detail', call_id=c.id) }}'"
              style="cursor:pointer;">


              <td data-label="مشتری">

                {{ c.customer.first_name }}
                {{ c.customer.last_name }}

              </td>


              <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 "-")[: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 c in calls %}


        <div
          class="record-card"
          onclick="location.href='{{ url_for('calls.detail', call_id=c.id) }}'">


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


    </div>

  </div>

</form>

{% endblock %}