{% 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="text-2xl text-secondosiblue text-center font-semibold">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 confirm-exit-input" 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 confirm-exit-input" multiple>
            {% for staff in staffs %}
            <option value="{{ staff.id }}"
                    {% if staff.id in selected_staff %}selected{% endif %}>
              {{ staff.user.first_name }} {{ staff.user.last_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 flex flex-col gap-10 justify-center items-center">
    <table class="table-auto w-full">
      <thead>
        <tr>
          <th class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Project</th>
          <th class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Status</th>
          <th class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Date</th>
          <th class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Staff</th>
        </tr>
      </thead>
      <tbody id="status-table-body">
        {% for task in tasks %}
        <tr>
          <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ task.project.name }}</td>
          <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ task.status }}</td>
          <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ task.start_date }}</td>
          <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ task.assigned_to.user.first_name }} {{ task.assigned_to.user.last_name }}</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 %}