<table class="table-address-add">
  <tr>
    <td style="text-align: left;">
      <div class="pagination">
        <%= paginate @user_logs %>
      </div>
    </td>
  </tr>
</table>

<table class="table-address-np">
  <tr>
    <th><%= t('activerecord.attributes.request_matters.created_at') %></th>
    <th><%= t('activerecord.attributes.requested_matters.name') %></th>
    <th><%= t('activerecord.attributes.requested_matters.mail_address') %></th>
  </tr>

<% if @user_logs.present? %>
  <% tmp_id  = "" %>
  <% @user_logs.each do |record| %>
    <% unless record.id == tmp_id %>
    <tr id="request_matter_item_<%= record.id %>">
      <td class="address_date">
        <%= record.created_at.strftime("%Y-%m-%d %H:%M:%S") %>
      </td>
      <% items = get_requested_matters_info(record.id) %>
      <% if items.size >= 1 %>
      <td class="address_name" style="border-spacing:2px;padding: 0px;">
        <table class="table-address-inner">
        <% items.each do |item| %>
          <tr class="requested_matter_item_<%= item[0] %>" data-id="<%= item[0] %>">
            <td class="address_name_inner"><%= item[1] %></td>
          </tr>
        <% end %>
        </table>
      </td>
      <td class="address_email" style="border-spacing:2px;padding: 0px;">
        <table class="table-address-inner">
        <% items.each do |item| %>
          <tr class="requested_matter_item_<%= item[0] %>" data-id="<%= item[0] %>">
            <td class="address_email_inner"><%= item[2] %></td>
            <%= link_to '',
                { controller: :user_log, action: :requested_matter_info, id: item[0]},
                id: "show_requested_matter_#{item[0]}", 
                class: 'show_requested_matter', 
                style: 'visibility:hidden;',
                data: {turbo: false} %>
          </tr>
        <% end %>
        </table>
      </td>
      <% end %>
    </tr>
    <% end %>
    <% tmp_id = record.id %>
  <% end %>
<% end %>
</table>

<table class="table-address-add">
  <tr>
    <td style="text-align: left;">
      <div class="pagination">
        <%= paginate @user_logs %>
      </div>
    </td>
  </tr>
</table>

<script type="text/javascript">
// ページネーション差し替え後も動作するようdocumentレベルでイベント委譲
// 重複登録防止
if (!window._userLogIndexRequestResultClickBound) {
  window._userLogIndexRequestResultClickBound = true;
  document.addEventListener('click', function(e) {
    var resultEl = document.getElementById('result');
    if (!resultEl || !resultEl.contains(e.target)) return;
    var target = e.target.closest('.address_name_inner, .address_email_inner');
    if (target) {
      var id = target.parentElement.dataset.id;
      var link = document.querySelector("a#show_requested_matter_" + id);
      if (link) link.click();
    }
  });

  document.addEventListener('mouseenter', function(e) {
    var resultEl = document.getElementById('result');
    if (!resultEl || !resultEl.contains(e.target)) return;
    var target = e.target.closest('.address_name_inner, .address_email_inner');
    if (target) {
      document.querySelectorAll(".address_name, .address_email").forEach(function(el) { el.style.backgroundColor = 'white'; });
      document.querySelectorAll("."+target.parentElement.getAttribute('class')).forEach(function(el) { el.style.backgroundColor = '#FFF5EE'; });
    }
  }, true);

  document.addEventListener('mouseleave', function(e) {
    var resultEl = document.getElementById('result');
    if (!resultEl || !resultEl.contains(e.target)) return;
    var target = e.target.closest('.address_name_inner, .address_email_inner');
    if (target) {
      document.querySelectorAll("."+target.parentElement.getAttribute('class')).forEach(function(el) { el.style.backgroundColor = 'white'; });
    }
  }, true);
}
</script>
