<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package BBase_Code
 */

get_header();

if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb( '<div class="container" id="breadcrumbs">','</div>' );
}
?>

<div class="wrap-single-product">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="wrap-slider">
                    <?php $images = get_field( 'gallery' );
                    if( $images ): ?>
                        <div class="slider slider-for">
                            <?php 
                            foreach( $images as $image ): ?>
                                <div class="item">
                                    <?php if( $image['type'] == 'video' ): ?>
                                        <video src="<?php echo esc_url( $image['url'] ); ?>" controls></video>
                                    <?php elseif( $image['description'] ): ?>
                                        <?php echo wp_oembed_get( $image['description'], array( 'height' => 500 ) ); ?>
                                    <?php else: ?>
                                        <img src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
                                    <?php endif; ?>
                                </div>
                            <?php 
                            endforeach; ?>
                        </div>

                        <div class="slider slider-nav">
                            <?php foreach( $images as $image ): ?>                              
                                <div class="item <?php if( $image['description'] ) echo 'is-video'; ?>">
                                    <?php if( $image['type'] == 'video' ): ?>
                                        <video src="<?php echo esc_url( $image['url'] ); ?>"></video>
                                    <?php else: ?>  
                                        <img src="<?php echo esc_url( $image['sizes']['thumbnail'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
                                    <?php endif; ?>
                                </div>                                    
                            <?php endforeach; ?>
                        </div>
                    <?php endif; ?>
                </div>
            </div>

            <div class="col-md-6">
                <div class="wrap-info">
                    <h1 class="title"><?php the_title() ?></h1>

                    <?php product_price( get_field( 'price' ), get_field( 'sale_price' ), 'single' ) ?>

                    <div class="shipping"><strong><?php _e( 'Vận Chuyển:', 'tbang_text' ) ?></strong> <?php the_field( 'shiping' ) ?></div>
                    <div class="short-des">
                        <h4><?php _e( 'Đặc điểm sản phẩm:', 'tbang_text' ) ?></h4>
                        <div class="text"><?php the_field( 'short_description' ) ?></div>
                    </div>

                    <a href="#" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="btn-buy"><?php _e( 'Mua ngay', 'tbang_text' ) ?></a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="wrap-product-info">
    <div class="container">
        <div class="row">
            <div class="col-md-8">

                <?php if( have_rows('specifications') ): ?>
                <div class="specifications product-box">
                    <h4 class="subtitle"><?php _e( 'Thông số kỹ thuật', 'tbang_text' ) ?></h4>
                    
                    <table>
                        <?php while( have_rows('specifications') ) : the_row(); ?>
                        <tr>
                            <td><?php the_sub_field( 'name' ) ?></td>
                            <td><?php the_sub_field( 'label' ) ?></td>
                        </tr>
                        <?php endwhile; ?>
                    </table>
                </div>
                <?php endif ?>
                
                <div class="description product-box">
                    <?php the_field( 'description' ) ?>
                </div>

                <div class="form-order product-box">
                    <h4 class="subtitle"><?php _e( 'Thông tin nhận hàng', 'tbang_text' ) ?></h4>
                    <?php echo do_shortcode( '[contact-form-7 id="153" title="Form Order"]' ) ?>
                </div>
            </div>

            <div class="col-md-4 sidebar-single-product">
                <div class="product-box">
                    <h4 class="subtitle"><?php _e( 'Sản phẩm bán chạy', 'tbang_text' ) ?></h4>
                    
                    <?php 
                    $args = array(
                        'post_type'              => array( 'product' ),
                        'posts_per_page'         => '3',
                    );

                    $query = new WP_Query( $args );
                    if ( $query->have_posts() ) {
                        echo '<div class="best-seller">';
                        while ( $query->have_posts() ) { $query->the_post(); ?>
                        
                            <div class="product-item">
                                <div class="wrap-img">
                                    <a href="<?php the_permalink() ?>">
                                        <img src="<?php echo custom_image_size( get_the_ID(), 390, 440, true ) ?>" alt="<?php the_title_attribute( ) ?>">
                                    </a>
                                </div>
                                <div class="wrap-info">
                                    <h3 class="title"><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h3>

                                    <?php product_price( get_field( 'price' ), get_field( 'sale_price' ), 'related' ) ?>
                                    <a href="<?php the_permalink() ?>" class="btn-buy"><?php _e( 'Mua ngay', 'tbang_text' ) ?></a>
                                </div>
                            </div>
                    <?php 
                        }
                        echo '</div>';
                    }

                    wp_reset_postdata();
                    ?>                                            
                </div>
            </div>
        </div>            

        <?php if( have_rows('faqs') ): ?>
            <div class="faqs product-box">
                <h4 class="subtitle"><?php _e( 'Câu hỏi thường gặp', 'tbang_text' ) ?></h4>

                <div class="accordion" id="accordionExample">
                    <?php while( have_rows('faqs') ) : the_row(); ?>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="heading-<?php echo get_row_index(); ?>">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-<?php echo get_row_index(); ?>" aria-expanded="true" aria-controls="collapse-<?php echo get_row_index(); ?>">
                                <?php the_sub_field( 'question' ) ?>
                            </button>
                        </h2>
                        <div id="collapse-<?php echo get_row_index(); ?>" class="accordion-collapse collapse" aria-labelledby="heading-<?php echo get_row_index(); ?>" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <?php the_sub_field( 'answer' ) ?>
                            </div>
                        </div>
                    </div>
                    <?php endwhile ?>

                </div>                    
            </div>
        <?php endif; ?>
        
        <?php if( comments_open() ): ?>
        <div class="comment-box product-box">
            <h4 class="subtitle"><?php _e( 'Hỏi và Đáp về sản phẩm', 'tbang_text' ) ?></h4>

            <?php comments_template() ?>
        </div>
        <?php endif; ?>

        <div class="related-product product-box">
            <h3 class="title"><?php _e( 'Sản phẩm tương tự', 'tbang_text' ) ?></h3>
            <div class="product-list">
            <?php 
                $args = array(
                    'post_type'              => array( 'product' ),
                    'posts_per_page'         => '4',
                    'orderby'                => 'rand',
                );

                $wp_query = new WP_Query( $args );
                if ( $wp_query->have_posts() ) {
                    while ( $wp_query->have_posts() ) { $wp_query->the_post();
                        get_template_part( 'template-parts/content', 'product' );
                    }
                }
                wp_reset_postdata();
                wp_reset_query();
            ?>
            </div>
        </div>

        <?php $products = isset( $_COOKIE['products'] ) ?  $_COOKIE['products'] : '';
        if( $products ): ?>
        <div class="related-product product-box">
            <h3 class="title"><?php _e( 'Sản phẩm bạn vừa xem', 'tbang_text' ) ?></h3>
            <div class="product-list">
            <?php 
                $args = array(
                    'post_type'              => array( 'product' ),
                    'posts_per_page'         => '4',
                    'post__in'               => json_decode( $products )
                );

                $wp_query = new WP_Query( $args );
                if ( $wp_query->have_posts() ) {
                    while ( $wp_query->have_posts() ) { $wp_query->the_post();
                        get_template_part( 'template-parts/content', 'product' );
                    }
                }

                wp_reset_postdata();
                wp_reset_query();
            ?>
            </div>
        </div>
        <?php endif; ?>
    </div> 
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog product-popup modal-dialog-centered">
        <div class="modal-content">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            
            <div class="form-order product-box">
                <h4 class="subtitle"><?php _e( 'Thông tin nhận hàng', 'tbang_text' ) ?></h4>
                <?php echo do_shortcode( '[contact-form-7 id="153" title="Form Order"]' ) ?>
            </div>
        </div>
    </div>
</div>

<div id="mobile-float" class="fixed-bottom">
    <div class="left">
        <div class="price-del">
            <del><?php echo format_money( get_field( 'price' ) ) ?></del>
            <ins><?php echo format_money( get_field( 'sale_price' ) ) ?></ins>
        </div>
    </div>

    <div class="right">
        <div class="img">
            <img src="<?php echo get_stylesheet_directory_uri() . '/assets/images/freeship-icon.svg' ?>" />
        </div>

        <div class="wrap-button">
            <a data-bs-toggle="modal" data-bs-target="#staticBackdrop" href="#">NHẬN ƯU ĐÃI NGAY</a>
        </div>
    </div>
</div>

<?php
get_footer();
