Init dump

app/javascript/controllers/application.js

@@ -7,5 +7,3 @@ application.debug = false
 window.Stimulus   = application
 
 export { application }
-
-console.log('Hello World from controllers/application.js');

app/javascript/controllers/benefits_template_picker_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static values = { url: String };
+  static targets = ["benefit_1", "benefit_2", "benefit_3", "benefit_4", "benefit_5", "benefit_6", "benefit_7", "benefit_8", "benefit_9", "benefit_10", "benefit_11", "benefit_12", "benefit_13", "benefit_14"];
+
+  async fetchData(event) {
+    const templateId = event.target.value;
+    if (!templateId) {
+      this.clearFields();
+      return;
+    }
+    
+    const url = "/id_card_benefits_templates/get_templates_benefits/:id".replace(':id', templateId);
+    const response = await fetch(url);
+    const templateBenefitsData = await response.json();
+
+
+
+    this.nameTarget.value = templateData.name;
+    this.descriptionTarget.value = templateData.description;
+  }
+
+  clearFields() {
+    this.nameTarget.value = '';
+    this.descriptionTarget.value = '';
+  }
+
+  updateFields(templateBenefitsData) {
+    templateBenefitsData.forEach(function(benefit) {
+      const propertyName = `benefit_${benefit.sequence}`
+      this[propertyName].value = benefit.benefit
+    });
+  }
+}
+
+// this[propertyName]
+// const propertyName = `${valueName}Value`;

app/javascript/controllers/dynamic_plan_fields_controller.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["numberInput", "planFieldsContainer", "template"];
+
+  connect() {
+    this.updatePlanFields();
+  }
+
+  updatePlanFields() {
+    const desiredCount = parseInt(this.numberInputTarget.value || 1, 10);
+    const currentCount = this.planFieldsContainerTarget.children.length;
+
+    if (desiredCount > currentCount) {
+      this.addPlanFields(desiredCount - currentCount);
+    } else if (desiredCount < currentCount) {
+      this.removePlanFields(currentCount - desiredCount);
+    }
+  }
+
+  addPlanFields(count) {
+    for (let i = 0; i < count; i++) {
+      const newPlanField = this.templateTarget.content.cloneNode(true);
+      // Replace '__INDEX__' with a unique value for nested attributes
+      // e.g., using Date.now() or a counter
+      const uniqueIndex = Date.now() + i;
+      newPlanField.innerHTML = newPlanField.innerHTML.replace(/__INDEX__/g, uniqueIndex);
+      this.planFieldsContainerTarget.appendChild(newPlanField);
+    }
+  }
+
+  removePlanFields(count) {
+    for (let i = 0; i < count; i++) {
+      this.planFieldsContainerTarget.lastElementChild.remove();
+    }
+  }
+}

app/javascript/controllers/form_toggle_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["divA"] // Add targets for all your divs
+
+  connect() {
+    this.toggleDivs() // Call on connect to set initial state
+  }
+
+  toggleDivs() {
+    const selectedValue = this.element.querySelector('select').value;
+    console.log("sv: ")
+
+    // Hide all divs first
+    this.divATarget.classList.add("hidden");
+
+    // Show the relevant div based on selection
+    if (selectedValue === "cig+") {
+      this.divATarget.classList.remove("hidden");
+    }
+  }
+}