<?php
/**
 * Simpele foto-overzicht pagina (zoals Windows Verkenner "grote iconen").
 *
 * INSTALLATIE:
 * Upload dit bestand als "index.php" in de map waarvan je een overzicht wilt,
 * bijvoorbeeld /var/www/fotos_silshop/servies/index.php
 * Bezoek daarna https://fotos.silshop.nl/servies/ in de browser.
 *
 * Er is geen configuratie nodig — het script leest automatisch alle
 * afbeeldingen uit de map waarin het zelf staat.
 */

$extensies = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
$map = __DIR__;

$bestanden = array_values(array_filter(scandir($map), function ($f) use ($map, $extensies) {
    if ($f === '.' || $f === '..') return false;
    if (!is_file($map . '/' . $f)) return false;
    $ext = strtolower(pathinfo($f, PATHINFO_EXTENSION));
    return in_array($ext, $extensies, true);
}));

// Natuurlijke sortering, zodat 4000, 4002, 4010 ... netjes op volgorde staan
// (i.p.v. alfabetisch waarbij "4010" vóór "4002" zou komen door tekstsortering).
natsort($bestanden);
$bestanden = array_values($bestanden);

function formatGrootte($bytes) {
    if ($bytes >= 1048576) return round($bytes / 1048576, 1) . ' MB';
    if ($bytes >= 1024) return round($bytes / 1024) . ' KB';
    return $bytes . ' B';
}
?>
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Foto-overzicht — <?= htmlspecialchars(basename($map)) ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  :root { color-scheme: light dark; }
  body {
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    margin: 0;
    padding: 24px 32px 64px;
    background: #f3f4f6;
    color: #1f2328;
  }
  h1 {
    font-size: 20px;
    margin: 0 0 4px;
  }
  .sub {
    color: #57606a;
    font-size: 13px;
    margin: 0 0 20px;
  }
  .toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
  }
  #zoek {
    padding: 8px 12px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    font-size: 14px;
    width: 280px;
    max-width: 60vw;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
  }
  .tile {
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s, transform .15s;
  }
  .tile:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    transform: translateY(-2px);
  }
  .thumb-wrap {
    aspect-ratio: 1 / 1;
    background: #f6f8fa repeating-conic-gradient(#eceff2 0% 25%, transparent 0% 50%) 50% / 16px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .thumb-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }
  .meta {
    padding: 8px 10px;
    border-top: 1px solid #eceff2;
  }
  .naam {
    font-size: 12.5px;
    word-break: break-all;
    line-height: 1.3;
  }
  .grootte {
    font-size: 11px;
    color: #8b949e;
    margin-top: 2px;
  }
  .leeg {
    color: #57606a;
    font-size: 14px;
    margin-top: 40px;
  }
  @media (prefers-color-scheme: dark) {
    body { background: #0d1117; color: #e6edf3; }
    .tile { background: #161b22; border-color: #30363d; }
    .meta { border-top-color: #21262d; }
    #zoek { background: #0d1117; color: #e6edf3; border-color: #30363d; }
    .thumb-wrap { background-color: #161b22; }
  }
</style>
</head>
<body>
  <h1>?? <?= htmlspecialchars(basename($map)) ?></h1>
  <p class="sub"><?= count($bestanden) ?> foto's</p>

  <div class="toolbar">
    <input type="text" id="zoek" placeholder="Zoek op bestandsnaam of SKU…" oninput="filterTegels()">
  </div>

  <?php if (empty($bestanden)): ?>
    <p class="leeg">Geen afbeeldingen gevonden in deze map.</p>
  <?php else: ?>
    <div class="grid" id="grid">
      <?php foreach ($bestanden as $bestand):
          $pad = $map . '/' . $bestand;
          $grootte = formatGrootte(filesize($pad));
      ?>
        <a class="tile" href="<?= rawurlencode($bestand) ?>" target="_blank" data-naam="<?= strtolower(htmlspecialchars($bestand)) ?>">
          <div class="thumb-wrap">
            <img src="<?= rawurlencode($bestand) ?>" loading="lazy" alt="<?= htmlspecialchars($bestand) ?>">
          </div>
          <div class="meta">
            <div class="naam"><?= htmlspecialchars($bestand) ?></div>
            <div class="grootte"><?= $grootte ?></div>
          </div>
        </a>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>

<script>
function filterTegels() {
  const q = document.getElementById('zoek').value.toLowerCase();
  document.querySelectorAll('#grid .tile').forEach(t => {
    t.style.display = t.dataset.naam.includes(q) ? '' : 'none';
  });
}
</script>
</body>
</html>