baclight/app/views/id_card/setup/index.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 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-3/5" data-controller="general-form provider-update">
          <div class="flex space-x-10">
            <div class="w-full">
              <%= f.text_field :print_name, label: { text: "Print Name" }, class: "w-full" %>
            </div>
            <div class="w-full">
              <%= f.text_field :rx_group_number, label: { text: "Rx Group Number" }, class: "w-full" %>
            </div>
          </div>
          <div class="flex space-x-10">
            <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 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" } %>
            </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" } %>
            </div>
          </div>
          <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 %>>
              <div class="flex w-full">
                <div class="flex flex-col w-full">
                    <%= f.text_field :employer_logo_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>
              <%= f.hidden_field :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>

            <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 flex flex-col" },  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="flex space-x-10">
            <div class="w-full">
              <%= f.select :rx_section_id, options_from_collection_for_select(@rx_options, :id, :title, @setup.rx_section_id || @fairos_rx_id), { include_blank: "Select Rx", class: "flex-col w-full" } %>
            </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: "flex flex-col w-full" },  data: { provider_update_target: "providerSectionField", general_form_target: "selectField", action: "change->general-form#toggleNewFieldSection"  } %>
            </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="py-8">
        <%= f.submit "Create ID Card Setup" %>
      </div>
    </div>
  <% end %>
</div>