<?php
require_once 'config/db.php';
$settings = getAllSettings($pdo);
$activePage = 'product';

$slug = $_GET['slug'] ?? '';
if (!$slug) { header('Location: brand.php'); exit; }

$stmt = $pdo->prepare("SELECT bp.*, b.name as brand_name, b.id as brand_id FROM brand_products bp JOIN brands b ON bp.brand_id=b.id WHERE bp.slug=? AND bp.is_active=1");
$stmt->execute([$slug]);
$product = $stmt->fetch();
if (!$product) { header('Location: brand.php'); exit; }

$stmt = $pdo->prepare("SELECT * FROM brand_product_colors WHERE brand_product_id=? ORDER BY sort_order");
$stmt->execute([$product['id']]);
$colors = $stmt->fetchAll();

$pageTitle = $product['brand_name'] . ' ' . $product['name'] . ' - ' . ($settings['site_name'] ?? '');
include 'partials/header.php';
?>

<style>
.bpd-hero { background: #f8f8f8; padding: 30px 0 20px; border-bottom: 1px solid #eee; }
.bpd-hero .breadcrumb a { color: var(--accent); text-decoration: none; }
.bpd-hero .breadcrumb a:hover { text-decoration: underline; }
.bpd-title { font-family: 'Playfair Display', serif; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #333; }
.bpd-logo { max-width: 300px; margin: 0 auto; }
.bpd-logo img { width: 100%; }
.bpd-desc { color: #555; line-height: 1.8; max-width: 800px; margin: 0 auto; }
.color-grid { padding: 40px 0 60px; }
.color-swatch { text-align: center; }
.color-swatch .swatch-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 2px;
    transition: transform .3s, box-shadow .3s;
    cursor: pointer;
}
.color-swatch .swatch-img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
}
.color-swatch .swatch-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: #e9e9e9;
    border: 1px solid #ddd;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: .7rem;
}
.color-swatch .color-name {
    font-weight: 700;
    font-size: .75rem;
    color: #333;
    margin-top: 6px;
    text-transform: uppercase;
}
.color-swatch .color-code {
    font-size: .7rem;
    color: #888;
}
</style>

<div class="bpd-hero">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-2" style="font-size:.85rem;">
                <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                <li class="breadcrumb-item"><a href="brand-product.php?brand=<?= $product['brand_id'] ?>">Products</a></li>
                <li class="breadcrumb-item active"><?= htmlspecialchars($product['brand_name']) ?> <?= htmlspecialchars($product['name']) ?></li>
            </ol>
        </nav>
    </div>
</div>

<section class="py-5">
    <div class="container text-center">
        <h1 class="bpd-title mb-4"><?= htmlspecialchars($product['brand_name']) ?> <?= htmlspecialchars($product['name']) ?></h1>

        <?php if ($product['logo_image']): ?>
        <div class="bpd-logo mb-4">
            <img src="<?= htmlspecialchars($product['logo_image']) ?>" alt="<?= htmlspecialchars($product['name']) ?>"
                 onerror="this.style.display='none'">
        </div>
        <?php endif; ?>

        <?php if ($product['description']): ?>
        <p class="bpd-desc"><?= nl2br(htmlspecialchars($product['description'])) ?></p>
        <?php endif; ?>
    </div>
</section>

<?php if (!empty($colors)): ?>
<section class="color-grid bg-white">
    <div class="container">
        <div class="row g-3 g-md-4">
            <?php foreach ($colors as $c): ?>
            <div class="col-4 col-sm-3 col-md-2 color-swatch">
                <?php if ($c['image']): ?>
                    <img src="<?= htmlspecialchars($c['image']) ?>" class="swatch-img" alt="<?= htmlspecialchars($c['color_name']) ?>"
                         onclick="openSwatchLightbox(this.src, '<?= htmlspecialchars($c['color_name'], ENT_QUOTES) ?>')"
                         onerror="this.outerHTML='<div class=\'swatch-placeholder\'><?= htmlspecialchars($c['color_name']) ?></div>'">
                <?php else: ?>
                    <div class="swatch-placeholder"><?= htmlspecialchars($c['color_name']) ?></div>
                <?php endif; ?>
                <div class="color-name"><?= htmlspecialchars($c['color_name']) ?></div>
                <div class="color-code"><?= htmlspecialchars($c['color_code']) ?></div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- CTA -->
<section class="py-5 bg-section">
    <div class="container text-center">
        <h3 class="fw-bold mb-3">Tertarik dengan <?= htmlspecialchars($product['brand_name']) ?> <?= htmlspecialchars($product['name']) ?>?</h3>
        <p class="text-muted mb-4">Hubungi kami untuk informasi harga, sampel material, dan konsultasi lebih lanjut</p>
        <a href="contact.php" class="btn btn-dark px-4">Hubungi Kami</a>
        <a href="brand-product.php?brand=<?= $product['brand_id'] ?>" class="btn btn-outline-dark px-4 ms-2">Lihat Produk Lainnya</a>
    </div>
</section>

<!-- Swatch Lightbox -->
<div class="modal fade" id="swatchModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold" id="swatchTitle"></h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center p-4">
                <img id="swatchImg" src="" class="img-fluid rounded" style="max-height:400px;">
            </div>
        </div>
    </div>
</div>

<script>
function openSwatchLightbox(src, name) {
    document.getElementById('swatchImg').src = src;
    document.getElementById('swatchTitle').textContent = name;
    new bootstrap.Modal(document.getElementById('swatchModal')).show();
}
</script>

<?php include 'partials/footer.php'; ?>
