{% extends "dashboard-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>

<style>

  .status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
</style>

<div class="w-full h-fit bg-white rounded-md shadow-md p-5">
  <div class="flex flex-row gap-3 justify-between items-center mb-4">
    <h1 class="font-semibold text-xl text-secondosiblue font-poppinsBold ">Projects Dashboard</h1>
  </div>

  <form method="get" id="filter-form" class="mb-4 font-poppins ">
    <div class="w-full flex flex-col gap-4 font-poppins ">
      <div class="flex flex-col lg:flex-row w-full gap-4 font-poppins ">
        <div class="flex-1 flex flex-col">
          <label class="mb-1 text-secondosiblue font-semibold cursor-pointer">Date Range</label>
          <div class="flex flex-col lg:flex-row gap-2">
            <input name="start_date" id="start-date" type="date"
                   value="{{ start_date }}"
                   class="border rounded-md outline-none focus:border-primary p-2">

            <input name="end_date" id="end-date" type="date"
                   value="{{ end_date }}"
                   class="border rounded-md outline-none focus:border-primary p-2">
          </div>
        </div>

        <div class="flex-1 flex flex-col">
          <label class="mb-1 text-secondosiblue font-semibold cursor-pointer">Projects</label>
          <select name="projects" id="projects" class="rounded-md" 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="flex-1 flex flex-col">
          <label class="text-secondosiblue font-semibold cursor-pointer mb-1">Staff</label>
          <select name="staff" id="staff" class="rounded-md" 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="self-start bg-primary text-white px-4 py-2 rounded-md">
        Apply Filters
      </button>
    </div>
  </form>

    <div class="w-full overflow-x-auto border border-gray-300 rounded-md tableContainer">

      <table class="w-full divide-y">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Project</th>
            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Task</th>
            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Point</th>
            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Status</th>
            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Assigned To</th>
            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Time Spent</th>
            <th scope="col" class="px-6 py-3 text-sm font-medium text-gray-500 uppercase border-r border-gray-300 whitespace-nowrap">Last Activity</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          {% for point in points %}
          <tr class="border border-gray-200 text-center">
            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.task.project.name }}</td>
            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.task.name }}</td>
            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">{{ point.text|truncatechars:30 }}</td>
            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
              <span class="status-badge inline-flex 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 text-center text-sm border-r border-gray-300">{{ point.task.assigned_to.user.first_name }} {{ point.task.assigned_to.user.last_name }}</td>
            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
              {% with point.total_activity_time as time %}
                {{ time.0 }}h {{ time.1 }}m
              {% endwith %}
            </td>
            <td class="px-6 py-4 text-center text-sm border-r border-gray-300">
              {% with point.pointactivity_set.last as last_activity %}
                {% if last_activity %}
                  {{ last_activity.end_time|date:"j F  H:i" }}
                {% else %}
                  -
                {% endif %}
              {% endwith %}
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="7" class="text-center py-4">No points found with the current filters</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>

    </div>
 <div class="flex justify-center items-center mt-10">
            <div class="flex">
                {% if points.has_previous %}
                <a href="?page={{ points.previous_page_number }}" class="w-[40px] h-[40px] rounded-l-md border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
                    </svg>
                </a>
                {% endif %}
                {% for num in page_range %}
                <a href="?page={{ num }}" class="w-[40px] h-[40px] border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300 {% if points.number == num %} bg-gray-200 {% endif %}">
                    <p>{{ num }}</p>
                </a>
                {% endfor %}
                {% if points.has_next %}
                <a href="?page={{ points.next_page_number }}" class="w-[40px] h-[40px] rounded-r-md border border-gray-200 flex justify-center items-center text-secondosiblue p-1 cursor-pointer hover:bg-gray-100 duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                        stroke="currentColor" class="w-5 h-5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                    </svg>
                </a>
                {% endif %}
            </div>
        </div>
</div>

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

    // Initialize TomSelect for Staff
    new TomSelect('#staff', {
        create: false,
        sortField: 'text',
        plugins: ['remove_button'],
        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 %}