percovitrine/produit.php

<?php
require __DIR__ . '/includes/db.php';
require __DIR__ . '/includes/helpers.php';
require __DIR__ . '/includes/layout.php';

$id = (int)($_GET['id'] ?? 0);
if (!$id) { header('Location: /'); exit; }

$p = $pdo->query("SELECT p.*, c.name as cat_name FROM products p LEFT JOIN categories c ON c.id=p.category_id WHERE p.id=$id")->fetch();
if (!$p) { header('Location: /'); exit; }

$medias = $pdo->query("SELECT * FROM product_media WHERE product_id=$id ORDER BY sort_order")->fetchAll();
$images = array_filter($medias, fn($m) => $m['type']==='image' && $m['filename']);
$videos = array_filter($medias, fn($m) => $m['type']==='video');

$etsyKey = $pdo->query("SELECT value FROM settings WHERE key='etsy_api_key'")->fetchColumn();

layout_head(h($p['title']));
layout_sidebar('');
layout_main_open();
?>

<div class="page-header">
  <div>
    <a href="/" style="color:var(--muted);text-decoration:none;font-size:.85rem">← Tous les produits</a>
    <div class="page-title" style="margin-top:.25rem"><?= h($p['title']) ?></div>
  </div>
  <div style="display:flex;gap:.5rem">
    <a href="/form.php?id=<?= $id ?>" class="btn btn-secondary"><i class="fas fa-pen"></i> Modifier</a>
    <?php if ($etsyKey && $p['status']==='prêt' && !$p['etsy_listing_id']): ?>
    <button onclick="publishEtsy(<?= $id ?>)" class="btn btn-success"><i class="fab fa-etsy"></i> Publier sur Etsy</button>
    <?php endif ?>
  </div>
</div>

<div class="product-detail-grid">

<!-- Médias -->
<div>
  <?php
  $allMedia = array_merge(array_values($images), array_values($videos));
  $first    = $allMedia[0] ?? null;
  ?>
  <div class="media-main" id="mediaMain">
    <?php if ($first): ?>
      <?php if ($first['type']==='image'): ?>
      <img src="/file.php?f=<?= urlencode($first['filename']) ?>" alt="">
      <?php else: ?>
      <video src="<?= $first['filename'] ? '/file.php?f='.urlencode($first['filename']) : h($first['video_url']) ?>" controls style="width:100%;border-radius:10px;aspect-ratio:1;object-fit:cover"></video>
      <?php endif ?>
    <?php else: ?>
    <div style="aspect-ratio:1;background:var(--bg-card);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--border);font-size:4rem"><i class="fas fa-image"></i></div>
    <?php endif ?>
  </div>
  <?php if (count($allMedia) > 1): ?>
  <div class="media-thumbs">
    <?php foreach ($allMedia as $i => $m): ?>
    <div class="media-thumb<?= $i===0?' active':'' ?>" onclick="switchMedia(this,'<?= $m['type'] ?>','<?= $m['filename'] ? '/file.php?f='.urlencode($m['filename']) : h($m['video_url']) ?>')">
      <?php if ($m['type']==='image'): ?>
      <img src="/file.php?f=<?= urlencode($m['filename']) ?>" alt="">
      <?php else: ?>
      <div style="width:100%;height:100%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--muted)"><i class="fas fa-play"></i></div>
      <?php endif ?>
    </div>
    <?php endforeach ?>
  </div>
  <?php endif ?>

  <?php if ($p['description']): ?>
  <div class="card" style="margin-top:1.25rem">
    <div style="font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem">Description</div>
    <div class="desc-block"><?= nl2br(h($p['description'])) ?></div>
  </div>
  <?php endif ?>
</div>

<!-- Infos produit -->
<div class="product-info-card">
  <div class="card">
    <div class="price-block"><?= fmtPrice($p['price']) ?></div>
    <?php if ($p['shipping'] > 0): ?>
    <div class="shipping-block" style="margin-top:.35rem"><i class="fas fa-truck" style="margin-right:.3rem"></i>Frais de port : <?= fmtPrice($p['shipping']) ?></div>
    <?php else: ?>
    <div class="shipping-block" style="margin-top:.35rem"><i class="fas fa-truck" style="margin-right:.3rem"></i>Livraison gratuite</div>
    <?php endif ?>
    <div style="margin-top:.75rem"><?= statusBadge($p['status']) ?></div>
  </div>

  <div class="card">
    <?php if ($p['cat_name']): ?>
    <div class="info-row"><span class="info-label">Catégorie</span><span><?= h($p['cat_name']) ?></span></div>
    <?php endif ?>
    <?php if ($p['sku']): ?>
    <div class="info-row"><span class="info-label">Référence</span><code style="font-size:.8rem"><?= h($p['sku']) ?></code></div>
    <?php endif ?>
    <?php if ($p['tags']): ?>
    <div class="info-row"><span class="info-label">Tags</span><span style="text-align:right;color:var(--muted);font-size:.8rem"><?= h($p['tags']) ?></span></div>
    <?php endif ?>
    <div class="info-row"><span class="info-label">Créé le</span><span style="font-size:.82rem;color:var(--muted)"><?= date('d/m/Y', strtotime($p['created_at'])) ?></span></div>
    <div class="info-row"><span class="info-label">Modifié</span><span style="font-size:.82rem;color:var(--muted)"><?= date('d/m/Y H:i', strtotime($p['updated_at'])) ?></span></div>
    <?php if ($p['etsy_listing_id']): ?>
    <div class="info-row"><span class="info-label">Etsy ID</span><span style="font-size:.82rem;font-family:monospace"><?= h($p['etsy_listing_id']) ?></span></div>
    <?php endif ?>
  </div>

  <?php if ($etsyKey): ?>
  <div class="etsy-panel">
    <div class="etsy-logo"><i class="fab fa-etsy"></i> Etsy</div>
    <?php if ($p['etsy_listing_id']): ?>
    <div class="mt-2 etsy-status-ok"><i class="fas fa-check-circle"></i> Publié sur Etsy (ID <?= h($p['etsy_listing_id']) ?>)</div>
    <?php elseif ($p['status']==='prêt'): ?>
    <div class="mt-2" style="font-size:.82rem;color:var(--muted)">Prêt à publier — clique sur "Publier sur Etsy"</div>
    <?php else: ?>
    <div class="mt-2 etsy-status-ko"><i class="fas fa-clock"></i> Statut "prêt" requis pour publier</div>
    <?php endif ?>
  </div>
  <?php else: ?>
  <div class="etsy-panel">
    <div class="etsy-logo"><i class="fab fa-etsy"></i> Etsy</div>
    <div class="mt-2 etsy-status-ko"><i class="fas fa-key"></i> Clé API non configurée — <a href="/settings.php" style="color:var(--primary)">Réglages</a></div>
  </div>
  <?php endif ?>

  <div style="display:flex;gap:.5rem">
    <a href="/form.php?id=<?= $id ?>" class="btn btn-secondary" style="flex:1"><i class="fas fa-pen"></i> Modifier</a>
    <button onclick="if(confirm('Supprimer ce produit ?'))deleteProduct(<?= $id ?>)" class="btn btn-danger"><i class="fas fa-trash"></i></button>
  </div>
</div>

</div>

<script>
function switchMedia(thumb, type, src) {
    document.querySelectorAll('.media-thumb').forEach(t=>t.classList.remove('active'));
    thumb.classList.add('active');
    const main = document.getElementById('mediaMain');
    if (type === 'image') {
        main.innerHTML = `<img src="${src}" alt="" style="width:100%;border-radius:10px;aspect-ratio:1;object-fit:cover">`;
    } else {
        main.innerHTML = `<video src="${src}" controls style="width:100%;border-radius:10px;aspect-ratio:1;object-fit:cover"></video>`;
    }
}
async function deleteProduct(id) {
    const r = await fetch('/api.php?action=product&id='+id, {method:'DELETE'});
    const j = await r.json();
    if (j.ok) window.location='/';
    else toast(j.error||'Erreur','error');
}
async function publishEtsy(id) {
    toast('Publication Etsy pas encore disponible (API en cours d\'intégration)');
}
</script>
<?php layout_foot(); ?>