40087-vm/product.php

<?php
declare(strict_types=1);

require_once __DIR__ . '/store.php';

$slug = (string)($_GET['slug'] ?? '');
$product = store_product($slug);

if (!$product) {
    http_response_code(404);
    store_page_start('Produk tidak ditemukan', 'Produk yang diminta tidak tersedia.', ['noindex' => true]);
    ?>
    <section class="empty-state-card text-center mx-auto">
        <span class="eyebrow">404</span>
        <h1 class="section-title">Produk tidak ditemukan.</h1>
        <p class="section-copy">Slug produk tidak valid atau item sudah dihapus dari katalog demo.</p>
        <div class="d-flex justify-content-center gap-2 mt-3">
            <a class="btn btn-dark" href="index.php#catalog">Kembali ke katalog</a>
            <a class="btn btn-outline-secondary" href="cart.php">Lihat keranjang</a>
        </div>
    </section>
    <?php
    store_page_end();
    exit;
}

$relatedProducts = store_related_products($product['slug'], $product['category']);
$currentUser = store_current_user();

store_page_start($product['name'], $product['short_description']);
?>
<nav aria-label="Breadcrumb" class="mb-4">
    <ol class="breadcrumb small mb-0">
        <li class="breadcrumb-item"><a href="index.php">Katalog</a></li>
        <li class="breadcrumb-item active" aria-current="page"><?= h($product['name']) ?></li>
    </ol>
</nav>

<section class="section-block pt-0">
    <div class="row g-4 align-items-start">
        <div class="col-lg-6">
            <div class="surface-panel p-4 p-lg-5 h-100">
                <div class="product-visual product-visual--<?= h($product['tone']) ?> product-visual--large mb-4">
                    <span class="product-visual__meta"><?= h($product['category_label']) ?></span>
                    <strong class="product-visual__code"><?= h($product['visual_code']) ?></strong>
                    <span class="product-visual__name"><?= h($product['name']) ?></span>
                </div>
                <div class="row g-3">
                    <?php foreach ($product['highlights'] as $highlight): ?>
                        <div class="col-sm-4">
                            <div class="metric-card h-100">
                                <div class="metric-value metric-value--small"><?= h($highlight) ?></div>
                                <div class="metric-label">informasi cepat</div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="surface-panel p-4 p-lg-5 h-100">
                <span class="eyebrow"><?= h($product['category_label']) ?></span>
                <h1 class="section-title mb-2"><?= h($product['name']) ?></h1>
                <p class="lead-copy mb-3"><?= h($product['description']) ?></p>
                <div class="price-block mb-4">
                    <div class="price-block__amount"><?= h(store_money((float)$product['price'])) ?></div>
                    <div class="price-block__caption">per <?= h($product['unit']) ?></div>
                </div>

                <div class="detail-grid mb-4">
                    <div>
                        <span class="detail-grid__label">Lead time</span>
                        <strong><?= h($product['lead_time']) ?></strong>
                    </div>
                    <div>
                        <span class="detail-grid__label">Porsi</span>
                        <strong><?= h($product['serves']) ?></strong>
                    </div>
                    <div>
                        <span class="detail-grid__label">Kategori</span>
                        <strong><?= h($product['category_label']) ?></strong>
                    </div>
                </div>

                <div class="info-box mb-4">
                    <div class="card-kicker">Alur user</div>
                    <p class="mb-0">Halaman detail ini dapat diakses semua pengunjung. Saat tombol keranjang dipilih, sistem akan mengecek login terlebih dahulu sebelum produk dimasukkan ke keranjang.</p>
                </div>

                <form action="cart_action.php" method="post" class="purchase-box" data-auto-disable>
                    <input type="hidden" name="action" value="add">
                    <input type="hidden" name="slug" value="<?= h($product['slug']) ?>">
                    <input type="hidden" name="redirect_to" value="product.php?slug=<?= h($product['slug']) ?>">
                    <label class="form-label" for="quantity">Jumlah</label>
                    <div class="quantity-field mb-3">
                        <button type="button" class="btn btn-outline-secondary" data-qty-target="product-qty" data-qty-step="-1" aria-label="Kurangi jumlah">−</button>
                        <input id="product-qty" class="form-control text-center" type="number" name="quantity" min="1" max="20" value="1">
                        <button type="button" class="btn btn-outline-secondary" data-qty-target="product-qty" data-qty-step="1" aria-label="Tambah jumlah">+</button>
                    </div>
                    <div class="d-grid gap-2 d-sm-flex">
                        <button class="btn btn-dark btn-lg flex-sm-fill" type="submit">Tambah ke keranjang</button>
                        <a class="btn btn-outline-secondary btn-lg flex-sm-fill" href="cart.php">Lihat keranjang</a>
                    </div>
                    <?php if (!$currentUser): ?>
                        <p class="text-muted small mt-3 mb-0">Login wajib sebelum produk masuk ke keranjang. Setelah login berhasil, item ini akan langsung ditambahkan dan Anda kembali ke halaman detail produk.</p>
                    <?php else: ?>
                        <p class="text-muted small mt-3 mb-0">Anda sudah login, jadi produk ini bisa langsung dimasukkan ke keranjang belanja.</p>
                    <?php endif; ?>
                </form>

                <div class="info-box mt-4">
                    <div class="card-kicker">Catatan checkout</div>
                    <p class="mb-0">Saat checkout, pelanggan akan memilih metode pembayaran dan sistem langsung membuat order number untuk pelacakan status.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-block pt-0">
    <div class="section-heading mb-4">
        <span class="eyebrow">Produk terkait</span>
        <h2 class="section-title">Tambahkan item lain untuk melengkapi pesanan.</h2>
    </div>
    <div class="row g-4">
        <?php foreach ($relatedProducts as $related): ?>
            <div class="col-md-4">
                <article class="product-card h-100">
                    <div class="product-visual product-visual--<?= h($related['tone']) ?>">
                        <span class="product-visual__meta"><?= h($related['category_label']) ?></span>
                        <strong class="product-visual__code"><?= h($related['visual_code']) ?></strong>
                        <span class="product-visual__name"><?= h($related['name']) ?></span>
                    </div>
                    <div class="product-card__body">
                        <div class="d-flex align-items-start justify-content-between gap-3 mb-2">
                            <h3 class="product-card__title"><?= h($related['name']) ?></h3>
                            <span class="price-tag"><?= h(store_money((float)$related['price'])) ?></span>
                        </div>
                        <p class="product-card__copy"><?= h($related['short_description']) ?></p>
                        <a class="btn btn-outline-secondary w-100 mt-auto" href="product.php?slug=<?= h($related['slug']) ?>">Buka detail</a>
                    </div>
                </article>
            </div>
        <?php endforeach; ?>
    </div>
</section>
<?php store_page_end(); ?>