document.addEventListener("DOMContentLoaded", function () {
  const radio1 = document.getElementById("1-Practice");
  const practiceName = document.getElementById("practice-name");
  const radios = document.querySelectorAll('input[name="company_size"]');
  const selectSoftware = $("#practice_management_software_used"); // using jQuery

  // Get the label element related to the practice name input
  const practiceLabel = practiceName.closest("div").querySelector(".form_label");

  function updateFields() {
    if (radio1.checked) {
      // --- Change label text ---
      practiceLabel.textContent = "Practice Name *";

      // --- Update required attribute ---
      practiceName.required = true;

			// --- Reinitialize Select2 ---
      selectSoftware.select2({
        placeholder: "Select one options",
        allowClear: true,
        closeOnSelect: true,
        width: "100%",
      });

      // --- Remove multiple attribute from the select ---
      selectSoftware.removeAttr("multiple");
    } else {
      // --- Change label text ---
      practiceLabel.textContent = "DSO/Group Name *";

      // --- Update required attribute ---
      practiceName.required = true; // still required

      // --- Add multiple attribute to the select ---
      selectSoftware.attr("multiple", "multiple");

      // --- Reinitialize Select2 ---
      selectSoftware.select2({
        placeholder: "Select one or more options",
        allowClear: true,
        closeOnSelect: false,
        width: "100%",
      });
    }
  }

  // Run on load
  setTimeout(updateFields, 0);

  // Listen for radio changes
  radios.forEach((radio) => {
    radio.addEventListener("change", updateFields);
  });
});