baclight/app/views/id_card/setup/field_exceptions.html.erb

<div class="bg-deepcove h-full w-full flex flex-col">
  <div class="flex space-x-6 my-5 font-bold text-4xl">
    <h1 class="text-platinum">ID Card Exceptions:</h1>
    <h1 class="text-atmosphere">(<%= @employer.name %>)</h1>
  </div>
  <%= form_with model: @setup, url: update_field_exceptions_employer_id_card_setup_index_path(@employer.slug), local: true, multipart: true do |f| %>
    <div class="flex flex-col">
      <div class="w-full flex pb-10">
        <div class="flex flex-wrap w-full justify-start space-y-12 my-8" data-controller="add-exception" data-add-exception-form-color-value="<%= IdCard::Setup::FORM_COLORS.to_json %>">
          <% @setup.field_exceptions.each_with_index do |exc, index| %>
            <%= f.fields_for :field_exceptions, exc, child_index: index do |exception_fields| %>
                <div class="flex flex-col pr-6 w-1/2">
                  <div class="flex justify-between items-end w-full pb-2">
                      <div class="w-[48%]">
                          <%= exception_fields.select :exception_type, options_for_select(IdCard::FieldException::VALID_TYPES.map { |type| [type.titleize(keep_id_suffix: true), type]  }), { label: { text: "Exception Based On" }, prompt: "Select Type", class: "w-full" }, data: { add_exception_target: "exception" } %>             
                      </div>
                      <div class="w-[48%]">
                          <%= exception_fields.text_field :exception_value, label: { text: "Exception Value" }, class: "w-full" %>
                      </div>
                  </div>
                  <div class="text-xl text-left font-bold mb-[-4px] z-1 text-platinum">
                      Field Exception Items
                  </div>
                  <div class="w-full h-[3px] rounded-r bg-NEXT_COLOR ml-[1px] mb-1"></div>
                  <div class="flex flex-col w-full justify-start" data-controller="add-exception-item">
                    <%= exception_fields.fields_for :field_exception_items do |exception_item_fields| %>
                      <div class="flex justify-between items-start w-full" data-controller="exceptions-toggle">
                        <div class="w-[42%]">
                            <%= exception_item_fields.select :field_name, options_for_select(IdCard::FieldExceptionItem::VALID_FIELD_NAMES.map { |field_name| [field_name.titleize, field_name] },  exception_item_fields.object.field_name ), { label: { text: "Card Field" }, prompt: "Select Card Field", class: "w-full" }, { data: { action: "change->exceptions-toggle#toggleFields", add_exception_item_target: "exceptionItem", exceptions_toggle_target: "selectField" } } %>
                        </div>
                        <div class="w-[42%] hidden">
                            <%= exception_item_fields.text_field :field_value, value: exception_item_fields.object.field_value, label: { text: "New Value" }, data: { exceptions_toggle_target: "dependentField", parent_value: "default" }, class: "w-full" %>
                        </div>
                        <%= render 'alt_network_logo_fields', exception_item_fields: exception_item_fields %>
                        <div class="w-[42%] hidden">
                            <%= exception_item_fields.select :provider_section_id, options_for_select(IdCard::ProviderSection.where.not(title: nil).map { |provider| [provider.title, provider.id]  }, exception_item_fields.object.provider_section_id), { prompt: "Select Provider Template", class: "w-full" }, { data: { exceptions_toggle_target: "dependentField", parent_value: "provider_section" } } %>
                        </div>
                        <div class="mt-6 ml-1">
                            <%= exception_item_fields.hidden_field :_destroy %>
                            <%= button_tag "Remove", class: "cursor-pointer flex items-center justify-center bg-brightlava font-bold text-lg text-platinum py-[6px] px-1 font-semibold leading-tight rounded-lg border-3 border-brightlava w-full", data: { action: "add-exception-item#removeExemptionItem" } %>
                        </div>
                      </div>
                    <% end %>
                    <%= button_tag "Add Another Item To Exception", class: "cursor-pointer bg-NEXT_COLOR hover:bg-deepcove text-xl font-bold text-platinum my-3 py-1 font-semibold leading-tight rounded border-3 border-NEXT_COLOR w-full", data: { action: "add-exception-item#addExemptionItem", add_exception_item_target: "exceptionItemButton" } %>
                    <template data-add-exception-item-target="exceptionItemTemplate">
                      <%= exception_fields.fields_for :field_exception_items, IdCard::FieldExceptionItem.new, child_index: 'NEW_ITEM_RECORD' do |exception_item_fields| %>
                        <div class="flex justify-between items-start w-full" data-controller="exceptions-toggle">
                          <div class="w-[42%]">
                              <%= exception_item_fields.select :field_name, options_for_select(IdCard::FieldExceptionItem::VALID_FIELD_NAMES.map { |field_name| [field_name.titleize, field_name]  }), { label: { text: "Card Field" }, prompt: "Select Card Field", class: "w-full" }, { data: { action: "change->exceptions-toggle#toggleFields", add_exception_item_target: "exceptionItem", exceptions_toggle_target: "selectField"  } } %>
                          </div>
                          <div class="w-[42%] hidden">
                              <%= exception_item_fields.text_field :field_value, label: { text: "New Value" }, data: { exceptions_toggle_target: "dependentField", parent_value: "default" }, class: "w-full" %>
                          </div>
                          <%= render 'alt_network_logo_fields', exception_item_fields: exception_item_fields %>
                          <div class="w-[42%] hidden">
                              <%= exception_item_fields.select :provider_section_id, options_for_select(IdCard::ProviderSection.where.not(title: nil).map { |provider| [provider.title, provider.id]  }), { prompt: "Select Provider Template", class: "w-full" }, { data: { exceptions_toggle_target: "dependentField", parent_value: "provider_section" } } %>
                          </div>
                          <div class="mt-6 ml-1">
                              <%= exception_item_fields.hidden_field :_destroy %>
                              <%= button_tag "Remove", class: "cursor-pointer flex items-center justify-center bg-brightlava font-bold text-lg text-platinum py-[6px] px-1 font-semibold leading-tight rounded-lg border-3 border-brightlava w-full", data: { action: "add-exception-item#removeExemptionItem" } %>
                          </div>
                        </div>
                      <% end %>
                    </template>
                  
                </div>
              </div>
            <% end %>
          <% end %>
          <%= button_tag "Add an Exception", class: "cursor-pointer text-lg font-medium py-2 px-4 rounded w-1/2 h-4/5 mt-3 text-[#E0E0E0] rounded-lg border border-[#C2C2C2] hover:shadow-[0_0_10px_3px_#93c5fd]", data: { action: "add-exception#addExemption", add_exception_target: "exceptionButton" } %>
          <template data-add-exception-target="exceptionTemplate">
              <%= f.fields_for :field_exceptions, @setup.field_exceptions.build, child_index: 'NEW_RECORD' do |exception_fields| %>
                <div class="flex flex-col pr-6 w-1/2 pl-1">
                  <div class="flex justify-between items-end w-full pb-2">
                      <div class="w-[48%]">
                          <%= exception_fields.select :exception_type, options_for_select(IdCard::FieldException::VALID_TYPES.map { |type| [type.titleize(keep_id_suffix: true), type]  }), { label: { text: "Exception Based On" }, prompt: "Select Type", class: "w-full" }, data: { add_exception_target: "exception" } %>             
                      </div>
                      <div class="w-[48%]">
                          <%= exception_fields.text_field :exception_value, label: { text: "Exception Value" }, class: "w-full" %>
                      </div>
                  </div>
                  <div class="text-xl text-left font-bold mb-[-4px] z-1 text-platinum">
                      Field Exception Items
                  </div>
                  <div class="w-full h-[3px] rounded-r bg-NEXT_COLOR ml-[1px] mb-1"></div>
                  <div class="flex flex-col w-full justify-start" data-controller="add-exception-item">
                    <%= button_tag "Add Another Item To Exception", class: "cursor-pointer bg-NEXT_COLOR hover:bg-deepcove text-xl font-bold text-platinum my-3 py-1 font-semibold leading-tight rounded border-3 border-NEXT_COLOR w-full", data: { action: "add-exception-item#addExemptionItem", add_exception_item_target: "exceptionItemButton" } %>
                    <template data-add-exception-item-target="exceptionItemTemplate">
                        <%= exception_fields.fields_for :field_exception_items, IdCard::FieldExceptionItem.new, child_index: 'NEW_ITEM_RECORD' do |exception_item_fields| %>
                          <div class="flex justify-between items-start w-full" data-controller="exceptions-toggle">
                            <div class="w-[42%]">
                                <%= exception_item_fields.select :field_name, options_for_select(IdCard::FieldExceptionItem::VALID_FIELD_NAMES.map { |field_name| [field_name.titleize, field_name]  }), { label: { text: "Card Field" }, prompt: "Select Card Field", class: "w-full" }, { data: { action: "change->exceptions-toggle#toggleFields", add_exception_item_target: "exceptionItem", exceptions_toggle_target: "selectField" } } %>
                            </div>
                            <div class="w-[42%] hidden">
                                <%= exception_item_fields.text_field :field_value, label: { text: "New Value" }, data: { exceptions_toggle_target: "dependentField", parent_value: "default" }, class: "w-full" %>
                            </div>
                            <%= render 'alt_network_logo_fields', exception_item_fields: exception_item_fields %>
                            <div class="w-[42%] hidden">
                                <%= exception_item_fields.select :provider_section_id, options_for_select(IdCard::ProviderSection.where.not(title: nil).map { |provider| [provider.title, provider.id]  }), { prompt: "Select Provider Template", class: "w-full" }, { data: { exceptions_toggle_target: "dependentField", parent_value: "provider_section" } } %>
                            </div>
                            <div class="mt-6 ml-1">
                                <%= exception_item_fields.hidden_field :_destroy %>
                                <%= button_tag "Remove", class: "cursor-pointer flex items-center justify-center bg-brightlava font-bold text-lg text-platinum py-[6px] px-1 font-semibold leading-tight rounded-lg border-3 border-brightlava w-full", data: { action: "add-exception-item#removeExemptionItem" } %>
                            </div>
                          </div>
                        <% end %>
                    </template>
                  </div>
                </div>
              <% end %>
          </template>
        </div>
      </div>
      <div class="py-8">
        <%= f.submit "Submit Network" %>
      </div>
    </div>
  <% end %>
</div>