<?php include('admin/config.php');
include('header.php');

$getblog_details = mysqli_fetch_assoc(mysqli_query($conn, "SELECT * FROM tbl_blogs WHERE id = '$_GET[blogid]' AND status = '1'"));
$getblogimg = mysqli_query($conn, "SELECT * FROM tbl_blog_images WHERE blog_id = '$_GET[blogid]'");
?>


<style>
    .blog-active {
        color: #f58110!important;
    }
</style>


<div class="sub-banner">
  <img src="assets/img/sub-banner/contact-us.jpg" class="img-fluid" alt="">
</div>



<main id="main">






<section class="blogs-details01">
  <div class="container">

    <h1><?= $getblog_details['tName'];?></h1>


    <div class="row d-flex justify-content-center">
      <div class="col-lg-10 col-md-10">

        <div class="b-details-box01">
          <div class="aligner">
            <div class="owl-carousel owl-theme" id="articles01">
              <?php foreach ($getblogimg as $key => $bvalue) { ?>
              <div class="item">
                <a href="<?= $bvalue['image_path'];?>" data-lightbox="gallery">
                  <img src="<?= $bvalue['image_path'];?>" class="img-fluid" alt="Green Sparrow">
                </a>
              </div>
              <?php } ?>            
              
            </div>
          </div>
        </div>

      </div>
    </div>


    <div class="row d-flex justify-content-center">

      <div class="col-lg-10 col-md-10">
        <div class="b-details-box01"> 
          <!-- <h4><?= $getblog_details['tName'];?></h4> -->
          <p>
            <?= $getblog_details['tDescription'];?>
          </p>
        </div>
      </div>

    </div>

 
  </div>
</section>






</main>

  <!-- ======= Footer ======= -->
  <?php include('footer.php');?>

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>


  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>


<script src="assets/slider/jquery.min.js"></script> 
<script src="assets/slider/owl.carousel.js"></script>
<script src="assets/slider/lightbox.min.js"></script>



<script type="text/javascript">
  
$('#articles01').owlCarousel({
    items:1,
    loop:true,
    margin:10,
    nav:true,
    autoplay:true,
    navText : ["<i class='bi bi-chevron-left'></i>","<i class='bi bi-chevron-right'></i>"],
    dots:false,
    startPosition: 0,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
})


</script>



</body>
</html>