{% extends "base.html" %}
{% now "Y-m-d" as today %}

{% block title %}Bảng Công Việc{% endblock %}
{% block content %}
{% now "d/m/Y" as today %}
<h2 class="text-center">📅 Hôm nay: {{ today }}</h2>
{% if employee.level >= 3 %}

<div class="filter-container text-center">
    <label for="filter-date"><strong>Chọn ngày:</strong></label>
    <input type="date" id="filter-date" class="form-control d-inline-block w-auto" value="{{ selected_date }}"
        onchange="filterTasks()">
    <label for="filter-region" class="ml-3"><strong>Chọn khu vực:</strong></label>
    <select id="filter-region" class="form-control d-inline-block w-auto" onchange="filterTasks()">
        <option value="">Toàn bộ</option>
        {% for region in regions %}
        <option value="{{ region }}" {% if selected_region == region %}selected{% endif %}>{{ region }}</option>
        {% endfor %}
    </select>
    <label for="filter-employee" class="ml-3"><strong>Chọn nhân viên:</strong></label>
    <select id="filter-employee" class="form-control d-inline-block w-auto" onchange="filterTasks()">
        <option value="all" {% if not selected_employee %}selected{% endif %}>Tất cả nhân viên</option>
        {% for employee in employees %}
        <option value="{{ employee.id }}" {% if selected_employee == employee.id %}selected{% endif %}>{{ employee.name }}
        </option>
        {% endfor %}
    </select>
    <label for="filter-status" class="ml-3"><strong>Trạng thái:</strong></label>
    <select id="filter-status" class="form-control d-inline-block w-auto" onchange="filterTasks()">
        <option value="not_started" {% if selected_status == "not_started" %}selected{% endif %}>Chưa làm</option>
        <option value="in_progress" {% if selected_status == "in_progress" %}selected{% endif %}>Đang làm</option>
        <option value="completed" {% if selected_status == "completed" %}selected{% endif %}>Xong</option>
        <option value="all" {% if not selected_status or selected_status == "all" %}selected{% endif %}>Tất cả</option>
    </select>
</div>

</div>
{% endif %}
<div class="container-task-board">
    {% for region, tasks in tasks_by_region.items %}
    <div class="task-zone">
        <h2 class="task-region-title">{{ region }}</h2>
        <ul class="task-list">
            {% for task in tasks %} {% if not task.is_canceled %}
            <!-- ✅ Ẩn công việc đã hủy -->
            <li class="task-item open-employee-popup-btn"
                data-task-id="{{ task.id }}"
                data-task-title="{{ task.title }}"
                data-task-status="{{ task.status }}">
                
                <div class="task-details">
                    <span class="task-title">{{ forloop.counter }}. {{ task.title }}</span>
                    <div class="task-info">
                        <div class="task-row">
                            <span class="task-label">👤 <strong>Khách hàng:</strong></span>
                            <span class="task-value">{% if task.customer %} {{ task.customer.name }} {% else %} ❌ Chưa
                                xác định {% endif %}</span>
                        </div>
                        <div class="task-row">
                            <span class="task-label">👷 <strong>Nhân viên:</strong></span>
                            <span class="task-value">{% if task.assigned_to %} {{ task.assigned_to.name }} {% else %} ❌
                                Chưa gán {% endif %}</span>
                        </div>
                        {% if task.created_by %}
  <div class="dot-container">
    <div class="pulse-ring dot-user-{{ task.created_by.id }}"></div>
    <div class="online-dot dot-user-{{ task.created_by.id }}"></div>
  </div>
{% endif %}


                    </div>
                    
                </div>

                <div class="task-nut-container">
                    <div class="task-nut">
                        <span class="task-status 
                                {% if task.status == 'completed' %}completed
                                {% elif task.status == 'in_progress' %}in-progress
                                {% elif task.status == 'urgent' %}urgent
                                {% else %}not-completed{% endif %}">
                            {{ task.get_status_display }}
                        </span>
                    </div>

                    
                    <div class="task-nut">
                        <button class="btn btn-info view-task-btn" 
                        data-task-id="{{ task.id }}">Chi Tiết</button>
                    </div>
                    {% if employee.level >= 3 or task.created_by == employee.user %}
                    <div class="task-nut">
                    <a href="{% url 'edit_task' task.id %}" class="btn btn-warning">Chỉnh Sửa</a>
                    </div>
                    <div class="task-nut">
                        <button class="btn btn-danger cancel-task-btn" data-task-id="{{ task.id }}">Hủy</button>
                    </div>
                    
                    {% endif %}
                </div>

            </li>
            {% endif %}
            <!-- ✅ Kết thúc kiểm tra công việc đã hủy -->
            {% empty %}
            <p class="text-center text-muted">Không có công việc nào.</p>
            {% endfor %}
        </ul>
    </div>
    {% endfor %}
</div>
{% include 'partials/modal.html' %}
{% endblock %}