<div class="bg-deepcove h-full w-full flex flex-col">
  <div class="flex items-center">
    <%= link_to employer_path(@employer.slug), class: "flex items-center h-14 space-x" do %>
      <div class="flex items-center h-14 text-bluemana hover:text-bronze">
        <%= icon "arrow-big-left-dash", library: "lucide", class: "h-full w-20 text-center" %>
        <div class="w-full pb-1 font-bold text-2xl">
            <%= "Back to Employer" %>
        </div>
      </div>
    <% end %>
  </div>
  <div class="flex space-x-6 my-5 font-bold text-4xl">
    <h1 class="text-platinum">Alternate ID Cards:</h1>
    <h1 class="text-atmosphere">(<%= @employer.name %>)</h1>
  </div>
  <div class="flex flex-col">
    <%= form_with model: @setup, url: update_field_exceptions_employer_id_card_setup_index_path(@employer.slug), local: true, multipart: true do |f| %>
      <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]}, exc.exception_type), { label: { text: "Alternate ID Card Determined By" }, prompt: "Select Type", class: "w-full" }, data: { add_exception_target: "exception" } %>             
                    </div>
                    <div class="w-[48%]">
                        <%= exception_fields.text_field :exception_values, value: exc.exception_values.join(', '), label: { text: "Alternate ID Card Determination Value(s)" }, class: "w-full" %>
                    </div>
                </div>
                <div class="flex flex-none items-center w-full pt-4 z-1">
                  <div class="flex flex-none text-xl text-left font-bold <%= "text-#{IdCard::Setup::FORM_COLORS[index]}" %>">
                      Alternate ID Card Change Items
                  </div>
                  <div class="grow h-[1px] mt-2 mx-1 <%= "bg-#{IdCard::Setup::FORM_COLORS[index]}" %>"></div>
                  <div class="flex flex-none text-xl text-left font-bold text-platinum">
                      (Changes to Employer Default Card)
                  </div>
                  <div class="flex flex-none w-3 h-[1px] mt-2 mx-1 <%= "bg-#{IdCard::Setup::FORM_COLORS[index]}" %>"></div>
                </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 Alternate ID Card Change Item", class: "cursor-pointer bg-#{IdCard::Setup::FORM_COLORS[index]} hover:bg-deepcove text-xl font-bold text-platinum my-3 py-1 font-semibold leading-tight rounded border-3 border-#{IdCard::Setup::FORM_COLORS[index]} 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 Alternate ID Card", class: "cursor-pointer text-lg font-medium py-2 px-4 rounded w-1/2 min-h-[340px] 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: "Alternate ID Card Determined By" }, prompt: "Select Type", class: "w-full" }, data: { add_exception_target: "exception" } %>             
                      </div>
                      <div class="w-[48%]">
                          <%= exception_fields.text_field :exception_values, label: { text: "Alternate ID Card Determination Value(s)" }, class: "w-full" %>
                      </div>
                  </div>
                  <div class="flex flex-none items-center w-full pt-4 z-1">
                    <div class="flex flex-none text-xl text-left font-bold text-NEXT_COLOR">
                        Alternate ID Card Change Items
                    </div>
                    <div class="grow h-[1px] mt-2 mx-1 bg-NEXT_COLOR"></div>
                    <div class="flex flex-none text-xl text-left font-bold text-platinum">
                        (Changes to Employer Default Card)
                    </div>
                    <div class="flex flex-none w-3 h-[1px] mt-2 mx-1 bg-NEXT_COLOR"></div>
                  </div>
                  <div class="flex flex-col w-full justify-start" data-controller="add-exception-item">
                    <%= button_tag "Add Alternate ID Card Change Item", 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="flex space-x-3 py-8">
        <%= f.submit "Save Alternate ID Cards" %>
      </div>
    <% end %>
  </div>
</div>
