<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 Network:</h1>
    <h1 class="text-atmosphere">(<%= @employer.name %>)</h1>
  </div>
  <%= form_with model: @setup, url: update_network_employer_id_card_setup_index_path(@employer.slug), local: true, multipart: true do |f| %>
    <div class="flex flex-col space-y-6 pb-10">
      <div class="flex flex-col space-y-6 w-full" data-controller="logo-upload" data-logo-upload-logo-type-value="network">

        <div class="flex w-2/5">
          <div class="flex items-end">
            <div class="flex">
                <div class="flex flex-col w-full">
                    <%= f.select :network_logo_id, options_for_select(IdCard::NetworkLogo.pluck(:filename)), { include_blank: "Select/Add Network Logo", class: "rounded-r-none flex flex-col" },  data: { logo_upload_target: "logoField" }  %>
                </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 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 :logo_file, class: "hidden", id: "employer_logo_file", data: { logo_upload_target: "previewContainer", parent_value: "network_logo", action: "change->logo-upload#uploadLogo" }, direct_upload: true %>
          </div>
        </div>
        <div class="flex">
            <div class="flex flex-col w-full">
                <div class="flex flex-col w-1/3">
                    <%= f.select :provider_section_id, options_from_collection_for_select(@provider_sections, :id, :title), { include_blank: "Select/Add Network Provider Info", class: "rounded-r-none flex flex-col" },  data: { logo_upload_target: "logoField" }  %>
                </div>
                <div class="flex flex-col w-1/3">
                    <%= f.select :rx_section_id, options_from_collection_for_select(@rx_sections, :id, :title), { include_blank: "Select Rx Info", class: "rounded-r-none flex flex-col" }  %>
                </div>
                <div class="text-xl text-left font-bold text-platinum pt-4">
                    Claims Submission Section
                </div>
                <div class="flex w-full space-x-3">
                    <div class="flex flex-col w-1/3">
                        <%= render 'provider_fields', f: f %>
                    </div>
                    <div class="flex flex-col w-1/3">
                        <%= render 'claim_fields', f: f %>
                    </div>
                </div>
            </div>
          </div>
        </div>

      </div>
      <div class="py-8">
        <%= f.submit "Submit Network" %>
      </div>
    </div>
  <% end %>
</div>
