baclight/app/views/employers_old/new_new.html.erb

<div class="bg-deepcove h-full w-full flex flex-col">
  <div class="flex justify-between">
    <h1 class="font-bold text-4xl text-platinum my-5">New Employer</h1>
    <%= form_with model: @employer, url: import_employers_path, data: { turbo: false }, local: true, multipart: true do |form| %>
      <div class="flex items-end space-x-4">
        <div class="flex flex-col">
          <%= form.label :import_from_word, 'ID Card Setup Word Doc', class: "block text-platinum font-bold mb-1 md:mb-0 pr-4" %>
          <%= form.file_field :import_from_word %>
        </div>
        <%= form.submit "Import", class: "h-[40px]" %>
      </div>
    <% end %>
  </div>
  <%= form_with model: @employer, local: true, multipart: true do |f| %>
    <div class="flex flex-col space-y-6 pb-10">
      <div class="w-full flex items-center">
        <h3 class="font-bold text-2xl text-bluemana">General Information</h3>
        <div class="h-[1px] w-1/2 mt-2 bg-bluemana"></div>
      </div>
      <div class="flex w-full items-end" data-controller="logo-upload">
        <div class="flex flex-col space-y-6 w-2/5">
          <div class="flex space-x-10">
            <div class="w-full">
              <%= f.text_field :name, label: { text: "Employer Name" }, data: { logo_upload_target: "employer" }, class: "w-full" %>
            </div>
            <div class="w-full">
              <%= f.text_field :group_number, label: { text: "Group/Medical Number" }, class: "w-full" %>
            </div>
          </div>
          <div class="flex space-x-10">
            <div class="w-full">
              <%= f.text_field :effective_date, label: { text: "Effective Date" }, class: "w-full" %>
            </div>
            <div class="w-full">
              <%= f.select :network_provider, options_for_select(["Cigna", "Medcost"]), label: { text: "Provider Network" }, data: { logo_upload_target: "network" }, class: "w-full" %>
              <%= f.hidden_field :single_card_template, value: @employer.single_card_template %>
              <%= f.hidden_field :default_network_logo, value: @employer.default_network_logo %>
              <%= f.hidden_field :card_provider_id, value: @employer.card_provider_id %>
              <%= f.hidden_field :card_rx_id, value: @employer.card_rx_id %>
            </div>
          </div>
          <div class="flex items-end">
            <div class="flex">
              <div class="flex flex-col">
                  <%= f.text_field :employer_logo_filename, label: { text: "Employer Logo" }, default: "No logo added", data: { logo_upload_target: "logofield" }, class: "w-full rounded-r-none", readonly: true %>
              </div>
              <div class="flex items-center justify-center self-end cursor-pointer bg-atmosphere hover:bg-deepcove border-2 border-atmosphere text-platinum font-bold px-3 rounded-r h-10 transition duration-100">
                  <label for="file_upload_input_employer" class="text-center cursor-pointer">
                      <%= icon "image-plus", library: "lucide" %>
                  </label>
              </div>
            </div>
            <div class="hidden flex justify-center ml-15 rounded-lg border-4 border-atmosphere" data-logo-upload-target="previewContainer">
                <img data-logo-upload-target="preview" src="#" alt="Employer Logo preview" class="max-h-[100px] max-w-[133px] bg-platinum m-1"/>
            </div>
            <%= f.file_field :add_or_update_logo, class: "hidden", id: "file_upload_input_employer", data: { logo_upload_target: "previewContainer", logo_upload_type_param: "employer", action: "change->logo-upload#uploadLogo" }, direct_upload: true %>
          </div>
        </div>
      </div>
      <div class="w-full flex items-center">
        <h3 class="font-bold text-2xl text-bluemana">Plans Information</h3>
        <div class="h-[1px] w-1/2 mt-2 bg-bluemana"></div>
      </div>
      <div class="w-full flex my-8" data-controller="add-plan" data-add-plan-form-color-value="<%= IdCard::Configuration::FORM_COLORS.to_json %>" >
        <div class="flex flex-wrap w-full" data-add-plan-target="container">
          <% @employer.plans.each_with_index do |plan, index| %>
            <%= f.fields_for :plans, plan, child_index: index do |plan_fields| %>
              <div class="inline-flex flex-col justify-end pr-6 w-1/4 relative pl-1 plan-item" data-controller="benefits-template-picker">
                <div class="absolute left-0 top-[2%] h-[98%] border-l-4 <%= "border-#{IdCard::Configuration::FORM_COLORS[index]}" %> "></div>
                <div class="font-bold text-2xl <%= "text-#{IdCard::Configuration::FORM_COLORS[index]}" %> -ml-[6px] z-2  w-full">
                    <%= "Plan #{index + 1}" %>
                </div>
                <%= render 'plan_fields', plan_fields: plan_fields, f: f, index: index %>
                <div class="text-xl text-left font-bold pl-[2px] mb-[-4px] z-1 <%= "text-#{IdCard::Configuration::FORM_COLORS[index]}" %>">
                    Benefit Values
                </div>
                <div class="w-full h-[3px] rounded-r <%= "bg-#{index % 2 == 1 ? 'bronze' : 'copper'}" %> ml-[3px]"></div>
                <%= plan_fields.fields_for :plan_benefits do |plan_benefits_fields| %>
                            <%= render 'plan_benefits_fields', plan_benefits_fields: plan_benefits_fields %>
                <% end %>
                <div class="mt-4 pl-1">
                    <%= plan_fields.hidden_field :_destroy %>
                    <%= button_tag "Remove Plan  #{index + 1}", class: "cursor-pointer bg-deepcove hover:bg-brightlava text-xl font-bold text-copper hover:text-platinum py-2 px-4 font-semibold leading-tight rounded-lg border-3 border-copper w-full", data: { action: "add-plan#remove" } %>
                </div>
              </div>
            <% end %>
          <% 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" } %>
          </div>
          <template data-add-plan-target="template">
            <%= f.fields_for :plans, @employer.build_plan_with_default_benefits, child_index: 'NEW_RECORD'  do |plan_fields| %>
                <div class="inline-flex flex-col justify-end pr-6 w-1/4 relative pl-1 plan-item" data-controller="benefits-template-picker">
                    <div class="absolute left-0 top-[2%] h-[98%] border-l-4 border-NEXT_COLOR"></div>
                    <div class="font-bold text-2xl text-NEXT_COLOR -ml-[6px] z-2 w-full">
                        <%= "Plan NEW_PLAN" %>
                    </div>
                    <%= render 'plan_fields', plan_fields: plan_fields, f: f, index: "NEW_RECORD".to_i %>
                    <div class="text-xl text-left font-bold pl-[2px] mb-[-4px] z-1 text-NEXT_COLOR">
                      Benefit Values
                    </div>
                    <div class="w-full h-[3px] rounded-r bg-NEXT_SECONDARY_COLOR ml-[3px]"></div>
                    <%= plan_fields.fields_for :plan_benefits do |plan_benefits_fields| %>
                        <%= render 'plan_benefits_fields', plan_benefits_fields: plan_benefits_fields %>
                    <% end %>
                    <div class="mt-4 pl-1">
                        <%= plan_fields.hidden_field :_destroy %>
                        <%= button_tag "Remove Plan NEW_PLAN", class: "cursor-pointer bg-deepcove hover:bg-brightlava text-xl font-bold text-NEXT_SECONDARY_COLOR hover:text-platinum py-2 px-4 font-semibold leading-tight rounded-lg border-3 border-NEXT_SECONDARY_COLOR w-full", data: { action: "add-plan#remove" } %>
                    </div>
                </div>
            <% end %>
          </template>
        </div>
      </div>

      <div class="w-full flex items-center">
        <h3 class="font-bold text-2xl text-bluemana">ID Card Exceptions Information</h3>
        <div class="h-[1px] w-1/2 mt-2 bg-bluemana"></div>
      </div>
      <div class="flex flex-wrap w-full justify-start my-8" data-controller="add-exception" data-add-exception-form-color-value="<%= IdCard::Configuration::FORM_COLORS.to_json %>">
        <%= button_tag "Add an Exception", class: "cursor-pointer text-lg font-medium py-2 px-4 rounded w-1/7 h-35 my-8 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 :card_exceptions, CardException.new, 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 :type, options_for_select(CardException::VALID_TYPES.map { |type| [type.titleize(keep_id_suffix: true), type]  }), { label: { text: "Exception Based On" }, prompt: "Select Type", class: "w-full" } %>             
                    </div>
                    <div class="w-[48%]">
                        <%= exception_fields.text_field :value, label: { text: "Exception Value" }, class: "w-full" %>
                    </div>
                </div>
                <div class="text-xl text-left font-bold mb-[-4px] z-1 text-platinum">
                    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 :card_exception_items, CardExceptionItem.new, child_index: 'NEW_ITEM_RECORD' do |exception_item_fields| %>
                        <div class="flex justify-between items-end w-full" data-controller="general-form">
                          <div class="w-[42%]">
                              <%= exception_item_fields.select :field_name, options_for_select(CardExceptionItem::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->general-form#toggleFields"} } %>
                          </div>
                          <div class="w-[42%] hidden">
                              <%= exception_item_fields.text_field :field_value, label: { text: "New Value" }, data: { general_form_target: "dependentField", parent_value: "default" }, class: "w-full" %>
                          </div>
                          <%= render 'alt_network_logo_fields_new', exception_item_fields: exception_item_fields %>
                          <div class="w-[42%] hidden">
                              <%= exception_item_fields.select :card_provider_id, options_for_select(CardProvider.where.not(title: nil).map { |provider| [provider.title, provider.id]  }), { prompt: "Select Provider Template", class: "w-full" }, { data: { general_form_target: "dependentField", parent_value: "provider_section" } } %>
                          </div>
                          <div class="mt-4 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-2 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 class="py-8">
        <%= f.submit "Submit" %>
      </div>
    </div>
  <% end %>
</div>