baclight/app/views/employer_setup/plans.html.erb

<div class="min-h-screen w-full flex flex-col" data-controller="add-plan" data-add-plan-form-color-value="<%= EmployerSetupPlansForm::PLAN_COLORS.to_json %>">
  <h1 class="font-bold text-4xl text-platinum">New Employer Setup</h1>
  <h3 class="font-bold text-2xl text-bluemana">Medical Plans</h3>
  <div class="flex flex-col pl-6">
    <%= form_with model: @form, url: employer_setup_index_path, local: true do |f| %>
      <div class="w-full flex my-8">
        <div class="flex flex-wrap w-full" data-add-plan-target="container">
          <div class="flex flex-col items-stretch justify-end pr-6 pl-1 w-1/4">
          <%= f.fields_for :benefit_descs do |plan_benefit_fields| %>
            <%= plan_benefit_fields.hidden_field :plan_id, value: "descriptions" %>
            <% @form.benefits_template.each do |bene| %>
              <div>
                <%= plan_benefit_fields.text_field "benefit_#{bene.sequence}", label: { text: "Benefit Description #{bene.sequence}" }, value: "#{bene.benefit_desc}", class: "w-full" %>
              </div>
            <% end %>
          <% end %>
          </div>
          <% @form.plans.each_with_index do |plan, i|  %>
            <div class="inline-flex flex-col justify-end pr-6 pl-1 mt-10 relative w-1/4" data-controller="benefits-template-picker">
              <div class="absolute left-0 top-[2%] h-[98%] border-l-4 <%= "border-#{EmployerSetupPlansForm::PLAN_COLORS[i]}" %> rounded-bl-lg"></div>
              <div class="font-bold text-2xl <%= "text-#{EmployerSetupPlansForm::PLAN_COLORS[i]}" %> -ml-[6px] z-2  w-full">
                <%= "Plan #{i + 1}" %>
              </div>
              <%= f.fields_for :plans, index: i do |plan_fields| %>
                <div class="pl-1 w-full">
                  <%= plan_fields.text_field :plan_id, label: { text: "Plan Id" }, class: "w-full", data: { add_plan_target: "plan" } %>
                </div>
                <div class="pl-1">
                  <%= f.select :template_id, options_from_collection_for_select(@form.plan_templates, :id, :title), { prompt: "Select Plan Template" }, { data: { action: "benefits-template-picker#fetchData" }} %>
                </div>
                <% @form.benefits_template.each do |bene| %>
                  <div>
                    <div class="pl-1 w-full">
                      <%= plan_fields.text_field "benefit_#{bene.sequence}", label: { text: "Benefit Value #{bene.sequence}" }, data: { benefits_template_picker_target: "benefit",  sequence: "#{bene.sequence}"}, class: "w-full" %>
                    </div>
                  </div>
                <% end %>
              <% end %>
            </div>
          <% end %>
          <%= button_tag "Add a Plan", class: "cursor-pointer text-2xl font-bold py-2 pr-6 mt-10 w-[calc(24%-1rem)] w-1/4 min-h-[940px] text-[#E0E0E0] rounded-lg font-medium border border-[#E0E0E0] bg-[#173057] hover:bg-transparent hover:shadow-[0_0_10px_3px_#93c5fd] transition-colors duration-150", data: { action: "add-plan#add", add_plan_target: "button" } %>
          <template data-add-plan-target="template">
            <div class="inline-flex flex-col justify-end pr-6 pl-1 mt-10 relative w-1/4" data-controller="benefits-template-picker">
              <div class="absolute left-0 top-[2%] h-[98%] border-l-4 border-NEXT_COLOR rounded-bl-lg"></div>
              <div class="font-bold text-2xl text-NEXT_COLOR -ml-[6px] z-2  w-full">
                <%= "Plan NEW_PLAN" %>
              </div>
              <%= f.fields_for :plans, index: 'NEW_RECORD'  do |plan_fields| %>
                <div class="pl-1 w-full">
                  <%= plan_fields.text_field :plan_id, label: { text: "Plan Id" }, class: "w-full", data: { add_plan_target: "plan" } %>
                </div>
                <div class="pl-1">
                  <%= f.select :template_id, options_from_collection_for_select(@form.plan_templates, :id, :title), { prompt: "Select Plan Template" }, { data: { action: "benefits-template-picker#fetchData" }} %>
                </div>
                <% @form.benefits_template.each do |bene| %>
                  <div>
                    <div class="pl-1 w-full">
                      <%= plan_fields.text_field "benefit_#{bene.sequence}", label: { text: "Benefit Value #{bene.sequence}" }, data: { benefits_template_picker_target: "benefit",  sequence: "#{bene.sequence}"}, class: "w-full" %>
                    </div>
                  </div>
                <% end %>
              <% end %>
            </div>
          </template>
        </div>
      </div>
      <div class="py-10">
        <%= f.submit "Continue to Provider Network" %>
      </div>
    <% end %>
  </div>
</div>