obdev/app/views/participants/_form.html.erb

<%= form_with(model: participant, local: true, html: { class: 'needs-validation', novalidate: true }) do |form| %>
  <% if participant.errors.any? %>
    <div id="error_explanation" class="alert alert-danger" role="alert">
      <h4><%= pluralize(participant.errors.count, "error") %> prohibited this participant from being saved:</h4>
      <ul>
        <% participant.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="mb-3">
    <%= form.label :name, class: 'form-label' %>
    <%= form.text_field :name, class: 'form-control' %>
  </div>

  <div class="mb-3">
    <%= form.label :address, class: 'form-label' %>
    <%= form.text_area :address, rows: 1, class: 'form-control auto-expand' %>
  </div>

  <div class="mb-3">
    <%= form.label :phone, class: 'form-label' %>
    <%= form.telephone_field :phone, id: 'phone-field', class: 'form-control', placeholder: '(XXX)-XX-XXXX' %>
  </div>

  <div class="mb-3">
    <%= form.label :email, class: 'form-label' %>
    <%= form.email_field :email, id: 'email-field', class: 'form-control', required: true, placeholder: 'Make sure to include @ sign' %>
  </div>

  <div class="mb-3">
  <%= form.label :is_employer, 'Is this participant also an employer?', class: 'form-label' %>
  <div>
    <%= radio_button_tag 'is_employer', 'yes', false, class: 'form-check-input' %>
    <%= label_tag 'is_employer_yes', 'Yes', class: 'form-check-label' %>
    <%= radio_button_tag 'is_employer', 'no', true, class: 'form-check-input' %>
    <%= label_tag 'is_employer_no', 'No', class: 'form-check-label' %>
  </div>
</div>


  <div class="mb-3">
    <%= form.label :mci, 'MCI', class: 'form-label' %>
    <%= form.text_field :mci, class: 'form-control', placeholder: 'Required for Participant' %>
  </div>

  <div class="mb-3">
    <%= form.label :dob, 'Date of Birth', class: 'form-label' %>
    <%= form.date_field :dob, class: 'form-control' %>
  </div>

  <div class="mb-3">
    <%= form.label :ssn, 'Social Security Number', class: 'form-label' %>
    <%= form.text_field :ssn, id: 'ssn-field', class: 'form-control', maxlength: 11, placeholder: 'XXX-XX-XXXX' %>
  </div>

  <div class="mb-3">
    <%= form.label :gender, class: 'form-label' %>
    <%= form.select :gender, ['Unknown', 'Female', 'Male', 'Non-Binary', 'Other'], {}, class: 'form-select' %>
  </div>

  <div class="actions">
    <%= form.submit class: 'btn btn-primary' %>
  </div>
<% end %>


  <%# This is to correct phone number entry %>
  <script>
  document.addEventListener("DOMContentLoaded", function() {
    const phoneField = document.getElementById('phone-field');

    phoneField.addEventListener('input', function() {
      let input = phoneField.value.replace(/\D/g, ''); // Remove non-numeric characters
      const inputLength = input.length;

      if (inputLength > 3 && inputLength <= 6) {
        input = `(${input.slice(0, 3)}) ${input.slice(3)}`;
      } else if (inputLength > 6) {
        input = `(${input.slice(0, 3)}) ${input.slice(3, 6)}-${input.slice(6, 10)}`;
      }

      phoneField.value = input;
    });
  });
</script>


<%# This is for auto resizing the address field %>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const textareas = document.querySelectorAll('.auto-expand');

    const resizeTextarea = function(el) {
      el.style.height = 'auto';
      el.style.height = (el.scrollHeight) + 'px';
    }

    textareas.forEach(textarea => {
      textarea.addEventListener('input', function() {
        resizeTextarea(textarea);
      });

      // Initial resize
      resizeTextarea(textarea);
    });
  });
</script>

<%# This is to require 1 @ sign for email entry %>
<script>
  document.addEventListener('turbolinks:load', function() {
    const emailField = document.getElementById('email-field');

    emailField.addEventListener('input', function() {
      const emailValue = emailField.value;
      const atSignCount = (emailValue.match(/@/g) || []).length;

      if (atSignCount !== 1) {
        emailField.setCustomValidity("Email must contain exactly one '@' sign.");
      } else {
        emailField.setCustomValidity('');
      }
    });
  });
</script>


<%# This is for Social Security formatting and # of digits %>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const ssnField = document.getElementById('ssn-field');

    ssnField.addEventListener('input', () => {
      let ssn = ssnField.value.split('-').join(''); // Remove dashes
      ssn = ssn.replace(/\D/g, ''); // Keep numbers only

      if (ssn.length > 3 && ssn.length <= 5) {
        ssn = ssn.slice(0, 3) + '-' + ssn.slice(3);
      } else if (ssn.length > 5) {
        ssn = ssn.slice(0, 3) + '-' + ssn.slice(3, 5) + '-' + ssn.slice(5, 9);
      }
      ssnField.value = ssn; // Update the field value
    });
  });
</script>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">

<script>
  $(document).ready(function() {
    $('#employer-autocomplete').autocomplete({
      source: function(request, response) {
        $.ajax({
          url: '/employers/search', // Rails endpoint for searching employers
          dataType: "json",
          data: { term: request.term },
          success: function(data) {
            response(data);
          }
        });
      },
      minLength: 2, // Minimum characters to trigger the search
      select: function(event, ui) {
        // Function to handle selection
        $('#employer-autocomplete').val(ui.item.label); // ui.item.label should contain the name of the employer
        // You might want to set a hidden field with employer ID if needed
        return false;
      }
    });
  });
</script>