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

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="demographicsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
    Demographics
  </button>
  <ul class="dropdown-menu" aria-labelledby="demographicsDropdown">
    <li><a class="dropdown-item" href="<%= participant_bank_accounts_path(@participant) %>">Bank Information</a></li>
    <li><a class="dropdown-item" href="<%= polymorphic_path([@participant, :onboardings]) %>">Onboarding</a></li>
    <!-- Add other demographic options here as needed -->
  </ul>
</div>



<div class="container mt-5">
  <div class="row">
    <div class="col-12">
      <h1 class="mb-4 text-center">Participant Details</h1>
    </div>

    <!-- Participant Information Table -->
    <div class="col-12 mb-4">
      <table class="table">
        <tbody>
          <tr>
            <th>Name</th>
            <td><%= @participant.first_name %> <%= @participant.last_name %></td>
          </tr>
          <tr>
            <th>Address</th>
            <td><%= @participant.address_line_1 %><%= ', ' + @participant.address_line_2 unless @participant.address_line_2.blank? %>
          <br>
            <%= "#{@participant.city}, #{@participant.state} #{@participant.zip}" %>
            </td>
          </tr>
          <tr>
            <th>Phone</th>
            <td><%= @participant.phone %></td>
          </tr>
          <tr>
            <th>Email</th>
            <td><%= @participant.email %></td>
          </tr>
          <tr>
            <th>MCI</th>
            <td><%= @participant.mci %></td>
          </tr>
          <tr>
            <th>DOB</th>
            <td><%= @participant.dob.strftime('%B %d, %Y') if @participant.dob.present? %></td>
          </tr>
          <tr>
            <th>SSN</th>
            <td><%= mask_ssn(@participant.ssn) %></td>
          </tr>
          <tr>
            <th>Gender</th>
            <td><%= @participant.gender %></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Action Buttons -->
  <div class="row">
    <div class="col-12 d-flex justify-content-between mb-4">
      <%= link_to 'Edit', edit_participant_path(@participant), class: "btn btn-dark" %>
      <%= link_to 'Back to List', participants_path, class: "btn btn-secondary" %>
    </div>
  </div>

<div class="row mt-4">
  <div class="col-md-6">
    <h2 class="mt-4">Linked Workers</h2>
    <% if @employments.present? %>
  
  <table class="table table-striped">
    <thead class="table-light">
      <tr>
        <th>Worker Name</th>
        <th>Start Date</th>
        <th>End Date</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <% @employments.each do |employment| %>
        <tr>
          <td><%= employment.worker&.full_name || 'No Worker 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 worker_path(employment.worker), class: 'btn btn-sm btn-secondary' do %>
              <i class="bi bi-eye"></i> <!-- Eyeball icon for 'Show' -->
            <% end %>
            <%= link_to edit_employment_path(employment), class: 'btn btn-sm btn-info' do %>
              <i class="bi bi-pencil-fill" style="color: white;"></i> <!-- Pencil icon for 'Edit' with white color -->
            <% end %>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
<% else %>
  <p>No employments available.</p>
<% end %>

<br>

<%= form_with(model: [@participant, @employment], url: link_worker_participant_path(@participant), method: :post, class: 'row g-3') do |form| %>
  <div class="col-md-6">
    <%= form.label :worker_name, "Add New Worker", class: 'form-label' %>
    <%= text_field_tag :worker_name, nil, id: 'worker-autocomplete', class: 'form-control', placeholder: 'Start typing worker name...' %>
    <%= hidden_field_tag 'employment[worker_id]', nil, id: 'selected-worker-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 Worker", class: 'btn btn-dark' %>
  </div>
<% end %>


<%# This is for autocompleting the Worker field to return users in the system %>

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

</div>

<div class="col-md-6">
  <h2 class="mt-4">Linked Vendors</h2>
  <% if @service_contracts.present? %>
  <table class="table table-striped">
    <thead class="table-light">
      <tr>
        <th>Vendor Name</th>
        <th>Start Date</th>
        <th>End Date</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <% @service_contracts.each do |contract| %>
        <tr>
          <td><%= contract.vendor&.name || 'No Vendor Assigned' %></td>
          <td><%= contract.start_date.strftime('%B %d, %Y') if contract.start_date.present? %></td>
          <td><%= contract.end_date.strftime('%B %d, %Y') if contract.end_date.present? %></td>
          <td>
            <%= link_to vendor_path(contract.vendor), class: 'btn btn-sm btn-secondary' do %>
              <i class="bi bi-eye"></i> <!-- Eyeball icon for 'Show' -->
            <% end %>
            <%= link_to edit_service_contract_path(contract), class: 'btn btn-sm btn-info' do %>
              <i class="bi bi-pencil-fill" style="color: white;"></i> <!-- Pencil icon for 'Edit' with white color -->
            <% end %>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
<% else %>
  <p>No service contracts available.</p>
<% end %>

<br>

<%= form_with(model: [@participant, @service_contract], url: link_vendor_participant_path(@participant), method: :post, class: 'row g-3') do |form| %>
  <div class="col-md-6">
    <%= form.label :vendor_name, "Add New Vendor", class: 'form-label' %>
    <%= text_field_tag :vendor_name, nil, id: 'vendor-autocomplete', class: 'form-control', placeholder: 'Start typing vendor name...' %>
    <%= hidden_field_tag 'service_contract[vendor_id]', nil, id: 'selected-vendor-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 Vendor", class: 'btn btn-dark' %>
  </div>
<% end %>

<%# JavaScript for Vendor Autocomplete %>
<script>
$(document).ready(function() {
  $('#vendor-autocomplete').autocomplete({
    source: function(request, response) {
      $.ajax({
        url: '/vendors/search', // Endpoint for searching vendors
        dataType: "json",
        data: { term: request.term },
        success: function(data) {
          response(data);
        }
      });
    },
    minLength: 2,
    select: function(event, ui) {
      $('#vendor-autocomplete').val(ui.item.label);
      $('#selected-vendor-id').val(ui.item.value);
      return false;
    }
  });
});
</script>

</div>