{% extends "base.html" %}
{% from "tasks_board/_task_row.html" import task_row with context %}
{% from "tasks_board/_editor.html" import task_editor with context %}
{% from "partials/_show_all.html" import show_all_bar with context %}
{% block title %}{{ page_title }} — کارها — {{ APP_NAME }}{% endblock %}
{% block extra_css %}<link rel="stylesheet" href="{{ url_for('static', filename='css/todo.css') }}">{% endblock %}
{% block content %}

{% set route_args = {} %}
{% if folder %}{% set _ = route_args.update({"folder_id": folder.id}) %}{% else %}{% set _ = route_args.update({"key": view_key}) %}{% endif %}
{% if q %}{% set _ = route_args.update({"q": q}) %}{% endif %}

<div class="page-header">
  <a class="btn btn-ghost back-btn" href="{{ url_for('tasks_board.index') }}">‹ بازگشت</a>
  <h1 class="title">{{ page_title }}</h1>
  <div class="spacer"></div>
  <span class="muted">{{ jalali.to_fa_digits(total) }} تسک</span>
  {% if folder %}
  <button type="button" class="btn btn-ghost" onclick="document.getElementById('todoFolderSettings').showModal()">⚙ تنظیمات پوشه</button>
  {% endif %}
</div>

{% if page_hint %}<p class="muted todo-hint">{{ page_hint }}</p>{% endif %}

{% if folder and progress %}
{% set percent = (progress.done * 100 // progress.total) if progress.total else 0 %}
<div class="glass-card todo-folder-progress" data-color="{{ folder.color }}"
     data-complete="{{ '1' if progress.is_complete else '0' }}">
  <div class="todo-progress"><span style="width:{{ percent }}%"></span></div>
  <span class="muted">{{ jalali.to_fa_digits(progress.done) }} از {{ jalali.to_fa_digits(progress.total) }} تسک انجام شده
    {% if progress.is_complete %}— این پوشه تمام شد ✓{% endif %}</span>
</div>
{% endif %}

<form method="get">
  <input type="search" name="q" class="search-bar" value="{{ q }}" placeholder="جستجو در این لیست ...">
  {% if assignee_value %}<input type="hidden" name="assignee" value="{{ assignee_value }}">{% endif %}
</form>

<!-- ---------- فیلتر مسئول ---------- -->
<div class="todo-filters no-print">
  <a class="todo-filter{% if not assignee_value %} is-active{% endif %}" href="{{ url_for(request.endpoint, **route_args) }}">همه</a>
  <a class="todo-filter{% if assignee_value == 'me' %} is-active{% endif %}" href="{{ url_for(request.endpoint, assignee='me', **route_args) }}">مال من</a>
  {% for person in users %}
  <a class="todo-filter{% if assignee_value == person.id|string %} is-active{% endif %}"
     href="{{ url_for(request.endpoint, assignee=person.id, **route_args) }}">{{ person.full_name }}</a>
  {% endfor %}
</div>

{% if folder %}
<!-- ---------- افزودن گروهی مشتری ---------- -->
<details class="todo-bulk glass-card" {% if add_query %}open{% endif %}>
  <summary>👥 افزودن گروهی مشتری به این پوشه</summary>
  <form method="get" class="todo-row-fields">
    {% if assignee_value %}<input type="hidden" name="assignee" value="{{ assignee_value }}">{% endif %}
    {% if q %}<input type="hidden" name="q" value="{{ q }}">{% endif %}
    <input type="search" name="add" value="{{ add_query }}" placeholder="نام، شماره یا کد مشتری ...">
    <button type="submit" class="btn btn-ghost">🔍 جستجو</button>
  </form>

  {% if add_results %}
  <form method="post" action="{{ url_for('tasks_board.bulk_add', folder_id=folder.id) }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="todo-bulk-list">
      {% for customer in add_results %}
      <label class="todo-bulk-item">
        <input type="checkbox" name="customer_ids" value="{{ customer.id }}">
        <span class="todo-bulk-name">{{ customer.full_name }}</span>
        <span class="muted">{{ customer.city or "-" }} · {{ customer.mobile_phone or customer.landline_phone or "بدون شماره" }}</span>
      </label>
      {% endfor %}
    </div>
    <div class="todo-row-fields">
      <input type="text" name="due_date" data-jalali-picker="1" placeholder="تاریخ سررسید همه (اختیاری)">
      <select name="assignee_id">
        <option value="">بدون مسئول</option>
        {% for person in users %}<option value="{{ person.id }}">{{ person.full_name }}</option>{% endfor %}
      </select>
      <button type="submit" class="btn btn-gold">✓ افزودن به پوشه</button>
    </div>
  </form>
  {% elif add_query %}
  <p class="muted">مشتری‌ای پیدا نشد.</p>
  {% endif %}
</details>
{% endif %}

<!-- ---------- لیست تسک‌ها ---------- -->
<div class="todo-list" id="todoList">
  {% for item in rows %}
  {{ task_row(item, today, show_folder=(folder is none)) }}
  {% else %}
  <div class="record-card-empty">
    {% if q %}تسکی با این جستجو پیدا نشد.{% else %}اینجا خالیه — با دکمه‌ی + تسک جدید بسازید.{% endif %}
  </div>
  {% endfor %}
</div>

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

{% if done_rows %}
<details class="todo-done-section">
  <summary>انجام‌شده ({{ jalali.to_fa_digits(done_total) }})</summary>
  <div class="todo-list">
    {% for item in done_rows %}{{ task_row(item, today, show_folder=false) }}{% endfor %}
  </div>
</details>
{% endif %}

{% if folder %}
<!-- ---------- تنظیمات پوشه ---------- -->
<dialog id="todoFolderSettings" class="todo-sheet todo-sheet-small" aria-labelledby="todoFolderSettingsTitle">
  <form method="post" action="{{ url_for('tasks_board.update_folder', folder_id=folder.id) }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="todo-sheet-head">
      <span class="subtitle" id="todoFolderSettingsTitle">تنظیمات پوشه</span>
      <button type="button" class="btn btn-ghost todo-icon-btn" aria-label="بستن"
              onclick="document.getElementById('todoFolderSettings').close()">✕</button>
    </div>
    <div class="todo-sheet-body">
      <div class="todo-field">
        <label class="field-label">نام پوشه</label>
        <input type="text" name="name" value="{{ folder.name }}" maxlength="120">
      </div>
      <div class="todo-field">
        <label class="field-label">رنگ</label>
        <select name="color">
          {% for key, label in folder_colors %}
          <option value="{{ key }}" {% if folder.color == key %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="todo-sheet-foot">
      <div class="todo-sheet-buttons">
        <button type="submit" class="btn btn-gold">✓ ذخیره</button>
        <button type="button" class="btn btn-ghost" onclick="document.getElementById('todoFolderSettings').close()">انصراف</button>
      </div>
    </div>
  </form>

  <div class="todo-sheet-foot todo-folder-danger">
    <form method="post" action="{{ url_for('tasks_board.update_folder', folder_id=folder.id) }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="is_archived" value="1">
      <button type="submit" class="btn btn-ghost">🗄 بایگانی پوشه</button>
    </form>
    {% if current_user.is_admin() %}
    <form method="post" action="{{ url_for('tasks_board.delete_folder', folder_id=folder.id) }}"
          data-confirm="پوشه «{{ folder.name }}» و همه‌ی تسک‌هایش برای همه‌ی کاربران حذف شود؟&#10;این کار برگشت‌پذیر نیست.">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-danger">🗑 حذف پوشه</button>
    </form>
    {% endif %}
  </div>
</dialog>
{% endif %}

{{ task_editor(folders, users, priorities, repeat_choices, quick_dates, current_folder_id=(folder.id if folder else None)) }}
{% endblock %}

{% block extra_js %}<script src="{{ url_for('static', filename='js/todo.js') }}"></script>{% endblock %}