async function addNewRule(eventName, workflowConditions) {
  console.log("Existing Workflow Conditions:", workflowConditions);
  const ticketworkflowContainer = document.getElementById('ticketworkflow-container');

  const eventContainer = document.createElement('div');
  eventContainer.classList.add('event-container');
  eventContainer.style.boxShadow = '0 5px 10px 0 rgba(0, 0, 0, 0.2)';
  eventContainer.style.padding = '30px';
  eventContainer.style.marginBottom = '15px';
  eventContainer.style.borderRadius = '5px';
  eventContainer.style.backgroundColor = '#fff';

  const newDropdownSet = document.createElement('div');
  newDropdownSet.classList.add('row', 'ticketworkflow-dropdown');

  // Use 'let' to allow reassignment of selectedEvent
  let selectedEvent = typeof eventName === 'string' ? eventName : ''; // Declaring selectedEvent here with 'let'

  newDropdownSet.innerHTML = `
      <div class="col-md-2 event-name-container">
          <fw-select
              class="event-name-dropdown"
              label="Select Event Name"
              required="true"
              placeholder="Your choice"
              hint-text="Select singular option">
              <fw-select-option value="TicketCreate" ${selectedEvent === "TicketCreate" ? "selected" : ""}>Ticket Create</fw-select-option>
              <fw-select-option value="TicketUpdate" ${selectedEvent === "TicketUpdate" ? "selected" : ""}>Ticket Update</fw-select-option>
              <fw-select-option value="TicketCreateandUpdate" ${selectedEvent === "TicketCreateandUpdate" ? "selected" : ""}>Ticket Create and Update</fw-select-option>
          </fw-select>
      </div>
  `;

  const eventSelect = newDropdownSet.querySelector('.event-name-dropdown');

  eventSelect.addEventListener('fwChange', async () => {
      const newEvent = eventSelect.value;

      console.log("Previous Selected Event:", selectedEvent); // Log the previous selected event

      console.log("New Event Name:", newEvent);
     
      const previousEventIndex = ticketworkflowconditions.findIndex(cond => cond.eventName === selectedEvent);
      
      if (previousEventIndex !== -1) {
          ticketworkflowconditions.splice(previousEventIndex, 1);
          console.log(`Removed existing condition for event: "${selectedEvent}"`);
      }

      // Clear existing field-related containers
      newDropdownSet.querySelectorAll('.field-name-container, .choices-container, .button-container').forEach(container => container.remove());

      // Create a new condition for the newly selected event
      const newCondition = { eventName: newEvent, isEnabled: true, fields: {} };
      ticketworkflowconditions.push(newCondition);
      console.log(`Added new condition for: "${newEvent}"`);

      // Create new containers for fields and choices
      const fieldNameContainer = document.createElement('div');
      fieldNameContainer.classList.add('col-md-2', 'field-name-container');
      newDropdownSet.appendChild(fieldNameContainer);

      const choicesContainer = document.createElement('div');
      choicesContainer.classList.add('col-md-2', 'choices-container');
      newDropdownSet.appendChild(choicesContainer);

      const buttonContainer = document.createElement('div');
      buttonContainer.classList.add('col-md-3', 'button-container');
      buttonContainer.style.marginTop = '25px';
      newDropdownSet.appendChild(buttonContainer);

      // Populate fields based on the new event's context
      await fieldschoosingvalues(newEvent, fieldNameContainer, choicesContainer, buttonContainer, newDropdownSet, null, null);

      // Log the updated state of ticketworkflowconditions
      console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);

      // Update the selected event after the change
      selectedEvent = newEvent; // Reassign selectedEvent here
  });

  // Append the newDropdownSet to the eventContainer
  eventContainer.appendChild(newDropdownSet);
  ticketworkflowContainer.appendChild(eventContainer);
}

async function fieldschoosingvalues(selectedEventValue, fieldNameContainer, choicesContainer, buttonContainer, container, selectedFieldName = null, selectedChoices = null) {
  if (!selectedEventValue) {
      console.error("fieldschoosingvalues called with an undefined selectedEventValue.");
      return;
  }

  try {
      let statusResp = await makeApiCall(apiKeyInput1.value, domainInput1.value);

      if (statusResp && statusResp.ticket_fields) {
          const fields = statusResp.ticket_fields.filter(field =>
              field.field_type.startsWith('default_') &&
              field.choices &&
              field.choices.length > 0
          );

          if (selectedFieldName) {
              const fieldContainer = document.createElement('div');
              fieldContainer.classList.add('field-container');
              fieldNameContainer.appendChild(fieldContainer);

              const choicesDiv = document.createElement('div');
              choicesDiv.classList.add('choices-container');
              choicesContainer.appendChild(choicesDiv);

              await getFieldnamesfrom1stapi(fieldContainer, fields, choicesDiv, selectedEventValue, buttonContainer, container, selectedFieldName, selectedChoices);
          } else {
              await getFieldnamesfrom1stapi(fieldNameContainer, fields, choicesContainer, selectedEventValue, buttonContainer, container);
          }
      } else {
          console.error('No fields found or data not available');
      }
  } catch (error) {
      console.error("Error fetching data for Dropdown:", error);
  }
}

async function getFieldnamesfrom1stapi(fieldNameContainer, fields, choicesContainer, selectedEventValue, buttonContainer, container, selectedFieldName = null, selectedChoices = null) {
  if (!selectedEventValue) {
    console.error("Select an event before proceeding.");
    return;
  }

  const fieldDropdown = document.createElement('fw-select');
  fieldDropdown.classList.add('field-name-dropdown');
  fieldDropdown.setAttribute('label', 'Ticket Fields');
  fieldDropdown.setAttribute('required', 'true');
  fieldDropdown.setAttribute('placeholder', 'Choose a field');
  fieldDropdown.setAttribute('hint-text', 'Select singular option');

  fields.forEach(field => {
    const option = document.createElement('fw-select-option');
    option.setAttribute('value', field.name);
    option.textContent = field.label;
    fieldDropdown.appendChild(option);

    // Select the current selected field if available
    if (selectedFieldName && field.name === selectedFieldName) {
      option.setAttribute('selected', 'selected');
    }
  });

  fieldNameContainer.appendChild(fieldDropdown);

  if (selectedFieldName) {
    const selectedField = fields.find(field => field.name === selectedFieldName);
    if (selectedField) {
      await showingitschoices(choicesContainer, selectedField, selectedEventValue, selectedFieldName, buttonContainer, container, fieldNameContainer, selectedChoices);
    } else {
      console.error('Field not found in Dropdown');
    }
  }

  fieldDropdown.addEventListener('fwChange', async (event) => {
    const newSelectedFieldName = event.target.value;

    // Find the event condition for the selected event name
    const eventCondition = ticketworkflowconditions.find(cond => cond.eventName === selectedEventValue);

    if (eventCondition) {
      const previousFieldName = selectedFieldName;  // Store the previous selected field name

      // Log the previous field name for debugging
      console.log(`Previous field name: ${previousFieldName}`);

      if (previousFieldName && previousFieldName !== newSelectedFieldName) {
        // Don't replace, just add new values
        if (!eventCondition.fields) {
          eventCondition.fields = {};
        }
        eventCondition.fields[newSelectedFieldName] = null;  // Add the new field with a placeholder value (null)
        console.log(`Added new field "${newSelectedFieldName}" to event condition.`);
      }

      // Clear the choices container before adding new choices
      choicesContainer.innerHTML = '';

      const newSelectedField = fields.find(field => field.name === newSelectedFieldName);
      if (newSelectedField) {
        await showingitschoices(choicesContainer, newSelectedField, selectedEventValue, newSelectedFieldName, buttonContainer, container, fieldNameContainer);
      } else {
        console.error('Field not found in Dropdown');
      }
    }
  });
}

async function showingitschoices(choicesContainer, selectedField, selectedEventValue, selectedFieldName, buttonContainer, container, fieldNameContainer, selectedChoices = null) {
  choicesContainer.innerHTML = ''; // Clear existing content

  // Create the choices dropdown
  const choicesDropdown = document.createElement('fw-select');
  choicesDropdown.classList.add('choices-dropdown');
  choicesDropdown.setAttribute('label', `${selectedFieldName}`);
  choicesDropdown.setAttribute('required', 'true');
  choicesDropdown.setAttribute('placeholder', `Choose ${selectedFieldName}`);
  choicesDropdown.setAttribute('hint-text', 'Select singular option');

  selectedField.choices.forEach(choice => {
    const option = document.createElement('fw-select-option');
    option.setAttribute('value', choice.id);
    option.textContent = choice.value;
    choicesDropdown.appendChild(option);

    if (selectedChoices && selectedChoices.includes(String(choice.id))) {
      option.setAttribute('selected', 'selected');
    }
  });

  // Append the choices dropdown to the container
  choicesContainer.appendChild(choicesDropdown);

  // Listen for changes in the choices selection
  choicesDropdown.addEventListener('fwChange', (event) => {
    const selectedChoiceId = event.target.value;

    // Find the event condition for the selected event name
    let eventCondition = ticketworkflowconditions.find(cond => cond.eventName === selectedEventValue);
    if (!eventCondition) {
      eventCondition = { eventName: selectedEventValue, isEnabled: true, fields: {} };
      ticketworkflowconditions.push(eventCondition);
    }

    // Update the fields object with the selected choice
    if (!eventCondition.fields) {
      eventCondition.fields = {};
    }
    eventCondition.fields[selectedFieldName] = selectedChoiceId;

    console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
  });

  // Add a button to create additional fields and choices
  const addButton = document.createElement('button');
  addButton.textContent = 'Add New Field & Choices';
  addButton.classList.add('btn', 'btn-primary', 'mt-3'); // Styling the button

  // Button event listener to add new fields and choices dropdowns
  addButton.addEventListener('click', () => {
    createAdditionalDropdowns(container);
  });

  // Append the add button to the button container
  buttonContainer.appendChild(addButton);
}

// Function to create additional dropdowns dynamically
function createAdditionalDropdowns(container) {
  // Create new containers for field name, choices, and button
  const fieldNameContainer = document.createElement('div');
  fieldNameContainer.classList.add('col-md-2', 'field-name-container', 'offset-md-2');
  const choicesContainer = document.createElement('div');
  choicesContainer.classList.add('col-md-2', 'choices-container');
  const buttonContainer = document.createElement('div');
  buttonContainer.classList.add('col-md-3', 'button-container', 'mt-3');

  // Create delete button
  const deleteButton = document.createElement('button');
  deleteButton.textContent = 'Delete';
  deleteButton.classList.add('btn', 'btn-danger', 'mt-2');
  buttonContainer.appendChild(deleteButton);

  // Append new containers to the main container
  container.appendChild(fieldNameContainer);
  container.appendChild(choicesContainer);
  container.appendChild(buttonContainer);

  // Call fieldschoosingvalues to populate new dropdowns
  fieldschoosingvalues(
    container.querySelector('.event-name-dropdown').value,
    fieldNameContainer,
    choicesContainer,
    buttonContainer,
    container
  );

  // Add delete functionality
  deleteButton.addEventListener('click', () => {
    fieldNameContainer.remove();
    choicesContainer.remove();
    buttonContainer.remove();
  });
}

i choosed a event and choosed field and choices.now if i need to add another event with same