document.addEventListener('DOMContentLoaded', function () {
    // Initialize TomSelect for Projects
    new TomSelect('#projects', {
      create: false, // Disable creating new options
      sortField: 'text',
      onChange: function(values) {
        updateTasks(); // Update tasks on value change
      }
    });

    // Initialize TomSelect for Staff
    new TomSelect('#staff', {
      create: false,
      sortField: 'text',
      onChange: function(values) {
        updateTasks(); // Update tasks on value change
      }
    });

    // Update tasks based on filters
    function updateTasks() {
      const projectIds = Array.from(document.getElementById('projects').selectedOptions).map(option => option.value);
      const staffIds = Array.from(document.getElementById('staff').selectedOptions).map(option => option.value);
      const startDate = document.getElementById('start-date').value;
      const endDate = document.getElementById('end-date').value;

      // Construct the query parameters without brackets around the projectIds
      let queryParams = `?projects=${projectIds.join(',')}&staff=${staffIds.join(',')}&start_date=${startDate}&end_date=${endDate}`;

      // Perform AJAX request
      fetch(`/projects-dashboard/${queryParams}`, {
        method: 'GET',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
        },
      })
      .then(response => response.json())
      .then(data => {
        // Update table body with new data
        const tbody = document.getElementById('status-table-body');
        tbody.innerHTML = ''; // Clear the existing table rows
        data.tasks_data.forEach(task => {
          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${task.project_name}</td>
            <td>${task.status}</td>
            <td>${task.start_date}</td>
            <td>${task.staff}</td>
          `;
          tbody.appendChild(tr);
        });
      })
      .catch(error => {
        console.error('Error updating tasks:', error);
      });
    }

    // Trigger update when date range changes
    document.getElementById('start-date').addEventListener('change', updateTasks);
    document.getElementById('end-date').addEventListener('change', updateTasks);
  });