<?php
/**
 * 案例详情页模板
 * Template for displaying case content
 */

// 防止直接访问
if (!defined('ABSPATH')) {
    exit;
}

get_header();
?>

<div class="page-full-width">
    <div class="row">
        <div class="col-md-12">
            <?php echo do_shortcode('[nenghui_banner_title bg_image="https://nenghui.com/wp-content/uploads/2025/07/cases-bg.webp" title="cases" description="Nenghui Energy Cases" overlay_opacity="0.5"]'); ?>
            <div class="case-content-wrapper">
                <div class="container">
                    <?php if (have_posts()) : ?>
                        <?php while (have_posts()) : the_post(); ?>
                            <article id="post-<?php the_ID(); ?>" <?php post_class('case-single'); ?>>
                                <!-- 案例标题 -->
                                <header class="case-header">
                                    <div class="row">
                                        <div class="col-12">
                                            <h1 class="case-title"><?php the_title(); ?></h1>
                                            <!-- 发布日期 -->
                                            <div class="case-meta text-muted mb-4">
                                                <i class="fas fa-calendar-alt me-2"></i>
                                                <time datetime="<?php echo get_the_date('c'); ?>">
                                                    <?php echo date('F j, Y', get_the_time('U')); ?>
                                                </time>
                                            </div>
                                        </div>
                                    </div>
                                </header>
                                <!-- 案例内容 -->
                                <div class="case-content">
                                    <div class="row">
                                        <div class="col-lg-8 col-md-10 mx-auto">
                                            <div class="content-body">
                                                <?php the_content(); ?>
                                            </div>
                                            
                                            <!-- 分页导航（用于多页文章） -->
                                            <?php
                                            wp_link_pages(array(
                                                'before' => '<div class="page-links mt-4"><span class="page-links-title">页面：</span>',
                                                'after' => '</div>',
                                                'link_before' => '<span class="page-number">',
                                                'link_after' => '</span>',
                                            ));
                                            ?>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 案例导航 -->
                                <nav class="case-navigation mt-5 pt-4 border-top">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <?php
                                            $prev_post = get_previous_post(true, '', 'case_category');
                                            if ($prev_post) :
                                            ?>
                                            <div class="nav-previous">
                                                <a href="<?php echo get_permalink($prev_post->ID); ?>" class="btn btn-outline-primary">
                                                    <i class="fas fa-chevron-left me-2"></i>
                                                    Previous case  Study 
                                                </a>
                                                <div class="nav-title mt-2">
                                                    <small class="text-muted"><?php echo get_the_title($prev_post->ID); ?></small>
                                                </div>
                                            </div>
                                            <?php endif; ?>
                                        </div>
                                        <div class="col-md-6 text-md-end">
                                            <?php
                                            $next_post = get_next_post(true, '', 'case_category');
                                            if ($next_post) :
                                            ?>
                                            <div class="nav-next">
                                                <a href="<?php echo get_permalink($next_post->ID); ?>" class="btn btn-outline-primary">
                                                    Next Case Study 
                                                    <i class="fas fa-chevron-right ms-2"></i>
                                                </a>
                                                <div class="nav-title mt-2">
                                                    <small class="text-muted"><?php echo get_the_title($next_post->ID); ?></small>
                                                </div>
                                            </div>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                </nav>
                                
                                <!-- 相关案例 -->
                                <?php
                                // 获取相关案例（同分类）
                                $categories = get_the_terms(get_the_ID(), 'case_category');
                                if ($categories && !is_wp_error($categories)) :
                                    $category_ids = wp_list_pluck($categories, 'term_id');
                                    
                                    $related_args = array(
                                        'post_type' => 'cases',
                                        'post_status' => 'publish',
                                        'posts_per_page' => 3,
                                        'post__not_in' => array(get_the_ID()),
                                        'tax_query' => array(
                                            array(
                                                'taxonomy' => 'case_category',
                                                'field' => 'term_id',
                                                'terms' => $category_ids,
                                                'operator' => 'IN'
                                            )
                                        ),
                                        'orderby' => 'rand'
                                    );
                                    
                                    $related_query = new WP_Query($related_args);
                                    
                                    if ($related_query->have_posts()) :
                                ?>
                                <?php
                                    endif;
                                    wp_reset_postdata();
                                endif;
                                ?>
                                
                            </article>
                        <?php endwhile; ?>
                    <?php else : ?>
                        <div class="row">
                            <div class="col-12">
                                <div class="alert alert-warning text-center" role="alert">
                                    <h4>案例未找到</h4>
                                    <p>抱歉，您要查看的案例不存在或已被删除。</p>
                                    <a href="<?php echo home_url(); ?>" class="btn btn-primary">返回首页</a>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.case-content-wrapper {
    width: 100%;
    padding: 60px 0;
    background-color: #f8f9fa;
}

.case-content-wrapper .container {
    width: 80%;
    max-width: none;
    margin: 0 auto;
    padding: 0 20px;
}

.case-single {
    background: white;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.case-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    line-height: 1.2;
}

.case-meta {
    font-size: 1rem;
}

.content-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}

.content-body h2,
.content-body h3,
.content-body h4 {
    color: #2c3e50;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.content-body p {
    margin-bottom: 1.5rem;
}

.content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

.case-navigation {
    margin-top: 3rem;
}

.nav-title {
    max-width: 200px;
}

.related-cases {
    margin-top: 3rem;
}

.section-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2c3e50;
}

.related-case-card .card {
    border: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-case-card .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.card-img-top-wrapper {
    overflow: hidden;
    height: 200px;
}

.card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-img-top-wrapper:hover .card-img-top {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.page-links {
    text-align: center;
    padding: 20px 0;
}

.page-links .page-number {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.page-links .page-number:hover {
    background-color: #0069a0;
    color: white;
    border-color: #0069a0;
    transition: all 0.3s ease;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .case-content-wrapper .container {
        width: 100%;
        padding: 0 15px;
    }

    .case-single {
        padding: 20px;
    }
    
    .case-title {
        font-size: 2rem;
    }
    
    .content-body {
        font-size: 1rem;
    }
    
    .case-navigation .col-md-6:first-child {
        margin-bottom: 20px;
    }
}
</style>

<?php get_footer(); ?>