<div class="min-h-screen w-full flex flex-col" data-controller="add-alt-network-logo" data-add-alt-network-logo-form-color-value="<%= IdCard::Setup::FORM_COLORS.to_json %>">
  <h1 class="font-bold text-4xl text-platinum">New Employer Setup</h1>
  <h3 class="font-bold text-2xl text-bluemana">Provider Network</h3>
    <%= form_with model: @form, url: employer_setup_index_path, local: true do |f| %>

      <div class="flex w-full justify-start">
          <div class="flex flex-wrap w-full" data-add-alt-network-logo-target="container">
            <%= button_tag "Add a Regional Logo", class: "cursor-pointer text-lg font-medium py-2 px-4 rounded w-1/7 h-75 my-8 text-[#E0E0E0] rounded-lg border border-[#C2C2C2] hover:shadow-[0_0_10px_3px_#93c5fd]", data: { action: "add-alt-network-logo#add", add_alt_network_logo_target: "button" } %>
          </div>
      </div>
      <div class="py-10">
        <%= f.hidden_field :pl_plan_key, value: "fake" %>
        <%= f.submit "Continue to Summary" %>
      </div>
      <template data-add-alt-network-logo-target="template">
        <%= f.fields_for :network_exceptions, index: 'NEW_RECORD' do |network_fields| %>
          <div class="flex flex-col my-8 mr-3 space-y-6 px-3" data-controller="add-network-exception">
            <div class="flex space-x-5 items-center mt-4">
              <label for="file_upload_input_NEW_RECORD" class="cursor-pointer bg-NEXT_COLOR hover:bg-NEXT_COLOR-tinted text-platinum font-bold py-2 px-4 rounded border border-platinum">
                Choose Network Logo File
              </label>
              <span id="file_name_display_NEW_RECORD" class="ml-2 text-NEXT_COLOR font-semibold">No file chosen</span>
              <%= network_fields.file_field :network_logo, class: "hidden", id: "file_upload_input_NEW_RECORD", data: { add_alt_network_logo_target: "networkLogo" } %>
            </div>
            <%= network_fields.fields_for :exceptions, index: 0 do |exception_fields| %>
              <div class="flex space-x-6 w-full">
                  <div class="w-full">
                      <%= exception_fields.select :type, options_for_select(["Zip","State"]), label: { text: "Exception Type" }, prompt: "Select Type", class: "w-full" %>
                  </div>
                  <div class="w-full">
                      <%= exception_fields.text_field :value, label: { text: "Exception Value" }, class: "w-full" %>
                  </div>
              </div>
            <% end %>
            <div class="flex flex-col w-full space-y-6" data-add-network-exception-target="container"></div>
            <%= button_tag "Add an exception rule", class: "cursor-pointer bg-NEXT_COLOR hover:bg-NEXT_COLOR-tinted text-platinum text-lg font-bold py-2 px-4 rounded border border-platinum w-full", data: { action: "add-network-exception#add" } %>
            <template data-add-network-exception-target="template">
              <%= network_fields.fields_for :exceptions, index: 'NEW_EXC_RECORD' do |exception_fields| %>
                <div class="flex space-x-6 w-full">
                    <div class="w-full">
                        <%= exception_fields.select :type, options_for_select(["Zip","State"]), label: { text: "Exception Type" }, prompt: "Select Type", class: "w-full" %>
                    </div>
                    <div class="w-full">
                        <%= exception_fields.text_field :value, label: { text: "Exception Value" }, class: "w-full" %>
                    </div>
                </div>
              <% end %>
            </template>
          </div>
        <% end %>
      </template>

      
    <% end %>
</div>



<script>
  const logoButtons = document.querySelectorAll('[id^="file_upload_input_"]');
  logoButtons.forEach(button => {
    button.addEventListener('change', function(e) {
      var fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen';
      var targetIndex = e.target.id.slice(-1);
      document.getElementById(`file_name_display_${targetIndex}`).textContent = fileName;
    });
  })
</script>