{% extends "main.html" %}
{% load static %}
{% block content %}

<link href="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.4.3/dist/js/tom-select.complete.min.js"></script>

<div class="h-fit w-full flex flex-col items gap-5 rounded-xl bg-gray-50 shadow-md p-5">
  <div class="flex flex-row gap-3 justify-between items-center">
    <h1 class="font-semibold text-xl text-primary">Projects Dashboard</h1>
  </div>

  <form method="get" id="filter-form">
    <div class="w-full flex flex-col gap-10 justify-center items-center">
      <div class="flex flex-col lg:flex-row w-full justify-center items-center gap-5">
        <div class="w-full max-w-[300px] flex flex-row gap-2 items-center">
          <p>From:</p>
          <input name="start_date" id="start-date" type="date"
                 value="{{ start_date }}"
                 class="w-full border rounded-md outline-none focus:border-primary p-2">
        </div>
        <div class="w-full max-w-[300px] flex flex-row gap-2 items-center">
          <p>To:</p>
          <input name="end_date" id="end-date" type="date"
                 value="{{ end_date }}"
                 class="w-full border rounded-md outline-none focus:border-primary p-2">
        </div>
      </div>

      <div class="w-full flex flex-row flex-wrap gap-5">
        <div class="w-full flex flex-1 flex-col items-center">
          <p class="font-medium text-secondary">Projects</p>
          <select name="projects" id="projects" class="w-full h-full rounded-md z-10" multiple>
            {% for project in projects %}
            <option value="{{ project.id }}"
                    {% if project.id in selected_projects %}selected{% endif %}>
              {{ project.name }}
            </option>
            {% endfor %}
          </select>
        </div>

        <div class="w-full flex-1 flex flex-col items-center">
          <p class="font-medium text-secondary">Staff</p>
          <select name="staff" id="staff" class="w-full h-full rounded-md z-10" multiple>
            {% for staff in staffs %}
            <option value="{{ staff.id }}"
                    {% if staff.id in selected_staff %}selected{% endif %}>
              {{ staff.name }}
            </option>
            {% endfor %}
          </select>
        </div>
      </div>

      <button type="submit" class="bg-primary text-white px-4 py-2 rounded-md">
        Apply Filters
      </button>
    </div>
  </form>

  <div class="w-full overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-200">
      <thead class="bg-gray-50">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Point</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Assigned To</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time Spent</th>
          <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Activity</th>
        </tr>
      </thead>
      <tbody class="bg-white divide-y divide-gray-200">
        {% for point in points %}
        <tr>
          <td class="px-6 py-4 whitespace-nowrap">{{ point.task.project.name }}</td>
          <td class="px-6 py-4 whitespace-nowrap">{{ point.task.name }}</td>
          <td class="px-6 py-4 whitespace-nowrap">{{ point.text }}</td>
          <td class="px-6 py-4 whitespace-nowrap">
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
              {% if point.status == 'Completed' %}bg-green-100 text-green-800
              {% elif point.status == 'Working On' %}bg-blue-100 text-blue-800
              {% elif point.status == 'Paused' %}bg-yellow-100 text-yellow-800
              {% else %}bg-red-100 text-red-800{% endif %}">
              {{ point.status }}
            </span>
          </td>
          <td class="px-6 py-4 whitespace-nowrap">{{ point.task.assigned_to.name }}</td>
          <td class="px-6 py-4 whitespace-nowrap">
            {% with point.total_activity_time as time %}
              {{ time.0 }}h {{ time.1 }}m {{ time.2 }}s
            {% endwith %}
          </td>
          <td class="px-6 py-4 whitespace-nowrap">
            {% with point.pointactivity_set.last as last_activity %}
              {% if last_activity %}
                {{ last_activity.end_time|date:"Y-m-d H:i" }}
              {% else %}
                No activity
              {% endif %}
            {% endwith %}
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="7" class="px-6 py-4 text-center">No points found with the current filters</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize TomSelect for Projects
    new TomSelect('#projects', {
        create: false,
        sortField: 'text',
        onChange: function() {
            document.getElementById('filter-form').submit();
        }
    });

    // Initialize TomSelect for Staff
    new TomSelect('#staff', {
        create: false,
        sortField: 'text',
        onChange: function() {
            document.getElementById('filter-form').submit();
        }
    });

    // Submit form when date changes
    document.getElementById('start-date').addEventListener('change', function() {
        document.getElementById('filter-form').submit();
    });

    document.getElementById('end-date').addEventListener('change', function() {
        document.getElementById('filter-form').submit();
    });
});
</script>

{% endblock content %}