<?php
$this->load->view("top");
$popular = $this->db->query("SELECT * FROM wps_blog WHERE article_id ORDER BY rand() LIMIT 20")->result_array();
?>
 <script type="text/javascript" src="https://platform-api.sharethis.com/js/sharethis.js#property=5feda5b40b50bc00198f4285&product=inline-share-buttons" async="async"></script>
<section class="banner_category" style="background-image: url('<?php echo theme_url();?>images/listing/inner-banner.jpg');">
        <div class="container">
<!--            <h2 class="banner_subtitle">check out over <span>200+</span></h2>-->
            <h1 class="banner_title"><?php echo $res['article_title']; ?></h1>
        </div>
    </section>
    <div class="page_breadcrumbs">
        <div class="container">
            <ul>
                <li><a href="<?php echo site_url(); ?>" title="Home">Home</a></li>
      <li><a href="<?php echo site_url(); ?>blog" title="Blog">Blog</a></li>
      <li><?php echo $res['article_title']; ?></li>
            </ul>
        </div>
    </div>

    <section class="blog_page">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 col-md-9">
                  
                   <h2 class="title_details"><?php echo $res['article_title']; ?></h2>
                   <div class="blog_meta_info">
                       <ul>
                           <li class="post-author">By <a href="javascript:void(0);" title="<?php echo $res['blog_author']; ?>"><?php echo $res['blog_author']; ?></a>
                           </li>
                           <li class="post-date"><?php echo getDateFormat($res['post_date'], 3); ?></li>
                       </ul>
                       <div class="sharethis-inline-share-buttons"></div>
                       <div class="blog_details">
                       <div class="news_details_image">
                           <img src="<?php echo get_image_with_name($res['article_title'],'blog', $res['article_image'], '850', '850', 'R'); ?>" alt="<?php echo $res['article_title']; ?>" title="<?php echo $res['article_title']; ?>">
                       </div>                       
                       <?php echo $res['article_desc']; ?>  
                   </div>
                    </div>
                    
           
                    
   
                    
<!-- <div class="comments_area">
    <h3 class="comments_title">3 Comments:</h3>
    <ol class="comment_list">
        <li class="comment">
            <article class="comment_body">
                <div class="comment_meta">
                    <div class="comment_author">
                        <img src="designer/images/user.svg" class="avatar" alt="image">
                        <b class="fn">John Jones</b>
                    </div>
                    <div class="comment_metadata">
                        <a href="index.html">
                            <time>Nov 25, 2021 at 10:59 am</time>
                        </a>
                    </div>
                </div>
                <div class="comment_content">
                    <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
                </div>
                <div class="reply">
                    <a href="#" class="comment_reply_link hover_btn">Reply</a>
                </div>
            </article>
            <ol class="children">
                <li class="comment">
                    <article class="comment_body">
                        <div class="comment_meta">
                            <div class="comment_author">
                                <img src="designer/images/user.svg" class="avatar" alt="image">
                                <b class="fn">Steven Smith</b>
                            </div>
                            <div class="comment_metadata">
                                <a href="index.html">
                                    <time>Nov 25, 2021 at 10:59 am</time>
                                </a>
                            </div>
                        </div>
                        <div class="comment_content">
                            <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
                        </div>
                        <div class="reply">
                            <a href="#" class="comment_reply_link hover_btn">Reply</a>
                        </div>
                    </article>
                </li>
            </ol>
            <article class="comment_body">
                <div class="comment_meta">
                    <div class="comment_author">
                        <img src="designer/images/user.svg" class="avatar" alt="image">
                        <b class="fn">Sarah Taylor</b>
                    </div>
                    <div class="comment_metadata">
                        <a href="index.html">
                            <time>Nov 25, 2021 at 10:59 am</time>
                        </a>
                    </div>
                </div>
                <div class="comment_content">
                    <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
                </div>
                <div class="reply">
                    <a href="#" class="comment_reply_link hover_btn">Reply</a>
                </div>
            </article>
        </li>
    </ol>
    <div class="comment_respond">
        <h3 class="comment_reply_title">Leave a Reply</h3>
        <form class="comment_form">
            <p class="comment_notes">
                <span id="email-notes">Your email address will not be published.</span>
                Required fields are marked
                <span class="required">*</span>
            </p>
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="form-group">
                        <label class="input_label">
                            <input class="form_input" name="name" type="text" placeholder="Full Name *" value="" required="">
                        </label>
                    </div>
                </div>
                
                <div class="col-lg-6 col-md-6">
                     <div class="form-group">
                        <label class="input_label">
                            <input class="form_input" name="email" type="email" placeholder="Email ID *" value="" required="">
                        </label>
                    </div>
                </div>
                
                <div class="col-lg-12 col-md-12">

                    <div class="form-group">
                        <label class="input_label">
                       <textarea class="form_input" name="comment" cols="45" rows="5" placeholder="Your Comment" maxlength="65525" required="required"></textarea>
                   </label>
                    </div>
                </div>
                
                
                
            </div>
         <label class="cookies"><input type="checkbox" value="yes" name="cookies"> Save my name, email, and website in this browser for the next time I comment.</label>
        <button class="contact_btn hover_btn" type="submit">Post A Comment</button>
          
        </form>
    </div>
</div> -->
              
               
               
                </div>
                <div class="col-md-3">
                    <div class="left_sidebar">
                        <div class="title_2">Popular Post</div>
                        <?php
              foreach ($popular as $popular) {
                ?>
                 <div class="right_news">
                    <a href="<?php echo site_url($popular['friendly_url']); ?>">
                      <div class="image">
                        <img src="<?php echo get_image_with_name($popular['article_title'], 'blog', $popular['article_image'], '306', '186', 'R'); ?>" alt="<?php echo $popular['article_title']; ?>" title="<?php echo $popular['article_title']; ?>">
                      </div>
                    </a>
                    <h4><a href="<?php echo site_url($popular['friendly_url']); ?>"><?php echo $popular['article_title']; ?></a></h4>
                  </div>
                <?php } ?>  

                    </div>

                </div>
           
            </div>

            </div>
    </section>

  
<?php $this->load->view("bottom"); ?>
<script type="text/javascript">
   window.onload = setShareLinks;

    function setShareLinks() {
        var pageUrl = encodeURIComponent(document.URL);
        var description = document.querySelector("meta[name='description']").getAttribute("content");
        var description = encodeURIComponent(description);

        elements = document.querySelectorAll(".social-share.facebook");
        Array.prototype.forEach.call(elements, function(el) {
            el.addEventListener("click", function() {
                url = "https://www.facebook.com/sharer.php?u=" + pageUrl;
                socialWindow(url);
            });
        });

        elements = document.querySelectorAll(".social-share.twitter");
        Array.prototype.forEach.call(elements, function(el) {
            el.addEventListener("click", function() {
                url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + description;
                socialWindow(url);
            });
        });

        elements = document.querySelectorAll(".social-share.linkedin");
        Array.prototype.forEach.call(elements, function(el) {
            el.addEventListener("click", function() {
                url = "https://www.linkedin.com/shareArticle?mini=true&url=" + pageUrl;
                socialWindow(url);
            });
        });
    };

    function socialWindow(url) {
        var left = (screen.width - 570) / 2;
        var top = (screen.height - 570) / 2;
        var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left;
        window.open(url, "NewWindow", params);
    };
</script>