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

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

    <!-- Employer Information Table -->
    <div class="col-12 mb-4">
      <table class="table">
        <tbody>
          <tr>
            <th>Name</th>
            <td><%= @employer.first_name %> <%= @employer.last_name %></td>
          </tr>
          <tr>
            <th>Address</th>
            <td>
              <%= @employer.address_line_1 %><%= ', ' + @employer.address_line_2 unless @employer.address_line_2.blank? %>
            <br>
              <%= "#{@employer.city}, #{@employer.state} #{@employer.zip}" %>
            </td>
          </tr>
          <tr>
            <th>Phone</th>
            <td><%= @employer.phone %></td>
          </tr>
          <tr>
            <th>Email</th>
            <td><%= @employer.email %></td>
          </tr>
          <tr>
            <th>TIN</th>
            <td><%= @employer.tin %></td>
          </tr>
          <tr>
            <th>Date of Birth</th>
            <td><%= @employer.dob %></td>
          </tr>
          <tr>
            <th>SSN</th>
            <td><%= mask_ssn(@employer.ssn) %></td>
          </tr>
          <tr>
            <th>Gender</th>
            <td><%= @employer.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_employer_path(@employer), class: "btn btn-dark" %>
      <%= link_to 'Back to List', employers_path, class: "btn btn-secondary" %>
    </div>
  </div>
</div>


<div class="container mt-5">
    <div class="row">
      <!-- Linked Participants Section -->
      <div class="col-md-6">
        <h2 class="mt-4">Linked Participants</h2>
        <% if @employer.employer_records.any? %>
          <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>
            <% @employer.employer_records.each do |employer_record| %>
              <tr>
                <% participant = employer_record.participant %>
                <td><%= "#{participant.first_name} #{participant.last_name}" %></td>
                <td><%= employer_record.start_date.strftime('%B %d, %Y') if employer_record.start_date %></td>
                <td><%= employer_record.end_date.strftime('%B %d, %Y') if employer_record.end_date %></td>
                <td>
                  <%= link_to participant_path(participant), class: 'btn btn-sm btn-secondary' do %>
                    <i class="bi bi-eye"></i> <!-- Eyeball icon for 'Show' -->
                  <% end %>
                  <%= link_to edit_employer_record_path(employer_record), 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 linked participants.</p>
      <% end %>
   

  <%= form_with(model: [@employer, EmployerRecord.new], url: link_participant_employer_records_path, 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 'employer_record[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 %>

</div>
  
   <div class="col-md-6">
      <h2 class="mt-4">Linked Workers</h2>
      <% if @employer.workers.any? %>
        <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>
        <% @employer.workers.each do |worker| %>
          <% worker.employments.joins(:participant).where(participants: { employer_id: @employer.id }).each do |employment| %>
            <tr>
              <td><%= worker.full_name %></td>
              <td><%= employment.start_date.strftime('%B %d, %Y') if employment.start_date %></td>
              <td><%= employment.end_date.strftime('%B %d, %Y') if employment.end_date %></td>
              <td>
                <%= link_to worker_path(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 %>
        <% end %>
      </tbody>
    </table>
  <% else %>
    <p>No linked workers.</p>
  <% end %>

  <%= form_with(model: EmployerRecord.new, url: link_worker_employer_path(@employer), 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 'employer_record[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', name: 'employer_record[start_date]' %>
    </div>
  
    <div class="col-md-3">
      <%= form.label :end_date, class: 'form-label' %>
      <%= form.date_field :end_date, class: 'form-control', name: 'employer_record[end_date]' %>
    </div>
  
    <div class="col-12">
      <%= form.submit "Link Worker", class: 'btn btn-dark' %>
    </div>
  <% end %>
  
  
    </div>
  </div>
</div>

  
<%# 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>

<%# JavaScript for Worker Autocomplete %>
<script>
$(document).ready(function() {
  $('#worker-autocomplete').autocomplete({
    source: function(request, response) {
      $.ajax({
        url: '/workers/search', // 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); // Worker's name
      $('#selected-worker-id').val(ui.item.value); // Worker's ID
      return false;
    }
  });
});
</script>