async function addNewRule(eventName, workflowConditions) {

  console.log("Existing Workflow Conditions:", workflowConditions);

  // Log existing data for each event mapping
  workflowConditions.forEach(condition => {
    console.log(`Event: ${condition.eventName}`);
    console.log(`Fields: ${JSON.stringify(condition.fields, null, 2)}`);
  });

  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 = workflowConditions.findIndex(cond => cond.eventName === selectedEvent);
      
      if (previousEventIndex !== -1) {
          workflowConditions.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: {} };
      workflowConditions.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 workflowConditions
      console.log(`Updated workflowConditions: ${JSON.stringify(workflowConditions, 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) {
            // Send the selected field and its choices to showingitschoices for mapping
            await showingitschoices(choicesContainer, selectedField, selectedEventValue, selectedFieldName, buttonContainer, container, fieldNameContainer, selectedChoices);
        } else {
            console.error('Field not found in Dropdown');
        }
    }

    // Handle field change event and pass selected field to showingitschoices
    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) {
                // Send the newly selected field and its choices to showingitschoices for mapping
                await showingitschoices(choicesContainer, newSelectedField, selectedEventValue, newSelectedFieldName, buttonContainer, container, fieldNameContainer);
            } else {
                console.error('Field not found in Dropdown');
            }
        }
    });
}

for each mapping of event, it should send respective fields object to run getfieldsfrom1stapi and mapp existing value