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


  const selectedFields = Array.from(container.querySelectorAll('.field-name-dropdown'))
    .map((dropdown) => dropdown.value)
    .filter((value) => value);

  fields
    .filter((field) => !selectedFields.includes(field.name)) 
    .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';
  addButton.disabled = true; // Initially disable the Add button

  if (fieldIndex === container.querySelectorAll('.field-name-dropdown').length - 1) {
    // const buttonWrapper = document.createElement('div');
    // buttonWrapper.classList.add('button-wrapper');
    // buttonWrapper.appendChild(addButton);
    buttonContainer.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 (working Version)
// deleteButton.addEventListener('click', () => {
//     console.log(`Delete button clicked for mapping at index ${fieldIndex}`);

//     // Check if the field is the first dropdown (special case)
//     if (fieldIndex === 0) {
//         console.log("Resetting the first field and clearing its choices.");

//         fieldDropdown.value = ""; // Clear the value
//         fieldDropdown.setAttribute("placeholder", "Choose a field");
//         fieldDropdown.disabled = false;

//         choicesContainer.innerHTML = "";
//         choicesContainer.style.display = "block";

//         // Reset the JSON structure
//         const findRule = ticketworkflowconditions[ruleIndex];
//         if (findRule) {
//             const combination = findRule.event.combination;
//             combination[fieldIndex] = { field: null };

//             ticketworkflowconditions[ruleIndex] = {
//                 ...findRule,
//                 event: { ...findRule.event, combination },
//             };

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

//         console.log("First field and choices cleared, but position retained.");
//         return; // Exit cleanup logic
//     }

//     // For all other fields, do normal deletion
//     const findRule = ticketworkflowconditions[ruleIndex];
//     if (findRule) {
//         const combination = findRule.event.combination;

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

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

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

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

//     // Do not remove the `buttonContainer`—recycle it!

//     // Handle remaining dropdowns
//     const remainingDropdowns = container.querySelectorAll('.field-name-dropdown');

//     if (remainingDropdowns.length === 0) {
//         // No remaining dropdowns, ensure Add button exists in the buttonContainer
//         console.log("No remaining dropdowns, placing Add button in existing container.");
//         if (!buttonContainer.querySelector('.add-button')) {
//             addButton.disabled = false; // Enable the Add button
//             buttonContainer.appendChild(addButton);
//         }
//     } else {
//         // Dropdowns still exist, append the Add button to the last button container
//         console.log("Dropdowns still exist—placing Add button next to the last dropdown.");
//         const lastDropdownWrapper = remainingDropdowns[remainingDropdowns.length - 1].closest('.button-container');
//         if (lastDropdownWrapper && !lastDropdownWrapper.contains(addButton)) {
//             lastDropdownWrapper.appendChild(addButton);
//         }
//     }

//     console.log(`Field at index ${fieldIndex} deleted successfully.`);
// });




// // Working Version 2
// deleteButton.addEventListener('click', () => {
//     console.log(`Delete button clicked for mapping at index ${fieldIndex}`);

//     if (fieldIndex === 0) {
//         console.log("Resetting the first field and clearing its choices.");

//         // Reset the first dropdown
//         fieldDropdown.value = ""; // Clear value
//         fieldDropdown.setAttribute("placeholder", "Choose a field");
//         fieldDropdown.disabled = false;

//         choicesContainer.innerHTML = "";
//         choicesContainer.style.display = "block";

//         // Update backend JSON
//         const findRule = ticketworkflowconditions[ruleIndex];
//         if (findRule) {
//             const combination = findRule.event.combination;
//             combination[fieldIndex] = { field: null };

//             ticketworkflowconditions[ruleIndex] = {
//                 ...findRule,
//                 event: { ...findRule.event, combination },
//             };

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

//         console.log("First field and choices cleared, but position retained.");
//         return; // Exit cleanup logic
//     }

//     // Normal deletion for other fields
//     const findRule = ticketworkflowconditions[ruleIndex];
//     if (findRule) {
//         // Find the current index of the dropdown in the backend combination
//         const currentDropdowns = container.querySelectorAll('.field-name-dropdown');
//         const currentDropdownIndex = Array.from(currentDropdowns).indexOf(fieldDropdown); // Re-evaluate fieldIndex dynamically

//         if (currentDropdownIndex !== -1) {
//             const combination = findRule.event.combination;
//             combination.splice(currentDropdownIndex, 1); // Remove the correct index from the backend array

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

//             console.log(`Backend updated after deletion: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
//         } else {
//             console.error(`Dropdown not found in container. Backend update skipped.`);
//         }
//     }

//     // Remove field dropdown, choices, and delete button
//     fieldNameContainer.removeChild(fieldDropdown);
//     choicesContainer.innerHTML = '';
//     buttonContainer.removeChild(deleteButtonWrapper);

//     const remainingDropdowns = container.querySelectorAll('.field-name-dropdown');

//     if (remainingDropdowns.length === 0) {
//         // No remaining dropdowns—ensure Add button is in the buttonContainer
//         console.log("No remaining dropdowns, placing Add button in existing container.");
//         if (!buttonContainer.querySelector('.add-button')) {
//             addButton.disabled = false; // Enable Add button
//             buttonContainer.appendChild(addButton);
//         }
//     } else {
//         // Append the Add button to the last dropdown's button container
//         console.log("Dropdowns still exist—placing Add button next to the last dropdown.");
//         const lastDropdownWrapper = remainingDropdowns[remainingDropdowns.length - 1].closest('.button-container');
//         if (lastDropdownWrapper && !lastDropdownWrapper.contains(addButton)) {
//             lastDropdownWrapper.appendChild(addButton);
//         }
//     }

//     console.log(`Field at index ${fieldIndex} deleted successfully.`);
// });




deleteButton.addEventListener('click', () => {
    console.log(`Delete button clicked for mapping at index ${fieldIndex}`);

    // Special case: Reset the first field and retain the choices container
    if (fieldIndex === 0) {
        console.log("Resetting the first field and clearing its choices.");

        // Reset the first dropdown
        fieldDropdown.value = ""; // Clear value
        fieldDropdown.setAttribute("placeholder", "Choose a field");
        fieldDropdown.disabled = false; // Allow user to reselect

        choicesContainer.innerHTML = ""; // Clear inner choices, but retain the container
        choicesContainer.style.display = "block"; // Ensure it's still visible

        // Update backend JSON
        const findRule = ticketworkflowconditions[ruleIndex];
        if (findRule) {
            const combination = findRule.event.combination;
            combination[fieldIndex] = { field: null }; // Reset only the field itself

            ticketworkflowconditions[ruleIndex] = {
                ...findRule,
                event: { ...findRule.event, combination },
            };

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

        console.log("First field reset and choices cleared, but position retained.");
        return; // Exit here as we don't want to fully delete/remove the first dropdown or choices container
    }

    // Normal deletion for other fields
    const findRule = ticketworkflowconditions[ruleIndex];
    if (findRule) {
        // Find the dynamic index of the dropdown in the backend combination
        const currentDropdowns = container.querySelectorAll('.field-name-dropdown');
        const currentDropdownIndex = Array.from(currentDropdowns).indexOf(fieldDropdown);

        if (currentDropdownIndex !== -1) {
            const combination = findRule.event.combination;
            combination.splice(currentDropdownIndex, 1); // Remove backend combination at correct index

            ticketworkflowconditions[ruleIndex] = { 
                ...findRule, 
                event: { ...findRule.event, combination } 
            };

            console.log(`Backend updated after deletion: ${JSON.stringify(ticketworkflowconditions, null, 2)}`);
        } else {
            console.error(`Dropdown not found in the container. Backend update skipped.`);
        }
    }

    // Remove field dropdown, choices, and delete button (UI cleanup for NON-first fields)
    fieldNameContainer.removeChild(fieldDropdown);
    choicesContainer.innerHTML = ''; // Clear the choices
    buttonContainer.removeChild(deleteButtonWrapper);

    // Handle remaining dropdowns in the UI
    const remainingDropdowns = container.querySelectorAll('.field-name-dropdown');

    if (remainingDropdowns.length === 0) {
        // Ensure Add button is in the buttonContainer when no dropdowns are left
        console.log("No remaining dropdowns, placing Add button in existing container.");
        if (!buttonContainer.querySelector('.add-button')) {
            addButton.disabled = false; // Enable the Add button
            buttonContainer.appendChild(addButton);
        }
    } else {
        // Add button to the last dropdown's button container
        console.log("Dropdowns still exist—placing Add button next to the last dropdown.");
        const lastDropdownWrapper = remainingDropdowns[remainingDropdowns.length - 1].closest('.button-container');
        if (lastDropdownWrapper && !lastDropdownWrapper.contains(addButton)) {
            lastDropdownWrapper.appendChild(addButton);
        }
    }

    console.log(`Field at index ${fieldIndex} deleted successfully.`);
});



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

    addButton.disabled = false; // Enable the Add button when a field is selected

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





}



in this, add a model when i click delete icon 

  const modal = document.getElementById('composition');
        if (modal) {
          modal.setAttribute('is-open', 'true');
          modal.querySelector('fw-modal-title').innerHTML = `<span>Delete Mapping</span>`;
          modal.querySelector('fw-modal-content').innerHTML = `
            <span>Are you sure you want to delete the mapping for <strong>${rowData.merchantStatus}</strong> and <strong>${rowData.vendorStatus}</strong>?</span>
          `;

          // Add listener to delete mapping
          modal.addEventListener('fwSubmit', () => {
            delete mappings[rowData.id];
            renderStatusMappingTable();

            showSuccessToast("Selected Status Mapping has been Deleted!");

            modal.removeAttribute('is-open');
          }, { once: true });
        }
      },

like this in this if i click yes, then execute