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

<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">ID Card Setup:</h1>
    <h1 class="text-atmosphere">(<%= @employer.name %>)</h1>
  </div>
  <%= form_with model: @setup, url: employer_id_card_setup_path(id: @employer.slug), local: true, multipart: true do |f| %>
    <div class="flex flex-col space-y-6 pb-10">
      <div class="flex w-full items-end">
        <div class="flex flex-col space-y-6 w-4/5" data-controller="general-form provider-update">
          <div class="flex space-x-10">
            <div class="w-full flex flex-col items-start" data-controller="font-validator">
              <div class="w-full">
                <%= f.text_field :print_name, { label: { text: "Print Name" }, data: { font_validator_target: "textField", action: "input->font-validator#measure" }, class: "w-full" } %>
              </div>
              <div class="text-platinum font-md font-bold self-end"><span class="text-atmosphere" data-font-validator-target="countDisplayField"></span>/100px</div>

              <%= f.hidden_field :print_name_pixel_width, data: { font_validator_target: "hiddenField" } %>
            </div>
            <div class="w-full">
              <%= f.text_field :rx_group_number, label: { text: "Rx Group Number" }, class: "w-full" %>
            </div>
            <div class="w-full">
              <%= f.select :network_provider, options_for_select(["Cigna", "MedCost", "Other"], @setup.network_provider), { label: { text: "Provider Network" }, include_blank: "Select", class: "w-full" }, data: { provider_update_target: "providerNetworkField", action: "change->provider-update#syncDefaults" } %>
            </div>
          </div>
          <%= f.fields_for :employer_logo, @setup.employer_logo do |employer_logo_fields| %>
            <div class="flex space-x-10">
              <div class="flex flex-col items-start space-y-3 w-full" data-controller="logo-upload" data-logo-upload-logo-type-value="employer" data-logo-upload-employer-name-value="<%= @employer.name %>" data-logo-upload-employer-id-value="<%= @employer.id %>">
                <div class="flex w-full">
                  <div class="flex flex-col w-full">
                      <%= employer_logo_fields.text_field :filename, label: { text: "Employer Logo" }, default: "No logo added", data: { logo_upload_target: "logoNameField" }, 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="employer_logo_file" class="text-center cursor-pointer">
                          <%= icon "image-plus", library: "lucide" %>
                      </label>
                  </div>
                </div> 
                <div class="hidden flex ml-10 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>
                <%= employer_logo_fields.hidden_field :id, value: @setup&.employer_logo&.id, label: { text: "Employer Logo" }, data: { logo_upload_target: "logoIdField" }  %>
                <%= f.file_field :employer_logo_file, class: "hidden", id: "employer_logo_file", data: { logo_upload_target: "previewContainer", action: "change->logo-upload#uploadLogo" }, direct_upload: true %>
              </div>
            <% end %>
            <div class="flex flex-col items-start space-y-3 w-full" data-controller="logo-upload" data-logo-upload-logo-type-value="network">
              <div class="flex w-full">
                  <div class="flex flex-col w-full">
                      <%= f.select :network_logo_id, options_for_select(IdCard::NetworkLogo.pluck(:filename, :id), @setup.network_logo_id), { include_blank: "Select/Add Network Logo", class: "rounded-r-none w-full" },  data: { provider_update_target: "networkLogoField", logo_upload_target: "logoIdField", action: "change->logo-upload#setSelectPreview" }  %>
                  </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="network_logo_file" class="text-center cursor-pointer">
                          <%= icon "image-plus", library: "lucide" %>
                      </label>
                  </div>
              </div>
              <div class="hidden flex ml-10 justify-center rounded-lg border-4 border-atmosphere" data-logo-upload-target="previewContainer">
                  <img data-logo-upload-target="preview" src="#" alt="Netwoek Logo preview" class="max-h-[100px] max-w-[133px] bg-platinum m-1"/>
              </div>
              <%= f.file_field :network_logo_file, class: "hidden", id: "network_logo_file", data: { logo_upload_target: "previewContainer", action: "change->logo-upload#uploadLogo" }, direct_upload: true %>
            </div>
          </div>
          <div class="w-full flex items-center pt-6">
              <h3 class="flex-none font-bold text-2xl text-brightlava">Admin</h3>
              <div class="grow h-[1px] mt-2 ml-1 bg-brightlava"></div>
          </div>
          <div class="flex flex-none space-x-10">
            <div class="w-full">
              <%= f.select :card_template, options_for_select([["FairosRx", "FairosRxIDCard"], ["Tandemloc", "TandemlocIDCard"], ["smART", "SmartIDCard"], ["QRCode (Healthbus)", "QRCodeIDCard"]], @setup.card_template || "FairosRxIDCard" ), { label: { text: "Card Template" }, include_blank: "Select", class: "w-full pointer-events-none opacity-65 cursor-not-allowed" } %>
            </div>
            <div class="w-full hidden">
              <%= f.select :rx_section_id, options_from_collection_for_select(@rx_options, :id, :title, @setup.rx_section_id || @rx_default.id), { include_blank: "Select Rx", class: "flex-col w-full pointer-events-none opacity-65 cursor-not-allowed" } %>
            </div>
            <div class="w-full">
              <%= f.select :provider_section_id, options_for_select(@provider_options, @setup.provider_section_id || ""),  { label: { text: "Claims Submission Section" }, include_blank: "Select/Add Claims Submission", class: "w-full pointer-events-none opacity-65 cursor-not-allowed" },  data: { provider_update_target: "providerSectionField", general_form_target: "selectField", action: "change->general-form#toggleNewFieldSection"  } %>
            </div>
            <div class="w-full">
              <%= f.select :card_color, options_for_select([["White", "white"], ["Blue", "blue"]], @setup.card_color || "white" ), { label: { text: "Card Color" }, include_blank: "Select", class: "w-full pointer-events-none opacity-65 cursor-not-allowed" } %>
            </div>
          </div>
          <div class="w-full hidden" data-general-form-target="dependentField">
            <div class="text-xl text-left font-bold text-platinum pt-8">
                New Claims Submission Section
            </div>
            <%= f.fields_for :provider_section do |provider_fields| %>
              <div class="flex w-full space-x-3">
                  <div class="flex flex-col w-1/2">
                      <%= render 'claim_fields', provider_fields: provider_fields %>
                  </div>
                  <div class="flex flex-col w-1/2">
                      <%= render 'provider_fields', provider_fields: provider_fields %>
                  </div>
              </div>
            <% end %>
          </div>

        </div>
      </div>
      <div class="flex space-x-3 py-8">
        <%= f.submit "Save ID Card Setup" %>
      </div>
    </div>
  <% end %>
</div>