working on data printer

This commit is contained in:
Jason Jordan
2026-03-16 12:09:45 -04:00
parent 8c885b3e76
commit 011ee91707
26 changed files with 357 additions and 214 deletions
@@ -0,0 +1,16 @@
<div class="flex flex-col items-start space-y-3 w-[42%] hidden exception-item" data-controller="logo-upload" data-logo-upload-logo-type-value="network">
<div class="flex w-full">
<div class="flex flex-col w-full">
<%= exception_item_fields.select :network_logo_id, options_for_select(IdCard::NetworkLogo.pluck(:filename, :id)), { include_blank: "Select/Add Network Logo", class: "rounded-r-none flex flex-col" }, data: { exceptions_toggle_target: "dependentField", parent_value: "network_logo", 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>
<%= exception_item_fields.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>
@@ -0,0 +1,5 @@
<% (1..12).each do |n| %>
<div class="pl-1 pt-2 w-full">
<%= provider_fields.text_field "claim_to_#{n}".to_sym, label: { text: "Claim To Line #{n}" }, data: { general_form_target: "providerField"}, class: "w-full" %>
</div>
<% end %>
@@ -0,0 +1,5 @@
<div class="pl-1 pt-2 w-full">
<%= plan_benefits_fields.text_field :benefit, label: { text: "#{plan_benefits_fields.object.benefit_desc}" }, data: { benefits_template_picker_target: "benefit", sequence: plan_benefits_fields.object.sequence}, class: "w-full" %>
<%= plan_benefits_fields.hidden_field :benefit_desc %>
<%= plan_benefits_fields.hidden_field :sequence %>
</div>
@@ -0,0 +1,13 @@
<div class="pl-1 w-full">
<%= plan_fields.text_field :title, label: { text: "Plan Title" }, class: "w-full", data: { add_plan_target: "plan" } %>
</div>
<% if plan_fields.object.persisted? %>
<div class="pl-1 w-full">
<%= plan_fields.text_field :pb_product_key, label: { text: "Plan Product Key" }, class: "w-full" %>
</div>
<% end %>
<div class="pl-1 pb-2 w-full">
<%= f.select :template_id, options_from_collection_for_select(@plan_templates, :id, :title), { prompt: "Select Plan Template", class: "w-full" }, { data: { action: "benefits-template-picker#fetchData" }} %>
</div>
@@ -0,0 +1,5 @@
<% (1..12).each do |n| %>
<div class="pl-1 pt-2 w-full">
<%= provider_fields.text_field "provider_line_#{n}".to_sym, label: { text: "Provider Line #{n}" }, data: { general_form_target: "providerField"}, class: "w-full" %>
</div>
<% end %>
@@ -0,0 +1,119 @@
<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 Exceptions:</h1>
<h1 class="text-atmosphere">(<%= @employer.name %>)</h1>
</div>
<%= form_with model: @configuration, url: update_field_exceptions_employer_id_card_configuration_index_path(@employer.slug), local: true, multipart: true do |f| %>
<div class="flex flex-col">
<div class="w-full flex pb-10">
<div class="flex flex-wrap w-full justify-start space-y-12 my-8" data-controller="add-exception" data-add-exception-form-color-value="<%= IdCard::Configuration::FORM_COLORS.to_json %>">
<% @configuration.field_exceptions.each_with_index do |exc, index| %>
<%= f.fields_for :field_exceptions, exc, child_index: index do |exception_fields| %>
<div class="flex flex-col pr-6 w-1/2">
<div class="flex justify-between items-end w-full pb-2">
<div class="w-[48%]">
<%= exception_fields.select :exception_type, options_for_select(IdCard::FieldException::VALID_TYPES.map { |type| [type.titleize(keep_id_suffix: true), type] }), { label: { text: "Exception Based On" }, prompt: "Select Type", class: "w-full" }, data: { add_exception_target: "exception" } %>
</div>
<div class="w-[48%]">
<%= exception_fields.text_field :exception_value, label: { text: "Exception Value" }, class: "w-full" %>
</div>
</div>
<div class="text-xl text-left font-bold mb-[-4px] z-1 text-platinum">
Field Exception Items
</div>
<div class="w-full h-[3px] rounded-r bg-NEXT_COLOR ml-[1px] mb-1"></div>
<div class="flex flex-col w-full justify-start" data-controller="add-exception-item">
<%= exception_fields.fields_for :field_exception_items do |exception_item_fields| %>
<div class="flex justify-between items-start w-full" data-controller="exceptions-toggle">
<div class="w-[42%]">
<%= exception_item_fields.select :field_name, options_for_select(IdCard::FieldExceptionItem::VALID_FIELD_NAMES.map { |field_name| [field_name.titleize, field_name] }, exception_item_fields.object.field_name ), { label: { text: "Card Field" }, prompt: "Select Card Field", class: "w-full" }, { data: { action: "change->exceptions-toggle#toggleFields", add_exception_item_target: "exceptionItem", exceptions_toggle_target: "selectField" } } %>
</div>
<div class="w-[42%] hidden">
<%= exception_item_fields.text_field :field_value, value: exception_item_fields.object.field_value, label: { text: "New Value" }, data: { exceptions_toggle_target: "dependentField", parent_value: "default" }, class: "w-full" %>
</div>
<%= render 'alt_network_logo_fields', exception_item_fields: exception_item_fields %>
<div class="w-[42%] hidden">
<%= exception_item_fields.select :provider_section_id, options_for_select(IdCard::ProviderSection.where.not(title: nil).map { |provider| [provider.title, provider.id] }, exception_item_fields.object.provider_section_id), { prompt: "Select Provider Template", class: "w-full" }, { data: { exceptions_toggle_target: "dependentField", parent_value: "provider_section" } } %>
</div>
<div class="mt-6 ml-1">
<%= exception_item_fields.hidden_field :_destroy %>
<%= button_tag "Remove", class: "cursor-pointer flex items-center justify-center bg-brightlava font-bold text-lg text-platinum py-[6px] px-1 font-semibold leading-tight rounded-lg border-3 border-brightlava w-full", data: { action: "add-exception-item#removeExemptionItem" } %>
</div>
</div>
<% end %>
<%= button_tag "Add Another Item To Exception", class: "cursor-pointer bg-NEXT_COLOR hover:bg-deepcove text-xl font-bold text-platinum my-3 py-1 font-semibold leading-tight rounded border-3 border-NEXT_COLOR w-full", data: { action: "add-exception-item#addExemptionItem", add_exception_item_target: "exceptionItemButton" } %>
<template data-add-exception-item-target="exceptionItemTemplate">
<%= exception_fields.fields_for :field_exception_items, IdCard::FieldExceptionItem.new, child_index: 'NEW_ITEM_RECORD' do |exception_item_fields| %>
<div class="flex justify-between items-start w-full" data-controller="exceptions-toggle">
<div class="w-[42%]">
<%= exception_item_fields.select :field_name, options_for_select(IdCard::FieldExceptionItem::VALID_FIELD_NAMES.map { |field_name| [field_name.titleize, field_name] }), { label: { text: "Card Field" }, prompt: "Select Card Field", class: "w-full" }, { data: { action: "change->exceptions-toggle#toggleFields", add_exception_item_target: "exceptionItem", exceptions_toggle_target: "selectField" } } %>
</div>
<div class="w-[42%] hidden">
<%= exception_item_fields.text_field :field_value, label: { text: "New Value" }, data: { exceptions_toggle_target: "dependentField", parent_value: "default" }, class: "w-full" %>
</div>
<%= render 'alt_network_logo_fields', exception_item_fields: exception_item_fields %>
<div class="w-[42%] hidden">
<%= exception_item_fields.select :provider_section_id, options_for_select(IdCard::ProviderSection.where.not(title: nil).map { |provider| [provider.title, provider.id] }), { prompt: "Select Provider Template", class: "w-full" }, { data: { exceptions_toggle_target: "dependentField", parent_value: "provider_section" } } %>
</div>
<div class="mt-6 ml-1">
<%= exception_item_fields.hidden_field :_destroy %>
<%= button_tag "Remove", class: "cursor-pointer flex items-center justify-center bg-brightlava font-bold text-lg text-platinum py-[6px] px-1 font-semibold leading-tight rounded-lg border-3 border-brightlava w-full", data: { action: "add-exception-item#removeExemptionItem" } %>
</div>
</div>
<% end %>
</template>
</div>
</div>
<% end %>
<% end %>
<%= button_tag "Add an Exception", class: "cursor-pointer text-lg font-medium py-2 px-4 rounded w-1/2 h-4/5 mt-3 text-[#E0E0E0] rounded-lg border border-[#C2C2C2] hover:shadow-[0_0_10px_3px_#93c5fd]", data: { action: "add-exception#addExemption", add_exception_target: "exceptionButton" } %>
<template data-add-exception-target="exceptionTemplate">
<%= f.fields_for :field_exceptions, @configuration.field_exceptions.build, child_index: 'NEW_RECORD' do |exception_fields| %>
<div class="flex flex-col pr-6 w-1/2 pl-1">
<div class="flex justify-between items-end w-full pb-2">
<div class="w-[48%]">
<%= exception_fields.select :exception_type, options_for_select(IdCard::FieldException::VALID_TYPES.map { |type| [type.titleize(keep_id_suffix: true), type] }), { label: { text: "Exception Based On" }, prompt: "Select Type", class: "w-full" }, data: { add_exception_target: "exception" } %>
</div>
<div class="w-[48%]">
<%= exception_fields.text_field :exception_value, label: { text: "Exception Value" }, class: "w-full" %>
</div>
</div>
<div class="text-xl text-left font-bold mb-[-4px] z-1 text-platinum">
Field Exception Items
</div>
<div class="w-full h-[3px] rounded-r bg-NEXT_COLOR ml-[1px] mb-1"></div>
<div class="flex flex-col w-full justify-start" data-controller="add-exception-item">
<%= button_tag "Add Another Item To Exception", class: "cursor-pointer bg-NEXT_COLOR hover:bg-deepcove text-xl font-bold text-platinum my-3 py-1 font-semibold leading-tight rounded border-3 border-NEXT_COLOR w-full", data: { action: "add-exception-item#addExemptionItem", add_exception_item_target: "exceptionItemButton" } %>
<template data-add-exception-item-target="exceptionItemTemplate">
<%= exception_fields.fields_for :field_exception_items, IdCard::FieldExceptionItem.new, child_index: 'NEW_ITEM_RECORD' do |exception_item_fields| %>
<div class="flex justify-between items-start w-full" data-controller="exceptions-toggle">
<div class="w-[42%]">
<%= exception_item_fields.select :field_name, options_for_select(IdCard::FieldExceptionItem::VALID_FIELD_NAMES.map { |field_name| [field_name.titleize, field_name] }), { label: { text: "Card Field" }, prompt: "Select Card Field", class: "w-full" }, { data: { action: "change->exceptions-toggle#toggleFields", add_exception_item_target: "exceptionItem", exceptions_toggle_target: "selectField" } } %>
</div>
<div class="w-[42%] hidden">
<%= exception_item_fields.text_field :field_value, label: { text: "New Value" }, data: { exceptions_toggle_target: "dependentField", parent_value: "default" }, class: "w-full" %>
</div>
<%= render 'alt_network_logo_fields', exception_item_fields: exception_item_fields %>
<div class="w-[42%] hidden">
<%= exception_item_fields.select :provider_section_id, options_for_select(IdCard::ProviderSection.where.not(title: nil).map { |provider| [provider.title, provider.id] }), { prompt: "Select Provider Template", class: "w-full" }, { data: { exceptions_toggle_target: "dependentField", parent_value: "provider_section" } } %>
</div>
<div class="mt-6 ml-1">
<%= exception_item_fields.hidden_field :_destroy %>
<%= button_tag "Remove", class: "cursor-pointer flex items-center justify-center bg-brightlava font-bold text-lg text-platinum py-[6px] px-1 font-semibold leading-tight rounded-lg border-3 border-brightlava w-full", data: { action: "add-exception-item#removeExemptionItem" } %>
</div>
</div>
<% end %>
</template>
</div>
</div>
<% end %>
</template>
</div>
</div>
<div class="py-8">
<%= f.submit "Submit Network" %>
</div>
</div>
<% end %>
</div>
@@ -0,0 +1,93 @@
<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: @configuration, url: update_general_employer_id_card_configuration_index_path(@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"], @configuration.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"]], @configuration.card_template || "FairosRxIDCard" ), { label: { text: "Card Template" }, 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), @configuration.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, @configuration.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, @configuration.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>
@@ -0,0 +1,57 @@
<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: @configuration, url: update_network_employer_id_card_configuration_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>
@@ -0,0 +1,48 @@
<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">New ID Card Setup:</h1>
<h1 class="text-atmosphere">(<%= @employer.name %>)</h1>
</div>
<%= form_with model: @setup, local: true, multipart: true do |f| %>
<div class="flex flex-col space-y-6 pb-10">
<div class="flex w-full items-end" data-controller="logo-upload" data-logo-upload-logo-type-value="employer" data-logo-upload-employer-name-value=<%= @employer.name %>>
<div class="flex flex-col space-y-6 w-2/5">
<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"]), { label: { text: "Provider Network" }, include_blank: "Select", class: "w-full" } %>
</div>
<div class="w-full">
<%= f.select :card_template, options_for_select([["FairosRx", "FairosRxIDCard"], ["Tandemloc", "TandemlocIDCard"], ["smART", "SmartIDCard"], ["QRCode (Healthbus)", "QRCodeIDCard"]]), { label: { text: "Card Template" }, include_blank: "Select", class: "w-full" } %>
</div>
</div>
<div class="flex items-end">
<div class="flex">
<div class="text-platinum text-lg">Employer Logo</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.hidden_field :employer_logo_id, label: { text: "Employer Logo" }, data: { logo_upload_target: "logoField" } %>
<%= 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>
<div class="py-8">
<%= f.submit "Create ID Card Setup" %>
</div>
</div>
<% end %>
</div>
@@ -0,0 +1,63 @@
<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 Plans:</h1>
<h1 class="text-atmosphere">(<%= @employer.name %>)</h1>
</div>
<%= form_with model: @configuration, url: update_plans_employer_id_card_configuration_index_path(@employer.slug), local: true, multipart: true do |f| %>
<div class="flex flex-col space-y-6 pb-10">
<div class="w-full flex my-8" data-controller="add-plan" data-add-plan-form-color-value="<%= IdCard::Configuration::FORM_COLORS.to_json %>" >
<div class="flex flex-wrap w-full" data-add-plan-target="container">
<% @configuration.plans.each_with_index do |plan, index| %>
<%= f.fields_for :plans, plan, child_index: index do |plan_fields| %>
<div class="inline-flex flex-col justify-end pr-6 w-1/4 relative pl-1 plan-item" data-controller="benefits-template-picker">
<div class="absolute left-0 top-[2%] h-[98%] border-l-4 <%= "border-#{IdCard::Configuration::FORM_COLORS[index]}" %> "></div>
<div class="font-bold text-2xl <%= "text-#{IdCard::Configuration::FORM_COLORS[index]}" %> -ml-[6px] z-2 w-full">
<%= "Plan #{index + 1}" %>
</div>
<%= render 'plan_fields', plan_fields: plan_fields, f: f, index: index %>
<div class="text-xl text-left font-bold pl-[2px] mb-[-4px] z-1 <%= "text-#{IdCard::Configuration::FORM_COLORS[index]}" %>">
Benefit Values
</div>
<div class="w-full h-[3px] rounded-r <%= "bg-#{index % 2 == 1 ? 'bronze' : 'copper'}" %> ml-[3px]"></div>
<%= plan_fields.fields_for :plan_benefits do |plan_benefits_fields| %>
<%= render 'plan_benefits_fields', plan_benefits_fields: plan_benefits_fields %>
<% end %>
<div class="mt-4 pl-1">
<%= plan_fields.hidden_field :_destroy %>
<%= button_tag "Remove Plan #{index + 1}", class: "cursor-pointer bg-deepcove hover:bg-brightlava text-xl font-bold text-copper hover:text-platinum py-2 px-4 font-semibold leading-tight rounded-lg border-3 border-copper w-full", data: { action: "add-plan#remove" } %>
</div>
</div>
<% end %>
<% end %>
<%= button_tag "Add a Plan", class: "cursor-pointer text-2xl font-bold py-2 pr-6 mt-10 w-[calc(24%-1rem)] w-1/4 min-h-[940px] text-[#E0E0E0] rounded-lg font-medium border border-[#E0E0E0] bg-[#173057] hover:bg-transparent hover:shadow-[0_0_10px_3px_#93c5fd] transition-colors duration-150", data: { action: "add-plan#add", add_plan_target: "button" } %>
</div>
<template data-add-plan-target="template">
<%= f.fields_for :plans, @configuration.plans.build, child_index: 'NEW_RECORD' do |plan_fields| %>
<div class="inline-flex flex-col justify-end pr-6 w-1/4 relative pl-1 plan-item" data-controller="benefits-template-picker">
<div class="absolute left-0 top-[2%] h-[98%] border-l-4 border-NEXT_COLOR"></div>
<div class="font-bold text-2xl text-NEXT_COLOR -ml-[6px] z-2 w-full">
<%= "Plan NEW_PLAN" %>
</div>
<%= render 'plan_fields', plan_fields: plan_fields, f: f, index: "NEW_RECORD".to_i %>
<div class="text-xl text-left font-bold pl-[2px] mb-[-4px] z-1 text-NEXT_COLOR">
Benefit Values
</div>
<div class="w-full h-[3px] rounded-r bg-NEXT_SECONDARY_COLOR ml-[3px]"></div>
<%= plan_fields.fields_for :plan_benefits do |plan_benefits_fields| %>
<%= render 'plan_benefits_fields', plan_benefits_fields: plan_benefits_fields %>
<% end %>
<div class="mt-4 pl-1">
<%= plan_fields.hidden_field :_destroy %>
<%= button_tag "Remove Plan NEW_PLAN", class: "cursor-pointer bg-deepcove hover:bg-brightlava text-xl font-bold text-NEXT_SECONDARY_COLOR hover:text-platinum py-2 px-4 font-semibold leading-tight rounded-lg border-3 border-NEXT_SECONDARY_COLOR w-full", data: { action: "add-plan#remove" } %>
</div>
</div>
<% end %>
</template>
</div>
</div>
<div class="py-8">
<%= f.submit "Submit Plans" %>
</div>
</div>
<% end %>
</div>