<?php
// cart.php — validation, checkout -> orders, clear cart on success, creative multi-project picker
session_start();

if (empty($_SESSION['user'])) {
    header('Location: signup.php');
    exit;
}



require_once 'db.php';
require_once 'functions.php'; // optional (csrf helpers)
$conn = db();



// ---------- Helpers ----------
function esc($x){ return htmlspecialchars((string)$x, ENT_QUOTES, 'UTF-8'); }

function get_csrf_token() {
  return function_exists('csrf_token')
    ? csrf_token()
    : ($_SESSION['__csrf'] ??= bin2hex(random_bytes(16)));
}

// ✅ renamed to avoid recursion
function verify_csrf_token($t) {
  if (function_exists('verify_csrf')) {
    // call the global one from functions.php if present
    return \verify_csrf($t);
  }
  return isset($_SESSION['__csrf']) && hash_equals($_SESSION['__csrf'], (string)$t);
}

function resolve_vendor_from_vendors(mysqli $conn, array $pub): array {
  $email = trim((string)($pub['vendor_email'] ?? ''));
  $vid   = (int)($pub['vendor_id'] ?? 0);

  // 1️⃣ Prefer vendor_email
  if ($email !== '') {
    try {
      $stmt = $conn->prepare("
        SELECT vendor_name, vendor_email
        FROM vendors
        WHERE TRIM(COALESCE(vendor_email,'')) = TRIM(?)
        LIMIT 1
      ");
      $stmt->bind_param('s', $email);
      $stmt->execute();
      $res = $stmt->get_result();
      if ($v = $res->fetch_assoc()) {
        $stmt->close();
        return [
          'vendor_name'  => (string)$v['vendor_name'],
          'vendor_email' => (string)$v['vendor_email']
        ];
      }
      $stmt->close();
    } catch (Throwable $e) {}
  }

  // 2️⃣ Fallback: vendor_id
  if ($vid > 0) {
    try {
      $stmt = $conn->prepare("
        SELECT vendor_name, vendor_email
        FROM vendors
        WHERE id = ?
        LIMIT 1
      ");
      $stmt->bind_param('i', $vid);
      $stmt->execute();
      $res = $stmt->get_result();
      if ($v = $res->fetch_assoc()) {
        $stmt->close();
        return [
          'vendor_name'  => (string)$v['vendor_name'],
          'vendor_email' => (string)$v['vendor_email']
        ];
      }
      $stmt->close();
    } catch (Throwable $e) {}
  }

  // 3️⃣ Final fallback: publisher snapshot
  return [
    'vendor_name'  => (string)($pub['vendor_name'] ?? ''),
    'vendor_email' => (string)($pub['vendor_email'] ?? '')
  ];
}


function favicon_from_link($link) {
  $host = parse_url($link, PHP_URL_HOST);
  if (!$host && $link) $host = $link;
  return 'https://www.google.com/s2/favicons?sz=32&domain=' . urlencode((string)$host);
}

/** Month list: current + next 12 */
function month_options(): array {
  $out = [];
  $start = new DateTime('first day of this month 00:00:00');
  for ($i=0; $i<=12; $i++) {
    $d = (clone $start)->modify("+$i month");
    $out[] = ['val'=>$d->format('Y-m'), 'label'=>$d->format('M Y')];
  }
  return $out;
}

/* ---------- Placement normalizer (from publishers.type_of_content) ---------- */
/* Storage rules:
 * - GP or Guest Post -> "Guest Post"
 * - PR or press release -> "PR"
 * - news/article -> "News Article"
 * - affiliate -> "Affiliate"
 * (Other known values pass through)
 */
function normalize_placement_from_type(?string $t): ?string {
  $t = trim((string)$t);
  if ($t === '') return null;
  $l = mb_strtolower($t);

  if ($l === 'news article' || $l === 'article')   return 'News Article';
  if ($l === 'pr' || $l === 'press release')       return 'PR';
  if ($l === 'guest post' || $l === 'gp')          return 'Guest Post';
  if ($l === 'affiliate')                          return 'Affiliate';

  return $t;
}

// ---------- POST handling ----------
$errors = [];
$okMsg  = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  if (!verify_csrf_token($_POST['token'] ?? '')) {   // ✅ use the renamed helper
    $errors[] = 'Invalid request. Please refresh and try again.';
  } else {
    // Remove single row from cart
    if (isset($_POST['remove_id'])) {
      $rid = (int)$_POST['remove_id'];
      if (!empty($_SESSION['cart']) && is_array($_SESSION['cart'])) {
        $_SESSION['cart'] = array_values(array_filter(
          $_SESSION['cart'],
          fn($v) => (int)$v !== $rid
        ));
      }
      $okMsg = 'Item removed from cart.';
    }
    // Checkout: validate & insert orders
    elseif (isset($_POST['action']) && $_POST['action'] === 'checkout') {
      $months   = $_POST['month']        ?? []; // month[VID] => 'YYYY-MM'
      $projMap  = $_POST['project_ids']  ?? []; // project_ids[VID][] => [pid,...]

      // Collect cart IDs
      $cartIds = [];
      if (!empty($_SESSION['cart']) && is_array($_SESSION['cart'])) {
        $cartIds = array_values(array_unique(array_map('intval', $_SESSION['cart'])));
        $cartIds = array_filter($cartIds, fn($v)=> $v>0);
      }

      if (!$cartIds) {
        $errors[] = 'Your cart is empty.';
      }

      // Server-side validation: each row must have month + ≥1 project
      $rowErrors = [];
      if ($cartIds) {
        foreach ($cartIds as $vid) {
          $vidKey   = (int)$vid;
          $hasMonth = isset($months[$vidKey]) &&
                      preg_match('/^\d{4}-\d{2}$/', (string)$months[$vidKey]);
          $picks    = isset($projMap[$vidKey]) && is_array($projMap[$vidKey])
                        ? array_filter(array_map('intval', $projMap[$vidKey]))
                        : [];
          if (!$hasMonth || empty($picks)) {
            $rowErrors[$vidKey] =
              (!$hasMonth ? 'Select a month' : '') .
              (empty($picks) ? ( !$hasMonth ? ' and ' : '' ) . 'choose at least one project' : '');
          }
        }
      }
      if ($rowErrors) {
        $errors[] = 'Please complete the Month and select at least one Project for each publication.';
      }

      // If valid, insert orders
      if (!$errors && $cartIds) {
        // Pull publisher snapshots once (include vendor_name AND type_of_content for placement)
        $in = implode(',', array_map('intval', $cartIds));
        $vendors = [];
        if ($vres = $conn->query("SELECT id, agency_name, vendor_name, vendor_email, vendor_id, type_of_content
FROM publishers
WHERE id IN ($in)
")) {
          while ($r = $vres->fetch_assoc()) $vendors[(int)$r['id']] = $r;
        }

        // ✅ INSERT uses new schema: item_number, invoice, paid_screenshot (left NULL here)
$insertSql = "
  INSERT INTO orders
    (
      date,
      project_id,
      publisher_id,
      agency_name,
      vendor_name,
      vendor_email,
      item_number,
      placement,
      topic_copy,
      live_link,
      seo_status,
      vendor_status,
      cost_usd,
      cost_inr,
      invoice,
      payment_status,
      paid_screenshot,
      remarks,
      created_at
    )
  VALUES
    (
      ?, ?, ?, ?, ?, ?,
      NULL, ?, NULL, NULL, NULL, NULL,
      NULL, NULL, NULL, NULL, NULL, NULL, NOW()
    )
";


        $stmt = $conn->prepare($insertSql);
        if (!$stmt) {
          $errors[] = 'Could not prepare order insertion. ' . $conn->error;
        } else {
          $created = 0;

          foreach ($cartIds as $vid) {
            $vid = (int)$vid;

            // Month -> YYYY-MM-01
            $ym = (isset($months[$vid]) && preg_match('/^\d{4}-\d{2}$/', (string)$months[$vid]))
              ? (string)$months[$vid] : date('Y-m');
            $orderDate = $ym . '-01';

            // Publisher snapshot
            $vrow = $vendors[$vid] ?? null;
            if (!$vrow) { $rowErrors[$vid] = 'Publisher not found.'; continue; }

            $agency     = (string)($vrow['agency_name'] ?? '');

            $vendorData = resolve_vendor_from_vendors($conn, $vrow);
            $vendor     = $vendorData['vendor_name'];
            $vendorEmail= $vendorData['vendor_email'];

            $placementV = normalize_placement_from_type($vrow['type_of_content'] ?? '');


            // Selected projects for this publisher
            $projIds = isset($projMap[$vid]) && is_array($projMap[$vid])
              ? array_filter(array_map('intval', $projMap[$vid]))
              : [];

            foreach ($projIds as $pid) {
              if ($pid <= 0) continue;

              // ✅ Bind: date (s), project_id (i), publisher_id (i), agency_name (s), vendor_name (s), placement (s)
              $stmt->bind_param(
  'siissss',
  $orderDate,     // s
  $pid,           // i
  $vid,           // i (publisher_id)
  $agency,        // s
  $vendor,        // s (from vendors table if possible)
  $vendorEmail,   // s (from vendors table if possible)
  $placementV     // s
);


              if ($stmt->execute()) {
                $created++;
              } else {
                $errors[] = "Insert failed: " . $stmt->error;
              }
            }
          }
          $stmt->close();

          if (!empty($rowErrors)) $errors[] = 'Some rows had issues and were skipped.';
          if (empty($errors)) {
            if (!empty($created)) {
              $_SESSION['cart'] = []; // clear cart ✅
              $okMsg = "Created {$created} order(s) and cleared the cart.";
            } else {
              $errors[] = 'No orders were created.';
            }
          }
        }
      }
    }
  }
}

// ---------- Load cart + form data ----------
$ids = [];
if (!empty($_SESSION['cart']) && is_array($_SESSION['cart'])) {
  $ids = array_values(array_unique(array_map(fn($v)=> (int)$v, $_SESSION['cart'])));
  $ids = array_filter($ids, fn($v)=> $v > 0);
}

$items = [];
if ($ids) {
  // Reverse order so newest added (last in array) comes first
  $ids = array_reverse($ids);

  $in    = implode(',', array_map('intval', $ids));
  $order = implode(',', array_map('intval', $ids));

  $sql = "
SELECT
  p.id,
  p.agency_name,
  COALESCE(v.vendor_name, p.vendor_name) AS vendor_name,
  p.publication_name,
  p.website_link
FROM publishers p
LEFT JOIN vendors v
  ON (
       (v.vendor_email IS NOT NULL AND v.vendor_email <> '' AND v.vendor_email = p.vendor_email)
       OR
       (p.vendor_id IS NOT NULL AND p.vendor_id > 0 AND v.id = p.vendor_id)
     )
WHERE p.id IN ($in)
ORDER BY FIELD(p.id, $order)
";

          
  if ($res = $conn->query($sql)) {
    while ($row = $res->fetch_assoc()) {
      $items[] = $row;
    }
  }
}


// ---------- Group items by Vendor + Agency ----------
$groupedItems = [];

foreach ($items as $row) {
  $vendor = trim((string)($row['vendor_name'] ?? ''));
  $agency = trim((string)($row['agency_name'] ?? ''));

  $key = strtolower($vendor . '||' . $agency);

  if (!isset($groupedItems[$key])) {
    $groupedItems[$key] = [
      'vendor_name' => $vendor,
      'agency_name' => $agency,
      'items' => []
    ];
  }

  $groupedItems[$key]['items'][] = $row;
}


// All projects for dropdown
$projects = [];
if ($pres = $conn->query("SELECT id, name FROM projects ORDER BY name ASC")) {
  while ($r = $pres->fetch_assoc()) $projects[] = $r;
}

$token     = get_csrf_token();
$monthOpts = month_options();

// Now render page with shared header/footer
include 'includes/header.php';
?>

<!-- Page-specific styles -->
<style>
  .row-error { color: #b91c1c; font-size: .9rem; }
  .cart-table { table-layout: fixed; }
  .col-pub   { width: 18%; }
  .col-agency{ width: 16%; }
  .col-vendor{ width: 16%; }
  .col-month { width: 12%; min-width: 160px; }
  .col-projs { width: 20%; min-width: 220px; }
  .col-act   { width: 10%; min-width: 120px; }
  td.td-tight { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* --- Creative Project Dropdown --- */
  .project-picker{ position: relative; }
  .pp-btn{
    width:100%; text-align:left; border:1px solid rgba(0,0,0,.12); border-radius:10px;
    background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));
    padding:.375rem .75rem; min-height:38px; display:flex; align-items:center; gap:.5rem;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
  }
  .pp-btn:hover{ border-color:#cdd5df; background:#fff; }
  .pp-placeholder{ color:#6b7280; }
  .pp-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .pp-chip{
    background:#eef2ff; color:#3730a3; border:1px solid rgba(55,48,163,.18);
    padding:.15rem .5rem; border-radius:999px; font-size:.78rem; max-width:180px;
    display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  }
  .pp-chip .x{ opacity:.6; cursor:pointer; font-weight:700; }
  .pp-caret{ margin-left:auto; color:#6b7280; }

  .pp-panel{
    position:fixed; z-index:1056; width:340px; max-height:420px; display:block;
    background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
    border:1px solid rgba(0,0,0,.08); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.12);
    padding:.6rem; overflow:hidden;
  }
  .pp-head{ display:flex; gap:.5rem; align-items:center; }
  .pp-search{ flex:1; }
  .pp-actions{ display:flex; gap:.5rem; margin:.5rem 0 .35rem; }
  .btn-xs{ --bs-btn-padding-y:.2rem; --bs-btn-padding-x:.45rem; --bs-btn-font-size:.75rem; }

  .pp-list{ overflow:auto; max-height:290px; border:1px solid rgba(0,0,0,.06); border-radius:10px; background:#fff; }
  .pp-item{
    display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; cursor:pointer;
    border-bottom:1px solid rgba(0,0,0,.04); user-select:none;
  }
  .pp-item:last-child{ border-bottom:0; }
  .pp-item:hover{ background:#f8fafc; }
  .pp-item input{ margin:0; }
  .pp-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pp-item:focus-visible{
    outline: 2px solid #1F4FEB;
    outline-offset: 2px;
    background: #eef2ff;
  }

  .pp-backdrop{
    position:fixed; inset:0; z-index:1055; background:transparent;
  }

  /* hide native <select multiple> only when JS enhances */
  .js-enhanced .project-picker select.project-select{
    position:absolute; left:-9999px; width:1px; height:1px;
  }

.group-header td {
  background: #f1f5f9;
  font-weight: 600;
  vertical-align: middle;
}


.group-item td:first-child {
  padding-left: 32px;
}

</style>

<div class="container my-4">
  <div class="d-flex align-items-center justify-content-between flex-wrap mb-3">
    <h2 class="m-0">Cart</h2>
  </div>

  <?php if ($errors): ?>
    <div class="alert alert-danger py-2 mb-3">
      <?= esc(implode(' ', $errors)) ?>
    </div>
  <?php elseif ($okMsg): ?>
    <div class="alert alert-success py-2 mb-3">
      <?= esc($okMsg) ?>
    </div>
  <?php endif; ?>

  <?php if (!$items): ?>
    <div class="card">
      <div class="card-body text-center py-5">
        <p class="mb-0">Your cart is empty.</p>
      </div>
    </div>
  <?php else: ?>

  <form method="post" id="checkoutForm">
    <input type="hidden" name="token" value="<?= esc($token) ?>">

    <div class="table-responsive">
      <table class="table align-middle cart-table">
        <colgroup>
          <col class="col-pub">
          <col class="col-vendor">
          <col class="col-agency">
          <col class="col-month">
          <col class="col-projs">
          <col class="col-act">
        </colgroup>
        <thead class="table-light">
          <tr>
            <th>Publication</th>
            <th>Vendor name</th>
            <th>Agency name</th>
            <th>Month</th>
            <th>Project(s)</th>
            <th class="text-end">Actions</th>
          </tr>
        </thead>

<tbody>
<?php foreach ($groupedItems as $gIndex => $group): ?>
  <?php
    $count   = count($group['items']);
    $groupId = 'grp_' . md5($gIndex);
  ?>

  <!-- GROUP HEADER (only if more than 1 item) -->
  <?php if ($count > 1): ?>
  <tr class="table-secondary group-header" data-group="<?= $groupId ?>">

  <!-- Publication column -->
  <td class="fw-semibold">
    <?= $count ?> Items
  </td>

  <!-- Vendor column -->
  <td>
    <?= esc($group['vendor_name']) ?>
  </td>

  <!-- Agency column -->
  <td>
    <?= esc($group['agency_name']) ?>
  </td>

  <!-- Month column (empty for group row) -->
  <td></td>

  <!-- Project column (empty for group row) -->
  <td></td>

  <!-- Actions -->
  <td class="text-end">
    <button type="button"
            class="btn btn-sm btn-outline-primary toggle-group"
            data-target="<?= $groupId ?>">
      Expand
    </button>
  </td>

</tr>

  <?php endif; ?>

  <!-- CHILD ROWS -->
  <?php foreach ($group['items'] as $it): ?>
    <?php $vid = (int)$it['id']; $favicon = favicon_from_link($it['website_link'] ?? ''); ?>
    <tr class="group-item <?= $count > 1 ? 'd-none' : '' ?>"
        data-parent="<?= $groupId ?>"
        data-row="<?= $vid ?>">

      <td class="td-tight">
        <div class="d-flex align-items-center gap-2">
          <img src="<?= esc($favicon) ?>" width="16" height="16">
          <div class="fw-semibold text-truncate">
            <?= esc($it['publication_name'] ?: '-') ?>
          </div>
        </div>
      </td>

      <td class="td-tight"><?= esc($it['vendor_name']) ?></td>
      <td class="td-tight"><?= esc($it['agency_name']) ?></td>

      <td>
        <select name="month[<?= $vid ?>]"
                class="form-select form-select-sm"
                required>
          <?php foreach ($monthOpts as $mo): ?>
            <option value="<?= esc($mo['val']) ?>">
              <?= esc($mo['label']) ?>
            </option>
          <?php endforeach; ?>
        </select>
      </td>

<td class="td-tight">
  <div class="project-picker" data-vid="<?= $vid ?>">
    <button type="button" class="pp-btn" aria-haspopup="dialog" aria-expanded="false">
      <span class="pp-placeholder">Select project(s)</span>
      <span class="pp-chips"></span>
      <span class="pp-caret">▾</span>
    </button>

    <div class="pp-panel" role="dialog" hidden>
      <div class="pp-head">
        <input type="text" class="form-control form-control-sm pp-search"
               placeholder="Search projects…">
      </div>

      <div class="pp-actions">
        <button type="button" class="btn btn-outline-secondary btn-xs pp-clear">Clear</button>
        <button type="button" class="btn btn-outline-primary btn-xs pp-selectall">
          Select filtered
        </button>
      </div>

      <div class="pp-list">
        <?php foreach ($projects as $p): ?>
          <label class="pp-item" tabindex="0"
                 data-name="<?= esc(mb_strtolower($p['name'])) ?>">
            <input type="checkbox"
                   class="pp-check"
                   value="<?= (int)$p['id'] ?>">
            <span class="pp-name"><?= esc($p['name']) ?></span>
          </label>
        <?php endforeach; ?>
      </div>
    </div>

    <!-- Real field used by backend -->
    <select name="project_ids[<?= $vid ?>][]"
            class="form-select form-select-sm project-select"
            multiple size="5">
      <?php foreach ($projects as $p): ?>
        <option value="<?= (int)$p['id'] ?>">
          <?= esc($p['name']) ?>
        </option>
      <?php endforeach; ?>
    </select>
  </div>

  <div class="row-error d-none"
       data-error-for="<?= $vid ?>">
    Please choose at least one project.
  </div>
</td>


      <td class="text-end">
        <button type="submit"
                name="remove_id"
                value="<?= $vid ?>"
                class="btn btn-outline-danger btn-sm">
          Remove
        </button>
      </td>
    </tr>
  <?php endforeach; ?>

<?php endforeach; ?>
</tbody>

        <tfoot>
          <tr>
            <td colspan="6" class="text-end">
              <button type="submit" name="action" value="checkout" class="btn btn-primary btn-sm">
                Checkout
              </button>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </form>

  <?php endif; ?>
</div>


<script>
document.addEventListener('click', function (e) {
  const btn = e.target.closest('.toggle-group');
  if (!btn) return;

  const groupId = btn.dataset.target;
  const rows = document.querySelectorAll(
    'tr.group-item[data-parent="' + groupId + '"]'
  );

  const expanded = btn.dataset.expanded === '1';

  rows.forEach(r => r.classList.toggle('d-none', expanded));

  btn.dataset.expanded = expanded ? '0' : '1';
  btn.textContent = expanded ? 'Expand' : 'Collapse';
});
</script>


<script>
// Mark page type if you ever need it
document.body.dataset.page = 'cart';

// Client-side validation: each row must have >=1 project selected
document.getElementById('checkoutForm')?.addEventListener('submit', (e) => {
  // if clicking "Remove", skip this validation
  if (e.submitter && e.submitter.name === 'remove_id') return;

  let ok = true;
  document.querySelectorAll('tr[data-row]').forEach(tr => {
    const vid   = tr.getAttribute('data-row');
    const proj  = tr.querySelector('.project-select');
    const errEl = tr.querySelector('[data-error-for="'+vid+'"]');

    let hasProj = false;
    if (proj) {
      for (const opt of proj.options) {
        if (opt.selected && /^\d+$/.test(opt.value)) { hasProj = true; break; }
      }
    }
    if (!hasProj) {
      ok = false;
      if (errEl) errEl.classList.remove('d-none');
    } else {
      if (errEl) errEl.classList.add('d-none');
    }
  });
  if (!ok) {
    e.preventDefault();
    const firstErr = document.querySelector('.row-error:not(.d-none)');
    if (firstErr) firstErr.scrollIntoView({behavior: 'smooth', block: 'center'});
  }
});
</script>

<script>
document.documentElement.classList.add('js-enhanced');

(function(){
  const qsa = (sel, el=document) => Array.from(el.querySelectorAll(sel));

  function positionPanel(btn, panel){
    const r = btn.getBoundingClientRect();
    const pw = panel.offsetWidth || 340;
    const ph = panel.offsetHeight || 380;
    let left = r.left, top = r.bottom + 8;

    if (left + pw > window.innerWidth - 8) left = Math.max(8, r.right - pw);
    if (top + ph > window.innerHeight - 8) top = r.top - ph - 8;

    panel.style.left = left + 'px';
    panel.style.top  = top  + 'px';
  }

  function updateFromSelect(picker){
    const select     = picker.querySelector('select.project-select');
    const chipsWrap  = picker.querySelector('.pp-chips');
    const placeholder= picker.querySelector('.pp-placeholder');
    const checks     = qsa('.pp-check', picker);
    const selectedValues = new Set(qsa('option:checked', select).map(o => o.value));

    checks.forEach(ch => ch.checked = selectedValues.has(ch.value));

    const texts = qsa('option:checked', select).map(o => o.textContent.trim());
    chipsWrap.innerHTML = '';
    if (texts.length){
      placeholder.style.display = 'none';
      texts.slice(0,3).forEach((t) => {
        const chip = document.createElement('span');
        chip.className = 'pp-chip';
        chip.innerHTML = `<span class="t">${t}</span><span class="x" title="Remove">×</span>`;
        chip.querySelector('.x').addEventListener('click', () => {
          const opt = qsa('option', select).find(o => o.textContent.trim() === t);
          if (opt){ opt.selected = false; }
          updateFromSelect(picker);
          picker.dispatchEvent(new CustomEvent('pp-change'));
        });
        chipsWrap.appendChild(chip);
      });
      if (texts.length > 3){
        const more = document.createElement('span');
        more.className = 'pp-chip';
        more.textContent = `+${texts.length-3} more`;
        chipsWrap.appendChild(more);
      }
    } else {
      placeholder.style.display = '';
    }
  }

  function updateFromChecks(picker){
    const select = picker.querySelector('select.project-select');
    const checks = qsa('.pp-check', picker);
    qsa('option', select).forEach(o => o.selected = false);
    checks.forEach(ch => {
      if (ch.checked){
        const opt = select.querySelector(`option[value="${CSS.escape(ch.value)}"]`);
        if (opt) opt.selected = true;
      }
    });
    updateFromSelect(picker);
    picker.dispatchEvent(new CustomEvent('pp-change'));
  }

  qsa('.project-picker').forEach((picker) => {
    const btn   = picker.querySelector('.pp-btn');
    const panel = picker.querySelector('.pp-panel');
    const select= picker.querySelector('select.project-select');
    const search= picker.querySelector('.pp-search');
    const list  = picker.querySelector('.pp-list');
    const clearBtn     = picker.querySelector('.pp-clear');
    const selectAllBtn = picker.querySelector('.pp-selectall');
    let backdrop = null;

    qsa('.pp-item', list).forEach(it => {
      if (!it.hasAttribute('tabindex')) it.setAttribute('tabindex','0');
    });

    updateFromSelect(picker);

    function open(){
      if (!panel.hasAttribute('hidden')) return;
      panel.removeAttribute('hidden');
      backdrop = document.createElement('div');
      backdrop.className = 'pp-backdrop';
      document.body.appendChild(backdrop);
      positionPanel(btn, panel);
      btn.setAttribute('aria-expanded','true');
      search.value = '';
      filter('');
      search.focus({preventScroll:true});

      const closeOnClickOutside = (e)=>{ if (!panel.contains(e.target) && !btn.contains(e.target)) close(); };
      const onResizeScroll = ()=> positionPanel(btn, panel);
      const onEsc = (e)=>{ if (e.key === 'Escape') close(); };

      backdrop.addEventListener('mousedown', closeOnClickOutside, {once:true});
      window.addEventListener('resize', onResizeScroll, {passive:true});
      window.addEventListener('scroll', onResizeScroll, {passive:true});
      window.addEventListener('keydown', onEsc, {once:true});

      panel._cleanup = ()=> {
        window.removeEventListener('resize', onResizeScroll);
        window.removeEventListener('scroll', onResizeScroll);
      };
    }
    function close(){
      if (panel.hasAttribute('hidden')) return;
      panel.setAttribute('hidden','');
      btn.setAttribute('aria-expanded','false');
      if (backdrop){ backdrop.remove(); backdrop = null; }
      if (panel._cleanup) panel._cleanup();
      btn.focus({preventScroll:true});
    }

    btn.addEventListener('click', ()=> panel.hasAttribute('hidden') ? open() : close());

    function filter(q){
      const qq = q.trim().toLowerCase();
      qsa('.pp-item', list).forEach(it=>{
        const name = it.getAttribute('data-name') || '';
        it.style.display = name.includes(qq) ? '' : 'none';
      });
    }
    search.addEventListener('input', (e)=> filter(e.target.value));

    list.addEventListener('click', (e)=>{
      const item  = e.target.closest('.pp-item');
      if (!item) return;
      const check = item.querySelector('.pp-check');

      if (e.target === check) {
        requestAnimationFrame(() => updateFromChecks(picker));
      } else {
        e.preventDefault();
        check.checked = !check.checked;
        updateFromChecks(picker);
      }
    });

    list.addEventListener('keydown', (e)=>{
      if (e.key !== ' ' && e.key !== 'Enter') return;
      const item  = e.target.closest('.pp-item[tabindex]');
      if (!item) return;
      e.preventDefault();
      const check = item.querySelector('.pp-check');
      check.checked = !check.checked;
      updateFromChecks(picker);
    });

    clearBtn.addEventListener('click', ()=>{
      qsa('.pp-check', panel).forEach(ch => ch.checked = false);
      updateFromChecks(picker);
    });

    selectAllBtn.addEventListener('click', ()=>{
      qsa('.pp-item', panel).forEach(it=>{
        if (it.style.display !== 'none'){
          const ch = it.querySelector('.pp-check');
          ch.checked = true;
        }
      });
      updateFromChecks(picker);
    });

    select.addEventListener('change', ()=> updateFromSelect(picker));
  });

  document.addEventListener('pp-change', (e)=>{
    // bubble if you ever need to hook into changes
  }, true);
})();
</script>

<?php include 'includes/footer.php'; ?>