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

{% 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" id="sort-select">

          {% for key, label in sorts %}
          <option
            value="{{ key }}"
            {% if key == selected_sort %}selected{% endif %}>
            {{ label }}
          </option>
          {% endfor %}

          <!-- گزینه جدید: مرتب سازی بر اساس کد مشتری -->
          <option
            value="customer_code"
            {% if selected_sort == "customer_code" %}selected{% endif %}>
            بر اساس کد مشتری
          </option>

        </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" id="customers-table">

          <thead>
            <tr>
              <th>کد</th>
              <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="شماره موبایل">

                {% if c.mobile_phone %}

                <a
                  href="tel:{{ c.mobile_phone }}"
                  onclick="event.stopPropagation()"
                  style="text-decoration:none;">

                  {{ c.mobile_phone }}

                </a>

                {% else %}

                -

                {% endif %}

              </td>


              <!-- شماره ثابت -->
              <td data-label="شماره ثابت">

                {% if c.landline_phone %}

                <a
                  href="tel:{{ c.landline_phone }}"
                  onclick="event.stopPropagation()"
                  style="text-decoration:none;">

                  {{ c.landline_phone }}

                </a>

                {% else %}

                -

                {% endif %}

              </td>


              <!-- وزن خرید -->
              <td data-label="وزن خرید (گرم)">
                {{ c.computed_total_weight|grams }}
              </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="11"
                style="text-align:center; padding:30px;">
                مشتری‌ای یافت نشد
              </td>
            </tr>

            {% endfor %}

          </tbody>

        </table>

      </div>


      <!-- =========================
           حالت کارت
           ========================= -->

      <div
        class="card-list"
        data-view-target="mainList"
        id="customers-card-list">

        {% 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 "بدون شهر" }}

              ·

              موبایل:

              {% if c.mobile_phone %}
              <a
                href="tel:{{ c.mobile_phone }}"
                onclick="event.stopPropagation()"
                style="text-decoration:none;">
                {{ c.mobile_phone }}
              </a>
              {% else %}
              -
              {% endif %}

              ·

              ثابت:

              {% if c.landline_phone %}
              <a
                href="tel:{{ c.landline_phone }}"
                onclick="event.stopPropagation()"
                style="text-decoration:none;">
                {{ c.landline_phone }}
              </a>
              {% else %}
              -
              {% endif %}

            </div>

          </div>


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

            <div class="record-card-value">
              {{ c.computed_total_weight|grams }} گرم
            </div>

            <div class="record-card-value2">
              {{ dict(statuses).get(c.status, c.status or "-") }}
              ·
              {{ c.rating or "-" }}
            </div>


            {% if c.mobile_phone or c.landline_phone %}

            <div style="display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;">

              {% if c.mobile_phone %}

              <a
                href="tel:{{ c.mobile_phone }}"
                onclick="event.stopPropagation()"
                class="btn btn-gold"
                style="padding:5px 10px; font-size:12px; text-decoration:none;">
                📱 موبایل
              </a>

              {% endif %}


              {% if c.landline_phone %}

              <a
                href="tel:{{ c.landline_phone }}"
                onclick="event.stopPropagation()"
                class="btn btn-gold"
                style="padding:5px 10px; font-size:12px; text-decoration:none;">
                ☎️ ثابت
              </a>

              {% endif %}

            </div>

            {% endif %}

          </div>

        </div>

        {% else %}

        <div class="record-card-empty">
          مشتری‌ای یافت نشد
        </div>

        {% endfor %}

      </div>


      <!-- =========================
           نمایش تمامی مشتریان
           ========================= -->

      {{ show_all_bar(customers|length, total) }}

    </div>

  </div>

</form>


<!-- =========================================================
     مرتب سازی بر اساس کد مشتری
     بدون نیاز به تغییر فایل Python
     ========================================================= -->

<script>
document.addEventListener("DOMContentLoaded", function () {

  const sortSelect = document.getElementById("sort-select");

  if (!sortSelect) {
    return;
  }


  function normalizeCode(value) {

    if (!value) {
      return "";
    }

    value = String(value).trim();

    // تبدیل اعداد فارسی و عربی به انگلیسی
    const persianDigits = "۰۱۲۳۴۵۶۷۸۹";
    const arabicDigits  = "٠١٢٣٤٥٦٧٨٩";

    value = value.replace(/[۰-۹]/g, function (char) {
      return persianDigits.indexOf(char);
    });

    value = value.replace(/[٠-٩]/g, function (char) {
      return arabicDigits.indexOf(char);
    });

    return value;
  }


  function sortCustomersByCode() {

    const table = document.getElementById("customers-table");

    if (!table) {
      return;
    }

    const tbody = table.querySelector("tbody");

    if (!tbody) {
      return;
    }


    const rows = Array.from(
      tbody.querySelectorAll("tr")
    );


    // ردیف "مشتری‌ای یافت نشد" را مرتب نکن
    const customerRows = rows.filter(function (row) {
      return row.querySelectorAll("td").length === 11;
    });


    customerRows.sort(function (a, b) {

      const aCell = a.querySelector("td:first-child");
      const bCell = b.querySelector("td:first-child");

      if (!aCell || !bCell) {
        return 0;
      }

      const aCode = normalizeCode(aCell.textContent);
      const bCode = normalizeCode(bCell.textContent);


      // اگر کد کاملاً عددی باشد
      const aNumber = parseInt(
        aCode.replace(/[^\d]/g, ""),
        10
      );

      const bNumber = parseInt(
        bCode.replace(/[^\d]/g, ""),
        10
      );


      if (!isNaN(aNumber) && !isNaN(bNumber)) {

        if (aNumber < bNumber) return -1;
        if (aNumber > bNumber) return 1;

      }


      // در غیر این صورت مرتب سازی متنی
      return aCode.localeCompare(
        bCode,
        "fa",
        {
          numeric: true,
          sensitivity: "base"
        }
      );

    });


    customerRows.forEach(function (row) {
      tbody.appendChild(row);
    });


    // مرتب سازی حالت کارت هم بر اساس نام/کد انجام نمی‌شود
    // چون کد در کارت نمایش داده نشده است.
  }


  // اگر از URL با sort=customer_code وارد شده باشیم
  const urlParams = new URLSearchParams(
    window.location.search
  );

  if (
    urlParams.get("sort") === "customer_code"
  ) {

    sortCustomersByCode();

  }


  // هنگام انتخاب "بر اساس کد مشتری"
  sortSelect.addEventListener("change", function () {

    if (this.value === "customer_code") {

      /*
       * مقدار را در URL نگه می‌داریم تا بعد از Submit
       * دوباره JavaScript بتواند مرتب سازی را انجام دهد.
       */

      const form = document.getElementById("filter-form");

      if (form) {

        form.addEventListener(
          "submit",
          function () {

            /*
             * هیچ تغییری در سایر فیلترها ایجاد نمی‌کنیم.
             * فقط sort=customer_code توسط فرم ارسال می‌شود.
             */

          },
          {
            once: true
          }
        );

      }

    }

  });

});
</script>

{% endblock %}