obdev/app/views/workers/show.html.erb

<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <h1 class="mb-4 text-center">Worker Details</h1>

      <div class="card">
        <div class="card-body">
          <p class="card-text">
          <strong>Name:</strong>
          <%= @worker.first_name %> <%= @worker.last_name %>
          </p>
          <p class="card-text">
            <strong>Address:</strong>
            <%= [@worker.address_line_1, @worker.address_line_2, @worker.city, @worker.state, @worker.zip].reject(&:blank?).join(', ') %>
          </p>
          <p class="card-text">
            <strong>Phone:</strong>
            <%= @worker.phone %>
          </p>
          <p class="card-text">
            <strong>Email:</strong>
            <%= @worker.email %>
          </p>
          <p class="card-text">
            <strong>DOB:</strong>
            <%= @worker.dob %>
          </p>
          <p class="card-text">
            <strong>SSN:</strong>
            <%= @worker.ssn %>
          </p>
          <p class="card-text">
            <strong>Gender:</strong>
            <%= @worker.gender %>
          </p>
        </div>
      </div>

      <div class="mt-3 d-flex justify-content-between">
        <%= link_to 'Edit', edit_worker_path(@worker), class: "btn btn-dark" %>
        <%= link_to 'Back to List', workers_path, class: "btn btn-secondary" %>
      </div>
    </div>
  </div>
</div>


<div class="row mt-4">
  <div class="col-md-6">
    <h2 class="mt-4">Linked Participants</h2>
    <% if @employments.present? %>
      <table class="table table-striped">
        <thead class="table-light">
          <tr>
            <th>Participant Name</th>
            <th>Start Date</th>
            <th>End Date</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <% @employments.each do |employment| %>
            <tr>
              <% participant = employment.participant %>
              <td><%= participant ? "#{participant.first_name} #{participant.last_name}" : 'No Participant Assigned' %></td>
              <td><%= employment.start_date.strftime('%B %d, %Y') if employment.start_date.present? %></td>
              <td><%= employment.end_date.strftime('%B %d, %Y') if employment.end_date.present? %></td>
              <td>
                <%= link_to 'View', participant_path(participant), class: 'btn btn-sm btn-secondary' %>
                <%= link_to 'Edit', edit_employment_path(employment), class: 'btn btn-sm btn-info' %>
              </td>
            </tr>
          <% end %>
        </tbody>
      </table>
    <% else %>
      <p>No employments available.</p>
    <% end %>
  </div>
</div>


<%= form_with(model: [@worker, @employment], url: link_participant_worker_path(@worker), method: :post, class: 'row g-3') do |form| %>
  <div class="col-md-6">
    <%= form.label :participant_name, "Add New Participant", class: 'form-label' %>
    <%= text_field_tag :participant_name, nil, id: 'participant-autocomplete', class: 'form-control', placeholder: 'Start typing participant name...' %>
    <%= hidden_field_tag 'employment[participant_id]', nil, id: 'selected-participant-id' %>
  </div>

  <div class="col-md-3">
    <%= form.label :start_date, class: 'form-label' %>
    <%= form.date_field :start_date, class: 'form-control' %>
  </div>

  <div class="col-md-3">
    <%= form.label :end_date, class: 'form-label' %>
    <%= form.date_field :end_date, class: 'form-control' %>
  </div>

  <div class="col-12">
    <%= form.submit "Link Participant", class: 'btn btn-dark' %>
  </div>
<% end %>

<%# JavaScript for Participant Autocomplete %>
<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() {
  $('#participant-autocomplete').autocomplete({
    source: function(request, response) {
      $.ajax({
        url: '/participants/search', // Updated endpoint for searching participants
        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
      $('#participant-autocomplete').val(ui.item.label); // ui.item.label should contain the name of the participant
      $('#selected-participant-id').val(ui.item.value); // Set the participant ID in the hidden field
      return false;
    }
  });
});
</script>