else if (field.field_type === 'custom_dropdown') {
            createDropdownField(fieldsWithChoicesContainer, field, alldata);

            console.log("Dropdown Data :", alldata.mandatory_fields);

            hasFieldsWithChoices = true;
          }




function createDropdownField(container, field, matchedChoices = [], alldata) {
  console.log("Field Data :", field.required_for_agents);

  

  const fieldContainer = document.createElement('div');
  fieldContainer.classList.add('form-group');
  fieldContainer.style.marginBottom = '10px';

  // Create and append the label
  const fieldLabelElement = document.createElement('label');
  fieldLabelElement.innerHTML = `${field.label} <span style="color: red;">*</span>`;
  fieldLabelElement.setAttribute('for', `field_${field.id}`);
  fieldLabelElement.style.fontWeight = '600';
  fieldLabelElement.style.marginBottom = '8px';
  fieldContainer.appendChild(fieldLabelElement);

  // Create a wrapper for dropdown and delete button in a single row
  const rowContainer = document.createElement('div');
  rowContainer.style.display = 'flex';
  rowContainer.style.alignItems = 'center';

  // Create and append the fw-select dropdown
  const newDropdown = document.createElement('fw-select');
  newDropdown.setAttribute('required', 'true');
  newDropdown.setAttribute('placeholder', `Select ${field.label}`);
  newDropdown.id = `field_${field.id}`;
  newDropdown.style.flex = '1';
  newDropdown.style.marginRight = '10px';

  // // Create a default option
  // const defaultOption = document.createElement('fw-select-option');
  // defaultOption.value = '';
  // defaultOption.textContent = `Select ${field.label}`;
  // newDropdown.appendChild(defaultOption);

  // Add all options from field.choices
  field.choices.forEach(choice => {
    const option = document.createElement('fw-select-option');
    option.value = choice.value;
    option.textContent = choice.value;
    newDropdown.appendChild(option);
  });

  // Handle the selection change event
  newDropdown.addEventListener('fwChange', function (event) {
    selectedMandatoryFields[field.name] = event.target.value;
  });

  rowContainer.appendChild(newDropdown);

  if (field.required_for_agents) {
    // Wrap delete button in a tooltip if required_for_agents is true
    const tooltip = document.createElement('fw-tooltip');
    tooltip.setAttribute('content', 'This field is chosen as mandatory');

    const deleteButton = document.createElement('fw-button');
    deleteButton.setAttribute('size', 'icon');
    deleteButton.setAttribute('color', 'secondary');
    deleteButton.innerHTML = '<fw-icon name="delete" size="20"></fw-icon>';
    deleteButton.setAttribute('disabled', 'true');

    tooltip.appendChild(deleteButton);
    rowContainer.appendChild(tooltip);


  } else {

    // Add standard delete button for non-mandatory fields
    const deleteButton = document.createElement('fw-button');
    deleteButton.setAttribute('size', 'icon');
    deleteButton.setAttribute('color', 'secondary');
    deleteButton.innerHTML = '<fw-icon name="delete" size="20"></fw-icon>';

    deleteButton.addEventListener('click', function () {
      container.removeChild(fieldContainer); 
      delete selectedMandatoryFields[field.name]; 

      console.log('Remaining mandatory fields:', selectedMandatoryFields); // Log remaining mandatory fields
    });

    rowContainer.appendChild(deleteButton);
  }

  fieldContainer.appendChild(rowContainer);

  const hintText = document.createElement('div');
  hintText.classList.add('hint-text');
  hintText.style.fontSize = '12px';
  hintText.style.color = '#6c757d';
  hintText.style.marginTop = '4px';
  hintText.textContent = 'Select singular option';
  fieldContainer.appendChild(hintText);

  container.appendChild(fieldContainer);
}


pass alldata to this function and add a log