document.getElementById('actions').addEventListener('change', function() {
    var valueContainer = document.getElementById('valueContainer');
    var selectedAction = this.value;
  
    // Clear the current content inside valueContainer
    valueContainer.innerHTML = '';
  
    if (selectedAction === 'access_duration') {
      // Create a dropdown for access duration
      var select = document.createElement('select');
      select.name = 'value';
      select.id = 'valueDropdown';
  
      var options = [
        { value: '1h', text: '1HR' },
        { value: '3h', text: '3HR' },
        { value: '12h', text: '12HR' },
        { value: '1D', text: '1D' },
        { value: '2D', text: '2D' },
        { value: '3D', text: '3D' },
        { value: '5D', text: '5D' }
      ];
  
      options.forEach(function(optionData) {
        var option = document.createElement('option');
        option.value = optionData.value;
        option.text = optionData.text;
        select.appendChild(option);
      });
  
      valueContainer.appendChild(select);
  
    } else if (selectedAction === 'unregdate') {
      // Create a datetime-local input for unregistered user
      var input = document.createElement('input');
      input.type = 'datetime-local';
      input.name = 'value';
      input.id = 'valueCalendar';
  
      valueContainer.appendChild(input);
    } else {
      // Default placeholder when no valid action is selected
      var input = document.createElement('input');
      input.type = 'text';
      input.name = 'value';
      input.id = 'valueInput';
      input.placeholder = 'Select an action first';
      input.readOnly = true;
  
      valueContainer.appendChild(input);
    }
  });
  
  //------------Default submit behaviour-------------//
  document.getElementById('createUserForm').addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
                event.preventDefault();
            }
  });




//---------------------BULK UPLOAD USERS------------------------//

 // Show the modal when "Create Bulk Users" button is clicked
document.getElementById('createButton').addEventListener('click', function() {
  var modal = document.getElementById('uploadModal');
  modal.style.display = "block";
});

// Close the modal when the close button is clicked
document.getElementsByClassName('close')[0].addEventListener('click', function() {
  var modal = document.getElementById('uploadModal');
  modal.style.display = "none";
});

// Close the modal when clicking outside the modal content
window.addEventListener('click', function(event) {
  var modal = document.getElementById('uploadModal');
  if (event.target === modal) {
    modal.style.display = "none";
  }
});

// Handle form submission
document.getElementById('uploadForm').addEventListener('submit', function(event) {
  var fileInput = document.querySelector('input[name="upload"]');
  var messageContainer = document.getElementById('message');
  var filePath = fileInput.value;
  var allowedExtensions = /(\.csv)$/i;

  if (fileInput.files.length === 0) {
    event.preventDefault(); // Prevent form submission
    messageContainer.textContent = 'Please upload a file before submitting.';
  } else if (!allowedExtensions.exec(filePath)) {
    event.preventDefault(); // Prevent form submission
    messageContainer.textContent = 'Only Csv files (.csv) are allowed.';
  } else {
    messageContainer.textContent = ''; // Clear any previous message
    // Form will be submitted normally
  }
  
  // Hide the message after 3 seconds
  setTimeout(function() {
    messageContainer.textContent = '';
  }, 3000); // 3000 milliseconds = 3 seconds
});

//-------INFO POP UP ------------------//
// Show the new popup when the circle span is clicked
document.querySelector('.circle').addEventListener('click', function() {
  var infoModal = document.getElementById('infoModal');
  infoModal.style.display = 'block';
});

// Close the new popup when the info-close button is clicked
document.querySelector('.info-close').addEventListener('click', function() {
  var infoModal = document.getElementById('infoModal');
  infoModal.style.display = 'none';
});

// Close the new popup when clicking outside the info-modal-content
window.addEventListener('click', function(event) {
  var infoModal = document.getElementById('infoModal');
  if (event.target === infoModal) {
    infoModal.style.display = 'none';
  }
});