{% extends "base.html" %}

{% 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>
{% 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 %}
            <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>
                    </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">
                        <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-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">
                        <button class="btn btn-danger cancel-task-btn" data-task-id="{{ task.id }}">Hủy</button>
                    </div>
                    {% endif %}
                </div>
            </li>
            {% endif %}
            {% 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 %}