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

  // Create the field dropdown
  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);

    if (selectedFieldName && field.name === selectedFieldName) {
      option.setAttribute('selected', 'selected');
    }
  });

  fieldNameContainer.appendChild(fieldDropdown);

  // Create the buttons
  const deleteButton = document.createElement('fw-button');
  deleteButton.setAttribute('size', 'icon');
  deleteButton.classList.add('delete-button');
  deleteButton.innerHTML = '<fw-icon name="delete" size="20" color="white"></fw-icon>';
 
  const deleteButtonWrapper = document.createElement('div');
  deleteButtonWrapper.classList.add('delete-button-container', 'mt-5');
  deleteButtonWrapper.appendChild(deleteButton);
  buttonContainer.appendChild(deleteButtonWrapper);

  const existingAddButton = container.querySelector('.add-button');
  if (existingAddButton) {
    existingAddButton.remove();
  }

  const addButton = document.createElement('fw-button');
  addButton.setAttribute('size', 'icon');
  addButton.classList.add('add-button');
  addButton.innerHTML = '<fw-icon name="plus" size="20" color="white"></fw-icon>';
  addButton.style.marginTop = '16px';
    
  if (fieldIndex === container.querySelectorAll('.field-name-dropdown').length - 1) {
    const buttonWrapper = document.createElement('div');
    buttonWrapper.classList.add('button-wrapper');   
    buttonWrapper.appendChild(addButton);
    buttonContainer.appendChild(buttonWrapper);
  }
  
  addButton.addEventListener('click', () => {
    console.log(ticketworkflowconditions[ruleIndex].event);
    const newIndex = ticketworkflowconditions[ruleIndex].event.combination.length;
    createAdditionalDropdowns(container, obj, ruleIndex, newIndex);
  });

  // Delete Combo Logics
  deleteButton.addEventListener('click', () => {
    console.log(`Delete button clicked for mapping at index ${fieldIndex}`);
    
    // Remove field from ticketworkflowconditions
    const findRule = ticketworkflowconditions[ruleIndex];
    if (findRule) {
      const combination = findRule.event.combination;

      // Remove the field from the combination
      combination.splice(fieldIndex, 1);

      // Update ticketworkflowconditions in the backend
      ticketworkflowconditions[ruleIndex] = { ...findRule, event: { ...findRule.event, combination } };

      console.log(`Backend updated after deletion: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
    }

    // Remove field dropdown and choices from the UI
    fieldNameContainer.removeChild(fieldDropdown);
    choicesContainer.innerHTML = '';
    buttonContainer.removeChild(deleteButtonWrapper);

    // If the containers are empty after deletion, remove them from the DOM
    if (fieldNameContainer.children.length === 0) {
      fieldNameContainer.remove();
    }
    if (choicesContainer.children.length === 0) {
      choicesContainer.remove();
    }
    if (buttonContainer.children.length === 0) {
      buttonContainer.remove();
    }

    // If this is the last field, remove the add button as well
    if (fieldIndex === container.querySelectorAll('.field-name-dropdown').length - 1) {
      const currentAddButton = buttonContainer.querySelector('.add-button');
      if (currentAddButton) {
        currentAddButton.remove();
      }
    }

    // If the overall container is empty (no fields), clean up/removal can be done here as needed
    if (
      container.querySelectorAll('.field-name-dropdown').length === 0 && 
      container.querySelectorAll('.delete-button-container').length === 0 &&
      container.querySelectorAll('.add-button').length === 0
    ) {
      container.innerHTML = ''; // Optionally clear the entire container or remove it
    }
  });


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

    choicesContainer.innerHTML = '';

    const newSelectedField = fields.find((field) => field.name === newSelectedFieldName);
    if (newSelectedField) {
      const findRule = ticketworkflowconditions[ruleIndex];
      if (findRule) {
        const combination = findRule.event.combination;

        const newKeyValue = { [newSelectedFieldName]: null };
        combination.splice(fieldIndex, 1, newKeyValue);

        if (combination)
          console.log(`Field changed. Updated backend: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
      }

      await showingitschoices(
        choicesContainer,
        newSelectedField,
        selectedEventValue,
        newSelectedFieldName,
        buttonContainer,
        container,
        fieldNameContainer,
        null,
        obj,
        ruleIndex,
        fieldIndex
      );

      console.log(`Field changed to: ${newSelectedFieldName}`);
    } else {
      console.error("Field not found in Dropdown");
    }
  });


  // Existing mapping
  if (selectedFieldName) {
    const selectedField = fields.find((field) => field.name === selectedFieldName);
    if (selectedField) {
      await showingitschoices(
        choicesContainer,
        selectedField,
        selectedEventValue,
        selectedFieldName,
        buttonContainer,
        container,
        fieldNameContainer,
        selectedChoices,
        obj,
        ruleIndex,
        fieldIndex
      );

      const findRule = ticketworkflowconditions[ruleIndex];
      const combination = findRule.combination;
      const newKeyValue = { [selectedFieldName]: selectedChoices ? selectedChoices[0] : null };
      combination.splice(fieldIndex, 1, newKeyValue);
      ticketworkflowconditions[ruleIndex] = { ...findRule, combination };

      console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
    } else {
      console.error("Field not found in Dropdown");
    }
  }


  


}

async function showingitschoices(
  choicesContainer,
  selectedField,
  selectedEventValue,
  selectedFieldName,
  buttonContainer,
  container,
  fieldNameContainer,
  selectedChoices = null, obj, ruleIndex, fieldIndex
) {
  choicesContainer.innerHTML = '';

  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');
    }
  });

  choicesContainer.appendChild(choicesDropdown);

  // // Check if the button has already been added
  // if (!buttonContainer.querySelector('fw-button[color="primary"]')) {
  //   const addButton = document.createElement('fw-button');
  //   addButton.textContent = 'Add';
  //   addButton.setAttribute('color', 'primary');
  //   buttonContainer.appendChild(addButton);
  
  //   addButton.addEventListener('click', () => {
  //     createAdditionalDropdowns(container, obj, ruleIndex, fieldIndex + 1);
  //   });
  // }

  // // Check if the danger button has already been added
  // if (!buttonContainer.querySelector('fw-button[color="danger"]')) {
  //   const space = document.createTextNode(' ');
  //   buttonContainer.appendChild(space);

  //   const deleteButton = document.createElement('fw-button');
  //   deleteButton.textContent = 'Delete';
  //   deleteButton.setAttribute('color', 'danger');
  //   buttonContainer.appendChild(deleteButton);

  //   deleteButton.addEventListener('click', () => {
  //     // Reset the first dropdown field container and remove choices container
  //     if (fieldIndex === 0) {
  //       fieldNameContainer.innerHTML = ''; // Reset the field dropdown
  //       choicesContainer.innerHTML = ''; // Reset the choices container
  //     } else {
  //       fieldNameContainer.remove();
  //       choicesContainer.remove();
  //       buttonContainer.remove();
  //       const findRule = ticketworkflowconditions[ruleIndex];
  //       findRule.event.combination.splice(fieldIndex, 1); // Remove this combination from the backend
  //     }
  //   });
  // }

  choicesDropdown.addEventListener('fwChange', (event) => {
    const selectedChoiceId = event.target.value;

    // if (!ticketworkflowconditions[selectedEventValue]) {
    //   ticketworkflowconditions[selectedEventValue] = { combinations: [{ isEnabled: true, fields: {} }] };
    // }
    // if(selectedEventValue){
    // Update JSON directly with selected field and choice
    const findRule = ticketworkflowconditions[ruleIndex];
    const combination = findRule.event.combination;
    const newKeyValue = { [selectedFieldName]: selectedChoiceId ? selectedChoiceId : null };
    combination.splice(fieldIndex, 1, newKeyValue);
    // ticketworkflowconditions[ruleIndex] = {...findRule, combination};
    // }

    // let combination = ticketworkflowconditions[selectedEventValue].combinations[0];
    // combination.fields[selectedFieldName] = selectedChoiceId;

    console.log(`Updated JSON with field: ${selectedFieldName}, choice: ${selectedChoiceId}`);
    console.log(`Updated ticketworkflowconditions: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
  });
}

in this if i choosed first set of field and choice and if i delete icon it should remove choices container and reset field dropdown