PackIt/packing.php

<?php
// packing.php – displays the packing list for a given hash
require_once __DIR__ . '/db.php';

$pdo = get_pdo();

// 5 characters normally; list.php lengthens a link only when a shorter one
// would collide with a different selection.
$hash = isset($_GET['h']) ? trim($_GET['h']) : '';
if (!preg_match('/^[a-f0-9]{5,16}$/', $hash)) {
    http_response_code(400);
    die('<p>Invalid or missing list hash.</p>');
}

// Resolve hash → activity IDs
$stmt = $pdo->prepare("SELECT activity_ids FROM selection_hashes WHERE hash = ?");
$stmt->execute([$hash]);
$row = $stmt->fetch();
if (!$row) {
    http_response_code(404);
    die('<p>List not found. It may have expired or the link is wrong.</p>');
}

$activityIds = array_map('intval', explode(',', $row['activity_ids']));
if (empty($activityIds)) {
    die('<p>No activities stored for this hash.</p>');
}

// Fetch the selected activity names for display
$ph = implode(',', array_fill(0, count($activityIds), '?'));
$stmt = $pdo->prepare("
    SELECT a.activityName
    FROM activities a
    WHERE a.activityID IN ($ph)
    ORDER BY a.activityName
");
$stmt->execute($activityIds);
$activityNames = $stmt->fetchAll(PDO::FETCH_COLUMN);

// Get all items for these activities, deduplicated, grouped by item_group.
// When the same item is mapped to multiple selected activities with different
// quantities, take the MAX so we reflect the highest need across activities.
$stmt = $pdo->prepare("
    SELECT
        ig.groupID,
        ig.groupName,
        ig.sortOrder  AS groupSort,
        i.itemID,
        i.itemName,
        i.sortOrder   AS itemSort,
        MAX(aim.quantity) AS quantity
    FROM activity_item_map aim
    JOIN items i          ON i.itemID   = aim.itemID
    JOIN item_groups ig   ON ig.groupID = i.groupID
    WHERE aim.activityID IN ($ph)
    GROUP BY ig.groupID, ig.groupName, ig.sortOrder,
             i.itemID, i.itemName, i.sortOrder
    ORDER BY ig.sortOrder, ig.groupID, i.sortOrder, i.itemID
");
$stmt->execute($activityIds);
$allItems = $stmt->fetchAll();

// Group items by item_group
$grouped = [];
foreach ($allItems as $item) {
    $gid = $item['groupID'];
    if (!isset($grouped[$gid])) {
        $grouped[$gid] = ['name' => $item['groupName'], 'items' => []];
    }
    $grouped[$gid]['items'][] = [
        'id'       => $item['itemID'],
        'name'     => $item['itemName'],
        'quantity' => (int)$item['quantity'],
    ];
}

$pageUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http')
           . '://' . $_SERVER['HTTP_HOST']
           . $_SERVER['REQUEST_URI'];
$totalItems = count($allItems);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PackIt – Your Packing List</title>
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#e8c547">
<link rel="icon" type="image/png" sizes="192x192" href="/img/icon-192.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
  :root {
    --bg:       #0f1117;
    --surface:  #181c27;
    --border:   #2a2f3f;
    --accent:   #e8c547;
    --accent2:  #4fd1c5;
    --text:     #e8eaf0;
    --muted:    #7a8099;
    --green:    #5cb85c;
    --radius:   10px;
    --gap:      1.5rem;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  header {
    padding: 2rem var(--gap) 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
  }
  header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(79,209,197,.06) 0%, transparent 70%);
    pointer-events: none;
  }
  .header-left { display: flex; align-items: flex-end; gap: 1rem; position: relative; }
  .logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    letter-spacing: .04em;
    color: var(--accent);
    line-height: 1;
  }
  .header-meta {
    font-size: .8rem;
    color: var(--muted);
    padding-bottom: .2rem;
  }
  .header-meta strong { color: var(--accent2); }

  .btn-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    position: relative;
  }
  .btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius);
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .03em;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all .15s;
    text-decoration: none;
  }
  .btn-accent {
    background: var(--accent); color: #0f1117; border-color: var(--accent);
  }
  .btn-accent:hover { background: #f0d260; }
  .btn-outline {
    background: transparent; color: var(--text); border-color: var(--border);
  }
  .btn-outline:hover { border-color: var(--muted); }
  .btn-teal {
    background: transparent; color: var(--accent2); border-color: var(--accent2);
  }
  .btn-teal:hover { background: rgba(79,209,197,.08); }

  main {
    flex: 1;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem var(--gap) 3rem;
  }

  /* Activities pills */
  .activity-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 2.5rem;
  }
  .pill {
    background: rgba(232,197,71,.1);
    border: 1px solid rgba(232,197,71,.3);
    color: var(--accent);
    font-size: .75rem;
    font-weight: 500;
    padding: .3rem .75rem;
    border-radius: 999px;
    letter-spacing: .03em;
  }

  /* Progress bar */
  .progress-bar-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  .progress-track {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
  }
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    border-radius: 999px;
    width: 0%;
    transition: width .3s ease;
  }
  .progress-label {
    font-size: .82rem;
    color: var(--muted);
    white-space: nowrap;
  }
  .progress-label strong { color: var(--accent); font-variant-numeric: tabular-nums; }

  .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: .12em;
    color: var(--accent2);
    text-transform: uppercase;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
  }
  .section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  .item-group {
    margin-bottom: 2rem;
  }

  .item-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
  }

  .item-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    user-select: none;
  }
  .item-row:hover { background: #1e2333; }
  .item-row.checked {
    border-color: rgba(92,184,92,.5);
    background: rgba(92,184,92,.05);
  }
  .item-row.checked .item-name {
    text-decoration: line-through;
    color: var(--muted);
  }
  .item-check {
    width: 20px; height: 20px;
    border: 1.5px solid var(--border);
    border-radius: 5px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg);
    color: #fff;
    transition: all .15s;
  }
  .item-row.checked .item-check {
    background: var(--green);
    border-color: var(--green);
  }
  .item-check svg { display: none; }
  .item-row.checked .item-check svg { display: block; }
  .item-name { flex: 1; font-size: .95rem; }

  /* Share box */
  .share-box {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2.5rem;
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
  }
  .share-url {
    flex: 1;
    font-size: .8rem;
    color: var(--muted);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .copy-feedback {
    font-size: .8rem;
    color: var(--green);
    opacity: 0;
    transition: opacity .3s;
  }
  .copy-feedback.show { opacity: 1; }

  @media print {
    header .btn-row, .share-box, .progress-bar-wrap { display: none !important; }
    body { background: #fff; color: #000; }
    .item-row { border-color: #ccc; background: none; break-inside: avoid; }
    .section-title { color: #333; }
    .pill { background: #f5f5f5; color: #333; border-color: #ccc; }
    /* The tick boxes carry the dark screen background. Browsers that print
       background graphics (Safari, and any dialog with "Background graphics"
       ticked – common when saving as PDF) then render them as solid black
       rectangles, leaving nothing to cross by hand. Keep them blank on paper. */
    .item-check,
    .item-row.checked .item-check {
      background: #fff;
      border-color: #555;
      color: #000;
    }
    /* Checked items also need to survive without background colours. */
    .item-row.checked { background: none; border-color: #ccc; }
    .item-row.checked .item-name { color: #000; }
  }
</style>
</head>
<body>

<header>
  <div class="header-left">
    <div class="logo">PackIt</div>
    <div class="header-meta">
      <strong><?= $totalItems ?></strong> items &nbsp;·&nbsp;
      <strong><?= count($activityNames) ?></strong> activities
    </div>
  </div>
  <div class="btn-row">
    <a href="index.php" class="btn btn-outline">← New list</a>
    <button class="btn btn-outline" id="resetBtn" onclick="resetList()" hidden>↺ Reset</button>
    <button class="btn btn-teal" onclick="window.print()">🖨 Print</button>
    <button class="btn btn-accent" onclick="copyLink()">🔗 Copy link</button>
  </div>
</header>

<main>
  <!-- Activity pills -->
  <div class="activity-pills">
    <?php foreach ($activityNames as $n): ?>
    <span class="pill"><?= htmlspecialchars($n) ?></span>
    <?php endforeach; ?>
  </div>

  <!-- Share box -->
  <div class="share-box">
    <span class="share-url" id="shareUrl"><?= htmlspecialchars($pageUrl) ?></span>
    <span class="copy-feedback" id="copyFb">Copied!</span>
    <button class="btn btn-teal" onclick="copyLink()">Copy link</button>
  </div>

  <!-- Progress -->
  <div class="progress-bar-wrap">
    <div class="progress-track"><div class="progress-fill" id="progressFill"></div></div>
    <div class="progress-label"><strong id="checkedCnt">0</strong> / <?= $totalItems ?> packed</div>
  </div>

  <!-- Grouped item list -->
  <?php foreach ($grouped as $gid => $group): ?>
  <div class="item-group">
    <div class="section-title"><?= htmlspecialchars($group['name']) ?></div>
    <div class="item-list">
      <?php foreach ($group['items'] as $item): ?>
      <div class="item-row" data-item-id="<?= (int)$item['id'] ?>" onclick="toggleItem(this)">
        <div class="item-check">
          <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
            <path d="M1 4l3 3 5-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
        <span class="item-name"><?php if ($item['quantity'] > 1): ?><?= (int)$item['quantity'] ?>&times; <?php endif; ?><?= htmlspecialchars($item['name']) ?></span>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
  <?php endforeach; ?>
</main>

<script>
const total = <?= $totalItems ?>;

// Packing happens over hours, not in one sitting: a reload, a rotated phone or
// an evicted tab must not lose the ticks. They live per list hash, in this
// browser only – no account, no server round-trip.
const STORE_KEY = 'packit:checked:<?= htmlspecialchars($hash, ENT_QUOTES) ?>';

// Site data can be blocked (private windows, strict settings). Every access is
// guarded so the list still works, just without remembering anything.
function loadChecked() {
  try {
    const raw = localStorage.getItem(STORE_KEY);
    return new Set(raw ? JSON.parse(raw) : []);
  } catch (e) {
    return new Set();
  }
}

function saveChecked(set) {
  try {
    localStorage.setItem(STORE_KEY, JSON.stringify(Array.from(set)));
  } catch (e) {
    /* full, blocked, or private mode – ticks just won't survive the reload */
  }
}

function toggleItem(el) {
  const nowChecked = el.classList.toggle('checked');
  const set = loadChecked();
  if (nowChecked) {
    set.add(el.dataset.itemId);
  } else {
    set.delete(el.dataset.itemId);
  }
  saveChecked(set);
  updateProgress();
}

function resetList() {
  if (!confirm('Uncheck every item on this list?')) return;
  document.querySelectorAll('.item-row.checked').forEach(row => row.classList.remove('checked'));
  try { localStorage.removeItem(STORE_KEY); } catch (e) {}
  updateProgress();
}

function updateProgress() {
  const checked = document.querySelectorAll('.item-row.checked').length;
  document.getElementById('checkedCnt').textContent = checked;
  document.getElementById('progressFill').style.width = (total ? checked / total * 100 : 0) + '%';
  document.getElementById('resetBtn').hidden = checked === 0;
}

function restoreChecked() {
  const stored = loadChecked();
  const alive = new Set();
  document.querySelectorAll('.item-row').forEach(row => {
    if (stored.has(row.dataset.itemId)) {
      row.classList.add('checked');
      alive.add(row.dataset.itemId);
    }
  });
  // Items dropped from the list in the meantime would otherwise linger forever.
  if (alive.size !== stored.size) saveChecked(alive);
  updateProgress();
}

restoreChecked();

function copyLink() {
  const url = document.getElementById('shareUrl').textContent;
  navigator.clipboard.writeText(url).then(() => {
    const fb = document.getElementById('copyFb');
    fb.classList.add('show');
    setTimeout(() => fb.classList.remove('show'), 2000);
  }).catch(() => {
    // Fallback
    const ta = document.createElement('textarea');
    ta.value = url;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
  });
}

// Offline support: a list you have opened stays readable without signal.
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(() => {}));
}
</script>
</body>
</html>