taskModal.js

  var client = ZAFClient.init();
  const addSubTaskDiv = document.getElementById('addSubTaskDiv');
  const taskFormContainer = document.getElementById('taskFormContainer');
  const addTask = document.getElementById("add_btn");
  const cancelBtn = document.getElementById("cancelBtn");
  const addButton = document.getElementById('addButton');
  const subTasksList = document.getElementById('subTasksList');
  var users, groups;
  var permissionsList;
  const groupContent = document.getElementById('groupContent');
  const attachedFileContainer = document.getElementById('attachedFileContainer');
  const editTaskContainer = document.getElementById('editTaskContainer');
  var editCommentContainer = document.getElementById('editCommentContainer');
  const assigneeList = document.getElementById('assigneeList');
  const groupList = document.getElementById('groupList');
  var subtask = false;
  const addCommentBtn = document.getElementById('addComment');
  const cancelComment = document.getElementById('cancel');
  const commentContainer = document.getElementById('commentContainer');
  var saveBtn = document.getElementById('saveButton');
  const commentsContainer = document.getElementById('commentsContainer');
  const taskDetails = document.getElementById('task-details');
  var priority = 'Low';
  var assignee = '';
  var groupName = '';
  var requester = '';
  var assigneeName = '';
  var user, subTaskNo, userName;
  var timeValueInSeconds = '';
  var dueDate = '';
  var isUserAdmin = false;
  var dueDateTime = '';
  var timeselected = false;
  var quill, quill2, appId;
  var mainTaskId = '';
  var mainTaskCreator, mainTaskNo, mainTaskAssignee;
  var status = 'new';
  var subTaskStatus = 'new';
  var myTasks = false;
  var linkedTask = false;
  var ticketUpdater = false;
  var dueDateChanged = false;
  var assigneeChanged = false;
  var priorityChanged = false;
  var groupChanged = false;
  var mainStatusChanged = false;
  var generalTask = false;
  let openMenu = null; // Track the currently open menu
  let isMenuOpen = false; // Track if any menu is open
  const loader2 = document.getElementById('loader');
  const linkTicketDiv = document.getElementById('linkToTicketDiv');
  var taskName;
  var taskDescription;
  var saved = false;

  function resetQuillValue(quillNumber) {
      if (quillNumber === 1) {
          quill.setText('');
      } else {

          quill2.setText('');
      }
  }



  function initializeQuill(quillNumber, field, toolBar) {
      if (quillNumber === 1) {
          quill = new Quill(field, {
              modules: {
                  syntax: true,
                  toolbar: toolBar,
              },
              placeholder: 'Type your Comment here...',
              theme: 'snow',
          });
      } else {
          quill2 = new Quill(field, {
              modules: {
                  syntax: true,
                  toolbar: toolBar,
              },
              placeholder: 'Type your Comment here...',
              theme: 'snow',
          });
      }
  }

  const emojiIcon = document.getElementById('emoji-icon');
  const emojiIcon2 = document.getElementById('emoji-ic');
  const emojiPicker1 = document.getElementById('emojiPicker1');
  const emojiPicker2 = document.getElementById('emojiPicker2');
  var taskId, taskNo, ticket, domain, role;
  var isSubtask;
  var areAllResolved;

  document.getElementById('ticketNumberInput').addEventListener('input', function(e) {
      this.value = this.value.replace(/\D/g, ''); // Remove any non-digit characters
  });

  document.getElementById('linkToTicketBtn').addEventListener('click', function(event) {
      event.preventDefault();
      const ticketValue = document.getElementById('ticketNumberInput').value;
      const ticketNumber = parseInt(ticketValue, 10);

      if (!isNaN(ticketNumber)) {
		    ticket = ticketNumber;
		    getLinkedTasks(ticketNumber, domain).then(tasks => {
				
				if (tasks.length === 0){
         linkTask(ticket, rowId, taskNo,true);
		 ticketUpdater = true;
      }
	  else
	  {
		  showModal('','ticketUpdaterModal');
	  }
	     const ticketLink = document.createElement('a');
          ticketLink.href = `https://${domain}.zendesk.com/agent/tickets/${ticketNumber}`;
          ticketLink.target = '_blank';
          const linkedTicketDiv = document.getElementById('linked_ticket');
          // Create a span for the ticket ID to change its color
          const ticketSpan = document.createElement('span');
          ticketSpan.textContent = "#" + "" + ticketNumber;
          ticketSpan.style.color = '#fca347';

          // Append the span to the anchor
          ticketLink.appendChild(ticketSpan);

          // Append the anchor to the parent div
          linkedTicketDiv.appendChild(ticketLink);
          linkTicketDiv.style.display = 'none'
          linkedTicketDiv.style.display = 'block';
          ticket = ticketNumber;
          linkedTask = true;
			
	  });
}
  });



    function getLinkedTasks(ticket, domainName) {
        const url = 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/getTicketRelatedTasks';
        const payload = {
            payload: {
                Item: {
                    "ticket": ticket,
                    "domain": domainName
                }
            }
        };


        return client.request({
                url: url,
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(payload)
            })
            .then(response => {
                try {
                    // Parse the response body
                    const responseBody = JSON.parse(response.body);
                    // Extract the tasks list
                    const tasks = responseBody.tasks || [];


                    return tasks;
                } catch (error) {
                    console.error('Error parsing response:', error);
                    return []; // Return an empty array in case of parsing error
                }
            })
            .catch(error => {
                console.error('Error:', error);
                return []; // Return an empty array if there's an error with the request
            });
    }

  function initializeParameters() {
      mainTaskCreator = getQueryParam('mainTaskCreator');
      mainTaskAssignee = getQueryParam('mainTaskAssignee') || "";
      taskName = getQueryParam('name');
      taskDescription = getQueryParam('description');
      myTasks = getQueryParam('myTasks') === 'true';
      taskNo = getQueryParam('taskNo') || "";
      taskId = getQueryParam('taskId') || "";
      rowId = getQueryParam('rowId') || "";
      ticket = parseInt(getQueryParam('ticket'), 10) || "";
      domain = getQueryParam('subdomain') || "";
      requester = getQueryParam('requester') ? parseInt(getQueryParam('requester'), 10) : "";
      role = getQueryParam('role') || "";
      subTaskNo = getQueryParam('subTaskNo') || "";
      priority = getQueryParam('priority') || "Low"
      dueDate = getQueryParam('dueDate') || ""; // Default to empty string if not provided
      assigneeName = getQueryParam('assigneeName') || "";
      assignee = getQueryParam('assigneeId') ? parseInt(getQueryParam('assigneeId'), 10) : "";
      status = getQueryParam('taskStatus');
      subTaskStatus = getQueryParam('subTaskStatus');
      linkedTask = getQueryParam('linkedTask') ? stringToBoolean(getQueryParam('linkedTask')) : false;
	  ticketUpdater = getQueryParam('ticketUpdater') ? stringToBoolean(getQueryParam('ticketUpdater')) : false;
      subtask = stringToBoolean(getQueryParam('subtask'));
      generalTask = getQueryParam('generalTask') ? stringToBoolean(getQueryParam('generalTask')) : false;

  }




  document.addEventListener('DOMContentLoaded', async function() {
      try {
		  
          const metadata = await client.metadata();
          appId = metadata.appId;
          client.get('currentUser').then(function(data) {
              user = data.currentUser.id;
              userName = data.currentUser.name;

          });

          initializeParameters();
          initializeQuill(1, '#comment', '#quillToolbar');
          groups = await getGroups();

          const li = document.createElement('li');
          li.className = 'task-item';


          const taskInfo1 = document.createElement('div');
          taskInfo1.className = 'task-info';


          const taskInfo2 = document.createElement('div');
          taskInfo2.className = 'task-info';


          const taskspan = document.createElement('span');
          taskspan.className = 'status-span';
          taskspan.textContent = 'Name: ';

          const decSpan = document.createElement('span');
          decSpan.className = 'status-span';
          decSpan.textContent = 'Description: ';

          const nameDiv = document.createElement('div');
          nameDiv.className = 'task-name';

          nameDiv.appendChild(document.createTextNode(taskName));

          taskInfo1.appendChild(taskspan);
          taskInfo1.appendChild(nameDiv);

          const descriptionDiv = document.createElement('div');
          descriptionDiv.className = 'task-desc';
          descriptionDiv.textContent = taskDescription;


          taskInfo2.appendChild(decSpan);
          taskInfo2.appendChild(descriptionDiv);

          li.appendChild(taskInfo1);
          li.appendChild(taskInfo2);

          // Append the task item to the list
          taskDetails.appendChild(li);
          if (isSubtask?.trim()) {

              subtask = stringToBoolean(isSubtask);
          }

          const mainTaskId = `${domain}_${ticket}_${taskNo}`;

          if (priority?.trim()) {
              document.getElementById('priorityBtn').innerHTML = `
        <i class="fas fa-flag"></i> ${priority} 
        <i class="fas fa-caret-down caret-icon"></i>`;
          }

          if (dueDate?.trim()) {
              document.getElementById('duedate').innerHTML = `
        <i class="fas fa-calendar-alt"></i> ${dueDate}`;
          }

          permissionsList = await getPermissions(domain);




          if (!subtask) {
              if (!myTasks && !linkedTask) {
                  linkTicketDiv.style.display = 'block';
              }
              subtaskHeader.style.display = 'block';

              loader2.style.display = 'block';
              if (status != 'resolved') {
                  addTask.style.display = 'block';

              }
          } else {
              document.getElementById("addSubTaskDiv").classList.add("hidden");
		
            if (assigneeName?.trim()) {
                  document.getElementById('assigneeBtn').innerHTML = `
          <i class="fas fa-user"></i> ${assigneeName} 
          <i class="fas fa-caret-down caret-icon"></i>`;
              }
              document.getElementById('groupDiv').style.display = 'none';
              document.getElementById('userdiv').style.display = 'block';

              // Fetch and populate users
              const users = await getUsers();
              var userIds, filteredUsers;
              if (generalTask) {
                  userIds = await getMemberShip(parseInt(mainTaskAssignee, 10));
                  filteredUsers = users.filter(user => userIds.includes(user.id));
              } else {
                  filteredUsers = users
              }
              if (role === 'admin') {
                  populateAssigneeList(filteredUsers);
              } else {
                  populateAssigneeListWithPermissions(filteredUsers, permissionsList, user);
              }
          }


          if (assigneeName?.trim()) {

              document.getElementById('groupBtn').innerHTML = `
        <i class="fas fa-user"></i> ${assigneeName} 
        <i class="fas fa-caret-down caret-icon"></i>`;
          }


          if (status?.trim()) {
              document.getElementById('submitBtn').innerHTML = `
        ${status} 
        <i class="fas fa-caret-down caret-icon"></i>`;
          }


          if (subTaskStatus?.trim()) {
              document.getElementById('submitBtn').innerHTML = `
        ${subTaskStatus} 
        <i class="fas fa-caret-down caret-icon"></i>`;
          }

          if (status === 'resolved' || subTaskStatus === 'resolved') {
              makeUnselectable();
              disableFields(true);
          } else {
              makeSelectable();
              disableFields(false);
          }
      } catch (error) {
          console.error('Initialization failed:', error);
      }


      emojiIcon.addEventListener('click', function() {
          if (emojiPicker1.style.display === 'none') {
              emojiPicker1.style.display = 'block';
          } else {
              emojiPicker1.style.display = 'none';
          }
      });

      emojiIcon2.addEventListener('click', function() {
          if (emojiPicker2.style.display === 'none') {
              emojiPicker2.style.display = 'block';
          } else {
              emojiPicker2.style.display = 'none';
          }
      });

      emojiPicker1.addEventListener('emoji-click', function(event) {
          const emoji = event.detail.unicode;
          quill.focus();
          const range = quill.getSelection();
          quill.insertText(range.index, emoji);
          emojiPicker1.style.display = 'none';
      });

      emojiPicker2.addEventListener('emoji-click', function(event) {
          const emoji = event.detail.unicode;
          quill2.focus();
          const range = quill2.getSelection();
          quill2.insertText(range.index, emoji);
          emojiPicker2.style.display = 'none';
      });


      if (assignee && generalTask) {
          const admins = await getGroupAdmins(assignee);
          const adminUsers = admins.filter(admin => admin.isAdmin === true);
          isUserAdmin = adminUsers.some(admin => admin.userId.toString() === user.toString());
      }

      if (!subtask) {

    if (role === 'admin') {
          try {
              populateGroupList(groups);

          } catch (error) {
              console.error('Failed to load users:', error);
          }
  }
  
  else{
	  populateGroupList(groups,permissionsList,user);
  }
          getSubTasks().then(subTasks => {

              subTasksList.prepend(subtaskHeader);


              subTasks.forEach(subTask => {


                  // Create the task container
                  var subTaskContainer = document.createElement('div');
                  subTaskContainer.classList.add('task-container');

                  // Create the task item
                  var subTaskItem = document.createElement('li');
                  subTaskItem.classList.add('task-item');

                  subTaskItem.setAttribute('assignee', subTask.assignee);


                  const subtaskInfo1 = document.createElement('div');
                  subtaskInfo1.className = 'task-info';

                  const subtaskInfo2 = document.createElement('div');
                  subtaskInfo2.className = 'task-info';

                  const subtaskInfo3 = document.createElement('div');
                  subtaskInfo3.className = 'task-info';

                  const taskspan = document.createElement('span');
                  taskspan.className = 'status-span';
                  taskspan.textContent = 'Name: ';

                  const decSpan = document.createElement('span');
                  decSpan.className = 'status-span';
                  decSpan.textContent = 'Description: ';

                  const idSpan = document.createElement('span');
                  idSpan.className = 'status-span';
                  idSpan.textContent = 'Id: ';

                  // Create the task name
                  var taskNameDiv = document.createElement('div');
                  taskNameDiv.classList.add('task-name');
                  var checkBtn = document.createElement('button');
                  checkBtn.classList.add('check-btn');

                  taskNameDiv.appendChild(document.createTextNode(subTask.name));

                  subtaskInfo1.appendChild(taskspan);
                  subtaskInfo1.appendChild(taskNameDiv);


                  const statusDiv = document.createElement('div');
                  statusDiv.className = 'task_status';

                  const statusTextNode = document.createTextNode("Status: ");

                  const statusSpan = document.createElement('span');
                  statusSpan.className = 'status-text';
                  statusSpan.textContent = subTask.subTaskStatus;

                  statusDiv.appendChild(statusTextNode);
                  statusDiv.appendChild(statusSpan);
                  // Create the task description
                  var taskDescDiv = document.createElement('div');
                  taskDescDiv.classList.add('task-desc');
                  taskDescDiv.textContent = subTask.desc;

                  var idDiv = document.createElement('div');
                  idDiv.classList.add('task-id');
                  idDiv.textContent = subTask.subTaskId;


                  subtaskInfo2.appendChild(decSpan);
                  subtaskInfo2.appendChild(taskDescDiv);
                  subtaskInfo3.appendChild(idSpan);
                  subtaskInfo3.appendChild(idDiv);


                  if (subTask.assigneeName && subTask.assigneeName.trim() != '') {
                      const assigneeDiv = document.createElement('div');
                      assigneeDiv.className = 'assignee-name';
                      assigneeDiv.setAttribute('data-full-name', subTask.assigneeName);

                      const icon = document.createElement('i');
                      icon.className = 'fas fa-user';
                      assigneeDiv.appendChild(icon);

                      subTaskItem.appendChild(assigneeDiv);
                  }

                  const dotsMenu = document.createElement('div');
                  dotsMenu.className = 'dots-menu';

                  // Add dots to the dots menu
                  for (let i = 0; i < 3; i++) {
                      const dot = document.createElement('div');
                      dot.className = 'dot';
                      dotsMenu.appendChild(dot);
                  }

                  // Create a menu for options
                  const menu = document.createElement('div');
                  menu.className = 'menu';
                  menu.innerHTML = `
        <ul>
            <li><a href="#"class="edit-option"><i class="fas fa-edit"></i> Edit</a></li>
            <li><a href="#" class="delete-option"><i class="fas fa-trash-alt"></i> Delete</a></li>
        </ul>
    `;


                  const deleteOption = menu.querySelector('.delete-option');
                  deleteOption.addEventListener('click', function(event) {

                      subTaskContainer.remove();
                      deleteSubTask(subTask.subTaskNumber,subTask.subTaskUser);
                  });


                  const editOption = menu.querySelector('.edit-option');
                  editOption.addEventListener('click', function(event) {
                      event.preventDefault();
                      event.stopPropagation();

                      // Hide the selected task-container
                      const selectedTaskContainer = subTaskContainer;
                      selectedTaskContainer.style.display = 'none';

                      // Move the editTaskContainer to the location of the hidden task-container
                      selectedTaskContainer.parentNode.insertBefore(editTaskContainer, selectedTaskContainer.nextSibling);
                      editTaskContainer.classList.remove('hidden');

                      // Populate the task name and description fields in the editTaskContainer
                      const editTaskName = editTaskContainer.querySelector('#name');
                      const editTaskDescription = editTaskContainer.querySelector('#description');
                      editTaskName.textContent = taskNameDiv.textContent.trim();; // taskName is from the selected task item
                      editTaskDescription.textContent = taskDescDiv.textContent.trim(); // taskDescription is from the selected task item
                      editTaskContainer.dataset.subTaskNo = subTask.subTaskNumber;
                      editTaskContainer.dataset.subTaskId = subTask.id;
                  });



                  dotsMenu.appendChild(menu);

                  subTaskItem.appendChild(subtaskInfo1);
                  subTaskItem.appendChild(subtaskInfo2);
                  subTaskItem.appendChild(subtaskInfo3);
                  subTaskItem.appendChild(statusDiv);
                  subTaskItem.appendChild(dotsMenu);



                  dotsMenu.addEventListener('click', function(event) {
                      event.stopPropagation();
                      if (menu.style.display === 'block') {
                          menu.style.display = 'none';
                          dotsMenu.classList.remove('active');
                          openMenu = null; // Reset the openMenu variable
                          isMenuOpen = false;
                      } else {
                          menu.style.display = 'block';
                          dotsMenu.classList.add('active');
                          openMenu = dotsMenu; // Set the openMenu variable
                          isMenuOpen = true;
                      }
                  });

                  subTaskItem.addEventListener('mouseenter', function() {

                      if (!isMenuOpen) {
                          if (myTasks) {


                              dotsMenu.style.display = 'none';
                          } else {
                              dotsMenu.style.display = 'block';
                          }
                      }
                  });

                  subTaskItem.addEventListener('mouseleave', function() {
                      if (!isMenuOpen) {
                          dotsMenu.style.display = 'none';
                      }
                  });


                  // Close the menu if clicked outside
                  document.addEventListener('click', function(event) {
                      if (openMenu && !event.target.closest('.menu') && !event.target.closest('.dots-menu')) {
                          // Hide the currently open menu
                          openMenu.querySelector('.menu').style.display = 'none';
                          openMenu.classList.remove('active');

                          openMenu = null;
                          isMenuOpen = false;
                      }
                  });

                  // Append task item to task container
                  subTaskContainer.appendChild(subTaskItem);

                  var divider = document.createElement('hr');
                  divider.classList.add('divider-line');
                  subTaskContainer.appendChild(divider);

                  subTasksList.appendChild(subTaskContainer);
                  subTasksList.appendChild(addSubTaskDiv);
                  subTasksList.style.display = 'block';
                  subTaskItem.addEventListener('click', function() {
					 
                      const subtaskName = subTask.name;
                      const subtaskDescription = subTask.desc;
                      var subTaskDate = '';
                      var subTaskPriority = 'Low';
                      var subTaskAssignee = '';
                      var subTaskAssigneeId = '';
                      if (subTask.dueDate) {
                          subTaskDate = subTask.dueDate
                      }
                      if (subTask.priority) {

                          subTaskPriority = subTask.priority;
                      }
                      if (subTask.assigneeName) {
                          subTaskAssignee = subTask.assigneeName;

                      }
                      if (subTask.assignee) {
                          subTaskAssigneeId = subTask.assignee;

                      }
                      subTaskStatus = subTask.subTaskStatus;

                      if (generalTask) {
                          if (isUserAdmin) {
                              client.invoke('destroy');

                              openModal(subtaskName, subtaskDescription, subTask.subTaskNumber, subTaskDate, subTaskPriority, subTaskAssignee, subTaskAssigneeId);
                          } else {


                              document.getElementById('errorMessage').textContent = 'You should be an admin in the ' + assigneeName + ' group to view/edit subtask details.';
                              document.getElementById('errorMessage').style.display = 'block';

                          }
                      } else {
                          client.invoke('destroy');

                          openModal(subtaskName, subtaskDescription, subTask.subTaskNumber, subTaskDate, subTaskPriority, subTaskAssignee, subTaskAssigneeId);
                      }

                  });

              });
              loader2.style.display = 'none';

          });
      }


      getComments().then(comments => {


          if (comments.length > 0) {
              commentsHeader.style.display = 'block';

              commentsContainer.prepend(commentsHeader);

          }


          comments.forEach(comment => {


              var newCommentDiv = document.createElement('div');
              newCommentDiv.classList.add('commentDiv');

              var userInfo = document.createElement('div');
              userInfo.classList.add('user-info');

              var userIcon = document.createElement('div');
              userIcon.classList.add('user-icon');
              userIcon.innerHTML = '<i class="fas fa-user"></i>';

              var userName = document.createElement('div');
              userName.classList.add('user-name');
              userName.textContent = comment.createdBy;

              var dateTime = document.createElement('div');
              dateTime.classList.add('date-time');
              dateTime.textContent = comment.createdDate;

              userInfo.appendChild(userIcon);
              userInfo.appendChild(userName);
              userInfo.appendChild(dateTime);

              var commentTextDiv = document.createElement('div');
              commentTextDiv.classList.add('comment-text');
              commentTextDiv.textContent = comment.commentText;

              newCommentDiv.appendChild(userInfo);
              newCommentDiv.appendChild(commentTextDiv);

              newCommentDiv.style.display = 'block'

              if (comment.files.length > 0) {
                  comment.files.forEach(fileUrl => {
                      var fileLinksDiv = document.createElement('div');
                      fileLinksDiv.classList.add('file-links');

                      var fileLink = document.createElement('a');
                      fileLink.href = fileUrl; // Use the URL of the uploaded file
                      fileLink.textContent = fileUrl.substring(fileUrl.lastIndexOf('/') + 1); // Display just the file name
                      fileLink.target = "_blank";
                      fileLink.style.fontSize = '12px'; // Make the text smaller

                      fileLinksDiv.appendChild(fileLink);
                      newCommentDiv.appendChild(fileLinksDiv); // Append each fileLinksDiv to the comment
                  });
              }

              commentsContainer.insertBefore(newCommentDiv, addCommentBtn);

          });


      });



  });




  function disableFields(disable) {
      // List of button elements to disable
      const buttonsToDisable = ['#priorityBtn', '#assigneeBtn', '#duedate', '#groupBtn'];

      buttonsToDisable.forEach(selector => {
          const button = document.querySelector(selector);

          if (disable) {
              // Add the 'disabled' class
              button.classList.add('disabled');
              // Set aria-disabled for accessibility
              button.setAttribute('aria-disabled', 'true');
              // Disable click events
              button.style.pointerEvents = 'none';
          } else {
              // Remove the 'disabled' class
              button.classList.remove('disabled');
              // Re-enable click events
              button.style.pointerEvents = 'auto';
              button.removeAttribute('aria-disabled');
          }
      });
  }

  function makeUnselectable() {
      // Disable the Priority dropdown
      $('#priorityBtn').attr('disabled', true);
      $('#priorityDropdown').addClass('disabled');

      // Disable the Assignee dropdown
      $('#assigneeBtn').attr('disabled', true);
      $('#groupBtn').attr('disabled', true);
      $('#assigneeDropdown').addClass('disabled');
      $('#assigneeSearch').attr('disabled', true);

      // Disable the Due date selection
      $('#duedate').attr('disabled', true);
      $('#dueDatePickerContainer').addClass('disabled');


  }

  function makeSelectable() {
      // Enable the Priority dropdown
      $('#priorityBtn').removeAttr('disabled');
      $('#priorityDropdown').removeClass('disabled');

      // Enable the Assignee dropdown
      $('#assigneeBtn').removeAttr('disabled');
      $('#groupBtn').removeAttr('disabled');

      $('#assigneeDropdown').removeClass('disabled');
      $('#assigneeSearch').removeAttr('disabled');

      // Enable the Due date selection
      $('#duedate').removeAttr('disabled');
      $('#dueDatePickerContainer').removeClass('disabled');


  }

  function stringToBoolean(str) {
      return (str.toLowerCase() === 'true') ? true : false;
  }


  function populateAssigneeListWithPermissions(usersList, permissions, userId) {
      const agentAdminPermission = permissions.some(
          (permission) => permission.permissionId === "agent-admin" && permission.isActive
      );
      const agentPermission = permissions.some(
          (permission) => permission.permissionId === "agent" && permission.isActive
      );
      const agentAgentPermission = permissions.some(
          (permission) => permission.permissionId === "agent-agent" && permission.isActive
      );

      // Filter and display users based on permissions
      usersList.forEach(user => {
          let addUser = false;


          if (agentAdminPermission && user.role === "admin") {
              addUser = true; // Add all users
          } else if (agentAgentPermission && user.role === "agent") {

              addUser = true; // Add only users with role "agent"
          } else if (agentPermission && user.id === parseInt(userId, 10)) {

              addUser = true; // Add only the current user
          }

          if (addUser) {
              const li = document.createElement('li');
              li.textContent = user.name; // Display user name
              li.setAttribute('data-user', user.id); // Set user ID as data attribute
              assigneeList.appendChild(li);
          }
      });

      // Add event listener for assignee list items
      assigneeList.addEventListener('click', function(event) {
          const item = event.target;
          if (item.tagName === 'LI') {
              const selectedUserId = parseInt(item.getAttribute('data-user'), 10);
              assignee = selectedUserId ? selectedUserId : '';
              assigneeChanged = true;
              const selectedUserName = item.textContent;
              assigneeName = selectedUserName;
              document.getElementById('assigneeBtn').innerHTML = `<i class="fas fa-user"></i> ${selectedUserName} <i class="fas fa-caret-down caret-icon"></i>`;
              document.getElementById('assigneeDropdown').style.display = 'none'; // Close the dropdown after selection
          }
      });

  }

  function populateAssigneeList(users) {
      users.forEach(user => {
          const li = document.createElement('li');
          li.textContent = user.name; // Display user name
          li.setAttribute('data-user', user.id); // Set user ID as data attribute
          assigneeList.appendChild(li);
      });

      // Add event listener for assignee list items
      assigneeList.addEventListener('click', function(event) {
          const item = event.target;
          if (item.tagName === 'LI') {
              const selectedUserId = parseInt(item.getAttribute('data-user'), 10);
              assignee = selectedUserId ? selectedUserId : '';
              assigneeChanged = true;
              const selectedUserName = item.textContent;
              assigneeName = selectedUserName;
              document.getElementById('assigneeBtn').innerHTML = `<i class="fas fa-user"></i> ${selectedUserName} <i class="fas fa-caret-down caret-icon"></i>`;
              document.getElementById('assigneeDropdown').style.display = 'none'; // Close the dropdown after selection
          }
      });
  }

  function updateStatusBasedOnPermissions(domain) {
      return getPermissions(domain).then(permissions => {
          // Check if each permission is active
          const pendingPermission = permissions.some(
              (permission) => permission.permissionId === "agent-pending" && permission.isActive
          );
          const solvedPermission = permissions.some(
              (permission) => permission.permissionId === "agent-solved" && permission.isActive
          );

          // Get the dropdown list items
          const statusDropdown = document.getElementById('statusDropdown');
          const listItems = statusDropdown.querySelectorAll('li');

          // Iterate through each list item and enable/disable based on permissions
          listItems.forEach(item => {
              const status = item.getAttribute('data-status');

              if ((status === 'inProgress' && !pendingPermission) ||
                  (status === 'resolved' && !solvedPermission)) {
                  item.classList.add('disabled'); // Add a "disabled" class
                  item.setAttribute('aria-disabled', 'true'); // Indicate it is disabled for accessibility
              } else {
                  item.classList.remove('disabled');
                  item.removeAttribute('aria-disabled');
              }
          });
      });
  }

  function populateGroupList(groups,permissions,userID) {

      const groupList = document.getElementById('groupList');
      const groupBtn = document.getElementById('groupBtn'); // Button to display the selected user's name
      groupContent.style.display = 'none'; // Ensure group content is hidden initially
      const dropdown = document.getElementById('groupDropdown');
	  var agentAdminPermission = false;
	  var agentPermission = false;
	  var agentAgentPermission = false;
	  var agentGroupPermission = false;
	  if (permissions){
     agentAdminPermission = permissions.some(
          (permission) => permission.permissionId === "agent-admin" && permission.isActive
      );
       agentPermission = permissions.some(
          (permission) => permission.permissionId === "agent" && permission.isActive
      );
       agentAgentPermission = permissions.some(
          (permission) => permission.permissionId === "agent-agent" && permission.isActive
      );
     agentGroupPermission = permissions.some(
          (permission) => permission.permissionId === "agent-group" && permission.isActive
      );
	  }
   

      groups.forEach(group => {
          const groupItem = document.createElement('li');
          groupItem.classList.add('group-item');
          groupItem.setAttribute('group-id', group.id);

          // Add caret icon before the group name
          const caretIcon = document.createElement('i');
          caretIcon.classList.add('fas', 'fa-caret-right', 'caret-icon');
          groupItem.appendChild(caretIcon);

          // Add the group name
          const groupname = document.createElement('span');
          groupname.textContent = group.name;
          groupname.classList.add('group-name');
          groupItem.appendChild(groupname);

          groupList.appendChild(groupItem);

          groupItem.addEventListener('click', function() {
              dropdown.style.display = 'none';
              groupContent.style.display = 'block';

              // Clear previous group content
              groupContent.innerHTML = '';

              // Add back caret
              const backCaret = document.createElement('i');
              backCaret.classList.add('fas', 'fa-caret-left', 'back-caret');
              backCaret.textContent = ' Groups';
              groupContent.appendChild(backCaret);

              // Divider under backCaret
              const divider1 = document.createElement('hr');
              groupContent.appendChild(divider1);

              backCaret.addEventListener('click', function() {
                  // Show the main group list and hide the group content
                  dropdown.style.display = 'block';
                  groupContent.style.display = 'none';
              });

              // Add group title
              const groupTitle = document.createElement('h3');
              groupTitle.textContent = `assign to ${group.name}`;
              groupTitle.classList.add('group-title');
              const groupIcon = document.createElement('i');
              groupIcon.classList.add('fas', 'fa-users'); // You can change the icon class to whatever you need
              groupIcon.style.marginRight = '8px';
              groupTitle.insertBefore(groupIcon, groupTitle.firstChild);
			  
	    if (role === 'admin'||(permissions&&agentGroupPermission)){	  

groupContent.appendChild(groupTitle);

              // Divider under group title
              const divider2 = document.createElement('hr');
              groupContent.appendChild(divider2);

              // Make group title clickable to update the button and print group ID
              groupTitle.addEventListener('click', function() {
                  document.getElementById('errorMessage').style.display = 'none';
                  document.getElementById('errorMessage2').style.display = 'none';

                  getGroupAdmins(group.id).then(admins => {
                      const adminUsers = admins.filter(admin => admin.isAdmin === true);

                      groupBtn.textContent = `${group.name}`;

                      if (!adminUsers || adminUsers.length === 0) {
                          document.getElementById('errorMessage2').style.display = 'block';
                          return;
                      } else {
						    getMemberShip(group.id).then(userIds => {
    const adminUserIds = adminUsers.map(admin => admin.userId);

    // Check if at least one admin is in the current group members
    const hasActiveAdmin = userIds.some(userId => adminUserIds.includes(userId));

    if (!hasActiveAdmin) {
   
                          document.getElementById('errorMessage2').style.display = 'block';
                              return;
	}
							});
                          document.getElementById('errorMessage2').style.display = 'none';
                          const selectedGroupId = group.id;
                          assignee = selectedGroupId ? selectedGroupId : '';
                          assigneeChanged = true;
                          var selectedGroupName = `${group.name}`;
                          assigneeName = selectedGroupName;
                          groupBtn.textContent = selectedGroupName;
                          groupContent.style.display = 'none';
                          generalTask = true;
						   updateTask(ticket, rowId, taskNo, priority, assignee, assigneeName, dueDate, dueDateTime);

                      }
                  });
				  

              });}

              // Create a scrollable container for users
              const usersListContainer = document.createElement('ul');
              usersListContainer.classList.add('group-users-list');
              groupContent.appendChild(usersListContainer);

getMemberShip(group.id).then(userIds => {
    userIds.forEach(userId => {
        let addUser = false;

        if (permissions) {
            const promises = [];

            if (agentAdminPermission) {
                promises.push(
                    getUserRole(userId).then(userRole => {
                        if (userRole === "admin") {
                            addUser = true;
                        }
                    })
                );
            }

            else if (agentAgentPermission) {
                promises.push(
                    getUserRole(userId).then(userRole => {
                        if (userRole === "agent") {
                            addUser = true;
                        }
                    })
                );
            }
            else if (agentPermission && userId === parseInt(userID, 10)) {
                addUser = true;
            }

            // Wait for all permission checks
            Promise.all(promises).then(() => {
                if (addUser) {
                    addUserToList(userId);
					}
            });
        } else {
            // Directly add the user if no permissions are required
            addUserToList(userId);
        }
    });

    // Function to add the user to the list and attach events
    function addUserToList(userId) {
        getUserById(userId).then(userName => {
            if (userName) {
                const userItem = document.createElement('li');
                userItem.textContent = userName;
                userItem.setAttribute('user-id', userId);
                userItem.classList.add('user-item');
                usersListContainer.appendChild(userItem);

                userItem.addEventListener('click', function () {
                    document.getElementById('errorMessage').style.display = 'none';
                    document.getElementById('errorMessage2').style.display = 'none';

                    generalTask = false;
                    const selectedUserId = userId;
                    assignee = selectedUserId ? selectedUserId : '';
                    assigneeChanged = true;
                    const selectedUserName = userName;
                    assigneeName = selectedUserName;
                    groupBtn.textContent = `${userName}`;
                    groupContent.style.display = 'none';
				    updateTask(ticket, rowId, taskNo, priority, assignee, assigneeName, dueDate, dueDateTime);

                });
            }
        });
    }
});


          });
      });
  }



  function openModal(taskName, taskDescription, subTaskNumber, date, priority, assigneeName, assigneeId) {
      var self = this;
      rowId = rowId + "_" + taskNo;
      var url = `https://omni-wise-bucket-4dev.s3.amazonaws.com/Task+Management+APP/taskModal.html?name=${encodeURIComponent(taskName)}&description=${encodeURIComponent(taskDescription)}&ticket=${ticket}&rowId=${rowId}&myTasks=${myTasks}&taskNo=${taskNo}&taskId=${taskId}&user=${user}&userName=${userName}&subdomain=${domain}&subtask=true&subTaskNo=${subTaskNumber}&dueDate=${date}&priority=${priority}&assigneeName=${assigneeName}&assigneeId=${assigneeId}&subTaskStatus=${subTaskStatus}&role=${role}&mainTaskAssignee=${assignee}&mainTaskCreator=${requester}&linkedTask=${linkedTask}&ticketUpdater=${ticketUpdater}&generalTask=${generalTask}`;

      client.invoke('instances.create', {
          location: 'modal',
          url: url,
          size: {
              width: '700px',
              height: '500px'
          }
      }).then(function(data) {
          var instanceGuid = data['instances.create'][0].instanceGuid;
          var modalClient = client.instance(instanceGuid);
		  
		  
	  


          modalClient.on('modal.save', function(data) {
              self.render(data.text);
              // Handle modal save event if needed
          });
		 

      });
  }



  addCommentBtn.addEventListener('click', function() {
      addCommentBtn.style.display = 'none';


      resetQuillValue(1);
      commentContainer.classList.remove('hidden');

  });
  cancelComment.addEventListener('click', function() {
      addCommentBtn.style.display = 'block';
      commentContainer.classList.add('hidden');
      resetQuillValue(1);


      attachedFileContainer.classList.add('hidden');
  });



  document.getElementById('cancelComment').addEventListener('click', function() {
      editCommentContainer.classList.add('hidden');
      resetQuillValue(2);
      const selectedcommentContainer = document.querySelector('.commentDiv[style*="display: none"]');
      if (selectedcommentContainer) {
          selectedcommentContainer.style.display = 'block';
      }
  });


  function showModal(message, modalName) {
	  if(modalName === 'ticketUpdaterModal')
	  {
	document.getElementById('hiddenTaskNumber').value = taskNo;
    document.getElementById('hiddenTaskId').value = taskId;
    document.getElementById('modalOverlay2').style.display = 'block';
    document.getElementById('ticketUpdaterModal').style.display = 'block';
		  
	  }
  else{
          document.getElementById('warningMessage').textContent = message;
          document.getElementById('modalOverlay').style.display = 'block'; // Show the overlay
          document.getElementById('warningModal').style.display = 'block';
  }
      
  }

  // Function to close the modal
  function closeModal(modalName) {

      if (modalName === 'ticketUpdaterModal') {
          const taskNumber = document.getElementById('hiddenTaskNumber').value
          const taskID = document.getElementById('hiddenTaskId').value;
          linkTask(ticket, rowId, taskNumber, false);
          document.getElementById('modalOverlay2').style.display = 'none';
		  ticketUpdater = false;

      } else {
          document.getElementById('modalOverlay').style.display = 'none';
          document.getElementById(modalName).style.display = 'none';
      }

  }
  
  function makeAsUpdater() {
    const taskNumber = document.getElementById('hiddenTaskNumber').value;
    document.getElementById('modalOverlay2').style.display = 'none';
    const taskID = document.getElementById('hiddenTaskId').value
    // Select the task item based on task ID
    getLinkedTasks(ticket, domain).then(tasks => {
            tasks.forEach(task => {
                    if (task.ticketUpdater === true) {
					  linkTask(task.linkedTicket,task.id,task.taskNumber, false);
					}
                    });

                linkTask(ticket,rowId,taskNumber,true);
				ticketUpdater = true;
            });
    }


  function solveAnyway() {

      const returnData = {
          updatedStatus: status,
          priority: priority,
          dueDate: dueDate,
          assignee: assignee,
          assigneeName: assigneeName,
          linkedTask: linkedTask,
          generalTask: generalTask,
          ticket: ticket,
		  ticketUpdater:ticketUpdater

      };
      if (linkedTask) {
          const task_ticket_updates = permissionsList.some(
              (permission) => permission.permissionId === "task-ticketUpdates" && permission.isActive
          );
          if (task_ticket_updates) {
              updateTicket(status);
              addTag(status);
          } else {
              addTag(status);
          }
      }

      updateTask(ticket, rowId, taskNo, priority, assignee, assigneeName, dueDate, dueDateTime);
      client.trigger('modal.save', returnData);

      client.invoke('destroy');

  }

  function convertToISOFormat(dueDate) {
      var currentTime = new Date();
      var currentDateString = currentTime.toISOString().split('T')[0]; // Extract YYYY-MM-DD format

      if (dueDate < currentDateString) {
          showModal("Due date should be after the current date");
          return null;
      }

      var hours = currentTime.getHours();
      var minutes = currentTime.getMinutes();
      var seconds = currentTime.getSeconds();

      // Ensure two digits for hours, minutes, and seconds
      hours = hours < 10 ? '0' + hours : hours;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      seconds = seconds < 10 ? '0' + seconds : seconds;

      // Get the timezone offset in minutes and convert it to the format "+HH:MM" or "-HH:MM"
      var timezoneOffset = currentTime.getTimezoneOffset();
      var offsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
      var offsetMinutes = Math.abs(timezoneOffset) % 60;

      // Add leading zeros if necessary
      offsetHours = offsetHours < 10 ? '0' + offsetHours : offsetHours;
      offsetMinutes = offsetMinutes < 10 ? '0' + offsetMinutes : offsetMinutes;

      // Determine if the offset is positive or negative
      var offsetSign = timezoneOffset >= 0 ? '+' : '-';

      return `${dueDate}T${hours}:${minutes}:${seconds}${offsetSign}${offsetHours}:${offsetMinutes}`;
  }



  function convertToISOFormat(dueDate) {
      var currentTime = new Date();
      var currentDateString = currentTime.toISOString().split('T')[0];
      if (dueDate < currentDateString) {
          showModal("Due date  should be after  current date ");
          return;
      }



      var hours = currentTime.getHours();
      var minutes = currentTime.getMinutes();
      var seconds = currentTime.getSeconds();

      // Ensure two digits for hours, minutes, and seconds
      hours = hours < 10 ? '0' + hours : hours;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      seconds = seconds < 10 ? '0' + seconds : seconds;


      var timezoneOffset = currentTime.getTimezoneOffset(); // Get offset in minutes
      var offsetHours = Math.floor(Math.abs(timezoneOffset) / 60);
      var offsetMinutes = Math.abs(timezoneOffset) % 60;


      offsetHours = offsetHours < 10 ? '0' + offsetHours : offsetHours;
      offsetMinutes = offsetMinutes < 10 ? '0' + offsetMinutes : offsetMinutes;

      // Determine if the offset is positive or negative
      var offsetSign = timezoneOffset >= 0 ? '+' : '-';



      return `${dueDate}T${hours}:${minutes}:${seconds}${offsetSign}${offsetHours}:${offsetMinutes}`;

  }



  saveBtn.addEventListener('click', async function() {
	  
	  


      saveBtn.textContent = 'saving...';
      saveBtn.disabled = true;
      try {

          if (dueDate && dueDate.trim() !== '') {
              dueDateTime = timeselected ? timeValueInSeconds : convertToISOFormat(dueDate);
          }

          let asyncTasks = [];

          if (subtask) {
              await handleSubtaskActions(asyncTasks);
          } else {
              const shouldStop = await handleTaskActions(asyncTasks);
              if (shouldStop) {
                  // Stop further execution if flagged
                  return;
              }
          }

          // Wait for all async tasks to complete
          await Promise.all(asyncTasks);

          client.trigger('modal.save', returnData);
          client.invoke('destroy');
      } catch (error) {
          console.error("Error during save operation:", error);
      } finally {
          // Reset button state
          saveBtn.textContent = 'Save';
          saveBtn.disabled = false;
          saved = true;
      }
  });

  async function handleTaskActions(asyncTasks) {
      const subTasks = await getSubTasks();
      const message = `${userName} assigned a task to you: task: ${taskId}`;

      if (assignee && status === 'new') {
          await handleNewTask(asyncTasks, message);
      } else if (assigneeChanged) {
          await handleAssigneeChange(asyncTasks, subTasks, message);
      }


      if (status === 'resolved') {
          const shouldStop = await handleResolvedTask(subTasks);

          if (shouldStop) {
              return true; // Flag to stop further execution
          }
          if (linkedTask && ticketUpdater) {
              await handleLinkedTask(asyncTasks, 'resolved');
          }
      }
      if (status === 'inProgress') {
          if (linkedTask && ticketUpdater) {
              await handleLinkedTask(asyncTasks, 'inProgress');


          }

      }

      asyncTasks.push(
          updateTask(ticket, rowId, taskNo, priority, assignee, assigneeName, dueDate, dueDateTime)
      );

      returnData = {
          updatedStatus: status,
          priority: priority,
          dueDate: dueDate,
          assignee: assignee,
          assigneeName: assigneeName,
          generalTask: generalTask,
          linkedTask: linkedTask,
          ticket: ticket,
		  ticketUpdater:ticketUpdater
      };
  }

  async function handleSubtaskActions(asyncTasks) {
      const message = `${userName} assigned a subtask to you: subtask: ${taskName}`;

      if (assignee && subTaskStatus === 'new') {
          subTaskStatus = 'assigned';

          if (assignee !== user) {
              asyncTasks.push(notifyAssignee(assignee, taskName));
              asyncTasks.push(saveNotification(assignee, message));
          }
      } else if (assigneeChanged) {
          if (assignee !== user) {
              asyncTasks.push(notifyAssignee(assignee, taskName));
              asyncTasks.push(saveNotification(assignee, message));
          }
      }

      asyncTasks.push(
          updateSubTask(rowId, subTaskNo, domain, taskName, taskDescription, priority, assignee, assigneeName, dueDate, dueDateTime, subTaskStatus)
      );

      await handleSubtaskStatus(asyncTasks);
  }



  async function handleSubtaskStatus(asyncTasks) {
      if (subTaskStatus === 'resolved') {
          await handleResolvedSubtasks(asyncTasks);
      } else if (subTaskStatus === 'inProgress') {
          mainStatusChanged = true;
          await handleInProgressTask(asyncTasks);
      }

      returnData = {
          updatedStatus: subTaskStatus,
          assigneeName: assigneeName,
          assignee: assignee,
          priority,
          dueDate,
          mainStatusChanged: mainStatusChanged
      };
  }

  async function handleInProgressTask(asyncTasks) {
      updateTaskStatus(mainTaskCreator, taskNo, 'inProgress');
      //notifyOnStatusChanged(mainTaskCreator, );
      if (linkedTask && ticketUpdater) {
          await handleLinkedTask(asyncTasks, 'inProgress');
      }
  }


  async function handleResolvedSubtasks(asyncTasks) {
      const subTasks = await getSubTasks();
      const otherSubTasks = subTasks.filter(subTask => subTask.subTaskNumber !== parseInt(subTaskNo, 10));
      const allResolved = otherSubTasks.length >= 0 && otherSubTasks.every(subTask => subTask.subTaskStatus === 'resolved');

      if (allResolved) {
          mainStatusChanged = true;
          updateTaskStatus(mainTaskCreator, taskNo, 'resolved');
          if (linkedTask && ticketUpdater) {
              await handleLinkedTask(asyncTasks, 'resolved');
          }
      }
  }


  async function handleResolvedTask(subTasks) {
      const hasOpenPendingSubTasks = subTasks.some(subTask => subTask.subTaskStatus !== 'resolved');

      if (hasOpenPendingSubTasks) {
          const message = 'You are about to mark the main task as Solved, but there are still open subtasks associated with this task.';
          showModal(message, 'warning');
          return true; // Indicate that the process should stop
      } else {
          return false;

      }
  }

  async function handleLinkedTask(asyncTasks, status) {
      const taskTicketUpdates = permissionsList.some(
          permission => permission.permissionId === 'task-ticketUpdates' && permission.isActive
      );

      if (taskTicketUpdates) {
          asyncTasks.push(updateTicket(status));
      }

      asyncTasks.push(addTag(status));
  }
  
  async function handleAssigneeChange(asyncTasks, subTasks, message) {
      if (subTasks.length > 0) {
          subTasks.forEach(subTask => {
              updateSubTask(subTask.id, subTask.subTaskNumber, domain, subTask.name, subTask.desc, '', '', '', '', '', '', assignee);
          });
      }
      if (generalTask) {
          const admins = await getGroupAdmins(assignee);
          admins.filter(admin => admin.isAdmin).forEach(admin => {
              asyncTasks.push(notifyAssignee(admin.userId, taskId));
              asyncTasks.push(saveNotification(admin.userId, message));
          });
      } else {
          asyncTasks.push(notifyAssignee(assignee, taskId));
          asyncTasks.push(saveNotification(assignee, message));
      }
  }
  async function handleNewTask(asyncTasks, message) {
      status = 'assigned';
      if (generalTask) {
          const admins = await getGroupAdmins(assignee);
          admins.filter(admin => admin.isAdmin).forEach(admin => {
              asyncTasks.push(notifyAssignee(admin.userId, taskId));
              asyncTasks.push(saveNotification(admin.userId, message));
          });
      } else {

          asyncTasks.push(notifyAssignee(assignee, taskId));
          asyncTasks.push(saveNotification(assignee, message));

      }


  }


  document.getElementById('attachmentBtn').addEventListener('click', function() {
      document.getElementById('fileInput').click(); // Trigger file input click
  });
  document.getElementById('attachmentBtn2').addEventListener('click', function() {
      document.getElementById('fileInput2').click(); // Trigger file input click
  });


  let uploadedFileDetails = [];

  document.getElementById('fileInput').addEventListener('change', async function(event) {
      document.getElementById('commentBtn').disabled = true;

      const fileInput = this;
      const fileName = fileInput.files.length > 0 ? fileInput.files[0].name : "";
      const attachedFileContainer = document.getElementById('attachedFileContainer');
      const attachedFileList = document.getElementById('attachedFileList');
      var commentContent = document.getElementById('comment');

      if (fileName) {
          const listItem = document.createElement('li');
          listItem.innerHTML = ` <span class="file-name">${fileName}</span>
<span class="delete-icon">&times;</span>`;

          // Create and append the loader
          const loader = document.createElement('div');
          loader.className = 'loader';
          listItem.appendChild(loader);
          attachedFileList.appendChild(listItem);
          attachedFileContainer.appendChild(attachedFileList);

          attachedFileContainer.classList.remove('hidden');
          commentContent.appendChild(attachedFileContainer);
          // Upload the file and remove the loader after the upload is done
          const files = event.target.files;
          if (files.length > 0) {
              try {
                  const newFileDetails = await uploadFiles(Array.from(files)); // Upload the selected files
                  uploadedFileDetails = uploadedFileDetails.concat(newFileDetails); // Add new files to the existing list

                  listItem.dataset.fileName = fileName;

              } catch (error) {
                  console.error('File upload error:', error);
              } finally {
                  // Remove the loader and re-enable the button
                  loader.remove();
                  document.getElementById('commentBtn').disabled = false;
              }
          }
          listItem.querySelector('.delete-icon').addEventListener('click', function() {
              listItem.remove(); // Remove the corresponding list item
              uploadedFileDetails = uploadedFileDetails.filter(file => file.fileName !== listItem.dataset.fileName);
              if (attachedFileList.children.length === 0) {
                  attachedFileContainer.classList.add('hidden');
              }
          });

      }
  });


  document.getElementById('fileInput2').addEventListener('change', function() {
      const fileInput = this;
      const fileName = fileInput.files.length > 0 ? fileInput.files[0].name : "";
      const attachedFileContainer = document.getElementById('attachedFileContainer');
      const attachedFileList = document.getElementById('attachedFileList');

      if (fileName) {
          const listItem = document.createElement('li');
          listItem.innerHTML = `${fileName} <span class="delete-icon">&times;</span>`;

          attachedFileList.appendChild(listItem);
          attachedFileContainer.classList.remove('hidden');

          // Add event listener to the delete icon
          listItem.querySelector('.delete-icon').addEventListener('click', function() {
              listItem.remove(); // Remove the corresponding list item
              // Optionally, hide the container if no files are left
              uploadedFileDetails = uploadedFileDetails.filter(file => file.name !== listItem.dataset.fileName);
              if (attachedFileList.children.length === 0) {
                  attachedFileContainer.classList.add('hidden');
              }
          });
      }
  });

  const cancelEditButton = document.getElementById('cancelButton');
  cancelEditButton.addEventListener('click', function() {
      // Hide the editTaskContainer
      const editTaskContainer = document.getElementById('editTaskContainer');
      editTaskContainer.classList.add('hidden');

      const selectedTaskContainer = document.querySelector('.task-container[style*="display: none"]');
      if (selectedTaskContainer) {
          selectedTaskContainer.style.display = 'block';
      }
  });


  const saveEditButton = document.getElementById('saveBtn');
  saveEditButton.addEventListener('click', function() {

      const updatedTaskName = document.getElementById('name').value.trim();
      const updatedTaskDescription = document.getElementById('description').value.trim();

      // Find the previously hidden task-container
      const selectedTaskContainer = document.querySelector('.task-container[style*="display: none"]');
      if (selectedTaskContainer) {
          // Update the task name and description in the task-container
          const taskNameDiv = selectedTaskContainer.querySelector('.task-name');
          const taskDescDiv = selectedTaskContainer.querySelector('.task-desc');

          // Preserve the check button element

          // Clear the taskNameDiv and append the check button and updated task name
          taskNameDiv.innerHTML = '';
          taskNameDiv.append(updatedTaskName);

          // Update the task description
          taskDescDiv.textContent = updatedTaskDescription;

          // Re-display the task-container
          selectedTaskContainer.style.display = 'block';
          const subTaskNo = document.getElementById('editTaskContainer').dataset.subTaskNo;
          const subTaskId = document.getElementById('editTaskContainer').dataset.subTaskId;
          updateSubTask(subTaskId, subTaskNo, domain, updatedTaskName, updatedTaskDescription, '', '', '', '', '', '');

      }
      // Hide the editTaskContainer
      const editTaskContainer = document.getElementById('editTaskContainer');
      editTaskContainer.classList.add('hidden');
  });


  addButton.addEventListener('click', function() {

      addButton.disabled = true;
      subTaskStatus = 'new';


      var taskName = document.getElementById('taskName').value.trim();
      var taskDescription = document.getElementById('taskDescription').value.trim();
      var subTaskId = domain + "_" + user + "_" + taskNo;
      addsubTask(taskName, taskDescription, taskNo, ticket, domain, user).then(({
          subTaskNumber,
          subTaskId,
		  mainTaskCreator
      }) => {


          const taskContainer = document.createElement('div');
          taskContainer.className = 'task-container';

          // Create a new li element for the task item
          const newLi = document.createElement('li');
          newLi.className = 'task-item';

          const subTaskInfo1 = document.createElement('div');
          subTaskInfo1.className = 'task-info';


          const subTaskInfo2 = document.createElement('div');
          subTaskInfo2.className = 'task-info';


          const subTaskInfo3 = document.createElement('div');
          subTaskInfo3.className = 'task-info';


          const taskspan = document.createElement('span');
          taskspan.className = 'status-span';
          taskspan.textContent = 'Name: ';

          const decSpan = document.createElement('span');
          decSpan.className = 'status-span';
          decSpan.textContent = 'Description: ';


          const idSpan = document.createElement('span');
          idSpan.className = 'status-span';
          idSpan.textContent = 'Id: ';


          // Create and append task name div
          const nameDiv = document.createElement('div');
          nameDiv.className = 'task-name';
          nameDiv.textContent = taskName;
          subTaskInfo1.appendChild(taskspan);
          subTaskInfo1.appendChild(nameDiv);
          // Append the check button before the task name
          const statusDiv = document.createElement('div');
          statusDiv.className = 'task_status';

          const statusTextNode = document.createTextNode("Status: ");

          const statusSpan = document.createElement('span');
          statusSpan.className = 'status-text';
          statusSpan.textContent = subTaskStatus;

          statusDiv.appendChild(statusTextNode);
          statusDiv.appendChild(statusSpan);

          // Create and append description div

          const descriptionDiv = document.createElement('div');
          descriptionDiv.className = 'task-desc';
          descriptionDiv.textContent = taskDescription;

          const idDiv = document.createElement('div');
          idDiv.className = 'task-id';
          idDiv.textContent = subTaskId;

          subTaskInfo2.appendChild(decSpan);
          subTaskInfo2.appendChild(descriptionDiv);
          subTaskInfo3.appendChild(idSpan);
          subTaskInfo3.appendChild(idDiv);

          // Create and append the dots menu
          const dotsMenu = document.createElement('div');
          dotsMenu.className = 'dots-menu';

          // Add dots to the dots menu
          for (let i = 0; i < 3; i++) {
              const dot = document.createElement('div');
              dot.className = 'dot';
              dotsMenu.appendChild(dot);
          }

          // Create a menu for options
          const menu = document.createElement('div');
          menu.className = 'menu';
          menu.innerHTML = `
        <ul>
            <li><a href="#"class="edit-option"><i class="fas fa-edit"></i> Edit</a></li>
            <li><a href="#" class="delete-option"><i class="fas fa-trash-alt"></i> Delete</a></li>
        </ul>
    `;


          const deleteOption = menu.querySelector('.delete-option');
          deleteOption.addEventListener('click', function(event) {

              taskContainer.remove();
              deleteSubTask(subTaskNumber,mainTaskCreator);
          });


          const editOption = menu.querySelector('.edit-option');
          editOption.addEventListener('click', function(event) {
              event.preventDefault();
              event.stopPropagation();

              // Hide the selected task-container
              const selectedTaskContainer = taskContainer;
              selectedTaskContainer.style.display = 'none';

              // Move the editTaskContainer to the location of the hidden task-container
              selectedTaskContainer.parentNode.insertBefore(editTaskContainer, selectedTaskContainer.nextSibling);
              editTaskContainer.classList.remove('hidden');

              // Populate the task name and description fields in the editTaskContainer
              const editTaskName = editTaskContainer.querySelector('#name');
              const editTaskDescription = editTaskContainer.querySelector('#description');
              editTaskName.value = nameDiv.textContent.trim(); // Populate task name
              editTaskDescription.value = descriptionDiv.textContent.trim(); // Populate task description

              // Store the task ID for later use
              editTaskContainer.dataset.taskId = rowId;
              editTaskContainer.dataset.subTaskNo = subTaskNumber;
              editTaskContainer.dataset.subTaskId = subTaskId;

          });



          dotsMenu.appendChild(menu);

          // Append the dots menu to the new li element
          newLi.appendChild(subTaskInfo1);
          newLi.appendChild(subTaskInfo2);
          newLi.appendChild(subTaskInfo3);
          newLi.appendChild(statusDiv);

          newLi.appendChild(dotsMenu);

          // Append the new li element to the task container
          taskContainer.appendChild(newLi);

          // Create and append the horizontal line to the task container
          const horizontalLine = document.createElement('hr');
          horizontalLine.className = 'divider-line';
          taskContainer.appendChild(horizontalLine);

          const subTasksDiv = document.getElementById('subTasksList');

          subTasksDiv.insertBefore(taskContainer, addSubTaskDiv);
          //addSubTaskDiv.style.display = 'block';
          // Clear the form and hide it
          document.getElementById('taskName').value = "";
          document.getElementById('taskDescription').value = "";
          document.getElementById('taskFormContainer').classList.add('hidden');
          document.getElementById('addSubTaskDiv').classList.remove('hidden');



          // Add event listener to the newly created task item
          newLi.addEventListener('click', async function() {
              if (generalTask) {
                  if (!isUserAdmin) {
                      document.getElementById('errorMessage').textContent = 'You should be an admin in the ' + assigneeName + ' group to view/edit subtask details.';
                      document.getElementById('errorMessage').style.display = 'block';
                  }
              }


              if ( dueDateChanged || priorityChanged) {

                  if (!saved) {
                      document.getElementById('errorMessage').textContent = 'You should save your changes on the current  task first.';
                      document.getElementById('errorMessage').style.display = 'block';

                  } else {
                      client.invoke('destroy')
                      const taskName = nameDiv.textContent.trim();
                      const taskDescription = descriptionDiv.textContent.trim();
                      openModal(taskName, taskDescription, subTaskNumber, '', '', '', '');
                  }

              } else {
                  client.invoke('destroy')

                  const taskName = nameDiv.textContent.trim();
                  const taskDescription = descriptionDiv.textContent.trim();
                  openModal(taskName, taskDescription, subTaskNumber, '', '', '', '');
              }



          });

          // Add event listener to the dots menu
          dotsMenu.addEventListener('click', function(event) {
              event.stopPropagation();
              if (menu.style.display === 'block') {
                  menu.style.display = 'none';
                  dotsMenu.classList.remove('active');
                  openMenu = null; // Reset the openMenu variable
                  isMenuOpen = false;
              } else {
                  menu.style.display = 'block';
                  dotsMenu.classList.add('active');
                  openMenu = dotsMenu; // Set the openMenu variable
                  isMenuOpen = true;
              }
          });

          // Add event listener to the newLi to handle menu visibility
          newLi.addEventListener('mouseenter', function() {

              if (!isMenuOpen) {
                  dotsMenu.style.display = 'block';
              }
          });

          newLi.addEventListener('mouseleave', function() {
              if (!isMenuOpen) {
                  dotsMenu.style.display = 'none';
              }
          });

          // Close the menu if clicked outside
          document.addEventListener('click', function(event) {
              if (openMenu && !event.target.closest('.menu') && !event.target.closest('.dots-menu')) {
                  // Hide the currently open menu
                  openMenu.querySelector('.menu').style.display = 'none';
                  openMenu.classList.remove('active');

                  openMenu = null;
                  isMenuOpen = false;
              }
          });

          document.getElementById("addSubTaskDiv").classList.remove("hidden");
          document.getElementById("taskFormContainer").style.display = 'none';

          subtaskHeader.style.display = 'block';
          addButton.disabled = false;

      }).catch(error => {
          console.error("Error:", error);
      });
  });


  const subtaskHeader = document.createElement('div');
  subtaskHeader.className = 'subtask-header';
  subtaskHeader.innerHTML = `
        <button class="subtasks-button" id="subtasks">
                  <i class="fas fa-caret-down caret-icon"></i>

        Subtasks
        </button>    
`;
  const commentsHeader = document.createElement('div');
  commentsHeader.className = 'comment-header';
  commentsHeader.innerHTML = `
        <button class="comment-button" id="comments">
                  <i class="fas fa-caret-down caret-icon"></i>

        Comments
        </button>    
`;




  // Append the header to the top of the tasks container
  document.getElementById('subTasksList').prepend(subtaskHeader);

  subtaskHeader.querySelector('.subtasks-button').addEventListener('click', function() {
      const caretIcon = this;
      const taskContainers = document.querySelectorAll('.task-container');
      taskContainers.forEach(function(taskContainer) {
          if (taskContainer.style.display === 'none') {
              taskContainer.style.display = 'block';
          } else {
              taskContainer.style.display = 'none';
          }
      });

      const caretIcon1 = this.querySelector('.caret-icon');
      if (caretIcon1) {
          caretIcon1.classList.toggle('fa-caret-down');
          caretIcon1.classList.toggle('fa-caret-up');
      }
  });

  document.getElementById('commentsContainer').prepend(commentsHeader);




  // Add event listener for the comment button
  document.getElementById('comments').addEventListener('click', function() {
      const commentsContainer = document.getElementById('commentsContainer');
      const commentItems = commentsContainer.querySelectorAll('.commentDiv');

      // Toggle the display of each comment item
      commentItems.forEach(function(commentItem) {
          if (commentItem.style.display === 'none') {
              commentItem.style.display = 'block'; // Show comments
          } else {
              commentItem.style.display = 'none'; // Hide comments
          }
      });

      // Optionally toggle the caret icon
      const caretIcon2 = this.querySelector('.caret-icon');
      if (caretIcon2) {
          caretIcon2.classList.toggle('fa-caret-down');
          caretIcon2.classList.toggle('fa-caret-up');
      }
  });




  let commentMenu = null;
  let iscommentMenuOpen = false;

  document.getElementById('commentBtn').addEventListener('click', handleCommentBtnClick);

  async function handleCommentBtnClick() {
      var commentContent = document.getElementById('comment');
      var pElement = commentContent.querySelector('p');
      var commentText = pElement ? pElement.textContent : '';

      if (commentText.trim() === '' && uploadedFileDetails.length === 0) {
          return;
      }

      const currentDate = new Date();
      const formattedDate = currentDate.toLocaleDateString('en-US', {
          day: 'numeric',
          month: 'short',
          year: 'numeric'
      });
      const formattedTime = currentDate.toLocaleTimeString('en-US', {
          hour: 'numeric',
          minute: 'numeric',
          hour12: true
      });
      var date = `${formattedDate} ${formattedTime}`;

      // Extract the URLs from uploadedFileDetails
      const fileUrls = uploadedFileDetails.map(fileDetail => fileDetail.fileUrl);

      // Pass only the file URLs to the addComment function
      addComment(commentText, domain, userName, date, fileUrls).then(() => {
          var newCommentDiv = document.createElement('div');
          newCommentDiv.classList.add('commentDiv');

          var userInfo = document.createElement('div');
          userInfo.classList.add('user-info');

          var userIcon = document.createElement('div');
          userIcon.classList.add('user-icon');
          userIcon.innerHTML = '<i class="fas fa-user"></i>';

          var userNameItem = document.createElement('div');
          userNameItem.classList.add('user-name');
          userNameItem.textContent = userName;

          var dateTime = document.createElement('div');
          dateTime.classList.add('date-time');
          dateTime.textContent = date;

          userInfo.appendChild(userIcon);
          userInfo.appendChild(userNameItem);
          userInfo.appendChild(dateTime);

          var commentTextDiv = document.createElement('div');
          commentTextDiv.classList.add('comment-text');
          commentTextDiv.textContent = commentText;

          newCommentDiv.appendChild(userInfo);
          newCommentDiv.appendChild(commentTextDiv);
          newCommentDiv.style.display = 'block';
          // Create individual file links divs for each file
          if (fileUrls.length > 0) {
              fileUrls.forEach(fileUrl => {
                  var fileLinksDiv = document.createElement('div');
                  fileLinksDiv.classList.add('file-links');

                  var fileLink = document.createElement('a');
                  fileLink.href = fileUrl; // Use the URL of the uploaded file
                  fileLink.textContent = fileUrl.substring(fileUrl.lastIndexOf('/') + 1); // Display just the file name
                  fileLink.target = "_blank";
                  fileLink.style.fontSize = '12px'; // Make the text smaller

                  fileLinksDiv.appendChild(fileLink);
                  newCommentDiv.appendChild(fileLinksDiv); // Append each fileLinksDiv to the comment
              });
          }

          commentsContainer.insertBefore(newCommentDiv, addCommentBtn);

          resetQuillValue(1);
          commentsHeader.style.display = 'block';
          //  document.querySelector('#commentContainer .input-container:first-child').textContent = '';
          document.getElementById('commentContainer').classList.add('hidden');
          addCommentBtn.style.display = 'block';
          document.getElementById('attachedFileList').innerHTML = '';
      });
      uploadedFileDetails = [];
  }




  // Add event listener to the caret icon for collapsing/expanding



  const taskNameInput = document.getElementById('taskName');

  function checkTaskName() {
      if (taskNameInput.value.trim() === "") {
          addButton.disabled = true;
      } else {
          addButton.disabled = false;
      }
  }

  taskNameInput.addEventListener('input', checkTaskName);

  addTask.addEventListener("click", function() {
      if (!assignee || assignee === '') {
          document.getElementById('errorMessage').textContent = 'You should select the assignee first.';
          document.getElementById('errorMessage').style.display = 'block'
          return;

      }
      document.getElementById('errorMessage').style.display = 'none';
      addButton.disabled = true;
      document.getElementById("addSubTaskDiv").classList.add("hidden");
      document.getElementById("taskFormContainer").style.display = 'flex';
      const taskNameField = document.getElementById('taskName');
      const taskDescriptionField = document.getElementById('taskDescription');
      taskNameField.value = '';
      taskDescriptionField.value = '';
  });

  cancelBtn.addEventListener("click", function() {
      document.getElementById("addSubTaskDiv").classList.remove("hidden");
      document.getElementById("taskFormContainer").style.display = 'none';
  });



  function getQueryParam(param) {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get(param);
  }




  document.getElementById('priorityBtn').addEventListener('click', function() {
      const dropdown = document.getElementById('priorityDropdown');
      if (!myTasks) {
          dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
      } else if (role === 'admin') {

          dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
      }


  });

  document.getElementById('submitBtn').addEventListener('click', function() {
      const dropdown = document.getElementById('statusDropdown');
      if (role === 'admin') {
          dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
      } else {
          updateStatusBasedOnPermissions(domain).then(() => {
              dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
          }).catch(error => {
              console.error("Error updating permissions:", error);
          });
      }
  });

  const submitListItems = document.querySelectorAll('#statusDropdown li');
  submitListItems.forEach(function(item) {
      item.addEventListener('click', function() {
          const selectedStatus = item.getAttribute('data-status');
          if (subtask) {

              subTaskStatus = selectedStatus ? selectedStatus : '';
          } else {

              status = selectedStatus ? selectedStatus : '';
          }
          subTaskStatus = selectedStatus ? selectedStatus : '';

          document.getElementById('submitBtn').innerHTML = `</i> ${selectedStatus} <i class="fas fa-caret-down caret-icon"></i>`;
          document.getElementById('statusDropdown').style.display = 'none';
      });
  });




  // Update the button text when an option is selected
  const dropdownItems = document.querySelectorAll('#priorityDropdown li');
  dropdownItems.forEach(function(item) {
      item.addEventListener('click', function() {
          const selectedPriority = item.getAttribute('data-priority');
          priorityChanged = true;
          priority = selectedPriority ? selectedPriority : '';
          document.getElementById('priorityBtn').innerHTML = `<i class="fas fa-flag"></i> ${selectedPriority} <i class="fas fa-caret-down caret-icon"></i>`;
          document.getElementById('priorityDropdown').style.display = 'none'; // Close the dropdown after selection
      });
  });

  // Toggle the visibility of the dropdown menu for assignee
  document.getElementById('assigneeBtn').addEventListener('click', function() {
      const dropdown = document.getElementById('assigneeDropdown');

      dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';




  });
  document.getElementById('groupBtn').addEventListener('click', function() {
      const dropdown = document.getElementById('groupDropdown');
      groupContent.style.display = 'none'

      dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';

  });



  // Filter the user list based on the search input
  document.getElementById('assigneeSearch').addEventListener('input', function() {
      const searchValue = this.value.toLowerCase();
      const items = assigneeList.getElementsByTagName('li');
      for (let i = 0; i < items.length; i++) {
          const item = items[i];
          if (item.textContent.toLowerCase().includes(searchValue)) {
              item.style.display = '';
          } else {
              item.style.display = 'none';
          }
      }
  });

  document.getElementById('groupSearch').addEventListener('input', function() {
      const searchValue = this.value.toLowerCase();
      const items = groupList.getElementsByTagName('li');
      for (let i = 0; i < items.length; i++) {
          const item = items[i];
          if (item.textContent.toLowerCase().includes(searchValue)) {
              item.style.display = '';
          } else {
              item.style.display = 'none';
          }
      }
  });


  // Hide the dropdowns when clicking outside of them
  document.addEventListener('click', function(event) {
      const priorityDropdown = document.getElementById('priorityDropdown');
      const priorityBtn = document.getElementById('priorityBtn');
      if (!priorityBtn.contains(event.target) && !priorityDropdown.contains(event.target)) {
          priorityDropdown.style.display = 'none';
      }

      const assigneeDropdown = document.getElementById('assigneeDropdown');
      const assigneeBtn = document.getElementById('assigneeBtn');
      if (!assigneeBtn.contains(event.target) && !assigneeDropdown.contains(event.target)) {
          assigneeDropdown.style.display = 'none';
      }
  });




  document.getElementById('duedate').addEventListener('click', function() {

      calender(this);

  });




  let selectedButton;


  function updateDueDate() {
      const time = document.getElementById('timeInput').value;
      const unit = document.getElementById('unitSelect').value;

      if (time && unit) {
          const dueDateBtn = document.getElementById('duedate');
          timeselected = true;
          dueDateBtn.innerHTML = `<i class="fas fa-calendar-alt"></i> ${time} ${unit}`;

          timeValueInSeconds = parseInt(time);

          if (unit === 'hours') {
              timeValueInSeconds *= 3600; // Convert hours to seconds
          } else if (unit === 'minutes') {
              timeValueInSeconds *= 60; // Convert minutes to seconds
          }
          const currentTime = new Date();

          // Add timeValueInSeconds to current time

          // Format waitingDate
          const options = {
              year: 'numeric',
              month: 'short',
              day: 'numeric',
              hour: 'numeric',
              minute: '2-digit',
              second: '2-digit',
              hour12: true
          };



          dueDate = new Date(currentTime.getTime() + timeValueInSeconds * 1000).toLocaleString('en-US', options);


          $("#calenderMain").remove();
      }
  }


  function calender(e) {
      if ($(".main").length != 0) {
          $("#calenderMain").remove();
          return false;
      }
      selectedButton = e; // Store the button reference

      date = new Date();
      currMonth = date.getMonth();
      currYear = date.getFullYear();
      days = [];
      monthArray = [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
      ];
      week = ["w1", "w2", "w3", "w4", "w5", "w6"];
      var cal = `
<div class='titleDiv'> Date </div>
<hr class="divider-line">
<div class="main">
  <div class="yearDiv">
    <span onclick="setCalender(currMonth,currYear-=1)" class="left">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </span>
    <span class="year"></span>
    <span onclick="setCalender(currMonth,currYear+=1)" class="right">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </span>
  </div>
  <div class="monthDiv">
    <span onclick="setCalender(currMonth<1?currMonth=11:currMonth-=1,currYear)" class="left">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </span>
    <span class="month"></span>
    <span onclick="setCalender(currMonth>10?currMonth=0:currMonth+=1,currYear)" class="right">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </span>
  </div>
  <div class="dateMain">
    <table id="fillDate">
      <tr class="weekT">
        <td class="wDay" value="0">S</td>
        <td class="wDay" value="1">M</td>
        <td class="wDay" value="2">T</td>
        <td class="wDay" value="3">W</td>
        <td class="wDay" value="4">T</td>
        <td class="wDay" value="5">F</td>
        <td class="wDay" value="6">S</td>
      </tr>
      <tr class="w1"></tr>
      <tr class="w2"></tr>
      <tr class="w3"></tr>
      <tr class="w4"></tr>
      <tr class="w5"></tr>
    </table>
  </div>
</div>
<hr class="divider-line">
<div class="alertDiv" style="display: none;" ></div>

<div class='titleDiv'> Time </div>
<!-- New Fields -->
 <div class="u-mb timeDiv">

 <input type="number" class="c-txt__input" id="timeInput" placeholder="Enter a time">

        </div>
       <div class="u-cf u-mb timeDiv">

 <select class="c-txt__input c-txt__input--select" id="unitSelect" onChange ="updateDueDate()">
          <option value="-1" selected>...</option>

        <option value="minutes">Minutes</option>
        <option value="hours">Hours</option>
  </select>
  </div>
`;


      $("body").append('<div id="calenderMain"></div>');

      $("#calenderMain").append(cal);
      $(".main").fadeIn();

      setCalender(date.getMonth(), date.getFullYear(), e);
  }

  function setCalender(month, year, e) {
      selectedDate = "";
      clearCalender();
      days = [];
      var weekCount = 0;
      var d = new Date(year, month, 1);
      $(".main .month").html(monthArray[d.getMonth()]);
      $(".main .year").html(d.getFullYear());
      while (d.getMonth() === month) {
          days.push(new Date(d));
          d.setDate(d.getDate() + 1);
      }
      for (i = 0; i < days.length; i++) {
          if (days[i].getDay() <= 5) {
              $("." + week[weekCount]).append(
                  '<td class="date" value="' +
                  days[i].getDate() +
                  '">' +
                  days[i].getDate() +
                  "</td>"
              );
          } else {
              $("." + week[weekCount]).append(
                  '<td class="date" value="' +
                  days[i].getDate() +
                  '">' +
                  days[i].getDate() +
                  "</td>"
              );
              weekCount += 1;
          }
      }

      var tot;
      if ($(".w1").children().length != 7) {
          tot = 7 - $(".w1").children().length;
          for (j = 0; j < tot; j++) {
              $(".w1").prepend("<td>&nbsp</td>");
          }
      }

      $(".date").each(function() {
          $(this).click(function() {
              var selectedDay = $(this).attr("value");
              selectedDate = currYear +
                  "-" +
                  (String(currMonth + 1).length > 1 ?
                      currMonth + 1 :
                      "0" + (currMonth + 1)) +
                  "-" +
                  (String(selectedDay).length > 1 ?
                      selectedDay :
                      "0" + selectedDay);

              // Get today's date
              var today = new Date();
              var todayString = today.getFullYear() +
                  "-" +
                  (String(today.getMonth() + 1).length > 1 ?
                      today.getMonth() + 1 :
                      "0" + (today.getMonth() + 1)) +
                  "-" +
                  (String(today.getDate()).length > 1 ?
                      today.getDate() :
                      "0" + today.getDate());

              // Check if the selected date is today
              if (selectedDate === todayString) {
                  dueDateChanged = true;

                  $(".alertDiv").html("Please select the time for today.").show();
                  return;
              } else if (selectedDate < todayString) {

                  $(".alertDiv").html("Invalid date").show();
                  return;
              }


              dueDate = selectedDate;
              timeselected = false;
              $(e).text(`${selectedDate}`);
              if (selectedButton) {
                  dueDateChanged = true;
                  $(selectedButton).html(`<i class="fas fa-calendar-alt"></i> ${selectedDate}`); // Update button text with selected date
                  $(selectedButton).val(selectedDate.toString()); // Update hidden value if needed
              }
              $("#calenderMain").remove(); // Close calendar after selection

          });
      });
  }

  function clearCalender() {
      timeselected
      $(".w1,.w2,.w3,.w4,.w5").children().remove();
  }

  $("#calenderMain").click(function() {
      $("#calenderMain").remove();
  });

  function getUsers(url = '/api/v2/search.json?query=type:user -role:end-user', allUsers = []) {
      return client.request({
          url: url,
          type: "GET",
          contentType: "application/json"
      }).then(response => {
          allUsers.push(...response.results);

          if (response.next_page) {
              return getUsers(response.next_page, allUsers);
          } else {
              return allUsers;
          }
      }).catch(error => {

          throw error;
      });
  }

  function getGroups(url = '/api/v2/groups', allGroups = []) {
      return client.request({
          url: url,
          type: "GET",
          contentType: "application/json"
      }).then(response => {
          allGroups.push(...response.groups);

          if (response.next_page) {
              return getGroups(response.next_page, allGroups);
          } else {
              return allGroups;
          }
      }).catch(error => {

          throw error;
      });
  }


  function updateTask(ticket, id, taskNO, priority, assigneeId, assigneeName, duedate, dueDateTime) {



      var payload = {
          payload: {
              "Key": {
                  "id": id,
                  "sk": taskNO
              },
              "AttributeUpdates": {

                  "taskName": {


                      "Value": taskName
                  },
                  "desc": {

                      "Value": taskDescription
                  },
                  "priority": {
                      "Value": priority
                  },

                  "assigneeId": {
                      "Value": assigneeId
                  },

                  "assigneeName": {
                      "Value": assigneeName

                  },
                  "createdAt": {

                      "Value": getCurrentTime()

                  },

                  "taskStatus": {

                      "Value": status

                  },
                  "generalTask": {

                      "Value": generalTask

                  }
              }
          }
      };


      if (dueDateChanged) {

          payload.payload.AttributeUpdates["dueDate"] = {
              "Value": duedate
          };

          payload.payload.AttributeUpdates["dueDateTime"] = {
              "Value": dueDateTime
          };
          payload.payload.AttributeUpdates["timeSelected"] = {
              "Value": timeselected
          };


      }
	  
	  if(linkedTask){
		    payload.payload.AttributeUpdates["ticket"] = {
             "Value": ticket

          };

	  }
	


      client.request({
          url: 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/updateTask',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(payload)
      }).then(response => {

          saveBtn.textContent = 'Save';

          saveBtn.disabled = false;
      }).catch(error => {
          // Handle errors
          console.error(error);
      });
  }

  function updateTaskStatus(taskCreator, taskNumber, updatedStatus) {


      var id = domain + "_" + taskCreator;

      var payload = {
          payload: {
              "Key": {
                  "id": id,
                  "sk": taskNumber
              },
              "AttributeUpdates": {

                  "status": {


                      "Value": updatedStatus
                  },
              }
          }
      };
      client.request({
          url: 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/updateTaskStatus',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(payload)
      }).then(response => {


      }).catch(error => {
          // Handle errors
          console.error(error);
      });


  }


  function updateTicket(taskStatus) {
      // Define a mapping for taskStatus to ticket status
      const statusMapping = {
          'inProgress': 'pending',
          'resolved': 'solved'
      };

      const updatedStatus = statusMapping[taskStatus];



      const payload = {
          "ticket": {
              "status": updatedStatus
          }
      };

      client.request({
          url: `/api/v2/tickets/${ticket}`,
          type: "PUT",
          contentType: "application/json",
          data: JSON.stringify(payload)
      }).then(response => {
          // Handle the response here if needed
      }).catch(error => {
          console.error('There was a problem with the request:', error);
          throw error;
      });
  }


  function addTag(sts) {

      var tag = sts + "_tm"
      const payload = {
          tags: [tag]
      };


      client.request({
          url: `/api/v2/tickets/${ticket}/tags`,

          type: "PUT",
          contentType: "application/json",
          data: JSON.stringify(payload)
      }).then(response => {
          // Handle the response here if needed
      }).catch(error => {
          console.error('There was a problem with the request:', error);
          throw error;
      });
  }



  function getCurrentTime() {
      const now = new Date();
      const options = {
          year: 'numeric',
          month: 'short',
          day: 'numeric',
          hour: 'numeric',
          minute: '2-digit',
          second: '2-digit', // Include seconds
          hour12: true
      };
      const formattedTime = now.toLocaleString('en-US', options);
      return formattedTime;
  }

  function addsubTask(taskName, taskDescription, taskNumber, ticketId, domain, createdBy) {
      // Initialize payload structure
      var id = domain + "_" + requester + "_" + taskNumber;
      var payload = {
          payload: {
              Item: {
                  "id": id,
                  "createdBy": createdBy,
                  "domain": domain,
                  "createdAt": getCurrentTime(),
                  "taskName": taskName,
                  "taskDesc": taskDescription,
                  "mainTaskId": taskId,
                  "mainTaskNo": taskNo,
                  "mainTaskCreator": requester,
                  "mainTaskAssignee": assignee,
                  "subTaskStatus": subTaskStatus,
                  "appId": appId,
				  "ticketUpdater":ticketUpdater
              }
          }
      };

      // Conditionally add the 'ticket' field to the payload if 'linkedTask' is true
      if (linkedTask && ticketId) {
          payload.payload.Item.ticket = parseInt(ticketId, 10);
      }
	

      return client.request({
          url: 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/addSubTask',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(payload)
      }).then(response => {
          const responseBody = JSON.parse(response.body);
          const subTaskNumber = responseBody.subTaskNumber;
          const subTaskId = responseBody.subTaskId;
		  const mainTaskCreator = responseBody.mainTaskCreator;

          // Correctly return the object
          return {
              subTaskNumber,
              subTaskId,
			  mainTaskCreator
          };
      }).catch(error => {
          // Handle errors
          console.error(error);
      });
  }



  async function deleteSubTask(subTaskNumber,subtaskUser) {
  const id = domain + "_" + subtaskUser + "_" + taskNo;
console.log(id);
console.log(subTaskNumber);

      var payload = {
          payload: {
              Item: {
                  "id": id,
                  "sk": subTaskNumber
              }
          }
      };

      return client.request({
          url: 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/deleteSubTask',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(payload)
      }).then(response => {
          if (response.statusCode === 200) {

              //client.invoke('notify', "successfully deleted", 'notify');

          } else {
              ///    client.invoke('notify', "deletion process was not completed", 'error');
          }
      }).catch(error => {
          // Handle errors
          console.error(error);
      });
  }

  function updateSubTask(rowId, subTasknum, subdomain, name, desc, priority, assignee, assigneeName, date, dueDateTime, updatedStatus, mainTaskAssigneeId) {

      var id = rowId;

      var payload = {
          payload: {
              "Key": {
                  "id": id,
                  "sk": subTasknum
              },
              "AttributeUpdates": {

                  "taskName": {


                      "Value": name
                  },
                  "desc": {

                      "Value": desc
                  },
                  "priority": {
                      "Value": priority
                  },

                  "assignee": {
                      "Value": assignee
                  },

                  "assigneeName": {
                      "Value": assigneeName

                  }
              }
          }
      };




      if (updatedStatus) {


          payload.payload.AttributeUpdates["subTaskStatus"] = {
              "Value": updatedStatus
          };
      }

      if (mainTaskAssigneeId) {

          payload.payload.AttributeUpdates["mainTaskAssignee"] = {
              "Value": mainTaskAssigneeId
          };

      }



      if (dueDateChanged) {

          payload.payload.AttributeUpdates["dueDate"] = {
              "Value": date
          };

          payload.payload.AttributeUpdates["dueDateTime"] = {
              "Value": dueDateTime
          };
          payload.payload.AttributeUpdates["timeSelected"] = {
              "Value": timeselected
          };


      }

      client.request({
          url: 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/updateSubTask',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(payload)
      }).then(response => {
          saveBtn.textContent = 'Save';

          saveBtn.disabled = false;

      }).catch(error => {
          // Handle errors
          console.error(error);
      });

  }
  async function uploadFiles(files) {
      const fileDetails = [];

      for (const file of files) {
          const bucket = 'bucketforattachments';
          // Add a unique flag to the file name, like a timestamp or a random string
          const folderName = Date.now();
          const apiUrl = `https://9or76ontrj.execute-api.us-east-1.amazonaws.com/upload/${bucket}/${folderName}/${file.name}`;

          try {
              const response = await fetch(apiUrl, {
                  method: 'PUT',
                  headers: {
                      'Content-Type': file.type,
                  },
                  body: file,
              });


              const fileUrl = `https://${bucket}.s3.amazonaws.com/${folderName}/${file.name}`;
              fileDetails.push({
                  fileName: file.name,
                  fileUrl
              });

          } catch (error) {
              console.error('Error during file upload:', error);
          }
      }

      return fileDetails;
  }




  function addComment(commentText, domain, createdBy, date, files) {
      var url, id;

      if (subtask) {
          url = 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/addSubTaskComment';
          //  id = domain + "_" + taskNo + "_" + subTaskNo;
          id = rowId + "_" + subTaskNo;

      } else {
          url = 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/addComment';
          //   id = domain + "_" + taskNo;
          id = rowId + "_" + taskNo;
      }

      // Prepare the file details for the payload


      var payload = {
          payload: {
              Item: {
                  "id": id,
                  "createdBy": createdBy,
                  "commentText": commentText,
                  "date": date,
                  "files": files
              }
          }
      };

      return client.request({
          url: url,
          type: 'POST',
          data: JSON.stringify(payload)
      }).then(response => {
          const responseBody = JSON.parse(response.body);
          const commentId = responseBody.commentId;
          return commentId;
      }).catch(error => {
          // Handle errors
          console.error(error);
      });
  }

  // Helper function to convert file to base64

  /* function deleteComment(ticketId, domain, commentId) {
       var url, id;
       if (subtask) {

           url = 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/deleteSubTaskComment';
           id = domain + "_" + ticketId + "_" + taskId + "_" + subTaskID;
       } else {
           url = 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/deleteComment';
           id = domain + "_" + ticketId;


       }

       var payload = {
           payload: {
               Item: {
                   "id": id,
                   "sk": commentId
               }
           }
       };

       return client.request({
           url: url,
           type: 'POST',
           contentType: 'application/json',
           data: JSON.stringify(payload)
       }).then(response => {
           if (response.statusCode === 200) {


           } else {}
       }).catch(error => {
           // Handle errors
           console.error(error);
       });
   }

   function updateComment(ticket, commentId, subdomain, comment, date) {
       var url, id;

       if (subtask) {

           url = 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/updateSubTaskComment';
           id = subdomain + "_" + ticket + "_" + taskId + "_" + subTaskID;
       } else {
           url = 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/updateComment';
           id = subdomain + "_" + ticketId;


       }

       var payload = {
           payload: {
               "Key": {
                   "id": id,
                   "sk": commentId
               },
               "AttributeUpdates": {

                   "commentContent": {


                       "Value": comment
                   },
                   "date": {


                       "Value": date
                   }


               }
           }
       };
       client.request({
           url: url,
           type: 'POST',
           contentType: 'application/json',
           data: JSON.stringify(payload)
       }).then(response => {


       }).catch(error => {
           // Handle errors
           console.error(error);
       });

   }*/

  function notifyAssignee(adminId, task) {

      return client.request({
          url: `/api/v2/apps/notify`,
          type: "POST",
          contentType: "application/json",
          httpCompleteResponse: true,
          autoRetry: true,
          data: JSON.stringify({
              "app_id": appId,
              "event": "taskAssigned",
              "body": {
                  "task": task,
                  "requester": userName

              },
              "agent_id": adminId
          })
      }).then(response => {

          return response;
      }).catch(error => {
          console.error("Error sending notification:", error);

      });

  }

  function notifyOnStatusChanged(adminId, task) {

      return client.request({
          url: `/api/v2/apps/notify`,
          type: "POST",
          contentType: "application/json",
          httpCompleteResponse: true,
          autoRetry: true,
          data: JSON.stringify({
              "app_id": appId,
              "event": "taskAssigned",
              "body": {
                  "message": task,


              },
              "agent_id": adminId
          })
      }).then(response => {

          return response;
      }).catch(error => {
          console.error("Error sending notification:", error);

      });

  }

  function notifyOnUpdate(requester, updatedStatus) {

      return client.request({
          url: `/api/v2/apps/notify`,
          type: "POST",
          contentType: "application/json",
          httpCompleteResponse: true,
          autoRetry: true,
          data: JSON.stringify({
              "app_id": appId,
              "event": "taskUpdated",
              "body": {
                  "task": taskId,
                  "status": updatedStatus

              },
              "agent_id": requester
          })
      }).then(response => {

          return response;
      }).catch(error => {
          console.error("Error sending notification:", error);

      });

  }


  function saveNotification(assignedGroup, message) {
      var id = domain + "_" + assignedGroup;

      var url = "https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/saveNotification";
      var payload = {
          payload: {
              Item: {
                  "id": id,
                  "message": message,
                  "time": getCurrentTime()

              }
          }
      };




      client.request({
          url: url,
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(payload)
      }).then(response => {


      }).catch(error => {
          // Handle errors
          console.error(error);
      });

  }



  function getSubTasks() {
      var id;
      if (!subtask) {
          id = rowId + "_" + taskNo

      } else {
          id = rowId;
      }


      var url = 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/getSubtasks';
      var payload = {
          payload: {
              Item: {
                  "id": id

              }
          }
      };

      return client.request({
              url: url,
              type: 'POST',
              contentType: 'application/json',
              data: JSON.stringify(payload)
          }).then(response => {
              try {
                  // Parse the response body
                  const responseBody = JSON.parse(response.body);
                  // Extract the tasks list
                  return responseBody.subTasks || []; // Return the tasks list or an empty array if no tasks found
              } catch (error) {
                  console.error('Error parsing response:', error);
                  return []; // Return an empty array in case of parsing error
              }
          })
          .catch(error => {
              console.error('Error:', error);
              return []; // Return an empty array if there's an error with the request
          });
  }


  function getComments() {


      var url, id;
      if (subtask) {
          url = 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/getSubTaskComments';
          //   id = domain + "_" + taskNo + "_" + subTaskNo;
          id = rowId + "_" + subTaskNo;

      } else {
          url = 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/getComments';
          //   id = domain + "_" + taskNo;
          id = rowId + "_" + taskNo;

      }

      var payload = {
          payload: {
              Item: {
                  "id": id

              }
          }
      };

      return client.request({
              url: url,
              type: 'POST',
              contentType: 'application/json',
              data: JSON.stringify(payload)
          }).then(response => {
              try {
                  // Parse the response body
                  const responseBody = JSON.parse(response.body);
                  // Extract the tasks list
                  return responseBody.comments || [];
              } catch (error) {
                  console.error('Error parsing response:', error);
                  return [];
              }
          })
          .catch(error => {
              console.error('Error:', error);
              return [];
          });
  }

  function getPermissions(domainName) {
      var payload = {
          payload: {
              Key: {

                  "domain": domainName
              }
          }
      };

      return client.request({
          url: 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/getPermissions',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(payload)

      }).then(response => {
          const responseBody = JSON.parse(response.body);
          if (response.statusCode === 200) {
              return responseBody.permissions || [];
          } else {
              return [];
          }
      }).catch(error => {
          // console.error(error);
      });
  }

  function getGroupAdmins(groupId) {
      var id = domain + "_" + groupId;
      var payload = {
          payload: {
              "Key": {
                  "id": id
              }

          }
      };

      return client.request({
          url: 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/getGroupAdmins',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(payload)
      }).then(response => {
          const responseBody = JSON.parse(response.body);
          if (response.statusCode === 200 && responseBody.users) {

              const groupUsers = responseBody.users;
              return groupUsers;
          } else {
              return []; // Return empty array if no notifications found
          }
      }).catch(error => {
          console.error('Error fetching notifications:', error);
          throw error;
      });
  }


  function getMemberShip(groupID, allUserIds = []) {
      return client.request({
          url: `/api/v2/groups/${groupID}/memberships`,
          type: "GET",
          contentType: "application/json"
      }).then(response => {
          // Extract user IDs from the response and add them to the array
          const userIds = response.group_memberships.map(membership => membership.user_id);
          allUserIds.push(...userIds);

          // If there's a next page, recursively fetch it
          if (response.next_page) {
              return getMemberShip(groupID, allUserIds);
          } else {
              // All pages fetched, return the array of user IDs
              return allUserIds;
          }
      }).catch(error => {
          console.error('There was a problem with the request:', error);
          throw error;
      });
  }


  function getUserById(userId) {


      const options = {
          url: `/api/v2/users/${userId}`,
          type: 'GET',
          cors: false,
      };

      return client.request(options)
          .then((response) => {
              const userName = response.user && response.user.name;
              return userName || null;
          })
          .catch((error) => {
              //   console.error("Failed to fetch user:", error);
              return null;
          });




  }
  
  function getUserRole(userId){
	    const options = {
          url: `/api/v2/users/${userId}`,
          type: 'GET',
          cors: false,
      };

      return client.request(options)
          .then((response) => {
              const role = response.user && response.user.role;
              return role || null;
          })
          .catch((error) => {
              //   console.error("Failed to fetch user:", error);
              return null;
          });

  }

  function linkTask(ticket, id, taskNO,ticketUpdater) {

      var payload = {
          payload: {
              "Key": {
                  "id": id,
                  "sk": taskNO
              },
              "AttributeUpdates": {}
          }
      };

      payload.payload.AttributeUpdates["ticket"] = {
          "Value": ticket
      };
	 
 payload.payload.AttributeUpdates["ticketUpdater"] = {
              "Value": ticketUpdater
	  };

      client.request({
          url: 'https://jt27syuha8.execute-api.us-east-1.amazonaws.com/taskAPI/updateTask',
          type: 'POST',
          contentType: 'application/json',
          data: JSON.stringify(payload)
      }).then(response => {}).catch(error => {
          // Handle errors
          console.error(error);
      });
  }