registerPage('employees', async (content, params = {}) => {
  document.getElementById('topbar-title').textContent = 'Employees';
  let clients = [];

  async function loadClients() {
    const r = await api('clients.php', { action: 'list' });
    if (r.success) clients = r.clients;
  }

  async function render(search = '', clientFilter = '') {
    const r = await api('employees.php', { action: 'list', search, clients_id: clientFilter });
    if (!r.success) { document.getElementById('emp-table').innerHTML = emptyHTML('Error: ' + (r.error || 'unknown')); return; }
    if (r.prompt) { document.getElementById('emp-table').innerHTML = `<div class="empty-state"><p>Select a client or enter a search term to load employees.</p></div>`; return; }
    const rows = r.employees;
    const limitNote = r.count >= r.limit ? `<p class="text-muted text-sm" style="padding:8px 14px">Showing first ${r.limit} results — use search or client filter to narrow down.</p>` : '';
    document.getElementById('emp-table').innerHTML = rows.length === 0 ? emptyHTML('No employees found') : limitNote + `
      <div class="table-wrap"><table>
        <thead><tr><th>Name</th><th>Surname</th><th>ID/Passport</th><th>Client</th><th>Occupation</th><th>Company #</th><th>Actions</th></tr></thead>
        <tbody>${rows.map(e => `<tr>
          <td class="fw-500">${e.client_employees_name}</td>
          <td>${e.surname}</td>
          <td class="mono">${e.i_doc_passport || '—'}</td>
          <td>${e.clients_name || '—'}</td>
          <td>${e.occupation || '—'}</td>
          <td class="mono">${e.company_number || '—'}</td>
          <td class="actions-td">
            <button class="btn btn-sm btn-secondary" onclick="empEdit(${e.record_id})">Edit</button>
            <button class="btn btn-sm btn-danger" onclick="empDelete(${e.record_id})">Delete</button>
          </td></tr>`).join('')}
        </tbody>
      </table></div>`;
  }

  content.innerHTML = `
    <div class="search-wrap">
      <div class="search-input-wrap">
        <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35" stroke-linecap="round"/></svg>
        <input type="text" id="emp-search" placeholder="Search employees…">
      </div>
      <select id="emp-client-filter" style="max-width:200px"><option value="">All Clients</option></select>
      <button class="btn btn-secondary" onclick="doExportCSV({clients_id: document.getElementById('emp-client-filter').value || ''})">⬇ Excel</button>
      <button class="btn btn-secondary" onclick="doExportPDF({clients_id: document.getElementById('emp-client-filter').value || ''})">⬇ PDF</button>
      <button class="btn btn-primary" onclick="empAdd()">+ Add Employee</button>
    </div>
    <div class="card"><div id="emp-table">${loadingHTML()}</div></div>

    <!-- Add/Edit Modal -->
    <div class="modal-bg" id="emp-modal">
      <div class="modal modal-lg" style="width:860px;max-height:92vh;display:flex;flex-direction:column">
        <div class="modal-header" style="flex-shrink:0">
          <h3 id="emp-modal-title">Add Employee</h3>
          <button class="modal-close" onclick="closeModal('emp-modal')">×</button>
        </div>
        <div class="modal-body" id="emp-modal-body" style="flex:1;overflow-y:auto;min-height:0">
          <form id="emp-form">
            <input type="hidden" id="ef-id">
            <div class="form-grid cols-3">
              <div class="form-group"><label>First Name *</label><input type="text" id="ef-name" required></div>
              <div class="form-group"><label>Surname *</label><input type="text" id="ef-surname" required></div>
              <div class="form-group"><label>Client *</label><select id="ef-client"><option value="">— Select —</option></select></div>
              <div class="form-group"><label>ID / Passport</label><input type="text" id="ef-id-doc"></div>
              <div class="form-group"><label>Cell</label><input type="text" id="ef-cell"></div>
              <div class="form-group"><label>Company Number</label><input type="text" id="ef-company-no"></div>
              <div class="form-group"><label>Occupation</label><input type="text" id="ef-occupation"></div>
              <div class="form-group"><label>TEBA Number</label><input type="text" id="ef-teba"></div>
              <div class="form-group"><label>Badge Number</label><input type="text" id="ef-badge"></div>
              <div class="form-group"><label>Team Number</label><input type="text" id="ef-team"></div>
              <div class="form-group"><label>Industry</label><input type="text" id="ef-industry"></div>
              <div class="form-group"><label>Induction Date</label><input type="date" id="ef-induction"></div>
              <div class="form-group"><label>Medical Date</label><input type="date" id="ef-medical"></div>
            </div>
          </form>
          <!-- Results section (only shown when editing) -->
          <div id="emp-results-section" style="display:none;margin-top:24px">
            <div class="divider"></div>
            <h3 style="font-size:13px;font-weight:600;margin-bottom:14px">Assessment & Test History</h3>
            <div id="emp-results-list">${loadingHTML()}</div>
          </div>
        </div>
        <div class="modal-footer" style="flex-shrink:0">
          <button class="btn btn-secondary" onclick="closeModal('emp-modal')">Cancel</button>
          <button class="btn btn-primary" onclick="empSave()">Save Employee</button>
        </div>
      </div>
    </div>

    <!-- Result View Modal -->
    <div class="modal-bg" id="result-view-modal">
      <div class="modal modal-lg" style="width:800px;max-height:92vh;display:flex;flex-direction:column">
        <div class="modal-header" style="flex-shrink:0">
          <h3 id="result-view-title">Assessment Detail</h3>
          <button class="modal-close" onclick="closeModal('result-view-modal')">×</button>
        </div>
        <div class="modal-body" id="result-view-body" style="flex:1;overflow-y:auto;min-height:0"></div>
        <div class="modal-footer" id="result-view-footer" style="flex-shrink:0"></div>
      </div>
    </div>`;

  await loadClients();
  const clientSel = document.getElementById('ef-client');
  const filterSel = document.getElementById('emp-client-filter');
  clients.forEach(c => {
    clientSel.innerHTML += `<option value="${c.record_id}">${c.clients_name}</option>`;
    filterSel.innerHTML += `<option value="${c.record_id}">${c.clients_name}</option>`;
  });

  const go = () => render(document.getElementById('emp-search').value, document.getElementById('emp-client-filter').value);
  document.getElementById('emp-search').addEventListener('input', go);
  document.getElementById('emp-client-filter').addEventListener('change', go);
  render();

  function fillForm(e = null) {
    document.getElementById('emp-modal-title').textContent = e ? 'Edit Employee' : 'Add Employee';
    document.getElementById('ef-id').value = e?.record_id || '';
    document.getElementById('ef-name').value = e?.client_employees_name || '';
    document.getElementById('ef-surname').value = e?.surname || '';
    document.getElementById('ef-client').value = e?.clients_id || '';
    document.getElementById('ef-id-doc').value = e?.i_doc_passport || '';
    document.getElementById('ef-cell').value = e?.cell || '';
    document.getElementById('ef-company-no').value = e?.company_number || '';
    document.getElementById('ef-occupation').value = e?.occupation || '';
    document.getElementById('ef-teba').value = e?.teba_number || '';
    document.getElementById('ef-badge').value = e?.badge_number || '';
    document.getElementById('ef-team').value = e?.team_number || '';
    document.getElementById('ef-industry').value = e?.industry || '';
    document.getElementById('ef-induction').value = e?.induction_date || '';
    document.getElementById('ef-medical').value = e?.medical_date || '';
  }

  window.empAdd = () => {
    const w = document.getElementById('emp-dup-warning');
    if (w) w.remove();
    document.getElementById('emp-results-section').style.display = 'none';
    fillForm();
    openModal('emp-modal');
  };

  window.empEdit = async (id) => {
    const w = document.getElementById('emp-dup-warning');
    if (w) w.remove();
    console.log('[employees] edit id:', id);
    const r = await api('employees.php', { action: 'get', id });
    console.log('[employees] get response:', r);
    if (!r.success) { toast('Error: ' + r.error, 'error'); return; }
    fillForm(r.employee);
    // Show results section
    document.getElementById('emp-results-section').style.display = 'block';
    document.getElementById('emp-results-list').innerHTML = loadingHTML();
    openModal('emp-modal');
    // Load results async
    loadEmployeeResults(id);
  };

  async function loadEmployeeResults(empId) {
    const r = await api('results.php', { action: 'list', client_employees_id: empId });
    if (!r.success) {
      document.getElementById('emp-results-list').innerHTML = emptyHTML('Failed to load results');
      return;
    }

    const { assessments, tests } = r;
    if (!assessments.length && !tests.length) {
      document.getElementById('emp-results-list').innerHTML = `<p class="text-muted text-sm">No assessment or test results found.</p>`;
      return;
    }

    const assRows = assessments.map(a => {
      const passed = a.results === 'COMPETENT' || a.results === 'C';
      return `<tr>
        <td class="fw-500">${a.assesses_name || '—'}</td>
        <td><span class="badge ${passed ? 'badge-success' : 'badge-danger'}">${a.results || '—'}</span></td>
        <td class="mono">${a.current_mark || '—'} / ${a.passmark || '—'}</td>
        <td>${a.date || '—'}</td>
        <td>${a.assessor_name || a.assessor_username || '—'}</td>
        <td class="actions-td">
          ${a.booking_number ? `<button class="btn btn-sm btn-secondary" onclick="viewBookingPDF(${a.booking})" title="Booking #${a.booking_number}">#${a.booking_number}</button>` : ''}
          <button class="btn btn-sm btn-secondary" onclick="viewAssessment(${a.record_id})">View</button>
          <button class="btn btn-sm btn-secondary" onclick="pdfAssessment(${a.record_id})">PDF</button>
        </td></tr>`;
    }).join('');

    const testRows = tests.map(t => {
      const passed = t.results === 'COMPETENT' || t.results === 'C';
      return `<tr>
        <td class="fw-500">${t.test_name || '—'}</td>
        <td><span class="badge ${passed ? 'badge-success' : 'badge-danger'}">${t.results || '—'}</span></td>
        <td class="mono">${t.current_mark || '—'} / ${t.passmark || '—'}</td>
        <td>${t.date || '—'}</td>
        <td>${t.assessor_name || t.assessor_username || '—'}</td>
        <td class="actions-td">
          ${t.booking_number ? `<button class="btn btn-sm btn-secondary" onclick="viewBookingPDF(${t.booking})" title="Booking #${t.booking_number}">#${t.booking_number}</button>` : ''}
          <button class="btn btn-sm btn-secondary" onclick="viewTest(${t.record_id})">View</button>
          <button class="btn btn-sm btn-secondary" onclick="pdfTest(${t.record_id})">PDF</button>
        </td></tr>`;
    }).join('');

    const thead = `<thead><tr><th>Name</th><th>Result</th><th>Mark</th><th>Date</th><th>Assessor</th><th>Actions</th></tr></thead>`;

    let html = '';
    if (assessments.length) {
      html += `<p class="text-muted text-sm fw-500" style="margin-bottom:6px">Assessments (${assessments.length})</p>
        <div class="table-wrap" style="margin-bottom:16px"><table>${thead}<tbody>${assRows}</tbody></table></div>`;
    }
    if (tests.length) {
      html += `<p class="text-muted text-sm fw-500" style="margin-bottom:6px">Tests (${tests.length})</p>
        <div class="table-wrap"><table>${thead}<tbody>${testRows}</tbody></table></div>`;
    }
    document.getElementById('emp-results-list').innerHTML = html;
  }

  // ── View Assessment popup ──────────────────────────────────────────────────
  window.viewAssessment = async (id) => {
    const r = await api('results.php', { action: 'get_assessment', id });
    if (!r.success) { toast('Failed to load', 'error'); return; }
    const a = r.assessment;
    document.getElementById('result-view-title').textContent = a.assesses_name || 'Assessment';
    const passed = a.results === 'COMPETENT' || a.results === 'C';

    const sectionsHtml = (a.sections || []).map(sec => {
      const parts = (sec.subtotal || '').split('-');
      const total = parts[0] || '?', score = parts[1] || '?';
      const qRows = (sec.questions || []).map(q => `
        <tr>
          <td style="padding:8px 12px;font-size:12px">${q.question}</td>
          <td style="padding:8px 12px;text-align:center">
            <span class="badge ${+q.answer === 1 ? 'badge-success' : 'badge-danger'}">${+q.answer === 1 ? 'C' : 'NYC'}</span>
          </td>
          <td style="padding:8px 12px;font-size:11px;color:var(--muted)">${q.comment || ''}</td>
        </tr>`).join('');
      return `
        <div style="margin-bottom:14px;border:1px solid var(--border);border-radius:8px;overflow:hidden">
          <div style="background:var(--bg);padding:10px 14px;display:flex;justify-content:space-between;align-items:center">
            <span style="font-weight:500;font-size:13px">${sec.section_name}</span>
            <span class="mono text-sm" style="color:var(--muted)">${score} / ${total}</span>
          </div>
          <table style="width:100%;border-collapse:collapse">
            <thead><tr style="background:#f8fafc">
              <th style="padding:7px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)">Question</th>
              <th style="padding:7px 12px;text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);width:60px">Result</th>
              <th style="padding:7px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)">Comment</th>
            </tr></thead>
            <tbody>${qRows}</tbody>
          </table>
        </div>`;
    }).join('');

    document.getElementById('result-view-body').innerHTML = `
      <div class="form-grid" style="margin-bottom:16px">
        <div class="form-group"><label>Assessment</label><p class="fw-500">${a.assesses_name || '—'}</p></div>
        <div class="form-group"><label>Result</label><p><span class="badge ${passed ? 'badge-success' : 'badge-danger'}">${a.results || '—'}</span></p></div>
        <div class="form-group"><label>Candidate</label><p>${a.client_employees_name || ''} ${a.surname || ''}</p></div>
        <div class="form-group"><label>ID / Passport</label><p class="mono">${a.i_doc_passport || '—'}</p></div>
        <div class="form-group"><label>Company No</label><p class="mono">${a.company_number || '—'}</p></div>
        <div class="form-group"><label>Client / Mine</label><p>${a.clients_name || '—'}</p></div>
        <div class="form-group"><label>Assessor</label><p>${a.assessor_name || a.assessor_username || '—'}</p></div>
        <div class="form-group"><label>Assessor No</label><p class="mono">${a.assessor_number || '—'}</p></div>
        <div class="form-group"><label>Date</label><p>${a.date || '—'}</p></div>
        <div class="form-group"><label>Mark</label><p class="mono">${a.current_mark || '—'} / ${a.passmark || '—'}</p></div>
        <div class="form-group"><label>NQF Level</label><p>${a.nqf_level || '—'}</p></div>
        <div class="form-group"><label>Credits</label><p>${a.credits || '—'}</p></div>
        ${a.vehicle_model ? `<div class="form-group span-2"><label>Vehicle Model</label><p>${a.vehicle_model}</p></div>` : ''}
        ${a.notes ? `<div class="form-group span-2"><label>Notes</label><p>${a.notes}</p></div>` : ''}
      </div>
      <div class="divider"></div>
      <h4 style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px">Sections & Questions</h4>
      ${sectionsHtml || '<p class="text-muted text-sm">No section data.</p>'}`;

    document.getElementById('result-view-footer').innerHTML = `
      <button class="btn btn-secondary" onclick="pdfAssessment(${a.record_id})">⬇ PDF</button>
      ${a.booking ? `<button class="btn btn-secondary" onclick="viewBookingPDF(${a.booking})">Booking #${a.booking_number || a.booking}</button>` : ''}
      <button class="btn btn-secondary" onclick="closeModal('result-view-modal')">Close</button>`;

    openModal('result-view-modal');
  };

  // ── View Test popup ────────────────────────────────────────────────────────
  window.viewTest = async (id) => {
    const r = await api('results.php', { action: 'get_test', id });
    if (!r.success) { toast('Failed to load', 'error'); return; }
    const t = r.test;
    document.getElementById('result-view-title').textContent = t.test_name || 'Test';
    const passed = t.results === 'COMPETENT' || t.results === 'C';

    const qHtml = (t.questions || []).map(q => {
      const parts = (q.subtotal || '').split('-');
      const total = parts[0] || '?', score = parts[1] || '?';
      const ansRows = (q.answers || []).map(a => `
        <tr>
          <td style="padding:7px 12px;font-size:12px">${a.answer}</td>
          <td style="padding:7px 12px;text-align:center">
            <span class="badge ${+a.option === 1 ? 'badge-success' : 'badge-gray'}">${+a.option === 1 ? '✓' : '✗'}</span>
          </td>
          <td style="padding:7px 12px;font-size:11px;color:var(--muted)">${a.comment || ''}</td>
        </tr>`).join('');
      return `
        <div style="margin-bottom:14px;border:1px solid var(--border);border-radius:8px;overflow:hidden">
          <div style="background:var(--bg);padding:10px 14px;display:flex;justify-content:space-between;align-items:center">
            <span style="font-weight:500;font-size:13px">${q.questions}</span>
            <span class="mono text-sm" style="color:var(--muted)">${score} / ${total}</span>
          </div>
          <table style="width:100%;border-collapse:collapse">
            <thead><tr style="background:#f8fafc">
              <th style="padding:7px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)">Option</th>
              <th style="padding:7px 12px;text-align:center;font-size:10px;width:60px;color:var(--muted)">Selected</th>
              <th style="padding:7px 12px;text-align:left;font-size:10px;color:var(--muted)">Comment</th>
            </tr></thead>
            <tbody>${ansRows}</tbody>
          </table>
        </div>`;
    }).join('');

    document.getElementById('result-view-body').innerHTML = `
      <div class="form-grid" style="margin-bottom:16px">
        <div class="form-group"><label>Test</label><p class="fw-500">${t.test_name || '—'}</p></div>
        <div class="form-group"><label>Result</label><p><span class="badge ${passed ? 'badge-success' : 'badge-danger'}">${t.results || '—'}</span></p></div>
        <div class="form-group"><label>Candidate</label><p>${t.client_employees_name || ''} ${t.surname || ''}</p></div>
        <div class="form-group"><label>ID / Passport</label><p class="mono">${t.i_doc_passport || '—'}</p></div>
        <div class="form-group"><label>Client / Mine</label><p>${t.clients_name || '—'}</p></div>
        <div class="form-group"><label>Assessor</label><p>${t.assessor_name || t.assessor_username || '—'}</p></div>
        <div class="form-group"><label>Date</label><p>${t.date || '—'}</p></div>
        <div class="form-group"><label>Mark</label><p class="mono">${t.current_mark || '—'} / ${t.passmark || '—'}</p></div>
      </div>
      <div class="divider"></div>
      <h4 style="font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:12px">Questions & Answers</h4>
      ${qHtml || '<p class="text-muted text-sm">No question data.</p>'}`;

    document.getElementById('result-view-footer').innerHTML = `
      <button class="btn btn-secondary" onclick="pdfTest(${t.record_id})">⬇ PDF</button>
      ${t.booking ? `<button class="btn btn-secondary" onclick="viewBookingPDF(${t.booking})">Booking #${t.booking_number || t.booking}</button>` : ''}
      <button class="btn btn-secondary" onclick="closeModal('result-view-modal')">Close</button>`;

    openModal('result-view-modal');
  };

  // ── Assessment PDF — matches old system layout ─────────────────────────────
  window.pdfAssessment = async (id) => {
    const r = await api('results.php', { action: 'get_assessment', id });
    if (!r.success) { toast('Failed', 'error'); return; }
    const a = r.assessment;
    const passed = a.results === 'COMPETENT' || a.results === 'C';
    const sigBase = window.location.origin + window.location.pathname.replace('index.php', '').replace(/\/[^/]*$/, '/');

    const sectionsHtml = (a.sections || []).map(sec => {
      const parts = (sec.subtotal || '0-0').split('-');
      const total = parts[0] || '0', score = parts[1] || '0';
      const qRows = (sec.questions || []).map(q => `
        <tr>
          <td style="width:5%;border:1px solid black;padding:8px"><b></b></td>
          <td style="width:60%;border:1px solid black;padding:8px"><p>${q.question}</p></td>
          <td style="width:15%;border:1px solid black;padding:8px;text-align:center"><b>${+q.answer === 1 ? 'C' : ''}</b></td>
          <td style="width:15%;border:1px solid black;padding:8px;text-align:center"><b>${+q.answer === 0 ? 'NYC' : ''}</b></td>
          <td style="width:15%;border:1px solid black;padding:8px">${q.comment || ''}</td>
        </tr>`).join('');
      return `
        <table style="width:80%;border:1px solid black;margin-bottom:16px;border-collapse:collapse">
          <tr><td colspan="5" style="border:1px solid black;padding:8px;background:#f0f0f0">
            <h3 style="margin:0">${sec.section_name} &nbsp;&nbsp; Score: ${score}/${total}</h3>
          </td></tr>
          <tr>
            <th style="border:1px solid black;padding:8px"></th>
            <th style="border:1px solid black;padding:8px">CRITERIA</th>
            <th style="border:1px solid black;padding:8px;text-align:center">C</th>
            <th style="border:1px solid black;padding:8px;text-align:center">NYC</th>
            <th style="border:1px solid black;padding:8px">COMMENT</th>
          </tr>
          ${qRows}
        </table>`;
    }).join('');

    const html = `<!DOCTYPE html><html><head><meta charset="UTF-8">
    <title>${a.assesses_name}</title>
    <style>
      body { font-family: Arial, sans-serif; font-size: 12px; color: #000; padding: 20px; }
      td, th { padding: 8px; font-size: 12px; }
      h1,h2,h3 { margin: 4px 0; }
      @media print { @page { margin: 1cm; } body { padding: 0; } }
    </style></head><body>

    <table style="width:80%;float:left;top:5%;border:0px solid #038c5a">
      <tr><td colspan="2"><h1 style="margin-left:50px">SAFETY &amp; TRAINING PRACTITIONERS</h1></td></tr>
      <tr><td colspan="2"><h3 style="margin-left:50px">${a.assesses_info || ''}</h3></td></tr>
      <tr>
        <td><h3 style="margin-left:50px">NQF LEVEL: ${a.nqf_level || ''}</h3></td>
        <td><h3 style="margin-right:150px">Credits: ${a.credits || ''}</h3></td>
      </tr>
      <tr>
        <td><h3 style="margin-left:50px">${a.assesses_name || ''}</h3></td>
        <td><h3 style="margin-left:50px">Vehicle Model: ${a.vehicle_model || ''}</h3></td>
      </tr>
    </table>
    <br style="clear:both"><br>

    <table style="width:80%;float:left;border:0px solid #038c5a">
      <tr><td><h3 style="margin-left:50px">CANDIDATE NAME</h3></td><td><h3 style="margin-left:50px">${a.client_employees_name || ''} ${a.surname || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">COY NO</h3></td><td><h3 style="margin-left:50px">${a.company_number || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ID NO.</h3></td><td><h3 style="margin-left:50px">${a.i_doc_passport || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">MINE</h3></td><td><h3 style="margin-left:50px">${a.clients_name || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSOR</h3></td><td><h3 style="margin-left:50px">${a.assessor_name || a.assessor_username || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSOR NO</h3></td><td><h3 style="margin-left:50px">${a.assessor_number || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSMENT DATE</h3></td><td><h3 style="margin-left:50px">${a.date || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">COMPETENT / NYC</h3></td><td><h3 style="margin-left:50px">${a.results || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">CAND. SIGNATURE</h3></td>
          <td><img src="${sigBase}${a.candidate_sig}" width="150" onerror="this.style.display='none'"></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSOR SIGNATURE</h3></td>
          <td><img src="${sigBase}${a.assessor_sig}" width="150" onerror="this.style.display='none'"></td></tr>
      <tr><td><h3 style="margin-left:50px">DATE</h3></td><td><h3 style="margin-left:50px">${a.date || ''}</h3></td></tr>
    </table>
    <br style="clear:both"><br>

    <!-- Sections page -->
    <table style="width:80%;float:left;border:0px">
      <tr><td colspan="2"><h1 style="margin-left:50px">SAFETY &amp; TRAINING PRACTITIONERS</h1></td></tr>
      <tr><td colspan="2"><h3 style="margin-left:50px">${a.assesses_info || ''}</h3></td></tr>
      <tr>
        <td><h3 style="margin-left:50px">NQF LEVEL: ${a.nqf_level || ''}</h3></td>
        <td><h3>Credits: ${a.credits || ''}</h3></td>
      </tr>
      <tr><td><h3 style="margin-left:50px">${a.assesses_name || ''}</h3></td></tr>
    </table>
    <br style="clear:both"><br>

    ${sectionsHtml}

    <br style="clear:both">
    <div style="margin:16px 0">
      <p><b>I fully understand the above and was under no pressure or obligation to sign this document.<br>
      Signed on ${a.date || new Date().toLocaleDateString('en-ZA')}</b></p>
    </div>

    <table style="width:80%;border:1px solid black;border-collapse:collapse">
      <tr>
        <td style="width:50%;border:1px solid black;padding:10px"><b>Candidate Signature.</b></td>
        <td style="width:50%;border:1px solid black;padding:10px">
          <img src="${sigBase}${a.candidate_sig}" width="100" onerror="this.style.display='none'">
        </td>
      </tr>
      <tr>
        <td style="border:1px solid black;padding:10px"><h3>Assessor Signature.</h3></td>
        <td style="border:1px solid black;padding:10px">
          <img src="${sigBase}${a.assessor_sig}" width="100" onerror="this.style.display='none'">
        </td>
      </tr>
    </table>

    <h2><u>CONFIRMATION OF TRAINING</u></h2>
    <p>I, <b>${a.client_employees_name || ''} ${a.surname || ''}</b>, hereby confirm that I have received training in theory
    and practical on <span style="color:red">${a.assesses_name || ''}</span>. I confirm that I have been given the opportunity
    to ask questions and that answers given have been satisfactory. I have signed every section of this training evaluation.
    I furthermore undertake to carry out my appointed duties applicable to this equipment in a safe manner and to adhere
    to all safety aspects as required by Codes of Practice and Safe Working Procedures.</p>

    <table style="width:80%">
      <tr>
        <td><h2>Signature of Candidate</h2></td>
        <td><img src="${sigBase}${a.candidate_sig}" width="150" onerror="this.style.display='none'"></td>
      </tr>
      <tr>
        <td><h2>Signature of Assessor;</h2></td>
        <td><img src="${sigBase}${a.assessor_sig}" width="150" onerror="this.style.display='none'"></td>
      </tr>
      <tr>
        <td><h2>Date:</h2></td>
        <td><h2>${a.date || ''}</h2></td>
      </tr>
    </table>

    ${a.image_file_path ? `<table style="width:80%">
      <tr>
        <td><h2>Photo of Candidate:</h2></td>
        <td><img src="${sigBase}uploads/${a.image_file_path}" width="150" onerror="this.style.display='none'"></td>
      </tr>
    </table>` : ''}

    <script>window.onload=function(){window.print();}<\/script>
    </body></html>`;

    const w = window.open('', '_blank');
    w.document.write(html);
    w.document.close();
  };

  // ── Test PDF ───────────────────────────────────────────────────────────────
  window.pdfTest = async (id) => {
    const r = await api('results.php', { action: 'get_test', id });
    if (!r.success) { toast('Failed', 'error'); return; }
    const t = r.test;
    const sigBase = window.location.origin + window.location.pathname.replace('index.php', '').replace(/\/[^/]*$/, '/');

    const qHtml = (t.questions || []).map(q => {
      const parts = (q.subtotal || '0-0').split('-');
      const total = parts[0] || '0', score = parts[1] || '0';
      const ansRows = (q.answers || []).map(a => `
        <tr>
          <td style="border:1px solid black;padding:8px;width:70%">${a.answer}</td>
          <td style="border:1px solid black;padding:8px;text-align:center;width:15%">${+a.option === 1 ? '✓' : ''}</td>
          <td style="border:1px solid black;padding:8px;width:15%">${a.comment || ''}</td>
        </tr>`).join('');
      return `
        <table style="width:80%;border:1px solid black;margin-bottom:16px;border-collapse:collapse">
          <tr><td colspan="3" style="border:1px solid black;padding:8px;background:#f0f0f0">
            <h3 style="margin:0">${q.questions} &nbsp;&nbsp; Score: ${score}/${total}</h3>
          </td></tr>
          <tr>
            <th style="border:1px solid black;padding:8px">OPTION</th>
            <th style="border:1px solid black;padding:8px;text-align:center">SELECTED</th>
            <th style="border:1px solid black;padding:8px">COMMENT</th>
          </tr>
          ${ansRows}
        </table>`;
    }).join('');

    const html = `<!DOCTYPE html><html><head><meta charset="UTF-8">
    <title>${t.test_name}</title>
    <style>
      body { font-family: Arial, sans-serif; font-size: 12px; padding: 20px; }
      td,th { padding: 8px; font-size: 12px; }
      h1,h2,h3 { margin: 4px 0; }
      @media print { @page{margin:1cm} body{padding:0} }
    </style></head><body>

    <table style="width:80%;float:left;border:0px">
      <tr><td colspan="2"><h1 style="margin-left:50px">SAFETY &amp; TRAINING PRACTITIONERS</h1></td></tr>
      <tr><td colspan="2"><h3 style="margin-left:50px">${t.test_info || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">NQF LEVEL: ${t.nqf_level || ''}</h3></td>
          <td><h3>Credits: ${t.credits || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">${t.test_name || ''}</h3></td></tr>
    </table>
    <br style="clear:both"><br>

    <table style="width:80%;float:left;border:0px">
      <tr><td><h3 style="margin-left:50px">CANDIDATE NAME</h3></td><td><h3>${t.client_employees_name || ''} ${t.surname || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">COY NO</h3></td><td><h3>${t.company_number || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ID NO.</h3></td><td><h3>${t.i_doc_passport || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">MINE</h3></td><td><h3>${t.clients_name || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSOR</h3></td><td><h3>${t.assessor_name || t.assessor_username || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSOR NO</h3></td><td><h3>${t.assessor_number || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">TEST DATE</h3></td><td><h3>${t.date || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">RESULT</h3></td><td><h3>${t.results || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">CAND. SIGNATURE</h3></td>
          <td><img src="${sigBase}${t.candidate_sig}" width="150" onerror="this.style.display='none'"></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSOR SIGNATURE</h3></td>
          <td><img src="${sigBase}${t.assessor_sig}" width="150" onerror="this.style.display='none'"></td></tr>
    </table>
    <br style="clear:both"><br>

    ${qHtml}

    <script>window.onload=function(){window.print();}<\/script>
    </body></html>`;

    const w = window.open('', '_blank');
    w.document.write(html);
    w.document.close();
  };

  // ── Booking PDF (attendance register) ─────────────────────────────────────
  window.viewBookingPDF = async (bookingId) => {
    const r = await api('bookings.php', { action: 'get', id: bookingId });
    if (!r.success) { toast('Failed to load booking', 'error'); return; }
    const b = r.booking;
    const empParts = (b.client_employees || '').split(',');
    const assParts = (b.assessments || '').split(',');
    const testParts = (b.tests || '').split(',');
    let counter = 0;
    const empRows = empParts.map((raw, i) => {
      const eid = raw.trim(); if (!eid) return '';
      const emp = (b.employees_map || {})[eid]; if (!emp) return '';
      counter++;
      const assId = (assParts[i] || '').trim();
      const testId = (testParts[i] || '').trim();
      const assName = assId ? ((b.assessment_map || {})[assId] || {}).assessments_name : '';
      const testName = testId ? ((b.test_map || {})[testId] || {}).test_name : '';
      const typeL = assName ? 'Assessment' : testName ? 'Test' : '';
      const nameL = assName || testName || '';
      return '<tr><td>' + counter + '</td><td>' + emp.client_employees_name + ' ' + emp.surname + '</td><td>' + (emp.i_doc_passport || '') + '</td><td>' + (emp.occupation || '') + '</td><td>' + typeL + '</td><td>' + nameL + '</td></tr>';
    }).filter(Boolean).join('');
    const date = new Date().toLocaleDateString('en-ZA', { day: 'numeric', month: 'short', year: 'numeric' });
    const parts = [
      '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Booking #' + (b.booking_number || b.record_id) + '</title>',
      '<style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:Arial,sans-serif;font-size:12px;padding:24px}',
      '.hdr{display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:12px;border-bottom:3px solid #e85d04}',
      '.brand{display:flex;align-items:center;gap:12px}.logo{width:44px;height:44px;background:#e85d04;border-radius:8px;color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}',
      '.bname{font-size:18px;font-weight:700}.bsub{font-size:10px;color:#64748b}',
      '.mg{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:18px}',
      '.mi label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#64748b;font-weight:600;display:block;margin-bottom:2px}.mi p{font-size:13px;font-weight:500}',
      'table{width:100%;border-collapse:collapse}th{background:#0d1b2a;color:#fff;padding:7px 10px;text-align:left;font-size:10px;text-transform:uppercase}',
      'td{padding:7px 10px;border-bottom:1px solid #e2e8f0}tr:nth-child(even) td{background:#f8fafc}',
      '.sig{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}.sb{border-top:1px solid #0d1b2a;padding-top:5px;font-size:10px;color:#64748b}',
      '@media print{@page{margin:1cm}body{padding:0}}</style></head><body>',
      '<div class="hdr"><div class="brand"><div class="logo">SS</div><div><div class="bname">SafeSure</div><div class="bsub">Attendance Register</div></div></div>',
      '<div style="text-align:right"><div style="font-size:18px;font-weight:700">Booking #' + (b.booking_number || b.record_id) + '</div><div style="font-size:10px;color:#64748b">Printed: ' + date + '</div></div></div>',
      '<div class="mg">',
      '<div class="mi"><label>Client</label><p>' + (b.clients_name || '') + '</p></div>',
      '<div class="mi"><label>Assessor</label><p>' + (b.assessor_full_name || b.assessor_name || '') + '</p></div>',
      '<div class="mi"><label>Status</label><p>' + (b.status || '') + '</p></div>',
      '<div class="mi"><label>Booking Date</label><p>' + (b.date_booked || '') + '</p></div>',
      '<div class="mi"><label>Approved</label><p>' + (b.date_approved || '') + '</p></div>',
      '<div class="mi"><label>Employees</label><p>' + counter + '</p></div>',
      '</div>',
      (b.notes ? '<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:10px;margin-bottom:14px"><b>Notes:</b> ' + b.notes + '</div>' : ''),
      '<table><thead><tr><th>#</th><th>Full Name</th><th>ID / Passport</th><th>Occupation</th><th>Type</th><th>Assessment / Test</th></tr></thead>',
      '<tbody>' + (empRows || '<tr><td colspan="6" style="text-align:center;color:#94a3b8;padding:20px">No employees</td></tr>') + '</tbody></table>',
      '<div class="sig"><div class="sb">Assessor Signature &amp; Date</div><div class="sb">Client Representative Signature &amp; Date</div></div>',
      '<scr' + 'ipt>window.onload=function(){window.print();}</' + 'script>',
      '</body></html>'
    ];
    const w = window.open('', '_blank');
    w.document.write(parts.join(''));
    w.document.close();
  };

  window.empSave = async () => {
    const id = document.getElementById('ef-id').value;
    const params = {
      action: id ? 'update' : 'create', id,
      client_employees_name: document.getElementById('ef-name').value,
      surname: document.getElementById('ef-surname').value,
      clients_id: document.getElementById('ef-client').value,
      i_doc_passport: document.getElementById('ef-id-doc').value,
      cell: document.getElementById('ef-cell').value,
      company_number: document.getElementById('ef-company-no').value,
      occupation: document.getElementById('ef-occupation').value,
      teba_number: document.getElementById('ef-teba').value,
      badge_number: document.getElementById('ef-badge').value,
      team_number: document.getElementById('ef-team').value,
      industry: document.getElementById('ef-industry').value,
      induction_date: document.getElementById('ef-induction').value,
      medical_date: document.getElementById('ef-medical').value,
    };
    console.log('[employees] save params:', params);
    const r = await api('employees.php', params, 'POST');
    console.log('[employees] save response:', r);
    if (r.success) { toast(r.message, 'success'); closeModal('emp-modal'); go(); }
    else {
      const msg = r.error || 'Unknown error';
      if (msg.includes('already exists')) {
        document.getElementById('emp-modal-body').insertAdjacentHTML('afterbegin',
          `<div style="background:#fee2e2;color:#991b1b;border-radius:7px;padding:10px 14px;
                       font-size:13px;margin-bottom:12px;border:1px solid #fecaca" id="emp-dup-warning">
            ⚠ ${msg}
          </div>`);
      } else {
        toast(msg, 'error');
      }
    }
  };

  window.empDelete = async (id) => {
    if (!confirm('Delete this employee?')) return;
    const r = await api('employees.php', { action: 'delete', id }, 'POST');
    console.log('[employees] delete response:', r);
    if (r.success) { toast('Employee deleted', 'success'); go(); }
    else toast('Error: ' + r.error, 'error');
  };

  // ── Load employee result history ──────────────────────────────────────────
  async function loadEmpResults(empId) {
    const container = document.getElementById('emp-results-list');
    if (!container) return;
    const r = await api('results.php', { action: 'list', client_employees_id: empId });
    if (!r.success) { container.innerHTML = `<p class="text-muted text-sm">Could not load history.</p>`; return; }

    const { assessments, tests } = r;
    if (!assessments.length && !tests.length) {
      container.innerHTML = `<div class="empty-state" style="padding:20px"><p>No assessments or tests recorded yet.</p></div>`;
      return;
    }

    const passStyle = (res) => {
      const v = (res || '').toUpperCase();
      if (v.includes('COMP') || v.includes('PASS')) return 'badge-success';
      if (v.includes('NYC') || v.includes('FAIL')) return 'badge-danger';
      return 'badge-gray';
    };

    const assRows = assessments.map(a => `
      <tr>
        <td><span class="badge badge-info" style="font-size:10px">Assessment</span></td>
        <td class="fw-500">${a.assesses_name || '—'}</td>
        <td>${a.date || '—'}</td>
        <td><span class="badge ${passStyle(a.results)}">${a.results || '—'}</span></td>
        <td class="mono">${a.current_mark || '—'} / ${a.passmark || '—'}</td>
        <td class="actions-td">
          ${a.booking_number ? `<button class="btn btn-sm btn-secondary" onclick="bookingRegPDF(${a.booking})">#${a.booking_number}</button>` : ''}
          <button class="btn btn-sm btn-secondary" onclick="viewResult('assessment',${a.record_id})">View</button>
          <button class="btn btn-sm btn-secondary" onclick="pdfResult('assessment',${a.record_id})">PDF</button>
        </td>
      </tr>`).join('');

    const testRows = tests.map(t => `
      <tr>
        <td><span class="badge badge-orange" style="font-size:10px">Test</span></td>
        <td class="fw-500">${t.test_name || '—'}</td>
        <td>${t.date || '—'}</td>
        <td><span class="badge ${passStyle(t.results)}">${t.results || '—'}</span></td>
        <td class="mono">${t.current_mark || '—'} / ${t.passmark || '—'}</td>
        <td class="actions-td">
          ${t.booking_number ? `<button class="btn btn-sm btn-secondary" onclick="bookingRegPDF(${t.booking})">#${t.booking_number}</button>` : ''}
          <button class="btn btn-sm btn-secondary" onclick="viewResult('test',${t.record_id})">View</button>
          <button class="btn btn-sm btn-secondary" onclick="pdfResult('test',${t.record_id})">PDF</button>
        </td>
      </tr>`).join('');

    container.innerHTML = `
      <div class="table-wrap">
        <table style="font-size:12px">
          <thead><tr>
            <th>Type</th><th>Name</th><th>Date</th><th>Result</th><th>Score</th><th>Actions</th>
          </tr></thead>
          <tbody>${assRows}${testRows}</tbody>
        </table>
      </div>`;
  }

  // ── View result popup ─────────────────────────────────────────────────────
  window.viewResult = async (type, id) => {
    document.getElementById('result-view-body').innerHTML = loadingHTML();
    openModal('result-view-modal');
    const action = type === 'assessment' ? 'get_assessment' : 'get_test';
    const r = await api('results.php', { action, id });
    if (!r.success) { document.getElementById('result-view-body').innerHTML = emptyHTML('Failed: ' + r.error); return; }
    const d = type === 'assessment' ? r.assessment : r.test;
    const name = type === 'assessment' ? d.assesses_name : d.test_name;
    document.getElementById('result-view-title').textContent = name;

    const passStyle = (res) => {
      const v = (res || '').toUpperCase();
      return v.includes('COMP') || v.includes('PASS') ? 'color:#16a34a' : v.includes('NYC') || v.includes('FAIL') ? 'color:#dc2626' : '';
    };

    let sectionsHtml = '';
    if (type === 'assessment') {
      sectionsHtml = (d.sections || []).map(sec => {
        const qRows = (sec.questions || []).map((q, qi) => `
          <tr>
            <td style="border:1px solid #e2e8f0;padding:6px 8px;width:30px">${qi + 1}</td>
            <td style="border:1px solid #e2e8f0;padding:6px 8px">${q.question}</td>
            <td style="border:1px solid #e2e8f0;padding:6px 8px;text-align:center;width:40px">${+q.answer === 1 ? '✓' : ''}</td>
            <td style="border:1px solid #e2e8f0;padding:6px 8px;text-align:center;width:40px">${+q.answer !== 1 ? '✕' : ''}</td>
            <td style="border:1px solid #e2e8f0;padding:6px 8px">${q.comment || ''}</td>
          </tr>`).join('');
        const pct = sec.total > 0 ? Math.round((sec.scored / sec.total) * 100) : 0;
        return `
          <table style="width:100%;border-collapse:collapse;margin-bottom:12px;font-size:12px">
            <thead>
              <tr style="background:#0d1b2a;color:#fff">
                <th style="padding:7px 8px;border:1px solid #0d1b2a;width:30px"></th>
                <th style="padding:7px 8px;border:1px solid #0d1b2a">${sec.section_name}</th>
                <th style="padding:7px 8px;border:1px solid #0d1b2a;width:40px;text-align:center">C</th>
                <th style="padding:7px 8px;border:1px solid #0d1b2a;width:40px;text-align:center">NYC</th>
                <th style="padding:7px 8px;border:1px solid #0d1b2a">Comments</th>
              </tr>
            </thead>
            <tbody>${qRows}</tbody>
            <tfoot>
              <tr style="background:#f8fafc">
                <td colspan="2" style="border:1px solid #e2e8f0;padding:6px 8px;font-weight:600">Section Score</td>
                <td colspan="3" style="border:1px solid #e2e8f0;padding:6px 8px">${sec.scored} / ${sec.total} (${pct}%)</td>
              </tr>
            </tfoot>
          </table>`;
      }).join('');
    } else {
      sectionsHtml = (d.questions || []).map(q => {
        const ansRows = (q.answers || []).map(a => `
          <tr style="background:${+a.option === 1 ? '#dcfce7' : ''}">
            <td style="border:1px solid #e2e8f0;padding:5px 8px">${a.answer?.trim()}</td>
            <td style="border:1px solid #e2e8f0;padding:5px 8px;text-align:center;width:60px">${+a.option === 1 ? '✓ Correct' : ''}</td>
            <td style="border:1px solid #e2e8f0;padding:5px 8px">${a.comment || ''}</td>
          </tr>`).join('');
        return `
          <table style="width:100%;border-collapse:collapse;margin-bottom:12px;font-size:12px">
            <thead>
              <tr style="background:#0d1b2a;color:#fff">
                <th style="padding:7px 8px" colspan="3">${q.questions}</th>
              </tr>
              <tr style="background:#f1f5f9">
                <th style="padding:6px 8px;border:1px solid #e2e8f0">Option</th>
                <th style="padding:6px 8px;border:1px solid #e2e8f0;width:60px">Result</th>
                <th style="padding:6px 8px;border:1px solid #e2e8f0">Comment</th>
              </tr>
            </thead>
            <tbody>${ansRows}</tbody>
            <tfoot>
              <tr style="background:#f8fafc">
                <td colspan="3" style="border:1px solid #e2e8f0;padding:6px 8px;font-weight:600">Score: ${q.scored} / ${q.total}</td>
              </tr>
            </tfoot>
          </table>`;
      }).join('');
    }

    const sigBase = 'uploads/signatures/';
    const candSig = `${sigBase}${d.client_employees_id}-${d.booking}-signature.png`;
    const assSig = `${sigBase}a-${d.safesure_users_id}-signature.png`;

    document.getElementById('result-view-body').innerHTML = `
      <div class="form-grid" style="margin-bottom:16px">
        <div class="form-group"><label>Candidate</label><p class="fw-500">${d.client_employees_name} ${d.surname}</p></div>
        <div class="form-group"><label>ID / Passport</label><p class="mono">${d.i_doc_passport || '—'}</p></div>
        <div class="form-group"><label>Company No</label><p>${d.company_number || '—'}</p></div>
        <div class="form-group"><label>Client / Mine</label><p>${d.clients_name || '—'}</p></div>
        <div class="form-group"><label>Assessor</label><p>${d.assessor_full_name || d.assessor_name || '—'}</p></div>
        <div class="form-group"><label>Assessor No</label><p class="mono">${d.assessor_number || '—'}</p></div>
        <div class="form-group"><label>Date</label><p>${d.date || '—'}</p></div>
        <div class="form-group"><label>Result</label><p style="font-weight:600;${passStyle(d.results)}">${d.results || '—'}</p></div>
        <div class="form-group"><label>Score</label><p>${d.current_mark || '—'} / ${d.passmark || '—'}</p></div>
        <div class="form-group"><label>NQF Level</label><p>${d.nqf_level || '—'}</p></div>
        <div class="form-group"><label>Credits</label><p>${d.credits || '—'}</p></div>
        ${d.vehicle_model ? `<div class="form-group"><label>Vehicle Model</label><p>${d.vehicle_model}</p></div>` : ''}
      </div>
      <div class="divider"></div>
      ${sectionsHtml}
      <div class="divider"></div>
      <div class="form-grid">
        <div class="form-group"><label>Candidate Signature</label>
          <img src="${candSig}" style="max-width:180px;max-height:80px;border:1px solid var(--border);border-radius:6px;padding:4px"
               onerror="this.style.display='none';this.nextSibling.style.display='block'">
          <span style="display:none;color:var(--muted);font-size:12px">No signature on file</span>
        </div>
        <div class="form-group"><label>Assessor Signature</label>
          <img src="${assSig}" style="max-width:180px;max-height:80px;border:1px solid var(--border);border-radius:6px;padding:4px"
               onerror="this.style.display='none';this.nextSibling.style.display='block'">
          <span style="display:none;color:var(--muted);font-size:12px">No signature on file</span>
        </div>
      </div>`;

    document.getElementById('result-view-footer').innerHTML = `
      <button class="btn btn-secondary" onclick="pdfResult('${type}', ${id})">Download PDF</button>
      <button class="btn btn-secondary" onclick="closeModal('result-view-modal')">Close</button>`;
  };

  // ── PDF generation matching old system layout ─────────────────────────────
  window.pdfResult = async (type, id) => {
    const action = type === 'assessment' ? 'get_assessment' : 'get_test';
    const r = await api('results.php', { action, id });
    if (!r.success) { toast('Failed: ' + r.error, 'error'); return; }
    const d = type === 'assessment' ? r.assessment : r.test;
    const name = type === 'assessment' ? d.assesses_name : d.test_name;
    const info = type === 'assessment' ? d.assesses_info : d.test_info;
    const sigBase = window.location.href.replace(/\/[^/]*$/, '/') + 'uploads/signatures/';
    const candSig = `${sigBase}${d.client_employees_id}-${d.booking}-signature.png`;
    const assSig = `${sigBase}a-${d.safesure_users_id}-signature.png`;
    const today = new Date().toISOString().slice(0, 10);

    let sectionsHtml = '';
    if (type === 'assessment') {
      sectionsHtml = (d.sections || []).map(sec => {
        const qRows = (sec.questions || []).map((q, qi) => `
          <tr>
            <td style="width:5%;border:1px solid black;padding:6px">${qi + 1}</td>
            <td style="width:60%;border:1px solid black;padding:6px">${q.question}</td>
            <td style="width:8%;border:1px solid black;padding:6px;text-align:center">${+q.answer === 1 ? '✓' : ''}</td>
            <td style="width:8%;border:1px solid black;padding:6px;text-align:center">${+q.answer !== 1 ? '✓' : ''}</td>
            <td style="border:1px solid black;padding:6px">${q.comment || ''}</td>
          </tr>`).join('');
        return `
          <table style="width:80%;border-collapse:collapse;border:1px solid black;margin-bottom:10px">
            <tr>
              <td style="width:5%;border:1px solid black;padding:6px"></td>
              <td style="width:60%;border:1px solid black;padding:6px"><h3>${sec.section_name}</h3></td>
              <td style="width:8%;border:1px solid black;padding:6px;text-align:center"><h3>C</h3></td>
              <td style="width:8%;border:1px solid black;padding:6px;text-align:center"><h3>NYC</h3></td>
              <td style="border:1px solid black;padding:6px"><h3>COMMENTS</h3></td>
            </tr>
            ${qRows}
            <tr style="background:#f5f5f5">
              <td colspan="2" style="border:1px solid black;padding:6px"><b>Section: ${sec.scored}/${sec.total}</b></td>
              <td colspan="3" style="border:1px solid black;padding:6px"></td>
            </tr>
          </table>`;
      }).join('');
    } else {
      sectionsHtml = (d.questions || []).map(q => {
        const aRows = (q.answers || []).map(a => `
          <tr style="${+a.option === 1 ? 'background:#e8f5e9' : ''}">
            <td style="border:1px solid black;padding:6px">${a.answer?.trim()}</td>
            <td style="border:1px solid black;padding:6px;text-align:center">${+a.option === 1 ? '✓' : ''}</td>
            <td style="border:1px solid black;padding:6px">${a.comment || ''}</td>
          </tr>`).join('');
        return `
          <table style="width:80%;border-collapse:collapse;border:1px solid black;margin-bottom:10px">
            <tr><td colspan="3" style="border:1px solid black;padding:6px;background:#f5f5f5"><h3>${q.questions}</h3></td></tr>
            <tr>
              <th style="border:1px solid black;padding:6px">Option</th>
              <th style="border:1px solid black;padding:6px;width:80px">Correct</th>
              <th style="border:1px solid black;padding:6px">Comment</th>
            </tr>
            ${aRows}
            <tr style="background:#f5f5f5">
              <td colspan="3" style="border:1px solid black;padding:6px"><b>Score: ${q.scored}/${q.total}</b></td>
            </tr>
          </table>`;
      }).join('');
    }

    const html = `<!DOCTYPE html><html><head><meta charset="UTF-8">
    <title>${name}</title>
    <style>
      *{box-sizing:border-box;margin:0;padding:0}
      body{font-family:Arial,sans-serif;font-size:12px;color:#000;padding:20px}
      td,th{font-size:12px}
      h1{font-size:18px}h2{font-size:15px}h3{font-size:13px}
      @media print{@page{margin:1.5cm}body{padding:0}}
    </style></head><body>

    <table style="width:80%;float:left;border:0">
      <tr><td colspan="2"><h1 style="margin-left:50px">SAFETY & TRAINING PRACTITIONERS</h1></td></tr>
      <tr><td colspan="2"><h3 style="margin-left:50px">${info || ''}</h3></td></tr>
      <tr>
        <td><h3 style="margin-left:50px">NQF LEVEL: ${d.nqf_level || ''}</h3></td>
        <td><h3>Credits: ${d.credits || ''}</h3></td>
      </tr>
      <tr><td colspan="2"><h3 style="margin-left:50px">${name}</h3></td></tr>
      ${d.vehicle_model ? `<tr><td colspan="2"><h3 style="margin-left:50px">Vehicle Model: ${d.vehicle_model}</h3></td></tr>` : ''}
    </table>
    <br style="clear:both"><br>

    <table style="width:80%;float:left;border:0">
      <tr><td><h3 style="margin-left:50px">CANDIDATE NAME</h3></td><td><h3>${d.client_employees_name} ${d.surname}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">COY NO</h3></td><td><h3>${d.company_number || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ID NO.</h3></td><td><h3>${d.i_doc_passport || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">MINE</h3></td><td><h3>${d.clients_name || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSOR</h3></td><td><h3>${d.assessor_full_name || d.assessor_name || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSOR NO</h3></td><td><h3>${d.assessor_number || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSMENT DATE</h3></td><td><h3>${d.date || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">COMPETENT / NYC</h3></td><td><h3 style="font-weight:700;color:${(d.results || '').toUpperCase().includes('COMP') || ((d.results || '').toUpperCase().includes('PASS')) ? 'green' : 'red'}">${d.results || ''}</h3></td></tr>
      <tr><td><h3 style="margin-left:50px">CAND. SIGNATURE</h3></td>
          <td><img src="${candSig}" width="150" onerror="this.style.display='none'"></td></tr>
      <tr><td><h3 style="margin-left:50px">ASSESSOR SIGNATURE</h3></td>
          <td><img src="${assSig}" width="150" onerror="this.style.display='none'"></td></tr>
      <tr><td><h3 style="margin-left:50px">DATE</h3></td><td><h3>${today}</h3></td></tr>
    </table>
    <br style="clear:both"><br>

    ${sectionsHtml}

    <br>
    <h2><u>CONFIRMATION OF TRAINING</u></h2>
    <p style="margin:10px 0">I, <b>${d.client_employees_name} ${d.surname}</b>, hereby confirm that I have received training in theory
    and practical on <span style="color:red">${name}</span>. I confirm that I have been given the opportunity to ask questions
    and that answers given have been satisfactory. I have signed every section of this training evaluation.
    I furthermore undertake to carry out my appointed duties applicable to this equipment in a safe manner
    and to adhere to all safety aspects as required by Codes of Practice and Safe Working Procedures.</p>
    <br>
    <table style="width:80%">
      <tr>
        <td style="width:50%"><h2>Signature of Candidate</h2></td>
        <td><img src="${candSig}" width="150" onerror="this.style.display='none'"></td>
      </tr>
      <tr>
        <td><h2>Signature of Assessor</h2></td>
        <td><img src="${assSig}" width="150" onerror="this.style.display='none'"></td>
      </tr>
      <tr>
        <td><h2>Date:</h2></td>
        <td><h2>${d.date || today}</h2></td>
      </tr>
    </table>

    <script>window.onload=function(){window.print();}<\/script>
    </body></html>`;

    const w = window.open('', '_blank');
    w.document.write(html);
    w.document.close();
  };

  // ── Booking attendance register PDF ──────────────────────────────────────
  window.bookingRegPDF = async (bookingId) => {
    if (!bookingId) return;
    const r = await api('bookings.php', { action: 'get', id: bookingId });
    if (!r.success) { toast('Failed to load booking', 'error'); return; }
    const b = r.booking;
    const empParts = b.emp_parts || [];
    const assParts = b.ass_parts || [];
    const testParts = b.test_parts || [];
    const siteParts = b.site_parts || [];
    const empMap = b.employees_map || {};

    const rows = empParts.map((raw, i) => {
      const eid = raw.trim(); if (!eid) return '';
      const emp = empMap[eid]; if (!emp) return '';
      const assId = (assParts[i] || '').trim();
      const testId = (testParts[i] || '').trim();
      const assName = assId ? (b.assessment_map || {})[assId]?.assessments_name : '';
      const testName = testId ? (b.test_map || {})[testId]?.test_name : '';
      const siteName = (siteParts[i] || '').trim();
      return `<tr>
        <td style="border:1px solid black;padding:8px">${i}</td>
        <td style="border:1px solid black;padding:8px">${emp.client_employees_name} ${emp.surname}</td>
        <td style="border:1px solid black;padding:8px">${emp.i_doc_passport || ''}</td>
        <td style="border:1px solid black;padding:8px">${emp.occupation || ''}</td>
        <td style="border:1px solid black;padding:8px">${assName || testName || ''}</td>
        <td style="border:1px solid black;padding:8px">${siteName}</td>
        <td style="border:1px solid black;padding:8px"></td>
      </tr>`;
    }).filter(Boolean).join('');

    const html = `<!DOCTYPE html><html><head><meta charset="UTF-8">
    <title>Attendance Register - Booking #${b.booking_number || b.record_id}</title>
    <style>
      *{box-sizing:border-box;margin:0;padding:0}
      body{font-family:Arial,sans-serif;font-size:12px;color:#000;padding:20px}
      h1{font-size:18px;margin-bottom:4px}h3{font-size:13px}
      table{border-collapse:collapse;width:100%}
      th,td{font-size:11px}
      @media print{@page{margin:1.5cm}body{padding:0}}
    </style></head><body>

    <h1>SAFETY & TRAINING PRACTITIONERS</h1>
    <h3>ATTENDANCE REGISTER</h3><br>

    <table style="width:80%;border:0;margin-bottom:16px">
      <tr><td style="width:150px"><b>CLIENT / MINE:</b></td><td>${b.clients_name || ''}</td>
          <td style="width:150px"><b>BOOKING #:</b></td><td>${b.booking_number || b.record_id}</td></tr>
      <tr><td><b>ASSESSOR:</b></td><td>${b.assessor_full_name || b.assessor_name || ''}</td>
          <td><b>DATE:</b></td><td>${b.date_booked || ''}</td></tr>
      <tr><td><b>STATUS:</b></td><td>${b.status || ''}</td>
          <td><b>NOTES:</b></td><td>${b.notes || ''}</td></tr>
    </table>

    <table style="border:1px solid black">
      <thead>
        <tr style="background:#f5f5f5">
          <th style="border:1px solid black;padding:8px">#</th>
          <th style="border:1px solid black;padding:8px">Full Name</th>
          <th style="border:1px solid black;padding:8px">ID / Passport</th>
          <th style="border:1px solid black;padding:8px">Occupation</th>
          <th style="border:1px solid black;padding:8px">Assessment / Test</th>
          <th style="border:1px solid black;padding:8px">Site</th>
          <th style="border:1px solid black;padding:8px">Signature</th>
        </tr>
      </thead>
      <tbody>${rows}</tbody>
    </table>
    <br>
    <table style="width:80%;border:0;margin-top:20px">
      <tr>
        <td style="width:50%"><h3>Assessor Signature:</h3></td>
        <td><img src="uploads/signatures/a-${b.safesure_users_id}-signature.png" width="150" onerror="this.style.display='none'"></td>
      </tr>
      <tr><td><h3>Date:</h3></td><td><h3>${b.date_booked || ''}</h3></td></tr>
    </table>
    <script>window.onload=function(){window.print();}<\/script>
    </body></html>`;

    const w = window.open('', '_blank');
    w.document.write(html);
    w.document.close();
  };


  // ── Export ─────────────────────────────────────────────────────────────────
  const _getExportRows = async (filter) => {
    const clientId = document.getElementById('emp-client-filter').value || '';
    const r = await api('employees.php', { action: 'list', clients_id: clientId, search: '%' });
    if (!r.success) { toast('Export failed', 'error'); return null; }
    return r.employees.map(e => [e.client_employees_name || '', e.surname || '', e.i_doc_passport || '', e.clients_name || '', e.cell || '', e.company_number || '', e.occupation || '', e.badge_number || '', e.team_number || '', e.teba_number || '', e.industry || '', e.induction_date || '', e.medical_date || '']);
  };
  const _exportHeaders = ['Name', 'Surname', 'ID/Passport', 'Client', 'Cell', 'Company No', 'Occupation', 'Badge No', 'Team No', 'TEBA No', 'Industry', 'Induction Date', 'Medical Date'];
  const _exportTitle = 'Employees';

  function printExport(title, headers, rows) {
    const headHtml = headers.map(h => '<th>' + h + '</th>').join('');
    const bodyHtml = rows.map((row, i) =>
      '<tr' + (i % 2 ? ' class="alt"' : '') + '>' + row.map(v => '<td>' + (v ?? '') + '</td>').join('') + '</tr>'
    ).join('');
    const date = new Date().toLocaleDateString('en-ZA', { day: 'numeric', month: 'short', year: 'numeric' });
    const html = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>' + title + '</title><style>' +
      '*{box-sizing:border-box;margin:0;padding:0}' +
      'body{font-family:Arial,sans-serif;font-size:11px;color:#1a2332;padding:20px}' +
      '.hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:10px;border-bottom:3px solid #e85d04}' +
      '.brand{display:flex;align-items:center;gap:10px}' +
      '.logo{width:36px;height:36px;background:#e85d04;border-radius:6px;color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}' +
      '.bname{font-size:16px;font-weight:700}.bsub{font-size:10px;color:#64748b}' +
      '.meta{text-align:right;font-size:10px;color:#64748b}.meta b{color:#1a2332}' +
      'table{width:100%;border-collapse:collapse;font-size:10px;margin-top:6px}' +
      'th{background:#0d1b2a;color:#fff;padding:6px 8px;text-align:left;font-size:9px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}' +
      'td{padding:5px 8px;border-bottom:1px solid #e2e8f0;vertical-align:top}' +
      'tr.alt td{background:#f8fafc}' +
      '.foot{margin-top:14px;display:flex;justify-content:space-between;color:#94a3b8;font-size:9px;border-top:1px solid #e2e8f0;padding-top:6px}' +
      '@media print{@page{margin:1cm}body{padding:0}}' +
      '</style></head><body>' +
      '<div class="hdr"><div class="brand"><div class="logo">SS</div>' +
      '<div><div class="bname">SafeSure</div><div class="bsub">' + title + '</div></div></div>' +
      '<div class="meta"><div>Date: <b>' + date + '</b></div><div>Records: <b>' + rows.length + '</b></div></div></div>' +
      '<table><thead><tr>' + headHtml + '</tr></thead><tbody>' + bodyHtml + '</tbody></table>' +
      '<div class="foot"><span>SafeSure Competency Assessment System</span><span>Confidential — ' + title + ' ' + date + '</span></div>' +
      '<scr' + 'ipt>window.onload=function(){window.print();}</' + 'script>' +
      '</body></html>';
    const w = window.open('', '_blank');
    w.document.write(html);
    w.document.close();
  }

  window.doExportPDF = async () => {
    const rows = await _getExportRows();
    if (rows) printExport(_exportTitle, _exportHeaders, rows);
  };
  window.doExportCSV = async () => {
    const rows = await _getExportRows();
    if (!rows) return;
    const wb = XLSX.utils.book_new();
    const ws = XLSX.utils.aoa_to_sheet([_exportHeaders, ...rows]);
    XLSX.utils.book_append_sheet(wb, ws, 'Employees');
    XLSX.writeFile(wb, _exportTitle.toLowerCase().replace(/ /g, '_') + '_' + new Date().toISOString().slice(0, 10) + '.xlsx');
  };
});