@push("styles")
<style>
  /* Wrapper with outer blue border */
  #jobs-table-wrapper {
    border: 1px solid #3b5998;
    border-radius: 4px;
    overflow: hidden;
  }
  .table-responsive { overflow-x: auto; }

  /* Prevent wrapping */
  #jobs-table { white-space: nowrap; width: 100%; }

  /* Header background */
  #jobs-table thead th {
    background-color: #3b5998;
    color: #fff;
  }

  /* Default inner borders & padding via table-bordered */
  /* Row styles */
  #jobs-table tbody tr { cursor: pointer; }
  #jobs-table tbody tr:hover { background-color: #f8f9fa; }
  #jobs-table tbody tr.table-active { background-color: #cce5ff !important; }

  /* Column alignments */
  #jobs-table th:nth-child(1),
  #jobs-table td:nth-child(1) { text-align: right; }
  .state-cell, .mode-cell { text-align: center; }

  /* Progress bar styling */
  .progress {
    height: .5rem !important;
    min-width: 150px;
  }

  /* Progress container and stats */
  .progress-container {
    display: flex;
    flex-direction: column;
  }
  .progress-stats {
    display: flex;
    justify-content: space-between;
    font-size: .65rem;
    margin-top: .1rem;
  }
  .progress-stats .left small:first-child { margin-right: .25rem; }
  .progress-stats .right { color: #6c757d; }

  /* Errors JSON styling */
  .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-section">
  <div class="table-responsive" id="jobs-table-wrapper">
    <table id="jobs-table" class="table table-sm table-bordered align-middle mb-0">
      <thead>
        <tr>
          <th>ID</th>
          <th>Created</th>
          <th class="state-cell">State</th>
          <th class="mode-cell">Mode</th>
          <th>Progress</th>
          <th>Errors</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <nav>
    <ul id="jobs-pagination" class="pagination pagination-sm justify-content-center mt-2"></ul>
  </nav>
</div>

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

  data.forEach(job => {
    // Created
    const created = `<td><small class=\"text-muted\">${job.created_at_human}</small></td>`;
    // State
    let stateIcon = '<i class=\"fas fa-clock text-secondary\"></i>';
    if (job.errors) stateIcon = '<i class=\"fas fa-times text-danger\"></i>';
    else if (job.finished_at) stateIcon = '<i class=\"fas fa-check text-success\"></i>';
    else if (job.started_at) stateIcon = '<i class=\"fas fa-sync-alt fa-spin text-primary\"></i>';
    const stateCell = `<td class=\"state-cell\">${stateIcon}</td>`;
    // Mode
    const modeIcon = job.mode === 'test'
      ? '<i class=\"fas fa-vial text-secondary\"></i>'
      : '<i class=\"fas fa-industry text-dark\"></i>';
    const modeCell = `<td class=\"mode-cell\">${modeIcon}</td>`;
    // Progress and stats
    const totalCount = job.total || 0;
    let progressBar = '<div class=\"progress\"></div>';
    if (totalCount) {
      const okPct  = Math.round((job.success / totalCount) * 100);
      const errPct = Math.round((job.failed  / totalCount) * 100);
      progressBar = `<div class=\"progress\">` +
        `<div class=\"progress-bar bg-success\" style=\"width:${okPct}%\"></div>` +
        `<div class=\"progress-bar bg-danger\" style=\"width:${errPct}%\"></div>` +
      `</div>`;
    }
    const progressCell = `<td><div class=\"progress-container\">${progressBar}` +
      `<div class=\"progress-stats\">` +
        `<span class=\"left\"><small class=\"text-danger\">${job.failed}</small>` +
        `<small class=\"text-success\">${job.success}</small></span>` +
        `<span class=\"right\"><small>${job.total}</small></span>` +
      `</div></div></td>`;
    // Errors
    const errorsCell = job.errors
      ? `<td class=\"errors-cell\"><pre>${job.errors}</pre></td>`
      : `<td></td>`;
    // Row build
    const $row = $(
      `<tr data-id=\"${job.id}\">` +
        `<td>${job.id}</td>` + created + stateCell + modeCell + progressCell + errorsCell +
      `</tr>`
    );
    $tbody.append($row);
  });
  // Row selection
  const $rows = $("#jobs-table tbody tr");
  if (!window.selected_job) {
    const $first = $rows.first(); $first.addClass("table-active"); window.selected_job = $first.data("id");
  } else {
    $rows.filter(`[data-id=\"${window.selected_job}\"]`).addClass("table-active");
  }
  $rows.on("click", function() {
    $rows.removeClass("table-active"); $(this).addClass("table-active"); window.selected_job = $(this).data("id");
  });
  // Pagination
  const totalPages = Math.ceil(total / per_page);
  const $pg = $("#jobs-pagination").empty();
  for (let i = 1; i <= totalPages; i++) {
    const active = i === page ? 'active' : '';
    $pg.append(`<li class=\"page-item ${active}\"><a class=\"page-link\" href=\"#\" data-page=\"${i}\">${i}</a></li>`);
  }
  $("#jobs-pagination .page-link").on("click", function(e) {
    e.preventDefault(); window.jobs_page = +$(this).data("page"); window.SP_poll();
  });
};
</script>
@endpush