registerPage('bookings', async (content, params = {}) => {
  document.getElementById('topbar-title').textContent = 'Bookings';

  // ── List ───────────────────────────────────────────────────────────────────
  async function render(statusFilter = '') {
    const r = await api('bookings.php', { action: 'list', status: statusFilter });
    if (!r.success) { document.getElementById('bookings-table').innerHTML = emptyHTML('Failed: ' + r.error); return; }
    const rows = r.bookings;
    document.getElementById('bookings-table').innerHTML = rows.length === 0 ? emptyHTML('No bookings found') : `
      <div class="table-wrap"><table>
        <thead><tr><th>#</th><th>Date</th><th>Client</th><th>Assessor</th><th>Status</th><th>Actions</th></tr></thead>
        <tbody>${rows.map(b => `<tr>
          <td class="mono">${b.booking_number || b.record_id}</td>
          <td>${b.date_booked}</td>
          <td>${b.clients_name || '—'}</td>
          <td>${b.assessor_name || '—'}</td>
          <td>${statusBadge(b.status)}</td>
          <td class="actions-td">
            <button class="btn btn-sm btn-secondary" onclick="bookingEdit(${b.record_id})">Edit</button>
            <button class="btn btn-sm btn-secondary" onclick="bookingPDF(${b.record_id})">PDF</button>
            ${b.status === 'DRAFT' || b.status === 'NOT APPROVED' ? `<button class="btn btn-sm btn-success" onclick="bookingApprove(${b.record_id})">Approve</button>` : ''}
            ${b.status === 'DRAFT' || b.status === 'NOT APPROVED' ? `<button class="btn btn-sm btn-danger" onclick="bookingDelete(${b.record_id})">Delete</button>` : ''}
          </td></tr>`).join('')}
        </tbody>
      </table></div>`;
  }

  content.innerHTML = `
    <div class="search-wrap">
      <select id="booking-status-filter">
        <option value="">All Statuses</option>
        <option>DRAFT</option><option>APPROVED</option><option>NOT APPROVED</option><option>DONE</option><option>REJECTED</option>
      </select>
      <button class="btn btn-secondary" onclick="doExportCSV({status: document.getElementById(\'booking-status-filter\').value || \'\'})">⬇ Excel</button>
      <button class="btn btn-secondary" onclick="doExportPDF({status: document.getElementById(\'booking-status-filter\').value || \'\'})">⬇ PDF</button>
      <button class="btn btn-primary" onclick="bookingAdd()">+ New Booking</button>
    </div>
    <div class="card"><div id="bookings-table">${loadingHTML()}</div></div>

    <!-- Add / Edit Booking Modal -->
    <div class="modal-bg" id="booking-form-modal">
      <div class="modal modal-lg" style="width:960px;max-height:92vh;display:flex;flex-direction:column">
        <div class="modal-header" style="flex-shrink:0">
          <h3 id="booking-form-title">New Booking</h3>
          <button class="modal-close" onclick="closeModal('booking-form-modal')">×</button>
        </div>
        <div class="modal-body" id="booking-form-body" style="flex:1;overflow-y:auto;min-height:0"></div>
        <div class="modal-footer" style="flex-shrink:0">
          <button class="btn btn-secondary" onclick="closeModal('booking-form-modal')">Cancel</button>
          <button class="btn btn-primary" onclick="bookingSave()">Save Booking</button>
        </div>
      </div>
    </div>

    <!-- Manual Employee Modal -->
    <div class="modal-bg" id="manual-emp-modal">
      <div class="modal">
        <div class="modal-header"><h3>Add Person Manually</h3>
          <button class="modal-close" onclick="closeModal('manual-emp-modal')">×</button>
        </div>
        <div class="modal-body">
          <div class="form-grid">
            <div class="form-group"><label>First Name *</label><input type="text" id="me-name"></div>
            <div class="form-group"><label>Surname *</label><input type="text" id="me-surname"></div>
            <div class="form-group"><label>ID / Passport</label><input type="text" id="me-id"></div>
            <div class="form-group"><label>Occupation</label><input type="text" id="me-occupation"></div>
          </div>
          <p class="text-muted text-sm" style="margin-top:10px">Will be created under the selected client.</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" onclick="closeModal('manual-emp-modal')">Cancel</button>
          <button class="btn btn-primary" onclick="manualEmpSave()">Create &amp; Add</button>
        </div>
      </div>
    </div>`;

  document.getElementById('booking-status-filter').addEventListener('change', e => render(e.target.value));
  render(params.status || '');

  // ── Shared form state ──────────────────────────────────────────────────────
  let formEmployees = [];
  let allAssessments = [];
  let allTests = [];
  let allSites = [];
  let currentClientId = null;
  let editingBookingId = null;

  // ── Employee table renderer ────────────────────────────────────────────────
  // Shared fixed-position dropdown element — one instance reused for all rich selects
  let _rsDropdown = null;
  let _rsActiveInput = null;
  let _rsOnChange = null;

  function getRsDropdown() {
    if (!_rsDropdown) {
      _rsDropdown = document.createElement('div');
      _rsDropdown.id = 'rs-global-dropdown';
      _rsDropdown.style.cssText = 'position:fixed;z-index:9999;background:var(--card);border:1px solid var(--border);' +
        'border-radius:7px;max-height:200px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.18);display:none;min-width:200px';
      document.body.appendChild(_rsDropdown);
      document.addEventListener('mousedown', ev => {
        if (_rsDropdown && !_rsDropdown.contains(ev.target) && ev.target !== _rsActiveInput) {
          _rsDropdown.style.display = 'none';
        }
      });
    }
    return _rsDropdown;
  }

  function positionRsDropdown(input) {
    const dd = getRsDropdown();
    const rect = input.getBoundingClientRect();
    const spaceBelow = window.innerHeight - rect.bottom;
    const spaceAbove = rect.top;
    const dropH = Math.min(200, dd.scrollHeight || 200);
    if (spaceBelow >= dropH || spaceBelow >= spaceAbove) {
      dd.style.top = (rect.bottom + 2) + 'px';
      dd.style.bottom = 'auto';
    } else {
      dd.style.bottom = (window.innerHeight - rect.top + 2) + 'px';
      dd.style.top = 'auto';
    }
    dd.style.left = rect.left + 'px';
    dd.style.width = rect.width + 'px';
  }

  function makeRichSelect(wrap, combined, currentVal, currentLabel, onChange) {
    wrap.innerHTML = `
      <div>
        <input type="text" class="rs-input" placeholder="Search…" value="${currentLabel}"
               style="width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:12px;box-sizing:border-box"
               autocomplete="off">
        <input type="hidden" class="rs-value" value="${currentVal}">
      </div>`;
    const input = wrap.querySelector('.rs-input');
    const hidden = wrap.querySelector('.rs-value');

    function showDropdown(filterQ) {
      const dd = getRsDropdown();
      _rsActiveInput = input;
      _rsOnChange = onChange;
      dd.innerHTML = combined
        .filter(it => it.label.toLowerCase().includes(filterQ.toLowerCase()))
        .map(it => `<div class="rs-fixed-option" data-id="${it.id}" data-label="${it.label}"
          style="padding:8px 12px;cursor:pointer;font-size:12px;border-bottom:1px solid var(--border)"
          onmouseover="this.style.background='var(--bg)'" onmouseout="this.style.background=''"
          >${it.label}</div>`).join('') || '<div style="padding:8px 12px;color:var(--muted);font-size:12px">No results</div>';
      dd.querySelectorAll('.rs-fixed-option').forEach(opt => {
        opt.addEventListener('mousedown', ev => {
          ev.preventDefault();
          input.value = opt.dataset.label;
          hidden.value = opt.dataset.id;
          dd.style.display = 'none';
          _rsOnChange && _rsOnChange(opt.dataset.id, opt.dataset.label);
        });
      });
      positionRsDropdown(input);
      dd.style.display = 'block';
    }

    input.addEventListener('focus', () => showDropdown(input.value));
    input.addEventListener('input', () => { hidden.value = ''; showDropdown(input.value); });
    input.addEventListener('blur', () => { setTimeout(() => { if (document.getElementById('rs-global-dropdown')) getRsDropdown().style.display = 'none'; }, 150); });
  }

  function renderEmployeeTable() {
    const tbody = document.getElementById('emp-booking-list');
    if (!tbody) return;
    if (formEmployees.length === 0) {
      tbody.innerHTML = `<tr><td colspan="6" style="text-align:center;color:var(--muted);padding:40px 20px;font-size:13px">No employees added yet</td></tr>`;
      return;
    }
    tbody.innerHTML = formEmployees.map((e, i) => `
      <tr id="emp-row-${i}">
        <td class="fw-500" style="padding:10px 14px">${e.name}</td>
        <td style="padding:10px 14px">${e.surname}</td>
        <td class="mono" style="padding:10px 14px">${e.id_doc || '—'}</td>
        <td style="padding:10px 14px;min-width:200px"><div id="rs-ass-${i}"></div></td>
        <td style="padding:10px 14px;min-width:160px"><div id="rs-site-${i}"></div></td>
        <td style="padding:10px 14px">
          <button class="btn btn-sm btn-danger btn-icon" onclick="removeEmployee(${i})">✕</button>
        </td>
      </tr>`).join('');

    const combined = [
      ...allAssessments.map(a => ({ id: 'a_' + a.record_id, label: '📋 ' + a.assessments_name })),
      ...allTests.map(t => ({ id: 't_' + t.record_id, label: '📝 ' + t.test_name })),
    ];
    const siteOptions = allSites.map(s => ({ id: String(s.record_id), label: s.client_sites_name }));

    formEmployees.forEach((e, i) => {
      // Assessment/Test rich select
      const assLabel = e.assessment_id
        ? '📋 ' + (allAssessments.find(a => a.record_id == e.assessment_id)?.assessments_name || e.assessment_id)
        : e.test_id
          ? '📝 ' + (allTests.find(t => t.record_id == e.test_id)?.test_name || e.test_id)
          : '';
      const assVal = e.assessment_id ? 'a_' + e.assessment_id : e.test_id ? 't_' + e.test_id : '';
      makeRichSelect(document.getElementById(`rs-ass-${i}`), combined, assVal, assLabel, (val) => {
        if (val.startsWith('a_')) { formEmployees[i].assessment_id = val.replace('a_', ''); formEmployees[i].test_id = null; }
        else { formEmployees[i].test_id = val.replace('t_', ''); formEmployees[i].assessment_id = null; }
      });

      // Site rich select
      const siteLabel = e.site_id ? (allSites.find(s => s.record_id == e.site_id)?.client_sites_name || e.site_id) : '';
      makeRichSelect(document.getElementById(`rs-site-${i}`), siteOptions, e.site_id || '', siteLabel, (val) => {
        formEmployees[i].site_id = val;
      });
    });
  }

  window.removeEmployee = (i) => { formEmployees.splice(i, 1); renderEmployeeTable(); };

  function addEmployeeToForm(emp) {
    formEmployees.push({ record_id: emp.record_id, name: emp.client_employees_name, surname: emp.surname, id_doc: emp.i_doc_passport, assessment_id: null, test_id: null, site_id: null });
    renderEmployeeTable();
  }

  // ── Build the form HTML ────────────────────────────────────────────────────
  async function buildForm(booking = null) {
    const [ar, tr, ur, cr] = await Promise.all([
      api('assessments.php', { action: 'list' }),
      api('tests.php', { action: 'list' }),
      api('users.php', { action: 'list' }),
      api('clients.php', { action: 'list' }),
    ]);
    allAssessments = ar.assessments || [];
    allTests = tr.tests || [];
    const assessors = (ur.users || []).filter(u => [1, 2].includes(+u.user_type_id));
    const clients = cr.clients || [];

    // Load sites if we have a client (editing existing booking)
    allSites = [];
    if (booking?.clients_id) {
      const sr = await api('sites.php', { action: 'list', clients_id: booking.clients_id });
      allSites = sr.sites || [];
    }
    // Also use sites returned by the get action if available
    if (booking?.client_sites_list) allSites = booking.client_sites_list;

    // Pre-fill if editing
    const bDate = booking?.date_booked || new Date().toISOString().slice(0, 16);
    const bClient = booking?.clients_id || '';
    const bAssessor = booking?.safesure_users_id || '';
    const bStatus = booking?.status || 'DRAFT';
    const bNotes = booking?.notes || '';
    currentClientId = bClient || null;

    document.getElementById('booking-form-body').innerHTML = `
      <div class="form-grid" style="margin-bottom:20px">
        <div class="form-group">
          <label>Booking Date *</label>
          <input type="datetime-local" id="bf-date" value="${bDate}">
        </div>
        <div class="form-group">
          <label>Client *</label>
          <select id="bf-client" onchange="bClientChanged()">
            <option value="">— Select client —</option>
            ${clients.map(c => `<option value="${c.record_id}" ${c.record_id == bClient ? 'selected' : ''}>${c.clients_name}</option>`).join('')}
          </select>
        </div>
        <div class="form-group">
          <label>Assessor</label>
          <select id="bf-assessor">
            <option value="">— Select assessor —</option>
            ${assessors.map(u => `<option value="${u.record_id}" ${u.record_id == bAssessor ? 'selected' : ''}>${u.safesure_users_name} — ${u.name || ''}</option>`).join('')}
          </select>
        </div>
        <div class="form-group">
          <label>Status</label>
          <select id="bf-status">
            ${['DRAFT', 'APPROVED', 'NOT APPROVED', 'DONE', 'REJECTED'].map(s => `<option ${s === bStatus ? 'selected' : ''}>${s}</option>`).join('')}
          </select>
        </div>
        <div class="form-group span-2">
          <label>Notes</label>
          <textarea id="bf-notes" style="min-height:50px">${bNotes}</textarea>
        </div>
      </div>
      <div class="divider"></div>
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:12px">
        <p style="font-size:13px;font-weight:500;flex:1">Employees</p>
        <button class="btn btn-sm btn-secondary" onclick="openManualEmp()">+ Add Manually</button>
      </div>
      <div style="margin-bottom:14px">
        <input type="text" id="bf-emp-search"
               placeholder="Search employees by name, surname or ID… (select a client first)"
               style="width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:7px 7px 0 0;font-size:13px;box-sizing:border-box"
               oninput="empSearchInput(this.value)">
        <div id="emp-search-results" style="display:none;background:var(--card);
             border:1px solid var(--border);border-top:none;border-radius:0 0 7px 7px;
             max-height:200px;overflow-y:auto"></div>
      </div>
      <div style="border:1px solid var(--border);border-radius:8px;overflow:visible;min-height:160px">
        <table style="width:100%;border-collapse:collapse">
          <thead><tr style="background:var(--bg)">
            <th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)">Name</th>
            <th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)">Surname</th>
            <th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)">ID/Passport</th>
            <th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);min-width:200px">Assessment / Test</th>
            <th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);min-width:160px">Site</th>
            <th style="width:40px"></th>
          </tr></thead>
          <tbody id="emp-booking-list"></tbody>
        </table>
      </div>`;

    // Pre-populate employees from positional CSV arrays + keyed maps
    if (booking && booking.emp_parts) {
      const empParts = booking.emp_parts;
      const assParts = booking.ass_parts || [];
      const testParts = booking.test_parts || [];
      const siteParts = booking.site_parts || [];
      const empMap = booking.employees_map || {};

      formEmployees = [];
      empParts.forEach((raw, i) => {
        const eid = raw.trim();
        if (!eid) return;
        const emp = empMap[eid];
        if (!emp) return; // ID not found in DB
        const assId = (assParts[i] || '').trim();
        const testId = (testParts[i] || '').trim();
        const siteId = (siteParts[i] || '').trim();
        formEmployees.push({
          record_id: String(emp.record_id),
          name: emp.client_employees_name,
          surname: emp.surname,
          id_doc: emp.i_doc_passport,
          assessment_id: assId || null,
          test_id: testId || null,
          site_id: siteId || null,
        });
      });
    }
    renderEmployeeTable();
  }

  // ── Employee search ────────────────────────────────────────────────────────
  let empSearchTimer = null;
  window.empSearchInput = async (q) => {
    const results = document.getElementById('emp-search-results');
    if (!currentClientId) { toast('Select a client first', 'error'); return; }
    clearTimeout(empSearchTimer);
    if (q.length < 2) { results.style.display = 'none'; return; }
    empSearchTimer = setTimeout(async () => {
      const r = await api('employees.php', { action: 'list', clients_id: currentClientId, search: q });
      if (!r.success || !r.employees?.length) {
        results.innerHTML = `<div style="padding:12px;color:var(--muted);font-size:13px">No results</div>`;
        results.style.display = 'block'; return;
      }
      results.innerHTML = r.employees.map(e => `
        <div onclick='addEmpFromSearch(${JSON.stringify(e).replace(/'/g, "\\'")})'
             style="padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13px"
             onmouseover="this.style.background='var(--bg)'" onmouseout="this.style.background=''">
          <span class="fw-500">${e.client_employees_name} ${e.surname}</span>
          <span class="mono" style="margin-left:8px;font-size:11px;color:var(--muted)">${e.i_doc_passport || ''}</span>
          <span style="margin-left:auto;font-size:10px;color:var(--muted)">+ add</span>
        </div>`).join('');
      results.style.display = 'block';
    }, 300);
  };

  window.addEmpFromSearch = (emp) => {
    addEmployeeToForm(emp);
    document.getElementById('bf-emp-search').value = '';
    document.getElementById('emp-search-results').style.display = 'none';
  };

  document.addEventListener('click', e => {
    const res = document.getElementById('emp-search-results');
    if (res && !res.contains(e.target) && e.target.id !== 'bf-emp-search') res.style.display = 'none';
  });

  window.bClientChanged = async () => {
    currentClientId = document.getElementById('bf-client').value || null;
    document.getElementById('bf-emp-search').value = '';
    const res = document.getElementById('emp-search-results');
    if (res) res.style.display = 'none';
    // Reload sites for newly selected client
    allSites = [];
    if (currentClientId) {
      const sr = await api('sites.php', { action: 'list', clients_id: currentClientId });
      allSites = sr.sites || [];
    }
    // Re-render employee table to update site dropdowns
    if (formEmployees.length) renderEmployeeTable();
  };

  // ── Manual employee ────────────────────────────────────────────────────────
  window.openManualEmp = () => {
    if (!currentClientId) { toast('Select a client first', 'error'); return; }
    ['me-name', 'me-surname', 'me-id', 'me-occupation'].forEach(id => document.getElementById(id).value = '');
    openModal('manual-emp-modal');
  };

  window.manualEmpSave = async () => {
    const name = document.getElementById('me-name').value.trim();
    const sur = document.getElementById('me-surname').value.trim();
    if (!name || !sur) { toast('Name and surname required', 'error'); return; }
    const r = await api('employees.php', {
      action: 'create', client_employees_name: name, surname: sur,
      clients_id: currentClientId,
      i_doc_passport: document.getElementById('me-id').value.trim(),
      occupation: document.getElementById('me-occupation').value.trim(),
    }, 'POST');
    if (!r.success) {
      // 409 = duplicate ID — offer to add existing employee instead
      if (r.error && r.error.includes('already exists')) {
        toast('⚠ ' + r.error, 'error');
      } else {
        toast(r.error, 'error');
      }
      return;
    }
    addEmployeeToForm({ record_id: r.id, client_employees_name: name, surname: sur, i_doc_passport: document.getElementById('me-id').value.trim() });
    closeModal('manual-emp-modal');
    toast('Employee created and added', 'success');
  };

  // ── New booking ────────────────────────────────────────────────────────────
  window.bookingAdd = async () => {
    editingBookingId = null;
    formEmployees = [];
    document.getElementById('booking-form-title').textContent = 'New Booking';
    document.getElementById('booking-form-body').innerHTML = loadingHTML();
    openModal('booking-form-modal');
    await buildForm();
  };

  // ── Edit booking ───────────────────────────────────────────────────────────
  window.bookingEdit = async (id) => {
    editingBookingId = id;
    formEmployees = [];
    document.getElementById('booking-form-title').textContent = 'Edit Booking';
    document.getElementById('booking-form-body').innerHTML = loadingHTML();
    openModal('booking-form-modal');
    const r = await api('bookings.php', { action: 'get', id });
    if (!r.success) { toast('Failed to load booking', 'error'); closeModal('booking-form-modal'); return; }
    await buildForm(r.booking);
  };

  // ── Save ───────────────────────────────────────────────────────────────────
  window.bookingSave = async () => {
    const clientId = document.getElementById('bf-client').value;
    const assessorId = document.getElementById('bf-assessor').value;
    const date = document.getElementById('bf-date').value;
    const status = document.getElementById('bf-status').value;
    const notes = document.getElementById('bf-notes').value;

    if (!clientId) { toast('Select a client', 'error'); return; }
    if (!date) { toast('Set a booking date', 'error'); return; }
    if (!formEmployees.length) { toast('Add at least one employee', 'error'); return; }

    const empIds = ',' + formEmployees.map(e => e.record_id).join(',') + ',';
    const assIds = ',' + formEmployees.map(e => e.assessment_id || '').join(',') + ',';
    const testIds = ',' + formEmployees.map(e => e.test_id || '').join(',') + ',';
    const siteIds = ',' + formEmployees.map(e => e.site_id || '').join(',') + ',';

    const params = {
      action: editingBookingId ? 'update' : 'create',
      id: editingBookingId || '',
      date_booked: date,
      clients_id: clientId,
      safesure_users_id: assessorId,
      status, notes,
      client_employees: empIds,
      assessments: assIds,
      tests: testIds,
      client_sites: siteIds,
    };

    const r = await api('bookings.php', params, 'POST');
    if (r.success) { toast(editingBookingId ? 'Booking updated' : 'Booking saved', 'success'); closeModal('booking-form-modal'); render(); }
    else toast(r.error, 'error');
  };

  // ── Approve / Delete ───────────────────────────────────────────────────────
  window.bookingApprove = async (id) => {
    if (!confirm('Approve this booking?')) return;
    const r = await api('bookings.php', { action: 'approve', id }, 'POST');
    if (r.success) { toast('Approved', 'success'); closeAllModals(); render(); }
    else toast(r.error, 'error');
  };

  window.bookingDelete = async (id) => {
    if (!confirm('Delete this booking?')) return;
    const r = await api('bookings.php', { action: 'delete', id }, 'POST');
    if (r.success) { toast('Deleted', 'success'); closeAllModals(); render(); }
    else toast(r.error, 'error');
  };

  // ── PDF Preview ────────────────────────────────────────────────────────────
  window.bookingPDF = async (id) => {
    const r = await api('bookings.php', { action: 'get', id });
    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(',');

    const empRows = empParts.map((raw, i) => {
      const eid = raw.trim();
      if (!eid) return '';
      const emp = (b.employees || []).find(e => e.record_id == eid);
      if (!emp) return '';
      const assId = (assParts[i] || '').trim();
      const testId = (testParts[i] || '').trim();
      const assName = assId ? (b.assessment_details || []).find(a => a.record_id == assId)?.assessments_name : '';
      const testName = testId ? (b.test_details || []).find(t => t.record_id == testId)?.test_name : '';
      const typeLabel = assName ? 'Assessment' : testName ? 'Test' : '';
      const typeName = assName || testName || '—';
      return `<tr>
        <td>${i + 1}</td>
        <td>${emp.client_employees_name} ${emp.surname}</td>
        <td>${emp.i_doc_passport || '—'}</td>
        <td>${emp.occupation || '—'}</td>
        <td>${typeLabel}</td>
        <td>${typeName}</td>
      </tr>`;
    }).filter(Boolean).join('');

    const html = `<!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; color: #1a2332; padding: 32px; }
      .header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 3px solid #e85d04; }
      .brand { display: flex; align-items: center; gap: 12px; }
      .brand-box { width: 44px; height: 44px; background: #e85d04; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; }
      .brand-text h1 { font-size: 20px; font-weight: 700; color: #0d1b2a; }
      .brand-text p  { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }
      .doc-info { text-align: right; }
      .doc-info h2 { font-size: 16px; font-weight: 700; color: #0d1b2a; }
      .doc-info .booking-no { font-size: 22px; font-weight: 700; color: #e85d04; }
      .meta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }
      .meta-item label { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #64748b; font-weight: 600; display: block; margin-bottom: 3px; }
      .meta-item p { font-size: 13px; font-weight: 500; }
      .badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
      .badge-approved { background: #dcfce7; color: #166534; }
      .badge-draft    { background: #f1f5f9; color: #475569; }
      .badge-done     { background: #dbeafe; color: #1e40af; }
      .badge-rejected { background: #fee2e2; color: #991b1b; }
      .badge-warning  { background: #fef9c3; color: #854d0e; }
      h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: #64748b; margin-bottom: 10px; font-weight: 600; }
      table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
      th { background: #0d1b2a; color: #fff; padding: 8px 10px; text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
      td { padding: 9px 10px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
      tr:nth-child(even) td { background: #f8fafc; }
      .notes-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px; margin-bottom: 24px; }
      .footer { border-top: 1px solid #e2e8f0; padding-top: 12px; display: flex; justify-content: space-between; color: #94a3b8; font-size: 10px; }
      .sig-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
      .sig-box { border-top: 1px solid #0d1b2a; padding-top: 6px; }
      .sig-box p { font-size: 10px; color: #64748b; }
      @media print { body { padding: 16px; } }
    </style></head><body>

    <div class="header">
      <div class="brand">
        <div class="brand-box">SS</div>
        <div class="brand-text"><h1>SafeSure</h1><p>Competency Assessment</p></div>
      </div>
      <div class="doc-info">
        <h2>Booking Sheet</h2>
        <div class="booking-no">#${b.booking_number || b.record_id}</div>
        <div>Printed: ${new Date().toLocaleDateString('en-ZA', { day: 'numeric', month: 'short', year: 'numeric' })}</div>
      </div>
    </div>

    <div class="meta-grid">
      <div class="meta-item"><label>Client</label><p>${b.clients_name || '—'}</p></div>
      <div class="meta-item"><label>Assessor</label><p>${b.assessor_full_name || b.assessor_name || '—'}</p></div>
      <div class="meta-item"><label>Status</label><p>
        <span class="badge badge-${(b.status || '').toLowerCase().replace(/\s+/g, '-').replace('not-approved', 'warning').replace('approved', 'approved').replace('done', 'done').replace('rejected', 'rejected') || 'draft'}">
          ${b.status || '—'}
        </span>
      </p></div>
      <div class="meta-item"><label>Booking Date</label><p>${b.date_booked || '—'}</p></div>
      <div class="meta-item"><label>Approved Date</label><p>${b.date_approved || '—'}</p></div>
      <div class="meta-item"><label>Employees</label><p>${empParts.filter(v => v.trim()).length}</p></div>
    </div>

    ${b.notes ? `<div class="notes-box"><h3>Notes</h3><p>${b.notes}</p></div>` : ''}

    <h3>Employee Register</h3>
    <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="color:#94a3b8;text-align:center;padding:20px">No employees</td></tr>'}</tbody>
    </table>

    <div class="sig-row">
      <div class="sig-box"><p>Assessor Signature &amp; Date</p></div>
      <div class="sig-box"><p>Client Representative Signature &amp; Date</p></div>
    </div>

    <div class="footer">
      <span>SafeSure Competency Assessment System</span>
      <span>Booking #${b.booking_number || b.record_id} — Confidential</span>
    </div>

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

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


  // ── Export ─────────────────────────────────────────────────────────────────
  const _getExportRows = async (filter) => {
    const status = document.getElementById('booking-status-filter').value || '';
    const r = await api('bookings.php', { action: 'list', status });
    if (!r.success) { toast('Export failed', 'error'); return null; }
    return r.bookings.map(b => [b.booking_number || b.record_id, b.date_booked || '', b.date_approved || '', b.clients_name || '', b.assessor_name || '', b.status || '', b.notes || '']);
  };
  const _exportHeaders = ['Booking #', 'Date Booked', 'Date Approved', 'Client', 'Assessor', 'Status', 'Notes'];
  const _exportTitle = 'Bookings';


  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, 'Bookings');
    XLSX.writeFile(wb, _exportTitle.toLowerCase().replace(/ /g, '_') + '_' + new Date().toISOString().slice(0, 10) + '.xlsx');
  };
});