@push('styles')
<style>
  #jobs-queue-table-wrapper { border:1px solid #3b5998; border-radius:4px; overflow-x:auto; }
  #jobs-queue-table { white-space: nowrap; width:100%; }
  #jobs-queue-table thead th { background-color:#3b5998; color:#fff; }
  #jobs-queue-table tbody tr:hover { background-color:#f8f9fa; }
  #jobs-queue-table th, #jobs-queue-table td { padding:.5rem; }
  #jobs-queue-table th:nth-child(1), #jobs-queue-table td:nth-child(1) { text-align:right; }
  .errors-cell pre {
    white-space: pre;
    margin: 0;
    padding: .25rem;
    background-color: #f8d7da;
    border-radius: .25rem;
    font-size: .75rem;
    overflow-x: auto;
  }
</style>
@endpush

<div id='jobs-queue-section'>
  <div class='table-responsive' id='jobs-queue-table-wrapper'>
    <table id='jobs-queue-table' class='table table-sm table-bordered align-middle mb-0'>
      <thead>
        <tr>
          <th>ID</th>
          <th>Created</th>
          <th>Account</th>
          <th>From</th>
          <th>To</th>
          <th>Errors</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <nav><ul id='queue-pagination' class='pagination pagination-sm justify-content-center mt-2'></ul></nav>
</div>

@push('scripts')
<script>
window.SP_render_queue = function(queue) {
  const { data, total, page, per_page } = queue;
  const $tbody = $('#jobs-queue-table tbody').empty();

  data.forEach(item => {
    const created = `<td><small class='text-muted'>${item.created_at_human || ''}</small></td>`;
    const from     = `<td>${item.email || ''}</td>`;
    const errors   = item.errors ? `<td class='errors-cell'><pre>${item.errors}</pre></td>` : '<td></td>';

    const row = $(`<tr>
      <td>${item.id}</td>
      ${created}
      <td>${item.from_account_id}</td>
      ${from}
      <td>${item.to_email || ''}</td>
      ${errors}
    </tr>`);

    $tbody.append(row);
  });

  const totalPages = Math.ceil(total / per_page);
  const $pg = $('#queue-pagination').empty();

  const range = 2; // show 2 pages before/after current
  let start = Math.max(1, page - range);
  let end = Math.min(totalPages, page + range);

  if (start > 1) {
    $pg.append(`<li class='page-item'><a class='page-link' href='#' data-page='1'>1</a></li>`);
    if (start > 2) $pg.append(`<li class='page-item disabled'><span class='page-link'>…</span></li>`);
  }

  for (let i = start; i <= end; i++) {
    const active = i === page ? 'active' : '';
    $pg.append(`<li class='page-item ${active}'><a class='page-link' href='#' data-page='${i}'>${i}</a></li>`);
  }

  if (end < totalPages) {
    if (end < totalPages - 1) $pg.append(`<li class='page-item disabled'><span class='page-link'>…</span></li>`);
    $pg.append(`<li class='page-item'><a class='page-link' href='#' data-page='${totalPages}'>${totalPages}</a></li>`);
  }

  $('#queue-pagination .page-link').on('click', e => {
    e.preventDefault();
    const newPage = +$(e.target).data('page');
    if (!isNaN(newPage)) {
      window.queue_page = newPage;
      window.SP_poll();
    }
  });
};
</script>
@endpush