<?php
$page_title = 'Product Catalogue';
require_once __DIR__ . '/header.php';

$products = $db->query("SELECT * FROM products WHERE status='active' ORDER BY category_id ASC, name ASC")->fetchAll();
?>

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;">
  <div style="display:flex;gap:12px;background:#fff;padding:4px;border-radius:8px;border:1px solid #e2e8f0;">
    <button class="btn-outline" style="background:#2557d6;color:#fff;border:none;">All</button>
    <button class="btn-outline" style="border:none;">Kitchen Sinks</button>
    <button class="btn-outline" style="border:none;">Faucets</button>
    <button class="btn-outline" style="border:none;">Drain Kits</button>
    <button class="btn-outline" style="border:none;">Accessories</button>
  </div>
  <div style="display:flex;gap:12px;">
    <div style="position:relative;">
      <i class="fas fa-search" style="position:absolute;left:12px;top:10px;color:#94a3b8;"></i>
      <input type="text" placeholder="Search by product name / SKU" style="padding:10px 10px 10px 36px;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:250px;">
    </div>
    <button class="btn-outline"><i class="fas fa-filter"></i> Filters</button>
  </div>
</div>

<div style="display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:24px;">
  <?php foreach ($products as $p): ?>
  <?php 
    $dealer_price = $p['price'] * 0.80; 
  ?>
  <div class="card" style="margin:0;padding:20px;display:flex;flex-direction:column;">
    <div style="height:180px;background:#f8fafc;border-radius:12px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;">
      <img src="<?= SITE_URL ?>/assets/images/<?= h($p['image']) ?>" alt="<?= h($p['name']) ?>" style="max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply;">
    </div>
    <h4 style="margin:0 0 4px;font-size:1.1rem;color:#0f172a;"><?= h($p['name']) ?></h4>
    <span style="font-size:.8rem;color:#64748b;margin-bottom:12px;display:block;">SKU: <?= h(strtoupper(substr(md5($p['id']), 0, 8))) ?></span>
    
    <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px;flex:1;">
      <div>
        <div style="font-size:1.25rem;font-weight:700;color:#0f172a;">₹<?= number_format($dealer_price) ?></div>
        <div style="font-size:.8rem;color:#64748b;">MOQ: 5 Pcs</div>
      </div>
    </div>
    
    <button class="btn-outline" style="width:100%;border-color:#2557d6;color:#2557d6;">Add to Cart</button>
  </div>
  <?php endforeach; ?>
</div>

<?php require_once __DIR__ . '/footer.php'; ?>
