{% load ldap_front %}

<div id="toolbar">
  <button id="delete-selected-btn" class="btn btn-danger" disabled>
    <i class="bi bi-trash-fill"></i> Delete selected (<span id="selected-count">0</span>)
  </button>
</div>
<table id="device-list"
  class="table table-striped table-hover" data-classes="table-borderless" data-toggle="table"
  data-toolbar="#toolbar"
  data-search="true"
  data-sort-name="name">
  <thead>
    <tr>
      <th data-checkbox="true"></th>
      <th scope="col">Type</th>
      <th scope="col" data-sortable="true" data-field="name">Manufacturer</th>
      <th scope="col">Operating System</th>
      <th scope="col">Owner</th>
      <th scope="col">Creation Date</th>
      <th scope="col">Last connection</th>
      <th scope="col">TPM</th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
{% for device in devices %}
    <tr data-uuid="{{ device.uuid }}">
      <td data-field="state"></td>
      <td scope="col">{{ device.type|show_device_type|safe }}</td>
      <td scope="col"><b>{{ device.manufacturer|default_if_none:"Unknown manufacturer" }} - {{ device.model|default_if_none:"Unknown model" }}</b></td>
      <td scope="col">{{ device.operating_system|default_if_none:"Unknown" }} - {{ device.operating_system_version|default_if_none:"Unknown version" }}</td>
      <td scope="col">
        {% if device.owner %}
          <a href="{% url 'people_show' username=device.owner %}">{{ device.owner }}</a>
        {% else %}-{% endif %}
      </td>
      <td scope="col">{{ device.date_creation|date:"d/m/Y" }}</td>
      <td scope="col">{{ device.date_last_connection|date:"d/m/Y" }}</td>
      <td scope="col">{{ device.tpm|default_if_none:"-" }}</td>
      <td scope="col">
          <form action="{% url 'device_revoke' device_uuid=device.uuid %}" method="post">
            {% csrf_token %}
            <button type="submit" class="btn p-0">
              <i class="bi bi-trash-fill"></i>
            </button>
          </form>
      </td>
    </tr>
{% endfor %}
  </tbody>
</table>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const $table = $('#device-list');
  const $deleteBtn = $('#delete-selected-btn');
  const $count = $('#selected-count');

  // Update button state whenever selection changes
  function updateDeleteButton() {
    const selected = $table.bootstrapTable('getSelections');
    const count = selected.length;
    $count.text(count);
    $deleteBtn.prop('disabled', count === 0);
  }

  $table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', updateDeleteButton);

  $deleteBtn.on('click', async function () {
    const selected = $table.bootstrapTable('getSelections');
    if (!selected.length) return;

    //if (!confirm(`Delete ${selected.length} device(s)? This cannot be undone.`)) return;

    $deleteBtn.prop('disabled', true).text('Deleting…');

    // Better approach: store uuid directly in the row data
    // This requires adding data-uuid to each <tr> as shown above.
    // We'll fetch them from the DOM instead:
    const checkedUuids = [];
    $table.find('tr.selected').each(function () {
      const uuid = $(this).data('uuid');
      if (uuid) checkedUuids.push(uuid);
    });

    const results = await Promise.allSettled(
      checkedUuids.map(uuid =>
        fetch(`/api/v1/device/${uuid}/`, {   // ← adjust to your API endpoint
          method: 'DELETE',
          headers: {
            'Content-Type': 'application/json',
          },
        })
      )
    );

    const failed = results.filter(r => r.status === 'rejected' || (r.value && !r.value.ok));

    if (failed.length) {
      alert(`${failed.length} deletion(s) failed. Please try again.`);
    }

    // Remove successfully deleted rows from the table
    results.forEach((result, i) => {
      if (result.status === 'fulfilled' && result.value.ok) {
        $table.find(`tr[data-uuid="${checkedUuids[i]}"]`).remove();
      }
    });

    $table.bootstrapTable('refresh');
    updateDeleteButton();
    $deleteBtn.text('Delete selected');
  });
});
</script>