<?php
/**
 * The template for displaying single san_pham (product) posts
 *
 * @package Theme_An_Phat
 */

get_header(); ?>

<div class="page-hero text-center py-5">
    <div class="container">
        <div class="breadcrumbs mb-3 text-sm text-white-70">
            <a href="<?php echo esc_url( home_url('/') ); ?>" class="text-white-70 text-decoration-none hover-white"><?php esc_html_e( 'Trang chủ', 'theme-anphat' ); ?></a>
            <span class="mx-2">/</span>
            <a href="<?php echo esc_url( home_url('/san-pham/') ); ?>" class="text-white-70 text-decoration-none hover-white"><?php esc_html_e( 'Sản phẩm', 'theme-anphat' ); ?></a>
            <span class="mx-2">/</span>
            <span class="text-white"><?php the_title(); ?></span>
        </div>
        <h1 class="page-title font-heading fw-bold text-white mb-2"><?php the_title(); ?></h1>
        <?php
        $terms = get_the_terms( get_the_ID(), 'danh_muc_san_pham' );
        if ( $terms && ! is_wp_error( $terms ) ) :
            ?>
            <span class="badge bg-accent text-primary-dark fw-bold"><?php echo esc_html( $terms[0]->name ); ?></span>
        <?php endif; ?>
    </div>
</div>

<main id="primary" class="site-main py-6 bg-light text-dark">
    <div class="container">
        <?php while ( have_posts() ) : the_post(); ?>
        <div class="row g-5 mb-5">
            <!-- Left: Product Image -->
            <div class="col-lg-5 scroll-reveal">
                <div class="product-image-main bg-white rounded-4 shadow p-4 d-flex align-items-center justify-content-center border" style="min-height:360px;">
                    <?php if ( has_post_thumbnail() ) : ?>
                        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid max-h-100 rounded-3' ) ); ?>
                    <?php else : ?>
                        <div class="text-center text-muted">
                            <span class="d-block fs-1"><i class="fa-solid fa-capsules text-primary"></i></span>
                            <p class="mt-3 text-sm"><?php esc_html_e( 'Chưa có hình ảnh sản phẩm', 'theme-anphat' ); ?></p>
                        </div>
                    <?php endif; ?>
                </div>
                <!-- GSP Badge -->
                <div class="d-flex gap-3 mt-3">
                    <div class="d-flex align-items-center gap-2 bg-white rounded-3 px-3 py-2 shadow-sm border text-sm flex-grow-1 justify-content-center">
                        <i class="fa-solid fa-shield-halved text-primary"></i>
                        <span class="fw-semibold text-dark"><?php esc_html_e( 'Đạt chuẩn GSP', 'theme-anphat' ); ?></span>
                    </div>
                    <div class="d-flex align-items-center gap-2 bg-white rounded-3 px-3 py-2 shadow-sm border text-sm flex-grow-1 justify-content-center">
                        <i class="fa-solid fa-certificate text-accent"></i>
                        <span class="fw-semibold text-dark"><?php esc_html_e( 'Nhập khẩu chính hãng', 'theme-anphat' ); ?></span>
                    </div>
                </div>
            </div>

            <!-- Right: Product Details -->
            <div class="col-lg-7 scroll-reveal-right">
                <div class="bg-white rounded-4 shadow p-4 p-md-5 border h-100">
                    <h2 class="font-heading fw-bold text-primary mb-3 fs-4"><?php the_title(); ?></h2>

                    <?php if ( has_excerpt() ) : ?>
                        <p class="text-muted mb-4 fs-6"><?php the_excerpt(); ?></p>
                    <?php endif; ?>

                    <!-- Product Meta Table -->
                    <?php
                    $sp_terms    = get_the_terms( get_the_ID(), 'danh_muc_san_pham' );
                    $sp_cat_name = ( $sp_terms && ! is_wp_error( $sp_terms ) ) ? $sp_terms[0]->name : '—';
                    ?>
                    <table class="w-100 mb-4" style="border-collapse:collapse;">
                        <tbody>
                            <tr style="border-bottom:1px solid var(--border-color);">
                                <td style="padding:.625rem 1rem;width:160px;font-weight:700;color:var(--primary-color);font-family:var(--font-heading);font-size:.9rem;"><?php esc_html_e( 'Danh mục', 'theme-anphat' ); ?></td>
                                <td style="padding:.625rem 1rem;font-size:.9rem;"><?php echo esc_html( $sp_cat_name ); ?></td>
                            </tr>
                            <tr style="border-bottom:1px solid var(--border-color);">
                                <td style="padding:.625rem 1rem;font-weight:700;color:var(--primary-color);font-family:var(--font-heading);font-size:.9rem;"><?php esc_html_e( 'Nhà phân phối', 'theme-anphat' ); ?></td>
                                <td style="padding:.625rem 1rem;font-size:.9rem;"><?php esc_html_e( 'Công ty CP Dược phẩm An Phát', 'theme-anphat' ); ?></td>
                            </tr>
                            <tr style="border-bottom:1px solid var(--border-color);">
                                <td style="padding:.625rem 1rem;font-weight:700;color:var(--primary-color);font-family:var(--font-heading);font-size:.9rem;"><?php esc_html_e( 'Tiêu chuẩn kho', 'theme-anphat' ); ?></td>
                                <td style="padding:.625rem 1rem;font-size:.9rem;"><span class="badge bg-success"><?php esc_html_e( 'GSP & GDP đạt chuẩn', 'theme-anphat' ); ?></span></td>
                            </tr>
                            <tr>
                                <td style="padding:.625rem 1rem;font-weight:700;color:var(--primary-color);font-family:var(--font-heading);font-size:.9rem;"><?php esc_html_e( 'Giá bán', 'theme-anphat' ); ?></td>
                                <td style="padding:.625rem 1rem;font-size:.9rem;"><span class="text-accent fw-bold fs-5"><?php esc_html_e( 'Liên hệ báo giá', 'theme-anphat' ); ?></span></td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- CTA Buttons -->
                    <div class="d-flex flex-wrap gap-3">
                        <a href="<?php echo esc_url( home_url('/lien-he/') ); ?>" class="btn btn-primary px-4 py-3 fw-bold shadow">
                            <i class="fa-solid fa-phone me-2"></i><?php esc_html_e( 'Liên hệ nhận báo giá', 'theme-anphat' ); ?>
                        </a>
                        <a href="<?php echo esc_url( home_url('/san-pham/') ); ?>" class="btn btn-outline-primary px-4 py-3 fw-bold">
                            <i class="fa-solid fa-arrow-left me-2"></i><?php esc_html_e( 'Xem tất cả sản phẩm', 'theme-anphat' ); ?>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Product Detail Content -->
        <?php if ( get_the_content() ) : ?>
        <div class="row">
            <div class="col-lg-8 scroll-reveal">
                <div class="bg-white rounded-4 shadow p-4 p-md-5 border">
                    <h3 class="font-heading fw-bold text-primary mb-4 border-bottom pb-3">
                        <i class="fa-solid fa-circle-info me-2 text-accent"></i><?php esc_html_e( 'Thông tin chi tiết sản phẩm', 'theme-anphat' ); ?>
                    </h3>
                    <div class="entry-content">
                        <?php the_content(); ?>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 scroll-reveal-right">
                <!-- Related Products Sidebar -->
                <div class="sidebar-widget">
                    <h3><i class="fa-solid fa-boxes-stacked me-2"></i><?php esc_html_e( 'Sản phẩm liên quan', 'theme-anphat' ); ?></h3>
                    <?php
                    $related_args = array(
                        'post_type'      => 'san_pham',
                        'posts_per_page' => 4,
                        'post__not_in'   => array( get_the_ID() ),
                        'orderby'        => 'rand',
                    );
                    if ( $sp_terms && ! is_wp_error( $sp_terms ) ) {
                        $related_args['tax_query'] = array(
                            array(
                                'taxonomy' => 'danh_muc_san_pham',
                                'field'    => 'term_id',
                                'terms'    => $sp_terms[0]->term_id,
                            ),
                        );
                    }
                    $related_q = new WP_Query( $related_args );
                    if ( $related_q->have_posts() ) :
                        echo '<ul class="sidebar-recent-posts">';
                        while ( $related_q->have_posts() ) : $related_q->the_post();
                            echo '<li><a href="' . esc_url( get_permalink() ) . '"><i class="fa-solid fa-capsules text-accent me-2"></i>' . esc_html( get_the_title() ) . '</a></li>';
                        endwhile;
                        echo '</ul>';
                        wp_reset_postdata();
                    else :
                        echo '<p class="text-sm text-muted">' . esc_html__( 'Chưa có sản phẩm liên quan.', 'theme-anphat' ) . '</p>';
                    endif;
                    ?>
                </div>

                <!-- Contact Quick Box -->
                <div class="bg-primary rounded-4 p-4 text-white text-center">
                    <i class="fa-solid fa-headset fs-2 text-accent mb-3 d-block"></i>
                    <h4 class="font-heading fw-bold mb-2"><?php esc_html_e( 'Cần tư vấn thêm?', 'theme-anphat' ); ?></h4>
                    <p class="text-white-80 text-sm mb-3"><?php esc_html_e( 'Dược sĩ An Phát Pharma luôn sẵn sàng hỗ trợ bạn 24/7.', 'theme-anphat' ); ?></p>
                    <a href="tel:0282211855" class="btn btn-accent fw-bold w-100">
                        <i class="fa-solid fa-phone me-2"></i>028 2211 855
                    </a>
                </div>
            </div>
        </div>
        <?php endif; ?>

        <?php endwhile; ?>
    </div>
</main>

<?php get_footer(); ?>
