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: '12H' },
        { value: '3h', text: '3HR' },
        { value: '12h', text: '10HR' },
        { value: '1D', text: '5HR' },
        { value: '2D', text: '1D' },
        { 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 === 'unregistered_user') {
      // 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);
    }
  });