// 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);
//   });