<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="/stylesheets/adminNav.css">
  <link rel="stylesheet" href="/stylesheets/collections.css">
  <%- include("partials/header.ejs") %>
</head>

<body>
  <%- include("partials/loading.ejs") %>
  <%- include("partials/adminNav.ejs") %>
  <%- include("partials/adminPageLink.ejs") %>
  <div class="body">
    <div class="heading">
      <h2>Select <%= option %> to change</h2>
      <button id="add"><a href="/admin/collections/<%=option%>/add">Add <%= option %>
        </a></button>
    </div>
    <div class="options">
      <h3>Action:</h3>
      <form method="POST" id="formID">
        <select id="dropdown" name="action" id="form">
          <option value="-----------">------------</option>
          <option value="Delete" href="">Delete selected</option>
        </select>
        <button id="goButton">Go</button>
        <input type="hidden" id="selectedEmails" name="emails">
      </form>
      <div id="selectedCount"></div>
      <div class="data">
        <table>
          <thead>
            <tr>
              <th><input type="checkbox" id="selectAll"></th>
              <th></th>
              <% for(var i=1; i< keys.length;i++) { %>
              <% if(keys[i] !='password' ) {%>
              <th>
                <%= keys[i] %>
              </th>
              <% } %>
              <% } %>
            </tr>
          </thead>
          <tbody>
            <% for(var i=0;i< data.length; i++){ %>
            <tr>
              <td><input type="checkbox" class="selectRow" data-email="<%= data[i].email %>"></td>
              <td><button><a href="/admin/collections/<%=option%>/update?<%= Object.entries(data[i]).filter(([key, value]) => key !== 'password').map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&') %>">Edit</a></button>
              </td>
              <% for(var j=1; j< keys.length;j++) { %>
              <% if(keys[j] !='password' ) {%>
              <td>
                <% if (typeof data[i][keys[j]]==='object' ) { %>
                <ul>
                  <% Object.entries(data[i][keys[j]]).forEach(([prop,val])=>{ %>
                  <li>
                    <%= prop %>:
                    <%= val %>
                  </li>
                  <% }); %>
                </ul>
                <% } else { %>
                <%= data[i][keys[j]] %>
              </td>
              <% } %>
              <% } %>
              <% } %>
            </tr>
            <% } %>
          </tbody>
        </table>
        <div id="totalCount">
          <%= data.length %>
          <%= option %>
        </div>
      </div>
    </div>
  </div>
  <script>
    const selectAllCheckbox = document.getElementById('selectAll');
    const selectRowCheckboxes = document.querySelectorAll('.selectRow');

    updateSelectedCount();

    selectAllCheckbox.addEventListener('change', function() {
      selectRowCheckboxes.forEach(function(checkbox) {
        checkbox.checked = selectAllCheckbox.checked;
      });
      updateSelectedCount();
    });

    selectRowCheckboxes.forEach(function(checkbox) {
      checkbox.addEventListener('change', function() {
        updateSelectedCount();
      });
    });

    function updateSelectedCount() {
      const selectedCount = document.querySelectorAll('.selectRow:checked').length;
      const totalCount = selectRowCheckboxes.length;
      const selectedCountElement = document.getElementById('selectedCount');
      selectedCountElement.textContent = selectedCount + ' of ' + totalCount + ' selected';
    }

    document.getElementById('goButton').addEventListener('click', function() {
      const selectedEmails = [];
      document.querySelectorAll('.selectRow:checked').forEach(function(checkbox) {
        selectedEmails.push(checkbox.dataset.email);
      });
      document.getElementById('selectedEmails').value = selectedEmails.join(',');
      document.getElementById('form').submit();
    });
  </script>
</body>


</html>