<?php 
/**
 * Template part for displaying Featured Classes Section
 *
 * @package Chemical Laboratory
 */

$chemical_laboratory_classes      = get_theme_mod( 'chemical_laboratory_classes_setting', false );
$chemical_laboratory_service_title = get_theme_mod( 'chemical_laboratory_service_title' );
$chemical_laboratory_service_text  = get_theme_mod( 'chemical_laboratory_service_text' );
?>

<?php if ( $chemical_laboratory_classes ) : ?>
    <div class="our-classes">
        <div class="container">
            <div class="side-border">
                <?php if ( $chemical_laboratory_service_title ) : ?>
                    <h3><?php echo esc_html( $chemical_laboratory_service_title ); ?></h3>
                <?php endif; ?>

                <?php if ( $chemical_laboratory_service_text ) : ?>
                    <p class="title-text"><?php echo esc_html( $chemical_laboratory_service_text ); ?></p>
                <?php endif; ?>
            </div>

            <div class="owl-carousel">
                <?php 
                    $chemical_laboratory_catergory_name = get_theme_mod( 'chemical_laboratory_blog_args_' );
                    $args = array(
                        'post_type'           => 'post',
                        'category_name'       => $chemical_laboratory_catergory_name,
                        'orderby'             => 'post__in',
                        'ignore_sticky_posts' => true,
                    );

                    $loop = new WP_Query( $args );
                    if ( $loop->have_posts() ) :
                        $chemical_laboratory_i = 1;
                        while ( $loop->have_posts() ) : $loop->the_post(); ?>
                            <div class="box wow zoomIn" data-wow-duration="2s">
                                
                                <!-- Post Thumbnail -->
                                <div class="image-blog">
                                    <?php 
                                    if ( has_post_thumbnail() ) {
                                        the_post_thumbnail( 'medium' ); // you can use 'thumbnail', 'medium', 'large' or custom size
                                    } else {
                                        // fallback image
                                        ?>
                                        <img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/images/slide.png' ); ?>" alt="<?php the_title_attribute(); ?>">
                                    <?php } ?>
                                </div>
                                
                                <div class="box-content mt-3">
                                    <?php if ( get_theme_mod( 'chemical_laboratory_category_icon' . $chemical_laboratory_i ) != '' ) : ?>
                                        <span class="post-icon">
                                            <i class="<?php echo esc_attr( get_theme_mod( 'chemical_laboratory_category_icon' . $chemical_laboratory_i ) ); ?>"></i>
                                        </span>
                                    <?php endif; ?>

                                    <h4 class="title mb-2 mt-3">
                                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                    </h4>
                                    <p class="mb-0"><?php echo wp_trim_words( get_the_content(), 15 ); ?></p>
                                    <p class="sign-in-area mt-3">
                                        <a href="<?php echo esc_url( get_permalink( $post->ID ) ); ?>">
                                            <?php esc_html_e('Read More', 'chemical-laboratory'); ?>
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </p>
                                </div>
                            </div>
                        <?php 
                        $chemical_laboratory_i++;
                        endwhile;
                    endif;
                ?>
            </div>
        </div>
    </div>
<?php endif; ?>