<?php
/**
 * 2026企业CMS - 产品详情页（优化版）
 * UI Designer: 像素君
 * 设计系统版本: 2.0
 */
$pageDescription = $product['summary'] ?: strip_tags(mb_substr($product['content'],0,200,'UTF-8'));
$pageKeywords = $product['seo_keywords'];
$breadcrumbItems = [
    ['title' => '产品中心', 'url' => cms_url('products')],
    ['title' => $product['title']]
];
?>
<?php echo breadcrumb($breadcrumbItems); ?>

<div class="main-content">
    <div class="container" style="display: flex; gap: var(--space-8);">
        <!-- 主内容区 -->
        <div style="flex: 1;">
            <div class="article-detail product-detail">
                <!-- 产品基本信息 -->
                <div class="product-info-section">
                    <div class="product-gallery">
                        <!-- 主图 -->
                        <div class="product-main-image">
                            <?php if ($product['cover_image']): ?>
                                <img src="<?php echo $product['cover_image']; ?>" 
                                     alt="<?php echo xss_clean($product['title']); ?>"
                                     id="mainImage">
                            <?php else: ?>
                                <div class="product-img-placeholder">📦</div>
                            <?php endif; ?>
                        </div>
                        
                        <!-- 图集缩略图 -->
                        <?php if ($product['gallery']): ?>
                            <?php $gallery = json_decode($product['gallery'], true); ?>
                            <div class="product-thumbnails">
                                <?php foreach ($gallery as $index => $img): ?>
                                    <div class="thumbnail <?php echo $index == 0 ? 'active' : ''; ?>" 
                                         onclick="changeMainImage('<?php echo $img; ?>')">
                                        <img src="<?php echo $img; ?>" 
                                             alt="<?php echo xss_clean($product['title']); ?>">
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                    
                    <div class="product-info">
                        <h1 class="product-title"><?php echo xss_clean($product['title']); ?></h1>
                        
                        <?php if ($product['price']): ?>
                            <div class="product-price-section">
                                <span class="product-current-price">¥<?php echo $product['price']; ?></span>
                                <?php if ($product['original_price'] && $product['original_price'] > $product['price']): ?>
                                    <span class="product-original-price">¥<?php echo $product['original_price']; ?></span>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>
                        
                        <div class="product-specs">
                            <?php if ($product['sku']): ?>
                                <div class="spec-item">
                                    <span class="spec-label">商品编号</span>
                                    <span class="spec-value"><?php echo xss_clean($product['sku']); ?></span>
                                </div>
                            <?php endif; ?>
                            
                            <?php if ($product['stock'] !== null): ?>
                                <div class="spec-item">
                                    <span class="spec-label">库存</span>
                                    <span class="spec-value">
                                        <?php echo $product['stock']; ?> <?php echo $product['unit'] ?: '件'; ?>
                                    </span>
                                </div>
                            <?php endif; ?>
                            
                            <div class="spec-item">
                                <span class="spec-label">销量</span>
                                <span class="spec-value"><?php echo $product['sales']; ?></span>
                            </div>
                            
                            <div class="spec-item">
                                <span class="spec-label">浏览量</span>
                                <span class="spec-value"><?php echo $product['views']; ?></span>
                            </div>
                        </div>
                        
                        <div class="product-actions">
                            <button class="btn btn-primary btn-lg" onclick="inquireNow()">
                                立即咨询
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                                    <path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10Z" stroke="currentColor" stroke-width="1.5"/>
                                    <path d="M7 10L9 12L13 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </button>
                            <button class="btn btn-secondary btn-lg" onclick="toggleFavorite(<?php echo $product['id']; ?>)">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" id="favoriteIcon">
                                    <path d="M17.3666 2.77593C16.2695 1.67881 14.6705 1.78551 13.6185 2.83723L10.4583 5.99752L7.29824 2.83723C6.24624 1.78551 4.64726 1.67881 3.54994 2.77593C2.19694 4.12893 2.19694 6.29917 3.54994 7.65217L10.4583 14.5605L17.3666 7.65217C18.7196 6.29917 18.7196 4.12893 17.3666 2.77593Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                收藏
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 产品详情 -->
                <div class="product-detail-section">
                    <h2 class="section-title text-left">产品详情</h2>
                    <div class="content">
                        <?php echo $product['content']; ?>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="widget">
                <h3 class="widget-title">热门产品</h3>
                <ul class="sidebar-list">
                    <?php $hotProducts = db_query("SELECT `title`,`slug` FROM `products` WHERE `status`=1 AND `is_hot`=1 ORDER BY `sort_order` ASC LIMIT 5"); ?>
                    <?php foreach ($hotProducts as $hp): ?>
                        <li>
                            <a href="<?php echo cms_url('product', ['slug' => $hp['slug']]); ?>">
                                <?php echo xss_clean($hp['title']); ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
            
            <div class="widget">
                <h3 class="widget-title">推荐产品</h3>
                <ul class="sidebar-list">
                    <?php $recProducts = db_query("SELECT `title`,`slug` FROM `products` WHERE `status`=1 AND `is_recommend`=1 LIMIT 5"); ?>
                    <?php foreach ($recProducts as $rp): ?>
                        <li>
                            <a href="<?php echo cms_url('product', ['slug' => $rp['slug']]); ?>">
                                <?php echo xss_clean($rp['title']); ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </aside>
    </div>
</div>

<!-- 产品详情页额外样式 -->
<style>
.product-detail {
    padding: var(--space-8);
}

.product-info-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    margin-bottom: var(--space-10);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-gray-200);
}

.product-gallery {
    position: sticky;
    top: 20px;
}

.product-main-image {
    width: 100%;
    height: 400px;
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.product-main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-img-placeholder {
    font-size: 96px;
    color: var(--color-gray-300);
}

.product-thumbnails {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
}

.thumbnail {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.thumbnail:hover,
.thumbnail.active {
    border-color: var(--color-secondary);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.product-title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-gray-900);
    line-height: 1.3;
}

.product-price-section {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.product-current-price {
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-error);
}

.product-original-price {
    font-size: var(--text-lg);
    color: var(--color-gray-400);
    text-decoration: line-through;
}

.product-specs {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
}

.spec-label {
    color: var(--color-gray-500);
}

.spec-value {
    color: var(--color-gray-700);
    font-weight: 500;
}

.product-actions {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.product-detail-section {
    margin-top: var(--space-8);
}

.sidebar-list {
    list-style: none;
}

.sidebar-list li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.sidebar-list li:last-child {
    border-bottom: none;
}

.sidebar-list li a {
    color: var(--color-gray-600);
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    display: block;
}

.sidebar-list li a:hover {
    color: var(--color-secondary);
    padding-left: var(--space-2);
}

@media (max-width: 1024px) {
    .container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .product-info-section {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .product-gallery {
        position: static;
    }
    
    .product-main-image {
        height: 300px;
    }
    
    .product-title {
        font-size: var(--text-2xl);
    }
    
    .product-actions {
        flex-direction: column;
    }
}
</style>

<!-- 产品详情页JavaScript -->
<script>
function changeMainImage(src) {
    document.getElementById('mainImage').src = src;
    
    // 更新缩略图active状态
    document.querySelectorAll('.thumbnail').forEach(function(thumb) {
        thumb.classList.remove('active');
    });
    event.target.closest('.thumbnail').classList.add('active');
}

function inquireNow() {
    // 滚动到联系我们页面或打开咨询弹窗
    window.location.href = '<?php echo cms_url("contact"); ?>';
}

function toggleFavorite(productId) {
    // 收藏功能
    const icon = document.getElementById('favoriteIcon');
    const isFavorited = icon.getAttribute('data-favorited') === 'true';
    
    if (isFavorited) {
        icon.innerHTML = '<path d="M17.3666 2.77593C16.2695 1.67881 14.6705 1.78551 13.6185 2.83723L10.4583 5.99752L7.29824 2.83723C6.24624 1.78551 4.64726 1.67881 3.54994 2.77593C2.19694 4.12893 2.19694 6.29917 3.54994 7.65217L10.4583 14.5605L17.3666 7.65217C18.7196 6.29917 18.7196 4.12893 17.3666 2.77593Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>';
        icon.setAttribute('data-favorited', 'false');
    } else {
        icon.innerHTML = '<path d="M17.3666 2.77593C16.2695 1.67881 14.6705 1.78551 13.6185 2.83723L10.4583 5.99752L7.29824 2.83723C6.24624 1.78551 4.64726 1.67881 3.54994 2.77593C2.19694 4.12893 2.19694 6.29917 3.54994 7.65217L10.4583 14.5605L17.3666 7.65217C18.7196 6.29917 18.7196 4.12893 17.3666 2.77593Z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>';
        icon.setAttribute('data-favorited', 'true');
    }
}
</script>
