<div class="bg-deepcove h-full w-full flex flex-col">
  <h1 class="font-bold text-4xl text-platinum">New Employer Setup</h1>
  <h3 class="font-bold text-2xl text-bluemana">General Information</h3>
  <%= form_with model: @form, url: employer_setup_index_path, local: true do |f| %>
    <div class="flex flex-col space-y-6">
      <div class="flex space-x-10">
        <div class="w-1/5">
          <%= f.text_field :name, label: { text: "Employer Name" }, class: "w-full" %>
        </div>
        <div class="w-1/5">
          <%= f.text_field :group_number, label: { text: "Group/Medical Number" }, class: "w-full" %>
        </div>
      </div>
      <div class="flex space-x-10">
        <div class="w-1/5">
          <%= f.text_field :pl_plan_key, label: { text: "Pl Plan Key" }, class: "w-full" %>
        </div>
        <div class="w-1/5">
          <%= f.text_field :effective_date, label: { text: "Effective Date" }, class: "w-full" %>
        </div>
      </div>
      <div class="flex space-x-10">
        <div class="w-1/5">
          <%= f.select :network, options_for_select(["Cigna", "Cigna+Regional", "Medcost"]), label: { text: "Provider Network" }, data: { controller: "form-toggle", action: "change->form-toggle#toggleDivs" }, class: "w-full" %>
        </div>
      </div>
      <div class="flex space-x-5 items-center mt-4">
        <label for="file_upload_input" class="cursor-pointer bg-atmosphere hover:bg-bluetang text-platinum font-bold py-2 px-4 rounded border border-platinum">
          Choose Employer Logo File
        </label>
        <span id="file_name_display" class="ml-2 text-bluemana font-semibold">No file chosen</span>
        <%= f.file_field :employer_logo, class: "hidden", id: "file_upload_input" %>
      </div>
      <div class="pt-8">
        <%= f.submit "Continue to Plans" %>
      </div>
    </div>
  <% end %>
</div>


<script>
  document.getElementById('file_upload_input').addEventListener('change', function(e) {
    var fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen';
    document.getElementById('file_name_display').textContent = fileName;
  });
</script>