<?php get_header(); ?>

<section class="page-wrap">
    <div class="container-fuild">
        <div class="box__topBanner">
            <div style="background-image: url(<?php the_post_thumbnail_url(); ?>)" class="singleBanner box box--bg"></div>
            <div class="container">
                <div class="box__title__single">
                    <?php the_title(); ?>
                </div>
            </div>
        </div>
        <div class="container py-5">
            <div class="row">
                <div class="col-12 mb-5">
                    <div class="mb-4 box__metadata">
                        Published On <span><?php echo get_the_date( 'j M Y' ); ?></span>
                    </div>
                    <div class="box__share">
                        <div class="talkbubble">
                            <span><i class="fas fa-share-alt"></i> Share</span>
                        </div>
                        <div class="box__social__media">
                        <a class="fb-share" href="https://www.facebook.com/sharer.php?u=<?php echo get_the_permalink() ?>" target="_blank">
                            <span><i class="fab fa-facebook-f"></i> Facebook</span>
                        </a>
                        <a class="fb-share" href="https://twitter.com/intent/tweet?text=<?php echo get_the_permalink() ?>" target="_blank">
                            <span><i class="fab fa-twitter"></i> Twitter</span> 
                        </a>
                        <a class="fb-share" href="https://api.whatsapp.com/send?text=<?php echo get_the_title() ?> %0A%0A <?php echo get_the_permalink() ?>" target="_blank">
                            <span><i class="fab fa-whatsapp"></i> Whatsapp</span>
                        </a>
                        <a href="mailto:?subject=<?php echo get_the_title() ?>&amp;body=<?php echo get_the_permalink() ?>" target="_blank">
                            <span><i class="far fa-envelope"></i> Email</span>
                        </a>
                        </div>
                    </div>
                    <div class="box__singleContent mt-5">
                        <?php the_content(); ?>
                        <?php the_tags(); ?>
                    </div>
                </div>
                <div class="col-12">
                    <h3>MORE ARTICLE</h3>

                    <?php 
                    $args = array(
                        'post_type' => 'post',
                        'post_status' => 'publish',
                        'orderby' => 'rand',
                        'order' => 'DESC',
                        'posts_per_page' => 3
                    );

                    $my_random_post = new WP_Query ( $args );
                    ?>
                    <div class="row mt-4">
                    <?php
                    if($my_random_post->have_posts()){
                        while ( $my_random_post->have_posts () ) {
                            $my_random_post->the_post ();
                    ?>
                        <div class="col-12 col-lg-4 mb-lg-0 mb-3">
                        <?php echo '<a href="'.get_the_permalink().'">'; ?>
                            <div class="flipCard">
                                <div class="box__recent">
                                    <div class="box_recent_front">
                                        <div style="background-image: url(<?php the_post_thumbnail_url(); ?>)" class="box box--bg rocket-lazyload"></div>
                                        <span>                      
                                            <?php $categories = get_the_category($post->ID); 
                                                foreach($categories as $category) 
                                                {echo $category->cat_name . ' ';} 
                                            ?>
                                        </span>
                                    </div>
                                    <div class="box_recent_back">
                                        <div class="h-100 d-flex justify-content-center align-items-center">
                                            <span><?php echo get_the_title(); ?></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php echo '</a>'; ?>
                        </div>
                    <?php }} ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<?php get_footer(); ?>
